revotech-ui-kit 0.0.6-beta → 0.0.7-beta

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

@@ -1,58 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

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

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

@@ -1,29 +0,0 @@
-/**
- * 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

@@ -1,58 +0,0 @@
-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

@@ -1,204 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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',
-    },
-  }
-);