revotech-ui-kit 0.0.2 → 0.0.4-beta

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

@@ -1,29 +1,41 @@
 import { LitElement, html, css } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { cn } from '@/helpers';
+import { customElement, property } from 'lit/decorators.js';
+import { cn, BaseElement } from '../../../helpers';
 import { ButtonSize, ButtonType, ButtonVariant } from './button.type';
 import { buttonStyle } from './button.style';
-import { TWStyles } from '@/styles';
+import { TWStyles } from '../../../styles';
+import { spread } from '@open-wc/lit-helpers';
 
 @customElement('rtg-button')
-export class Button extends LitElement {
+export class Button extends BaseElement {
   static buttonVariants = buttonStyle;
 
+  @property({ type: Function }) click = () => {};
   @property({ type: Boolean }) disabled = false;
-
   @property({ type: String }) type: ButtonType = 'button';
-
   @property({ type: String }) variant: ButtonVariant = 'default';
-
   @property({ type: String }) size: ButtonSize = 'default';
 
   static styles = [css``, TWStyles];
 
+  private handleClick(e: MouseEvent) {
+    e.stopPropagation();
+    if (!this.disabled) {
+      this.click();
+    }
+  }
+
+  protected getAttributesToExclude(): string[] {
+    return ['click', 'disabled', 'type', 'variant', 'size', 'data-testid'];
+  }
+
   render() {
+    const attributes = this.getFilteredAttributes();
+
     return html`
       <button
         type="${this.type}"
-        ?disabled=${this.disabled}
+        ?disabled="${this.disabled}"
         class="${cn(
           Button.buttonVariants({
             variant: this.variant,
@@ -31,6 +43,8 @@ export class Button extends LitElement {
             className: this.className,
           })
         )}"
+        @click="${this.handleClick}"
+        ${spread(attributes)}
       >
         <slot></slot>
       </button>

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
-import { action } from '@storybook/addon-actions';
 import { html } from 'lit';
 import './button.atom';
+import { expect, within, fn, waitFor, userEvent } from '@storybook/test';
+import { Button } from './button.atom';
 
 const meta: Meta = {
   component: 'components/button',
@@ -19,168 +20,205 @@ const meta: Meta = {
         'ghost',
         'link',
       ],
+      defaultValue: 'default',
+      description: 'Choose the visual style of the button.',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
     },
     size: {
       control: {
         type: 'select',
       },
       options: ['default', 'sm', 'lg', 'icon'],
+      description: 'Choose the visual style of the button.',
+      defaultValue: 'default',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the button to prevent interactions.',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    label: {
+      control: 'text',
+      description:
+        'The text displayed on the button. Can also be a function returning the label dynamically.',
+      type: 'string',
+      table: {
+        defaultValue: { summary: 'Button' },
+      },
+    },
+    icon: {
+      control: 'boolean',
+      description: 'Add an icon before the button text.',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    animation: {
+      control: 'boolean',
+      description: 'Enable/disable icon animations.',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+      if: { arg: 'icon', neq: false },
+    },
+    click: {
+      action: '',
+      description:
+        'Triggered when the button is clicked. Receives the button instance as an argument.',
+      table: {
+        type: { summary: '(() => void)' },
+        defaultValue: { summary: '-' },
+      },
     },
-    disabled: { control: 'boolean' },
-    onClick: { action: 'button-click' },
   },
 };
-export default meta;
-type Story = StoryObj;
 
-const logger = () => {
-  console.log('Btn Clicked!');
-};
+const testButtonBehavior = async (
+  args: any,
+  canvasElement: any,
+  mockHandler: any
+) => {
+  const canvas = within(canvasElement);
+  const button = await waitFor(() => canvas.getByTestId('btn-id'));
 
-export const Default: Story = {
-  args: {
-    label: 'Default',
-    variant: 'default',
-    size: 'lg',
-    disabled: false,
-  },
+  if (button.shadowRoot) {
+    const innerButton = button.shadowRoot.querySelector(
+      '[data-testchild="children-id"]'
+    );
 
-  render: ({ label, variant, size, disabled }) =>
-    html`<rtg-button
-      .onClick=${action('button-click')}
-      variant=${variant}
-      size=${size}
-      ?disabled=${disabled}
-    >
-      ${label}</rtg-button
-    >`,
-};
+    // 1. Test: Button should have correct type attribute
+    expect(innerButton).toHaveAttribute('type', 'button');
 
-export const Primary: Story = {
-  args: {
-    label: 'Primary',
-    variant: 'default',
-    size: 'lg',
-    disabled: false,
-  },
-  render: ({ label, variant, size, disabled }) =>
-    html`<rtg-button
-      .onClick=${logger}
-      variant=${variant}
-      size=${size}
-      ?disabled=${disabled}
-      >${label}</rtg-button
-    > `,
-};
+    // 2. Test: Button should handle click events when not disabled
+    if (!args.disabled && innerButton) {
+      await userEvent.click(innerButton);
+      if (mockHandler) {
+        expect(mockHandler).toHaveBeenCalled();
+      }
+    }
 
-export const Destructive: Story = {
-  args: {
-    label: 'Destructive',
-    variant: 'destructive',
-    size: 'lg',
-    disabled: false,
-  },
-  render: ({ label, variant, size, disabled }) =>
-    html`<rtg-button
-      .onClick=${logger}
-      variant=${variant}
-      size=${size}
-      ?disabled=${disabled}
-      >${label}</rtg-button
-    > `,
-};
+    // 3. Test: Button should not handle click events when disabled
+    if (args.disabled) {
+      expect(mockHandler).not.toHaveBeenCalled();
+    }
 
-export const Outline: Story = {
-  args: {
-    label: 'Outline',
-    variant: 'outline',
-    size: 'lg',
-    disabled: false,
-  },
-  render: ({ label, variant, size, disabled }) =>
-    html`<rtg-button
-      .onClick=${logger}
-      variant=${variant}
-      size=${size}
-      ?disabled=${disabled}
-      >${label}</rtg-button
-    > `,
-};
+    // 4. Test: Button should be disabled when the `disabled` prop is true
+    if (args.disabled) {
+      expect(innerButton).toBeDisabled();
+    } else {
+      expect(innerButton).not.toBeDisabled();
+    }
 
-export const Ghost: Story = {
-  args: {
-    variant: 'ghost',
-    label: 'Ghost',
-    size: 'lg',
-    disabled: false,
-  },
-  render: ({ label, variant, size, disabled }) =>
-    html`<rtg-button
-      .onClick=${logger}
-      variant=${variant}
-      size=${size}
-      ?disabled=${disabled}
-      >${label}</rtg-button
-    > `,
-};
+    // 5. Test: Button should apply the correct variant classes
+    const expectedClasses = Button.buttonVariants({
+      variant: args.variant,
+      size: args.size,
+      className: '',
+    });
+    expect(innerButton).toHaveClass(expectedClasses);
 
-export const Link: Story = {
-  args: {
-    variant: 'link',
-    label: 'Link',
-    size: 'lg',
-    disabled: false,
-  },
-  render: ({ label, variant, size, disabled }) =>
-    html`<rtg-button
-      .onClick=${logger}
-      variant=${variant}
-      size=${size}
-      ?disabled=${disabled}
-      >${label}</rtg-button
-    > `,
+    // 6. Test: Button should apply the correct size classes
+    const expectedSizeClasses = Button.buttonVariants({
+      variant: args.variant,
+      size: args.size,
+      className: '',
+    });
+    expect(innerButton).toHaveClass(expectedSizeClasses);
+  }
 };
 
-export const IconButton: Story = {
-  args: {
-    variant: 'outline',
-    size: 'icon',
-    disabled: false,
-  },
-  render: ({ variant, size }) =>
-    html`<rtg-button .onClick=${logger} variant=${variant} size=${size}>
-      <iconify-icon icon="mdi:home"></iconify-icon>
-    </rtg-button> `,
-};
+export default meta;
+type Story = StoryObj;
+
+const mockOnClickHandler = fn(event => {
+  console.log('Mock onClick handler called');
+});
 
-export const ButtonWithIcon: Story = {
+export const Buttons: Story = {
   args: {
-    label: 'Home Page',
+    label: 'Button',
     variant: 'default',
     size: 'default',
     disabled: false,
+    icon: false,
+    animation: false,
   },
-  render: ({ variant, label, size, disabled }) =>
-    html`
-      <rtg-button varian=${variant} ?disabled=${disabled} size=${size}
-        ><iconify-icon class="mr-2" icon="mdi:home"></iconify-icon>
-        ${label}</rtg-button
-      >
-    `,
-};
-
-export const animationButton: Story = {
-  args: {
-    label: 'Home Page',
-    variant: 'default',
-    size: 'default',
-    disabled: true,
+  render: ({ label, variant, size, disabled, icon, animation }) => {
+    console.log('disabled', disabled);
+    if (disabled == true)
+      return html`
+        <rtg-button
+          method="post"
+          .click=${mockOnClickHandler}
+          data-testid="btn-id"
+          data-testchild="children-id"
+          variant=${variant}
+          size=${size}
+          disabled=${true}
+        >
+          ${icon
+            ? html`<iconify-icon
+                class=${animation
+                  ? `${label ? 'mr-2 ' : ' '}animate-spin`
+                  : `${label ? 'mr-2 ' : ''}`}
+                icon="mdi:home"
+              ></iconify-icon>`
+            : ''}
+          ${label}</rtg-button
+        >
+      `;
+    else if (disabled == false)
+      return html`
+        <rtg-button
+          method="post"
+          .click=${mockOnClickHandler}
+          data-testid="btn-id"
+          data-testchild="children-id"
+          variant=${variant}
+          size=${size}
+          ?disabled=${false}
+        >
+          ${icon
+            ? html`<iconify-icon
+                class=${animation
+                  ? `${label ? 'mr-2 ' : ' '}animate-spin`
+                  : `${label ? 'mr-2 ' : ''}`}
+                icon="mdi:home"
+              ></iconify-icon>`
+            : ''}
+          ${label}</rtg-button
+        >
+      `;
+    else
+      return html`
+        <rtg-button
+          method="post"
+          .click=${mockOnClickHandler}
+          data-testid="btn-id"
+          data-testchild="children-id"
+          variant=${variant}
+          size=${size}
+        >
+          ${icon
+            ? html`<iconify-icon
+                class=${animation
+                  ? `${label ? 'mr-2 ' : ' '}animate-spin`
+                  : `${label ? 'mr-2 ' : ''}`}
+                icon="mdi:home"
+              ></iconify-icon>`
+            : ''}
+          ${label}</rtg-button
+        >
+      `;
+  },
+  play: async ({ args, canvasElement }) => {
+    await testButtonBehavior(args, canvasElement, mockOnClickHandler);
   },
-  render: ({ variant, label, size, disabled }) =>
-    html`
-      <rtg-button varian=${variant} ?disabled=${disabled} size=${size}
-        ><iconify-icon class="mr-2 animate-spin" icon="mdi:home"></iconify-icon>
-        ${label}</rtg-button
-      >
-    `,
 };

package/src/components/atoms/card/card-content.ts

@@ -0,0 +1,15 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-card-content')
+export class CardContent extends LitElement {
+  static styles = [css``, TWStyles];
+
+
+  render() {
+    return html` 
+    <slot></slot>
+     `;
+  }
+}

package/src/components/atoms/card/card-description.ts

@@ -0,0 +1,15 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-card-description')
+export class CardDescription extends LitElement {
+  static styles = [css``, TWStyles];
+
+
+  render() {
+    return html`
+    <slot></slot>
+    `;
+  }
+}

package/src/components/atoms/card/card-footer.ts

@@ -0,0 +1,15 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-card-footer')
+export class CardFooter extends LitElement {
+  static styles = [css``, TWStyles];
+
+
+  render() {
+    return html`
+       <slot></slot> 
+    `;
+  }
+}

package/src/components/atoms/card/card-header.ts

@@ -0,0 +1,15 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-card-header')
+export class CardHeader extends LitElement {
+  static styles = [css``, TWStyles];
+
+
+  render() {
+    return html`
+    <slot></slot>
+   `;
+  }
+}

package/src/components/atoms/card/card-title.ts

@@ -0,0 +1,15 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-card-title')
+export class CardTitle extends LitElement {
+  static styles = [css``, TWStyles];
+
+
+  render() {
+    return html`
+    <slot></slot>
+    `;
+  }
+}

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

@@ -0,0 +1,31 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { CardTitle } from './card-title';
+import { CardHeader } from './card-header';
+import { CardFooter } from './card-footer';
+import { CardDescription } from './card-description';
+import { CardContent } from './card-content';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-card')
+class Card extends LitElement {
+  static styles = [css``, TWStyles];
+
+  render() {
+    return html`<div
+      class="rounded-lg border bg-card text-card-foreground shadow-sm p-6"
+      id="rtg-card-id"
+    >
+      <slot></slot>
+    </div>`;
+  }
+}
+
+export {
+  Card,
+  CardTitle,
+  CardHeader,
+  CardFooter,
+  CardDescription,
+  CardContent,
+};

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

@@ -0,0 +1,149 @@
+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);
+    }
+  },
+};