Parcel build and publish workflow

.eslintignore

@@ -2,3 +2,4 @@ packages/@spectrum-icons/color/**
 packages/@spectrum-icons/ui/**
 packages/@spectrum-icons/workflow/**
 node_modules
+packages/*/*/dist

.github/workflows/publish.yaml

@@ -0,0 +1,35 @@
+name: Publish
+on:
+  push:
+    branches:
+      - next
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+    - name: Use Node 12
+      uses: actions/setup-node@v1
+      with:
+        node_version: 12.x
+    - name: Write npmrc
+      env:
+        NPMRC: ${{ secrets.NPMRC }}
+      run: echo "$NPMRC" > .npmrc
+    - name: install
+      run: yarn install  
+    - name: Configure CI Git User
+      run: |
+        git remote rm origin
+        git remote add origin "https://github-actions:[email protected]/adobe/react-spectrum-v3.git"
+        git fetch
+        git config --global user.email [email protected]
+        git config --global user.name GitHub Actions
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    - name: deploy
+      run: |
+        git reset --hard
+        git checkout next
+        git reset --hard origin/next
+        make ci

.gitignore

@@ -1,6 +1,5 @@
 .DS_Store
 coverage
-lib
 node_modules
 npm-debug.log
 test-reports.xml
@@ -9,6 +8,7 @@ dist
 .idea
 .package-lock.json
 .cache
+.parcel-cache
 
 dist
 public

.storybook-v3/webpack.config.js

@@ -85,7 +85,7 @@ module.exports = ({config}, env) => {
               loader: 'postcss-loader',
               options: {
                 ident: 'postcss',
-                plugins: require('./postcss')(true)
+                plugins: require('../postcss.config').plugins
               }
             }
           ],

Makefile

@@ -2,7 +2,7 @@
 
 SHELL := /bin/bash
 PATH := ./node_modules/.bin:$(PATH)
-NPM_REGISTRY=https://artifactory.corp.adobe.com:443/artifactory/api/npm/npm-react-release/
+NPM_REGISTRY=https://artifactory-uw2.adobeitc.com/artifactory/api/npm/npm-rsp-tmp-release/
 [email protected]
 
 all: node_modules
@@ -55,47 +55,27 @@ clean_docs_node_modules:
 lint:
 	yarn check-types
 	eslint packages --ext .js,.ts,.tsx
+	node lint-packages.js
 
 test:
 	yarn jest
 
 ci-test: lint test
 
 storybook:
-	yarn build-storybook
+	NODE_ENV=storybook yarn build-storybook
 
 deploy: storybook docs
 	ssh -oStrictHostKeyChecking=no -oUserKnownHostsFile=/dev/null $(SERVER) mkdir -p "~/rsp"
 	scp -oStrictHostKeyChecking=no -oUserKnownHostsFile=/dev/null -r documentation/public/* "$(SERVER):~/rsp/."
 	scp -oStrictHostKeyChecking=no -oUserKnownHostsFile=/dev/null -r public/* "$(SERVER):~/rsp/."
 
-ci-deploy:
-	@if [ "$$VERSION" == "major" ] || [ "$$VERSION" == "minor" ] || [ "$$VERSION" == "patch" ] || [ "$$VERSION" == "website only" ]; then \
-		$(MAKE) deploy; \
-	fi
-
-# Run this as make version VERSION={patch|minor|major}
-version:
-	lerna version ${VERSION} --yes --no-commit-hooks -m "chore(release): publish"
-	cp src/package.json dist/package.json
-
-ci-version:
-	if [ "$$VERSION" != "publish only" ]; then \
-		$(MAKE) version; \
-	fi
-
-publish: build ci-version
-	lerna publish from-git --yes --registry $(NPM_REGISTRY) --contents dist
+# for now doesn't have deploy since v3 doesn't have a place for docs and stuff yet
+ci:
+	$(MAKE) publish
 
-ci-publish:
-	@if [ "$$VERSION" != "website only" ]; then \
-		$(MAKE) publish; \
-	fi
+publish: build
+	lerna publish from-package --yes --registry $(NPM_REGISTRY)
 
-# Run this on Jenkins with VERSION={patch|minor|major} as an argument, this will bump all the changed packages
-# So major bumps everything as major, minor bumps everything as minor, ...
-ci:
-	@if [ ! -z "$$VERSION" ] && [ "$$VERSION" != "noop" ]; then \
-		$(MAKE) ci-deploy; \
-		$(MAKE) ci-publish; \
-	fi
+build:
+	parcel build packages/@react-{spectrum,aria,stately}/*/ --no-minify

babel.config.js

@@ -2,7 +2,7 @@ module.exports = {
   presets: [
     '@babel/preset-typescript',
     '@babel/preset-react',
-    '@babel/preset-env'
+    '@parcel/babel-preset-env'
   ],
   env: {
     storybook: {
@@ -37,7 +37,8 @@ module.exports = {
     },
     production: {
       plugins: [
-        ['react-remove-properties', {'properties': ['data-testid']}]
+        ['react-remove-properties', {'properties': ['data-testid']}],
+        ['@babel/plugin-transform-runtime', {useESModules: true, version: '^7.6.2'}]
       ]
     }
   },

lerna.json

@@ -5,7 +5,7 @@
   "command": {
     "publish": {
       "allowBranch": [
-        "master"
+        "next"
       ]
     }
   }

.storybook-v3/lib/postcss-custom-properties-mapping → lib/postcss-custom-properties-mapping.js

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 var postcss = require('postcss');
 var valueParser = require('postcss-value-parser');
-var {mapping, static} = require('./vars');
+var {mapping, static: staticVars} = require('./vars');
 
 // match custom property inclusions
 const customPropertiesRegExp = /(^|[^\w-])var\([\W\w]+\)/;
@@ -29,8 +29,8 @@ module.exports = postcss.plugin('postcss-custom-properties-mapping', function ()
 
               // If the value is static, replace the variable with the value.
               // Otherwise, change the variable name to the mapped name.
-              if (static[v]) {
-                nodes.splice(index, 1, ...valueParser(`var(${v}, ${static[v]})`).nodes);
+              if (staticVars[v]) {
+                nodes.splice(index, 1, ...valueParser(`var(${v}, ${staticVars[v]})`).nodes);
               } else if (mapping[v]) {
                 nodes.splice(index, 1, ...valueParser(`var(${v}, var(${mapping[v]}))`).nodes);
               }

.storybook-v3/lib/vars.js → lib/vars.js

@@ -56,20 +56,20 @@ function getUniqueVars(vars) {
 function getVariableMappings(themes) {
   let themeVars = {};
   for (let theme of themes) {
-    let values = getVars(`packages/@adobe/spectrum-css-temp/vars/spectrum-${theme}.css`);
+    let values = getVars(`${__dirname}/../packages/@adobe/spectrum-css-temp/vars/spectrum-${theme}.css`);
     let mappings = getUniqueVars(values);
     themeVars[theme] = {values, mappings};
   }
 
   let {values, mappings} = themeVars[themes[0]];
   let mapping = {};
-  let static = {};
+  let staticVars = {};
   let vars = {};
   for (let v in mappings) {
     // If the variable does not change values across themes, save it in the static variables list
     let isStatic = themes.every(t => themeVars[t].values[v] === values[v]);
     if (isStatic) {
-      static[v] = values[v];
+      staticVars[v] = values[v];
       continue;
     }
 
@@ -107,12 +107,12 @@ function getVariableMappings(themes) {
     }
   }
 
-  return {mapping, vars, static};
+  return {mapping, vars, static: staticVars};
 }
 
 let themes = getVariableMappings(['dark', 'darkest', 'light', 'lightest', 'middark', 'midlight']);
 let scales = getVariableMappings(['large', 'medium']);
-let globals = getVars('packages/@adobe/spectrum-css-temp/vars/spectrum-global.css');
+let globals = getVars(`${__dirname}/../packages/@adobe/spectrum-css-temp/vars/spectrum-global.css`);
 
 exports.themes = themes.vars;
 exports.scales = scales.vars;

lint-packages.js

@@ -0,0 +1,30 @@
+const glob = require('fast-glob');
+const fs = require('fs');
+const assert = require('assert');
+
+let packages = glob.sync(__dirname + '/packages/@react-{aria,spectrum,stately}/*/package.json');
+
+for (let pkg of packages) {
+  let json = JSON.parse(fs.readFileSync(pkg));
+  assert(json.main, `${pkg} did not have "main"`);
+  assert(json.module, `${pkg} did not have "module"`);
+  assert(json.types, `${pkg} did not have "types"`);
+  assert(json.source, `${pkg} did not have "source"`);
+  assert.deepEqual(json.files, ['dist'], `${pkg} did not match "files"`);
+  assert.equal(json.sideEffects, false, `${pkg} is missing sideEffects: false`);
+  assert(!json.dependencies || !json.dependencies['@adobe/spectrum-css-temp'], `${pkg} has @adobe/spectrum-css-temp in dependencies instead of devDependencies`);
+  assert(json.dependencies && json.dependencies['@babel/runtime'], `${pkg} is missing a dependency on @babel/runtime`);
+
+  if (json.name.startsWith('@react-spectrum') && json.devDependencies && json.devDependencies['@adobe/spectrum-css-temp']) {
+    assert.deepEqual(json.targets, {
+      main: {
+        includeNodeModules: ['@adobe/spectrum-css-temp']
+      },
+      module: {
+        includeNodeModules: ['@adobe/spectrum-css-temp']
+      }
+    }, `${pkg} did not match "targets"`);
+  }
+
+  assert(json.publishConfig && json.publishConfig.access === 'public', `${pkg} has missing or incorrect publishConfig`);
+}

package.json

@@ -44,6 +44,7 @@
     "@babel/preset-typescript": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@babel/runtime": "^7.0.0",
+    "@parcel/babel-preset-env": "^2.0.0-alpha.2.1",
     "@react/collection-view": "^4.1.5",
     "@react/react-spectrum": "^2.24.0",
     "@react/react-spectrum-icons": "^2.1.0",
@@ -92,6 +93,7 @@
     "moment": "^2.15.1",
     "moment-range": "^3.0.3",
     "nyc": "^10.2.0",
+    "parcel": "^2.0.0-alpha.2.1",
     "plop": "^2.4.0",
     "postcss-calc": "^6.0.0",
     "postcss-custom-properties": "6.3.1",
@@ -102,6 +104,7 @@
     "postcss-inherit": "^4.1.0",
     "postcss-loader": "^3.0.0",
     "postcss-logical": "^4.0.0",
+    "postcss-modules": "^1.4.1",
     "postcss-nested": "^4.1.2",
     "postcss-svg": "^3.0.0",
     "prop-types": "^15.6.0",

packages/@adobe/react-spectrum/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/react-spectrum",
-  "version": "3.0.0",
+  "version": "3.0.0-alpha.1",
   "private": true,
   "description": "Spectrum UI components in React",
   "repository": {

packages/@adobe/spectrum-css-temp/components/actionmenu/vars.css

@@ -1,2 +1 @@
 @import './index.css';
-@import './skin.css';

packages/@adobe/spectrum-css-temp/components/typography/index.css

@@ -13,7 +13,7 @@ governing permissions and limitations under the License.
 @import '../commons/index.css';
 @import 'font.css';
 
-@mixin typography .spectrum-Body1 {}
+/*@mixin typography .spectrum-Body1 {}
 @mixin typography .spectrum-Body2 {}
 @mixin typography .spectrum-Body3 {}
 @mixin typography .spectrum-Body4 {}
@@ -128,7 +128,7 @@ governing permissions and limitations under the License.
 }
 @mixin typography .spectrum-Code5, body-code-5, true {
   font-family: var(--spectrum-body-code-5-text-font-family);
-}
+}*/
 
 /* topdoc
 {{ typography/typography.yml }}
@@ -155,6 +155,7 @@ governing permissions and limitations under the License.
   font-style: var(--spectrum-body-4-emphasis-text-font-style);
 }
 
+/*
 .spectrum-Body--large {
   @extend .spectrum-Body2;
 }
@@ -185,4 +186,4 @@ governing permissions and limitations under the License.
 
 .spectrum-Heading--subtitle3 {
   @extend .spectrum-Subheading;
-}
+}*/

packages/@adobe/spectrum-css-temp/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@adobe/spectrum-css-temp",
   "private": true,
-  "version": "3.0.0"
+  "version": "3.0.0-alpha.1"
 }

packages/@react-aria/button/index.ts

@@ -0,0 +1 @@
+export * from './src';