revotech-ui-kit 0.0.2 → 0.0.3-beta

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

@@ -2,17 +2,101 @@ import { html } from 'lit';
 import { Meta, StoryFn } from '@storybook/web-components';
 import './label.atom';
 
+import { expect, within, fn, waitFor, userEvent } from '@storybook/test';
+import { Label } from './label.atom';
+
+// Label Test Behavior
+const testLabelBehavior = async (
+  args: any,
+  canvasElement: any,
+  mockHandler: any
+) => {
+  const canvas = within(canvasElement);
+  const label = await waitFor(() => canvas.getByTestId('label-id'));
+  if (label.shadowRoot) {
+    const innerLabel =
+      label.shadowRoot.querySelector('label') || ('' as unknown as Element);
+    // 1. Test: Label should have correct "for" attribute
+    expect(label).toHaveAttribute('for', args.for);
+
+    // 2. Test: Label should apply correct variant classes
+    const expectedClasses = Label.labelVariants({
+      className: '',
+    });
+    expect(innerLabel).toHaveClass(expectedClasses);
+
+    // 3. Test: Label should trigger associated input's click when clicked
+    if (!args.disabled) {
+      const targetInput = document.createElement('input');
+      targetInput.id = args.for;
+      label.shadowRoot.appendChild(targetInput);
+      targetInput.click = fn(); // Mock click behavior for test
+      await userEvent.click(innerLabel);
+      expect(targetInput.click).toHaveBeenCalled();
+      label.shadowRoot.removeChild(targetInput); // Clean up
+    }
+
+    // 4. Test: Ensure that label doesn't trigger input click when default is prevented
+    const event = new Event('click', { cancelable: true });
+    label.dispatchEvent(event);
+    if (!event.defaultPrevented) {
+      await userEvent.click(innerLabel);
+      expect(mockHandler).not.toHaveBeenCalled(); // should not trigger if default prevented
+    }
+  }
+};
+
 export default {
-  title: 'Components/Label',
-  component: 'rtg-label',
+  title: 'components/atoms/label',
   tags: ['autodocs'],
+  argTypes: {
+    label: {
+      type: 'string',
+      description: 'The text to display on the label.',
+      table: {
+        defaultValue: { summary: '' },
+      },
+    },
+    for: {
+      type: 'string',
+      description:
+        "The text that the label is describing. This is typically the ID of the input element it's labeling.",
+      table: {
+        defaultValue: { summary: '' },
+      },
+    },
+  },
 } as Meta;
 
 const Template: StoryFn = (args: any) =>
-  html` <rtg-label for=${args.for}>${args.label}</rtg-label>`;
+  html` <rtg-label
+    data-testchild="children-id"
+    data-testid="label-id"
+    for=${args.for}
+    >${args.label}</rtg-label
+  >`;
 
+const HtmlForTemplate: StoryFn = (args: any) =>
+  html` <rtg-label
+    data-testchild="children-id"
+    data-testid="label-id"
+    for=${args.for}
+  >
+    ${args.label}
+    <input type="text" id=${args.for} />
+  </rtg-label>`;
 export const Default = Template.bind({});
+export const HtmlFor = HtmlForTemplate.bind({});
+
 Default.args = {
   for: 'id',
   label: 'Email address',
 };
+HtmlFor.args = {
+  for: 'id',
+  label: 'Email address',
+};
+Default.play = async ({ args, canvasElement }) => {
+  const mockHandler = fn();
+  await testLabelBehavior(args, canvasElement, mockHandler);
+};

package/src/components/atoms/popover/popover-content.ts

@@ -0,0 +1,58 @@
+import { LitElement, html, css, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { popoverContentStyle } from './popover.style'; // Import the cva styles
+import { TWStyles } from '../../../styles';
+import { Popover } from './popover.atom';
+import { cn } from '../../../helpers';
+
+@customElement('rtg-popover-content')
+export class PopoverContent extends LitElement {
+  static styles = [css``, TWStyles];
+  get _popover(): Popover | null {
+    let parent = this.parentElement;
+    // Traverse up the DOM tree to find the parent `Popover`
+    while (parent && !(parent instanceof Popover)) {
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+
+  @property({ type: String }) side: 'bottom' | 'left' | 'right' | 'top' =
+    'bottom';
+  private handleClickOutside(event: MouseEvent) {
+    // Check if the click was outside the popover
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (slot) {
+      const assignedElements = slot.assignedElements({ flatten: true });
+      console.log(assignedElements[0]);
+      if (!assignedElements[0]?.contains(event.target as Node)) {
+        const popover = this._popover; // Get the parent popover
+        //@ts-ignore
+        popover.isOpen = false;
+      }
+    }
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    window.addEventListener('click', this.handleClickOutside.bind(this));
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    if (!this._popover?.isOpen) {
+      window.removeEventListener('click', this.handleClickOutside.bind(this));
+    }
+  }
+
+  render() {
+    const classes = popoverContentStyle({
+      state: 'open',
+      side: this.side,
+    });
+
+    return html`
+      <div class="${cn(classes)}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/components/atoms/popover/popover-trigger.ts

@@ -0,0 +1,50 @@
+import { LitElement, html, css, PropertyValues } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { TWStyles } from '../../../styles';
+import { Popover } from './popover.atom'; // Import the correct parent component
+
+@customElement('rtg-popover-trigger') // Rename the custom element tag to avoid conflict
+export class PopoverTrigger extends LitElement {
+  static styles = [css``, TWStyles];
+
+  handleClick = () => {
+    const popover = this._popover; // Get the parent popover
+    if (popover) {
+      popover.isOpen = !popover.isOpen;
+    }
+  };
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    const slots = this.shadowRoot?.querySelector(
+      'slot[name="trigger-button"]'
+    ) as HTMLSlotElement;
+    const assignedElements = slots?.assignedElements({ flatten: true });
+    if (assignedElements && assignedElements.length > 0) {
+      //@ts-ignore
+      assignedElements[0].click = this.handleClick;
+      // assignedElements[0].addEventListener('click', this.handleClick);
+    }
+
+    this.shadowRoot?.addEventListener('click', e => {
+      e.stopPropagation();
+    });
+  }
+
+  get _popover(): Popover | null {
+    let parent = this.parentElement;
+    // Traverse up the DOM tree to find the parent `Popover`
+    while (parent && !(parent instanceof Popover)) {
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+
+  render() {
+    return html`
+      <div style="width: fit-content;">
+        <slot name="trigger-button"></slot>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,34 @@
+import { LitElement, html, css, PropertyValues } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-popover')
+export class Popover extends LitElement {
+  static styles = [css``, TWStyles];
+
+  @state() isOpen: boolean = false;
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    // Add event listener for clicks outside the popover
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+    // Remove event listener when the popover is closed
+  }
+
+  render() {
+    return html`
+      <div>
+        <slot
+          name="trigger"
+          @click="${() => (this.isOpen = !this.isOpen)}"
+        ></slot>
+        <div data-testid="popover-content-holder" ?hidden="${!this.isOpen}">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,79 @@
+import { html } from 'lit';
+import { Meta, StoryFn } from '@storybook/web-components';
+import './popover.atom';
+import './popover-trigger';
+import './popover-content';
+import '../button/button.atom';
+import '../label/label.atom';
+import '../input/input.atom';
+
+import { expect, within, userEvent } from '@storybook/test';
+
+// Create a test to ensure the popover opens and closes correctly
+const testPopoverBehavior = async (args: any, canvasElement: any) => {
+  const canvas = within(canvasElement);
+
+  // Click on the trigger button to open the popover
+  const trigger = await canvas.getByText(args.triggerLabel);
+  await userEvent.click(trigger);
+
+  // Ensure the popover content is visible
+  const popoverContent = await canvas.getByTestId('popover-content');
+  expect(popoverContent).toBeVisible();
+
+  // Click inside the popover content, it should remain open
+  await userEvent.click(popoverContent);
+  expect(popoverContent).toBeVisible();
+
+  // Click outside the popover, it should close
+  await userEvent.click(document.body); // Trigger a click outside
+  await new Promise(r => setTimeout(r, 100)); // Wait for state update
+
+  // Check if popover content is hidden
+  const hiddenPopoverContent = canvas.queryByTestId('popover-content-holder');
+  expect(hiddenPopoverContent).toBeNull();
+};
+
+export default {
+  title: 'components/atoms/popover',
+  component: 'rtg-popover',
+  tags: ['autodocs'],
+  argTypes: {
+    triggerLabel: { control: 'text', defaultValue: 'Click me' },
+    popoverContent: {
+      control: 'text',
+      defaultValue: 'This is the content inside the popover.',
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = (args: any) => html`
+  <rtg-popover>
+    <!-- Trigger to open/close the popover -->
+    <rtg-popover-trigger slot="trigger">
+      <rtg-button variant="outline" slot="trigger-button"
+        >${args.triggerLabel}</rtg-button
+      >
+    </rtg-popover-trigger>
+
+    <!-- Popover content that will be shown or hidden -->
+    <rtg-popover-content
+      data-side="bottom"
+      data-testid="popover-content"
+      slot="content"
+    >
+      <div>
+        <p>${args.popoverContent}</p>
+      </div>
+    </rtg-popover-content>
+  </rtg-popover>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  triggerLabel: 'Click me',
+  popoverContent: 'This is the content inside the popover.',
+};
+Default.play = async ({ canvasElement }) => {
+  await testPopoverBehavior(Default.args, canvasElement);
+};

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

@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority';
+
+export const popoverRootStyle = cva('rtgpop-root');
+
+export const popoverContentStyle = cva(
+  'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none transition-transform transition-opacity',
+  {
+    variants: {
+      state: {
+        open: 'opacity-100 scale-100 duration-500', // 0.5 seconds for the transition
+        closed: 'opacity-0 scale-95 duration-500', // 0.5 seconds for the transition
+      },
+      side: {
+        bottom: 'translate-y-0',
+        left: 'translate-x-0',
+        right: 'translate-x-0',
+        top: 'translate-y-0',
+      },
+    },
+    defaultVariants: {
+      state: 'closed',
+      side: 'bottom',
+    },
+  }
+);

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

@@ -0,0 +1,3 @@
+// popoverConstants.ts
+export const STATE_OPEN = 'open';
+export const STATE_CLOSED = 'closed';

package/src/components/atoms/toggle/defs.ts

@@ -0,0 +1,29 @@
+/**
+ * Toggle size.
+ */
+
+export enum TOGGLE_SIZE {
+  /**
+   * Small size
+   */
+  SMALL = 'sm',
+  /**
+   * medium size
+   */
+  MEDIUM = 'md',
+  /**
+   * Large size
+   */
+  LARGE = 'lg',
+}
+
+export enum TOGGLE_VARIANT {
+  /**
+   * Default variant
+   */
+  DEFAULT = 'default',
+  /**
+   * Outline variant
+   */
+  OUTLINE = 'outline',
+}

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

@@ -0,0 +1,58 @@
+import { html } from 'lit-element';
+import { customElement, property } from 'lit/decorators.js';
+import { TOGGLE_SIZE, TOGGLE_VARIANT } from './defs';
+import { TWStyles } from '../../../styles';
+import { toggleStyle } from './toggle.style';
+import { BaseElement, cn } from '../../../helpers';
+import { spread } from '@open-wc/lit-helpers';
+
+export { TOGGLE_SIZE, TOGGLE_VARIANT };
+
+@customElement('rtg-toggle')
+class Toggle extends BaseElement {
+  @property({ attribute: true, type: Boolean, reflect: true }) disabled = false;
+  @property({ attribute: true, type: Boolean, reflect: true }) checked = false;
+  @property({ attribute: true, type: Boolean, reflect: true }) required = false;
+  @property({ attribute: true, type: String }) variant: TOGGLE_VARIANT =
+    TOGGLE_VARIANT.DEFAULT;
+  @property({ attribute: true, type: String }) size: TOGGLE_SIZE =
+    TOGGLE_SIZE.SMALL;
+
+  static styles = [TWStyles];
+  static toggleVariants = toggleStyle;
+  protected getAttributesToExclude(): string[] {
+    return ['disabled', 'checked', 'variant', 'size', 'required'];
+  }
+
+  toggle() {
+    if (!this.disabled) {
+      this.checked = !this.checked;
+    }
+  }
+  render() {
+    const attributes = this.getFilteredAttributes();
+    return html`
+      <button
+        type="button"
+        class="${cn(
+          Toggle.toggleVariants({
+            variant: this.variant,
+            size: this.size,
+            className: this.className,
+          })
+        )}"
+        aria-pressed=${this.checked}
+        data-state="${this.checked ? 'on' : 'off'}"
+        aria-label="Toggle bold"
+        @click=${this.toggle}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ${spread(attributes)}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+export { Toggle };

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

@@ -0,0 +1,204 @@
+import { html } from 'lit';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { expect, within, waitFor, userEvent } from '@storybook/test';
+import { Toggle, TOGGLE_SIZE, TOGGLE_VARIANT } from './toggle.atom';
+// import '../button';
+
+const meta: Meta = {
+  component: 'Toggle',
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(TOGGLE_VARIANT),
+      defaultValue: 'DEFAULT',
+      description: 'Choose the visual style of the toggle.',
+      table: {
+        defaultValue: { summary: 'DEFAULT' },
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(TOGGLE_SIZE),
+      description: 'Choose the size of the toggle.',
+      defaultValue: 'SMALL',
+      table: {
+        defaultValue: { summary: 'SMALL' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the toggle to prevent interactions.',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Set the initial checked state of the toggle.',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    required: {
+      control: 'boolean',
+      description: 'Mark the toggle as required.',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+};
+
+const testToggleBehavior = async (
+  args: any,
+  canvasElement: any,
+  mockHandler: any
+) => {
+  const canvas = within(canvasElement);
+  const toggle = await waitFor(() => canvas.getByTestId('toggle-id'));
+  if (toggle.shadowRoot) {
+    const innerToggle = toggle.shadowRoot.querySelector(
+      '[data-testchild="children-id"]'
+    );
+    expect(innerToggle).toHaveAttribute('type', 'button');
+    // Test toggle state
+    if (args.checked) {
+      expect(innerToggle).toBeChecked();
+    } else {
+      expect(innerToggle).not.toBeChecked();
+    }
+
+    // Test toggle click behavior
+    if (!args.disabled && innerToggle) {
+      await userEvent.click(innerToggle);
+      if (mockHandler) {
+        expect(mockHandler).toHaveBeenCalled();
+      }
+    }
+
+    // Test toggle disabled state
+    if (args.disabled) {
+      expect(innerToggle).toBeDisabled();
+    } else {
+      expect(innerToggle).not.toBeDisabled();
+    }
+
+    // Test toggle variant classes
+    const expectedClasses = Toggle.toggleVariants({
+      variant: args.variant,
+      size: args.size,
+      className: '',
+    });
+    expect(innerToggle).toHaveClass(expectedClasses);
+    // Test toggle size classes
+    const expectedSizeClasses = Toggle.toggleVariants({
+      variant: args.variant,
+      size: args.size,
+      className: '',
+    });
+    expect(innerToggle).toHaveClass(expectedSizeClasses);
+  }
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Toggles: Story = {
+  args: {
+    variant: 'DEFAULT',
+    size: 'SMALL',
+    disabled: false,
+    checked: false,
+    required: false,
+  },
+  render: ({ variant, size, disabled, checked, required }) => html`
+    <rtg-toggle
+      ?disabled=${disabled}
+      ?checked=${checked}
+      ?required=${required}
+      .variant=${variant}
+      .size=${size}
+      data-testid="toggle-id"
+      data-testchild="children-id"
+    >
+      <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-bold h-4 w-4"
+      >
+        <path d="M14 12a4 4 0 0 0 0-8H6v8"></path>
+        <path d="M15 20a4 4 0 0 0 0-8H6v8Z"></path>
+      </svg>
+    </rtg-toggle>
+  `,
+  play: async ({ args, canvasElement }) => {
+    await testToggleBehavior(args, canvasElement, null);
+  },
+};
+
+export const RequiredToggle: Story = {
+  name: 'Required Toggle',
+  args: {
+    variant: 'DEFAULT',
+    size: 'SMALL',
+    disabled: false,
+    checked: false,
+    required: true,
+  },
+  render: ({ variant, size, disabled, checked, required }) => html`
+    <div>
+      <rtg-toggle
+        ?disabled=${disabled}
+        ?checked=${checked}
+        ?required=${required}
+        .variant=${variant}
+        .size=${size}
+        data-testid="toggle-id"
+        data-testchild="children-id"
+        @click=${(e: Event) => {
+          const checkbox = e.target as HTMLInputElement;
+          const button = document.querySelector(
+            'rtg-button'
+          ) as HTMLButtonElement;
+          if (button) {
+            button.disabled = required ? !checkbox.checked : false;
+          }
+        }}
+      >
+        <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-italic h-4 w-4"
+        >
+          <line x1="19" x2="10" y1="4" y2="4"></line>
+          <line x1="14" x2="5" y1="20" y2="20"></line>
+          <line x1="15" x2="9" y1="4" y2="20"></line>
+        </svg>
+      </rtg-toggle>
+    </div>
+
+    <rtg-button ?disabled=${required && !checked}> send </rtg-button>
+  `,
+  play: async ({ args, canvasElement }) => {
+    await testToggleBehavior(args, canvasElement, null);
+  },
+};

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

@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority';
+
+export const toggleStyle = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground bg-transparent h-10 px-3',
+  {
+    variants: {
+      variant: {
+        default: ` hover:bg-muted hover:text-muted-foreground`,
+        outline: ` border border-input hover:bg-accent hover:text-accent-foreground`,
+      },
+      size: {
+        sm: 'h-9 px-2.5',
+        md: 'h-10 px-3',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'sm',
+    },
+  }
+);

package/src/components/molecules/command/command.molecules.ts

@@ -4,8 +4,8 @@ import {
   customElement,
   queryAssignedElements,
 } from 'lit/decorators.js';
-import { cn } from '@/helpers';
-import { TWStyles } from '@/styles';
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
 
 @customElement('rtg-command')
 export class Command extends LitElement {