revotech-ui-kit 0.0.5-beta → 0.0.7-beta

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

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

@@ -1,391 +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')
-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

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

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

@@ -1,31 +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')
-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>
-    `;
-  }
-}