npm - revotech-ui-kit - Versions diffs - 0.0.6-beta → 0.0.10 - Mend

revotech-ui-kit 0.0.6-beta → 0.0.10

Files changed (428) hide show

package/index.html DELETED Viewed

@@ -1,314 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-    />
-    <meta name="Description" content="Put your description here." />
-    <base href="/" />
-    <link href="./src/globals.css" rel="stylesheet" />
-    <link href="./src/tailwind-lib.css" rel="stylesheet" />
-    <script src="https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js"></script>
-    <style>
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-        background-color: white;
-      }
-    </style>
-    <title>rtg-web-ui-app</title>
-  </head>
-  <body>
-    <div class="container mx-auto my-10">
-      <h1 class="text-4xl text-center">Web Components</h1>
-      <h2 class="text-2xl text-center">Button</h2>
-    </div>
-    <div class="flex flex-wrap justify-between space-x-4 gap-5 mx-3">
-      <rtg-button>Primary</rtg-button>
-      <rtg-button variant="secondary">Secodary</rtg-button>
-      <rtg-button variant="destructive">Destructive</rtg-button>
-      <rtg-button variant="outline">Outline</rtg-button>
-      <rtg-button variant="ghost">Ghost</rtg-button>
-      <rtg-button variant="link">Link</rtg-button>
-      <rtg-button variant="outline" size="icon"
-        ><iconify-icon icon="mdi:home"></iconify-icon
-      ></rtg-button>
-      <rtg-button
-        ><iconify-icon class="mr-2" icon="mdi:home"></iconify-icon> Home
-        Page</rtg-button
-      >
-      <rtg-button disabled
-        ><iconify-icon class="mr-2 animate-spin" icon="mdi:home"></iconify-icon>
-        Home Page</rtg-button
-      >
-    </div>
-    <div class="container mx-auto my-10">
-      <h2 class="text-2xl text-center">Labels</h2>
-    </div>
-    <div class="flex items-center space-x-2 mx-2">
-      <rtg-checkbox id="terms"></rtg-checkbox>
-      <rtg-label for="terms">Accept terms and conditions</rtg-label>
-    </div>
-    <div class="container mx-auto my-10">
-      <h2 class="text-2xl text-center">Inputs</h2>
-    </div>
-    <div class="flex flex-wrap space-x-4 gap-5 mx-3">
-      <rtg-input type="email" placeholder="Email" class="min-w-80"></rtg-input>
-      <div class="grid w-full max-w-sm items-center gap-1.5 min-w-80">
-        <rtg-label for="picture">Picture</rtg-label>
-        <rtg-input id="picture" type="file" placeholder="file"></rtg-input>
-      </div>
-      <rtg-input
-        disabled
-        type="email"
-        placeholder="Email"
-        class="min-w-80"
-      ></rtg-input>
-      <div class="grid w-full max-w-sm items-center gap-1.5 min-w-80">
-        <rtg-label for="email">Email address</rtg-label>
-        <rtg-input id="email" type="email" placeholder="Email"> </rtg-input>
-      </div>
-      <div class="flex flex-nowrap w-full max-w-sm items-center space-x-2">
-        <rtg-input
-          id="email"
-          type="email"
-          placeholder="Email"
-          class="min-w-80"
-        ></rtg-input>
-        <rtg-button size="default" onclick="javascript:alert('Hello!')">Subscribe</rtg-button>
-      </div>
-    </div>
-    <div class="container mx-auto my-10">
-      <h2 class="text-2xl text-center">Command</h2>
-    </div>
-    <div class="flex flex-nowrap">
-      <div class="flex flex-wrap space-x-4 gap-5 mx-3">
-        <rtg-command class="w-full max-w-md">
-          <rtg-command-input placeholder="Search ...."></rtg-command-input>
-          <rtg-command-list>
-            <rtg-command-empty>No items found!</rtg-command-empty>
-            <rtg-command-group heading="Suggestions">
-              <rtg-command-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-command-item>
-              <rtg-command-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-command-item>
-              <rtg-command-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-command-item>
-            </rtg-command-group>
-            <rtg-command-separator></rtg-command-separator>
-            <rtg-command-group heading="Settings">
-              <rtg-command-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-command-item>
-              <rtg-command-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-command-item>
-              <rtg-command-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-command-item>
-            </rtg-command-group></rtg-command-list
-          >
-        </rtg-command>
-      </div>
-      </div>
-      <div class="container mx-auto my-10">
-        <h2 class="text-2xl text-center">Dialog</h2>
-      </div>
-      <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>
-      <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"
-              />
-            </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"
-              />
-            </div>
-          </div>
-          <rtg-dialog-footer>
-            <rtg-button type="submit" class="w-full sm:w-min">Save changes</rtg-button>
-        </rtg-dialog-content>
-      </rtg-dialog>
-      </div>
-      </div>
-    </div>
-    <script type="module" src="./src/components/atoms/alert/alert.atom.ts"></script>
-    <script type="module" src="./src/components/atoms/button/button.atom.ts"></script>
-    <script type="module" src="./src/components/atoms/card/card.atom.ts"></script>
-    <script type="module" src="./src/components/atoms/checkbox/checkbox.atom.ts"></script>
-    <script type="module" src="./src/components/atoms/dialog/dialog.atom.ts"></script>
-    <script type="module" src="./src/components/atoms/input/input.atom.ts"></script>
-    <script type="module" src="./src/components/atoms/label/label.atom.ts"></script>
-    <script type="module" src="./src/components/atoms/popover/popover.atom.ts"></script>
-    <!-- <script type="module" src="./dist/src/components/button/button.js"></script>
-    <script type="module" src="./dist/src/components/input/input.js"></script>
-    <script type="module" src="./dist/src/components/label/label.js"></script>
-    <script type="module" src="./dist/src/components/checkbox/checkbox.js"></script>
-    <script type="module" src="./dist/src/components/command/command.js"></script>
-    <script type="module" src="./dist/src/components/dialog/dialog.js"></script> -->
-  </body>
-</html>

package/rollup.config.js DELETED Viewed

@@ -1,83 +0,0 @@
-import nodeResolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import babel from '@rollup/plugin-babel';
-import html from '@web/rollup-plugin-html';
-import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
-import esbuild from 'rollup-plugin-esbuild';
-import { generateSW } from 'rollup-plugin-workbox';
-import serve from 'rollup-plugin-serve';
-import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
-import path from 'path';
-const isProd = process.env.NODE_ENV === 'production';
-export default {
-  input: 'src/index.ts', // Entry file for TypeScript
-  output: {
-    entryFileNames: '[hash].js',
-    chunkFileNames: '[hash].js',
-    assetFileNames: '[hash][extname]',
-    format: 'es',
-    dir: 'dist',
-  },
-  plugins: [
-    html({
-      minify: true,
-      injectServiceWorker: true,
-      serviceWorkerPath: 'dist/sw.js',
-    }),
-    nodeResolve(),
-    commonjs(),
-    esbuild({
-      minify: true,
-      target: ['chrome64', 'firefox67', 'safari11.1'],
-      include: /\.ts$/,
-    }),
-    importMetaAssets(),
-    babel({
-      babelHelpers: 'bundled',
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      plugins: [
-        [
-          require.resolve('babel-plugin-template-html-minifier'),
-          {
-            modules: { lit: ['html', { name: 'css', encapsulation: 'style' }] },
-            failOnError: false,
-            strictCSS: true,
-            htmlMinifier: {
-              collapseWhitespace: true,
-              conservativeCollapse: true,
-              removeComments: true,
-              caseSensitive: true,
-              minifyCSS: true,
-            },
-          },
-        ],
-      ],
-    }),
-    generateSW({
-      globIgnores: ['polyfills/*.js', 'nomodule-*.js'],
-      navigateFallback: '/index.html',
-      swDest: path.join('dist', 'sw.js'),
-      globDirectory: path.join('dist'),
-      globPatterns: ['**/*.{html,js,css,webmanifest}'],
-      skipWaiting: true,
-      clientsClaim: true,
-      runtimeCaching: [{ urlPattern: 'polyfills/*.js', handler: 'CacheFirst' }],
-    }),
-    !isProd &&
-      serve({
-        open: true,
-        contentBase: 'dist',
-        host: 'localhost',
-        port: 3000,
-        historyApiFallback: true, // Ensures SPA routing works
-      }),
-    !isProd && livereload('dist'),
-    isProd && terser(),
-  ],
-  watch: {
-    clearScreen: false,
-  },
-};

package/src/components/atoms/alert/alert-description.ts DELETED Viewed

@@ -1,15 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-@customElement('rtg-alert-description')
-export class AlertDescription extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-    }
-  `;
-  render() {
-    return html`<slot></slot>`;
-  }
-}

package/src/components/atoms/alert/alert-title.ts DELETED Viewed

@@ -1,17 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-@customElement('rtg-alert-title')
-export class AlertTitle extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      font-weight: bold;
-      margin-bottom: 0.5rem;
-    }
-  `;
-  render() {
-    return html`<slot></slot>`;
-  }
-}

package/src/components/atoms/alert/alert.stories.ts DELETED Viewed

@@ -1,71 +0,0 @@
-import { html } from 'lit';
-import { Meta, StoryObj } from '@storybook/web-components';
-import './alert.atom';
-import { Alert as AlertComponent } from './alert.atom';
-import { expect, within, waitFor } from '@storybook/test';
-const testAlertBehavior = async (args: any, canvasElement: any) => {
-  const canvas = within(canvasElement);
-  // 1. Test:Alert exits
-  const alert = await waitFor(() => canvas.getByTestId('alert-id'));
-  //2. Test: Alert should have correct variant
-  expect(alert).toHaveAttribute('variant', args.variant);
-  //3. Test: Alert should have correct size
-  expect(alert).toHaveAttribute('size', args.size);
-  if (alert.shadowRoot) {
-    const innerDiv = alert.shadowRoot.querySelector('div');
-    //4. Test: Alert should have correct class
-    const expectedClasses = AlertComponent.alertVairants({
-      variant: args.variant,
-      size: args.size,
-    });
-    expect(innerDiv).toHaveClass(`alert ${expectedClasses}`);
-  }
-};
-export default {
-  title: 'components/atoms/alert',
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['success', 'error', 'warning', 'info'],
-    },
-    size: {
-      control: 'select',
-      options: ['default', 'large', 'small'],
-    },
-    title: {
-      control: 'text',
-    },
-    message: {
-      control: 'text',
-    },
-  },
-} as Meta;
-type Story = StoryObj;
-export const AlertStory: Story = {
-  args: {
-    variant: 'info',
-    size: 'default',
-    title: 'Information',
-    message: 'This is an information message.',
-  },
-  render: ({ variant, size, message, title }) => html`
-    <rtg-alert data-testid="alert-id" variant=${variant} size=${size}>
-      <rtg-alert-title slot="title">${title}</rtg-alert-title>
-      <rtg-alert-description slot="description"
-        >${message}</rtg-alert-description
-      >
-    </rtg-alert>
-  `,
-  play: async ({ args, canvasElement }) => {
-    await testAlertBehavior(args, canvasElement);
-  },
-};

package/src/components/atoms/alert/alert.styles.ts DELETED Viewed

@@ -1,21 +0,0 @@
-import { cva } from 'class-variance-authority';
-export const alertStyle = cva('p-4 rounded-sm text-sm font-medium', {
-  variants: {
-    variant: {
-      success: 'bg-green-100 text-green-800 border-green-200',
-      error: 'bg-red-100 text-red-800 border-red-200',
-      warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',
-      info: 'bg-blue-100 text-blue-800 border-blue-200',
-    },
-    size: {
-      small: 'text-sm',
-      default: 'text-base',
-      large: 'text-xl',
-    },
-  },
-  defaultVariants: {
-    variant: 'info',
-    size: 'default',
-  },
-});

package/src/components/atoms/badge/badge.atom.ts DELETED Viewed

@@ -1,40 +0,0 @@
-import { html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { cn, BaseElement } from '../../../helpers';
-import { badgeStyle } from './badge.style';
-import { BadgeVariant } from './badge.type';
-import { TWStyles } from '../../../styles';
-import { spread } from '@open-wc/lit-helpers';
-@customElement('rtg-badge')
-export class Badge extends BaseElement {
-  static badgeVariants = badgeStyle;
-  @property({ type: String }) variant: BadgeVariant = 'default';
-  static styles = [css``, TWStyles];
-  protected getAttributesToExclude(): string[] {
-    return ['variant'];
-  }
-  render() {
-    const attributes = this.getFilteredAttributes();
-    return html`
-      <div
-        id="rtg-badge-id"
-        class="
-        ${cn(
-          Badge.badgeVariants({
-            variant: this.variant,
-            className: this.className,
-          })
-        )}"
-        ${spread(attributes)}
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-}