revotech-ui-kit 0.0.2 → 0.0.3-beta

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

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

@@ -0,0 +1,95 @@
+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,7 +1,7 @@
 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';
 
 @customElement('rtg-command-empty')
 export class CommandEmpty extends LitElement {

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

@@ -1,6 +1,6 @@
 import { LitElement, html, css, nothing } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
-import { TWStyles } from '@/styles';
+import { TWStyles } from '../../../styles';
 
 @customElement('rtg-command-group')
 export class CommandGroup extends LitElement {

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

@@ -4,8 +4,8 @@ import {
   customElement,
   queryAssignedElements,
 } from 'lit/decorators.js';
-import { cn } from '@/helpers';
-import { TWStyles } from '@/styles';
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
 
 @customElement('rtg-command-item')
 export class CommandItem extends LitElement {

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

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { cn } from '@/helpers';
-import { TWStyles } from '@/styles';
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
 
 @customElement('rtg-command-list')
 export class CommandList extends LitElement {

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

@@ -1,7 +1,7 @@
 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';
 
 @customElement('rtg-command-separator')
 export class CommandSeparator extends LitElement {

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

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

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

@@ -0,0 +1,71 @@
+import { TWStyles } from '../../../styles';
+import { cn } from '../../../helpers';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Dialog } from './dialog.atom';
+
+const STATE_OPEN = 'open';
+const STATE_CLOSED = 'closed';
+
+@customElement('rtg-dialog-content')
+export class DialogContent extends LitElement {
+  static styles = [css``, TWStyles];
+
+  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
+
+  private get _dialog(): Dialog | null {
+    let parent = this.parentElement;
+
+    while (parent) {
+      if (parent instanceof Dialog) {
+        return parent;
+      }
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+
+  private handleCloseButtonClick = () => {
+    const dialog = this._dialog;
+    if (dialog) {
+      dialog.dataset.state = STATE_CLOSED;
+    }
+  };
+
+  render() {
+    return html`${this.state === STATE_OPEN
+      ? html`
+          <div
+            class="${cn(
+              'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+              this.className
+            )}"
+            rtgdlg-content
+          >
+            <slot></slot>
+            <button
+              type="button"
+              @click="${this.handleCloseButtonClick}"
+              class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-4 w-4"
+              >
+                <path d="M18 6 6 18"></path>
+                <path d="m6 6 12 12"></path></svg
+              ><span class="sr-only">Close</span>
+            </button>
+          </div>
+        `
+      : nothing}`;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('rtg-dialog-footer')
+export class DialogFooter extends LitElement {
+  static styles = [css``, TWStyles];
+
+  render() {
+    return html`
+      <div
+        class="${cn(
+          'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+          this.className
+        )}"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,36 @@
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('rtg-dialog-header')
+export class DialogHeader extends LitElement {
+  static styles = [css``, TWStyles];
+
+  @property({ attribute: 'title', type: String }) _title = '';
+
+  @property({ type: String }) description = '';
+
+  render() {
+    return html`
+      <div
+        class="${cn(
+          'flex flex-col space-y-1.5 text-center sm:text-left',
+          this.className
+        )}"
+      >
+        <h2
+          class="${cn(
+            'text-lg font-semibold leading-none tracking-tight',
+            this.className
+          )}"
+        >
+          ${this._title}
+        </h2>
+        <p class="${cn('text-sm text-muted-foreground', this.className)}">
+          ${this.description}
+        </p>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,20 @@
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('rtg-dialog-overlay')
+export class DialogOverlay extends LitElement {
+  static styles = [css``, TWStyles];
+
+  render() {
+    return html`
+      <div
+        class="${cn(
+          'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+          this.className
+        )}"
+      ></div>
+    `;
+  }
+}

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

@@ -0,0 +1,54 @@
+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-trigger')
+export class DialogTrigger 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;
+  }
+
+  handleClick = () => {
+    const dialog = this._dialog;
+    if (dialog) {
+      dialog.dataset.state = STATE_OPEN;
+    }
+  };
+  protected firstUpdated(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(_changedProperties);
+    const slots = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;
+    const assignedElements = slots?.assignedElements({ flatten: true });
+    if (assignedElements && assignedElements.length > 0) {
+      //@ts-ignore
+      assignedElements[0].click = this.handleClick;
+    }
+
+    this.shadowRoot?.addEventListener('click', e => {
+      e.stopPropagation();
+    });
+  }
+
+  render() {
+    return html`
+      <div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}