diff --git a/.eslintrc.js b/.eslintrc.js
index 3ca66abb..9a2613c0 100644
--- a/.eslintrc.js
+++ b/.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
}
diff --git a/.github/workflows/reports.yml b/.github/workflows/reports.yml
index 0e9265da..a9f1ddb2 100644
--- a/.github/workflows/reports.yml
+++ b/.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'
diff --git a/.gitignore b/.gitignore
index 9857b82d..987ec122 100644
--- a/.gitignore
+++ b/.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
\ No newline at end of file
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
index 99f2938f..cd8e486b 100644
--- a/.storybook/preview.jsx
+++ b/.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'
diff --git a/config/nginx.conf.erb b/config/nginx.conf.erb
index 5a0182e0..407d84cc 100644
--- a/config/nginx.conf.erb
+++ b/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;
diff --git a/elements/.eslintrc.js b/elements/.eslintrc.js
deleted file mode 100644
index bbd31687..00000000
--- a/elements/.eslintrc.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
- env: {
- browser: true
- }
-}
diff --git a/elements/index.js b/elements/index.js
deleted file mode 100644
index dc780084..00000000
--- a/elements/index.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../dist/elements/index.js')
diff --git a/elements/index.mjs b/elements/index.mjs
deleted file mode 100644
index a8528ea9..00000000
--- a/elements/index.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export * from '../dist/elements/index.mjs'
diff --git a/package.json b/package.json
index 9e838094..f9e36d0e 100644
--- a/package.json
+++ b/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": {
diff --git a/react/index.js b/react/index.js
deleted file mode 100644
index d470eeea..00000000
--- a/react/index.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../dist/react/index.js')
diff --git a/react/index.mjs b/react/index.mjs
deleted file mode 100644
index 6f29458a..00000000
--- a/react/index.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export * from '../dist/react/index.mjs'
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 4faea1b0..d9b7b674 100644
--- a/rollup.config.mjs
+++ b/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,
diff --git a/scripts/build-css-manifest.js b/scripts/build-css-manifest.js
index c1c53d52..2d23644d 100755
--- a/scripts/build-css-manifest.js
+++ b/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
diff --git a/scripts/build-urls.sh b/scripts/build-urls.sh
index 0986f367..ccabc77c 100755
--- a/scripts/build-urls.sh
+++ b/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
\ No newline at end of file
diff --git a/scripts/prepublish-checks.sh b/scripts/check-prepublish-files.sh
similarity index 68%
rename from scripts/prepublish-checks.sh
rename to scripts/check-prepublish-files.sh
index e8f24990..cc59f842 100755
--- a/scripts/prepublish-checks.sh
+++ b/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!"
diff --git a/scripts/check-website.sh b/scripts/check-website.sh
new file mode 100755
index 00000000..3c2490cc
--- /dev/null
+++ b/scripts/check-website.sh
@@ -0,0 +1,2 @@
+#!/bin/bash
+# TODO: check stuff
\ No newline at end of file
diff --git a/scripts/manifest.mjs b/scripts/manifest.mjs
index 64741863..372f2cb8 100755
--- a/scripts/manifest.mjs
+++ b/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')
})
})
diff --git a/tsconfig.json b/tsconfig.json
index ba61916f..e06624da 100644
--- a/tsconfig.json
+++ b/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"
diff --git a/website/docs/develop/css/index.mdx b/website/docs/develop/css/index.mdx
index 4a052c54..9dd48c9f 100644
--- a/website/docs/develop/css/index.mdx
+++ b/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
-{`
-`}
+{`
+`}
### Only utilities
-{``}
+{``}
:::tip
diff --git a/website/docs/develop/develop.mdx b/website/docs/develop/develop.mdx
index 448c8640..020ea0e3 100644
--- a/website/docs/develop/develop.mdx
+++ b/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
diff --git a/website/docs/develop/install.mdx b/website/docs/develop/install.mdx
index 46f4ecc0..4a3c1ca1 100644
--- a/website/docs/develop/install.mdx
+++ b/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 ``:
- {``}
+ {``}
See the [CSS guide](/develop/css) for more detailed usage instructions.
diff --git a/website/docs/develop/javascript.mdx b/website/docs/develop/javascript.mdx
index 1936e04d..c5ba0bff 100644
--- a/website/docs/develop/javascript.mdx
+++ b/website/docs/develop/javascript.mdx
@@ -7,7 +7,7 @@ bundles:
desc: The 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) */
diff --git a/website/docs/libraries/tailwindClasses.mdx b/website/docs/libraries/tailwindClasses.mdx
index 38dbf545..c86b8232 100644
--- a/website/docs/libraries/tailwindClasses.mdx
+++ b/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.
diff --git a/website/src/components/EncapsulatedStyleRoot.tsx b/website/src/components/EncapsulatedStyleRoot.tsx
index 9a5e6bf0..547578e8 100644
--- a/website/src/components/EncapsulatedStyleRoot.tsx
+++ b/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 }) {
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index df5205bc..adfd8c57 100644
--- a/website/src/css/custom.css
+++ b/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;
diff --git a/website/src/plugins/sfgov/index.js b/website/src/plugins/sfgov/index.js
index 357e9d5d..87cbc440 100644
--- a/website/src/plugins/sfgov/index.js
+++ b/website/src/plugins/sfgov/index.js
@@ -1,5 +1,5 @@
const { join } = require('path')
-const { getPreloadLinks } = require('../../../../dist/react')
+const { getPreloadLinks } = require('../../../../react')
const aliases = {
'@sfgov/design-system': join(__dirname, '../../../..') + '/'
}
diff --git a/website/tsconfig.json b/website/tsconfig.json
index a6026be5..ac28d3f7 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -2,6 +2,11 @@
"extends": "@tsconfig/docusaurus/tsconfig.json",
"compilerOptions": {
"baseUrl": ".",
- "resolveJsonModule": true
+ "resolveJsonModule": true,
+ "paths": {
+ "@sfgov/design-system/react": [
+ "../react"
+ ]
+ }
}
}
\ No newline at end of file