build: move all components under subdirectories like shoelace

hotosm · Jun 4, 2024 · 9eff1c0 · 9eff1c0
1 parent ce685f1
commit 9eff1c0
Show file tree

Hide file tree

Showing 23 changed files with 369 additions and 97 deletions.
diff --git a/.github/workflows/cdn_deploy.yml b/.github/workflows/cdn_deploy.yml
@@ -61,10 +61,8 @@ jobs:
           aws s3 sync --delete \
           --exclude "*" \
           --include='dist/*' \
-          --include "components/*.js" \
-          --include='components/*.d.ts' \
-          --include "react/*.js" \
-          --include='react/*.d.ts' \
+          --include "components/*" \
+          --include "react/*" \
           --include "theme/*" \
           --include "i18n/*.xliff" \
           ${{ github.workspace }} \

diff --git a/.storybook/stories/Button.stories.ts → .storybook/stories/button.stories.ts b/.storybook/stories/Button.stories.ts → .storybook/stories/button.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
-import "../../components/Button.js";
+import "../../components/button/button.js";
 import { html } from "lit";
 
 const meta: Meta = {
@@ -11,12 +11,12 @@ export default meta;
 export const Template: StoryObj = {
   args: {
     text: "Click Me",
-    variant: "primary",
+    variant: "default",
     disabled: false,
   },
   argTypes: {
     variant: {
-      options: ["primary", "secondary"],
+      options: ["default", "primary", "success", "neutral", "warning", "danger"],
       control: {
         type: "select",
       },

diff --git a/.storybook/stories/Header.stories.ts → .storybook/stories/header.stories.ts b/.storybook/stories/Header.stories.ts → .storybook/stories/header.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 import { hrefTo } from '@storybook/addon-links';
-import "../../components/Header.js";
+import "../../components/header/header.js";
 import { html } from "lit";
 
 const defaultLogo = new URL('../../theme/logo.png', import.meta.url).href;

diff --git a/.storybook/stories/Toolbar.stories.ts → .storybook/stories/toolbar.stories.ts b/.storybook/stories/Toolbar.stories.ts → .storybook/stories/toolbar.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
-import "../../components/Toolbar.js";
+import "../../components/toolbar/toolbar.js";
 import { html } from "lit";
 
 const meta: Meta = {

diff --git a/.storybook/stories/Tracking.stories.ts → .storybook/stories/tracking.stories.ts b/.storybook/stories/Tracking.stories.ts → .storybook/stories/tracking.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 import '@shoelace-style/shoelace/dist/components/alert/alert.js';
-import "../../components/Tracking.js";
+import "../../components/tracking/tracking.js";
 import { html } from "lit";
 
 const meta: Meta = {
@@ -42,10 +42,10 @@ export const Template: StoryObj = {
       }
     },
     addKeyLocalStorage: (siteId: number) => {
-      localStorage.setItem(`${siteId}-optout-closed`, 'true');
+      localStorage.setItem(`${siteId}-matomo-agree`, 'true');
     },
     removeKeyLocalStorage: (siteId: number) => {
-      localStorage.removeItem(`${siteId}-optout-closed`);
+      localStorage.removeItem(`${siteId}-matomo-agree`);
     },
   },
   render: (args, { parameters }) => {

diff --git a/README.md b/README.md
@@ -112,7 +112,7 @@ including a bundler such as rollup/vite/webpack, this is probably the best appro
 Example:
 
 ```js
-import '@hotosm/ui/components/Toolbar';
+import '@hotosm/ui/components/toolbar/toolbar';
 
 // Then in your template
 <hot-button>Click Me</hot-button>

diff --git a/components/Button.ts → components/button/button.ts b/components/Button.ts → components/button/button.ts
@@ -1,6 +1,4 @@
-import "../theme/hot.css";
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import '@shoelace-style/shoelace/dist/themes/dark.css';
+import "../../theme/sl-custom.css";
 
 import '@shoelace-style/shoelace/dist/components/button/button.js';
 
@@ -13,9 +11,9 @@ const buttonStyle = cva(
   "bg-primary text-white py-3 px-6 rounded leading-[1.15]",
   {
     variants: {
-      variant: {
-        primary: "bg-primary border-2 border-primary text-white",
-        secondary: `
+      classGroup: {
+        classGroup1: "bg-primary border-2 border-primary text-white",
+        classGroup2: `
           bg-white border-2 border-primary text-primary! hover:bg-lightGray
           focus:bg-transparent focus:border-primary
         `,
@@ -27,15 +25,19 @@ const buttonStyle = cva(
     },
   },
 );
+type variants = "classGroup1" | "classGroup2";
 
 export class Button extends LitElement {
   @property() name = "hot-button";
 
+  /** Type of button. */
+  @property({ type: String }) variant: string = "default";
+
   /** Disable the button, greyed out, not clickable. */
   @property({ type: Boolean }) disabled: boolean = false;
 
-  /** CVA button type. */
-  @property({ type: String }) variant: "primary" | "secondary" = "primary";
+  /** CVA button class group. */
+  @property({ type: String, attribute: 'class-group' }) classGroup: variants = "classGroup1";
 
   static styles = [
     css`
@@ -46,9 +48,9 @@ export class Button extends LitElement {
   protected render() {
     return html`<sl-button
       class=${buttonStyle({
-        variant: this.variant,
-        disabled: this.disabled,
+        classGroup: this.classGroup,
       })}
+      variant=${this.variant}
       ?disabled=${this.disabled}
       @click=${(e: MouseEvent) => {
         this._handleClick(e);

diff --git a/components/Header.ts → components/header/header.ts b/components/Header.ts → components/header/header.ts
@@ -1,6 +1,4 @@
-import "../theme/hot.css";
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import '@shoelace-style/shoelace/dist/themes/dark.css';
+import "../../theme/sl-custom.css";
 
 import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
 import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
@@ -10,11 +8,11 @@ import '@shoelace-style/shoelace/dist/components/tab/tab.js';
 import { LitElement, css, html, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 
-import registerBundledIcons from '../components/icons';
+import registerBundledIcons from '../../components/icons';
 
 registerBundledIcons();
 
-const hotLogo = new URL('../theme/logo.png', import.meta.url);
+const hotLogo = new URL('../../theme/logo.png', import.meta.url);
 
 interface MenuItem {
   label: string,
@@ -91,6 +89,11 @@ export class Header extends LitElement {
         align-items: center;
       }
 
+      #right-section {
+        display: flex;
+        align-items: center;
+      }
+      
       sl-tab-group {
         display: flex;
       }
@@ -114,6 +117,9 @@ export class Header extends LitElement {
         header {
           color: black;
         }
+        #break {
+          background-color: black;
+        }
       }
     `
   ];
@@ -149,11 +155,20 @@ export class Header extends LitElement {
           )}
         </sl-tab-group>
       </div>
-
-      <div id="drawer-block" style="font-size: 32px;">
-        ${this.drawer ? html`
-          <sl-icon-button library="bundled" name="list" label="drawer-open"></sl-icon-button>
-        ` : null}
+      <div id="right-section" style="display: flex; align-items: center;">
+        <sl-icon-button
+          library="bundled"
+          name="person-circle"
+          style="font-size: 1.8rem;"
+          label="login"
+          @click=${(e: MouseEvent) => { this._handleLogin(e)}}
+        ></sl-icon-button>
+        
+        <div id="drawer-block" style="font-size: 2rem;">
+          ${this.drawer ? html`
+            <sl-icon-button library="bundled" name="list" label="drawer-open"></sl-icon-button>
+          ` : null}
+        </div>
       </div>
     </header>
     `;
@@ -163,6 +178,10 @@ export class Header extends LitElement {
     this.selectedTab = index;
     clickAction();
   }
+
+  private _handleLogin(_e: MouseEvent) {
+    console.log("Login button clicked");
+  }
 }
 
 export default Header;

diff --git a/components/icons.ts b/components/icons.ts
@@ -60,6 +60,12 @@ const icons = {
       <path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
     </svg>
   `,
+  'person-circle': `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
+      <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+      <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+    </svg>  
+  `
 };
 
 const libraryResolver: IconLibraryResolver = (name: string) => {

diff --git a/components/index.ts b/components/index.ts
@@ -1,7 +1,14 @@
 // Index to import all components together
 // import '@hotosm/ui/components';
 
-export { default as Button } from './Button';
-export { default as Header } from './Header';
-export { default as Toolbar } from './Toolbar';
-export { default as Tracking } from './Tracking';
+// NOTE Must be included or rollup-plugin-css-only does not pick them up
+// NOTE the light theme must be imported before the sl-custom override!
+import '../theme/hot.css';
+import '@shoelace-style/shoelace/dist/themes/light.css';
+// import '@shoelace-style/shoelace/dist/themes/dark.css';
+import "../theme/sl-custom.css";
+
+export { default as Button } from './button/button';
+export { default as Header } from './header/header';
+export { default as Toolbar } from './toolbar/toolbar';
+export { default as Tracking } from './tracking/tracking';
diff --git a/components/Toolbar.ts → components/toolbar/toolbar.ts b/components/Toolbar.ts → components/toolbar/toolbar.ts
@@ -1,6 +1,4 @@
-import "../theme/hot.css";
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import '@shoelace-style/shoelace/dist/themes/dark.css';
+import "../../theme/sl-custom.css";
 
 import '@shoelace-style/shoelace/dist/components/button/button.js';
 import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
@@ -10,7 +8,7 @@ import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
 import { LitElement, css, html, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
 
-import registerBundledIcons from '../components/icons';
+import registerBundledIcons from '../../components/icons';
 
 registerBundledIcons();
 

diff --git a/components/Tracking.ts → components/tracking/tracking.ts b/components/Tracking.ts → components/tracking/tracking.ts
@@ -1,13 +1,11 @@
-import "../theme/hot.css";
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import '@shoelace-style/shoelace/dist/themes/dark.css';
+import "../../theme/sl-custom.css";
 
 import '@shoelace-style/shoelace/dist/components/alert/alert.js';
 
 import { LitElement, css, html, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 
-import registerBundledIcons from '../components/icons';
+import registerBundledIcons from '../../components/icons';
 
 registerBundledIcons();
 
@@ -41,7 +39,6 @@ export class Tracking extends LitElement {
       #tracking-header {
         font-weight: var(--sl-font-weight-bold);
         font-size: var(--sl-font-size-large);
-        color: #d63f3f;
         text-align: center;
       }
       sl-alert::part(base) {

diff --git a/docs/components/hot-button.md b/docs/components/hot-button.md
@@ -2,11 +2,12 @@
 
 ## Properties
 
-| Property   | Attribute  | Type                       | Default      | Description                                    |
-|------------|------------|----------------------------|--------------|------------------------------------------------|
-| `disabled` | `disabled` | `boolean`                  | false        | Disable the button, greyed out, not clickable. |
-| `name`     | `name`     | `string`                   | "hot-button" |                                                |
-| `variant`  | `variant`  | `"primary" \| "secondary"` | "primary"    | CVA button type.                               |
+| Property     | Attribute     | Type       | Default       | Description                                    |
+|--------------|---------------|------------|---------------|------------------------------------------------|
+| `classGroup` | `class-group` | `variants` | "classGroup1" | CVA button class group.                        |
+| `disabled`   | `disabled`    | `boolean`  | false         | Disable the button, greyed out, not clickable. |
+| `name`       | `name`        | `string`   | "hot-button"  |                                                |
+| `variant`    | `variant`     | `string`   | "default"     | Type of button.                                |
 
 ## Events
 

diff --git a/docs/components/hot-header.md b/docs/components/hot-header.md
@@ -7,4 +7,5 @@
 | `drawer` | `drawer`  | `boolean`       | true         |
 | `logo`   | `logo`    | `string \| URL` | "hotLogo"    |
 | `name`   | `name`    | `string`        | "hot-header" |
+| `tabs`   | `tabs`    | `MenuItem[]`    | []           |
 | `title`  | `title`   | `string`        | ""           |
diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
@@ -1,5 +1,5 @@
 <script type="module" lang="ts">
-  import '@hotosm/ui/components/Toolbar';
+  import '@hotosm/ui/components/toolbar/toolbar';
   import hotLogo from '@hotosm/ui/theme/logo.png';
   import { onMount } from 'svelte';
 

diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script setup>
-import '@hotosm/ui/components/Toolbar';
+import '@hotosm/ui/components/toolbar/toolbar';
 import hotLogo from '@hotosm/ui/theme/logo.png';
 import { ref } from "vue";
 

diff --git a/examples/vue/tsconfig.app.json b/examples/vue/tsconfig.app.json
@@ -6,9 +6,6 @@
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "baseUrl": "."
   }
 }
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "prepare": "pnpm run build",
     "compile": "tsc",
     "build": "pnpm run compile && rollup --config",
-    "build:docstrings": "wca analyze 'components/*.ts' --outDir 'docs/components' --format 'markdown'",
+    "build:docstrings": "wca analyze 'components/**/*.ts' --outDir 'docs/components' --format 'markdown'",
     "build:stories": "pnpm run build && storybook build --output-dir=docs/stories",
     "build:docs": "pnpm run build:docstrings && pnpm run build:stories",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -84,8 +84,7 @@
   },
   "files": [
     "dist/**/*",
-    "components/*.js",
-    "components/*.d.ts",
+    "components/**/*",
     "react/*.js",
     "react/*.d.ts",
     "theme/**/*",