revotech-ui-kit 0.0.0

package/src/components/command/command.stories.ts

@@ -0,0 +1,154 @@
+import { html } from 'lit';
+// eslint-disable-next-line import/extensions
+import './command';
+import { Meta } from '@storybook/web-components';
+
+export default {
+  title: 'Components/command',
+  component: 'rtg-command',
+  tags: ['autodocs'],
+} as Meta;
+export const Default = () => html`
+  <rtg-command class="w-full max-w-md">
+    <rtg-command-input placeholder="Search ...."></rtg-command-input>
+    <rtg-command-list>
+      <rtg-command-empty>No items found!</rtg-command-empty>
+      <rtg-command-group heading="Suggestions">
+        <rtg-command-item>
+          <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="mr-2 h-4 w-4"
+          >
+            <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
+            <line x1="16" x2="16" y1="2" y2="6"></line>
+            <line x1="8" x2="8" y1="2" y2="6"></line>
+            <line x1="3" x2="21" y1="10" y2="10"></line>
+          </svg>
+          <span>Calendar</span>
+        </rtg-command-item>
+        <rtg-command-item>
+          <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="mr-2 h-4 w-4"
+          >
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
+            <line x1="9" x2="9.01" y1="9" y2="9"></line>
+            <line x1="15" x2="15.01" y1="9" y2="9"></line>
+          </svg>
+          <span>Search Emoji</span>
+        </rtg-command-item>
+        <rtg-command-item>
+          <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="mr-2 h-4 w-4"
+          >
+            <rect width="16" height="20" x="4" y="2" rx="2"></rect>
+            <line x1="8" x2="16" y1="6" y2="6"></line>
+            <line x1="16" x2="16" y1="14" y2="18"></line>
+            <path d="M16 10h.01"></path>
+            <path d="M12 10h.01"></path>
+            <path d="M8 10h.01"></path>
+            <path d="M12 14h.01"></path>
+            <path d="M8 14h.01"></path>
+            <path d="M12 18h.01"></path>
+            <path d="M8 18h.01"></path>
+          </svg>
+          <span>Calculator</span>
+        </rtg-command-item>
+      </rtg-command-group>
+      <rtg-command-separator></rtg-command-separator>
+      <rtg-command-group heading="Settings">
+        <rtg-command-item onclick="javascript:alert('Profile Clicked!')">
+          <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="mr-2 h-4 w-4"
+          >
+            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
+            <circle cx="12" cy="7" r="4"></circle>
+          </svg>
+          <span>Profile</span>
+          <span class="ml-auto text-xs tracking-widest text-muted-foreground"
+            >⌘P</span
+          >
+        </rtg-command-item>
+        <rtg-command-item>
+          <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="mr-2 h-4 w-4"
+          >
+            <rect width="20" height="14" x="2" y="5" rx="2"></rect>
+            <line x1="2" x2="22" y1="10" y2="10"></line>
+          </svg>
+          <span>Billing</span
+          ><span class="ml-auto text-xs tracking-widest text-muted-foreground"
+            >⌘B</span
+          >
+        </rtg-command-item>
+        <rtg-command-item>
+          <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="mr-2 h-4 w-4"
+          >
+            <path
+              d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+            ></path>
+            <circle cx="12" cy="12" r="3"></circle>
+          </svg>
+          <span>Settings</span>
+          <span class="ml-auto text-xs tracking-widest text-muted-foreground">
+            ⌘S</span
+          >
+        </rtg-command-item>
+      </rtg-command-group></rtg-command-list
+    >
+  </rtg-command>
+`;

package/src/components/command/command.ts

@@ -0,0 +1,391 @@
+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')
+export class Command extends LitElement {
+  static styles = [css``, TWStyles];
+
+  @queryAssignedElements({ selector: 'input[rtgcmd-input]' })
+  _input!: Array<HTMLElement>;
+
+  render() {
+    return html`
+      <div
+        class="${cn(
+          'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground border shadow-md',
+          this.className
+        )}"
+        id="rtgcmdr1"
+        rtgcmd-root
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+@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>
+    `;
+  }
+}
+
+@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() {
+    // eslint-disable-next-line lit/attribute-value-entities
+    const c =
+      '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="${c}"
+            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>
+        `}`;
+  }
+}
+
+@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>
+        `}`;
+  }
+}
+
+@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>
+        `}`;
+  }
+}
+
+@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>
+        `}`;
+  }
+}
+
+@customElement('rtg-command-input')
+export class CommandInput extends LitElement {
+  @property({ type: String }) placeholder = 'Type a command or search...';
+
+  @property({ attribute: 'value', type: String }) _value = '';
+
+  static styles = [css``, TWStyles];
+
+  private get identifier() {
+    const parent =
+      this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-root]');
+    if (parent) {
+      return `${parent.getAttribute('id')}i`;
+    }
+    return `rtgcmdrxi`;
+  }
+
+  private filterItems() {
+    const parent = this.parentElement;
+    if (parent) {
+      let isEmpty = true;
+      const groups = parent.querySelectorAll(
+        'rtg-command-list > rtg-command-group'
+      );
+      if (groups) {
+        groups.forEach(group => {
+          let hidden = true;
+          const items = group.querySelectorAll('rtg-command-item');
+          if (items) {
+            items.forEach(item => {
+              const value = (item as CommandItem)?.value || '';
+              if (value.toLowerCase().includes(this._value.toLowerCase())) {
+                hidden = false;
+                isEmpty = false;
+                item.setAttribute('aria-hidden', 'false');
+              } else {
+                item.setAttribute('aria-hidden', 'true');
+              }
+            });
+          }
+          group.setAttribute('aria-hidden', hidden ? 'true' : 'false');
+          let separator = group.previousElementSibling as CommandSeparator;
+          if (separator) {
+            separator.setAttribute(
+              'aria-hidden',
+              hidden ||
+                separator.previousElementSibling?.getAttribute(
+                  'aria-hidden'
+                ) === 'true'
+                ? 'true'
+                : 'false'
+            );
+          }
+          separator = group.nextElementSibling as CommandSeparator;
+          if (separator) {
+            separator.setAttribute(
+              'aria-hidden',
+              hidden ||
+                separator.nextElementSibling?.getAttribute('aria-hidden') ===
+                  'true'
+                ? 'true'
+                : 'false'
+            );
+          }
+        });
+      }
+
+      const empty = parent.querySelector('rtg-command-empty');
+      if (empty) {
+        empty.setAttribute('aria-hidden', isEmpty ? 'false' : 'true');
+      }
+    }
+  }
+
+  private handleChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (input) {
+      this._value = input.value;
+      this.filterItems();
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        class="${cn('flex items-center border-b px-3', this.className)}"
+        name="rtgcmd-input-container"
+      >
+        <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="mr-2 h-4 w-4 shrink-0 opacity-50"
+        >
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.3-4.3"></path>
+        </svg>
+        <input
+          class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+          placeholder="${this.placeholder}"
+          rtgcmd-input
+          @input="${this.handleChange}"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+          aria-autocomplete="list"
+          role="combobox"
+          aria-expanded="true"
+          aria-controls=":r1oe:"
+          aria-labelledby=":r1of:"
+          id="${this.identifier}"
+          type="text"
+          data-value="${this._value}"
+        />
+      </div>
+    `;
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './atoms';
+export * from './molecules';

package/src/components/molecules/command/command.molecules.ts

@@ -0,0 +1,31 @@
+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')
+export class Command extends LitElement {
+  static styles = [css``, TWStyles];
+
+  @queryAssignedElements({ selector: 'input[rtgcmd-input]' })
+  _input!: Array<HTMLElement>;
+
+  render() {
+    return html`
+      <div
+        class="${cn(
+          'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground border shadow-md',
+          this.className
+        )}"
+        id="rtgcmdr1"
+        rtgcmd-root
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}