Introduce Chaos Refactor

v3xlabs · Feb 16, 2024 · 16dc048 · 16dc048
1 parent 10cdbcb
commit 16dc048
Show file tree

Hide file tree

Showing 23 changed files with 704 additions and 108 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules/
+.rollup.cache
diff --git a/packages/thorin-core/index.ts b/packages/thorin-core/index.ts
@@ -0,0 +1,11 @@
+export * from './src/avatar/index.js';
+export * from './src/button/index.js';
+export * from './src/connect-modal/index.js';
+export * from './src/label/index.js';
+export * from './src/modal/index.js';
+export * from './src/tag/index.js';
+import './index.js';
+
+export const hello = () => {
+    console.log('Thorin Design v0.0.1');
+};
diff --git a/packages/thorin-core/package.json b/packages/thorin-core/package.json
@@ -1,17 +1,24 @@
 {
     "name": "@ens-tools/thorin-core",
-    "version": "0.0.1",
-    "main": "dist/bundle.js",
-    "module": "dist/bundle.js",
-    "types": "dist/index.d.ts",
+    "version": "0.0.2",
     "type": "module",
+    "main": "./dist/esm/index.js",
+    "types": "./dist/types/index.d.ts",
+    "exports": {
+        ".": "./dist/esm/index.js",
+        "./style.css": "./dist/style.css"
+    },
+    "files": [
+        "dist",
+        "!tsconfig.tsbuildinfo"
+    ],
     "private": false,
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
     "scripts": {
-        "build": "rollup -c",
+        "build": "tsc --build && cp ./src/style.css ./dist/style.css",
         "lint": "eslint -c .eslintrc.json --ext .ts ./src"
     },
     "keywords": [],

diff --git a/packages/thorin-core/rollup.config.mjs b/packages/thorin-core/rollup.config.mjs
diff --git a/packages/thorin-core/src/avatar/index.ts b/packages/thorin-core/src/avatar/index.ts
@@ -5,7 +5,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 
 @customElement('thorin-avatar')
 export class ThorinAvatar extends LitElement {
-    static styles = css`
+    static override styles = css`
         :host {
             display: inline-flex;
             width: 48px;
@@ -69,7 +69,7 @@ export class ThorinAvatar extends LitElement {
     @state()
     private imgError: boolean = false;
 
-    render() {
+    override render() {
         const avatarUrl = `https://enstate.rs/i/${this.name}`;
 
         return html`

diff --git a/packages/thorin-core/src/button/index.ts b/packages/thorin-core/src/button/index.ts
@@ -23,101 +23,102 @@ type ButtonColorVariant =
 
 @customElement('thorin-button')
 export class ThorinButton extends LitElement {
-    static styles = css`
-        button.secondary {
+    static override styles = css`
+        .button.secondary {
             --bg: var(--thorin-blue-surface);
             --bg-hover: var(--thorin-blue-light);
             --color: var(--thorin-blue-dim);
             --color-hover: var(--thorin-blue-dim);
             --outline: var(--thorin-blue-light);
         }
-        button.error-secondary {
+        .button.error-secondary {
             --bg: var(--thorin-red-surface);
             --bg-hover: var(--thorin-red-light);
             --color: var(--thorin-red-dim);
             --color-hover: var(--thorin-red-dim);
             --outline: var(--thorin-red-light);
         }
-        button.subtle {
+        .button.subtle {
             --bg: var(--thorin-background-primary);
             --bg-hover: var(--thorin-background-secondary);
             --color: var(--thorin-text-secondary);
             --color-hover: var(--thorin-text-secondary);
             --outline: var(--thorin-border);
             --border: 1px solid var(--thorin-border);
         }
-        button.disabled {
+        .button.disabled {
             --bg: var(--thorin-background-disabled);
             --bg-hover: var(--thorin-background-disabled);
             --color: var(--thorin-text-secondary);
             --color-hover: var(--thorin-text-secondary);
             --outline: transparent;
             cursor: not-allowed;
         }
-        button.blue {
+        .button.blue {
             --bg: var(--thorin-blue-primary);
             --bg-hover: var(--thorin-blue-bright);
             --color: var(--thorin-text-accent);
             --color-hover: var(--thorin-text-accent);
             --outline: var(--thorin-blue-bright);
         }
-        button.indigo {
+        .button.indigo {
             --bg: var(--thorin-indigo-primary);
             --bg-hover: var(--thorin-indigo-bright);
             --color: var(--thorin-text-accent);
             --color-hover: var(--thorin-text-accent);
             --outline: var(--thorin-indigo-bright);
         }
-        button.purple {
+        .button.purple {
             --bg: var(--thorin-purple-primary);
             --bg-hover: var(--thorin-purple-bright);
             --color: var(--thorin-text-accent);
             --color-hover: var(--thorin-text-accent);
             --outline: var(--thorin-purple-bright);
         }
-        button.pink {
+        .button.pink {
             --bg: var(--thorin-pink-primary);
             --bg-hover: var(--thorin-pink-bright);
             --color: var(--thorin-text-accent);
             --color-hover: var(--thorin-text-accent);
             --outline: var(--thorin-pink-bright);
         }
-        button.red {
+        .button.red {
             --bg: var(--thorin-red-primary);
             --bg-hover: var(--thorin-red-bright);
             --color: var(--thorin-text-accent);
             --color-hover: var(--thorin-text-accent);
             --outline: var(--thorin-red-bright);
         }
-        button.orange {
+        .button.orange {
             --bg: var(--thorin-orange-primary);
             --bg-hover: var(--thorin-orange-bright);
             --color: var(--thorin-text-accent);
             --color-hover: var(--thorin-text-accent);
             --outline: var(--thorin-orange-bright);
         }
-        button.yellow {
+        .button.yellow {
             --bg: var(--thorin-yellow-primary);
             --bg-hover: var(--thorin-yellow-bright);
             --color: var(--thorin-text-accent);
             --color-hover: var(--thorin-text-accent);
             --outline: var(--thorin-yellow-bright);
         }
-        button.green {
+        .button.green {
             --bg: var(--thorin-green-primary);
             --bg-hover: var(--thorin-green-bright);
             --color: var(--thorin-text-accent);
             --color-hover: var(--thorin-text-accent);
             --outline: var(--thorin-green-bright);
         }
-        button.grey {
+        .button.grey {
             --bg: var(--thorin-grey-primary);
             --bg-hover: var(--thorin-grey-bright);
             --color: var(--thorin-text-accent);
             --color-hover: var(--thorin-text-accent);
             --outline: var(--thorin-grey-bright);
         }
-        button {
+        .button {
+            --border: 1px solid var(--bg);
             background: var(--bg);
             color: var(--color);
             display: flex;
@@ -131,17 +132,20 @@ export class ThorinButton extends LitElement {
             padding: 14px 16px;
             font-weight: bold;
             cursor: pointer;
+            margin: 0;
+            line-height: normal;
+            text-decoration: none;
         }
-        button.full {
+        .button.full {
             width: 100%;
         }
-        button:hover,
-        button:active {
+        .button:hover,
+        .button:active {
             background: var(--bg-hover);
             color: var(--color-hover);
             transform: translateY(-1px);
         }
-        button:focus {
+        .button:focus {
             box-shadow: 0 0 0 2px var(--thorin-background-primary),
                 0 0 0 5px var(--outline);
         }
@@ -156,21 +160,44 @@ export class ThorinButton extends LitElement {
     @property({ attribute: false })
     onClick: (_event: PointerEvent) => void = () => {};
 
-    render() {
-        return html`
-            <button
-                @click="${this._onClick}"
-                class="${this.computeClass()}"
-                ?disabled="${this.variant == 'disabled'}"
-            >
-                <slot></slot>
-            </button>
-        `;
+    @property({ type: String })
+    href: string | undefined;
+
+    @property({ type: String })
+    target: string | undefined;
+
+    override render() {
+        const content = html`<slot></slot>`;
+
+        return this.href
+            ? html`
+                  <a
+                      href="${this.href}"
+                      target="${this.target || '_self'}"
+                      class="${this.computeClass()}"
+                      ?disabled="${this.variant == 'disabled'}"
+                  >
+                      ${content}
+                  </a>
+              `
+            : html`
+                  <button
+                      class="${this.computeClass()}"
+                      @click="${this._onClick}"
+                      ?disabled="${this.variant == 'disabled'}"
+                  >
+                      ${content}
+                  </button>
+              `;
     }
 
     private computeClass() {
         return (
-            [this.width === 'full' ? 'full' : '', this.computeVariant()]
+            [
+                'button',
+                this.width === 'full' ? 'full' : '',
+                this.computeVariant(),
+            ]
                 .join(' ')
                 .trim() || ''
         );
@@ -200,3 +227,15 @@ declare global {
         'thorin-button': ThorinButton;
     }
 }
+
+// eslint-disable-next-line unused-imports/no-unused-vars
+declare namespace JSX {
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    interface IntrinsicElements {
+        'thorin-button': {
+            variant?: ButtonVariant;
+            onClick?: (_event: PointerEvent) => void;
+            // Add any other properties or attributes here
+        };
+    }
+}
diff --git a/packages/thorin-core/src/connect-modal/index.ts b/packages/thorin-core/src/connect-modal/index.ts
@@ -2,7 +2,7 @@
 /* eslint-disable sonarjs/no-identical-functions */
 /* eslint-disable unicorn/no-nested-ternary */
 import { walletConnect } from '@wagmi/connectors';
-import { Connector, createConfig, getConnectors, http } from '@wagmi/core';
+import { type Connector, createConfig, getConnectors, http } from '@wagmi/core';
 import { mainnet } from '@wagmi/core/chains';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -19,7 +19,7 @@ export class ThorinConnectModal extends LitElement {
     @property({ type: Boolean, reflect: true })
     open = false;
 
-    static styles = css`
+    static override styles = css`
         .button-list {
             display: flex;
             flex-direction: column;
@@ -76,7 +76,7 @@ export class ThorinConnectModal extends LitElement {
     @state()
     showQR: string | undefined = undefined;
 
-    firstUpdated() {
+    override firstUpdated() {
         const wc = walletConnect({
             projectId: 'b451d5ff25d61b3fde7b30f167a5a957',
             metadata: {
@@ -109,7 +109,7 @@ export class ThorinConnectModal extends LitElement {
         this.connectors = [...getConnectors(wagmiConfig), x];
     }
 
-    render() {
+    override render() {
         return html`
             <thorin-modal
                 ?open="${this.open}"

diff --git a/packages/thorin-core/src/index.ts b/packages/thorin-core/src/index.ts
diff --git a/packages/thorin-core/src/label/index.ts b/packages/thorin-core/src/label/index.ts
@@ -6,7 +6,7 @@ type LabelVariant = 'default' | 'active' | 'helper';
 
 @customElement('thorin-label')
 export class ThorinLabel extends LitElement {
-    static styles = css`
+    static override styles = css`
         .label.default {
             --color: var(--thorin-text-secondary);
             --border: 1px solid var(--thorin-border);
@@ -40,7 +40,7 @@ export class ThorinLabel extends LitElement {
     @property({ type: String })
     variant: LabelVariant = 'default';
 
-    render() {
+    override render() {
         return html`
             <span class="${this.computeClass}">
                 <slot></slot>
@@ -49,7 +49,7 @@ export class ThorinLabel extends LitElement {
     }
 
     private get computeClass() {
-        return ['label', this.variant].join(' ').trim() || undefined;
+        return ['label', this.variant].join(' ').trim() || '';
     }
 }