revotech-ui-kit 0.0.2 → 0.0.4-beta

package/package.json

@@ -3,9 +3,16 @@
   "description": "Webcomponent wc-ui following open-wc recommendations",
   "license": "MIT",
   "author": "wc-ui",
-  "version": "0.0.2",
+  "version": "0.0.4-beta",
   "type": "module",
+  "main": "dist/[hash].js",
+"types": "dist/index.d.ts",
   "scripts": {
+    "release": "npm version $(semver $npm_package_version -i major) && npm publish --tag latest",
+    "release:minor": "npm version $(semver $npm_package_version -i minor) && npm publish --tag latest",
+    "release:patch": "npm version $(semver $npm_package_version -i patch) && npm publish --tag latest",
+    "release:beta": "npm version $(semver $npm_package_version -i prerelease --preid $(npm whoami) ) && npm publish --tag beta",
+    "dev": "rollup -c -w",
     "clean": "rimraf dist",
     "copy-files": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.js dist/public/",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
@@ -13,40 +20,58 @@
     "test": "tsc && wtr --coverage",
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
     "storybook": "storybook dev -p 6006",
-    "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook",
-    "build": "npm run clean && tsc && rollup -c rollup.config.js && npm run copy-files && npm run analyze -- --exclude dist",
+    "test-storybook": "test-storybook",
+    "storybook:build": "storybook build",
+    "build": "NODE_ENV=production rollup -c",
     "start:build": "web-dev-server --root-dir dist --app-index index.html --open",
     "analyze": "cem analyze --litelement",
     "start": "npm run clean && tsc && npm run copy-files && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
-    "tw:watch": "concurrently \"tailwindcss -i ./src/tailwind-lib.css -o ./src/globals.css --watch\" \"twlit --input ./src/globals.css --output ./src/lib/tw-styles.ts \""
+    "tw:watch": "concurrently \"tailwindcss -i ./src/tailwind-lib.css -o ./src/globals.css --watch\" \"twlit --input ./src/globals.css --output ./src/styles/tw.styles.ts \"",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@lit-labs/react": "^1.2.0",
+    "@open-wc/lit-helpers": "^0.7.0",
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-links": "^8.0.0",
     "@storybook/web-components": "^8.0.0",
     "@storybook/web-components-vite": "^8.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "husky": "^9.1.4",
     "lit": "^3.1.2",
-    "storybook": "^8.0.0",
+    "playwright": "^1.47.1",
+    "react": "^18.3.1",
+    "storybook": "^8.3.4",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.16.4",
+    "@chromatic-com/storybook": "^1.9.0",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@open-wc/building-rollup": "^2.0.2",
     "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^3.1.6",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
     "@storybook/builder-vite": "^8.0.0",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/test": "^8.2.9",
+    "@storybook/test-runner": "^0.19.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
     "@web/dev-server": "^0.1.34",
     "@web/dev-server-storybook": "^0.5.4",
-    "@web/rollup-plugin-html": "^1.11.0",
-    "@web/rollup-plugin-import-meta-assets": "^1.0.7",
+    "@web/rollup-plugin-html": "^1.11.1",
+    "@web/rollup-plugin-import-meta-assets": "^1.0.8",
     "@web/test-runner": "^0.14.0",
     "babel-plugin-template-html-minifier": "^4.1.0",
     "concurrently": "^5.3.0",
@@ -54,23 +79,27 @@
     "deepmerge": "^4.2.2",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.3.0",
-    "husky": "^9.1.4",
+    "eslint-plugin-storybook": "^0.8.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.60.0",
+    "rollup": "^2.79.2",
     "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-serve": "^1.1.1",
+    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-workbox": "^6.2.0",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.3.1",
     "twlit": "^0.0.1-alpha.37",
-    "typescript": "^5.3.3"
+    "typescript": "^5.6.3"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
     "extends": [
       "@open-wc",
-      "prettier"
+      "prettier",
+      "plugin:storybook/recommended"
     ],
     "plugins": [
       "@typescript-eslint"
@@ -102,11 +131,6 @@
     "singleQuote": true,
     "arrowParens": "avoid"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "*.ts": [
       "eslint --fix",

package/rollup.config.js

@@ -1,13 +1,19 @@
 import nodeResolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 import babel from '@rollup/plugin-babel';
 import html from '@web/rollup-plugin-html';
 import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
 import esbuild from 'rollup-plugin-esbuild';
 import { generateSW } from 'rollup-plugin-workbox';
+import serve from 'rollup-plugin-serve';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
 import path from 'path';
 
+const isProd = process.env.NODE_ENV === 'production';
+
 export default {
-  input: 'index.html',
+  input: 'src/index.ts', // Entry file for TypeScript
   output: {
     entryFileNames: '[hash].js',
     chunkFileNames: '[hash].js',
@@ -15,26 +21,23 @@ export default {
     format: 'es',
     dir: 'dist',
   },
-  preserveEntrySignatures: false,
-
   plugins: [
-    /** Enable using HTML as rollup entrypoint */
     html({
       minify: true,
       injectServiceWorker: true,
       serviceWorkerPath: 'dist/sw.js',
     }),
-    /** Resolve bare module imports */
     nodeResolve(),
-    /** Minify JS, compile JS to a lower language target */
+    commonjs(),
     esbuild({
       minify: true,
       target: ['chrome64', 'firefox67', 'safari11.1'],
-    }),    
-    /** Bundle assets references via import.meta.url */
+      include: /\.ts$/,
+    }),
     importMetaAssets(),
-    /** Minify html and css tagged template literals */
     babel({
+      babelHelpers: 'bundled',
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
       plugins: [
         [
           require.resolve('babel-plugin-template-html-minifier'),
@@ -53,19 +56,28 @@ export default {
         ],
       ],
     }),
-    /** Create and inject a service worker */
     generateSW({
       globIgnores: ['polyfills/*.js', 'nomodule-*.js'],
       navigateFallback: '/index.html',
-      // where to output the generated sw
       swDest: path.join('dist', 'sw.js'),
-      // directory to match patterns against to be precached
       globDirectory: path.join('dist'),
-      // cache any html js and css by default
       globPatterns: ['**/*.{html,js,css,webmanifest}'],
       skipWaiting: true,
       clientsClaim: true,
       runtimeCaching: [{ urlPattern: 'polyfills/*.js', handler: 'CacheFirst' }],
     }),
+    !isProd &&
+      serve({
+        open: true,
+        contentBase: 'dist',
+        host: 'localhost',
+        port: 3000,
+        historyApiFallback: true, // Ensures SPA routing works
+      }),
+    !isProd && livereload('dist'),
+    isProd && terser(),
   ],
+  watch: {
+    clearScreen: false,
+  },
 };

package/src/assets/icons/arrows.icon.ts

@@ -0,0 +1,20 @@
+import { svg } from 'lit';
+
+export function arrowsIcon() {
+  return svg` <svg
+  class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m7 15 5 5 5-5"></path>
+  <path d="m7 9 5-5 5 5"></path>
+</svg>
+  `;
+}

package/src/assets/icons/index.ts

@@ -0,0 +1,3 @@
+export * from './arrows.icon';
+export * from './tick.icon';
+export * from './search.icon';

package/src/assets/icons/search.icon.ts

@@ -0,0 +1,19 @@
+import { svg } from 'lit';
+
+export function searchIcon() {
+  return svg` <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width = "24" 
+    height = "24" 
+    viewBox = "0 0 24 24" 
+    fill = "none" 
+    stroke = "currentColor" 
+    stroke-width="2" 
+    stroke-linecap="round" 
+    stroke-linejoin="round" 
+    class="lucide lucide-search h-4 w-4 shrink-0 opacity-50" > 
+  <circle cx="11" cy = "11" r = "8" > </circle>
+  <path d="m21 21-4.3-4.3"></path > 
+  </svg>
+  `;
+}

package/src/assets/icons/tick.icon.ts

@@ -0,0 +1,20 @@
+import { svg } from 'lit';
+
+export function tickIcon() {
+  return svg`
+             <svg
+                class="shrink-0 size-3.5 text-blue-600 dark:text-blue-500"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M20 6 9 17l-5-5"></path>
+              </svg>
+  `;
+}

package/src/components/atoms/alert/alert-description.ts

@@ -0,0 +1,15 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('rtg-alert-description')
+export class AlertDescription extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/components/atoms/alert/alert-title.ts

@@ -0,0 +1,17 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('rtg-alert-title')
+export class AlertTitle extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/components/atoms/alert/alert.atom.ts

@@ -0,0 +1,51 @@
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators.js';
+import { alertStyle } from './alert.styles';
+import { TWStyles } from '../../../styles';
+import { AlertTitle } from './alert-title';
+import { AlertDescription } from './alert-description';
+
+@customElement('rtg-alert')
+class Alert extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        margin-bottom: 1rem;
+      }
+      .alert {
+        border: 1px solid transparent;
+        border-radius: 0.375rem;
+      }
+      .title {
+        font-weight: bold;
+        margin-bottom: 0.5rem;
+      }
+    `,
+    TWStyles,
+  ];
+  static alertVairants = alertStyle;
+
+  @property({ type: String }) variant:
+    | 'success'
+    | 'error'
+    | 'warning'
+    | 'info' = 'info';
+  @property({ type: String }) size: 'default' | 'large' | 'small' = 'default';
+
+  private get alertClasses() {
+    return alertStyle({ variant: this.variant, size: this.size });
+  }
+
+  render() {
+    return html`
+      <div class="alert ${this.alertClasses}">
+        <slot name="title"></slot>
+        <slot name="description"></slot>
+      </div>
+    `;
+  }
+}
+
+export { Alert, AlertDescription, AlertTitle };

package/src/components/atoms/alert/alert.stories.ts

@@ -0,0 +1,71 @@
+import { html } from 'lit';
+import { Meta, StoryObj } from '@storybook/web-components';
+import './alert.atom';
+import { Alert as AlertComponent } from './alert.atom';
+
+import { expect, within, waitFor } from '@storybook/test';
+
+const testAlertBehavior = async (args: any, canvasElement: any) => {
+  const canvas = within(canvasElement);
+  // 1. Test:Alert exits
+  const alert = await waitFor(() => canvas.getByTestId('alert-id'));
+
+  //2. Test: Alert should have correct variant
+  expect(alert).toHaveAttribute('variant', args.variant);
+
+  //3. Test: Alert should have correct size
+  expect(alert).toHaveAttribute('size', args.size);
+  if (alert.shadowRoot) {
+    const innerDiv = alert.shadowRoot.querySelector('div');
+    //4. Test: Alert should have correct class
+    const expectedClasses = AlertComponent.alertVairants({
+      variant: args.variant,
+      size: args.size,
+    });
+    expect(innerDiv).toHaveClass(`alert ${expectedClasses}`);
+  }
+};
+
+export default {
+  title: 'components/atoms/alert',
+  tags: ['autodocs'],
+
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['success', 'error', 'warning', 'info'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'large', 'small'],
+    },
+    title: {
+      control: 'text',
+    },
+    message: {
+      control: 'text',
+    },
+  },
+} as Meta;
+
+type Story = StoryObj;
+
+export const AlertStory: Story = {
+  args: {
+    variant: 'info',
+    size: 'default',
+    title: 'Information',
+    message: 'This is an information message.',
+  },
+  render: ({ variant, size, message, title }) => html`
+    <rtg-alert data-testid="alert-id" variant=${variant} size=${size}>
+      <rtg-alert-title slot="title">${title}</rtg-alert-title>
+      <rtg-alert-description slot="description"
+        >${message}</rtg-alert-description
+      >
+    </rtg-alert>
+  `,
+  play: async ({ args, canvasElement }) => {
+    await testAlertBehavior(args, canvasElement);
+  },
+};

package/src/components/atoms/alert/alert.styles.ts

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority';
+
+export const alertStyle = cva('p-4 rounded-sm text-sm font-medium', {
+  variants: {
+    variant: {
+      success: 'bg-green-100 text-green-800 border-green-200',
+      error: 'bg-red-100 text-red-800 border-red-200',
+      warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+      info: 'bg-blue-100 text-blue-800 border-blue-200',
+    },
+    size: {
+      small: 'text-sm',
+      default: 'text-base',
+      large: 'text-xl',
+    },
+  },
+  defaultVariants: {
+    variant: 'info',
+    size: 'default',
+  },
+});

package/src/components/atoms/alert/alert.types.ts

@@ -0,0 +1 @@
+export {};

package/src/components/atoms/badge/badge.atom.ts

@@ -0,0 +1,40 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { cn, BaseElement } from '../../../helpers';
+import { badgeStyle } from './badge.style';
+import { BadgeVariant } from './badge.type';
+import { TWStyles } from '../../../styles';
+import { spread } from '@open-wc/lit-helpers';
+
+@customElement('rtg-badge')
+export class Badge extends BaseElement {
+  static badgeVariants = badgeStyle;
+
+  @property({ type: String }) variant: BadgeVariant = 'default';
+
+  static styles = [css``, TWStyles];
+
+  protected getAttributesToExclude(): string[] {
+    return ['variant'];
+  }
+
+  render() {
+    const attributes = this.getFilteredAttributes();
+
+    return html`
+      <div
+        id="rtg-badge-id"
+        class="
+        ${cn(
+          Badge.badgeVariants({
+            variant: this.variant,
+            className: this.className,
+          })
+        )}"
+        ${spread(attributes)}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/components/atoms/badge/badge.stories.ts

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './badge.atom';
+import { expect, within, waitFor, userEvent } from '@storybook/test';
+
+const meta: Meta = {
+  component: 'components/badge',
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      description: 'Choose the visual style of the badge.',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      options: [
+        'default',
+        'destructive',
+        'outline',
+        'secondary',
+        'ghost',
+        'link',
+      ],
+    },
+    label: {
+      control: 'text',
+      description:
+        ' The text displayed on the button. Can also be a function returning the label dynamically.',
+      table: {
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+};
+
+const testBadgeBehavior = async (args: any, canvasElement: any) => {
+  const canvas = within(canvasElement);
+  const badge = await waitFor(() => canvas.getByTestId('badge-id'));
+  expect(badge).toBeVisible();
+  if (badge.shadowRoot) {
+    const badgeItem = await badge.shadowRoot.getElementById('rtg-badge-id');
+    if (badgeItem) {
+      expect(badgeItem).toHaveClass(
+        'inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent rounded-full'
+      );
+      switch (args.variant) {
+        case 'default':
+          expect(badgeItem).toHaveClass('bg-primary');
+          expect(badgeItem).toHaveClass('text-primary-foreground');
+          break;
+        case 'destructive':
+          expect(badgeItem).toHaveClass('bg-destructive');
+          expect(badgeItem).toHaveClass('text-destructive-foreground');
+          break;
+        case 'outline':
+          expect(badgeItem).toHaveClass('border');
+          expect(badgeItem).toHaveClass('border-input');
+          expect(badgeItem).toHaveClass('bg-background');
+          expect(badgeItem).toHaveClass('shadow-sm');
+          expect(badgeItem).toHaveClass('hover:bg-accent');
+          expect(badgeItem).toHaveClass('hover:text-accent-foreground');
+          break;
+        case 'secondary':
+          expect(badgeItem).toHaveClass('bg-secondary');
+          expect(badgeItem).toHaveClass('text-secondary-foreground');
+          break;
+        case 'ghost':
+          expect(badgeItem).toHaveClass('hover:bg-accent');
+          expect(badgeItem).toHaveClass('hover:text-accent-foreground');
+          break;
+        case 'link':
+          expect(badgeItem).toHaveClass('text-primary');
+          expect(badgeItem).toHaveClass('underline');
+          break;
+      }
+      await userEvent.hover(badgeItem);
+      switch (args.variant) {
+        case 'outline':
+          expect(badgeItem).toHaveClass('hover:bg-accent');
+          expect(badgeItem).toHaveClass('hover:text-accent-foreground');
+          break;
+        case 'ghost':
+          expect(badgeItem).toHaveClass('bg-accent');
+          expect(badgeItem).toHaveClass('text-accent-foreground');
+          break;
+        case 'link':
+          expect(badgeItem).toHaveClass('text-primary');
+          expect(badgeItem).toHaveClass('underline');
+          break;
+        default:
+          break;
+      }
+      const focusedBadge = canvas.getByTestId('badge-id');
+      console.log(focusedBadge.textContent, args.label);
+      expect(focusedBadge.textContent).toContain(args.label);
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Badge: Story = {
+  args: {
+    variant: 'default',
+    label: 'badge',
+  },
+  render: ({ variant, label }) => html`
+    <rtg-badge data-testid="badge-id" variant=${variant}>
+      <p>${label}</p>
+    </rtg-badge>
+  `,
+  play: async ({ args, canvasElement }) => {
+    await testBadgeBehavior(args, canvasElement);
+  },
+};

package/src/components/atoms/badge/badge.style.ts

@@ -0,0 +1,24 @@
+import { cva } from 'class-variance-authority';
+
+export const badgeStyle = cva(
+  'inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent rounded-full',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);

package/src/components/atoms/badge/badge.type.ts

@@ -0,0 +1,7 @@
+export type BadgeVariant =
+  | 'default'
+  | 'destructive'
+  | 'outline'
+  | 'secondary'
+  | 'ghost'
+  | 'link';