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

revotech-ui-kit 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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>
+    `;
+  }
+}