chore(storybook): Fixes and updates.

packages/storybook/.storybook/preview-head.html

@@ -1,2 +1,2 @@
-<script src="/dist/index.js" type="module"></script>
-<link rel="stylesheet" href="/dist/global.css" />
+<script src="/src/index.ts" type="module"></script>
+<link rel="stylesheet" href="/global.css" />

packages/storybook/index.html

@@ -6,30 +6,7 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Component Test Page</title>
-  <!-- <script src="/src/index.ts" type="module"></script> -->
-  <script src="/dist/index.js" type="module"></script>
-  <!--
-    To include the necessary assets for testing, you have several options:
-
-    1. Full Production Bundle: This is the entire application bundled together. 
-       You can include it by uncommenting the following line:
-       <script src="dist/index.js" type="module"></script>
-
-    2. Individual Components: If you want to test specific components, you can 
-       import them individually. You'll need to know the path to the component 
-       file in the 'dist' directory. For example:
-       <script src="dist/components/your-component.js" type="module"></script>
-       <script src="/src/components/your-component.ts" type="module"></script>
-
-    3. Standard Includes: These are common files that are often needed in the 
-       head tag. For example, a global stylesheet is included in this file:
-       <link rel="stylesheet" href="public/global.css" />
-
-    Remember to replace 'your-component' with the name of the component you want 
-    to test. Also, ensure the paths to the files are correct relative to this 
-    HTML file.
-  -->
-  <!-- <script src="dist/index.mjs" type="module"></script> -->
+  <script src="/src/index.ts" type="module"></script>
   <link rel="stylesheet" href="/global.css" />
 </head>
 

packages/storybook/package.json

@@ -21,9 +21,10 @@
   "scripts": {
     "start": "yarn dev",
     "dev": "yarn watch",
-    "watch": "npm-run-all -n -p 'watch:**'",
-    "watch:vite": "yarn vite dev --port 6001 --open",
-    "watch:storybook": "storybook dev -p 6002",
+    "watch": "yarn build:vite && npm-run-all -n -p 'watch:**'",
+    "watch:bundle": "yarn build:vite --watch",
+    "watch:vite": "yarn vite dev --port 6001",
+    "watch:storybook": "yarn storybook dev -p 6002",
     "build": "npm-run-all -n -s 'build:**'",
     "build:vite": "yarn vite build",
     "build:storybook": "NODE_ENV=production storybook build -o storybook-static",
@@ -61,6 +62,7 @@
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
+    "esbuild-decorators": "^1.0.0",
     "eslint": "^8.56.0",
     "eslint-plugin-storybook": "^0.8.0",
     "glob": "^10.3.10",

packages/storybook/public/global.css

@@ -1,3 +1,4 @@
 body {
   font-family: Roboto, sans-serif;
+  font-size: 16px;
 }

packages/storybook/src/components/shared/outline-link/docs/outline-link.mdx

@@ -12,7 +12,7 @@ import { Meta } from '@storybook/addon-docs';
   }}
 />
 
-# `outline-link` [ `OutlineLink` ]
+# `OutlineLink`: `outline-link`
 
 > This is an `outline-link` component. 
 

packages/storybook/src/components/shared/outline-link/outline-link.ts

@@ -1,6 +1,6 @@
 import { customElement } from 'lit/decorators.js';
-import { html } from 'lit';
-import { OutlineCoreLink } from '@phase2/outline-core-link';
+import { LitElement, html } from 'lit';
+// import { OutlineCoreLink } from '@phase2/outline-core-link';
 import globalStyles from './styles/outline-link.global.css?inline';
 import encapsulatedStyles from './styles/outline-link.encapsulated.css?inline';
 import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller';
@@ -13,7 +13,7 @@ import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controll
  * @extends OutlineCoreLink
  */
 @customElement('outline-link')
-export class OutlineLink extends OutlineCoreLink {
+export class OutlineLink extends LitElement {
   GlobalStylesheets: AdoptedStylesheets | undefined = new AdoptedStylesheets(
     this,
     globalStyles,
@@ -29,11 +29,11 @@ export class OutlineLink extends OutlineCoreLink {
       : undefined;
     return root;
   }
-  // render() {
-  //   return html` <div class="encapsulated-container">
-  //     <slot></slot>
-  //   </div>`;
-  // }
+  render() {
+    return html` <div class="encapsulated-container">
+      <slot></slot>
+    </div>`;
+  }
 }
 
 /**

packages/storybook/src/components/shared/outline-link/styles/outline-link.global.css

@@ -1,3 +1,4 @@
 outline-link {
+  /* This is just here to demonstrate using a nested import in a CSS file. */
   @nested-import './outline-link.imported.css';
 }

packages/storybook/src/components/shared/outline-link/styles/outline-link.imported.css

@@ -2,7 +2,7 @@ a {
   color: red;
   font-weight: bold;
   text-decoration: none;
-  border-bottom: 1px solid purple;
+  border-bottom: 1px solid red;
   transition: border-color 0.3s ease;
 
   &:hover {

packages/storybook/src/index.ts

@@ -10,13 +10,13 @@
 // Importing specific components from the `src/components` directory
 // import { Component1 } from './components/component1';
 // import { Component2 } from './components/component2';
-//import { OutlineAlert } from './components/shared/outline-alert/outline-alert';
+// import { OutlineAlert } from './components/shared/outline-alert/outline-alert';
 import { OutlineLink } from './components/shared/outline-link/outline-link';
 // import { OutlineCoreLink } from '@phase2/outline-core-link';
 // Add more component imports as needed...
 
 // Importing specific controllers from the `src/controllers` directory
-import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller';
+// import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller';
 // import { Controller1 } from './controllers/controller1';
 // import { Controller2 } from './controllers/controller2';
 // Add more controller imports as needed...
@@ -29,7 +29,7 @@ export {
   // Component1,
   // Component2,
   // Add more component exports as needed...
-  AdoptedStylesheets,
+  //AdoptedStylesheets,
   // Controller1,
   // Controller2
   // Add more controller exports as needed...

packages/storybook/tsconfig.json

@@ -16,6 +16,7 @@
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
     "forceConsistentCasingInFileNames": true,
     "allowJs": true,
     "isolatedModules": true,

packages/storybook/vite.config.js

@@ -11,11 +11,19 @@ import ts from 'vite-plugin-ts';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: './',
-  plugins: [ts()],
-  define: {
-    'Reflect.decorate': 'undefined',
-  },
+  // base: './',
+  // plugins: [ts()],
+  // define: {
+  //   'Reflect.decorate': 'undefined',
+  // },
+  // esbuild: {
+  //   tsconfigRaw: {
+  //     compilerOptions: {
+  //       experimentalDecorators: true,
+  //       emitDecoratorMetadata: true,
+  //     },
+  //   },
+  // },
   css: {
     postcss: {
       plugins: [
@@ -63,11 +71,13 @@ export default defineConfig({
             ]),
         ),
       },
-      formats: [
-        // 'es' is the default format, modules are bundled to .mjs files
-        'es',
-      ],
+      formats: ['es'],
     },
-    minify: false,
+    // minify: false,
+    // rollupOptions: {
+    //   output: {
+    //     dir: 'dist', // Specify the correct directory for Vite to serve files
+    //   },
+    // },
   },
 });

packages/storybook/yarn.lock

@@ -2596,6 +2596,7 @@ __metadata:
     "@types/react-dom": "npm:^18"
     "@typescript-eslint/eslint-plugin": "npm:^5.0.0"
     "@typescript-eslint/parser": "npm:^5.0.0"
+    esbuild-decorators: "npm:^1.0.0"
     eslint: "npm:^8.56.0"
     eslint-plugin-storybook: "npm:^0.8.0"
     glob: "npm:^10.3.10"
@@ -6038,6 +6039,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-decorators@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "esbuild-decorators@npm:1.0.0"
+  peerDependencies:
+    esbuild: ">=0.14.0"
+    typescript: ">=4.7.0"
+  checksum: 10c0/d9f488ec0b29863bb64de2401c8d14c2e05872f492486fe3448f5bbb80e1f1f56691e4f9f5c119e76d4dce9f6e2509c3bbbe13b0fff2efaf91e50c8d6dfb0a6b
+  languageName: node
+  linkType: hard
+
 "esbuild-plugin-alias@npm:^0.2.1":
   version: 0.2.1
   resolution: "esbuild-plugin-alias@npm:0.2.1"