Implement tabs

.github/workflows/lint.yml

@@ -14,4 +14,4 @@ jobs:
         with:
           version: latest
       - name: Run Biome
-        run: biome ci ./src
+        run: biome ci ./packages

.github/workflows/publish.yml

@@ -10,11 +10,11 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
-          registry-url: 'https://registry.npmjs.org'
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
       - uses: oven-sh/setup-bun@v2
       - run: bun install
       - run: bun run build-designsystem
-      - run: cd dist && npm publish --access=public
+      - run: cd packages/lib/dist && npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.gitignore

@@ -9,10 +9,10 @@ lerna-debug.log*
 
 node_modules
 dist-ssr
-dist/*
-!dist/package.json
-!dist/LICENSE.md
-!dist/README.md
+packages/lib/dist/*
+!packages/lib/dist/package.json
+!packages/lib/dist/LICENSE.md
+!packages/lib/dist/README.md
 *.local
 
 # Editor directories and files

.storybook/main.ts

@@ -1,7 +1,11 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
 
 const config: StorybookConfig = {
-  stories: ['../stories/**/*.mdx', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../stories/**/*.mdx',
+    '../packages/lib/**/*.mdx',
+    '../packages/lib/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   addons: ['@storybook/addon-essentials', '@chromatic-com/storybook', '@storybook/addon-themes'],
   framework: {
     name: '@storybook/web-components-vite',
@@ -11,7 +15,7 @@ const config: StorybookConfig = {
     defaultName: 'Overview',
   },
   staticDirs: ['../public'],
-  async viteFinal(config, { configType }) {
+  async viteFinal(config) {
     if (config.optimizeDeps) {
       // customize the Vite config here
       config.optimizeDeps.include = [...(config.optimizeDeps?.include ?? []), '@storybook/web-components'];

.storybook/manager.ts

@@ -5,7 +5,7 @@ const cxTheme = create({
   base: 'light',
 
   brandUrl: 'https://designsystem.computas.com',
-  brandImage: 'https://computas.com/content/themes/computas/assets/images/logo.svg',
+  brandImage: 'https://designsystem.computas.com/computas-logo.svg',
   brandTarget: '_self',
 
   colorPrimary: '#003459',

.storybook/preview.ts

@@ -1,6 +1,6 @@
 import { withThemeByClassName } from '@storybook/addon-themes';
 import type { Preview } from '@storybook/web-components';
-import '../global-styles.css';
+import '../packages/lib/global-styles.css';
 import './registerIcons';
 
 const preview: Preview = {

.storybook/registerIcons.ts

@@ -1,5 +1,5 @@
-import { addIcons } from '../src/components/icon';
-import * as cxIcons from '../src/components/icon/iconRegistry';
+import { addIcons } from '../packages/lib/components/icon';
+import * as cxIcons from '../packages/lib/components/icon/iconRegistry';
 
 const iconObj = Object.entries(cxIcons)
   .map(([_, icon]) => icon as cxIcons.SVGIcon)

.vscode/settings.json

@@ -1,6 +1,3 @@
 {
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": "always"
-  },
   "editor.formatOnSave": true
 }

biome.json

@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["./src/components/icon/iconRegistry.ts"]
+    "ignore": ["./packages/lib/components/icon/iconRegistry.ts", "./packages/lib/dist/*"]
   },
   "formatter": {
     "enabled": true,

package.json

@@ -3,34 +3,28 @@
   "version": "1.0.0",
   "private": "true",
   "type": "module",
-  "workspaces": ["src/components/*"],
+  "workspaces": ["packages/*"],
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "lint": "biome check ./src",
+    "lint": "biome check ./packages",
     "build-docs": "tsc && storybook build",
-    "build-styles": "tsup global-styles.css --out-dir dist",
-    "build-designsystem": "bun run build-styles & bun --filter '*' build",
-    "create-icon-registry": "bun --filter '@computas/designsystem-icon' create-icon-registry"
-  },
-  "dependencies": {
-    "@lit/react": "^1.0.6",
-    "lit": "^3.2.1"
+    "build-designsystem": "bun --filter '@computas/lib' build",
+    "create-icon-registry": "bun --filter '@computas/lib' create-icon-registry",
+    "start-react-test-project": "bun --filter '@computas/react-test-project' dev"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@chromatic-com/storybook": "^3.2.2",
-    "@computas/designsystem-icon": "workspace:*",
-    "@storybook/addon-essentials": "^8.4.6",
-    "@storybook/addon-themes": "^8.4.6",
-    "@storybook/blocks": "^8.4.6",
-    "@storybook/manager-api": "^8.4.6",
-    "@storybook/test": "^8.4.6",
-    "@storybook/theming": "^8.4.6",
-    "@storybook/web-components": "^8.4.6",
-    "@storybook/web-components-vite": "^8.4.6",
-    "@types/node": "^22.10.1",
-    "storybook": "^8.4.6",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
+    "@storybook/web-components": "^8.4.7",
+    "@storybook/web-components-vite": "^8.4.7",
+    "storybook": "^8.4.7",
     "typescript": "~5.7.2",
-    "vite": "^6.0.2"
+    "vite": "^6.0.3"
   }
 }

packages/lib/build.ts

@@ -0,0 +1,23 @@
+import esbuild from 'esbuild';
+import { dtsPlugin } from 'esbuild-plugin-d.ts';
+import litPlugin from 'esbuild-plugin-lit';
+
+import { dependencies, peerDependencies } from './package.json';
+
+esbuild.build({
+  entryPoints: ['components/**/index.ts', 'components/**/react.ts', 'components/icon/iconRegistry.ts'],
+  outdir: 'dist',
+  bundle: true,
+  sourcemap: true,
+  outbase: 'components',
+  allowOverwrite: true,
+  format: 'esm',
+  plugins: [litPlugin(), dtsPlugin({ tsconfig: 'tsconfig.lib.json' })],
+
+  /**
+   * The React wrappers import the web component from the index file.
+   * We do not want to bundle the web component into the react entry point,
+   * so we exclude all imports of "./index" from the bundle.
+   */
+  external: [...Object.keys(dependencies), ...Object.keys(peerDependencies), './index*'],
+});

src/components/button/Overview.mdx → packages/lib/components/button/Overview.mdx

@@ -22,7 +22,3 @@ import * as buttonStories from "./button.stories";
 ### Danger
 
 <Canvas of={buttonStories.Danger} />
-
-### Icon
-
-<Canvas of={buttonStories.Icon} />

src/components/button/button.css → packages/lib/components/button/button.css

@@ -14,6 +14,7 @@
   line-height: 1rem;
   padding: var(--cx-spacing-4) var(--cx-spacing-6);
   min-width: 6rem;
+  height: fit-content;
   border-radius: var(--cx-radius-pill);
   transition:
     scale 20ms ease,
@@ -97,10 +98,12 @@
   --icon-size: var(--cx-spacing-6);
   padding: var(--cx-spacing-3);
   min-width: unset;
+  width: fit-content;
 
   > * {
     width: var(--icon-size);
     height: var(--icon-size);
+    fill: currentColor;
   }
 }
 

src/components/button/button.stories.ts → packages/lib/components/button/button.stories.ts

@@ -9,21 +9,54 @@ export const Primary: StoryObj = {
   render: () => html`
     <button class="cx-btn__primary cx-btn__lg cx-mr-6">Primary button large</button>
 <button class="cx-btn__primary cx-mr-6">Primary button</button>
-<button class="cx-btn__primary cx-btn__sm">Primary button small</button>`,
+<button class="cx-btn__primary cx-btn__sm cx-mr-6">Primary button small</button>
+<br /><br />
+<button class="cx-btn__primary cx-btn__icon cx-btn__lg cx-mr-6">
+  <cx-icon name="edit"></cx-icon>
+</button>
+<button class="cx-btn__primary cx-btn__icon cx-mr-6">
+  <cx-icon name="edit"></cx-icon>
+</button>
+<button class="cx-btn__primary cx-btn__icon cx-btn__sm">
+  <cx-icon name="edit"></cx-icon>
+</button>
+  `,
 };
 
 export const Secondary: StoryObj = {
   render: () => html`
     <button class="cx-btn__secondary cx-btn__lg cx-mr-6">Secondary button large</button>
 <button class="cx-btn__secondary cx-mr-6">Secondary button</button>
-<button class="cx-btn__secondary cx-btn__sm">Secondary button small</button>`,
+<button class="cx-btn__secondary cx-btn__sm">Secondary button small</button>
+<br /><br />
+<button class="cx-btn__secondary cx-btn__icon cx-btn__lg cx-mr-6">
+  <cx-icon name="edit"></cx-icon>
+</button>
+<button class="cx-btn__secondary cx-btn__icon cx-mr-6">
+  <cx-icon name="edit"></cx-icon>
+</button>
+<button class="cx-btn__secondary cx-btn__icon cx-btn__sm">
+  <cx-icon name="edit"></cx-icon>
+</button>
+`,
 };
 
 export const Tertiary: StoryObj = {
   render: () => html`
     <button class="cx-btn__tertiary cx-btn__lg cx-mr-6">Tertiary button large</button>
 <button class="cx-btn__tertiary cx-mr-6">Tertiary button</button>
-<button class="cx-btn__tertiary cx-btn__sm">Tertiary button small</button>`,
+<button class="cx-btn__tertiary cx-btn__sm">Tertiary button small</button>
+<br /><br />
+<button class="cx-btn__tertiary cx-btn__icon cx-btn__lg cx-mr-6">
+  <cx-icon name="edit"></cx-icon>
+</button>
+<button class="cx-btn__tertiary cx-btn__icon cx-mr-6">
+  <cx-icon name="edit"></cx-icon>
+</button>
+<button class="cx-btn__tertiary cx-btn__icon cx-btn__sm">
+  <cx-icon name="edit"></cx-icon>
+</button>
+`,
 };
 
 export const Danger: StoryObj = {
@@ -32,17 +65,3 @@ export const Danger: StoryObj = {
 <button class="cx-btn__danger cx-mr-6">Danger button</button>
 <button class="cx-btn__danger cx-btn__sm">Danger button small</button>`,
 };
-
-export const Icon: StoryObj = {
-  render: () => html`
-    <button class="cx-btn__danger cx-btn__lg cx-btn__icon cx-mr-6">
-  <div style="width: 32px; height: 32px; border: 1px solid black"></div>
-</button>
-<button class="cx-btn__danger cx-btn__icon cx-mr-6">
-  <div style="width: 24px; height: 24px; border: 1px solid black"></div>
-</button>
-<button class="cx-btn__danger cx-btn__icon cx-btn__sm">
-  <div style="width: 16px; height: 16px; border: 1px solid black"></div>
-</button>
-  `,
-};

src/components/chip/chip.stories.ts → packages/lib/components/chips/chip.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 export default {
-  title: 'Components/Chip',
+  title: 'Components/Chips',
 } satisfies Meta;
 
 export const Display: StoryObj = {

src/components/form-field/form-field.css → packages/lib/components/form-field/form-field.css

@@ -22,7 +22,7 @@ label.cx-form-field {
 
     .cx-form-field__error {
       display: flex;
-      height: 1.4rem;
+      height: 1.5rem;
       opacity: 1;
       margin-top: var(--cx-spacing-1);
 
@@ -96,6 +96,6 @@ label.cx-form-field {
   opacity: 0;
   transition: height var(--rubber-band-ease), opacity ease, margin ease, display;
   transition-behavior: allow-discrete;
-  transition-duration: 500ms;
+  transition-duration: 400ms;
   display: none;
 }

src/components/icon/icon.stories.ts → packages/lib/components/icon/icon.stories.ts

@@ -48,9 +48,9 @@ export const Color: StoryObj = {
   }
 </style>
 
-<cx-icon name="star-added" size="10" class="cx-mr-4 danger-icon"></cx-icon>
-<cx-icon name="star-added" size="10" class="cx-mr-4 info-icon"></cx-icon>
-<cx-icon name="star-added" size="10" class="cx-mr-4 success-icon"></cx-icon>
+<cx-icon name="star-filled" size="10" class="cx-mr-4 danger-icon"></cx-icon>
+<cx-icon name="star-filled" size="10" class="cx-mr-4 info-icon"></cx-icon>
+<cx-icon name="star-filled" size="10" class="cx-mr-4 success-icon"></cx-icon>
 <button class="cx-btn__secondary">
   Go forward
   <cx-icon name="forward" size="4"></cx-icon>

src/components/input/input.stories.ts → packages/lib/components/input/input.stories.ts

@@ -36,6 +36,7 @@ export const Invalid: StoryObj = {
     <input aria-describedby="error-text" type="email" />
   </div>
   <div class="cx-form-field__error" aria-live="polite" id="error-text">
+    <cx-icon name="error-circle" size="6"></cx-icon>
     Please provide a valid e-mail
   </div>
 </label>