Release 2.5.0 (#108)

* Set up Docusaurus! (#94)

* stub out monorepo with docusaurus

* add it up

* chore(git): add dist + public to .gitignore

* chore(npm): update package-lock.json

* chore(docs): delete blog directory

* fix(docs): add docs/**/*.md? to tailwind content

* chore(docs): ignore website/.docusaurus

* chore(docs): delete more blog files

* feat(docs): add top-level package workspaces

* chore(docs): upgrade color swatches to use componets

* chore(lint): newline

* fix(docs): tweak docusaurus config

* chore(monorepo): move most files to packages/sfgov-design-system

* chore(sfgov-design-system): restore babel.config.js

* chore(lint): re-lint js in sfgov-design-system

* chore(babel): move docusaurus babel config to the right place

* chore(deps): hoist eslint + plugins to top level

* chore(deps): move shellcheck up to root

* fix(docs): upgrade install page mdx w/url utils

* chore(monorepo): add build, lint, and test top-level scripts

* chore(docs): delete unncecessary placeholder pages

* chore(docs): move forms page

* chore(docs): consolidate more docs

* chore(monorepo): update .gitignore for monorepo

* chore(docs): disable some sidebars for new docs layout

* chore(docs): update docusaurus config bigs, use repoUrl in utils

* chore(ci): disable primer/publish for now

* chore(ci): add back markdownlint problem matcher

* chore(monorepo): restore css bundles, postcss config

* chore(deps): remove eleventy, update build scripts

* feat(publish): add manifest.json + shared build script

* chore(deps): rebuild /package.json w/o 11ty

* chore(build): update build scripts w/manifest.json

* chore(lint): remove unused import from manifest.js

* chore(deps): tidy up docs deps

* chore(lint): add /babel.config.js, lint /.eslintrc.js

* chore(lint): reduce dupe overrides in .eslintrc.js's

* chore(lint): get stylelint back up and running

* chore(lint): lint css

* chore(lint): lint postcss.config.js

* chore(npm): rebuild /package-lock.json

* chore(postcss): restore postcss config

* chore(babel): set up website/babel.config.js + eslintrc

* chore(build): fix .js manifest entries

* chore(lint): lint tailwind.config.js

* chore(build): write summary data in manifest.json

* chore(docs): rename docs/developer to docs/develop

* chore(docs): consolidate constants, add packageUrl()

* chore(build): comment out docs.js bundle

* fix(babel): add sourceType: 'unambiguous'

* chore(lint): whitespace

* feat(docs): bring in design system assets, live code blocks

* chore(git): ignore .DS_Store

* chore(docs): rename colorSwatch to ColorSwatch, lint

* chore(docs): delete unused bits, lint

* chore(git): ignore .DS_Store

* feat(docs): add some docs components

* chore(docs): refactor docs with MDX, etc.

* chore: delete unused markdown-page.md

* chore(deps): replace <clipboard-copy> w/react component

* chore(docs): build to website/public

* fix(docs): don't throw on broken links (for now)

* chore: rename some docs to .jsx

* chore(docs): purge tailwind

* chore(repo): bootstrap lerna-lite

* chore(docs): update path of static docs

* fix(heroku): use node 14.x (not 18!)

* fix(build): pin npm version at 8.x

* fix(heroku): bootstrap all the packages before building

* fix(heroku): reorder workspaces

* fix(heroku): try setting some more env vars

* chore(npm): use 14.x or 16.x

* chore(deps): make sure website has sfgov-design-system

* chore(lint): nix unused vars

* chore(heroku): delete heroku actions workflow

* chore(metrics): fix paths to built files

* fix(browserslist): rename .browserslistrc

* chore(lint): newline

* fix(ci): revive primer/publish

* fix(ci): specify node + npm versions

* chore(ci): use "lerna run lint"; node@16

* fix(ci): only build sfgov-design-system

* Adds a button style reset to clear defaults

* Fully styles the color swatch

* - Adds focus/blur synthetic events
- Adds aria-label to the button

* Set up GitHub Codespaces (#96)

* chore(codespaces): stub out devcontainer.json

* chore(editor): add vscode settings + extensions

* chore(npm): add start script to root package.json

* chore(lint): use tabs -> spaces

* chore(editor): stub out .editorconfig

* fix(codespaces): build sfgov-design-system prestart

* feat(vscode): add build + start tasks

* chore(vscode): use 2-space indentation

* feat(vscode): add launch.json for debugging docs

* feat(build): install wireit

* fix(build): use wireit in sfgov-design-system

* chore(git): ignore **/.eslintcache

* chore(docs): use wireit in website

* chore(docs): remove some files from website/static/

* chore(deps): nix watchy

* chore(deps): remove npm-run-all (wireit!)

* chore(npm): use lerna to run top-level lint + test

* chore(npm): add lint script to website

* fix(vscode): try building before launch/debug

* fix(lint): add react/recommended eslint preset

* chore(docs): add prop-types to homepage features

* chore(docs): add BundleTable.propTypes

* chore(lint): add children + className propTypes validations

* Brings back the library link

* Moves the 'Swatches' into a reusable component

* Moves the color swatches into a color library

* Fixes two linting errors

* Updates color swatch for white

* - Updates the styling for the inline swatch
- Adds a color label to the inline swatch
- Updates the mdx file to use updated inline

* Makes sure the link is correct

* Adds the inline color to more places

* Adds a default value to addBoarder

* Creates a new icon sample component

* Adds font mono to the color hex

* Creates a new icon library view

* Updates the icon use and design documentation

* chore: delete .DS_Store

* chore: delete other .DS_Store files

* feat(icons): export { icons } from sfgov-design-system/src/icons

* fix(docs): get the icon library working again

* chore(docs): tidy up icon library mdx

* chore: nix 'icons' export from sfgov-design-system/src/icons

* chore(docs): move "using icons" docs to components

* docs: tweak icon design guidelines front matter

* chore(lint): install stylelint-config-tailwindcss, ignore theme()

* Updates the infima color vars for now

* - Adds closing tags for img
- Adds closing tags for br

* Updates the comment format

* ain't nothin but a lil bitta swizzlin (nav/sidebar)

* chore(eslint): make react/prop-types warn, skipUndeclared

* docs: remove placeholder form fields doc list

* Updates beta version

* Adds a landing page description

* - Updates the footer content
- Updates the tagline
- Updates config to handle @apply and custom presets in css

* Updates the landing page design

* - Updates the font import to use variable font
- Updates nav logo styling

* Updates the top portion of the landing page

* fix regex for color swatch

* Adds the logo for use in the footer

* - Swizzles the footer layout and footer logo
- Styles the footer

* Updates the design of the top navigation

* Updates the design of the sidebar items

* Changes paddingleft to padding

* - Creates a BigLink component
- Includes BigLink component in icons and colors
- Changes icons file extension to mdx

* - Moves the color libraries to a color directory
- Updates the link to the color directory in the color doc
- Updates the names of the two color library names

* - Changes the file extension to mdx
- Uses the new type-focused components

* Adds mono import

* Creates new type-focused components

* Updates to use the CodeBlock from Docusaurus

* - Renames the "spacing" page to "layout"
- Adds the live editor to each of the examples

* Makes minor updates to deal with proptype errors

* - Updates to the 2.0.0-beta.22 release
- Updates an icon path in a swizzled file

* - Updates to the first RC
- Fixes an import being broken by the update

* fix broken links and add front end redirects

* mark unused filepath, keeping for reference tho

* Initial version of the tailwind class list

* Removes unused imports

* Removes unneeded escape characters from the regex

* test redirects fix

* chore(npm): npm audit fix

* chore(docs): update new css docs for Docusaurus

* fix(docs): update buttons docs for Docusaurus

* chore(lint): tidy up docs components

* fix(develop): nix develop command

* chore(deps): fix stylelint-config-tailwindcss version in package-lock

* chore(npm): rebuild package-lock

* fix(docs): fix <pre> whitespace

* chore(build): tweak wireit "clean" bits

* chore(tailwind): simplify content field

* feat(docs): add DoDont, Do and Dont components

* chore(docs): rewrite button docs with DoDont

* chore(eslint): allow trailing spaces in comments

* chore(docs): add doc comment in <DoDont>

* fix(docs): sort icons alphabetically

* fix(docs): fix action blue swatch label

* feat(tailwind): add gridAutoFlow plugin

* fix(docs): don't use wireit for build; serve from ./public

* fix(docs): fix button specs path

* chore(lint): remove unused border components

* fix(lint): detect react version in eslint config

* chore(lint): lint docs (theme) components

* fix(icons): tweak icon replace logic

* chore: nix "docs/**/*.md?" from tailwind content list

* chore(docs): freshen up the website readme

* fix(sfgov-icon): fix svg twiddling bits

* fix(sfgov-icon): another attempt at fixing this...

* feat(sfgov-icon): set window.SFGovIcon

* Installs 'use-bus' for dispatching in the utillist

* Adds a description to the tailwind class list page

* Completes the styling of the utilist page

* Splits up the components into separate files

* fix(eslint): nix no-unused-vars override

* chore(npm): fix engine versions

* chore(deps): enforce consistent shared dependency versions

* chore: comment out unused BorderColor + BorderWidth for now

* chore: add validate npm script to /

* chore(docs): normalize icon data interface

* chore(docs): fix tailwind content paths

* chore(docs): output paths to build.log

* fix(docs): fix utility class link

* fix: hush babel about named json imports

* chore(deps): npm audit fix

* Quick update to the json file

* fix(docs): use dedent for css code blocks

* feat(docs): throw on broken links!

* DESSYS-217 lint md and mdx files (#100)

* DESSYS-217 lint md and mdx files

* remove eslint-mdx for now

* fix package-lock.json conflicts

* fix lint job

* Updates Docusaurus to 2.0.1

* Updates links within the content

* Updates the landing page images

* Updates the landing page

* Adds a storybook test page

* Moves the forms landing page to the directory

* Creates a test storybook embed in md files

* chore(docs): remove background color from Do + Dont

* Removes unused import

* Removes the test page that contained storybook

* Adds some non-breaking spaces to the content

* Updates the landing page

* Fixes landing page links

* Docusaurus: add custom Playground component (#102)

* chore(docs): fix inline icons in details docs

* chore(eslint): suggest lines before function declarations

* feat(docs): build out styled code playground

* chore(deps): upgrade docusaurus to 2.0.1

* chore(docs): install react-shadow

* chore: tweak export style

* chore(docs): add EncapsulatedStyleRoot

* - Removes commented out code
- Adds a class to the github button to add icon

* Adds an icon instead of "github" for the link

* Adds support for the docusaurus dark mode

* Makes updates to allow for better dark mode

* Adds the new do/don't component

* fix(docs): fix edit links

* fix(docs): tweak spawnSync() signature

* script for tailwind classes

* fix build script for css-manifest

* another fix attempt

* sorry for all the spam everyone :sob emoji:

* chore(docs): add figma link to KBD docs

* - Splits the Feature component into a sep file
- Replaces landing images with svg components

* fix(build): fix circular build-css-manifest dependencies

* chore(build): nix docs.js bundle

* Removes a console log

* fix(build): make sure css builds before manifest

* Heroku: upgrade stack, switch to nginx buildpack (#103)

* chore(heroku): upgrade stack, switch to nginx buildpack

* chore(heroku): delete static.json

* chore(heroku): stub out nginx config

* chore(heroku): mv config/nginx.conf{,.erb}

* chore(heroku): use papertrail

* chore(heroku): add Procfile for nginx solo mode

* chore(heroku): rewrite nginx.conf.erb from example

* chore(vscode): add $schema to app.json

* Fixes the link destinations

* Corrects the padding to match quick links

* fix(docs): tweak DoDont component borders

* Fix icons (#105)

* fix(build): fix circular build-css-manifest dependencies

* chore(build): nix docs.js bundle

* feat(css): add icons.css bundle + import in sfds.css

* chore(docs): install raw-loader

* chore(docs): move sfds.js import to docusaurus config

* chore(docs): import sfds.css + fonts.css in custom stylesheet

* chore(docs): inline sfds styles in EncapsulatedStyleRoot

* feat(css): add icons.css bundle, import in sfds.css

* fix(build): fix manifest build dependencies

* chore(docs): add note about styling <sfgov-icon>

* chore(docs): nix build.log output

* fix(docs): add back ExecutionEnvironment.canUseDOM check

* chore(docs): wrap EncapsulatedStyleRoot in browser check

* Move redirects to nginx config (#104)

* chore(vscode): tell vscode how to treat nginx.conf.erb

* chore(docs): disable client redirects plugin

* chore(docs): rename "Forms and fields" dir → "forms"

* chore(nginx): nix most env vars, add redirect map

* fix(nginx): move redirect map out of server block

* fix broken links our build caught :)

Co-authored-by: jacksongonzales <[email protected]>

* chore: bump sfgov-design-system to 2.5.0

* fix components link on home page

* Fix <sfgov-icon> in Docusaurus/React (#106)

* fix(docs): use memoized icon component

* chore(deps): update wireit

* chore(build): improve --watch file coverage

* fix(SFGovIcon): fall back on any child <svg> if __svg is unset

* fix(docs): rework SFGovIconWrapper to re-render properly

Co-authored-by: jacksongonzales <[email protected]>
Co-authored-by: Corey Hunt <[email protected]>

* Clean up dev dependencies (#109)

* chore(deps): clean up unused dev deps in sfgov-design-system

* chore: delete unused lib/git.js

Co-authored-by: jacksongonzales <[email protected]>
Co-authored-by: Corey Hunt <[email protected]>

Author: 3 people

.browserslistrc

@@ -1,2 +1,2 @@
 > 0.25%
-not dead
+not dead

.devcontainer/devcontainer.json

@@ -0,0 +1,23 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.233.0/containers/javascript-node
+{
+  "name": "Dev container",
+  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:0-16",
+  // Set *default* container specific settings.json values on container create.
+  "settings": {},
+  // Add the IDs of extensions you want installed when the container is created.
+  "extensions": [
+    "dbaeumer.vscode-eslint",
+    "silvenon.mdx",
+    "stylelint.vscode-stylelint",
+    "DavidAnson.vscode-markdownlint"
+  ],
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [
+    3000
+  ],
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "npm install",
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node"
+}

.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.eleventy.js

@@ -10,7 +10,14 @@ module.exports = {
   rules: {
     'unicorn/expiring-todo-comments': ['error', {
       allowWarningComments: true
-    }]
+    }],
+    'no-trailing-spaces': ['warn', {
+      ignoreComments: true
+    }],
+    'padding-line-between-statements': [
+      'warn',
+      { blankLine: 'always', prev: '*', next: 'function' }
+    ]
   },
   overrides: [
     {
@@ -36,7 +43,7 @@ module.exports = {
       }
     },
     {
-      files: 'scripts/*.js',
+      files: '**/scripts/*.js',
       rules: {
         'node/shebang': 0
       }

.eslintrc.js

@@ -8,29 +8,27 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: '16.x'
           cache: npm
-      - run: npm ci
 
+      - run: npm install
       - uses: xt0rted/markdownlint-problem-matcher@v1
-      - run: npm run lint
+      - run: npx lerna run lint
 
       # this sets NODE_ENV=production for all of the build scripts
-      # (`npm ci` doesn't install anything if it's set earlier)
-      - run: |
-          echo NODE_ENV=production >> $GITHUB_ENV
+      - run: echo NODE_ENV=production >> $GITHUB_ENV
 
       # run these separately so that it's easier to see what failed
-      - run: npm run build-assets
-      - run: npm run build-docs
+      - run: npm run build -w sfgov-design-system
 
       # run pre-publish checks
-      - run: npm run prepublishOnly
+      - run: npm run prepublishOnly -w sfgov-design-system --if-present
 
       - uses: primer/[email protected]
         with:
           npm_args: --unsafe-perm --allow-same-version
           default_branch: main
+          dir: packages/sfgov-design-system
         env:
           GITHUB_TOKEN: ${{ github.token }}
           NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.github/workflows/ci.yml

@@ -9,4 +9,4 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: ${{ github.token }}
-          pattern: 'dist/**/*.{css,js}'
+          pattern: 'packages/sfgov-design-system/dist/**/*.{css,*js}'

.github/workflows/reports.yml

@@ -1,6 +1,7 @@
-**/.*.sw?
-*.tgz
-.env
-dist/
-node_modules/
-public/
+**/.DS_Store
+**/.eslintcache
+**/.wireit
+**/build
+**/dist
+**/manifest.json
+**/node_modules

.gitignore

@@ -1,2 +1,2 @@
 app.json
-static.json
+static.json

.npmignore

@@ -1,23 +1,14 @@
 module.exports = {
   extends: [
-    'stylelint-config-standard'
-  ],
-  plugins: [
-    './lib/stylelint/expiring-todo-comments'
+    'stylelint-config-standard',
+    'stylelint-config-tailwindcss'
   ],
+  plugins: ['stylelint-expiring-todo-comments'],
   rules: {
-    'at-rule-no-unknown': [true, {
-      ignoreAtRules: [
-        'apply',
-        'layer',
-        'responsive',
-        'screen',
-        'tailwind',
-        'variants'
-      ]
-    }],
-    'local/expiring-todo-comments': [true, {
+    'function-no-unknown': [true, {
+      ignoreFunctions: ['theme']
     }],
+    'sfgov/expiring-todo-comments': [true, {}],
     'string-quotes': 'single'
   }
 }