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

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

@@ -1,149 +0,0 @@
-import { html } from 'lit';
-import type { Meta, StoryFn, StoryObj } from '@storybook/web-components';
-import { expect, within, fn, waitFor, userEvent } from '@storybook/test';
-import './card.atom';
-
-export default {
-  component: 'components/card',
-  tags: ['autodocs'],
-} as Meta;
-
-type Story = StoryObj;
-
-const testCardBehavior = async (args: any, canvasElement: HTMLElement) => {
-  const canvas = within(canvasElement);
-  const card = await waitFor(() => canvas.getByTestId('card-id'));
-  const cardHeader = await waitFor(() => canvas.getByTestId('card-header-id'));
-  const cardTitle = await waitFor(() => canvas.getByTestId('card-title-id'));
-  const cardDescription = await waitFor(() =>
-    canvas.getByTestId('card-description-id')
-  );
-  const cardContent = await waitFor(() =>
-    canvas.getByTestId('card-content-id')
-  );
-  const cardFooter = await waitFor(() => canvas.getByTestId('card-footer-id'));
-  expect(card).toBeVisible();
-  expect(cardHeader).toBeVisible();
-  expect(cardTitle).toBeVisible();
-  expect(cardDescription).toBeVisible();
-  expect(cardContent).toBeVisible();
-  expect(cardFooter).toBeVisible();
-
-  if (card.shadowRoot) {
-    const cardItem = await card.shadowRoot.getElementById('rtg-card-id');
-    expect(cardItem).toHaveClass(
-      'rounded-lg border bg-card text-card-foreground shadow-sm p-6'
-    );
-  }
-  if (cardTitle) {
-    expect(cardTitle.textContent).toContain('Create project');
-    expect(cardTitle.tagName.toLowerCase()).toEqual('cardtitle');
-  }
-  if (cardDescription) {
-    expect(cardDescription.textContent).toContain(
-      'Deploy your new project in one-click.'
-    );
-    expect(cardDescription.tagName.toLowerCase()).toEqual('carddescription');
-  }
-};
-
-export const Cards: Story = {
-  name: 'Cards',
-  render: () => html`
-    <rtg-card data-testid="card-id">
-      <CardHeader data-testid="card-header-id">
-        <CardTitle data-testid="card-title-id">
-          <h3>Create project</h3>
-        </CardTitle>
-        <CardDescription data-testid="card-description-id">
-          <p class="text-sm text-muted-foreground">
-            Deploy your new project in one-click.
-          </p>
-        </CardDescription>
-      </CardHeader>
-      <CardContent data-testid="card-content-id">
-        <form class="pt-4">
-          <div class="grid w-full items-center gap-4">
-            <div class="flex flex-col space-y-1.5">
-              <label
-                class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                for="name"
-                >Name</label
-              ><input
-                class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                id="name"
-                placeholder="Name of your project"
-              />
-            </div>
-            <div class="flex flex-col space-y-1.5">
-              <label
-                class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                for="framework"
-                >Framework</label
-              ><button
-                type="button"
-                role="combobox"
-                aria-controls="radix-:r2b:"
-                aria-expanded="false"
-                aria-autocomplete="none"
-                dir="ltr"
-                data-state="closed"
-                data-placeholder=""
-                class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>span]:line-clamp-1"
-                id="framework"
-              >
-                <span style="pointer-events: none;">Select</span
-                ><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="lucide lucide-chevron-down h-4 w-4 opacity-50"
-                  aria-hidden="true"
-                >
-                  <path d="m6 9 6 6 6-6"></path>
-                </svg></button
-              ><select
-                aria-hidden="true"
-                tabindex="-1"
-                style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;"
-              >
-                <option value=""></option>
-                <option value="next">Next.js</option>
-                <option value="sveltekit">SvelteKit</option>
-                <option value="astro">Astro</option>
-                <option value="nuxt">Nuxt.js</option>
-              </select>
-            </div>
-          </div>
-        </form>
-      </CardContent>
-      <CardFooter data-testid="card-footer-id">
-        <div class="items-center pt-4 flex justify-between">
-          <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
-          >
-            Cancel
-          </button>
-          <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
-          >
-            Deploy
-          </button>
-        </div>
-      </CardFooter>
-    </rtg-card>
-  `,
-  play: async ({ args, canvasElement }) => {
-    try {
-      await testCardBehavior(args, canvasElement);
-    } catch (error) {
-      console.error('An error occurred during the play function:', error);
-    }
-  },
-};

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

@@ -1,76 +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 { checkboxStyles, iconStyles } from './checkbox.style';
-import { CheckboxProperties } from './checkbox.type';
-
-@customElement('rtg-checkbox')
-export class Checkbox extends LitElement implements CheckboxProperties {
-  @property({ type: Boolean }) disabled = false;
-
-  @property({ type: Boolean }) checked = false;
-
-  @property({ type: String }) type = 'text';
-
-  @property({ type: String }) value = '';
-
-  @property({ type: Boolean }) required = false;
-
-  static styles = [css``, TWStyles];
-
-  private _onClick(e: Event) {
-    if (e.defaultPrevented) return;
-    this.checked = !this.checked;
-    this.required = !this.required;
-
-    // Dispatch a custom change event when the state changes
-    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-  }
-
-  public click() {
-    this.checked = !this.checked;
-    this.required = !this.required;
-  }
-
-  render() {
-    const additionalProps = { ...this.dataset }; // Example of additional props
-    return html`
-      <button
-        data-testid="checkbox-atom"
-        type="button"
-        role="checkbox"
-        aria-checked="${this.checked || this.value === 'on'}"
-        data-state="${this.checked || this.value === 'on'
-          ? 'checked'
-          : 'unchecked'}"
-        value="${this.value}"
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        @click="${this._onClick}"
-        class="${cn(checkboxStyles, this.className)}"
-        ${Object.entries(additionalProps).map(
-          ([key, value]) => html` ${key}="${value}" `
-        )}
-      >
-        ${this.checked || this.value === 'on'
-          ? html`<span data-state="checked" class="${iconStyles}"
-              ><svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="3"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-4 w-4"
-              >
-                <polyline points="20 6 9 17 4 12"></polyline></svg
-            ></span>`
-          : nothing}
-      </button>
-    `;
-  }
-}

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

@@ -1,309 +0,0 @@
-import type { Meta, StoryFn, StoryContext } from '@storybook/web-components';
-import { html } from 'lit';
-import './checkbox.atom';
-import { expect, within, userEvent, waitFor, fn } from '@storybook/test';
-import {
-  CheckboxArgs,
-  CheckboxWithRequiredArgs,
-  CheckboxWithValueArgs,
-} from './checkbox.type';
-import '../button/button.atom';
-
-const allowedTypes = ['checkbox'];
-
-export default {
-  component: 'components/checkbox',
-  tags: ['autodocs'],
-} as Meta;
-
-const mockOnClickHandler = fn(event => {
-  alert('submit data!');
-});
-
-const testCheckboxBehavior = async (
-  args: CheckboxArgs,
-  canvasElement: HTMLElement
-) => {
-  const canvas = within(canvasElement);
-  const checkbox = await waitFor(() => canvas.getByTestId('checkbox-id'));
-
-  if (checkbox.shadowRoot) {
-    const innerCheckbox = checkbox.shadowRoot.querySelector(
-      '[data-testid="checkbox-atom"]'
-    );
-
-    // 1. Test: Checkbox should have correct Role attribute
-    expect(innerCheckbox).toHaveRole('checkbox');
-
-    // 2. Test: Checkbox should have the correct `checked` state based on args
-    if (args.checked) {
-      expect(innerCheckbox).toBeChecked();
-    } else {
-      expect(innerCheckbox).not.toBeChecked();
-    }
-
-    // 3. Test: Checkbox should be disabled when the `disabled` prop is true
-    if (args.disabled) {
-      expect(innerCheckbox).toBeDisabled();
-    } else {
-      expect(innerCheckbox).not.toBeDisabled();
-    }
-
-    // 4. Test: Label should have correct `for` attribute linking to the checkbox
-    const label = await waitFor(() => canvas.getByText(args.label));
-    expect(label).toBeInTheDocument();
-    expect(label).toHaveAttribute('for', checkbox.getAttribute('id'));
-  }
-};
-
-const testCheckboxWithRequiredBehavior = async (
-  args: CheckboxWithRequiredArgs,
-  canvasElement: HTMLElement
-) => {
-  const canvas = within(canvasElement);
-  const checkbox = await waitFor(() => canvas.getByTestId('checkbox-id'));
-  const button = await waitFor(() => canvas.getByTestId('btn-id'));
-
-  if (checkbox.shadowRoot) {
-    const innerCheckbox = checkbox.shadowRoot.querySelector(
-      '[data-testid="checkbox-atom"]'
-    );
-
-    // Test: Checkbox should have the correct required attribute
-    if (args.required) {
-      expect(innerCheckbox).toHaveAttribute('required');
-    } else {
-      expect(innerCheckbox).not.toHaveAttribute('required');
-    }
-
-    // Test: Button should be disabled when checkbox is unchecked and required is true
-    if (args.required && !args.checked) {
-      expect(button).toBeDisabled();
-    } else if (args.required && args.checked) {
-      expect(button).not.toBeDisabled();
-    }
-
-    // Additional tests for the checked state
-    if (args.checked) {
-      expect(innerCheckbox).toBeChecked();
-    } else {
-      expect(innerCheckbox).not.toBeChecked();
-    }
-
-    // Additional tests for the disabled state
-    if (args.disabled) {
-      expect(innerCheckbox).toBeDisabled();
-    } else {
-      expect(innerCheckbox).not.toBeDisabled();
-    }
-  }
-};
-
-const testCheckboxWithValueBehavior = async (
-  args: CheckboxWithValueArgs,
-  canvasElement: HTMLElement
-) => {
-  const canvas = within(canvasElement);
-  const checkbox = await waitFor(() => canvas.getByTestId('checkbox-id'));
-
-  if (checkbox.shadowRoot) {
-    const innerCheckbox = checkbox.shadowRoot.querySelector(
-      '[data-testid="checkbox-atom"]'
-    );
-
-    // Test: Checkbox should have the correct value attribute
-    expect(innerCheckbox).toHaveAttribute('value', args.value);
-
-    // Additional tests for disabled state if needed
-    if (args.disabled) {
-      expect(innerCheckbox).toBeDisabled();
-    } else {
-      expect(innerCheckbox).not.toBeDisabled();
-    }
-  }
-};
-
-const TemplatewithChecked: StoryFn = ({ disabled, checked, label }) =>
-  html`
-    <div style="display:flex">
-      <rtg-checkbox
-        id="terms"
-        data-testid="checkbox-id"
-        ?disabled=${disabled}
-        ?checked=${checked}
-      ></rtg-checkbox>
-      <rtg-label style="margin:2px 0px 0px 4px" for="terms">${label}</rtg-label>
-    </div>
-  `;
-
-const TemplatewithRequired: StoryFn = ({
-  disabled,
-  checked,
-  label,
-  required,
-}) =>
-  html`
-    <div style="display: flex; flex-direction: column;">
-      <div style="display:flex">
-        <rtg-checkbox
-          id="terms"
-          data-testid="checkbox-id"
-          ?disabled=${disabled}
-          ?checked=${checked}
-          ?required=${required}
-          @click=${(e: Event) => {
-            const checkbox = e.target as HTMLInputElement;
-            const button = document.querySelector(
-              'rtg-button'
-            ) as HTMLButtonElement;
-            if (button) {
-              button.disabled = required ? !checkbox.checked : false;
-            }
-          }}
-        ></rtg-checkbox>
-        <rtg-label style="margin:2px 0px 0px 4px" for="terms"
-          >${label}</rtg-label
-        >
-      </div>
-      <div style="margin-top:16px">
-        <rtg-button
-          variant="default"
-          size="default"
-          data-testid="btn-id"
-          ?disabled=${required ? !checked : false}
-          .click=${mockOnClickHandler}
-          >Submit</rtg-button
-        >
-      </div>
-    </div>
-  `;
-
-const TemplateWithVlaue: StoryFn = ({ disabled, label, value }) =>
-  html`
-    <div style="display:flex">
-      <rtg-checkbox
-        id="terms"
-        data-testid="checkbox-id"
-        value=${value}
-        ?disabled=${disabled}
-      ></rtg-checkbox>
-      <rtg-label style="margin:2px 0px 0px 4px" for="terms">${label}</rtg-label>
-    </div>
-  `;
-
-export const CheckboxWithReuired = TemplatewithRequired.bind({});
-CheckboxWithReuired.args = {
-  disabled: false,
-  checked: false,
-  required: false,
-  label: 'Accept terms and conditions',
-};
-
-CheckboxWithReuired.parameters = {
-  docs: {
-    source: {
-      transform: (code: string, storyContext: StoryContext) => {
-        const args = storyContext.args;
-
-        // Handling boolean attributes: if true, render without value, if false, omit the attribute
-        const updatedCode = code
-          .replace(/disabled=""/g, 'disabled=true')
-          .replace(/checked=""/g, 'checked=true')
-          .replace(/required=""/g, 'required=true')
-          .replace(/disabled="false"/g, '')
-          .replace(/checked="false"/g, '')
-          .replace(/required="false"/g, '');
-
-        return updatedCode;
-      },
-    },
-  },
-};
-
-CheckboxWithReuired.argTypes = {
-  disabled: {
-    control: 'boolean',
-    description: 'Determines whether the checkbox is disabled (unclickable).',
-    table: {
-      defaultValue: { summary: 'false' },
-    },
-    docs: {
-      source: {
-        code: (args: { disabled: boolean }) => (args.disabled ? true : ''),
-      },
-    },
-  },
-  checked: {
-    control: 'boolean',
-    description: 'Specifies whether the checkbox is checked by default.',
-    table: {
-      defaultValue: { summary: 'false' },
-    },
-  },
-  required: {
-    control: 'boolean',
-    description:
-      'Marks the checkbox as a required field. When true, the checkbox must be checked for form submission, and related actions such as enabling a submit button are dependent on this state.',
-    table: {
-      defaultValue: { summary: 'false' },
-    },
-  },
-  label: {
-    control: 'text',
-    description:
-      'The text displayed next to the checkbox, describing its purpose.',
-  },
-};
-
-CheckboxWithReuired.play = async ({ args, canvasElement }) => {
-  await testCheckboxWithRequiredBehavior(
-    args as CheckboxWithRequiredArgs,
-    canvasElement
-  );
-};
-
-export const Checkbox = TemplatewithChecked.bind({});
-Checkbox.args = {
-  disabled: false,
-  checked: false,
-  label: 'Accept terms and conditions',
-};
-
-Checkbox.argTypes = {
-  disabled: {
-    control: 'boolean',
-  },
-  checked: {
-    control: 'boolean',
-  },
-  label: {
-    control: 'text',
-  },
-};
-
-Checkbox.play = async ({ args, canvasElement }) => {
-  await testCheckboxBehavior(args as CheckboxArgs, canvasElement);
-};
-
-export const CheckboxWithValue = TemplateWithVlaue.bind({});
-CheckboxWithValue.args = {
-  disabled: false,
-  value: 'off',
-  label: 'Accept terms and conditions',
-};
-
-CheckboxWithValue.argTypes = {
-  disabled: { control: 'boolean' },
-  value: {
-    control: { type: 'select' },
-    options: ['on', 'off'],
-  },
-  label: { control: 'text' },
-};
-
-CheckboxWithValue.play = async ({ args, canvasElement }) => {
-  await testCheckboxWithValueBehavior(
-    args as CheckboxWithValueArgs,
-    canvasElement
-  );
-};

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

@@ -1,5 +0,0 @@
-export const checkboxStyles =
-  'peer h-4 w-4 align-middle shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground';
-
-export const iconStyles =
-  'flex items-center justify-center text-current pointer-events-none';

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

@@ -1,24 +0,0 @@
-export type CheckboxProperties = {
-  disabled: boolean;
-  checked: boolean;
-};
-
-export type CheckboxArgs = {
-  disabled: boolean;
-  checked: boolean;
-  label: string;
-};
-
-export type CheckboxWithRequiredArgs = {
-  disabled: boolean;
-  checked: boolean;
-  required: boolean;
-  label: string;
-  value?: string;
-};
-
-export type CheckboxWithValueArgs = {
-  disabled: boolean;
-  value: string;
-  label: string;
-};

package/src/components/atoms/combo-box/combo-box-input.ts

@@ -1,33 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-
-@customElement('combo-box-input')
-export class ComboBoxInput extends LitElement {
-  @property({ type: String }) value = '';
-  @property({ type: Function }) handleClick = () => {};
-  @property({ type: Function }) handleKeyDown = () => {};
-
-  static styles = [css``, TWStyles];
-
-  render() {
-    return html`
-      <input
-        class="inline-flex justify-between items-center w-full h-10 px-4 py-2 whitespace-nowrap rounded-md 
-        text-sm font-medium border border-input cursor-pointer 
-        ring-offset-background 
-        transition-colors disabled:pointer-events-none 
-        disabled:opacity-50 
-        bg-background hover:bg-accent 
-        hover:text-accent-foreground 
-        outline-none"
-        role="combobox"
-        aria-expanded="false"
-        readonly="true"
-        .value=${this.value}
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-      />
-    `;
-  }
-}

package/src/components/atoms/combo-box/combo-box-item.ts

@@ -1,59 +0,0 @@
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { tickIcon } from '../../../assets/icons';
-import { TWStyles } from '../../../styles';
-
-@customElement('combo-box-item')
-export class ComboBoxItem extends LitElement {
-  @property({ type: String }) key = '';
-  @property({ type: String }) searchText = '';
-  @property({ type: String }) value = '';
-  @property({ type: Number }) tabindex = 0;
-  @property({ type: Boolean }) isSelected = false;
-  @property({ type: String }) class = '';
-  @property({ type: Function }) onSelect = () => {};
-
-  static styles = [css``, TWStyles];
-
-  render() {
-    console.log('this', this.class);
-    return html`
-      <div
-        key="${this.key}"
-        class="flex items-center cursor-pointer py-2 px-4 w-full text-sm text-gray-800 
-        rounded-lg 
-        hover:bg-gray-100
-        focus:outline-none 
-        focus:bg-gray-100 
-        dark:bg-neutral-900 
-        dark:hover:bg-neutral-800 
-        dark:text-neutral-200 
-        dark:focus:bg-neutral-800
-        ${this.class}
-        "
-        tabindex="${this.tabindex}"
-        aria-selected="${this.isSelected}"
-        data-selected="${this.isSelected}"
-        data-hs-combo-box-output-item=""
-        role="option"
-        @click="${this.onSelect}"
-      >
-        <span
-          class="${this.isSelected
-            ? 'visible'
-            : 'invisible'} hs-combo-box-selected:block mr-2"
-        >
-          ${tickIcon()}
-        </span>
-        <div class="flex justify-between items-center w-full">
-          <span
-            data-hs-combo-box-search-text="${this.searchText}"
-            data-hs-combo-box-value="${this.value}"
-          >
-            ${this.searchText}
-          </span>
-        </div>
-      </div>
-    `;
-  }
-}