Fix website builds (#157)

* fix(build): fix build-urls.sh

* fix(build): fix errors + race conditions in website builds

* chore: add check-website.sh, rename check-prepublish-files.sh

* fix(website): fix path to nginx root (website/public -> public)

* Remove dist dirs in built output (#158)

* chore: git rm {elements,react}/index.{js,mjs}

* chore(git): refactor .gitignore for new outputs

* chore(lint): refactor eslint config for new outputs

* chore(ci): update build paths in reports workflow

* chore(lint): remove elements/.eslintrc.js

* chore(build): refactor output paths in package.json

* chore(build): refactor output paths in rollup config

* chore(build): refactor output paths in manifests and checks

* chore(build): fix files and exclude in tsconfig

* chore(build): add @sfgov/design-system/react path alias

* chore(build): update paths in docs imports

* fix(lint): disable import/no-unresolved for relative ../react

.eslintrc.js

@@ -2,10 +2,15 @@
 module.exports = {
   parser: '@babel/eslint-parser',
   ignorePatterns: [
-    'dist',
-    '*/public',
-    '**/.wireit',
+    // built files
+    'elements/index.*',
+    'react/index.*',
+    'public/**',
+    // caches, etc.
+    '.wireit/**',
+    // do _not_ ignore root JS configs
     '!.*.{js,mjs}',
+    // do _not_ ignore Storybook configs
     '!.storybook'
   ],
   plugins: [
@@ -55,7 +60,7 @@ module.exports = {
   reportUnusedDisableDirectives: true,
   overrides: [
     {
-      files: ['**/*.browser.{js,jsx,mjs,ts,tsx'],
+      files: ['elements/src/**/*.js'],
       env: {
         browser: true
       }

.github/workflows/reports.yml

@@ -9,5 +9,6 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: ${{ github.token }}
-          pattern: 'dist/**/*.{css,js,mjs,svg}'
+          pattern: '{css,elements,icons,react}/**/*.{css,js,mjs,svg}'
+          exclude: '*/src/**'
           build-script: 'build:ci'

.gitignore

@@ -1,10 +1,19 @@
+# etc.
 **/.DS_Store
-**/.env
-**/.eslintcache
 **/*.log
-**/.wireit
-**/build
-**/dist
-**/manifest.json
-node_modules/
-public/
+
+# secrets
+/.env
+
+# caches
+**/.eslintcache
+/.wireit/
+/node_modules/
+
+# built files
+/css/*.css*
+/css/*.json
+/elements/index.*
+/react/index.*
+/public/
+**/manifest.json

.storybook/preview.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import { addParameters, addDecorator } from '@storybook/react'
+// eslint-disable-next-line import/no-unresolved
 import { Box, breakpoints } from '../react'
 import { getDocsBaseUrl } from '../stories/utils'
 

config/nginx.conf.erb

@@ -59,7 +59,7 @@ http {
     charset UTF-8;
     port_in_redirect off;
     keepalive_timeout 5;
-    root website/public;
+    root public;
 
     location / {
       try_files $uri $uri/ /404.html;

package.json

@@ -35,6 +35,7 @@
     "build:storybook": "wireit",
     "build:urls": "wireit",
     "build:website": "wireit",
+    "build:website-index": "wireit",
     "figma-export": "env-cmd -f .env figma-export use-config",
     "lint": "wireit",
     "lint:css": "stylelint '**/src/*.css'",
@@ -43,10 +44,11 @@
     "lint:scripts": "shellcheck scripts/*.sh",
     "lint:storybook": "eslint --ext js,jsx,ts,tsx stories .storybook",
     "lint:website": "npx eslint --ext js,jsx,ts,tsx website",
-    "postbuild:website": "scripts/run-website-checks.sh",
+    "postbuild:website": "scripts/check-website.sh",
     "postbuild:css": "npm run build:css-manifest",
     "postfigma-export": "eslint --fix react/src/icons",
-    "prepublishOnly": "scripts/prepublish-checks.sh",
+    "prepublishOnly": "scripts/check-prepublish-files.sh",
+    "public-dir": "mkdir -p public",
     "serve:docs": "docusaurus serve website --dir public",
     "start": "wireit",
     "start:website": "wireit",
@@ -75,30 +77,30 @@
       ]
     },
     "build:css": {
-      "command": "postcss --verbose -d dist/css 'css/src/*.css'",
+      "command": "postcss --verbose -d css 'css/src/*.css'",
       "files": [
-        "css/**",
-        "postcss.config.js"
+        "css/src/**",
+        "postcss.config.js",
+        "package.json"
       ],
       "output": [
-        "dist/**/*.css{,.map}"
+        "css/*.css{,.map,.json}"
       ]
     },
     "build:css-manifest": {
       "command": "node scripts/build-css-manifest.js",
       "output": [
-        "dist/css/utilties.json"
+        "css/utilties.json"
       ],
       "files": [
-        "dist/css",
-        "!dist/css/**/*.json"
+        "css/*.css"
       ],
       "dependencies": [
         "build:css"
       ]
     },
     "build:docs": {
-      "command": "docusaurus build website --out-dir public",
+      "command": "docusaurus build website --out-dir $(pwd)/public",
       "dependencies": [
         "build:css",
         "build:js",
@@ -108,17 +110,20 @@
         "website/**"
       ],
       "output": [
-        "public"
+        "public",
+        "!public/{index,urls}.txt",
+        "!public/storybook"
       ]
     },
     "build:js": {
       "command": "rollup -c",
       "files": [
-        "{elements,icons,react}/src/**",
-        "*.config.*"
+        "{elements,react}/src/**",
+        "*.config.*",
+        "package.json"
       ],
       "output": [
-        "dist/**/*.{js,mjs}{,.map}"
+        "{elements,react}/*.{js,mjs,ts}{,.map}"
       ]
     },
     "build:website-index": {
@@ -136,14 +141,14 @@
       ]
     },
     "build:manifest": {
-      "command": "scripts/manifest.mjs 'dist/**/*.{css,js,mjs,svg}'",
+      "command": "scripts/manifest.mjs 'css/*.css' '{elements,react}/*.{js,mjs}' 'icons/svg/*.svg'",
       "dependencies": [
         "build:css",
         "build:js",
         "build:css-manifest"
       ],
       "output": [
-        "dist/manifest.json"
+        "manifest.json"
       ]
     },
     "build:storybook": {
@@ -153,6 +158,7 @@
         "public/storybook"
       ],
       "dependencies": [
+        "public-dir",
         "build:css",
         "build:js"
       ]
@@ -166,7 +172,7 @@
         "public/urls.txt"
       ],
       "dependencies": [
-        "build:docs"
+        "build:website-index"
       ]
     },
     "build:website": {

rollup.config.mjs

@@ -37,12 +37,12 @@ export default [
     plugins: commonPlugins,
     output: [
       {
-        file: 'dist/elements/index.mjs',
+        file: 'elements/index.mjs',
         format: 'esm',
         sourcemap
       },
       {
-        file: 'dist/elements/index.js',
+        file: 'elements/index.js',
         format: 'umd',
         name: 'sfgov.elements',
         sourcemap
@@ -54,12 +54,12 @@ export default [
     plugins: commonPlugins,
     output: [
       {
-        file: 'dist/react/index.mjs',
+        file: 'react/index.mjs',
         format: 'esm',
         sourcemap
       },
       {
-        file: 'dist/react/index.js',
+        file: 'react/index.js',
         format: 'umd',
         name: 'sfgov.react',
         sourcemap,

scripts/build-css-manifest.js

@@ -66,10 +66,10 @@ const tailwindCategories = [
 ]
 
 const utilities = [
-  getUtilities('dist/css/utilities.css').byProperty
+  getUtilities('css/utilities.css').byProperty
 ]
 const manifest = buildManifest(utilities)
-writeFileSync('dist/css/utilities.json', JSON.stringify(manifest, null, 2), 'utf8')
+writeFileSync('css/utilities.json', JSON.stringify(manifest, null, 2), 'utf8')
 
 function buildManifest (utilities) {
   const manifest = tailwindCategories

scripts/build-urls.sh

@@ -1,4 +1,4 @@
 #!/bin/bash
-grep '\\.html$' public/index.txt \
+grep '\.html$' public/index.txt \
   | perl -pe 's#/index.html#/#; s#^$#/#' \
   | sort > public/urls.txt

scripts/prepublish-checks.sh → scripts/check-prepublish-files.sh

@@ -18,11 +18,11 @@ function assert_exists () {
 
 echo "Checking for expected files..."
 assert_exists \
-  dist/css/{sfds,base,components,typography,utilities}.css \
-  elements/index.{js,mjs} dist/elements/index.{js,mjs} \
+  css/{sfds,base,components,typography,utilities}.css \
+  elements/index.{js,mjs,d.ts} \
   icons/index.json icons/svg/{accessibility,plus,minus}.svg \
-  react/index.{js,mjs} dist/react/index.{js,mjs} \
-  dist/manifest.json \
+  react/index.{js,mjs,d.ts} \
+  manifest.json \
 || exit 1
 
 echo "🚀 Good to go!"

scripts/check-website.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+# TODO: check stuff

scripts/manifest.mjs

@@ -33,6 +33,6 @@ globby([...globs, '!**/manifest.json'])
 
     // eslint-disable-next-line promise/no-nesting, promise/always-return
     return ensureDir('dist').then(() => {
-      writeFileSync('dist/manifest.json', JSON.stringify(manifest, null, 2), 'utf8')
+      writeFileSync('manifest.json', JSON.stringify(manifest, null, 2), 'utf8')
     })
   })

tsconfig.json

@@ -1,10 +1,10 @@
 {
   "files": [
-    "./elements/src/index.js",
-    "./react/src/index.ts"
+    "react/src/index.ts"
   ],
   "exclude": [
-    "**/dist/**",
+    "elements/index.{js,mjs}",
+    "react/index.{js,mjs}",
     "**/node_modules/**",
     "**/*.config.*",
     "**/scripts/*.js"

website/docs/develop/css/index.mdx

@@ -14,7 +14,7 @@ bundles:
     desc: Includes all of the [Tailwind]-generated utility classes.
 ---
 
-import manifest from '@sfgov/design-system/dist/manifest.json'
+import manifest from '@sfgov/design-system/manifest.json'
 import CodeBlock from '@theme/CodeBlock'
 import { defaultPackage } from '@site/constants'
 import { publishedUrl } from '@site/src/utils'
@@ -32,14 +32,14 @@ site without the need for a custom build process:
 ### All CSS and custom fonts
 
 <CodeBlock language='html'>
-{`<link rel="stylesheet" href="${publishedUrl('dist/css/sfds.css')}">
-<link rel="stylesheet" href="${publishedUrl('dist/css/fonts.css')}">`}
+{`<link rel="stylesheet" href="${publishedUrl('css/sfds.css')}">
+<link rel="stylesheet" href="${publishedUrl('css/fonts.css')}">`}
 </CodeBlock>
 
 ### Only utilities
 
 <CodeBlock language='html'>
-{`<link rel="stylesheet" href="${publishedUrl('dist/css/utilities.css')}">`}
+{`<link rel="stylesheet" href="${publishedUrl('css/utilities.css')}">`}
 </CodeBlock>
 
 :::tip

website/docs/develop/develop.mdx

@@ -39,9 +39,10 @@ is working by running:
 npm run build
 ```
 
-This should create files in the `dist/css`, `dist/react`, and
-`public` directories. Once you've confirmed that it's working,
-you can run one or both of the following:
+This should create `.css` files in the `css` directory, `index.js` and
+`index.mjs` in the `react` and `elements` directories, and a static website in
+the `public` directory. Once you've confirmed that it's working, you can run one
+or both of the following:
 
 - `npm run watch` watches the source files and rebuilds the CSS and JavaScript
   bundles when they change

website/docs/develop/install.mdx

@@ -39,7 +39,7 @@ to import all of the design system CSS from the latest version of the npm
 package from [unpkg], you could add the following to your `<head>`:
 
 <CodeBlock language='html'>
-  {`<link rel="stylesheet" href="${publishedUrl('/dist/css/sfds.css')}">`}
+  {`<link rel="stylesheet" href="${publishedUrl('css/sfds.css')}">`}
 </CodeBlock>
 
 See the [CSS guide](/develop/css) for more detailed usage instructions.

website/docs/develop/javascript.mdx

@@ -7,7 +7,7 @@ bundles:
     desc: The <sfgov-icon> custom element implementation
 ---
 
-import manifest from '@sfgov/design-system/dist/css/utilities.json'
+import manifest from '@sfgov/design-system/css/utilities.json'
 /* import { BundleTable } from '@site/src/components' */
 /* export const bundles = BundleTable.decorate(manifest.files, frontMatter.bundles) */
 

website/docs/libraries/tailwindClasses.mdx

@@ -7,7 +7,7 @@ hide_table_of_contents: true
 ---
 
 import TailwindView from "@site/src/components/TailwindDoc/tailwindView.js"
-import tailwindClasses from "@sfgov/design-system/dist/css/utilities.json"
+import tailwindClasses from "@sfgov/design-system/css/utilities.json"
 
 Below is a complete list of the customized Tailwind utility classes we use as a central part of the SF design system.
 

website/src/components/EncapsulatedStyleRoot.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import root from 'react-shadow'
 import useIsBrowser from '@docusaurus/useIsBrowser'
 // eslint-disable-next-line import/no-webpack-loader-syntax
-import sfdsStyles from '!!raw-loader!@sfgov/design-system/dist/css/sfds.css'
+import sfdsStyles from '!!raw-loader!@sfgov/design-system/css/sfds.css'
 import { getCssText, GlobalStaticStyles } from '@sfgov/design-system/react'
 
 export default function EncapsulatedStyleRoot ({ children, ...props }) {

website/src/css/custom.css

@@ -6,7 +6,7 @@
  * work well for content-centric websites.
  */
 
-@import '../../../dist/css/utilities.css';
+@import '../../../css/utilities.css';
 @import 'masonry-styles.css';
 
 @tailwind base;