revotech-ui-kit 0.0.2 → 0.0.3-beta

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

@@ -1,46 +1,60 @@
 import { LitElement, html, css, nothing } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
-import { cn } from '@/helpers';
-import { TWStyles } from '@/styles';
+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 {
+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}"
-        data-state="${this.checked ? 'checked' : 'unchecked'}"
-        value="on"
+        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(
-          'peer h-4 w-4 align-middle shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-          this.className
-        )}"
+        class="${cn(checkboxStyles, this.className)}"
+        ${Object.entries(additionalProps).map(
+          ([key, value]) => html` ${key}="${value}" `
+        )}
       >
-        ${this.checked
-          ? html`<span
-              data-state="checked"
-              class="flex items-center justify-center text-current"
-              style="pointer-events: none;"
+        ${this.checked || this.value === 'on'
+          ? html`<span data-state="checked" class="${iconStyles}"
               ><svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"

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

@@ -1,42 +1,309 @@
-import type { Meta, StoryFn } from '@storybook/web-components';
+import type { Meta, StoryFn, StoryContext } from '@storybook/web-components';
 import { html } from 'lit';
 import './checkbox.atom';
+import { expect, within, userEvent, waitFor, fn } from '@storybook/test';
+import {
+  CheckboxArgs,
+  CheckboxWithRequiredArgs,
+  CheckboxWithValueArgs,
+} from './checkbox.type';
+import '../button/button.atom';
+
+const allowedTypes = ['checkbox'];
 
 export default {
-  title: 'Components/Checkbox',
-  component: 'rtg-checkbox',
+  component: 'components/checkbox',
   tags: ['autodocs'],
-  argTypes: {
-    disabled: { control: 'boolean' },
-    checked: { control: 'boolean' },
-  },
 } as Meta;
 
-const Template: StoryFn = (args: any) =>
-  html` <rtg-checkbox
-      id="terms"
-      ?disabled=${args.disabled}
-      ?checked=${args.checked}
-    ></rtg-checkbox>
-    <rtg-label for="terms">${args.label}</rtg-label>`;
+const mockOnClickHandler = fn(event => {
+  alert('submit data!');
+});
+
+const testCheckboxBehavior = async (
+  args: CheckboxArgs,
+  canvasElement: HTMLElement
+) => {
+  const canvas = within(canvasElement);
+  const checkbox = await waitFor(() => canvas.getByTestId('checkbox-id'));
+
+  if (checkbox.shadowRoot) {
+    const innerCheckbox = checkbox.shadowRoot.querySelector(
+      '[data-testid="checkbox-atom"]'
+    );
+
+    // 1. Test: Checkbox should have correct Role attribute
+    expect(innerCheckbox).toHaveRole('checkbox');
+
+    // 2. Test: Checkbox should have the correct `checked` state based on args
+    if (args.checked) {
+      expect(innerCheckbox).toBeChecked();
+    } else {
+      expect(innerCheckbox).not.toBeChecked();
+    }
+
+    // 3. Test: Checkbox should be disabled when the `disabled` prop is true
+    if (args.disabled) {
+      expect(innerCheckbox).toBeDisabled();
+    } else {
+      expect(innerCheckbox).not.toBeDisabled();
+    }
+
+    // 4. Test: Label should have correct `for` attribute linking to the checkbox
+    const label = await waitFor(() => canvas.getByText(args.label));
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveAttribute('for', checkbox.getAttribute('id'));
+  }
+};
+
+const testCheckboxWithRequiredBehavior = async (
+  args: CheckboxWithRequiredArgs,
+  canvasElement: HTMLElement
+) => {
+  const canvas = within(canvasElement);
+  const checkbox = await waitFor(() => canvas.getByTestId('checkbox-id'));
+  const button = await waitFor(() => canvas.getByTestId('btn-id'));
+
+  if (checkbox.shadowRoot) {
+    const innerCheckbox = checkbox.shadowRoot.querySelector(
+      '[data-testid="checkbox-atom"]'
+    );
+
+    // Test: Checkbox should have the correct required attribute
+    if (args.required) {
+      expect(innerCheckbox).toHaveAttribute('required');
+    } else {
+      expect(innerCheckbox).not.toHaveAttribute('required');
+    }
+
+    // Test: Button should be disabled when checkbox is unchecked and required is true
+    if (args.required && !args.checked) {
+      expect(button).toBeDisabled();
+    } else if (args.required && args.checked) {
+      expect(button).not.toBeDisabled();
+    }
+
+    // Additional tests for the checked state
+    if (args.checked) {
+      expect(innerCheckbox).toBeChecked();
+    } else {
+      expect(innerCheckbox).not.toBeChecked();
+    }
 
-export const Default = Template.bind({});
-Default.args = {
+    // Additional tests for the disabled state
+    if (args.disabled) {
+      expect(innerCheckbox).toBeDisabled();
+    } else {
+      expect(innerCheckbox).not.toBeDisabled();
+    }
+  }
+};
+
+const testCheckboxWithValueBehavior = async (
+  args: CheckboxWithValueArgs,
+  canvasElement: HTMLElement
+) => {
+  const canvas = within(canvasElement);
+  const checkbox = await waitFor(() => canvas.getByTestId('checkbox-id'));
+
+  if (checkbox.shadowRoot) {
+    const innerCheckbox = checkbox.shadowRoot.querySelector(
+      '[data-testid="checkbox-atom"]'
+    );
+
+    // Test: Checkbox should have the correct value attribute
+    expect(innerCheckbox).toHaveAttribute('value', args.value);
+
+    // Additional tests for disabled state if needed
+    if (args.disabled) {
+      expect(innerCheckbox).toBeDisabled();
+    } else {
+      expect(innerCheckbox).not.toBeDisabled();
+    }
+  }
+};
+
+const TemplatewithChecked: StoryFn = ({ disabled, checked, label }) =>
+  html`
+    <div style="display:flex">
+      <rtg-checkbox
+        id="terms"
+        data-testid="checkbox-id"
+        ?disabled=${disabled}
+        ?checked=${checked}
+      ></rtg-checkbox>
+      <rtg-label style="margin:2px 0px 0px 4px" for="terms">${label}</rtg-label>
+    </div>
+  `;
+
+const TemplatewithRequired: StoryFn = ({
+  disabled,
+  checked,
+  label,
+  required,
+}) =>
+  html`
+    <div style="display: flex; flex-direction: column;">
+      <div style="display:flex">
+        <rtg-checkbox
+          id="terms"
+          data-testid="checkbox-id"
+          ?disabled=${disabled}
+          ?checked=${checked}
+          ?required=${required}
+          @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;
+            }
+          }}
+        ></rtg-checkbox>
+        <rtg-label style="margin:2px 0px 0px 4px" for="terms"
+          >${label}</rtg-label
+        >
+      </div>
+      <div style="margin-top:16px">
+        <rtg-button
+          variant="default"
+          size="default"
+          data-testid="btn-id"
+          ?disabled=${required ? !checked : false}
+          .click=${mockOnClickHandler}
+          >Submit</rtg-button
+        >
+      </div>
+    </div>
+  `;
+
+const TemplateWithVlaue: StoryFn = ({ disabled, label, value }) =>
+  html`
+    <div style="display:flex">
+      <rtg-checkbox
+        id="terms"
+        data-testid="checkbox-id"
+        value=${value}
+        ?disabled=${disabled}
+      ></rtg-checkbox>
+      <rtg-label style="margin:2px 0px 0px 4px" for="terms">${label}</rtg-label>
+    </div>
+  `;
+
+export const CheckboxWithReuired = TemplatewithRequired.bind({});
+CheckboxWithReuired.args = {
   disabled: false,
   checked: false,
+  required: false,
   label: 'Accept terms and conditions',
 };
 
-export const Checked = Template.bind({});
-Checked.args = {
-  disabled: false,
-  checked: true,
-  label: 'Checked',
+CheckboxWithReuired.parameters = {
+  docs: {
+    source: {
+      transform: (code: string, storyContext: StoryContext) => {
+        const args = storyContext.args;
+
+        // Handling boolean attributes: if true, render without value, if false, omit the attribute
+        const updatedCode = code
+          .replace(/disabled=""/g, 'disabled=true')
+          .replace(/checked=""/g, 'checked=true')
+          .replace(/required=""/g, 'required=true')
+          .replace(/disabled="false"/g, '')
+          .replace(/checked="false"/g, '')
+          .replace(/required="false"/g, '');
+
+        return updatedCode;
+      },
+    },
+  },
+};
+
+CheckboxWithReuired.argTypes = {
+  disabled: {
+    control: 'boolean',
+    description: 'Determines whether the checkbox is disabled (unclickable).',
+    table: {
+      defaultValue: { summary: 'false' },
+    },
+    docs: {
+      source: {
+        code: (args: { disabled: boolean }) => (args.disabled ? true : ''),
+      },
+    },
+  },
+  checked: {
+    control: 'boolean',
+    description: 'Specifies whether the checkbox is checked by default.',
+    table: {
+      defaultValue: { summary: 'false' },
+    },
+  },
+  required: {
+    control: 'boolean',
+    description:
+      'Marks the checkbox as a required field. When true, the checkbox must be checked for form submission, and related actions such as enabling a submit button are dependent on this state.',
+    table: {
+      defaultValue: { summary: 'false' },
+    },
+  },
+  label: {
+    control: 'text',
+    description:
+      'The text displayed next to the checkbox, describing its purpose.',
+  },
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
+CheckboxWithReuired.play = async ({ args, canvasElement }) => {
+  await testCheckboxWithRequiredBehavior(
+    args as CheckboxWithRequiredArgs,
+    canvasElement
+  );
+};
+
+export const Checkbox = TemplatewithChecked.bind({});
+Checkbox.args = {
+  disabled: false,
   checked: false,
-  label: 'Disabled',
+  label: 'Accept terms and conditions',
+};
+
+Checkbox.argTypes = {
+  disabled: {
+    control: 'boolean',
+  },
+  checked: {
+    control: 'boolean',
+  },
+  label: {
+    control: 'text',
+  },
+};
+
+Checkbox.play = async ({ args, canvasElement }) => {
+  await testCheckboxBehavior(args as CheckboxArgs, canvasElement);
+};
+
+export const CheckboxWithValue = TemplateWithVlaue.bind({});
+CheckboxWithValue.args = {
+  disabled: false,
+  value: 'off',
+  label: 'Accept terms and conditions',
+};
+
+CheckboxWithValue.argTypes = {
+  disabled: { control: 'boolean' },
+  value: {
+    control: { type: 'select' },
+    options: ['on', 'off'],
+  },
+  label: { control: 'text' },
+};
+
+CheckboxWithValue.play = async ({ args, canvasElement }) => {
+  await testCheckboxWithValueBehavior(
+    args as CheckboxWithValueArgs,
+    canvasElement
+  );
 };

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

@@ -0,0 +1,5 @@
+export const checkboxStyles =
+  'peer h-4 w-4 align-middle shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground';
+
+export const iconStyles =
+  'flex items-center justify-center text-current pointer-events-none';

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

@@ -0,0 +1,24 @@
+export type CheckboxProperties = {
+  disabled: boolean;
+  checked: boolean;
+};
+
+export type CheckboxArgs = {
+  disabled: boolean;
+  checked: boolean;
+  label: string;
+};
+
+export type CheckboxWithRequiredArgs = {
+  disabled: boolean;
+  checked: boolean;
+  required: boolean;
+  label: string;
+  value?: string;
+};
+
+export type CheckboxWithValueArgs = {
+  disabled: boolean;
+  value: string;
+  label: string;
+};

package/src/components/atoms/combo-box/combo-box-input.ts

@@ -0,0 +1,33 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TWStyles } from '../../../styles';
+
+@customElement('combo-box-input')
+export class ComboBoxInput extends LitElement {
+  @property({ type: String }) value = '';
+  @property({ type: Function }) handleClick = () => {};
+  @property({ type: Function }) handleKeyDown = () => {};
+
+  static styles = [css``, TWStyles];
+
+  render() {
+    return html`
+      <input
+        class="inline-flex justify-between items-center w-full h-10 px-4 py-2 whitespace-nowrap rounded-md 
+        text-sm font-medium border border-input cursor-pointer 
+        ring-offset-background 
+        transition-colors disabled:pointer-events-none 
+        disabled:opacity-50 
+        bg-background hover:bg-accent 
+        hover:text-accent-foreground 
+        outline-none"
+        role="combobox"
+        aria-expanded="false"
+        readonly="true"
+        .value=${this.value}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      />
+    `;
+  }
+}

package/src/components/atoms/combo-box/combo-box-item.ts

@@ -0,0 +1,59 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { tickIcon } from '../../../assets/icons';
+import { TWStyles } from '../../../styles';
+
+@customElement('combo-box-item')
+export class ComboBoxItem extends LitElement {
+  @property({ type: String }) key = '';
+  @property({ type: String }) searchText = '';
+  @property({ type: String }) value = '';
+  @property({ type: Number }) tabindex = 0;
+  @property({ type: Boolean }) isSelected = false;
+  @property({ type: String }) class = '';
+  @property({ type: Function }) onSelect = () => {};
+
+  static styles = [css``, TWStyles];
+
+  render() {
+    console.log('this', this.class);
+    return html`
+      <div
+        key="${this.key}"
+        class="flex items-center cursor-pointer py-2 px-4 w-full text-sm text-gray-800 
+        rounded-lg 
+        hover:bg-gray-100
+        focus:outline-none 
+        focus:bg-gray-100 
+        dark:bg-neutral-900 
+        dark:hover:bg-neutral-800 
+        dark:text-neutral-200 
+        dark:focus:bg-neutral-800
+        ${this.class}
+        "
+        tabindex="${this.tabindex}"
+        aria-selected="${this.isSelected}"
+        data-selected="${this.isSelected}"
+        data-hs-combo-box-output-item=""
+        role="option"
+        @click="${this.onSelect}"
+      >
+        <span
+          class="${this.isSelected
+            ? 'visible'
+            : 'invisible'} hs-combo-box-selected:block mr-2"
+        >
+          ${tickIcon()}
+        </span>
+        <div class="flex justify-between items-center w-full">
+          <span
+            data-hs-combo-box-search-text="${this.searchText}"
+            data-hs-combo-box-value="${this.value}"
+          >
+            ${this.searchText}
+          </span>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/atoms/combo-box/combo-box-list.ts

@@ -0,0 +1,57 @@
+import { LitElement, PropertyValues, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { searchIcon } from '../../../assets/icons';
+import { TWStyles } from '../../../styles';
+import { STATE_CLOSED, STATE_OPEN } from '../popover/popover.types';
+import { ComboBox } from './combo-box.atom';
+
+@customElement('combo-box-list')
+export class ComboBoxList extends LitElement {
+  static styles = [css``, TWStyles];
+  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
+
+  @state() isOpen = false;
+  get _popover(): ComboBox | null {
+    let parent = this.parentElement;
+    // Traverse up the DOM tree to find the parent `Popover`
+    while (parent && !(parent instanceof ComboBox)) {
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+
+  render() {
+    console.log('this.state', this.state);
+    // @keydown="${this.handleKeyDown}"
+
+    //   @input="${this.handleSearch}"
+    //   @keydown="${this.handleKeyDown}"
+    return html`
+      <div
+        class="absolute z-50 w-full max-h-72 p-1 bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700"
+        data-hs-combo-box-output=""
+        style="display: ${this.state === STATE_OPEN
+          ? 'block'
+          : 'none'}; top:115%"
+      >
+        <div
+          class="flex items-center justify-center px-3 border-b border-gray-300 mb-1"
+        >
+          ${searchIcon()}
+          <input
+            type="text"
+            class="w-full px-2 py-2 rounded focus:outline-none"
+            placeholder="Search..."
+            autocomplete="off"
+            autocorrect="off"
+            spellcheck="false"
+            aria-autocomplete="list"
+            aria-expanded="true"
+            role="combobox"
+          />
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}