revotech-ui-kit 0.0.0

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

@@ -0,0 +1,301 @@
+/* eslint-disable no-use-before-define */
+import {
+  LitElement,
+  html,
+  css,
+  PropertyValueMap,
+  nothing,
+  PropertyValues,
+} 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';
+
+@customElement('rtg-dialog')
+export class Dialog extends LitElement {
+  static styles = [css``, TWStyles];
+
+  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
+
+  private get _content(): DialogContent | 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 DialogContent) {
+          return children[index] as DialogContent;
+        }
+      }
+    }
+
+    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 rtgdlg-root>
+        ${this.state === STATE_OPEN
+          ? html` <rtg-dialog-overlay></rtg-dialog-overlay>`
+          : nothing}
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+@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}`;
+  }
+}
+
+@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>
+    `;
+  }
+}
+
+@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>
+    `;
+  }
+}
+
+@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>
+    `;
+  }
+}
+
+// @customElement('rtg-dialog-title')
+// export class DialogTitle extends LitElement {
+//   static styles = [css``, TWStyles];
+
+//   render() {
+//     return html`
+//       <h2
+//         class="${cn(
+//           'text-lg font-semibold leading-none tracking-tight',
+//           this.className
+//         )}"
+//       >
+//         <slot></slot>
+//       </h2>
+//     `;
+//   }
+// }
+
+// @customElement('rtg-dialog-description')
+// export class DialogDescription extends LitElement {
+//   static styles = [css``, TWStyles];
+
+//   render() {
+//     return html`
+//       <p class="${cn('text-sm text-muted-foreground', this.className)}">
+//         <slot></slot>
+//       </p>
+//     `;
+//   }
+// }
+
+@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;
+  }
+
+  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_OPEN;
+        }
+      });
+    }
+  }
+
+  render() {
+    return html`
+      <div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+@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.stories.ts

@@ -0,0 +1,86 @@
+import { html } from 'lit';
+import { Meta, StoryObj } from '@storybook/web-components';
+import '../input/input.atom';
+import './dialog.atom';
+
+const meta: Meta = {
+  component: 'components/dialog',
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const ConfirmationDialog: Story = {
+  render: () =>
+    html`<div class="flex flex-nowrap">
+        <div class="flex flex-wrap space-x-4 gap-5 mx-3">
+        <rtg-dialog>
+        <rtg-dialog-trigger>
+          <rtg-button>Open Dialog</rtg-button>
+        </rtg-dialog-trigger>
+        <rtg-dialog-content>
+          <rtg-dialog-header title="Are you absolutely sure?" description="This action cannot be undone. This will permanently delete your
+          content.">
+            <rtg-dialog-title>Are you absolutely sure?</rtg-dialog-title>
+            <rtg-dialog-description>
+              This action cannot be undone. This will permanently delete your
+              content.</rtg-dialog-description
+            >
+          </rtg-dialog-header>
+          <rtg-dialog-footer>
+            <div class="flex w-full justify-between space-x-1">
+              <rtg-dialog-close><rtg-button variant="secondary">Close</rtg-button></rtg-dialog-close>
+              <div class="justify-end">
+                <rtg-button variant="destructive">Delete</rtg-button>
+                <rtg-button>Cancel</rtg-button>
+              </div>
+          </div>
+        </rtg-dialog-content>
+      </rtg-dialog>
+      </div>
+  </div>`,
+};
+
+export const ModalForm: Story = {
+  render: () => html`
+    <rtg-dialog>
+    <rtg-dialog-trigger>
+      <rtg-button variant="outline">Edit Profile</rtg-button>
+    </rtg-dialog-trigger>
+    <rtg-dialog-content class="sm:max-w-[425px]">
+      <rtg-dialog-header title="Edit Profile" description="Make changes to your profile here. Click save when you're done.">
+        <!-- <rtg-dialog-title>Edit Profile</rtg-dialog-title>
+        <rtg-dialog-description>
+          Make changes to your profile here. Click save when you're done.</rtg-dialog-description
+        > -->
+      </rtg-dialog-header>
+      <div class="grid gap-4 py-4">
+        <div class="grid grid-cols-4 items-center gap-4">
+          <rtg-label for="name" class="text-right">
+            Name
+          </rtg-label>
+          <rtg-input
+            id="name"
+            defaultValue="Pedro Duarte"
+            class="col-span-3"
+          >
+          </rtg-input>
+        </div>
+        <div class="grid grid-cols-4 items-center gap-4">
+          <rtg-label for="username" class="text-right">
+            Username
+          </rtg-label>
+          <rtg-input
+            id="username"
+            defaultValue="@peduarte"
+            class="col-span-3"
+          >
+          </rtg-input>
+        </div>
+      </div>
+      <rtg-dialog-footer>
+        <rtg-button type="submit" class="w-full sm:w-min">Save changes</rtg-button>
+    </rtg-dialog-content>
+  </rtg-dialog>
+    `,
+};

package/src/components/atoms/index.ts

@@ -0,0 +1,10 @@
+export * from './button/button.atom';
+export * from './checkbox/checkbox.atom';
+export * from './dialog/dialog.atom';
+export * from './input/input.atom';
+export * from './label/label.atom';
+export * from './command-empty/command-empty.atom';
+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';

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

@@ -0,0 +1,34 @@
+/* eslint-disable lit/no-value-attribute */
+import { LitElement, html, css } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { cn } from '@/helpers';
+import { TWStyles } from '@/styles';
+import { InputType } from './input.type';
+
+@customElement('rtg-input')
+export class Input extends LitElement {
+  @property({ type: Boolean }) disabled = false;
+
+  @property({ type: String }) type: InputType = 'text';
+
+  @property({ type: String }) placeholder = '';
+
+  @property({ type: String }) defaultValue = '';
+
+  static styles = [css``, TWStyles];
+
+  render() {
+    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}"
+      />
+    `;
+  }
+}

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

@@ -0,0 +1,89 @@
+import { html } from 'lit';
+import { Meta, StoryFn } from '@storybook/web-components';
+import './input.atom';
+import '../label/label.atom';
+import '../button/button.atom';
+
+export default {
+  title: 'Components/Input',
+  component: 'rtg-input',
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: { control: 'boolean' },
+    type: { control: 'text' },
+    placeholder: { control: 'text' },
+    defaultValue: { control: 'text' },
+  },
+} as Meta;
+
+const InputTemplate: StoryFn = args =>
+  html`<rtg-input ...=${args}></rtg-input>`;
+const TemplateWithLabel: StoryFn = args => html`
+  <rtg-label for="picture">${args.label}</rtg-label>
+  <rtg-input
+    type=${args.type}
+    ?disabled=${args.disabled}
+    placeholder=${args.placeholder}
+  ></rtg-input>
+`;
+const TemplateWithButton: StoryFn = args => html`
+  <div style="display:flex">
+    <rtg-input
+      id=${args.id}
+      type=${args.type}
+      placeholder=${args.placeholder}
+      class="min-w-80"
+    ></rtg-input>
+    <rtg-button
+      style="margin-inline-start:4px"
+      size="default"
+      onclick="javascript:alert('Hello!')"
+      >${args.ButtonLabel}</rtg-button
+    >
+  </div>
+`;
+
+export const Default = InputTemplate.bind({});
+Default.args = {
+  disabled: false,
+  type: 'text',
+  placeholder: 'Enter text',
+  defaultValue: '',
+};
+
+export const Email = TemplateWithLabel.bind({});
+Email.args = {
+  label: 'Email address',
+  disabled: false,
+  type: 'email',
+  placeholder: 'Enter email',
+  defaultValue: '',
+};
+
+export const Password = TemplateWithLabel.bind({});
+Password.args = {
+  label: 'Password',
+  disabled: false,
+  type: 'password',
+  placeholder: 'Enter password',
+  defaultValue: '',
+};
+
+export const File = TemplateWithLabel.bind({});
+File.args = {
+  disabled: false,
+  type: 'file',
+  label: 'Picture',
+  placeholder: '',
+  defaultValue: '',
+};
+
+export const InputWithButton = TemplateWithButton.bind({});
+InputWithButton.args = {
+  id: 'id',
+  ButtonLabel: 'Subscribe',
+  disabled: false,
+  type: 'email',
+  placeholder: 'Email',
+  defaultValue: '',
+};

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

@@ -0,0 +1,24 @@
+export type InputType =
+  | 'hidden'
+  | 'text'
+  | 'search'
+  | 'tel'
+  | 'url'
+  | 'email'
+  | 'password'
+  | 'datetime'
+  | 'date'
+  | 'month'
+  | 'week'
+  | 'time'
+  | 'datetime-local'
+  | 'number'
+  | 'range'
+  | 'color'
+  | 'checkbox'
+  | 'radio'
+  | 'file'
+  | 'submit'
+  | 'image'
+  | 'reset'
+  | 'button';

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

@@ -0,0 +1,40 @@
+import { LitElement, html, css } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/helpers';
+import { TWStyles } from '@/styles';
+import { labelStyle } from './label.style';
+
+@customElement('rtg-label')
+export class Label extends LitElement {
+  static labelVariants = labelStyle;
+
+  @property({ type: String }) for = '';
+
+  static styles = [css``, TWStyles];
+
+  private _onClick(e: Event) {
+    if (e.defaultPrevented) return;
+    const target = document.getElementById(this.for);
+    if (target) {
+      target.click();
+    }
+  }
+
+  render() {
+    return html`
+      <label
+        for="${this.for}"
+        @click="${this._onClick}"
+        @keydown="${this._onClick}"
+        class="${cn(
+          Label.labelVariants({
+            className: this.className,
+          })
+        )}"
+      >
+        <slot></slot>
+      </label>
+    `;
+  }
+}

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

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+import { Meta, StoryFn } from '@storybook/web-components';
+import './label.atom';
+
+export default {
+  title: 'Components/Label',
+  component: 'rtg-label',
+  tags: ['autodocs'],
+} as Meta;
+
+const Template: StoryFn = (args: any) =>
+  html` <rtg-label for=${args.for}>${args.label}</rtg-label>`;
+
+export const Default = Template.bind({});
+Default.args = {
+  for: 'id',
+  label: 'Email address',
+};

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

@@ -0,0 +1,5 @@
+import { cva } from 'class-variance-authority';
+
+export const labelStyle = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);