revotech-ui-kit 0.0.2 → 0.0.4-beta

package/src/tailwind-lib.css

@@ -1,5 +1,5 @@
 @font-face {
-  font-family: "GeistSans";
+  font-family: 'GeistSans';
   src: url('assets/fonts/Geist/Geist-Regular.woff2') format('woff2');
 }
 
@@ -7,8 +7,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -31,6 +29,18 @@
     --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 {
@@ -53,10 +63,21 @@
     --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;
@@ -73,7 +94,6 @@
     margin-top: 6px;
     margin-block-start: 6px;
   } */
-
 }
 
 @layer utilities {
@@ -92,4 +112,4 @@
   .container {
     @apply px-4;
   }
-}
+}

package/tailwind.config.js

@@ -1,81 +1,217 @@
 /* eslint-disable global-require */
-const { fontFamily } = require("tailwindcss/defaultTheme")
-
+const { fontFamily } = require('tailwindcss/defaultTheme');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
-  content: ["src/**/*.{ts,tsx}", "index.html"],
+  darkMode: ['class'],
+  content: ['src/**/*.{ts,tsx}', 'index.html'],
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
+        '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: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        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))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
         },
       },
       borderRadius: {
         lg: `var(--radius)`,
         md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
+        sm: 'calc(var(--radius) - 4px)',
+        full: '9999px',
       },
       fontFamily: {
-        sans: ["var(--font-sans)", ...fontFamily.sans],
-        geist: ["GeistSans", ...fontFamily.sans],
+        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-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+        '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",
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
-}
+  plugins: [require('tailwindcss-animate')],
+};

package/tsconfig.json

@@ -5,6 +5,8 @@
     "moduleResolution": "node",
     "noEmitOnError": true,
     "lib": ["es2017", "dom"],
+    "skipLibCheck": true,
+    "types": ["jest"],
     "strict": true,
     "allowArbitraryExtensions": false,
     "esModuleInterop": false,
@@ -21,5 +23,8 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["**/*.ts", "tailwind.config.js"]
+  "include": ["**/*.ts", "tailwind.config.js", 
+   "node_modules/@types/chai",
+  "node_modules/@types/mocha",
+  "node_modules/@types/jest"]
 }

package/src/components/popover.ts

@@ -1,247 +0,0 @@
-/* eslint-disable no-use-before-define */
-import {
-  LitElement,
-  html,
-  css,
-  nothing,
-  PropertyValues,
-  PropertyValueMap,
-  ReactiveControllerHost,
-} 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';
-
-class PopoverController {
-  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}`);
-    if (e.y < 100) {
-      const popover = (this.host as PopoverContent)?._popover;
-      if (popover && popover.state === STATE_OPEN) {
-        popover.state = STATE_CLOSED;
-      }
-    }
-    // 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();
-  };
-
-  _onResize = (e: UIEvent) => {
-    console.log(`resize: ${e.target}`);
-    console.log(`pos: ${window.innerWidth} ${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);
-    window.addEventListener('resize', this._onResize);
-  }
-
-  hostDisconnected() {
-    window.removeEventListener('mousemove', this._onMouseMove);
-    window.removeEventListener('click', this._onClick);
-    window.removeEventListener('scroll', this._onScroll);
-    window.removeEventListener('resize', this._onResize);
-  }
-}
-
-@customElement('rtg-popover')
-export class Popover extends LitElement {
-  static styles = [css``, TWStyles];
-
-  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
-
-  @property({ type: String }) align = 'center';
-
-  @property({ type: Number }) sideOffset = 0;
-
-  get _content(): PopoverContent | 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 PopoverContent) {
-          return children[index] as PopoverContent;
-        }
-      }
-    }
-
-    return null;
-  }
-
-  get _trigger(): PopoverTrigger | 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 PopoverTrigger) {
-          return children[index] as PopoverTrigger;
-        }
-      }
-    }
-
-    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 rtgpop-root>
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-@customElement('rtg-popover-content')
-export class PopoverContent extends LitElement {
-  static styles = [css``, TWStyles];
-
-  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
-
-  @property({ attribute: 'data-side', type: String }) side = 'bottom';
-
-  private controller = new PopoverController(this);
-
-  public get _popover(): Popover | null {
-    let parent = this.parentElement;
-
-    while (parent) {
-      if (parent instanceof Popover) {
-        return parent;
-      }
-      parent = parent.parentElement;
-    }
-    return parent;
-  }
-
-  public get _box(): DOMRect {
-    return this.firstElementChild!.getBoundingClientRect();
-  }
-
-  public get _triggerBox(): DOMRect {
-    return this._popover!._trigger!.getBoundingClientRect();
-  }
-
-  private handleCloseButtonClick = () => {
-    const popover = this._popover;
-    if (popover) {
-      popover.dataset.state = STATE_CLOSED;
-    }
-  };
-
-  render() {
-    let top = 0;
-    const box = this._box;
-    const triggerBox = this._triggerBox;
-    if (this.side === 'bottom') {
-      top = triggerBox.top + triggerBox.height;
-      if (top + box.height > window.innerHeight) {
-        top = triggerBox.top - box.height;
-      }
-    }
-
-    if (this.side === 'top') {
-      top = triggerBox.top - box.height;
-      if (top < 0) {
-        top = triggerBox.top + triggerBox.height;
-      }
-    }
-
-    return html`${this.state === STATE_OPEN
-      ? html`
-          <div
-            style="position: fixed; left: 0px; top: 0px; transform: translate(638px, ${top}px); min-width: max-content; --radix-popper-transform-origin: 50% 0px; z-index: 50; --radix-popper-available-width: ${window.innerWidth}px; --radix-popper-available-height: ${window.innerHeight}px; --radix-popper-anchor-width: 127.046875px; --radix-popper-anchor-height: 36px;"
-          >
-            <div
-              class="${cn(
-                'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-                this.className
-              )}"
-              rtgpop-content
-            >
-              <slot></slot>
-            </div>
-          </div>
-        `
-      : nothing}`;
-  }
-}
-
-@customElement('rtg-popover-trigger')
-export class PopoverTrigger extends LitElement {
-  static styles = [css``, TWStyles];
-
-  private get _popover(): Popover | null {
-    let parent = this.parentElement;
-
-    while (parent) {
-      if (parent instanceof Popover) {
-        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 popover = this._popover;
-        if (popover) {
-          popover._content!.dataset.side = 'top';
-          popover.dataset.state = STATE_OPEN;
-          popover.dataset.state = STATE_CLOSED;
-          popover.dataset.state = STATE_OPEN;
-        }
-      });
-    }
-  }
-
-  render() {
-    return html`
-      <div>
-        <slot></slot>
-      </div>
-    `;
-  }
-}