revotech-ui-kit 0.0.2 → 0.0.3-beta

package/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.ts

@@ -0,0 +1,107 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-dropdown-menu-radio-item')
+export class DropdownMenuRadioItem extends LitElement {
+  @property({ type: String }) _id = '';
+
+  @property({ attribute: 'aria-hidden', type: String }) _hidden = '';
+
+  private static _counter = 0;
+
+  static styles = [
+    css`
+      .icon-space {
+        width: 16px; /* Fixed width to reserve space for the check icon */
+        height: 16px;
+        display: inline-block;
+      }
+    `,
+    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${DropdownMenuRadioItem._counter++}`;
+    } else {
+      this._id = `rtgcmdrxgxli${DropdownMenuRadioItem._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;
+    }
+  }
+
+  @property({ type: Boolean }) checked = false; // Added `checked` state
+  @property({ type: Boolean }) disabled = false;
+
+  toggleChecked() {
+    this.checked = !this.checked; // Toggle the checked state
+  }
+
+  render() {
+    return 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',
+          this.disabled ? 'pointer-events-none opacity-50' : '',
+          this.className
+        )}"
+        @click=${this.toggleChecked}
+        @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}"
+      >
+        <span
+          class="icon-space absolute left-2 flex items-center justify-center"
+        >
+          ${this.checked
+            ? html`
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 15 15"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M9.875 7.5a2.375 2.375 0 1 1-4.75 0a2.375 2.375 0 0 1 4.75 0"
+                  />
+                </svg>
+              `
+            : nothing}
+        </span>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/components/atoms/dropdownMenu/dropdown-menu-seperator.ts

@@ -0,0 +1,44 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-dropdown-menu-separator')
+export class DropdownMenuSeparator 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${DropdownMenuSeparator._counter++}`;
+    } else {
+      this._id = `rtgcmdrxlxs${DropdownMenuSeparator._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/dropdownMenu/dropdown-menu-shortcut.ts

@@ -0,0 +1,17 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-dropdown-menu-shortcut')
+export class DropdownMenuShortcut extends LitElement {
+  static styles = [css``, TWStyles];
+
+  render() {
+    return html`
+      <span class="${cn('ml-auto text-xs font-semibold', this.className)}">
+        <slot></slot>
+      </span>
+    `;
+  }
+}

package/src/components/atoms/dropdownMenu/dropdown-menu.atom.ts

@@ -0,0 +1,84 @@
+import { LitElement, html, css, nothing, PropertyValues } from 'lit';
+import {
+  property,
+  customElement,
+  state,
+  queryAssignedElements,
+} from 'lit/decorators.js';
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
+import './dropdown-menu-content';
+import { DropdownMenuContent } from './dropdown-menu-content';
+import './dropdown-menu-item';
+
+@customElement('rtg-dropdown-menu')
+export class DropdownMenu extends LitElement {
+  static styles = [css``, TWStyles];
+
+  @state() isOpen = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('click', this.handleClickOutside);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this.handleClickOutside);
+    super.disconnectedCallback();
+  }
+
+  toggleDropdown(e: MouseEvent) {
+    e.stopPropagation(); // Prevent closing immediately on button click
+    this.isOpen = !this.isOpen;
+  }
+
+  handleClickOutside = (e: MouseEvent) => {
+    const target = e.target as HTMLElement;
+    // Check if the clicked element is outside the dropdown
+    if (!this.shadowRoot?.contains(target)) {
+      this.isOpen = false; // Close the dropdown
+    }
+  };
+
+  private get _content(): DropdownMenuContent | 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 DropdownMenuContent) {
+          return children[index] as DropdownMenuContent;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+    const content = this._content;
+    if (content) {
+      content.dataset.state = this.isOpen ? 'open' : 'close';
+    }
+  }
+
+  render() {
+    return html`
+      <div >
+      <div>
+       <button data-ignore-outside-click class="inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground  hover:bg-secondary/80 h-8 px-4 py-2" @click="${
+         this.toggleDropdown
+       }">
+          open
+        <buttom>
+       </div>
+        <div
+          class="flex h-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground border shadow-md"
+           style="display: ${this.isOpen ? 'block' : 'none'};width:260px"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/atoms/dropdownMenu/dropdownMenu.stories.ts

@@ -0,0 +1,220 @@
+import { html } from 'lit';
+// eslint-disable-next-line import/extensions
+import './dropdown-menu-content';
+import './dropdown-menu-group';
+import './dropdown-menu-item';
+import './dropdown-menu-seperator';
+import './dropdown-menu.atom';
+import '../button/button.atom';
+import './dropdown-menu-checkbox-Item';
+import './dropdown-menu-radio-item';
+import './dropdown-menu-shortcut';
+import { Meta, StoryObj, StoryFn } from '@storybook/web-components';
+
+export default {
+  component: 'components/atoms/dropdownMenu',
+  tags: ['autodocs'],
+} as Meta;
+
+//type Story = StoryObj;
+
+const TemplateDropdownMenu: StoryFn = () =>
+  html`
+    <rtg-dropdown-menu class="w-full max-w-md">
+      <rtg-dropdown-menu-content>
+        <rtg-dropdown-menu-shortcut style="margin-left:8px"
+          >My Account</rtg-dropdown-menu-shortcut
+        >
+        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
+        <rtg-dropdown-menu-group>
+          <rtg-dropdown-menu-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-dropdown-menu-item>
+          <rtg-dropdown-menu-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-dropdown-menu-item>
+          <rtg-dropdown-menu-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-dropdown-menu-item>
+        </rtg-dropdown-menu-group>
+
+        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
+        <rtg-dropdown-menu-group>
+          <rtg-dropdown-menu-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-dropdown-menu-item>
+          <rtg-dropdown-menu-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-dropdown-menu-item>
+          <rtg-dropdown-menu-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-dropdown-menu-item>
+        </rtg-dropdown-menu-group></rtg-dropdown-menu-content
+      >
+    </rtg-dropdown-menu>
+  `;
+export const DropdownMenu = TemplateDropdownMenu.bind({});
+
+const TemplateDropdownMenuCheckbox: StoryFn = () =>
+  html`
+    <rtg-dropdown-menu class="w-full max-w-md">
+      <rtg-dropdown-menu-content>
+        <rtg-dropdown-menu-shortcut style="margin-left:8px"
+          >My Account</rtg-dropdown-menu-shortcut
+        >
+        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
+        <rtg-dropdown-menu-group>
+          <rtg-dropdown-menu-checkbox-item>
+            <span style="margin-left:24px">Profile</span>
+          </rtg-dropdown-menu-checkbox-item>
+          <rtg-dropdown-menu-checkbox-item>
+            <span style="margin-left:24px">Billing</span>
+          </rtg-dropdown-menu-checkbox-item>
+          <rtg-dropdown-menu-checkbox-item>
+            <span style="margin-left:24px">Settings</span>
+          </rtg-dropdown-menu-checkbox-item>
+        </rtg-dropdown-menu-group>
+      </rtg-dropdown-menu-content>
+    </rtg-dropdown-menu>
+  `;
+
+export const DropdownMenuCheckbox = TemplateDropdownMenuCheckbox.bind({});
+
+const TemplateDropdownMenuRadio: StoryFn = () =>
+  html`
+    <rtg-dropdown-menu class="w-full max-w-md">
+      <rtg-dropdown-menu-content>
+        <rtg-dropdown-menu-shortcut style="margin-left:8px"
+          >My Account</rtg-dropdown-menu-shortcut
+        >
+        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
+        <rtg-dropdown-menu-group>
+          <rtg-dropdown-menu-radio-item>
+            <span style="margin-left:24px">Profile</span>
+          </rtg-dropdown-menu-radio-item>
+          <rtg-dropdown-menu-radio-item>
+            <span style="margin-left:24px">Billing</span>
+          </rtg-dropdown-menu-radio-item>
+          <rtg-dropdown-menu-radio-item>
+            <span style="margin-left:24px">Settings</span>
+          </rtg-dropdown-menu-radio-item>
+        </rtg-dropdown-menu-group>
+      </rtg-dropdown-menu-content>
+    </rtg-dropdown-menu>
+  `;
+export const DropdownMenuRadio = TemplateDropdownMenuRadio.bind({});

package/src/components/atoms/dropdownMenu/dropdownMenu.style.ts

@@ -0,0 +1,7 @@
+import { cva } from 'class-variance-authority';
+
+export const dropdownMenuRootStyle = cva('rtgcmd-root');
+
+export const dropdownMenuContentStyle = cva(
+  'max-h-[300px] overflow-y-auto overflow-x-hidden'
+);

package/src/components/atoms/index.ts

@@ -8,3 +8,6 @@ export * from './command-group/command-group.atom';
 export * from './command-item/command-item.atom';
 export * from './command-list/command-list.atom';
 export * from './command-separator/command-separator.atom';
+export * from './card/card.atom';
+export * from './popover/popover.atom';
+export * from './alert/alert.atom';

package/src/components/atoms/input/input.atom.ts

@@ -1,12 +1,23 @@
 /* eslint-disable lit/no-value-attribute */
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, PropertyValues } 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';
 import { InputType } from './input.type';
+import { inputStyles } from './input.styles';
+import { BaseElement } from '../../../helpers';
+import { spread } from '@open-wc/lit-helpers';
 
 @customElement('rtg-input')
-export class Input extends LitElement {
+export class Input extends BaseElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    // Initialize value with defaultValue if provided
+    this.value = this.value || this.defaultValue;
+  }
+
   @property({ type: Boolean }) disabled = false;
 
   @property({ type: String }) type: InputType = 'text';
@@ -15,19 +26,62 @@ export class Input extends LitElement {
 
   @property({ type: String }) defaultValue = '';
 
-  static styles = [css``, TWStyles];
+  // Make value a reactive property
+  @property({ type: String }) value = '';
+
+  static styles = [
+    css`
+      :root {
+        --input-border-radius: inherit;
+        --input-padding: inherit;
+      }
+      .input-base {
+        border-radius: var(--input-border-radius) !important;
+        padding-top: var(--input-padding) !important;
+        padding-bottom: var(--input-padding) !important;
+      }
+    `,
+    TWStyles,
+  ];
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    const variables = ['--input-border-radius', '--input-padding'];
+
+    this.applyCustomClass(variables, 'input', 'input-base');
+
+    // Reflect the initial value (if defaultValue was provided)
+    if (this.type !== 'file' && this.defaultValue) {
+      this.value = this.defaultValue;
+    }
+  }
+
+  handleInputChange(event: Event) {
+    const inputElement = event.target as HTMLInputElement;
+
+    if (inputElement.type === 'file') {
+      // Handle file input separately
+      this.value = inputElement.files ? inputElement.files[0].name : '';
+    } else {
+      this.value = inputElement.value;
+    }
+  }
+
+  protected getAttributesToExclude(): string[] {
+    return ['disabled', 'type', 'placeholder', 'value', 'data-testid'];
+  }
 
   render() {
+    const attributes = this.getFilteredAttributes();
+    console.log('attributes', this.className);
     return html`
       <input
         type="${this.type}"
         placeholder="${this.placeholder}"
         ?disabled=${this.disabled}
-        class="${cn(
-          'flex h-8 w-full rounded-sm border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-          this.className
-        )}"
-        value="${this.defaultValue}"
+        class="${cn(inputStyles, this.className)}"
+        .value=${this.type !== 'file' ? this.value : ''}
+        @change="${this.handleInputChange}"
+        ${spread(attributes)}
       />
     `;
   }