Set up publishing to npm (#569)

Author: calebeby

.eslintignore

@@ -0,0 +1,3 @@
+/dist
+/src/design-tokens/generated
+/storybook-static

.github/workflows/ci.yml

@@ -24,3 +24,27 @@ jobs:
         run: npm ci
       - name: Run Lint
         run: npm run check-lint
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js 12
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-build-${{ env.cache-name }}-
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+      - name: Install Dependencies
+        run: npm ci
+      - name: Run Preprocess
+        run: npm run preprocess
+      - name: Run Build
+        run: npm run build

.prettierignore

@@ -0,0 +1,2 @@
+/dist
+/storybook-static

.storybook/main.js

@@ -42,11 +42,14 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              // Dart Sass performs much better than Node Sass
+              // Dart Sass is easier to install than Node Sass
               implementation: require('sass'),
               sassOptions: {
-                // Import Theo design tokens as SCSS variables
-                importer: [require('../.theo/sass-importer')],
+                importer: [
+                  require('../glob-sass-importer'),
+                  // Import Theo design tokens as SCSS variables
+                  require('../.theo/sass-importer'),
+                ],
               },
             },
           },

CONTRIBUTING.md

@@ -0,0 +1,6 @@
+## Publishing to npm
+
+1. `git checkout master`
+2. `git pull`
+3. Make sure you have a clean working tree (`git status` should show no changes)
+4. `npm publish` - This will automatically install and compile everything, run linting, and publish

README.md

@@ -15,6 +15,11 @@ If you’re looking for the most stable version of our pattern library, check ou
 1. `npm ci`
 1. `npm run storybook`
 
+## Building
+
+- `npm run build` Builds CSS+JS for npm package
+- `npm run build-storybook` Creates a static storybook site build, for example for publishing the pattern library to Netlify
+
 ## Project Structure
 
 ```

glob-sass-importer.js

@@ -0,0 +1,27 @@
+const glob = require('tiny-glob');
+const path = require('path');
+
+/** @typedef {{file: string} | {contents: string} | null } ResolveResult */
+
+/**
+ * Custom glob importer
+ * Needed to implement this because none of the sass glob importers on npm output @use
+ * @param {string} url Raw path in source code
+ * @param {string} currentPath Path to the current file
+ * @param {(result: ResolveResult) => void} done Callback function for async resolvers
+ * @returns {ResolveResult | void}
+ */
+const globImporter = (url, currentPath, done) => {
+  // This is a really lazy check but it is easy and good enough
+  const isGlob = url.includes('*');
+  if (!isGlob) return null;
+  glob(url, { cwd: path.dirname(currentPath) }).then((matchingPaths) => {
+    // Generates a fake file that has the expanded @forward statements
+    const contents = matchingPaths
+      .map((filePath) => `@forward "${filePath}";`)
+      .join('\n');
+    done({ contents });
+  });
+};
+
+module.exports = globImporter;

gulpfile.js/tasks/build.js

@@ -0,0 +1,62 @@
+const { src, dest, parallel } = require('gulp');
+
+const sass = require('gulp-sass');
+const rename = require('gulp-rename');
+const postcss = require('gulp-postcss');
+const cssnano = require('cssnano');
+
+const rollup = require('rollup');
+const path = require('path');
+const multiEntry = require('@rollup/plugin-multi-entry');
+const nodeResolve = require('@rollup/plugin-node-resolve');
+const { terser } = require('rollup-plugin-terser');
+
+sass.compiler = require('sass');
+
+const outDir = 'dist';
+
+const buildSass = () => {
+  return src('./src/index.scss')
+    .pipe(
+      sass({
+        importer: [
+          require('../../glob-sass-importer'),
+          // Import Theo design tokens as SCSS variables
+          require('../../.theo/sass-importer'),
+        ],
+      }).on('error', sass.logError)
+    )
+    .pipe(rename({ basename: 'standalone' }))
+    .pipe(dest(outDir))
+    .pipe(postcss([cssnano()]))
+    .pipe(rename({ extname: '.min.css' }))
+    .pipe(dest(outDir));
+};
+
+const buildJS = async () => {
+  const pathName = 'cloudfour-patterns';
+  const globalName = 'cloudfourPatterns';
+  const bundle = await rollup.rollup({
+    input: 'src/{objects,components}/**/*.js',
+    plugins: [multiEntry(), nodeResolve()],
+  });
+  await Promise.all([
+    bundle.write({ format: 'esm', file: path.join(outDir, `${pathName}.mjs`) }),
+    bundle.write({
+      format: 'umd',
+      name: globalName,
+      file: path.join(outDir, `${pathName}.js`),
+    }),
+    bundle.write({
+      format: 'umd',
+      name: globalName,
+      file: path.join(outDir, `${pathName}.min.js`),
+      plugins: [terser()],
+    }),
+  ]);
+};
+
+const build = parallel(buildSass, buildJS);
+
+// Expose to Gulp
+module.exports = build;

gulpfile.js/tasks/theo-to-mdx.js

@@ -2,6 +2,7 @@ const { src, dest } = require('gulp');
 const gulpTheo = require('gulp-theo');
 // Requiring this file applies our Theo customizations to gulp-theo
 require('../../.theo');
+const prettier = require('gulp-prettier');
 
 // Gulp task
 function theoToMdx() {
@@ -17,6 +18,7 @@ function theoToMdx() {
         },
       })
     )
+    .pipe(prettier())
     .pipe(dest('src/design-tokens/generated'));
 }