revotech-ui-kit 0.0.6-beta → 0.0.10

package/src/helpers/base-element.ts

@@ -1,79 +0,0 @@
-import { LitElement } from 'lit';
-
-export abstract class BaseElement extends LitElement {
-  constructor() {
-    super();
-  }
-
-  protected abstract getAttributesToExclude(): string[];
-
-  // Helper method to filter attributes based on exclusion rules
-  protected getFilteredAttributes(): { [key: string]: string } {
-    const attributes: { [key: string]: string } = {};
-    Array.from(this.attributes).forEach(attr => {
-      if (!this.getAttributesToExclude().includes(attr.name)) {
-        attributes[attr.name] = attr.value ?? '';
-      }
-    });
-    return attributes;
-  }
-  protected isCustomPropertySet(property: string): boolean {
-    const value = getComputedStyle(this).getPropertyValue(property).trim();
-    return value !== 'inherit' && value.length > 0;
-  }
-
-  protected applyCustomClass(
-    variables: string[],
-    selector: string,
-    className = ''
-  ): void {
-    let customClass = '';
-
-    if (variables.some(variable => this.isCustomPropertySet(variable))) {
-      customClass = className;
-    }
-    if (customClass)
-      this.shadowRoot?.querySelector(selector)?.classList.add(customClass);
-  }
-}
-
-// usage
-
-// import {
-//   html,
-//   PropertyValues,
-
-//  } from "lit";
-// import { customElement, property } from "lit/decorators.js";
-// import { TWStyles} from "../styles/shared-style";
-// import { BaseElement } from "./base-element";
-
-//  @customElement("biopass-label")
-// export class Label extends BaseElement {
-//   constructor() {
-//     super();
-//     this.attachShadow({mode: 'open'});
-//   }
-//   @property({ type: String }) customClass: string ="";
-//   static styles = [ TWStyles];
-
-//   protected firstUpdated(_changedProperties: PropertyValues): void {
-//     const variables = [
-//       "--button-bg-color",
-//       "--button-text-color",
-//       "--button-border-radius",
-//       "--button-padding"
-//     ];
-
-//     this.applyCustomClass(variables, "label","label-base");
-//   }
-//    render() {
-
-//     return html`
-//       <label class="text-3xl font-bold underline bg-secondary text-primary label-base">
-//         <slot></slot>
-//       </label>
-
-//     `;
-//   }
-// }

package/src/helpers/mouse-conroller.helper.ts

@@ -1,42 +0,0 @@
-import { ReactiveControllerHost } from 'lit';
-
-export class MouseController {
-  private host: ReactiveControllerHost;
-
-  pos = { x: 0, y: 0 };
-
-  _onMouseMove = ({ clientX, clientY }: MouseEvent) => {
-    this.pos = { x: clientX, y: clientY };
-    this.host.requestUpdate();
-  };
-
-  _onClick = (e: MouseEvent) => {
-    console.log(`click: ${e.target}`);
-    console.log(`pos: ${this.pos.x}`);
-    this.host.requestUpdate();
-  };
-
-  _onScroll = (e: Event) => {
-    console.log(`scroll: ${e.target}`);
-    console.log(`pos: ${this.pos.y}`);
-    console.log(`pos: ${window.scrollY} ${window.innerHeight}`);
-    this.host.requestUpdate();
-  };
-
-  constructor(host: ReactiveControllerHost) {
-    this.host = host;
-    host.addController(this);
-  }
-
-  hostConnected() {
-    window.addEventListener('mousemove', this._onMouseMove);
-    window.addEventListener('click', this._onClick);
-    window.addEventListener('scroll', this._onScroll);
-  }
-
-  hostDisconnected() {
-    window.removeEventListener('mousemove', this._onMouseMove);
-    window.removeEventListener('click', this._onClick);
-    window.removeEventListener('scroll', this._onScroll);
-  }
-}

package/src/helpers/style.helpers.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/src/index.d.ts

@@ -1 +0,0 @@
-declare module 'revotech-ui-kit';

package/src/index.ts

@@ -1 +0,0 @@
-export { Button } from './components/atoms/button/button.atom';

package/src/interfaces/actionable.interface.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-
-export type ActionableProps = Partial<{
-  onClick: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
-}>;

package/src/interfaces/atomic.interface.ts

@@ -1,6 +0,0 @@
-export type AtomicProps = Partial<{
-  id: string;
-  className: string;
-  name: string;
-  title: string;
-}>;

package/src/interfaces/intractable.interface.ts

@@ -1,6 +0,0 @@
-export type IntractableProps<T = string> = Partial<{
-  isDisabled: boolean;
-  isChecked: boolean;
-  isReadOnly: boolean;
-  type: T;
-}>;

package/src/tailwind-lib.css

@@ -1,115 +0,0 @@
-@font-face {
-  font-family: 'GeistSans';
-  src: url('assets/fonts/Geist/Geist-Regular.woff2') format('woff2');
-}
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-    --green-100: #d4f8e8;
-    --green-200: #bbf7d0;
-    --green-800: #166534;
-    --red-100: #fddddd;
-    --red-200: #fecaca;
-    --red-800: #991b1b;
-    --yellow-100: #fef4d9;
-    --yellow-200: #fef08a;
-    --yellow-800: #854d0e;
-    --blue-100: #dbeafe;
-    --blue-200: #bfdbfe;
-    --blue-800: #1e40af;
-  }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --green-100: #d4f8e8;
-    --green-200: #bbf7d0;
-    --green-800: #166534;
-    --red-100: #fddddd;
-    --red-200: #fecaca;
-    --red-800: #991b1b;
-    --yellow-100: #fef4d9;
-    --yellow-200: #fef08a;
-    --yellow-800: #854d0e;
-    --blue-100: #dbeafe;
-    --blue-200: #bfdbfe;
-    --blue-800: #1e40af;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-    @apply font-geist;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-    font-synthesis-weight: none;
-    text-rendering: optimizeLegibility;
-  }
-
-  /* p {
-    margin-top: 6px;
-    margin-block-start: 6px;
-  } */
-}
-
-@layer utilities {
-  .step {
-    counter-increment: step;
-  }
-
-  .step:before {
-    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
-    @apply ml-[-50px] mt-[-4px];
-    content: counter(step);
-  }
-}
-
-@media (max-width: 640px) {
-  .container {
-    @apply px-4;
-  }
-}

package/tailwind.config.js

@@ -1,217 +0,0 @@
-/* eslint-disable global-require */
-const { fontFamily } = require('tailwindcss/defaultTheme');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ['class'],
-  content: ['src/**/*.{ts,tsx}', 'index.html'],
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-    },
-    extend: {
-      transform: {
-        translateY: [
-          '0',
-          '0.25rem',
-          '0.5rem',
-          '0.75rem',
-          '1rem',
-          '1.25rem',
-          '1.5rem',
-          '2rem',
-        ],
-        translateX: [
-          '0',
-          '0.25rem',
-          '0.5rem',
-          '0.75rem',
-          '1rem',
-          '1.25rem',
-          '1.5rem',
-          '2rem',
-        ],
-      },
-      spacing: {
-        1: '0.25rem',
-        2: '0.5rem',
-        3: '0.75rem',
-        4: '1rem',
-        5: '1.25rem',
-        6: '1.5rem',
-        8: '2rem',
-        10: '2.5rem',
-        12: '3rem',
-        14: '3.5rem',
-        16: '4rem',
-        20: '5rem',
-        24: '6rem',
-        28: '7rem',
-        32: '8rem',
-        36: '9rem',
-        40: '10rem',
-        44: '11rem',
-        48: '12rem',
-        52: '13rem',
-        56: '14rem',
-        60: '15rem',
-        64: '16rem',
-        72: '18rem',
-        80: '20rem',
-        96: '24rem',
-        112: '28rem',
-        128: '32rem',
-      },
-      padding: {
-        0: '0',
-        '1/2': '0.125rem',
-        1: '0.25rem',
-        2: '0.5rem',
-        3: '0.75rem',
-        4: '1rem',
-        5: '1.25rem',
-        6: '1.5rem',
-        8: '2rem',
-        10: '2.5rem',
-        12: '3rem',
-        14: '3.5rem',
-        16: '4rem',
-        20: '5rem',
-        24: '6rem',
-        28: '7rem',
-        32: '8rem',
-        36: '9rem',
-        40: '10rem',
-        44: '11rem',
-        48: '12rem',
-        52: '13rem',
-        56: '14rem',
-        60: '15rem',
-        64: '16rem',
-        72: '18rem',
-        80: '20rem',
-        96: '24rem',
-        112: '28rem',
-        128: '32rem',
-      },
-      margin: {
-        0: '0',
-        '1/2': '0.125rem',
-        1: '0.25rem',
-        2: '0.5rem',
-        3: '0.75rem',
-        4: '1rem',
-        5: '1.25rem',
-        6: '1.5rem',
-        8: '2rem',
-        10: '2.5rem',
-        12: '3rem',
-        14: '3.5rem',
-        16: '4rem',
-        20: '5rem',
-        24: '6rem',
-        28: '7rem',
-        32: '8rem',
-        36: '9rem',
-        40: '10rem',
-        44: '11rem',
-        48: '12rem',
-        52: '13rem',
-        56: '14rem',
-        60: '15rem',
-        64: '16rem',
-        72: '18rem',
-        80: '20rem',
-        96: '24rem',
-        112: '28rem',
-        128: '32rem',
-      },
-      colors: {
-        green: {
-          100: 'var(--green-100)',
-          200: 'var(--green-200)',
-          800: 'var(--green-800)',
-        },
-        red: {
-          100: 'var(--red-100)',
-          200: 'var(--red-200)',
-          800: 'var(--red-800)',
-        },
-        yellow: {
-          100: 'var(--yellow-100)',
-          200: 'var(--yellow-200)',
-          800: 'var(--yellow-800)',
-        },
-        blue: {
-          100: 'var(--blue-100)',
-          200: 'var(--blue-200)',
-          800: 'var(--blue-800)',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-      },
-      borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: 'calc(var(--radius) - 4px)',
-        full: '9999px',
-      },
-      fontFamily: {
-        sans: ['var(--font-sans)', ...fontFamily.sans],
-        geist: ['GeistSans', ...fontFamily.sans],
-        // serif: ["var(--font-serif)", ...fontFamily.serif],
-        // mono: ["var(--font-mono)", ...fontFamily.mono],
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-};

package/test/wc-ui-app.test.ts

@@ -1,22 +0,0 @@
-import { html } from 'lit';
-import { fixture, expect } from '@open-wc/testing';
-
-import type { WcUiApp } from '../src/wc-ui-app.js';
-import '../src/wc-ui-app.js';
-
-describe('WcUiApp', () => {
-  let element: WcUiApp;
-  beforeEach(async () => {
-    element = await fixture(html`<wc-ui-app></wc-ui-app>`);
-  });
-
-  it('renders a h1', () => {
-    const h1 = element.shadowRoot!.querySelector('h1')!;
-    expect(h1).to.exist;
-    expect(h1.textContent).to.equal('My app');
-  });
-
-  it('passes the a11y audit', async () => {
-    await expect(element).shadowDom.to.be.accessible();
-  });
-});

package/tsconfig.json

@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "skipLibCheck": true,
-    "types": ["jest"],
-    "strict": true,
-    "allowArbitraryExtensions": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "incremental": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["**/*.ts", "tailwind.config.js", 
-   "node_modules/@types/chai",
-  "node_modules/@types/mocha",
-  "node_modules/@types/jest"]
-}

package/web-dev-server.config.mjs

@@ -1,26 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/',
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-  
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  appIndex: './index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});