revotech-ui-kit 0.0.6-beta → 0.0.10

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

@@ -1,451 +0,0 @@
-import { html } from 'lit';
-import { Meta, StoryFn } from '@storybook/web-components';
-import './input.atom';
-import '../label/label.atom';
-import '../button/button.atom';
-import {
-  InputNormalType,
-  InputArgs,
-  InputSpecificType,
-  InputSpecificArgs,
-} from './input.type';
-import { expect, within, waitFor, fn, userEvent } from '@storybook/test';
-
-const validInputTypes: InputNormalType[] = [
-  'hidden',
-  'text',
-  'search',
-  'tel',
-  'url',
-  'email',
-  'password',
-];
-
-const validInputSpeceficTypes: InputSpecificType[] = [
-  'hidden',
-  'date',
-  'month',
-  'week',
-  'time',
-  'datetime-local',
-  'number',
-  'range',
-  'color',
-  'file',
-];
-
-export default {
-  component: 'components/input',
-  tags: ['autodocs'],
-} as Meta;
-
-const testInputBehavior = async (
-  args: InputArgs,
-  canvasElement: HTMLElement,
-  mockHandler: any
-) => {
-  const canvas = within(canvasElement);
-  const input = await waitFor(() => canvas.getByTestId('input-id'));
-
-  if (input.shadowRoot) {
-    const innerInput = input.shadowRoot.querySelector(
-      '[data-testchild="children-id"]'
-    );
-
-    if (args.type !== 'file') {
-      if (innerInput instanceof HTMLInputElement) {
-        innerInput.value = args.defaultValue;
-      }
-      expect(innerInput).toHaveAttribute('placeholder', args.placeholder);
-    }
-
-    // 1. Test: Input should have the correct `disabled` state based on args
-    if (args.disabled) {
-      expect(innerInput).toBeDisabled();
-    } else {
-      expect(innerInput).not.toBeDisabled();
-    }
-
-    // 2. Test: `type` should be a valid InputType
-    expect(validInputTypes).toContain(args.type);
-
-    // 3. Test: Input should have correct type attribute
-    expect(innerInput).toHaveAttribute('type', args.type);
-
-    // 4. Test: Label should have correct `for` attribute linking to the input
-    if (args.label) {
-      const label = await waitFor(() => canvas.getByTestId('label-id'));
-      expect(label).toBeInTheDocument();
-    }
-
-    // 5.  Button should handle click events when not disabled
-    if (args.ButtonLabel) {
-      const button = await waitFor(() => canvas.getByTestId('button-id'));
-      expect(button).toBeInTheDocument();
-      const innerButton = button.querySelector('[data-testid="children-id"]');
-      if (!args.disabledButton && innerButton) {
-        await userEvent.click(innerButton);
-        if (mockHandler) {
-          expect(mockHandler).toHaveBeenCalled();
-        }
-      }
-    }
-
-    // 6. Test: Button should not handle click events when disabled
-    if (args.disabledButton) {
-      expect(mockHandler).not.toHaveBeenCalled();
-    }
-  }
-};
-
-const testInputSpecificBehavior = async (
-  args: InputSpecificArgs,
-  canvasElement: HTMLElement,
-  mockHandler: any
-) => {
-  const canvas = within(canvasElement);
-  const input = await waitFor(() => canvas.getByTestId('input-id'));
-
-  if (input.shadowRoot) {
-    const innerInput = input.shadowRoot.querySelector(
-      '[data-testchild="children-id"]'
-    );
-
-    // 1. Test: Input should have the correct `disabled` state based on args
-    if (args.disabled) {
-      expect(innerInput).toBeDisabled();
-    } else {
-      expect(innerInput).not.toBeDisabled();
-    }
-
-    // 2. Test: `type` should be a valid InputType
-    expect(validInputSpeceficTypes).toContain(args.type);
-
-    // 3. Test: Input should have correct type attribute
-    expect(innerInput).toHaveAttribute('type', args.type);
-
-    // 4. Test: Label should have correct `for` attribute linking to the input
-    if (args.label) {
-      const label = await waitFor(() => canvas.getByTestId('label-id'));
-      expect(label).toBeInTheDocument();
-    }
-
-    // 5.  Button should handle click events when not disabled
-    if (args.ButtonLabel) {
-      const button = await waitFor(() => canvas.getByTestId('button-id'));
-      expect(button).toBeInTheDocument();
-      const innerButton = button.querySelector('[data-testid="children-id"]');
-      if (!args.disabledButton && innerButton) {
-        await userEvent.click(innerButton);
-        if (mockHandler) {
-          expect(mockHandler).toHaveBeenCalled();
-        }
-      }
-    }
-
-    // 6. Test: Button should not handle click events when disabled
-    if (args.disabledButton) {
-      expect(mockHandler).not.toHaveBeenCalled();
-    }
-  }
-};
-
-const mockOnClickHandler = fn(event => {
-  alert('Hello!');
-});
-
-const Template: StoryFn = ({
-  label,
-  ButtonLabel,
-  id,
-  type,
-  placeholder,
-  disabled,
-  disabledButton,
-  defaultValue,
-}) => {
-  const inputValue = type !== 'file' ? defaultValue : '';
-  if (ButtonLabel && !label) {
-    return html`
-      <div style="display:flex">
-        <rtg-input
-          data-testid="input-id"
-          data-testchild="children-id"
-          id=${id}
-          type=${type}
-          placeholder=${placeholder}
-          ?disabled=${disabled}
-          .value=${inputValue}
-          style="min-width:50%"
-        ></rtg-input>
-        <rtg-button
-          data-testid="button-id"
-          style="margin-inline-start:4px"
-          size="default"
-          ?disabled=${disabledButton}
-          .click=${mockOnClickHandler}
-          >${ButtonLabel}</rtg-button
-        >
-      </div>
-    `;
-  } else if (label && !ButtonLabel) {
-    return html`
-      <div>
-        <rtg-label data-testid="label-id" for="picture">${label}</rtg-label>
-        <rtg-input
-          data-testid="input-id"
-          data-testchild="children-id"
-          type=${type}
-          ?disabled=${disabled}
-          placeholder=${placeholder}
-          .value=${inputValue}
-          style="min-width:50%"
-        ></rtg-input>
-      </div>
-    `;
-  } else if (label && ButtonLabel) {
-    return html`
-      <div style="display: flex; flex-direction: column;">
-        <rtg-label data-testid="label-id" for="picture">${label}</rtg-label>
-        <div style="display:flex">
-          <rtg-input
-            data-testid="input-id"
-            data-testchild="children-id"
-            id=${id}
-            type=${type}
-            placeholder=${placeholder}
-            ?disabled=${disabled}
-            .value=${inputValue}
-            style="min-width:50%"
-          ></rtg-input>
-          <rtg-button
-            data-testid="button-id"
-            style="margin-inline-start:4px"
-            size="default"
-            ?disabled=${disabledButton}
-            .click=${mockOnClickHandler}
-            >${ButtonLabel}</rtg-button
-          >
-        </div>
-      </div>
-    `;
-  } else {
-    return html`
-      <rtg-input
-        data-testid="input-id"
-        data-testchild="children-id"
-        type=${type}
-        ?disabled=${disabled}
-        placeholder=${placeholder}
-        .value=${inputValue}
-        style="min-width:50%"
-      ></rtg-input>
-    `;
-  }
-};
-
-const TemplateSpecific: StoryFn = ({
-  label,
-  ButtonLabel,
-  id,
-  type,
-  value,
-  disabled,
-  disabledButton,
-}) => {
-  if (ButtonLabel && !label) {
-    return html`
-      <div style="display:flex">
-        <rtg-input
-          data-testid="input-id"
-          data-testchild="children-id"
-          id=${id}
-          type=${type}
-          ?disabled=${disabled}
-          .value=${value}
-          style="min-width:50%"
-        ></rtg-input>
-        <rtg-button
-          data-testid="button-id"
-          style="margin-inline-start:4px"
-          size="default"
-          ?disabled=${disabledButton}
-          .click=${mockOnClickHandler}
-          >${ButtonLabel}</rtg-button
-        >
-      </div>
-    `;
-  } else if (label && !ButtonLabel) {
-    return html`
-      <div>
-        <rtg-label data-testid="label-id" for="picture">${label}</rtg-label>
-        <rtg-input
-          data-testid="input-id"
-          data-testchild="children-id"
-          type=${type}
-          ?disabled=${disabled}
-          .value=${value}
-          style="min-width:50%"
-        ></rtg-input>
-      </div>
-    `;
-  } else if (label && ButtonLabel) {
-    return html`
-      <div style="display: flex; flex-direction: column;">
-        <rtg-label data-testid="label-id" for="picture">${label}</rtg-label>
-        <div style="display:flex">
-          <rtg-input
-            data-testid="input-id"
-            data-testchild="children-id"
-            id=${id}
-            type=${type}
-            ?disabled=${disabled}
-            .value=${value}
-            style="min-width:50%"
-          ></rtg-input>
-          <rtg-button
-            data-testid="button-id"
-            style="margin-inline-start:4px"
-            size="default"
-            ?disabled=${disabledButton}
-            .click=${mockOnClickHandler}
-            >${ButtonLabel}</rtg-button
-          >
-        </div>
-      </div>
-    `;
-  } else {
-    return html`
-      <rtg-input
-        data-testid="input-id"
-        data-testchild="children-id"
-        type=${type}
-        ?disabled=${disabled}
-        .value=${value}
-        style="min-width:50%"
-      ></rtg-input>
-    `;
-  }
-};
-
-export const Input = Template.bind({});
-
-Input.args = {
-  disabled: false,
-  type: 'text',
-  placeholder: 'Enter text',
-  defaultValue: '',
-  label: '',
-  ButtonLabel: 'Subscribe',
-  disabledButton: false,
-  id: '',
-};
-
-Input.parameters = {
-  docs: {
-    source: {
-      transform: (code: string) => {
-        // Handling boolean attributes: if true, render without value, if false, omit the attribute
-        const updatedCode = code
-          .replace(/disabled=""/g, 'disabled=true')
-          .replace(/disabled="false"/g, '');
-
-        return updatedCode;
-      },
-    },
-  },
-};
-
-Input.argTypes = {
-  disabled: {
-    control: 'boolean',
-    description: 'Determines whether the input is disabled (unclickable).',
-    table: {
-      defaultValue: { summary: 'false' },
-    },
-  },
-  disabledButton: {
-    control: 'boolean',
-    description:
-      'Indicates whether the button should be disabled, preventing user interaction.',
-    table: {
-      defaultValue: { summary: 'false' },
-    },
-  },
-  type: {
-    control: { type: 'select' },
-    description:
-      'Specifies the type of the input, such as text, email, password, etc.',
-    options: validInputTypes,
-  },
-  placeholder: {
-    control: 'text',
-    description:
-      'Provides a short hint that describes the expected value of the input.',
-    if: { arg: 'type', neq: 'file' },
-  },
-  defaultValue: {
-    control: 'text',
-    description: 'Sets the initial value of the input field.',
-    if: { arg: 'type', neq: 'file' },
-  },
-  label: {
-    control: 'text',
-    description: 'Defines the label text for the input field.',
-  },
-  ButtonLabel: {
-    control: 'text',
-    description: 'Defines the label text for the associated button.',
-  },
-  id: {
-    control: 'text',
-    description: 'Unique identifier for the input element.',
-  },
-};
-
-Input.play = async ({ args, canvasElement }) => {
-  try {
-    await testInputBehavior(
-      args as InputArgs,
-      canvasElement,
-      mockOnClickHandler
-    );
-  } catch (error) {
-    console.error('An error occurred during the play function:', error);
-  }
-};
-
-export const SpecificInput = TemplateSpecific.bind({});
-
-SpecificInput.args = {
-  disabled: false,
-  type: 'file',
-  label: '',
-  ButtonLabel: 'Subscribe',
-  disabledButton: false,
-  id: '',
-};
-
-SpecificInput.argTypes = {
-  disabled: { control: 'boolean' },
-  disabledButton: { control: 'boolean' },
-  type: {
-    control: { type: 'select' },
-    options: validInputSpeceficTypes,
-  },
-  label: { control: 'text' },
-  ButtonLabel: { control: 'text' },
-  id: { control: 'text' },
-};
-
-SpecificInput.play = async ({ args, canvasElement }) => {
-  try {
-    await testInputSpecificBehavior(
-      args as InputSpecificArgs,
-      canvasElement,
-      mockOnClickHandler
-    );
-  } catch (error) {
-    console.error('An error occurred during the play function:', error);
-  }
-};

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

@@ -1,2 +0,0 @@
-export const inputStyles =
-  'flex h-8 w-full rounded-sm border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 input-base';

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

@@ -1,58 +0,0 @@
-export type InputType =
-  | 'hidden'
-  | 'text'
-  | 'search'
-  | 'tel'
-  | 'url'
-  | 'email'
-  | 'password'
-  | 'date'
-  | 'month'
-  | 'week'
-  | 'time'
-  | 'datetime-local'
-  | 'number'
-  | 'range'
-  | 'color'
-  | 'file';
-
-export type InputNormalType =
-  | 'hidden'
-  | 'text'
-  | 'search'
-  | 'tel'
-  | 'url'
-  | 'email'
-  | 'password';
-
-export type InputSpecificType =
-  | 'hidden'
-  | 'date'
-  | 'month'
-  | 'week'
-  | 'time'
-  | 'datetime-local'
-  | 'number'
-  | 'range'
-  | 'color'
-  | 'file';
-
-export type InputArgs = {
-  disabled: boolean;
-  disabledButton: boolean;
-  type: InputType;
-  placeholder: string;
-  label: string;
-  defaultValue: string;
-  ButtonLabel: string;
-  id: string;
-};
-
-export type InputSpecificArgs = {
-  disabled: boolean;
-  disabledButton: boolean;
-  type: InputSpecificType;
-  label: string;
-  ButtonLabel: string;
-  id: string;
-};

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

@@ -1,64 +0,0 @@
-import { LitElement, html, css, PropertyValues } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { BaseElement, cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-import { labelStyle } from './label.style';
-import { spread } from '@open-wc/lit-helpers';
-
-@customElement('rtg-label')
-export class Label extends BaseElement {
-  static labelVariants = labelStyle;
-
-  @property({ type: String }) for = '';
-
-  static styles = [
-    css`
-      :root {
-        --label-text-color: inherit;
-        --label-padding: inherit;
-      }
-      .label-base {
-        color: var(--label-text-color) !important;
-        padding: var(--label-padding) !important;
-      }
-    `,
-    TWStyles,
-  ];
-
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    const variables = ['--label-text-color,--label-padding'];
-    this.applyCustomClass(variables, 'label', 'label-base');
-  }
-
-  private _onClick(e: Event) {
-    if (e.defaultPrevented) return;
-    const target = this.shadowRoot?.getElementById(this.for);
-    if (target) {
-      target.click();
-    }
-  }
-
-  protected getAttributesToExclude(): string[] {
-    return ['for', 'data-testid'];
-  }
-
-  render() {
-    const attributes = this.getFilteredAttributes();
-
-    return html`
-      <label
-        for="${this.for}"
-        @click="${this._onClick}"
-        @keydown="${this._onClick}"
-        class="${cn(
-          Label.labelVariants({
-            className: this.className,
-          })
-        )}"
-        ${spread(attributes)}
-      >
-        <slot></slot>
-      </label>
-    `;
-  }
-}

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

@@ -1,102 +0,0 @@
-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/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
-    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/label/label.style.ts

@@ -1,5 +0,0 @@
-import { cva } from 'class-variance-authority';
-
-export const labelStyle = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
-);