revotech-ui-kit 0.0.6-beta → 0.0.10

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

@@ -1,309 +0,0 @@
-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 {
-  component: 'components/checkbox',
-  tags: ['autodocs'],
-} as Meta;
-
-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();
-    }
-
-    // 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',
-};
-
-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.',
-  },
-};
-
-CheckboxWithReuired.play = async ({ args, canvasElement }) => {
-  await testCheckboxWithRequiredBehavior(
-    args as CheckboxWithRequiredArgs,
-    canvasElement
-  );
-};
-
-export const Checkbox = TemplatewithChecked.bind({});
-Checkbox.args = {
-  disabled: false,
-  checked: false,
-  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

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

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

@@ -1,33 +0,0 @@
-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.atom.ts

@@ -1,187 +0,0 @@
-import { css, html, LitElement, PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-import { arrowsIcon, searchIcon } from '../../../assets/icons';
-import './combo-box-input';
-import './combo-box-item';
-
-@customElement('rtg-combo-box')
-class ComboBox extends LitElement {
-  static styles = [css``, TWStyles];
-
-  @state() isOpen = false;
-  @state() selectedValue = '';
-  @state() searchTerm = '';
-  @state() focusedIndex = -1;
-  @state() filteredItems: string[] = [];
-  @property({ type: String }) label: string = 'Select an item';
-  @property({ type: Array }) items = [];
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    if (this.items && this.items.length > 0)
-      this.filteredItems = this.items.filter((item: string) =>
-        item.toLowerCase().includes(this.searchTerm)
-      );
-  }
-  toggleDropdown() {
-    this.isOpen = !this.isOpen;
-    this.focusedIndex = -1;
-  }
-
-  selectItem(event: Event) {
-    const target = event.target as EventTarget;
-    if (target instanceof HTMLElement) {
-      const closestItem = target.closest(
-        'combo-box-item'
-      ) as HTMLElement | null;
-      if (closestItem) {
-        this.selectedValue =
-          closestItem.getAttribute('data-hs-combo-box-value') || '';
-        this.isOpen = false;
-      } else {
-        console.log('No valid combo-box-item found');
-      }
-    } else {
-      console.log('Event target is not an HTMLElement');
-    }
-  }
-
-  handleInputClick() {
-    this.toggleDropdown();
-  }
-
-  handleSearch(event: Event) {
-    const input = event.target as HTMLInputElement;
-    this.searchTerm = input.value;
-    this.filteredItems = this.items.filter((item: string) =>
-      item.toLowerCase().includes(this.searchTerm)
-    );
-  }
-
-  handleKeyDown(event: KeyboardEvent) {
-    const filteredLength = this.filteredItems.length;
-
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        this.focusedIndex = (this.focusedIndex + 1) % filteredLength;
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        this.focusedIndex =
-          (this.focusedIndex - 1 + filteredLength) % filteredLength;
-        break;
-      case 'Enter':
-        if (this.focusedIndex >= 0 && this.focusedIndex < filteredLength) {
-          this.selectedValue = this.filteredItems[this.focusedIndex];
-          this.isOpen = false;
-        }
-        break;
-      default:
-        break;
-    }
-  }
-
-  handleMouseOver(event: Event, index: number) {
-    event.preventDefault();
-    this.focusedIndex = index;
-  }
-
-  updateFocus() {
-    if (!this.shadowRoot) return;
-
-    const items =
-      this.shadowRoot.querySelectorAll<HTMLElement>('combo-box-item');
-    items.forEach((item, index) => {
-      if (index === this.focusedIndex) {
-        item.classList.add('bg-gray-100');
-      } else {
-        item.classList.remove('bg-gray-100');
-      }
-    });
-  }
-
-  render() {
-    return html`
-      <div class="relative" data-hs-combo-box="">
-        <div class="relative">
-          <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=${this.isOpen}
-            readonly
-            .value=${this.selectedValue || this.label}
-            @click="${this.handleInputClick}"
-            @keydown="${this.handleKeyDown}"
-          />
-          <div
-            class="absolute top-1/2 end-3 -translate-y-1/2 cursor-pointer"
-            aria-expanded=${this.isOpen}
-            data-hs-combo-box-toggle=""
-            @click="${this.toggleDropdown}"
-          >
-            ${arrowsIcon()}
-          </div>
-        </div>
-        <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"
-          style="display: ${this.isOpen ? 'block' : 'none'}; top:115%"
-          data-hs-combo-box-output=""
-          @keydown="${this.handleKeyDown}"
-        >
-          <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"
-              role="combobox"
-              @input="${this.handleSearch}"
-              @keydown="${this.handleKeyDown}"
-            />
-          </div>
-          ${this.filteredItems.length === 0
-            ? html`
-                <div
-                  class="py-6 text-center text-sm"
-                  cmdk-empty=""
-                  role="presentation"
-                >
-                  No item found.
-                </div>
-              `
-            : html`
-                ${this.filteredItems.map((item, index) => {
-                  return html`
-                    <combo-box-item
-                      .searchText=${item}
-                      .value=${item}
-                      data-hs-combo-box-value=${item}
-                      tabIndex=${index}
-                      @click="${(event: Event) => this.selectItem(event)}"
-                      @mouseover="${(event: Event) =>
-                        this.handleMouseOver(event, index)}"
-                      ?isSelected=${item === this.selectedValue}
-                    ></combo-box-item>
-                  `;
-                })}
-              `}
-        </div>
-      </div>
-    `;
-  }
-}
-
-export { ComboBox };

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

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
-import { expect, within, userEvent, waitFor, fn } from '@storybook/test';
-import './combo-box.atom';
-import './combo-box-list';
-import './combo-box-item';
-
-const frameworks = [
-  {
-    value: 'next.js',
-    label: 'Next.js',
-  },
-  {
-    value: 'sveltekit',
-    label: 'SvelteKit',
-  },
-  {
-    value: 'nuxt.js',
-    label: 'Nuxt.js',
-  },
-  {
-    value: 'remix',
-    label: 'Remix',
-  },
-  {
-    value: 'astro',
-    label: 'Astro',
-  },
-];
-
-const meta: Meta = {
-  component: 'components/combo-box',
-  tags: ['autodocs'],
-  argTypes: {
-    items: {
-      control: 'select',
-      description:
-        'An array of items to display in the dropdown menu. Each item should be a string representing the option text.',
-      table: {
-        defaultValue: { summary: '["Option 1", "Option 2", "Option 3"]' },
-      },
-    },
-    label: {
-      control: 'text',
-      description:
-        'The text displayed on the dropdown. This text is shown to users when the dropdown is closed.',
-      type: 'string',
-      table: {
-        defaultValue: { summary: 'Select an item' },
-      },
-    },
-  },
-};
-export default meta;
-type Story = StoryObj;
-// Base story
-export const basicComboBox: Story = {
-  name: 'Basic Usage',
-  args: {
-    items: ['Argentina', 'Brazil', 'China', 'USA', 'Italy', 'Iran', 'UAE'],
-    label: 'Select an item',
-  },
-  render: ({ label, items }) => {
-    return html`
-      <rtg-combo-box label="${label}" .items=${items}>
-        <combo-box-list>
-          ${frameworks.map(
-            (item, index) => html`
-              <combo-box-item
-                .searchText="${item.label}"
-                .value="${item.value}"
-                data-hs-combo-box-value="${item.value}"
-                tabIndex="${index}"
-              ></combo-box-item>
-            `
-          )}
-        </combo-box-list>
-      </rtg-combo-box>
-    `;
-  },
-};
-
-// Story for empty items array
-export const emptyComboBox: Story = {
-  name: 'Empty Items',
-  args: {
-    items: [],
-    label: 'Select an item',
-  },
-  render: ({ label, items }) => {
-    return html`
-      <rtg-combo-box label=${label}" .items=${items}> </rtg-combo-box>
-    `;
-  },
-};

package/src/components/atoms/command-empty/command-empty.atom.ts

@@ -1,44 +0,0 @@
-import { LitElement, html, css, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-command-empty')
-export class CommandEmpty extends LitElement {
-  @property({ type: String }) _id = '';
-
-  @property({ attribute: 'aria-hidden', type: String }) _hidden = 'true';
-
-  private static _counter = 0;
-
-  static styles = [css``, TWStyles];
-
-  private get identifier() {
-    if (this._id !== '') {
-      return this._id;
-    }
-    const parent =
-      this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-list]');
-    if (parent) {
-      this._id = `${parent.getAttribute('id')}e${CommandEmpty._counter++}`;
-    } else {
-      this._id = `rtgcmdrxlxe${CommandEmpty._counter++}`;
-    }
-    return this._id;
-  }
-
-  render() {
-    return html`${this._hidden === 'true'
-      ? nothing
-      : html`
-          <div
-            class="${cn('py-6 text-center text-sm', this.className)}"
-            rtgcmd-empty
-            role="presentation"
-            id="${this.identifier}"
-          >
-            <slot></slot>
-          </div>
-        `}`;
-  }
-}