diff --git a/packages/react/__unused_preset.shadcn.ts b/packages/react/__unused_preset.shadcn.ts deleted file mode 100644 index cb3a066be..000000000 --- a/packages/react/__unused_preset.shadcn.ts +++ /dev/null @@ -1,98 +0,0 @@ -import { h, variantGetParameter } from '@unocss/preset-mini/utils' -import type { Preset, VariantContext, VariantObject } from 'unocss' -import type { PresetMiniOptions, Theme } from 'unocss/preset-mini' - -export interface PresetShadcnOptions extends PresetMiniOptions { } - -const variantGroupDataAttribute: VariantObject = { - name: 'group-data', - match(matcher, ctx: VariantContext) { - const variant = variantGetParameter('group-data-', matcher, ctx.generator.config.separators) - if (variant) { - const [match, rest] = variant - const dataAttribute = h.bracket(match) ?? ctx.theme.data?.[match] ?? '' - if (dataAttribute) { - return { - matcher: `group-[[data-${dataAttribute}]]:${rest}`, - } - } - } - }, -} - -const handleMatchNumber = (v: string, defaultVal = '0') => - h.bracket.cssvar.global.auto.fraction.number(v || defaultVal)?.replace('%', '') -const handleMatchRem = (v: string, defaultVal = 'full') => h.bracket.cssvar.global.auto.fraction.rem(v || defaultVal) - -export function presetShadcn(options: PresetShadcnOptions = {}): Preset { - return { - name: 'unocss-preset-shadcn', - preflights: [ - { - getCSS: () => ` - @keyframes shadcn-down { from{ height: 0 } to { height: var(--radix-accordion-content-height)} } - @keyframes shadcn-up { from{ height: var(--radix-accordion-content-height)} to { height: 0 } } - @keyframes shadcn-enter { from{ opacity: var(--un-enter-opacity, 1); transform: translate3d(var(--un-enter-translate-x, 0), var(--un-enter-translate-y, 0), 0) scale3d(var(--un-enter-scale, 1), var(--un-enter-scale, 1), var(--un-enter-scale, 1)) rotate(var(--un-enter-rotate, 0)) } } - @keyframes shadcn-exit { to{ opacity: var(--un-exit-opacity, 1); transform: translate3d(var(--un-exit-translate-x, 0), var(--un-exit-translate-y, 0), 0) scale3d(var(--un-exit-scale, 1), var(--un-exit-scale, 1), var(--un-exit-scale, 1)) rotate(var(--un-exit-rotate, 0)) } } - `, - }, - ], - variants: [variantGroupDataAttribute.match], - rules: [ - [ - 'accordion-down', - { - animation: 'shadcn-down 0.2s ease-out', - }, - ], - [ - 'accordion-up', - { - animation: 'shadcn-up 0.2s ease-out', - }, - ], - [ - 'animate-in', - { - 'animation-name': 'shadcn-enter', - 'animation-duration': 'var(--un-animate-duration)', - '--un-animate-duration': '150ms', - '--un-enter-opacity': 'initial', - '--un-enter-scale': 'initial', - '--un-enter-rotate': 'initial', - '--un-enter-translate-x': 'initial', - '--un-enter-translate-y': 'initial', - }, - ], - [ - 'animate-out', - { - 'animation-name': 'shadcn-exit', - 'animation-duration': 'var(--un-animate-duration)', - '--un-animate-duration': '150ms', - '--un-exit-opacity': 'initial', - '--un-exit-scale': 'initial', - '--un-exit-rotate': 'initial', - '--un-exit-translate-x': 'initial', - '--un-exit-translate-y': 'initial', - }, - ], - [/^fade-in-?(.+)?$/, ([, d]) => ({ '--un-enter-opacity': `${Number(handleMatchNumber(d) || 0) / 100}` })], - [/^fade-out-?(.+)?$/, ([, d]) => ({ '--un-exit-opacity': `${Number(handleMatchNumber(d) || 0) / 100}` })], - [/^zoom-in-?(.+)?$/, ([, d]) => ({ '--un-enter-scale': `${Number(handleMatchNumber(d) || 0) / 100}` })], - [/^zoom-out-?(.+)?$/, ([, d]) => ({ '--un-out-scale': `${Number(handleMatchNumber(d) || 0) / 100}` })], - [/^spin-in-?(.+)?$/, ([, d]) => ({ '--un-enter-rotate': `${Number(handleMatchNumber(d) || 0)}deg` })], - [/^spin-out-?(.+)?$/, ([, d]) => ({ '--un-exit-rotate': `${Number(handleMatchNumber(d) || 0)}deg` })], - [/^slide-in-from-top-?(.+)?$/, ([, d]) => ({ '--un-enter-translate-y': `-${handleMatchRem(d)}` })], - [/^slide-in-from-bottom-?(.+)?$/, ([, d]) => ({ '--un-enter-translate-y': handleMatchRem(d) })], - [/^slide-in-from-left-?(.+)?$/, ([, d]) => ({ '--un-enter-translate-x': `-${handleMatchRem(d)}` })], - [/^slide-in-from-right-?(.+)?$/, ([, d]) => ({ '--un-enter-translate-x': handleMatchRem(d) })], - [/^slide-out-to-top-?(.+)?$/, ([, d]) => ({ '--un-exit-translate-y': `-${handleMatchRem(d)}` })], - [/^slide-out-to-bottom-?(.+)?$/, ([, d]) => ({ '--un-exit-translate-y': handleMatchRem(d) })], - [/^slide-out-to-left-?(.+)?$/, ([, d]) => ({ '--un-exit-translate-x': `-${handleMatchRem(d)}` })], - [/^slide-out-to-right-?(.+)?$/, ([, d]) => ({ '--un-exit-translate-x': handleMatchRem(d) })], - ], - } -} - -export default presetShadcn diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index 2991189a2..52d2069b1 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -8,20 +8,22 @@ "name": "holodex-react", "version": "0.0.1", "dependencies": { + "@radix-ui/colors": "^3.0.0", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/themes": "^1.1.2", - "@tanstack/react-query": "^4.35.7", + "@tanstack/react-query": "^4.36.1", "class-variance-authority": "^0.7.0", "classnames": "^2.3.2", "clsx": "^2.0.0", + "css-vars-hook": "^0.6.18", "date-fns": "^2.30.0", "i18next": "^23.5.1", "i18next-browser-languagedetector": "^7.1.0", "i18next-http-backend": "^2.2.2", "jotai": "^2.4.3", - "lucide-react": "^0.279.0", + "lucide-react": "^0.284.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-grid-layout": "^1.4.2", @@ -32,14 +34,10 @@ "react-router-dom": "^6.16.0", "react-use": "^17.4.0", "tailwind-merge": "^1.14.0", - "tailwindcss-animate": "^1.0.7", - "valtio": "^1.11.2", - "xstate": "^4.38.2", - "zustand": "^4.4.1" + "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@iconify/json": "^2.2.122", - "@radix-ui/colors": "^3.0.0-rc.5", "@swc-jotai/debug-label": "^0.1.0", "@types/react": "^18.2.24", "@types/react-dom": "^18.2.8", @@ -66,7 +64,7 @@ "unocss": "^0.56.4", "unocss-preset-autoprefixer": "^0.0.6", "vite": "^4.4.9", - "windy-radix-palette": "^1.0.0-rc.1" + "windy-radix-palette": "^1.0.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -1212,10 +1210,9 @@ "dev": true }, "node_modules/@radix-ui/colors": { - "version": "3.0.0-rc.5", - "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0-rc.5.tgz", - "integrity": "sha512-SHAmQwvoRFuX1Kqo0ZwOwp/24GQqNMUaS3tWcR5RgDaC1ZpUKQfT+IbdzGm63OVzQhpyA4PRcjimM2UMa9SYTw==", - "dev": true + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0.tgz", + "integrity": "sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==" }, "node_modules/@radix-ui/number": { "version": "1.0.1", @@ -2669,20 +2666,20 @@ "dev": true }, "node_modules/@tanstack/query-core": { - "version": "4.35.7", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.35.7.tgz", - "integrity": "sha512-PgDJtX75ubFS0WCYFM7DqEoJ4QbxU3S5OH3gJSI40xr7UVVax3/J4CM3XUMOTs+EOT5YGEfssi3tfRVGte4DEw==", + "version": "4.36.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.36.1.tgz", + "integrity": "sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" } }, "node_modules/@tanstack/react-query": { - "version": "4.35.7", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.35.7.tgz", - "integrity": "sha512-0MankquP/6EOM2ATfEov6ViiKemey5uTbjGlFMX1xGotwNaqC76YKDMJdHumZupPbZcZPWAeoPGEHQmVKIKoOQ==", + "version": "4.36.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.36.1.tgz", + "integrity": "sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==", "dependencies": { - "@tanstack/query-core": "4.35.7", + "@tanstack/query-core": "4.36.1", "use-sync-external-store": "^1.2.0" }, "funding": { @@ -4005,6 +4002,18 @@ "node": ">=8.0.0" } }, + "node_modules/css-vars-hook": { + "version": "0.6.18", + "resolved": "https://registry.npmjs.org/css-vars-hook/-/css-vars-hook-0.6.18.tgz", + "integrity": "sha512-ow4Ezio9vZvJeTez7fgH2rR2g7Ej1hXrhoQNc3GexrKnba7yT/K4zz9ABMZBMavYTScIqkqz94jTXCeIDWEevg==", + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -5635,9 +5644,9 @@ } }, "node_modules/lucide-react": { - "version": "0.279.0", - "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.279.0.tgz", - "integrity": "sha512-LJ8g66+Bxc3t3x9vKTeK3wn3xucrOQGfJ9ou9GsBwCt2offsrT2BB90XrTrIzE1noYYDe2O8jZaRHi6sAHXNxw==", + "version": "0.284.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.284.0.tgz", + "integrity": "sha512-dVSMHYAya/TeY3+vsk+VQJEKNQN2AhIo0+Dp09B2qpzvcBuu93H98YZykFcjIAfmanFiDd8nqfXFR38L757cyQ==", "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0" } @@ -6446,11 +6455,6 @@ "react-is": "^16.13.1" } }, - "node_modules/proxy-compare": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.5.1.tgz", - "integrity": "sha512-oyfc0Tx87Cpwva5ZXezSp5V9vht1c7dZBhvuV/y3ctkgMVUmiAGDVeeB0dKhGSyT0v1ZTEQYpe/RXlBVBNuCLA==" - }, "node_modules/prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", @@ -8023,30 +8027,6 @@ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, - "node_modules/valtio": { - "version": "1.11.2", - "resolved": "https://registry.npmjs.org/valtio/-/valtio-1.11.2.tgz", - "integrity": "sha512-1XfIxnUXzyswPAPXo1P3Pdx2mq/pIqZICkWN60Hby0d9Iqb+MEIpqgYVlbflvHdrp2YR/q3jyKWRPJJ100yxaw==", - "dependencies": { - "proxy-compare": "2.5.1", - "use-sync-external-store": "1.2.0" - }, - "engines": { - "node": ">=12.20.0" - }, - "peerDependencies": { - "@types/react": ">=16.8", - "react": ">=16.8" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "react": { - "optional": true - } - } - }, "node_modules/vite": { "version": "4.4.9", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", @@ -8140,12 +8120,12 @@ } }, "node_modules/windy-radix-palette": { - "version": "1.0.0-rc.1", - "resolved": "https://registry.npmjs.org/windy-radix-palette/-/windy-radix-palette-1.0.0-rc.1.tgz", - "integrity": "sha512-PPvVuScDoTkqitLp5ocAWDLvQC663FYP7jPNmPH0eEbhdocejW1iEqcNI9hlEPZqLz/APx/3w2/dW6K4mtlsJg==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/windy-radix-palette/-/windy-radix-palette-1.0.0.tgz", + "integrity": "sha512-KrlmFaxiRDV3OnolcFJWBJLyeSJ/zHYyRn50e8LjO7ee4B3/Vh7vrRPkjDp43tTpCF1gvyXU4Hz5DBwP1s0Fgw==", "dev": true, "peerDependencies": { - "@radix-ui/colors": ">=3.0.0-rc.4", + "@radix-ui/colors": ">=3.0.0", "tailwindcss": ">=3.0.0" } }, @@ -8175,15 +8155,6 @@ } } }, - "node_modules/xstate": { - "version": "4.38.2", - "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.38.2.tgz", - "integrity": "sha512-Fba/DwEPDLneHT3tbJ9F3zafbQXszOlyCJyQqqdzmtlY/cwE2th462KK48yaANf98jHlP6lJvxfNtN0LFKXPQg==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/xstate" - } - }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", @@ -8210,33 +8181,6 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } - }, - "node_modules/zustand": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.1.tgz", - "integrity": "sha512-QCPfstAS4EBiTQzlaGP1gmorkh/UL1Leaj2tdj+zZCZ/9bm0WS7sI2wnfD5lpOszFqWJ1DcPnGoY8RDL61uokw==", - "dependencies": { - "use-sync-external-store": "1.2.0" - }, - "engines": { - "node": ">=12.7.0" - }, - "peerDependencies": { - "@types/react": ">=16.8", - "immer": ">=9.0", - "react": ">=16.8" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "immer": { - "optional": true - }, - "react": { - "optional": true - } - } } }, "dependencies": { @@ -8988,10 +8932,9 @@ "dev": true }, "@radix-ui/colors": { - "version": "3.0.0-rc.5", - "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0-rc.5.tgz", - "integrity": "sha512-SHAmQwvoRFuX1Kqo0ZwOwp/24GQqNMUaS3tWcR5RgDaC1ZpUKQfT+IbdzGm63OVzQhpyA4PRcjimM2UMa9SYTw==", - "dev": true + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0.tgz", + "integrity": "sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==" }, "@radix-ui/number": { "version": "1.0.1", @@ -9758,16 +9701,16 @@ "dev": true }, "@tanstack/query-core": { - "version": "4.35.7", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.35.7.tgz", - "integrity": "sha512-PgDJtX75ubFS0WCYFM7DqEoJ4QbxU3S5OH3gJSI40xr7UVVax3/J4CM3XUMOTs+EOT5YGEfssi3tfRVGte4DEw==" + "version": "4.36.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.36.1.tgz", + "integrity": "sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==" }, "@tanstack/react-query": { - "version": "4.35.7", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.35.7.tgz", - "integrity": "sha512-0MankquP/6EOM2ATfEov6ViiKemey5uTbjGlFMX1xGotwNaqC76YKDMJdHumZupPbZcZPWAeoPGEHQmVKIKoOQ==", + "version": "4.36.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.36.1.tgz", + "integrity": "sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==", "requires": { - "@tanstack/query-core": "4.35.7", + "@tanstack/query-core": "4.36.1", "use-sync-external-store": "^1.2.0" } }, @@ -10710,6 +10653,12 @@ "source-map": "^0.6.1" } }, + "css-vars-hook": { + "version": "0.6.18", + "resolved": "https://registry.npmjs.org/css-vars-hook/-/css-vars-hook-0.6.18.tgz", + "integrity": "sha512-ow4Ezio9vZvJeTez7fgH2rR2g7Ej1hXrhoQNc3GexrKnba7yT/K4zz9ABMZBMavYTScIqkqz94jTXCeIDWEevg==", + "requires": {} + }, "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -11824,9 +11773,9 @@ } }, "lucide-react": { - "version": "0.279.0", - "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.279.0.tgz", - "integrity": "sha512-LJ8g66+Bxc3t3x9vKTeK3wn3xucrOQGfJ9ou9GsBwCt2offsrT2BB90XrTrIzE1noYYDe2O8jZaRHi6sAHXNxw==", + "version": "0.284.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.284.0.tgz", + "integrity": "sha512-dVSMHYAya/TeY3+vsk+VQJEKNQN2AhIo0+Dp09B2qpzvcBuu93H98YZykFcjIAfmanFiDd8nqfXFR38L757cyQ==", "requires": {} }, "magic-string": { @@ -12382,11 +12331,6 @@ "react-is": "^16.13.1" } }, - "proxy-compare": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.5.1.tgz", - "integrity": "sha512-oyfc0Tx87Cpwva5ZXezSp5V9vht1c7dZBhvuV/y3ctkgMVUmiAGDVeeB0dKhGSyT0v1ZTEQYpe/RXlBVBNuCLA==" - }, "prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", @@ -13463,15 +13407,6 @@ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, - "valtio": { - "version": "1.11.2", - "resolved": "https://registry.npmjs.org/valtio/-/valtio-1.11.2.tgz", - "integrity": "sha512-1XfIxnUXzyswPAPXo1P3Pdx2mq/pIqZICkWN60Hby0d9Iqb+MEIpqgYVlbflvHdrp2YR/q3jyKWRPJJ100yxaw==", - "requires": { - "proxy-compare": "2.5.1", - "use-sync-external-store": "1.2.0" - } - }, "vite": { "version": "4.4.9", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", @@ -13513,9 +13448,9 @@ } }, "windy-radix-palette": { - "version": "1.0.0-rc.1", - "resolved": "https://registry.npmjs.org/windy-radix-palette/-/windy-radix-palette-1.0.0-rc.1.tgz", - "integrity": "sha512-PPvVuScDoTkqitLp5ocAWDLvQC663FYP7jPNmPH0eEbhdocejW1iEqcNI9hlEPZqLz/APx/3w2/dW6K4mtlsJg==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/windy-radix-palette/-/windy-radix-palette-1.0.0.tgz", + "integrity": "sha512-KrlmFaxiRDV3OnolcFJWBJLyeSJ/zHYyRn50e8LjO7ee4B3/Vh7vrRPkjDp43tTpCF1gvyXU4Hz5DBwP1s0Fgw==", "dev": true, "requires": {} }, @@ -13531,11 +13466,6 @@ "dev": true, "requires": {} }, - "xstate": { - "version": "4.38.2", - "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.38.2.tgz", - "integrity": "sha512-Fba/DwEPDLneHT3tbJ9F3zafbQXszOlyCJyQqqdzmtlY/cwE2th462KK48yaANf98jHlP6lJvxfNtN0LFKXPQg==" - }, "yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", @@ -13553,14 +13483,6 @@ "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "dev": true - }, - "zustand": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.1.tgz", - "integrity": "sha512-QCPfstAS4EBiTQzlaGP1gmorkh/UL1Leaj2tdj+zZCZ/9bm0WS7sI2wnfD5lpOszFqWJ1DcPnGoY8RDL61uokw==", - "requires": { - "use-sync-external-store": "1.2.0" - } } } } diff --git a/packages/react/package.json b/packages/react/package.json index 25d9672e4..7c42ac9a6 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -10,20 +10,22 @@ "preview": "vite preview" }, "dependencies": { + "@radix-ui/colors": "^3.0.0", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/themes": "^1.1.2", - "@tanstack/react-query": "^4.35.7", + "@tanstack/react-query": "^4.36.1", "class-variance-authority": "^0.7.0", "classnames": "^2.3.2", "clsx": "^2.0.0", + "css-vars-hook": "^0.6.18", "date-fns": "^2.30.0", "i18next": "^23.5.1", "i18next-browser-languagedetector": "^7.1.0", "i18next-http-backend": "^2.2.2", "jotai": "^2.4.3", - "lucide-react": "^0.279.0", + "lucide-react": "^0.284.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-grid-layout": "^1.4.2", @@ -34,14 +36,10 @@ "react-router-dom": "^6.16.0", "react-use": "^17.4.0", "tailwind-merge": "^1.14.0", - "tailwindcss-animate": "^1.0.7", - "valtio": "^1.11.2", - "xstate": "^4.38.2", - "zustand": "^4.4.1" + "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@iconify/json": "^2.2.122", - "@radix-ui/colors": "^3.0.0-rc.5", "@swc-jotai/debug-label": "^0.1.0", "@types/react": "^18.2.24", "@types/react-dom": "^18.2.8", @@ -68,6 +66,6 @@ "unocss": "^0.56.4", "unocss-preset-autoprefixer": "^0.0.6", "vite": "^4.4.9", - "windy-radix-palette": "^1.0.0-rc.1" + "windy-radix-palette": "^1.0.0" } -} +} \ No newline at end of file diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx index 25f4fa4f1..9a66fa578 100644 --- a/packages/react/src/components/layout/Frame.tsx +++ b/packages/react/src/components/layout/Frame.tsx @@ -1,17 +1,18 @@ import './Frame.scss' import { RouterProvider } from 'react-router-dom' import router from '../../routes/router' -import { useSnapshot } from 'valtio' -import { useEffect } from 'react' +import { ReactPropTypes, useEffect } from 'react' import classNames from 'classnames' import { Sidebar } from '../sidebar/sidebar' import { isFloatingAtom, isMobileAtom, onResizeAtom, sidebarOpenAtom, sidebarShouldBeFullscreenAtom, toggleAtom } from './useFrame' import { useAtom } from 'jotai/react' +import { darkAtom } from '@/hooks/useTheme' export function Frame() { const [, toggle] = useAtom(toggleAtom) const [, resize] = useAtom(onResizeAtom) + const [dark] = useAtom(darkAtom); useEffect(() => { window.addEventListener("resize", resize); @@ -32,20 +33,21 @@ export function Frame() { 'sidebar-open': open, 'sidebar-closed': !open, 'sidebar-fullscreen': fs, + 'dark': dark, }) return (
-
) } \ No newline at end of file diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx index da9a05701..f78468da6 100644 --- a/packages/react/src/components/sidebar/sidebar.tsx +++ b/packages/react/src/components/sidebar/sidebar.tsx @@ -14,11 +14,11 @@ export function Sidebar({ className, id }: SidebarProps) { Hololive
- - @@ -29,23 +29,23 @@ export function Sidebar({ className, id }: SidebarProps) { Holodex
- - - - - diff --git a/packages/react/src/hooks/themes.ts b/packages/react/src/hooks/themes.ts new file mode 100644 index 000000000..aa518766b --- /dev/null +++ b/packages/react/src/hooks/themes.ts @@ -0,0 +1,9 @@ +import { blueDarkP3, blueDarkP3A, blueP3, blueP3A, crimsonDarkP3, crimsonDarkP3A, crimsonP3, crimsonP3A } from "@radix-ui/colors" + +export const Themes = { + "default": { + primary: "blue", + secondary: "crimson", + base: "base" + } +} \ No newline at end of file diff --git a/packages/react/src/hooks/useTheme.ts b/packages/react/src/hooks/useTheme.ts index 83151b93a..038d958a9 100644 --- a/packages/react/src/hooks/useTheme.ts +++ b/packages/react/src/hooks/useTheme.ts @@ -1,52 +1,48 @@ -import { proxyWithPersist } from "@/valtio-persist/index"; import { useEffect } from "react"; -import { useSnapshot } from "valtio/react"; +import { atomWithStorageBroadcast } from "@/lib/atomWithStorageBroadcast"; +import { useAtom } from "jotai"; -export const cssVariablesStore = proxyWithPersist('page-theme', { +export const baseAtom = atomWithStorageBroadcast('theme-base', 'mauve'); +export const primaryAtom = atomWithStorageBroadcast('theme-primary', 'blue'); +export const secondaryAtom = atomWithStorageBroadcast('theme-secondary', 'pink'); +export const darkAtom = atomWithStorageBroadcast('theme-dark', true); - '--background': '0 0% 100%', - '--foreground': '222.2 84% 4.9%', - '--primary': '111.2 47.4% 11.2%', - '--primary-foreground': '210 40% 98%', - '--secondary': '210 40% 96.1%', - '--secondary-foreground': '222.2 47.4% 11.2%', - '--muted': '210 40% 96.1%', - '--muted-foreground': '215.4 16.3% 46.9%', - '--accent': '210 40% 96.1%', - '--accent-foreground': '222.2 47.4% 11.2%', - '--destructive': '0 84.2% 60.2%', - '--destructive-foreground': '210 40% 98%', - '--border': '214.3 31.8% 91.4%', - '--input': '214.3 31.8% 91.4%', - '--ring': '222.2 84% 4.9%', -}, ['--background', '--foreground', '--primary', '--primary-foreground', '--secondary', '--muted', '--accent', '--destructive', '--border', '--input', '--ring']); +const setCssVariable = (property: string, targetColor: string, alpha: boolean = false) => { + const A = alpha ? 'A' : '' + for (let i = 1; i <= 12; i++) { + const propertyLevel = `--${property}-${A}${i}` + document.documentElement.style.setProperty(propertyLevel, `rgb(var(--${targetColor}${A}${i}))`); + } +}; + export function useThemeInit() { - const snap = useSnapshot(cssVariablesStore); + + const [base] = useAtom(baseAtom) + const [primary] = useAtom(primaryAtom) + const [secondary] = useAtom(secondaryAtom) + const [dark] = useAtom(darkAtom) + + useEffect(() => { + setCssVariable('base', base); + }, [base]); // This effect runs whenever the snapshot (and thus the state) changes useEffect(() => { - const setCssVariable = (property: string, value: string) => { - document.documentElement.style.setProperty(property, value); - }; - - setCssVariable('--background', snap['--background']); - setCssVariable('--foreground', snap['--foreground']); - setCssVariable('--primary', snap['--primary']); - setCssVariable('--primary-foreground', snap['--primary-foreground']); - setCssVariable('--secondary', snap['--secondary']); - setCssVariable('--secondary-foreground', snap['--secondary-foreground']); - setCssVariable('--muted', snap['--muted']); - setCssVariable('--muted-foreground', snap['--muted-foreground']); - setCssVariable('--accent', snap['--accent']); - setCssVariable('--accent-foreground', snap['--accent-foreground']); - setCssVariable('--destructive', snap['--destructive']); - setCssVariable('--destructive-foreground', snap['--destructive-foreground']); - setCssVariable('--border', snap['--border']); - setCssVariable('--input', snap['--input']); - setCssVariable('--ring', snap['--ring']); - }, [snap]); // This effect runs whenever the snapshot (and thus the state) changes + setCssVariable('primary', primary); + setCssVariable('primary', primary, true); + }, [primary]); + useEffect(() => { + setCssVariable('secondary', secondary); + setCssVariable('secondary', secondary, true); + }, [secondary]); + + useEffect(() => { + document.body.classList.remove("dark", "light") + document.body.classList.add(dark ? 'dark' : 'light'); + }, [dark]); + return null; // This component doesn't need to render anything visible }; \ No newline at end of file diff --git a/packages/react/src/index.css b/packages/react/src/index.css index c27f1521b..789b367d1 100644 --- a/packages/react/src/index.css +++ b/packages/react/src/index.css @@ -13,10 +13,10 @@ @layer base { * { - @apply border-border; + /* @apply border-border; */ } body { - @apply bg-background text-foreground; + @apply bg-base-1 text-base-11; } } \ No newline at end of file diff --git a/packages/react/src/lib/atomWithStorageBroadcast.ts b/packages/react/src/lib/atomWithStorageBroadcast.ts new file mode 100644 index 000000000..2898c2c69 --- /dev/null +++ b/packages/react/src/lib/atomWithStorageBroadcast.ts @@ -0,0 +1,38 @@ +import { atom } from "jotai" +import { atomWithStorage } from "jotai/utils" + +export function atomWithStorageBroadcast(key: string, initialValue: Value) { + const baseAtom = atomWithStorage(key, initialValue) + const listeners = new Set<(event: MessageEvent) => void>() + const channel = new BroadcastChannel(key) + channel.onmessage = (event) => { + listeners.forEach((l) => l(event)) + } + + const broadcastAtom = atom( + (get) => get(baseAtom), + (get, set, update) => { + set(baseAtom, update.value) + + if (!update.isEvent) { + channel.postMessage(get(baseAtom)) + } + } + ) + broadcastAtom.onMount = (setAtom) => { + const listener = (event: MessageEvent) => { + setAtom({ isEvent: true, value: event.data }) + } + listeners.add(listener) + return () => { + listeners.delete(listener) + } + } + const returnedAtom = atom( + (get) => get(broadcastAtom), + (_, set, update) => { + set(broadcastAtom, { isEvent: false, value: update }) + } + ) + return returnedAtom +} \ No newline at end of file diff --git a/packages/react/src/main.tsx b/packages/react/src/main.tsx index 0f0a7826b..7b3b70184 100644 --- a/packages/react/src/main.tsx +++ b/packages/react/src/main.tsx @@ -3,11 +3,11 @@ import ReactDOM from "react-dom/client"; import "./index.css"; import "uno.css"; import { Frame } from "./components/layout/Frame.tsx"; -import { useThemeInit } from "./hooks/useTheme.ts"; +import { darkAtom, useThemeInit } from "./hooks/useTheme.ts"; +import { useAtom } from "jotai"; function App() { useThemeInit(); - return ; } diff --git a/packages/react/src/shadcn/ui/button.tsx b/packages/react/src/shadcn/ui/button.tsx index 77c550868..ab43b186f 100644 --- a/packages/react/src/shadcn/ui/button.tsx +++ b/packages/react/src/shadcn/ui/button.tsx @@ -10,13 +10,13 @@ const buttonVariants = cva( variants: { variant: { default: - "bg-primary text-primary-foreground shadow hover:bg-primary/90", + "bg-primary-2 text-primary-11 text-primary hover:bg-primary-4", destructive: - "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", + "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: - "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground", + "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground", secondary: - "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", + "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, diff --git a/packages/react/src/valtio-persist/index.ts b/packages/react/src/valtio-persist/index.ts deleted file mode 100644 index 2e87b8aeb..000000000 --- a/packages/react/src/valtio-persist/index.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { proxy, subscribe } from 'valtio' - -const pick = (obj: T, ...keys: K[]) => ( - Object.fromEntries( - keys - .filter(key => key in obj) - .map(key => [key, obj[key]]) - ) as Pick -); - -/** - * Creates a proxy object with persistence, allowing you to store and retrieve data from local storage. - */ -export function proxyWithPersist(key: string, initialObject: T, persistFields: (keyof T)[]): T { - if (typeof window === "undefined") return proxy(initialObject); - const storageItem = localStorage.getItem(key); - - const state = proxy({ - initialObject, - // ...(storageItem !== null ? JSON.parse(storageItem) : {}) - } as T); - - state - - subscribe(state, () => { - const subobject = pick(initialObject, ...persistFields) - localStorage.setItem(key, JSON.stringify(subobject)) - }); - - return state; -} \ No newline at end of file diff --git a/packages/react/tailwind.config.js b/packages/react/tailwind.config.js index bae54a4c0..7bf8045be 100644 --- a/packages/react/tailwind.config.js +++ b/packages/react/tailwind.config.js @@ -1,3 +1,21 @@ +import * as createPlugin from "windy-radix-palette"; + + +console.log(createPlugin); +const colors = createPlugin.default(); + +function getColorSpace(name, alpha) { + const a = alpha ? 'A' : '' + var colorspace = { "DEFAULT": "var(--primary-9)" } + for (var i = 1; i <= 12; i++) { + const color = `--${name}-${a}${i}`; + colorspace[i] = `var(${color})` + } + return colorspace +} + +console.log(getColorSpace('primary')) + /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], @@ -6,7 +24,7 @@ module.exports = { './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', - ], + ], theme: { container: { center: true, @@ -17,39 +35,11 @@ module.exports = { }, extend: { colors: { - 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))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", - }, + base: getColorSpace("base"), + primary: getColorSpace("primary"), + "primaryA": getColorSpace("primary", true), + secondary: getColorSpace("secondary"), + "secondaryA": getColorSpace("secondary", true), }, borderRadius: { lg: "var(--radius)", @@ -72,5 +62,5 @@ module.exports = { }, }, }, - plugins: [require("tailwindcss-animate"), require("windy-radix-palette")], + plugins: [require("tailwindcss-animate"), colors.handler], } \ No newline at end of file diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json index 18138be23..ab1c2cb50 100644 --- a/packages/react/tsconfig.json +++ b/packages/react/tsconfig.json @@ -17,12 +17,12 @@ "skipLibCheck": true, /* Plugins */ "plugins": [ - { - "name": "typescript-plugin-css-modules", - "options": { - "classnameTransform": "camelCaseOnly", - } - } + // { + // "name": "typescript-plugin-css-modules", + // "options": { + // "classnameTransform": "camelCaseOnly", + // } + // } ], /* Bundler mode */ "moduleResolution": "bundler",