revotech-ui-kit 0.0.6-beta → 0.0.7-beta

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

@@ -1,57 +0,0 @@
-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>
-    `;
-  }
-}

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>
-        `}`;
-  }
-}

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

@@ -1,60 +0,0 @@
-import { LitElement, html, css, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-command-group')
-export class CommandGroup extends LitElement {
-  @property({ type: String }) heading = '';
-
-  @property({ attribute: 'id', type: String }) _id = '';
-
-  @property({ attribute: 'aria-hidden', type: String }) _hidden = '';
-
-  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')}g${CommandGroup._counter++}`;
-    } else {
-      this._id = `rtgcmdrxlxg${CommandGroup._counter++}`;
-    }
-    return this._id;
-  }
-
-  render() {
-    const className =
-      'overflow-hidden p-1 text-foreground [&_[rtgcmd-group-heading]]:px-2 [&_[rtgcmd-group-heading]]:py-1.5 [&_[rtgcmd-group-heading]]:text-xs [&_[rtgcmd-group-heading]]:font-medium [&_[rtgcmd-group-heading]]:text-muted-foreground';
-    return html`${this._hidden === 'true'
-      ? nothing
-      : html`
-          <div
-            class="${className}"
-            rtgcmd-group
-            role="presentation"
-            id="${this.identifier}"
-          >
-            <div
-              rtgcmd-group-heading
-              aria-hidden="true"
-              id="${this.identifier}h"
-            >
-              ${this.heading}
-            </div>
-            <div
-              rtgcmd-group-items
-              role="group"
-              aria-labelledby="${this.identifier}h"
-            >
-              <slot></slot>
-            </div>
-          </div>
-        `}`;
-  }
-}

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

@@ -1,74 +0,0 @@
-import { LitElement, html, css, nothing } from 'lit';
-import {
-  property,
-  customElement,
-  queryAssignedElements,
-} from 'lit/decorators.js';
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-command-item')
-export class CommandItem extends LitElement {
-  @property({ type: String }) _id = '';
-
-  @property({ attribute: 'aria-hidden', type: String }) _hidden = '';
-
-  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-group]');
-    if (parent) {
-      this._id = `${parent.getAttribute('id')}li${CommandItem._counter++}`;
-    } else {
-      this._id = `rtgcmdrxgxli${CommandItem._counter++}`;
-    }
-    return this._id;
-  }
-
-  @property({ attribute: 'data-value', type: String })
-  public get value() {
-    return this.textContent?.trim() || '';
-  }
-
-  @property({ type: Boolean }) selected = false;
-
-  private handleMouseEvent(e: Event) {
-    if (e.type === 'mouseover' || e.type === 'focus') {
-      this.selected = true;
-    }
-    if (e.type === 'mouseleave') {
-      this.selected = false;
-    }
-  }
-
-  render() {
-    return html` ${this._hidden === 'true'
-      ? nothing
-      : html`
-          <div
-            class="${cn(
-              'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-              this.className
-            )}"
-            @mouseover="${this.handleMouseEvent}"
-            @mouseleave="${this.handleMouseEvent}"
-            @focus="${this.handleMouseEvent}"
-            rtgcmd-item
-            role="option"
-            aria-selected="${this.selected}"
-            data-selected="${this.selected}"
-            data-value="${this.value}"
-            id="${this.identifier}"
-            aria-hidden="${this.hidden}"
-          >
-            <slot></slot>
-          </div>
-        `}`;
-  }
-}

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

@@ -1,37 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-command-list')
-export class CommandList extends LitElement {
-  static styles = [css``, TWStyles];
-
-  private get identifier() {
-    const parent =
-      this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-root]');
-    if (parent) {
-      return `${parent.getAttribute('id')}l`;
-    }
-    return `rtgcmdrxl`;
-  }
-
-  render() {
-    return html`
-      <div
-        class="${cn(
-          'max-h-[300px] overflow-y-auto overflow-x-hidden',
-          this.className
-        )}"
-        role="listbox"
-        id="${this.identifier}"
-        style="--rtgcmd-list-height: 265.0px;"
-        rtgcmd-list
-      >
-        <div>
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}

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

@@ -1,42 +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-separator')
-export class CommandSeparator extends LitElement {
-  @property({ type: String }) _id = '';
-
-  @property({ attribute: 'aria-hidden', type: String }) _hidden = '';
-
-  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')}s${CommandSeparator._counter++}`;
-    } else {
-      this._id = `rtgcmdrxlxs${CommandSeparator._counter++}`;
-    }
-    return this._id;
-  }
-
-  render() {
-    return html`${this._hidden === 'true'
-      ? nothing
-      : html`
-          <div
-            class="${cn('-mx-1 h-px bg-border', this.className)}"
-            rtgcmd-separator
-            role="separator"
-            id="${this.identifier}"
-          ></div>
-        `}`;
-  }
-}

package/src/components/atoms/dialog/dialog-close.ts

@@ -1,50 +0,0 @@
-import { TWStyles } from '../../../styles';
-import { css, html, LitElement, PropertyValueMap } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { Dialog } from './dialog.atom';
-
-const STATE_OPEN = 'open';
-const STATE_CLOSED = 'closed';
-
-@customElement('rtg-dialog-close')
-export class DialogClose extends LitElement {
-  static styles = [css``, TWStyles];
-
-  private get _dialog(): Dialog | null {
-    let parent = this.parentElement;
-
-    while (parent) {
-      if (parent instanceof Dialog) {
-        return parent;
-      }
-      parent = parent.parentElement;
-    }
-    return parent;
-  }
-
-  protected firstUpdated(
-    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
-  ): void {
-    super.firstUpdated(_changedProperties);
-    const slot = this.shadowRoot?.querySelector('slot');
-    const children = slot?.assignedElements();
-    if (children && children.length > 0) {
-      const button = children[0];
-
-      button.addEventListener('click', () => {
-        const dialog = this._dialog;
-        if (dialog) {
-          dialog.dataset.state = STATE_CLOSED;
-        }
-      });
-    }
-  }
-
-  render() {
-    return html`
-      <div>
-        <slot></slot>
-      </div>
-    `;
-  }
-}