From 16dc04805b8e5a842ccb3f52f7407cd489d45bc9 Mon Sep 17 00:00:00 2001 From: Luc Date: Fri, 16 Feb 2024 00:27:13 +0000 Subject: [PATCH] Introduce Chaos Refactor --- .gitignore | 1 + packages/thorin-core/index.ts | 11 + packages/thorin-core/package.json | 17 +- packages/thorin-core/rollup.config.mjs | 25 -- packages/thorin-core/src/avatar/index.ts | 4 +- packages/thorin-core/src/button/index.ts | 99 +++-- .../thorin-core/src/connect-modal/index.ts | 8 +- packages/thorin-core/src/index.ts | 10 - packages/thorin-core/src/label/index.ts | 6 +- packages/thorin-core/src/modal/index.ts | 8 +- packages/thorin-core/src/tag/index.ts | 20 +- packages/thorin-core/tsconfig.json | 26 +- packages/thorin-react/.eslintrc.json | 22 ++ packages/thorin-react/.gitignore | 3 + packages/thorin-react/.prettierrc | 5 + packages/thorin-react/index.ts | 10 + packages/thorin-react/package.json | 49 +++ packages/thorin-react/pnpm-lock.yaml | 48 +++ packages/thorin-react/src/button/index.ts | 27 ++ packages/thorin-react/src/tag/index.ts | 1 + packages/thorin-react/tsconfig.json | 9 + pnpm-lock.yaml | 364 +++++++++++++++++- tsconfig.json | 39 ++ 23 files changed, 704 insertions(+), 108 deletions(-) create mode 100644 packages/thorin-core/index.ts delete mode 100644 packages/thorin-core/rollup.config.mjs delete mode 100644 packages/thorin-core/src/index.ts create mode 100644 packages/thorin-react/.eslintrc.json create mode 100644 packages/thorin-react/.gitignore create mode 100644 packages/thorin-react/.prettierrc create mode 100644 packages/thorin-react/index.ts create mode 100644 packages/thorin-react/package.json create mode 100644 packages/thorin-react/pnpm-lock.yaml create mode 100644 packages/thorin-react/src/button/index.ts create mode 100644 packages/thorin-react/src/tag/index.ts create mode 100644 packages/thorin-react/tsconfig.json create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore index c2658d7..74fa060 100644 --- 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 new file mode 100644 index 0000000..75f29ee --- /dev/null +++ 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 index de2df5a..9d4c47c 100644 --- 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 deleted file mode 100644 index 8658535..0000000 --- a/packages/thorin-core/rollup.config.mjs +++ /dev/null @@ -1,25 +0,0 @@ -import commonjs from '@rollup/plugin-commonjs'; -import { nodeResolve } from '@rollup/plugin-node-resolve'; -import typescript from '@rollup/plugin-typescript'; -import copy from 'rollup-plugin-copy'; -import peerDepsExternal from 'rollup-plugin-peer-deps-external'; - -export default { - input: 'src/index.ts', - output: [ - { - file: 'dist/bundle.js', - format: 'esm', - sourcemap: true, - }, - ], - plugins: [ - peerDepsExternal(), - nodeResolve(), - commonjs(), - typescript(), - copy({ - targets: [{ src: 'src/style.css', dest: 'dist' }], - }), - ], -}; diff --git a/packages/thorin-core/src/avatar/index.ts b/packages/thorin-core/src/avatar/index.ts index e964fbe..bb18b73 100644 --- 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 index 6864f4b..7e99397 100644 --- a/packages/thorin-core/src/button/index.ts +++ b/packages/thorin-core/src/button/index.ts @@ -23,22 +23,22 @@ 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); @@ -46,7 +46,7 @@ export class ThorinButton extends LitElement { --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); @@ -54,70 +54,71 @@ export class ThorinButton extends LitElement { --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` - - `; + @property({ type: String }) + href: string | undefined; + + @property({ type: String }) + target: string | undefined; + + override render() { + const content = html``; + + return this.href + ? html` + + ${content} + + ` + : html` + + `; } 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 index 2193074..48b05ac 100644 --- 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` { - console.log('Thorin Design v0.0.1'); -}; diff --git a/packages/thorin-core/src/label/index.ts b/packages/thorin-core/src/label/index.ts index 1735113..60e1387 100644 --- 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` @@ -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() || ''; } } diff --git a/packages/thorin-core/src/modal/index.ts b/packages/thorin-core/src/modal/index.ts index bfaff68..c7d2478 100644 --- a/packages/thorin-core/src/modal/index.ts +++ b/packages/thorin-core/src/modal/index.ts @@ -12,7 +12,7 @@ export class ThorinModal extends LitElement { @property({ type: Boolean }) closeOnRequest = true; - static styles = css` + static override styles = css` :host { display: none; position: fixed; @@ -120,10 +120,10 @@ export class ThorinModal extends LitElement { } `; - render() { + override render() { return html`