Feature/2 multi packages

.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+storybook-static
 types
 *.local
 

.storybook/main.cjs → .storybook/main.ts

@@ -1,9 +1,14 @@
-module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+import type { StorybookConfig } from "@storybook/web-components-vite";
+
+const config: StorybookConfig = {
+  stories: ['../**/src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  framework: '@storybook/web-components',
-  core: {
-    builder: 'storybook-builder-vite',
+  framework: {
+    name: "@storybook/web-components-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
   },
   staticDirs: ['../public'],
   async viteFinal(config, { configType }) {
@@ -17,4 +22,5 @@ module.exports = {
     // return the customized config
     return config
   },
-}
+};
+export default config;

.storybook/preview-head.html

@@ -1,37 +1,5 @@
 <script>
- window.global = window;
+  window.global = window;
 </script>
-<style>
-@font-face {
-  font-family: 'Manrope';
-  font-weight: 400;
-  font-style: normal;
-  font-display: auto;
-  src: local('Manrope'), url('Manrope-Regular.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'ManropeBold';
-  font-weight: 700;
-  font-style: normal;
-  font-display: auto;
-  src: local('Manrope'), url('Manrope-Bold.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Work Sans';
-  font-style: normal;
-  font-display: auto;
-  src: local('Work Sans'), url('WorkSans.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-display: auto;
-  src: local('Open Sans'), url('OpenSans.ttf') format('truetype');
-}
-:host { 
-  --nh-menu-subtitle: #A89CB0;
-  --nh-theme-bg-neutral: #433A4A;
-  --nh-font-families-menu: "Work Sans", "Open Sans";
-}
-</style>
+
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css" />

.storybook/preview.ts

@@ -0,0 +1,40 @@
+// polyfills
+import '@webcomponents/scoped-custom-element-registry'
+
+import type { Preview } from "@storybook/web-components";
+
+import { b64fonts } from '@neighbourhoods/design-system-styles';
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+    // For where to use each of these, see: 
+    // https://github.com/orgs/neighbour-hoods/projects/1/views/1?filterQuery=depth&pane=issue&itemId=33428362
+
+      default: 'canvas',
+      values: [
+        {
+          name: 'backdrop',
+          value: '#0c0a0d',
+        },
+        {
+          name: 'canvas',
+          value: '#18151b',
+        },
+        {
+          name: 'surface',
+          value: '#251f28',
+        },
+      ],
+    },
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -1,59 +1,41 @@
-# Neighbourhoods design system components (and Storybook) UNSTABLE
+# Neighbourhoods UI Component Storybook [UNSTABLE]
 
-Currently this package exports these components, all of which are under development but act as a good starting point for building Neighbourhoods UI:
+Metarepo for various CustomElement component libraries used in Neighbourhoods Applets and within the [Neighbourhoods Launcher](https://github.com/neighbour-hoods/nh-launcher/):
 
-## Base Components
-(Comprising of the LitElement ancestor components from the `neighbourhoods-design-system-components` package - now deprecated). Use these as a base if you just want to inherit styles:
-
-`NHComponent` - Just the NH design token CSS variables
-
-`NHComponentShoelace` - In future we will add some Shoelace variable overrides so use this to include them too 
-
-## NH Components
-`NHButton`
-
-`NHButtonGroup`
-
-`NHCard`
-
-`NHPostCard`
-
-`NHCardList`
-
-`NHTabButton`
-
-`NHPagination`
-
-`NHPageHeaderCard`
-
-`NHAssessmentWidget`
-
-`NHMenu` -- currently same as NHButtonGroup
-
-## NH Shoelace Components (use `sl-` webcomponents internally)
-`NHDialog`
-
-`NHAlert`
-
-`NHCreatePost`
+- The [Design System Components](src/design-system) implementing abstract and harmoniously coordinated UI controls which operate well together.
+- [Developer Utility Components](src/dev-util) useful in Applet development & testing.
 
 ## Install
 
+Ensure you have the PNPM package manager installed first with `npm i -g pnpm`.
+
 ```bash
 pnpm install
 ```
 
 ## Storybook
 
 ```bash
-npm run storybook
+pnpm run storybook
 ```
 
 ## Build
 
 ```bash
-npm run build
+pnpm run build
 ```
 
-Original repo forked from Leon Radley (thanks!)
-https://leon.id/articles/web-components/2022-02-vite-lit-storybook
+## Publish
+
+- Ensure all packages requiring publication have their `version` field in `package.json` updated to reflect the next version to be published.
+- Ensure a successful `pnpm run build` completes after the version updates are made.
+- Run `pnpm -r publish --access public` from the root directory to publish all packages with updated versions.
+
+## Credits
+
+Original repo forked from Leon Radley (thanks!)  
+https://leon.id/articles/web-components/2022-02-vite-lit-storybook
+
+## License
+
+Apache 2.0

design-system/README.md

@@ -0,0 +1,41 @@
+# Neighbourhoods design system components
+
+Currently this package exports these components, all of which are under development but act as a good starting point for building Neighbourhoods UI:
+
+## Base Components
+
+(Comprising of the LitElement ancestor components from the `neighbourhoods-design-system-components` package - now deprecated). Use these as a base if you just want to inherit styles:
+
+`NHComponent` - Just the NH design token CSS variables
+
+`NHComponentShoelace` - In future we will add some Shoelace variable overrides so use this to include them too 
+
+## NH Components
+
+`NHButton`
+
+`NHButtonGroup`
+
+`NHCard`
+
+`NHPostCard`
+
+`NHCardList`
+
+`NHTabButton`
+
+`NHPagination`
+
+`NHPageHeaderCard`
+
+`NHAssessmentWidget`
+
+`NHMenu` -- currently same as NHButtonGroup
+
+## NH Shoelace Components (use `sl-` webcomponents internally)
+
+`NHDialog`
+
+`NHAlert`
+
+`NHCreatePost`

design-system/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@neighbourhoods/design-system-components",
+  "version": "0.0.4",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "require": "./dist/index.umd.js"
+      }
+    },
+    "./*": {
+      "types": "./dist/",
+      "import": "./dist/"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.js",
+  "scripts": {
+    "build": "vite build; tsc -p ./tsconfig.json"
+  },
+  "devDependencies": {
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.5",
+    "vite": "^4.4.9"
+  },
+  "dependencies": {
+    "@lit-labs/scoped-registry-mixin": "^1.0.1",
+    "@neighbourhoods/design-system-styles": "^0.0.3",
+    "@shoelace-style/shoelace": "^2.8.0",
+    "lit": "^2.2.0"
+  }
+}

design-system/src/_shared_customElements.ts

@@ -0,0 +1,19 @@
+/**
+ * Workaround import for cross-dependencies between stories.
+ *
+ * CustomElement registration for components shared between stories needs to be done exactly once.
+ */
+
+import NHButton from "./button";
+import NHCard from "./card";
+import NHPageHeaderCard from './page-header-card'
+import NHTabButton from "./tab-button";
+
+let loaded = false
+if (!loaded) {
+  customElements.define('nh-button', NHButton)
+  customElements.define('nh-card', NHCard)
+  customElements.define('nh-tab-button', NHTabButton)
+  customElements.define('nh-page-header-card', NHPageHeaderCard)
+  loaded = true
+}

src/alert.ts → design-system/src/alert.ts

@@ -1,11 +1,11 @@
 import { css, CSSResult, html } from 'lit';
 import {property } from 'lit/decorators.js';
 import { NHComponentShoelace } from './ancestors/base';
-import { SlAlert } from '@scoped-elements/shoelace';
+import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.js';
 
 export type AlertType = 'danger' | 'warning' | 'neutral' | 'success' | 'primary';
 
-export class NHAlert extends NHComponentShoelace {
+export default class NHAlert extends NHComponentShoelace {
   @property()
   open: boolean = true;
   @property()

src/assessment-widget.stories.ts → design-system/src/assessment-widget.stories.ts

@@ -1,7 +1,9 @@
 import { b64images } from '@neighbourhoods/design-system-styles';
-import './assessment-widget';
 import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components';
+import NHAssessmentWidget from './assessment-widget';
+
+customElements.define('nh-assessment-widget', NHAssessmentWidget)
 
 interface AssessmentWidgetProps {
   name: string;
@@ -11,13 +13,15 @@ interface AssessmentWidgetProps {
 
 const meta: Meta<AssessmentWidgetProps> = {
   title: 'NHComponent/AssessmentWidget',
-  component: 'nh-card',
+  component: 'nh-assessment-widget',
   argTypes: {
     name: { control: 'text' },
     iconImg: { control: 'text' },
     iconAlt: { control: 'text' },
   },
-  render:  (args) => html`<nh-assessment-widget .name=${args.name} .iconAlt=${args.iconAlt} .iconImg=${args.iconImg}></nh-assessment-widget>`,
+  parameters: { 
+    backgrounds: { default: 'surface' },
+  },
 };
 
 export default meta;
@@ -45,4 +49,4 @@ export const Chili: Story = {
     iconAlt: 'hot!', 
     iconImg: b64images.icons.chili
   },
-};
+};

src/assessment-widget.ts → design-system/src/assessment-widget.ts

@@ -3,7 +3,7 @@ import {property, query, queryAll } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { NHComponentShoelace } from "./ancestors/base";
 
-export class NHAssessmentWidget extends NHComponentShoelace {
+export default class NHAssessmentWidget extends NHComponentShoelace {
   @property()
   name!: string;
   @property()
@@ -121,7 +121,7 @@ export class NHAssessmentWidget extends NHComponentShoelace {
       }
 
       .assessment-icon-container {
-        background-color: var(--nh-theme-bg-muted);
+        background-color: var(--nh-theme-bg-detail);
         border-radius: var(--border-r-tiny);
         width: 40px;
         height: 40px;