revotech-ui-kit 0.0.0 → 0.0.1-beta-01

package/src/components/molecules/command-input/command-input.atom.ts

@@ -1,130 +0,0 @@
-import { LitElement, html, css, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { cn } from '@/helpers';
-import { TWStyles } from '@/styles';
-import { CommandItem, CommandSeparator } from '@/components';
-
-@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/popover.ts

@@ -1,247 +0,0 @@
-/* eslint-disable no-use-before-define */
-import {
-  LitElement,
-  html,
-  css,
-  nothing,
-  PropertyValues,
-  PropertyValueMap,
-  ReactiveControllerHost,
-} from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { cn } from '@/helpers';
-import { TWStyles } from '@/styles';
-
-const STATE_OPEN = 'open';
-const STATE_CLOSED = 'closed';
-
-class PopoverController {
-  private host: ReactiveControllerHost;
-
-  pos = { x: 0, y: 0 };
-
-  _onMouseMove = ({ clientX, clientY }: MouseEvent) => {
-    this.pos = { x: clientX, y: clientY };
-    this.host.requestUpdate();
-  };
-
-  _onClick = (e: MouseEvent) => {
-    console.log(`click: ${e.target}`);
-    console.log(`pos: ${this.pos.x}`);
-    if (e.y < 100) {
-      const popover = (this.host as PopoverContent)?._popover;
-      if (popover && popover.state === STATE_OPEN) {
-        popover.state = STATE_CLOSED;
-      }
-    }
-    // this.host.requestUpdate();
-  };
-
-  _onScroll = (e: Event) => {
-    console.log(`scroll: ${e.target}`);
-    console.log(`pos: ${this.pos.y}`);
-    console.log(`pos: ${window.scrollY} ${window.innerHeight}`);
-    this.host.requestUpdate();
-  };
-
-  _onResize = (e: UIEvent) => {
-    console.log(`resize: ${e.target}`);
-    console.log(`pos: ${window.innerWidth} ${window.innerHeight}`);
-    this.host.requestUpdate();
-  };
-
-  constructor(host: ReactiveControllerHost) {
-    this.host = host;
-    host.addController(this);
-  }
-
-  hostConnected() {
-    window.addEventListener('mousemove', this._onMouseMove);
-    window.addEventListener('click', this._onClick);
-    window.addEventListener('scroll', this._onScroll);
-    window.addEventListener('resize', this._onResize);
-  }
-
-  hostDisconnected() {
-    window.removeEventListener('mousemove', this._onMouseMove);
-    window.removeEventListener('click', this._onClick);
-    window.removeEventListener('scroll', this._onScroll);
-    window.removeEventListener('resize', this._onResize);
-  }
-}
-
-@customElement('rtg-popover')
-export class Popover extends LitElement {
-  static styles = [css``, TWStyles];
-
-  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
-
-  @property({ type: String }) align = 'center';
-
-  @property({ type: Number }) sideOffset = 0;
-
-  get _content(): PopoverContent | null {
-    const slot = this.shadowRoot?.querySelector('slot');
-    const children = slot?.assignedElements();
-    if (children) {
-      for (let index = 0; index < children.length; index++) {
-        if (children[index] instanceof PopoverContent) {
-          return children[index] as PopoverContent;
-        }
-      }
-    }
-
-    return null;
-  }
-
-  get _trigger(): PopoverTrigger | null {
-    const slot = this.shadowRoot?.querySelector('slot');
-    const children = slot?.assignedElements();
-    if (children) {
-      for (let index = 0; index < children.length; index++) {
-        if (children[index] instanceof PopoverTrigger) {
-          return children[index] as PopoverTrigger;
-        }
-      }
-    }
-
-    return null;
-  }
-
-  protected updated(_changedProperties: PropertyValues): void {
-    super.updated(_changedProperties);
-    const content = this._content;
-    if (content) {
-      content.dataset.state = this.state;
-    }
-  }
-
-  render() {
-    return html`
-      <div rtgpop-root>
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-@customElement('rtg-popover-content')
-export class PopoverContent extends LitElement {
-  static styles = [css``, TWStyles];
-
-  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
-
-  @property({ attribute: 'data-side', type: String }) side = 'bottom';
-
-  private controller = new PopoverController(this);
-
-  public get _popover(): Popover | null {
-    let parent = this.parentElement;
-
-    while (parent) {
-      if (parent instanceof Popover) {
-        return parent;
-      }
-      parent = parent.parentElement;
-    }
-    return parent;
-  }
-
-  public get _box(): DOMRect {
-    return this.firstElementChild!.getBoundingClientRect();
-  }
-
-  public get _triggerBox(): DOMRect {
-    return this._popover!._trigger!.getBoundingClientRect();
-  }
-
-  private handleCloseButtonClick = () => {
-    const popover = this._popover;
-    if (popover) {
-      popover.dataset.state = STATE_CLOSED;
-    }
-  };
-
-  render() {
-    let top = 0;
-    const box = this._box;
-    const triggerBox = this._triggerBox;
-    if (this.side === 'bottom') {
-      top = triggerBox.top + triggerBox.height;
-      if (top + box.height > window.innerHeight) {
-        top = triggerBox.top - box.height;
-      }
-    }
-
-    if (this.side === 'top') {
-      top = triggerBox.top - box.height;
-      if (top < 0) {
-        top = triggerBox.top + triggerBox.height;
-      }
-    }
-
-    return html`${this.state === STATE_OPEN
-      ? html`
-          <div
-            style="position: fixed; left: 0px; top: 0px; transform: translate(638px, ${top}px); min-width: max-content; --radix-popper-transform-origin: 50% 0px; z-index: 50; --radix-popper-available-width: ${window.innerWidth}px; --radix-popper-available-height: ${window.innerHeight}px; --radix-popper-anchor-width: 127.046875px; --radix-popper-anchor-height: 36px;"
-          >
-            <div
-              class="${cn(
-                'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-                this.className
-              )}"
-              rtgpop-content
-            >
-              <slot></slot>
-            </div>
-          </div>
-        `
-      : nothing}`;
-  }
-}
-
-@customElement('rtg-popover-trigger')
-export class PopoverTrigger extends LitElement {
-  static styles = [css``, TWStyles];
-
-  private get _popover(): Popover | null {
-    let parent = this.parentElement;
-
-    while (parent) {
-      if (parent instanceof Popover) {
-        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 popover = this._popover;
-        if (popover) {
-          popover._content!.dataset.side = 'top';
-          popover.dataset.state = STATE_OPEN;
-          popover.dataset.state = STATE_CLOSED;
-          popover.dataset.state = STATE_OPEN;
-        }
-      });
-    }
-  }
-
-  render() {
-    return html`
-      <div>
-        <slot></slot>
-      </div>
-    `;
-  }
-}

package/src/helpers/mouse-conroller.helper.ts

@@ -1,42 +0,0 @@
-import { ReactiveControllerHost } from 'lit';
-
-export class MouseController {
-  private host: ReactiveControllerHost;
-
-  pos = { x: 0, y: 0 };
-
-  _onMouseMove = ({ clientX, clientY }: MouseEvent) => {
-    this.pos = { x: clientX, y: clientY };
-    this.host.requestUpdate();
-  };
-
-  _onClick = (e: MouseEvent) => {
-    console.log(`click: ${e.target}`);
-    console.log(`pos: ${this.pos.x}`);
-    this.host.requestUpdate();
-  };
-
-  _onScroll = (e: Event) => {
-    console.log(`scroll: ${e.target}`);
-    console.log(`pos: ${this.pos.y}`);
-    console.log(`pos: ${window.scrollY} ${window.innerHeight}`);
-    this.host.requestUpdate();
-  };
-
-  constructor(host: ReactiveControllerHost) {
-    this.host = host;
-    host.addController(this);
-  }
-
-  hostConnected() {
-    window.addEventListener('mousemove', this._onMouseMove);
-    window.addEventListener('click', this._onClick);
-    window.addEventListener('scroll', this._onScroll);
-  }
-
-  hostDisconnected() {
-    window.removeEventListener('mousemove', this._onMouseMove);
-    window.removeEventListener('click', this._onClick);
-    window.removeEventListener('scroll', this._onScroll);
-  }
-}

package/src/helpers/style.helpers.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/src/interfaces/actionable.interface.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-
-export type ActionableProps = Partial<{
-  onClick: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
-}>;

package/src/interfaces/atomic.interface.ts

@@ -1,6 +0,0 @@
-export type AtomicProps = Partial<{
-  id: string;
-  className: string;
-  name: string;
-  title: string;
-}>;

package/src/interfaces/intractable.interface.ts

@@ -1,6 +0,0 @@
-export type IntractableProps<T = string> = Partial<{
-  isDisabled: boolean;
-  isChecked: boolean;
-  isReadOnly: boolean;
-  type: T;
-}>;