phase2 · jardix22 · Apr 16, 2024 · Apr 12, 2024 · Apr 12, 2024 · Apr 12, 2024
diff --git a/packages/storybook/.eslintrc.json b/packages/storybook/.eslintrc.json
@@ -1,46 +1,55 @@
 {
   "root": true,
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": "./tsconfig.json",
-    "sourceType": "module"
-  },
-  "plugins": [
-    "@typescript-eslint",
-    "lit"
-  ],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
     "plugin:lit/recommended",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "lit"],
   "env": {
     "browser": true,
     "es2021": true
   },
+  "globals": {
+    "process": "readonly"
+  },
   "rules": {
+    "no-prototype-builtins": "off",
+    "no-nested-ternary": 2,
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-unused-vars": [
       "warn",
       {
         "argsIgnorePattern": "^_"
       }
     ],
-    "@typescript-eslint/no-explicit-any": "error",
     "lit/no-invalid-html": "error"
   },
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
-      "rules": {
-        "@typescript-eslint/explicit-module-boundary-types": "off"
+      "files": ["*.config.js"],
+      "env": {
+        "node": true
       }
     },
     {
       "files": [
-        "*.js"
+        "*.js",
+        "*_test.ts",
+        "**/custom_typings/*.ts",
+        "packages/lit-ssr/src/test/integration/tests/**",
+        "packages/lit-ssr/src/lib/util/parse5-utils.ts"
       ],
       "rules": {
         "@typescript-eslint/no-var-requires": "off"

diff --git a/packages/storybook/.prettierrc.json b/packages/storybook/.prettierrc.json
@@ -1,12 +1,13 @@
 {
-  "arrowParens": "always",
+  "arrowParens": "avoid",
   "bracketSpacing": true,
-  "jsxSingleQuote": true,
+  "jsxSingleQuote": false,
   "quoteProps": "consistent",
   "printWidth": 80,
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "all",
-  "useTabs": false
+  "trailingComma": "es5",
+  "useTabs": false,
+  "plugins": ["prettier-plugin-css-order"]
 }
diff --git a/packages/storybook/index.html b/packages/storybook/index.html
@@ -1,19 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <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>
+    <link rel="stylesheet" href="/global.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <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>
-  <link rel="stylesheet" href="/global.css" />
-</head>
-
-<body>
-  <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>
-
+  <body>
+    <p>
+      <outline-example>
+        <a href="https://github.com/phase2/outline">outline-example</a>
+      </outline-example>
+    </p>
+    <p>
+      <a href="https://github.com/phase2/outline">Normal a tag link</a>
+    </p>
+  </body>
 </html>
diff --git a/packages/storybook/outline.theme.css b/packages/storybook/outline.theme.css
@@ -10,7 +10,7 @@
   --brand-octonary: #525252;
   --brand-nonary: #1e3a8a;
   --brand-denary: #171717;
-  
+
   /* Colors for UI notification messages. */
   --status-success: #2f855a;
   --status-warning: #b64301;
@@ -28,7 +28,7 @@
   --outline-transparent: transparent;
   --outline-white: #fff;
   --outline-black: #000;
-  
+
   --outline-gray-50: #fafafa;
   --outline-gray-100: #f5f5f5;
   --outline-gray-200: #e5e5e5;
@@ -200,48 +200,47 @@
   --fs-h1: 4rem;
   --fs-h1-medium: 3rem;
   --fs-h1-small: 2.5rem;
-  
+
   --lh-h1: 3rem;
   --lh-h1-medium: 3.75rem;
   --lh-h1-small: 2rem;
 
   --fs-h2: 2.75rem;
   --fs-h2-medium: 2.5rem;
   --fs-h2-small: 2rem;
-  
+
   --lh-h2: 3.5rem;
   --lh-h2-medium: 3rem;
   --lh-h2-small: 2.5rem;
-
 
   --fs-h3: 2rem;
   --fs-h3-medium: 1.75rem;
   --fs-h3-small: 1.5rem;
-  
+
   --lh-h3: 2.25rem;
   --lh-h3-medium: 2rem;
   --lh-h3-small: 1.75rem;
-  
+
   --fs-h4: 1.5rem;
   --fs-h4-medium: 1.5rem;
   --fs-h4-small: 1.375rem;
-  
+
   --lh-h4: 2rem;
   --lh-h4-medium: 1.75rem;
   --lh-h4-small: 1.75rem;
-  
+
   --fs-h5: 1.375rem;
   --fs-h5-medium: 1.25rem;
   --fs-h5-small: 1.125rem;
-  
+
   --lh-h5: 1.75rem;
   --lh-h5-medium: 1.5rem;
   --lh-h5-small: 1.375rem;
-  
+
   --fs-h6: 1.125rem;
   --fs-h6-medium: 1.125rem;
   --fs-h6-small: 1rem;
-  
+
   --lh-h6: 1.5rem;
   --lh-h6-medium: 1.375rem;
   --lh-h6-small: 1.25rem;
@@ -254,14 +253,16 @@
   --outline-ring-color: var(--outline-soft-black);
   --outline-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
   --outline-ring-shadow: 0 0 rgba(0, 0, 0, 0);
-  --outline-ring-offset-shadow: var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-ring-offset-color);
-  --outline-ring-shadow: var(--outline-ring-inset) 0 0 0 calc(var(--outline-ring-width) + var(--outline-ring-offset-width)) var(--outline-ring-color);
+  --outline-ring-offset-shadow: var(--outline-ring-inset) 0 0 0
+    var(--outline-ring-offset-width) var(--outline-ring-offset-color);
+  --outline-ring-shadow: var(--outline-ring-inset) 0 0 0
+    calc(var(--outline-ring-width) + var(--outline-ring-offset-width))
+    var(--outline-ring-color);
 
   --outline-shadow: 0 0 rgba(0, 0, 0, 0);
   --outline-shadow-colored: 0 0 rgba(0, 0, 0, 0);
 
   /*
   * Custom variables overriding default variables.
   */
-
 }
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -33,7 +33,11 @@
     "clean:modules": "rimraf node_modules",
     "reset": "yarn clean && yarn install",
     "restart": "yarn reset && yarn dev",
-    "postinstall": "patch-package"
+    "postinstall": "patch-package",
+    "format": "npm-run-all -s 'format:**'",
+    "format:code": "eslint --fix . && prettier --write .",
+    "format:svg": "svgo -f ./src -r --config=svgo.config.cjs",
+    "fix": "yarn format"
   },
   "keywords": [
     "web-components",
@@ -44,13 +48,11 @@
     "node": ">=20"
   },
   "dependencies": {
+    "@phase2/outline-adopted-stylesheets-controller": "^1.0.4",
+    "@phase2/outline-config": "^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-alert": "^0.0.4",
-    "@phase2/outline-docs": "^0.0.21",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
     "@storybook/blocks": "^7.6.17",
@@ -63,6 +65,7 @@
     "@typescript-eslint/parser": "^5.0.0",
     "esbuild-decorators": "^1.0.0",
     "eslint": "^8.56.0",
+    "eslint-plugin-lit": "^1.11.0",
     "eslint-plugin-storybook": "^0.8.0",
     "glob": "^10.3.10",
     "npm-run-all": "^4.1.5",
@@ -74,11 +77,15 @@
     "postcss-nested-import": "^1.3.0",
     "postcss-nesting": "^12.0.2",
     "postcss-preset-env": "^9.3.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-css-order": "^2.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
+    "rollup-plugin-terser": "^7.0.2",
     "rsync": "^0.6.1",
     "storybook": "^7.6.17",
+    "svgo": "^3.2.0",
     "ts-lit-plugin": "^2.0.2",
     "typescript": "^5.3.3",
     "vite": "^5.1.4",

diff --git a/packages/storybook/public/global.css b/packages/storybook/public/global.css
@@ -12,6 +12,6 @@
 }
 
 body {
-  font-family: Roboto, sans-serif;
   font-size: 16px;
+  font-family: Roboto, sans-serif;
 }
diff --git a/...s/storybook/src/components/shared/outline-example/styles/outline-example.encapsulated.css b/...s/storybook/src/components/shared/outline-example/styles/outline-example.encapsulated.css
@@ -1,4 +1,4 @@
 .encapsulated-container {
-  padding: 15px;
   background-color: #f5f5f5;
+  padding: 15px;
 }
diff --git a/packages/storybook/src/components/shared/outline-example/styles/outline-example.imported.css b/packages/storybook/src/components/shared/outline-example/styles/outline-example.imported.css
@@ -1,9 +1,9 @@
 a {
+  transition: border-color 0.3s ease;
+  border-bottom: 5px solid red;
   color: purple;
   font-weight: bold;
   text-decoration: none;
-  border-bottom: 5px solid red;
-  transition: border-color 0.3s ease;
 
   &:hover {
     border-color: transparent;

diff --git a/packages/storybook/src/stories/Configure.mdx b/packages/storybook/src/stories/Configure.mdx
@@ -1,35 +1,37 @@
-import { Meta } from "@storybook/blocks";
-
-import Github from "./assets/github.svg";
-import Discord from "./assets/discord.svg";
-import Youtube from "./assets/youtube.svg";
-import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.png";
-import Context from "./assets/context.png";
-import Assets from "./assets/assets.png";
-import Docs from "./assets/docs.png";
-import Share from "./assets/share.png";
-import FigmaPlugin from "./assets/figma-plugin.png";
-import Testing from "./assets/testing.png";
-import Accessibility from "./assets/accessibility.png";
-import Theming from "./assets/theming.png";
-import AddonLibrary from "./assets/addon-library.png";
-
-export const RightArrow = () => <svg 
-    viewBox="0 0 14 14" 
-    width="8px" 
-    height="14px" 
-    style={{ 
-      marginLeft: '4px',
-      display: 'inline-block',
-      shapeRendering: 'inherit',
-      verticalAlign: 'middle',
-      fill: 'currentColor',
-      'path fill': 'currentColor'
+import { Meta } from '@storybook/blocks';
+
+import Github from './assets/github.svg';
+import Discord from './assets/discord.svg';
+import Youtube from './assets/youtube.svg';
+import Tutorials from './assets/tutorials.svg';
+import Styling from './assets/styling.png';
+import Context from './assets/context.png';
+import Assets from './assets/assets.png';
+import Docs from './assets/docs.png';
+import Share from './assets/share.png';
+import FigmaPlugin from './assets/figma-plugin.png';
+import Testing from './assets/testing.png';
+import Accessibility from './assets/accessibility.png';
+import Theming from './assets/theming.png';
+import AddonLibrary from './assets/addon-library.png';
+
+export const RightArrow = () => (
+  <svg
+    viewBox="0 0 14 14"
+    width="8px"
+    height="14px"
+    style={{
+      'marginLeft': '4px',
+      'display': 'inline-block',
+      'shapeRendering': 'inherit',
+      'verticalAlign': 'middle',
+      'fill': 'currentColor',
+      'path fill': 'currentColor',
     }}
->
-  <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>
+  >
+    <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="Welcome Guide/Configure your project" />
 
@@ -38,6 +40,7 @@ export const RightArrow = () => <svg
     # Configure your project
 
     Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -84,6 +87,7 @@ export const RightArrow = () => <svg
     # Do more with Storybook
 
     Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
   </div>
 
   <div className="sb-section">
@@ -203,6 +207,7 @@ export const RightArrow = () => <svg
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>
+
 </div>
 
 <style>