npm - revotech-ui-kit - Versions diffs - 0.0.0 - Mend

revotech-ui-kit 0.0.0

Files changed (82) hide show

package/.editorconfig +29 -0
package/.eslintrc +10 -0
package/.storybook/main.ts +17 -0
package/.storybook/preview-head.html +1 -0
package/.storybook/preview.ts +17 -0
package/LICENSE +21 -0
package/README.md +30 -0
package/assets/fonts/Geist/Geist-Black.otf +0 -0
package/assets/fonts/Geist/Geist-Black.woff2 +0 -0
package/assets/fonts/Geist/Geist-Bold.otf +0 -0
package/assets/fonts/Geist/Geist-Bold.woff2 +0 -0
package/assets/fonts/Geist/Geist-Light.otf +0 -0
package/assets/fonts/Geist/Geist-Light.woff2 +0 -0
package/assets/fonts/Geist/Geist-Medium.otf +0 -0
package/assets/fonts/Geist/Geist-Medium.woff2 +0 -0
package/assets/fonts/Geist/Geist-Regular.otf +0 -0
package/assets/fonts/Geist/Geist-Regular.woff2 +0 -0
package/assets/fonts/Geist/Geist-SemiBold.otf +0 -0
package/assets/fonts/Geist/Geist-SemiBold.woff2 +0 -0
package/assets/fonts/Geist/Geist-Thin.otf +0 -0
package/assets/fonts/Geist/Geist-Thin.woff2 +0 -0
package/assets/fonts/Geist/Geist-UltraBlack.otf +0 -0
package/assets/fonts/Geist/Geist-UltraBlack.woff2 +0 -0
package/assets/fonts/Geist/Geist-UltraLight.otf +0 -0
package/assets/fonts/Geist/Geist-UltraLight.woff2 +0 -0
package/assets/fonts/Geist/GeistVariableVF.ttf +0 -0
package/assets/fonts/Geist/GeistVariableVF.woff2 +0 -0
package/assets/fonts/Geist/LICENSE.TXT +92 -0
package/assets/open-wc-logo.svg +29 -0
package/index.html +362 -0
package/package.json +117 -0
package/rollup.config.js +71 -0
package/src/components/atoms/button/button.atom.ts +39 -0
package/src/components/atoms/button/button.stories.ts +186 -0
package/src/components/atoms/button/button.style.ts +31 -0
package/src/components/atoms/button/button.type.ts +10 -0
package/src/components/atoms/checkbox/checkbox.atom.ts +62 -0
package/src/components/atoms/checkbox/checkbox.stories.ts +42 -0
package/src/components/atoms/command-empty/command-empty.atom.ts +44 -0
package/src/components/atoms/command-group/command-group.atom.ts +60 -0
package/src/components/atoms/command-item/command-item.atom.ts +74 -0
package/src/components/atoms/command-list/command-list.atom.ts +37 -0
package/src/components/atoms/command-separator/command-separator.atom.ts +42 -0
package/src/components/atoms/dialog/dialog.atom.ts +301 -0
package/src/components/atoms/dialog/dialog.stories.ts +86 -0
package/src/components/atoms/index.ts +10 -0
package/src/components/atoms/input/input.atom.ts +34 -0
package/src/components/atoms/input/input.stories.ts +89 -0
package/src/components/atoms/input/input.type.ts +24 -0
package/src/components/atoms/label/label.atom.ts +40 -0
package/src/components/atoms/label/label.stories.ts +18 -0
package/src/components/atoms/label/label.style.ts +5 -0
package/src/components/command/command.stories.ts +154 -0
package/src/components/command/command.ts +391 -0
package/src/components/index.ts +2 -0
package/src/components/molecules/command/command.molecules.ts +31 -0
package/src/components/molecules/command-input/command-input.atom.ts +130 -0
package/src/components/molecules/index.ts +1 -0
package/src/components/popover.ts +247 -0
package/src/globals.css +1806 -0
package/src/helpers/index.ts +2 -0
package/src/helpers/mouse-conroller.helper.ts +42 -0
package/src/helpers/style.helpers.ts +6 -0
package/src/interfaces/actionable.interface.ts +6 -0
package/src/interfaces/atomic.interface.ts +6 -0
package/src/interfaces/changeable.interface.ts +14 -0
package/src/interfaces/child-support-atomic.interface.ts +5 -0
package/src/interfaces/index.ts +6 -0
package/src/interfaces/intractable.interface.ts +6 -0
package/src/interfaces/variant.interface.ts +3 -0
package/src/lib/index.ts +0 -0
package/src/lib/next/next.lib.ts +0 -0
package/src/lib/react/react.lib.ts +0 -0
package/src/styles/index.ts +1 -0
package/src/styles/tw.styles.ts +1867 -0
package/src/tailwind-lib.css +95 -0
package/src/wc-ui-app.ts +81 -0
package/tailwind.config.js +81 -0
package/test/wc-ui-app.test.ts +22 -0
package/tsconfig.json +25 -0
package/web-dev-server.config.mjs +26 -0
package/web-test-runner.config.mjs +41 -0

package/index.html ADDED Viewed

@@ -0,0 +1,362 @@
+<!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" />
+    <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>wc-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 justify-center">
+      <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 justify-center">
+      <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 justify-center">
+        <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 class="container mx-auto my-10">
+        <h2 class="text-2xl text-center">Popover</h2>
+      </div>
+      <div class="flex flex-nowrap justify-center">
+        <div class="flex flex-wrap space-x-4 gap-5 mx-3">
+      <rtg-popover>
+        <rtg-popover-trigger>
+          <rtg-button variant="outline">Open Popover</rtg-button>
+        </rtg-popover-trigger>
+        <rtg-popover-content class="w-80">
+          <div class="grid gap-4">
+            <div class="space-y-2">
+              <h4 class="font-medium leading-none">Dimensions</h4>
+              <p class="text-sm text-muted-foreground">
+                Set the dimensions for the layer.
+              </p>
+            </div>
+            <div class="grid gap-2">
+              <div class="grid grid-cols-3 items-center gap-4">
+                <rtg-label for="width">Width</rtg-label>
+                <rtg-input
+                  id="width"
+                  defaultValue="100%"
+                  class="col-span-2 h-8"
+                />
+              </div>
+              <div class="grid grid-cols-3 items-center gap-4">
+                <rtg-label for="maxWidth">Max. width</rtg-label>
+                <rtg-input
+                  id="maxWidth"
+                  defaultValue="300px"
+                  class="col-span-2 h-8"
+                />
+              </div>
+              <div class="grid grid-cols-3 items-center gap-4">
+                <rtg-label htmlFor="height">Height</rtg-label>
+                <rtg-input
+                  id="height"
+                  defaultValue="25px"
+                  class="col-span-2 h-8"
+                />
+              </div>
+              <div class="grid grid-cols-3 items-center gap-4">
+                <rtg-label htmlFor="maxHeight">Max. height</rtg-label>
+                <rtg-input
+                  id="maxHeight"
+                  defaultValue="none"
+                  class="col-span-2 h-8"
+                />
+              </div>
+            </div>
+          </div>
+        </rtg-popover-content>
+      </rtg-popover>
+      </div>
+      </div>
+      <div class="h-9"></div>
+    </div>
+    <script type="module" src="./dist/src/wc-ui-app.js"></script>
+    <script type="module" src="./dist/src/components/"></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/package.json ADDED Viewed

@@ -0,0 +1,117 @@
+{
+  "name": "revotech-ui-kit",
+  "description": "Webcomponent wc-ui following open-wc recommendations",
+  "license": "MIT",
+  "author": "wc-ui",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "clean": "rimraf dist",
+    "copy-files": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.js dist/public/",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook",
+    "build": "npm run clean && tsc && rollup -c rollup.config.js && npm run copy-files && npm run analyze -- --exclude dist",
+    "start:build": "web-dev-server --root-dir dist --app-index index.html --open",
+    "analyze": "cem analyze --litelement",
+    "start": "npm run clean && tsc && npm run copy-files && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "tw:watch": "concurrently \"tailwindcss -i ./src/tailwind-lib.css -o ./src/globals.css --watch\" \"twlit --input ./src/globals.css --output ./src/lib/tw-styles.ts \""
+  },
+  "dependencies": {
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/web-components": "^8.0.0",
+    "@storybook/web-components-vite": "^8.0.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lit": "^3.1.2",
+    "storybook": "^8.0.0",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.16.4",
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@open-wc/building-rollup": "^2.0.2",
+    "@open-wc/eslint-config": "^9.2.1",
+    "@open-wc/testing": "^3.1.6",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@storybook/builder-vite": "^8.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "@web/dev-server": "^0.1.34",
+    "@web/dev-server-storybook": "^0.5.4",
+    "@web/rollup-plugin-html": "^1.11.0",
+    "@web/rollup-plugin-import-meta-assets": "^1.0.7",
+    "@web/test-runner": "^0.14.0",
+    "babel-plugin-template-html-minifier": "^4.1.0",
+    "concurrently": "^5.3.0",
+    "copyfiles": "^2.4.1",
+    "deepmerge": "^4.2.2",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^9.1.4",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.60.0",
+    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-workbox": "^6.2.0",
+    "tailwindcss": "^3.4.1",
+    "tslib": "^2.3.1",
+    "twlit": "^0.0.1-alpha.37",
+    "typescript": "^5.3.3"
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ],
+      "max-classes-per-file": [
+        "error",
+        {
+          "ignoreExpressions": true,
+          "max": 10
+        }
+      ],
+      "no-plusplus": "off"
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "customElements": "custom-elements.json"
+}

package/rollup.config.js ADDED Viewed

@@ -0,0 +1,71 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
+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 path from 'path';
+export default {
+  input: 'index.html',
+  output: {
+    entryFileNames: '[hash].js',
+    chunkFileNames: '[hash].js',
+    assetFileNames: '[hash][extname]',
+    format: 'es',
+    dir: 'dist',
+  },
+  preserveEntrySignatures: false,
+  plugins: [
+    /** Enable using HTML as rollup entrypoint */
+    html({
+      minify: true,
+      injectServiceWorker: true,
+      serviceWorkerPath: 'dist/sw.js',
+    }),
+    /** Resolve bare module imports */
+    nodeResolve(),
+    /** Minify JS, compile JS to a lower language target */
+    esbuild({
+      minify: true,
+      target: ['chrome64', 'firefox67', 'safari11.1'],
+    }),
+    /** Bundle assets references via import.meta.url */
+    importMetaAssets(),
+    /** Minify html and css tagged template literals */
+    babel({
+      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,
+            },
+          },
+        ],
+      ],
+    }),
+    /** Create and inject a service worker */
+    generateSW({
+      globIgnores: ['polyfills/*.js', 'nomodule-*.js'],
+      navigateFallback: '/index.html',
+      // where to output the generated sw
+      swDest: path.join('dist', 'sw.js'),
+      // directory to match patterns against to be precached
+      globDirectory: path.join('dist'),
+      // cache any html js and css by default
+      globPatterns: ['**/*.{html,js,css,webmanifest}'],
+      skipWaiting: true,
+      clientsClaim: true,
+      runtimeCaching: [{ urlPattern: 'polyfills/*.js', handler: 'CacheFirst' }],
+    }),
+  ],
+};

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

@@ -0,0 +1,39 @@
+import { LitElement, html, css } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { cn } from '@/helpers';
+import { ButtonSize, ButtonType, ButtonVariant } from './button.type';
+import { buttonStyle } from './button.style';
+import { TWStyles } from '@/styles';
+@customElement('rtg-button')
+export class Button extends LitElement {
+  static buttonVariants = buttonStyle;
+  @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];
+  render() {
+    return html`
+      <button
+        type="${this.type}"
+        ?disabled=${this.disabled}
+        class="${cn(
+          Button.buttonVariants({
+            variant: this.variant,
+            size: this.size,
+            className: this.className,
+          })
+        )}"
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}