Outline Fall/Winter Update!!

.changeset/config.json

@@ -9,7 +9,6 @@
   "updateInternalDependencies": "patch",
   "ignore": [
     "@phase2/outline-core-accordion",
-    "@phase2/outline-core-alert",
     "@phase2/outline-core-breadcrumb",
     "@phase2/outline-core-card",
     "@phase2/outline-core-container",

.changeset/purple-crews-attack.md

@@ -0,0 +1,9 @@
+---
+'@phase2/outline-form': patch
+'@phase2/outline-storybook': patch
+'@phase2/outline-core-link': patch
+'@phase2/outline-config': patch
+'@phase2/outline-templates': patch
+---
+
+Update for core link best practices.

.changeset/twenty-colts-serve.md

@@ -0,0 +1,13 @@
+---
+'@phase2/outline-form': patch
+'@phase2/outline-storybook': patch
+'@phase2/outline-examples': patch
+'@phase2/outline-core-alert': patch
+'@phase2/outline-core-link': patch
+'@phase2/outline-docs': patch
+'@phase2/outline-config': patch
+'@phase2/outline-templates': patch
+'@phase2/outline-core': patch
+---
+
+Cleaup and organization.

.eslintrc.json

@@ -31,7 +31,8 @@
       {
         "argsIgnorePattern": "^_"
       }
-    ]
+    ],
+    "lit-plugin/no-invalid-css": "off"
   },
   "overrides": [
     {

.gitignore

@@ -59,6 +59,7 @@ node_modules/
 mutagen.yml.lock
 www/
 .turbo
+.turbo-cookie
 
 # Outline specific 
 custom-elements.json

.husky/pre-commit

@@ -0,0 +1,45 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+call_lefthook()
+{
+  dir="$(git rev-parse --show-toplevel)"
+  osArch=$(uname | tr '[:upper:]' '[:lower:]')
+  cpuArch=$(uname -m | sed 's/aarch64/arm64/')
+
+  if lefthook -h >/dev/null 2>&1
+  then
+    lefthook "$@"
+  elif test -f "$dir/node_modules/lefthook/bin/index.js"
+  then
+    "$dir/node_modules/lefthook/bin/index.js" "$@"
+  elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook"
+  then
+    "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@"
+  elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook"
+  then
+    "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@"
+  elif bundle exec lefthook -h >/dev/null 2>&1
+  then
+    bundle exec lefthook "$@"
+  elif yarn lefthook -h >/dev/null 2>&1
+  then
+    yarn lefthook "$@"
+  elif pnpm lefthook -h >/dev/null 2>&1
+  then
+    pnpm lefthook "$@"
+  elif command -v npx >/dev/null 2>&1
+  then
+    npx @evilmartians/lefthook "$@"
+  elif swift package plugin lefthook >/dev/null 2>&1
+  then
+    swift package --disable-sandbox plugin lefthook "$@"
+  else
+    echo "Can't find lefthook in PATH"
+  fi
+}
+
+call_lefthook run "pre-commit" "$@"

.nvmrc

@@ -1 +1 @@
-18
+20

.prettierignore

@@ -1,3 +1,4 @@
+changeset/
 dist/
 www/
 dev/
@@ -31,3 +32,4 @@ outline.theme.css
 
 # Ignore all stories (Storybook) files:
 **/*.stories.ts
+storybook.main.css

.storybook/main.js

@@ -3,21 +3,16 @@ import { dirname, join } from 'path';
 module.exports = {
   stories: [
     // Intentionally ordering welcome page first.
-    '../packages/documentation/outline-docs/src/guides/welcome.mdx',
+    '../packages/documentation/outline-docs/src/guides/welcome/00-welcome.mdx',
+    '../packages/documentation/outline-docs/src/guides/welcome/more-information/*.mdx',
+    // Tooling usage guides.
+    '../packages/documentation/outline-docs/src/guides/development/tooling/**/*.mdx',
     // Component development guides.
     '../packages/documentation/outline-docs/src/guides/development/component-development/**/*.mdx',
-    // Component usage guides.
-    '../packages/documentation/outline-docs/src/guides/consumers/**/*.mdx',
-    // QA/UAT usage guides.
-    '../packages/documentation/outline-docs/src/guides/qa-uat/**/*.mdx',
-    // Tooling usage guides.
-    '../packages/documentation/outline-docs/src/guides/tooling/**/*.mdx',
     // Documentation stories.
     '../packages/documentation/outline-docs/src/guides/**/*.@(js|ts|mdx)',
     // Modern component stories.
     '../packages/**/docs/*.mdx',
-    // Old component stories.
-    '../packages/documentation/outline-storybook/stories/**/*.stories.@(js|ts|mdx)',
   ],
   typescript: {
     check: false,
@@ -32,18 +27,14 @@ module.exports = {
     storyStoreV7: true,
     postcss: true,
     buildStoriesJson: true,
-    modernInlineRender: true,
+    modernInlineRender: false,
   },
   framework: {
-    name: getAbsolutePath('@storybook/web-components-vite'),
+    name: '@storybook/web-components-vite',
     options: {},
   },
   docs: {
     autodocs: true,
     defaultName: 'Documentation', // set to change the name of generated docs entries
   },
 };
-
-function getAbsolutePath(value) {
-  return dirname(require.resolve(join(value, 'package.json')));
-}

.storybook/preview.js

@@ -10,15 +10,13 @@ export const parameters = {
   options: {
     storySort: {
       order: [
-        'Getting Started',
-        'Documentation',
-        'Design Tokens',
+        'Welcome Guide',
+        'Coding Guide',
         'Media',
         'Navigation',
         'Content',
         'Templates',
         'Pages',
-        'Code Examples',
         'Utility Components',
       ],
     },

.storybook/storybook.css

@@ -1,5 +1,3 @@
 @import url('https://rsms.me/inter/inter.css');
 /* Outline */
 @import '../packages/outline-templates/default/outline.theme.css';
-/* Global Tailwind Utilities */
-@import '../packages/outline-templates/default/tailwind.css';

lefthook.yml

@@ -13,5 +13,8 @@ pre-commit:
   parallel: true
   commands:
     eslint:
-      glob: '*.{js,ts,jsx,tsx,mdx,cjs,mjs}'
-      run: yarn eslint {staged_files}
+      run: yarn lint:eslint
+    # tsc:
+    #   run: yarn lint:tsc
+    prettier:
+      run: yarn lint:prettier

package.json

@@ -17,7 +17,8 @@
     "./packages/documentation/*",
     "./packages/controllers/*",
     "./packages/controllers/@deprecated/*",
-    "./packages/tools/*"
+    "./packages/tools/*",
+    "./docs"
   ],
   "files": [
     "./packages/*/dist"
@@ -32,9 +33,8 @@
   },
   "license": "BSD-3-Clause",
   "scripts": {
-    "prepare": "husky install",
     "analyze": "yarn build && wca analyze 'packages/**/*.ts' --outFiles '{dir}/../README.md'",
-    "build": "turbo run build --concurrency=100%",
+    "build": "turbo run build --concurrency=100% --filter=!./packages/**/@deprecated/*",
     "changeset": "changeset",
     "changeset:publish": "yarn build && yarn changeset:version && yarn changeset publish",
     "changeset:version": "changeset version",
@@ -55,9 +55,9 @@
     "lint:eslint": "eslint .",
     "lint:tsc": "tsc --noEmit",
     "lint:prettier": "prettier --check .",
-    "package": "turbo run package",
+    "package": "turbo run package --filter=!./packages/**/@deprecated/*",
     "prep": "npm-run-all -s prep:*",
-    "prep:css": "node scripts/styles.mjs",
+    "prep:css": "node scripts/styles.js",
     "prebuild": "yarn prep",
     "prestart": "yarn prep",
     "rebuild": "yarn reset && yarn build",
@@ -72,7 +72,7 @@
     "test": "turbo run test",
     "watch": "npm-run-all -p watch:*",
     "watch:storybook": "yarn storybook dev -p ${npm_package_storybook_port}",
-    "watch:css": "node scripts/styles.mjs --watch"
+    "watch:css": "node scripts/styles.js --watch"
   },
   "keywords": [
     "web-components",
@@ -81,7 +81,7 @@
   ],
   "packageManager": "[email protected]",
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "devDependencies": {
     "@adobe/css-tools": "^4.3.0",
@@ -90,19 +90,15 @@
     "@commitlint/cli": "^17.4.0",
     "@commitlint/config-conventional": "^17.4.0",
     "@open-wc/testing": "^3.0.0-next.2",
-    "@storybook/addon-actions": "^7.4.6",
-    "@storybook/addon-docs": "^7.4.6",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/web-components": "^7.4.6",
-    "@storybook/web-components-vite": "^7.4.6",
+    "@storybook/addon-actions": "^7.6.3",
+    "@storybook/addon-docs": "^7.6.3",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/web-components": "^7.6.3",
+    "@storybook/web-components-vite": "^7.6.3",
     "@types/estree": "^0.0.47",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
-    "@web/test-runner": "^0.13.15",
-    "@web/test-runner-browserstack": "^0.4.2",
-    "@web/test-runner-playwright": "^0.8.6",
-    "autoprefixer": "10.4.0",
     "chromatic": "^6.11.3",
     "esbuild": "^0.15.7",
     "eslint": "^7.32.0",
@@ -111,19 +107,15 @@
     "eslint-plugin-react": "^7.23.0",
     "eslint-plugin-storybook": "^0.6.15",
     "gaze": "^1.1.3",
-    "husky": "^8.0.3",
-    "jest": "^26.6.3",
-    "jest-cli": "^26.6.3",
     "lefthook": "^1.5.2",
     "lint-staged": "^10.5.4",
     "lit-analyzer": "^1.2.1",
     "lit-html": "^2.3.1",
     "npm-run-all": "^4.1.5",
     "postcss": "8.4.8",
-    "postcss-custom-properties": "12.1.8",
     "postcss-discard-comments": "5.1.0",
-    "postcss-import": "14.0.2",
     "postcss-loader": "^7.0.1",
+    "postcss-nested-import": "^1.3.0",
     "postcss-preset-env": "^7.8.1",
     "prettier": "^2.0.4",
     "prettier-plugin-tailwindcss": "^0.1.7",
@@ -132,11 +124,11 @@
     "react-syntax-highlighter": "^15.5.0",
     "rimraf": "^3.0.2",
     "rsync": "^0.6.1",
-    "storybook": "^7.4.6",
+    "storybook": "^7.6.3",
     "svgo": "^2.8.0",
     "tailwindcss": "3.0.0",
     "ts-lit-plugin": "^1.2.1",
-    "turbo": "^1.2.16",
+    "turbo": "^1.10.16",
     "vite": "^4.1.4"
   },
   "dependencies": {},

packages/components/outline-core-accordion/docs/outline-core-accordion.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-import '@phase2/outline-alert';
+import '@phase2/outline-core-alert';
 
 <Meta
   title="In Progress/Accordion"
@@ -21,14 +21,14 @@ import '@phase2/outline-alert';
 
 The `outline-core-accordion` component ...
 
-<outline-alert status="warning" size="large">
+<outline-core-alert status="warning">
   <span slot="header">Documentation Status: @TODO</span>
   <p>This documentation is in need of completion as the component is built out.</p>
   <ul>
     <li>**@todo:** Complete component.</li>
     <li>**@todo:** Update documentation.</li>
   </ul>
-</outline-alert>
+</outline-core-alert>
 <br />
 
 ## Introduction to the **`outline-core-accordion`** component

packages/components/outline-core-alert/README.md

@@ -0,0 +1,30 @@
+# outline-core-alert
+
+The Outline Core Alert component
+
+## Properties
+
+| Property             | Attribute        | Type                                          | Default | Description                                   |
+|----------------------|------------------|-----------------------------------------------|---------|-----------------------------------------------|
+| `adoptedStylesheets` |                  | `AdoptedStyleSheets`                          |         |                                               |
+| `debug`              |                  | `boolean`                                     | false   |                                               |
+| `isInteractive`      | `is-interactive` | `boolean`                                     | false   | This is important context for screen readers. |
+| `status`             | `status`         | `"info" \| "warning" \| "error" \| "success"` | "info"  |                                               |
+
+## Slots
+
+| Name         | Description                                    |
+|--------------|------------------------------------------------|
+| `default`    | The alert contents.                            |
+| `header`     | The header in the alert.                       |
+| `icon-end`   | The icon to display at the end of the alert.   |
+| `icon-start` | The icon to display at the start of the alert. |
+
+## CSS Custom Properties
+
+| Property                   | Description                                      |
+|----------------------------|--------------------------------------------------|
+| `--outline-alert--error`   | background: The background color for the error alert. |
+| `--outline-alert--info`    | background: The background color for the info alert. |
+| `--outline-alert--success` | background: The background color for the success alert. |
+| `--outline-alert--warning` | background: The background color for the warning alert. |