From 8fcbcede12e8a39f0655161c2dbe10abee4c7b57 Mon Sep 17 00:00:00 2001 From: Jake Strawn Date: Wed, 3 Apr 2024 11:25:09 -0400 Subject: [PATCH] chore(cleanup): Adjustments to basic settings and README. --- packages/storybook/.storybook/main.ts | 11 +- packages/storybook/README.md | 112 +++++++++++++++--- packages/storybook/index.html | 5 +- packages/storybook/package.json | 11 +- packages/storybook/public/global.css | 13 ++ .../shared/outline-link/docs/outline-link.mdx | 2 +- packages/storybook/src/stories/Configure.mdx | 2 +- packages/storybook/vite.config.js | 27 +---- packages/storybook/yarn.lock | 43 ++++--- 9 files changed, 161 insertions(+), 65 deletions(-) diff --git a/packages/storybook/.storybook/main.ts b/packages/storybook/.storybook/main.ts index fe8c862..b10c0e5 100644 --- a/packages/storybook/.storybook/main.ts +++ b/packages/storybook/.storybook/main.ts @@ -1,8 +1,17 @@ import { StorybookConfig } from '@storybook/web-components-vite'; import { mergeConfig } from 'vite'; +const nodePath = '../node_modules/@phase2/outline-docs'; + const config: StorybookConfig = { - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + stories: [ + // Welcome guide. + `${nodePath}/src/guides/welcome/00-welcome.mdx`, + // Development guides. + // `${nodePath}/src/guides/development/**/*.mdx`, + '../src/**/*.mdx', + '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', + ], addons: ['@storybook/addon-links', '@storybook/addon-essentials'], framework: { name: '@storybook/web-components-vite', diff --git a/packages/storybook/README.md b/packages/storybook/README.md index 44f43a2..ce56163 100644 --- a/packages/storybook/README.md +++ b/packages/storybook/README.md @@ -20,20 +20,102 @@ To begin using this starter kit, follow these steps: 2. Install dependencies with `yarn install`. 3. Start the development server with `yarn dev`. +### Clone the `Storybook` starter kit + +```bash +git clone https://github.com/phase2/outline-templates +``` + +### Move starter kit to desired location + +In this example, we'll move the `packages/storybook` directory to a new location where we will set up a stand alone design system based on this starter kit. + +Assuming you are still in the directory where you ran the `git clone` command: + +```bash +cp -R outline-templates/packages/storybook ./design-system +``` + +### Install and setup project basics + +Enable version control with: + +```bash +# Change to the directory created during the copy command. +cd design-system +# Setup git AND commit immediately to track changes. +git init -b main +git add . +git commit -m "chore(init): Initializing Design System." +# You could now push your code if you have a location, otherwise +# changes can now still be tracked locally during testing. +``` + +Install and start project with: + +```bash +yarn install +yarn dev +``` + ## Scripts -- `yarn start`: Alias for `yarn dev`. -- `yarn dev`: Alias for `yarn watch`. -- `yarn watch`: Concurrently runs all watch scripts. -- `yarn watch:bundle`: Watches Vite build. -- `yarn watch:vite`: Starts Vite development server. -- `yarn watch:storybook`: Starts Storybook development server. -- `yarn build`: Concurrently runs all build scripts. -- `yarn build:vite`: Builds project using Vite. -- `yarn build:storybook`: Builds Storybook for production. -- `yarn clean`: Concurrently runs all clean scripts. -- `yarn clean:dist`: Removes the dist directory. -- `yarn clean:storybook`: Removes the storybook-static directory. -- `yarn clean:modules`: Removes the node_modules directory. -- `yarn reset`: Cleans and reinstalls dependencies. -- `yarn restart`: Resets and starts the development server. +### `yarn start` + +This command is an alias for `yarn dev`, which in turn starts the development server. + +### `yarn dev` + +An alias for `yarn watch`, this command initiates all the watch scripts to run concurrently. + +### `yarn watch` + +Runs all configured watch scripts at the same time, allowing for simultaneous monitoring and processing of changes across the project. + +### `yarn watch:bundle` + +Specifically watches the Vite build process for changes, ensuring that the build is updated with any changes made to the source files. + +### `yarn watch:vite` + +Starts the Vite development server, which serves your project with hot module replacement for a more efficient development experience. + +### `yarn watch:storybook` + +Launches the Storybook development server, providing a live preview of your components as you work on them. + +### `yarn build` + +Concurrently executes all build scripts, compiling the project for production deployment. + +### `yarn build:vite` + +Utilizes Vite to build the project, optimizing and bundling your code for production. + +### `yarn build:storybook` + +Builds your Storybook for production, outputting a static site that can be deployed or shared with stakeholders. + +### `yarn clean` + +Runs all "clean" scripts concurrently, which is useful for removing generated files and directories before a fresh build. + +### `yarn clean:dist` + +Removes the `dist` directory, clearing the distribution files from your project. + +### `yarn clean:storybook` + +Deletes the `storybook-static` directory, which contains the built version of Storybook. + +### `yarn clean:modules` + +Eliminates the `node_modules` directory, effectively removing all installed dependencies. + +### `yarn reset` + +Cleans the project by removing generated files and directories, then reinstalls all dependencies to ensure a clean state. + +### `yarn restart` + +Performs a reset of the project and then starts the development server, useful for when you want to start from a clean slate. diff --git a/packages/storybook/index.html b/packages/storybook/index.html index 25b889f..fb877bd 100644 --- a/packages/storybook/index.html +++ b/packages/storybook/index.html @@ -11,8 +11,9 @@ - OutlineCoreLink - OutlineLink +

outline-core-link

+

outline-link

+

Normal a tag link

diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 4fa1fdb..0f36fce 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -44,14 +44,15 @@ "node": ">=20" }, "dependencies": { - "@phase2/outline-adopted-stylesheets-controller": "^1.0.2", - "@phase2/outline-config": "^0.0.14", - "@phase2/outline-core": "^0.2.7", - "@phase2/outline-core-alert": "^0.0.2", - "@phase2/outline-core-link": "^0.0.14", "lit": "^3.1.2" }, "devDependencies": { + "@phase2/outline-adopted-stylesheets-controller": "^1.0.4", + "@phase2/outline-config": "^0.0.14", + "@phase2/outline-core": "^0.2.7", + "@phase2/outline-core-alert": "^0.0.4", + "@phase2/outline-core-link": "^0.0.16", + "@phase2/outline-docs": "^0.0.21", "@storybook/addon-essentials": "^7.6.17", "@storybook/addon-links": "^7.6.17", "@storybook/blocks": "^7.6.17", diff --git a/packages/storybook/public/global.css b/packages/storybook/public/global.css index 0a47914..2a51a08 100644 --- a/packages/storybook/public/global.css +++ b/packages/storybook/public/global.css @@ -1,3 +1,16 @@ +:root { + --outline-core-link--color: #0000ff; + --outline-core-link--text-decoration: none; + --outline-core-link--color-hover: #808080; + --outline-core-link--text-decoration-hover: underline; + --outline-core-link--color-focus: #808080; + --outline-core-link--text-decoration-focus: underline; + --outline-core-link--transition-property: color, background-color, + border-color, text-decoration-color, fill, stroke; + --outline-core-link--transition-duration: 150ms; + --outline-core-link--transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + body { font-family: Roboto, sans-serif; font-size: 16px; diff --git a/packages/storybook/src/components/shared/outline-link/docs/outline-link.mdx b/packages/storybook/src/components/shared/outline-link/docs/outline-link.mdx index 38eca37..d464cd0 100644 --- a/packages/storybook/src/components/shared/outline-link/docs/outline-link.mdx +++ b/packages/storybook/src/components/shared/outline-link/docs/outline-link.mdx @@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs'; import { OutlineLink } from '../outline-link'; - +
diff --git a/packages/storybook/vite.config.js b/packages/storybook/vite.config.js index e83e329..219b0f9 100644 --- a/packages/storybook/vite.config.js +++ b/packages/storybook/vite.config.js @@ -11,19 +11,6 @@ import ts from 'vite-plugin-ts'; // https://vitejs.dev/config/ export default defineConfig({ - // base: './', - // plugins: [ts()], - // define: { - // 'Reflect.decorate': 'undefined', - // }, - // esbuild: { - // tsconfigRaw: { - // compilerOptions: { - // experimentalDecorators: true, - // emitDecoratorMetadata: true, - // }, - // }, - // }, css: { postcss: { plugins: [ @@ -53,13 +40,9 @@ export default defineConfig({ build: { lib: { entry: { - // Component Library Bundles + // Manually curated component bundle index: 'src/index.ts', - // components: 'src/components/index.ts', - // Individual Component Bundles - // component1: 'src/components/component1.ts', - // component2: 'src/components/component2.ts', - // Add more components as needed. + // Individual components ...Object.fromEntries( glob .sync('src/components/**/*.ts', { @@ -73,11 +56,5 @@ export default defineConfig({ }, formats: ['es'], }, - // minify: false, - // rollupOptions: { - // output: { - // dir: 'dist', // Specify the correct directory for Vite to serve files - // }, - // }, }, }); diff --git a/packages/storybook/yarn.lock b/packages/storybook/yarn.lock index 4d7d1c2..8ca363d 100644 --- a/packages/storybook/yarn.lock +++ b/packages/storybook/yarn.lock @@ -2533,12 +2533,12 @@ __metadata: languageName: node linkType: hard -"@phase2/outline-adopted-stylesheets-controller@npm:^1.0.2": - version: 1.0.2 - resolution: "@phase2/outline-adopted-stylesheets-controller@npm:1.0.2" +"@phase2/outline-adopted-stylesheets-controller@npm:^1.0.4": + version: 1.0.4 + resolution: "@phase2/outline-adopted-stylesheets-controller@npm:1.0.4" dependencies: lit: "npm:^3.1.2" - checksum: 10c0/fc7f2e68bbf121074ab4b4e7d695adde09b5468c1dc0a46508ddcbb40a2bbdee2410b54fae3a6c3dcf8fd03a589cdd5c4cf9c3a85f1aba35caaccff72bd2801b + checksum: 10c0/c5926a9391ad052802a4da1a66f7211c2c647ccb6cdf82de72c66e5207a096c0f9bf3d2259fdc0d5b6ebffa13595efa6574523591305fcf862ed416a5da14167 languageName: node linkType: hard @@ -2549,21 +2549,23 @@ __metadata: languageName: node linkType: hard -"@phase2/outline-core-alert@npm:^0.0.2": - version: 0.0.2 - resolution: "@phase2/outline-core-alert@npm:0.0.2" +"@phase2/outline-core-alert@npm:^0.0.4": + version: 0.0.4 + resolution: "@phase2/outline-core-alert@npm:0.0.4" dependencies: + "@phase2/outline-adopted-stylesheets-controller": "npm:^1.0.4" lit: "npm:^3.1.2" - checksum: 10c0/9398f151f3be9d6d44252075bbc16a8a97973711828a1a4cac45a7f7d620d5faf8d593a45c9572a38b071a04f29b2de40c5459cb74f508a242573832286d401d + checksum: 10c0/63035f75fb726630bc024e8987de7e1b591bf991628608cf8d87d16b684791f7b9c9a6414b007887a67b8dd76dde9fc53675fbc5e2c6c3e0d249adfd7f1eaf99 languageName: node linkType: hard -"@phase2/outline-core-link@npm:^0.0.14": - version: 0.0.14 - resolution: "@phase2/outline-core-link@npm:0.0.14" +"@phase2/outline-core-link@npm:^0.0.16": + version: 0.0.16 + resolution: "@phase2/outline-core-link@npm:0.0.16" dependencies: + "@phase2/outline-adopted-stylesheets-controller": "npm:^1.0.4" lit: "npm:^3.1.2" - checksum: 10c0/6b2aa4d8ff93f4934cb1f0136a7f0c324e5c38fb40739e163b6f1c97ed610a15b1f4b7e7ac936769a3c8a78d01034bdbb1dbaebe07e874d5873bfb56f052e83f + checksum: 10c0/ec614c2e53b83caba268789b66797183638a3ee687b0a42386fbdbceff1b0fe4ec6ca6be77afc3ae3b5053c246dedcea97568f152c5c68884c371688ff22e391 languageName: node linkType: hard @@ -2576,15 +2578,26 @@ __metadata: languageName: node linkType: hard +"@phase2/outline-docs@npm:^0.0.21": + version: 0.0.21 + resolution: "@phase2/outline-docs@npm:0.0.21" + dependencies: + "@phase2/outline-core": "npm:^0.2.7" + tslib: "npm:^2.1.0" + checksum: 10c0/5c7f6a21c044072636ecdbda50ec57fb8d6fce6c0c7ff9023c852d75145f3bef779f975529d9c4fea86b44e90648b575435a19ecfa3bc6326a01c6c65f9d6b2e + languageName: node + linkType: hard + "@phase2/sample-storybook-web-components@workspace:.": version: 0.0.0-use.local resolution: "@phase2/sample-storybook-web-components@workspace:." dependencies: - "@phase2/outline-adopted-stylesheets-controller": "npm:^1.0.2" + "@phase2/outline-adopted-stylesheets-controller": "npm:^1.0.4" "@phase2/outline-config": "npm:^0.0.14" "@phase2/outline-core": "npm:^0.2.7" - "@phase2/outline-core-alert": "npm:^0.0.2" - "@phase2/outline-core-link": "npm:^0.0.14" + "@phase2/outline-core-alert": "npm:^0.0.4" + "@phase2/outline-core-link": "npm:^0.0.16" + "@phase2/outline-docs": "npm:^0.0.21" "@storybook/addon-essentials": "npm:^7.6.17" "@storybook/addon-links": "npm:^7.6.17" "@storybook/blocks": "npm:^7.6.17"