revotech-ui-kit 0.0.2 → 0.0.4-beta

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

@@ -3,87 +3,449 @@ 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 {
-  title: 'Components/Input',
-  component: 'rtg-input',
+  component: 'components/input',
   tags: ['autodocs'],
-  argTypes: {
-    disabled: { control: 'boolean' },
-    type: { control: 'text' },
-    placeholder: { control: 'text' },
-    defaultValue: { control: 'text' },
-  },
 } as Meta;
 
-const InputTemplate: StoryFn = args =>
-  html`<rtg-input ...=${args}></rtg-input>`;
-const TemplateWithLabel: StoryFn = args => html`
-  <rtg-label for="picture">${args.label}</rtg-label>
-  <rtg-input
-    type=${args.type}
-    ?disabled=${args.disabled}
-    placeholder=${args.placeholder}
-  ></rtg-input>
-`;
-const TemplateWithButton: StoryFn = args => html`
-  <div style="display:flex">
-    <rtg-input
-      id=${args.id}
-      type=${args.type}
-      placeholder=${args.placeholder}
-      class="min-w-80"
-    ></rtg-input>
-    <rtg-button
-      style="margin-inline-start:4px"
-      size="default"
-      onclick="javascript:alert('Hello!')"
-      >${args.ButtonLabel}</rtg-button
-    >
-  </div>
-`;
-
-export const Default = InputTemplate.bind({});
-Default.args = {
+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: '',
 };
 
-export const Email = TemplateWithLabel.bind({});
-Email.args = {
-  label: 'Email address',
-  disabled: false,
-  type: 'email',
-  placeholder: 'Enter email',
-  defaultValue: '',
+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;
+      },
+    },
+  },
 };
 
-export const Password = TemplateWithLabel.bind({});
-Password.args = {
-  label: 'Password',
-  disabled: false,
-  type: 'password',
-  placeholder: 'Enter password',
-  defaultValue: '',
+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 File = TemplateWithLabel.bind({});
-File.args = {
+export const SpecificInput = TemplateSpecific.bind({});
+
+SpecificInput.args = {
   disabled: false,
   type: 'file',
-  label: 'Picture',
-  placeholder: '',
-  defaultValue: '',
+  label: '',
+  ButtonLabel: 'Subscribe',
+  disabledButton: false,
+  id: '',
 };
 
-export const InputWithButton = TemplateWithButton.bind({});
-InputWithButton.args = {
-  id: 'id',
-  ButtonLabel: 'Subscribe',
-  disabled: false,
-  type: 'email',
-  placeholder: 'Email',
-  defaultValue: '',
+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

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

@@ -6,7 +6,6 @@ export type InputType =
   | 'url'
   | 'email'
   | 'password'
-  | 'datetime'
   | 'date'
   | 'month'
   | 'week'
@@ -15,10 +14,45 @@ export type InputType =
   | 'number'
   | 'range'
   | 'color'
-  | 'checkbox'
-  | 'radio'
-  | 'file'
-  | 'submit'
-  | 'image'
-  | 'reset'
-  | 'button';
+  | '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,27 +1,50 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, PropertyValues } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
-import { cva } from 'class-variance-authority';
-import { cn } from '@/helpers';
-import { TWStyles } from '@/styles';
+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 LitElement {
+export class Label extends BaseElement {
   static labelVariants = labelStyle;
 
   @property({ type: String }) for = '';
 
-  static styles = [css``, TWStyles];
+  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 = document.getElementById(this.for);
+    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}"
@@ -32,6 +55,7 @@ export class Label extends LitElement {
             className: this.className,
           })
         )}"
+        ${spread(attributes)}
       >
         <slot></slot>
       </label>