chore(cleanup): Adjustments to basic settings and README.

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',

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.

packages/storybook/index.html

@@ -11,8 +11,9 @@
 </head>
 
 <body>
-  <outline-core-link><a href="https://github.com/phase2/outline">OutlineCoreLink</a></outline-core-link>
-  <outline-link><a href="https://github.com/phase2/outline">OutlineLink</a></outline-link>
+  <p><outline-core-link><a href="https://github.com/phase2/outline">outline-core-link</a></outline-core-link></p>
+  <p><outline-link><a href="https://github.com/phase2/outline">outline-link</a></outline-link></p>
+  <p><a href="https://github.com/phase2/outline">Normal a tag link</a></p>
 </body>
 
 </html>

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",

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;

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';
 
 <Meta
-  title="Core Components/Link"
+  title="Outline Core/Link"
   parameters={{
     viewMode: 'docs',
     previewTabs: {

packages/storybook/src/stories/Configure.mdx

@@ -31,7 +31,7 @@ export const RightArrow = () => <svg
   <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
 </svg>
 
-<Meta title="Configure your project" />
+<Meta title="Welcome Guide/Configure your project" />
 
 <div className="sb-container">
   <div className='sb-section-title'>

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
-    //   },
-    // },
   },
 });

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"