revotech-ui-kit 0.0.6-beta → 0.0.10

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

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

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

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

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

@@ -1,59 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { cn, BaseElement } from '../../../helpers';
-import { ButtonSize, ButtonType, ButtonVariant } from './button.type';
-import { buttonStyle } from './button.style';
-import { TWStyles } from '../../../styles';
-import { spread } from '@open-wc/lit-helpers';
-
-@customElement('rtg-button')
-export class Button extends BaseElement {
-  static buttonVariants = buttonStyle;
-
-  @property({ type: Function }) click = () => {};
-  @property({ type: Boolean }) disabled = false;
-  @property({ type: String }) type: ButtonType = 'button';
-  @property({ type: String }) variant: ButtonVariant = 'default';
-  @property({ type: String }) size: ButtonSize = 'default';
-
-  static styles = [css``, TWStyles];
-
-  private handleClick(e: MouseEvent) {
-    e.stopPropagation();
-    if (!this.disabled) {
-      this.click();
-    }
-  }
-
-  protected getAttributesToExclude(): string[] {
-    return ['click', 'disabled', 'type', 'variant', 'size', 'data-testid'];
-  }
-
-  render() {
-    const attributes = this.getFilteredAttributes();
-
-    return html`
-      <button
-        type="${this.type}"
-        ?disabled="${this.disabled}"
-        class="${cn(
-          Button.buttonVariants({
-            variant: this.variant,
-            size: this.size,
-            className: this.className,
-          })
-        )}"
-        @click="${this.handleClick}"
-        ${spread(attributes)}
-      >
-        <slot></slot>
-      </button>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'rtg-button': Button;
-  }
-}

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

@@ -1,224 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
-import './button.atom';
-import { expect, within, fn, waitFor, userEvent } from '@storybook/test';
-import { Button } from './button.atom';
-
-const meta: Meta = {
-  component: 'components/button',
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: [
-        'default',
-        'destructive',
-        'outline',
-        'secondary',
-        'ghost',
-        'link',
-      ],
-      defaultValue: 'default',
-      description: 'Choose the visual style of the button.',
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['default', 'sm', 'lg', 'icon'],
-      description: 'Choose the visual style of the button.',
-      defaultValue: 'default',
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disable the button to prevent interactions.',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    label: {
-      control: 'text',
-      description:
-        'The text displayed on the button. Can also be a function returning the label dynamically.',
-      type: 'string',
-      table: {
-        defaultValue: { summary: 'Button' },
-      },
-    },
-    icon: {
-      control: 'boolean',
-      description: 'Add an icon before the button text.',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    animation: {
-      control: 'boolean',
-      description: 'Enable/disable icon animations.',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-      if: { arg: 'icon', neq: false },
-    },
-    click: {
-      action: '',
-      description:
-        'Triggered when the button is clicked. Receives the button instance as an argument.',
-      table: {
-        type: { summary: '(() => void)' },
-        defaultValue: { summary: '-' },
-      },
-    },
-  },
-};
-
-const testButtonBehavior = async (
-  args: any,
-  canvasElement: any,
-  mockHandler: any
-) => {
-  const canvas = within(canvasElement);
-  const button = await waitFor(() => canvas.getByTestId('btn-id'));
-
-  if (button.shadowRoot) {
-    const innerButton = button.shadowRoot.querySelector(
-      '[data-testchild="children-id"]'
-    );
-
-    // 1. Test: Button should have correct type attribute
-    expect(innerButton).toHaveAttribute('type', 'button');
-
-    // 2. Test: Button should handle click events when not disabled
-    if (!args.disabled && innerButton) {
-      await userEvent.click(innerButton);
-      if (mockHandler) {
-        expect(mockHandler).toHaveBeenCalled();
-      }
-    }
-
-    // 3. Test: Button should not handle click events when disabled
-    if (args.disabled) {
-      expect(mockHandler).not.toHaveBeenCalled();
-    }
-
-    // 4. Test: Button should be disabled when the `disabled` prop is true
-    if (args.disabled) {
-      expect(innerButton).toBeDisabled();
-    } else {
-      expect(innerButton).not.toBeDisabled();
-    }
-
-    // 5. Test: Button should apply the correct variant classes
-    const expectedClasses = Button.buttonVariants({
-      variant: args.variant,
-      size: args.size,
-      className: '',
-    });
-    expect(innerButton).toHaveClass(expectedClasses);
-
-    // 6. Test: Button should apply the correct size classes
-    const expectedSizeClasses = Button.buttonVariants({
-      variant: args.variant,
-      size: args.size,
-      className: '',
-    });
-    expect(innerButton).toHaveClass(expectedSizeClasses);
-  }
-};
-
-export default meta;
-type Story = StoryObj;
-
-const mockOnClickHandler = fn(event => {
-  console.log('Mock onClick handler called');
-});
-
-export const Buttons: Story = {
-  args: {
-    label: 'Button',
-    variant: 'default',
-    size: 'default',
-    disabled: false,
-    icon: false,
-    animation: false,
-  },
-  render: ({ label, variant, size, disabled, icon, animation }) => {
-    console.log('disabled', disabled);
-    if (disabled == true)
-      return html`
-        <rtg-button
-          method="post"
-          .click=${mockOnClickHandler}
-          data-testid="btn-id"
-          data-testchild="children-id"
-          variant=${variant}
-          size=${size}
-          disabled=${true}
-        >
-          ${icon
-            ? html`<iconify-icon
-                class=${animation
-                  ? `${label ? 'mr-2 ' : ' '}animate-spin`
-                  : `${label ? 'mr-2 ' : ''}`}
-                icon="mdi:home"
-              ></iconify-icon>`
-            : ''}
-          ${label}</rtg-button
-        >
-      `;
-    else if (disabled == false)
-      return html`
-        <rtg-button
-          method="post"
-          .click=${mockOnClickHandler}
-          data-testid="btn-id"
-          data-testchild="children-id"
-          variant=${variant}
-          size=${size}
-          ?disabled=${false}
-        >
-          ${icon
-            ? html`<iconify-icon
-                class=${animation
-                  ? `${label ? 'mr-2 ' : ' '}animate-spin`
-                  : `${label ? 'mr-2 ' : ''}`}
-                icon="mdi:home"
-              ></iconify-icon>`
-            : ''}
-          ${label}</rtg-button
-        >
-      `;
-    else
-      return html`
-        <rtg-button
-          method="post"
-          .click=${mockOnClickHandler}
-          data-testid="btn-id"
-          data-testchild="children-id"
-          variant=${variant}
-          size=${size}
-        >
-          ${icon
-            ? html`<iconify-icon
-                class=${animation
-                  ? `${label ? 'mr-2 ' : ' '}animate-spin`
-                  : `${label ? 'mr-2 ' : ''}`}
-                icon="mdi:home"
-              ></iconify-icon>`
-            : ''}
-          ${label}</rtg-button
-        >
-      `;
-  },
-  play: async ({ args, canvasElement }) => {
-    await testButtonBehavior(args, canvasElement, mockOnClickHandler);
-  },
-};

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

@@ -1,31 +0,0 @@
-import { cva } from 'class-variance-authority';
-
-export const buttonStyle = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
-  {
-    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',
-      },
-      size: {
-        default: 'h-8 px-4 py-2',
-        sm: 'h-7 rounded-sm px-3 text-xs',
-        lg: 'h-9 rounded-sm px-8',
-        icon: 'h-8 w-8',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);

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

@@ -1,15 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-card-content')
-export class CardContent extends LitElement {
-  static styles = [css``, TWStyles];
-
-
-  render() {
-    return html` 
-    <slot></slot>
-     `;
-  }
-}

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

@@ -1,15 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-card-description')
-export class CardDescription extends LitElement {
-  static styles = [css``, TWStyles];
-
-
-  render() {
-    return html`
-    <slot></slot>
-    `;
-  }
-}

package/src/components/atoms/card/card-footer.ts

@@ -1,15 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-card-footer')
-export class CardFooter extends LitElement {
-  static styles = [css``, TWStyles];
-
-
-  render() {
-    return html`
-       <slot></slot> 
-    `;
-  }
-}

package/src/components/atoms/card/card-header.ts

@@ -1,15 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-card-header')
-export class CardHeader extends LitElement {
-  static styles = [css``, TWStyles];
-
-
-  render() {
-    return html`
-    <slot></slot>
-   `;
-  }
-}

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

@@ -1,15 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-card-title')
-export class CardTitle extends LitElement {
-  static styles = [css``, TWStyles];
-
-
-  render() {
-    return html`
-    <slot></slot>
-    `;
-  }
-}

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

@@ -1,76 +0,0 @@
-import { LitElement, html, css, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-import { checkboxStyles, iconStyles } from './checkbox.style';
-import { CheckboxProperties } from './checkbox.type';
-
-@customElement('rtg-checkbox')
-export class Checkbox extends LitElement implements CheckboxProperties {
-  @property({ type: Boolean }) disabled = false;
-
-  @property({ type: Boolean }) checked = false;
-
-  @property({ type: String }) type = 'text';
-
-  @property({ type: String }) value = '';
-
-  @property({ type: Boolean }) required = false;
-
-  static styles = [css``, TWStyles];
-
-  private _onClick(e: Event) {
-    if (e.defaultPrevented) return;
-    this.checked = !this.checked;
-    this.required = !this.required;
-
-    // Dispatch a custom change event when the state changes
-    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-  }
-
-  public click() {
-    this.checked = !this.checked;
-    this.required = !this.required;
-  }
-
-  render() {
-    const additionalProps = { ...this.dataset }; // Example of additional props
-    return html`
-      <button
-        data-testid="checkbox-atom"
-        type="button"
-        role="checkbox"
-        aria-checked="${this.checked || this.value === 'on'}"
-        data-state="${this.checked || this.value === 'on'
-          ? 'checked'
-          : 'unchecked'}"
-        value="${this.value}"
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        @click="${this._onClick}"
-        class="${cn(checkboxStyles, this.className)}"
-        ${Object.entries(additionalProps).map(
-          ([key, value]) => html` ${key}="${value}" `
-        )}
-      >
-        ${this.checked || this.value === 'on'
-          ? html`<span data-state="checked" class="${iconStyles}"
-              ><svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="3"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-4 w-4"
-              >
-                <polyline points="20 6 9 17 4 12"></polyline></svg
-            ></span>`
-          : nothing}
-      </button>
-    `;
-  }
-}