Compare commits

..

2 Commits

Author SHA1 Message Date
semantic-release-bot 6e1ae56a29 chore(release): 0.1.0-develop.8 [skip ci]
# [0.1.0-develop.8](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.7...v0.1.0-develop.8) (2023-10-10)

### Bug Fixes

* styles on lume identity ([7fc193c](7fc193ce72))
2023-10-10 10:42:20 +00:00
Juan Di Toro 7fc193ce72 fix: styles on lume identity 2023-10-10 12:40:39 +02:00
15 changed files with 136 additions and 89 deletions

View File

@ -1,3 +1,10 @@
# [0.1.0-develop.8](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.7...v0.1.0-develop.8) (2023-10-10)
### Bug Fixes
* styles on lume identity ([7fc193c](https://git.lumeweb.com/LumeWeb/sdk/commit/7fc193ce7249898b5c83886f24e2ec114312bda1))
# [0.1.0-develop.7](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.6...v0.1.0-develop.7) (2023-10-09) # [0.1.0-develop.7](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.6...v0.1.0-develop.7) (2023-10-09)

4
npm-shrinkwrap.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@lumeweb/sdk", "name": "@lumeweb/sdk",
"version": "0.1.0-develop.7", "version": "0.1.0-develop.8",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@lumeweb/sdk", "name": "@lumeweb/sdk",
"version": "0.1.0-develop.7", "version": "0.1.0-develop.8",
"dependencies": { "dependencies": {
"@lumeweb/kernel-network-registry-client": "0.1.0-develop.10", "@lumeweb/kernel-network-registry-client": "0.1.0-develop.10",
"@lumeweb/libkernel": "0.1.0-develop.65", "@lumeweb/libkernel": "0.1.0-develop.65",

View File

@ -1,6 +1,6 @@
{ {
"name": "@lumeweb/sdk", "name": "@lumeweb/sdk",
"version": "0.1.0-develop.7", "version": "0.1.0-develop.8",
"type": "module", "type": "module",
"main": "lib/index.js", "main": "lib/index.js",
"types": "lib/index.d.ts", "types": "lib/index.d.ts",

View File

@ -1,5 +1,5 @@
diff --git a/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs b/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs diff --git a/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs b/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs
index 0e337b0..495546b 100644 index 0e337b0..530cd41 100644
--- a/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs --- a/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs
+++ b/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs +++ b/node_modules/vite-plugin-scope-tailwind/dist/cjs/index.cjs
@@ -1,2 +1,109 @@ @@ -1,2 +1,109 @@
@ -95,7 +95,7 @@ index 0e337b0..495546b 100644
+}, k = e => r => { +}, k = e => r => {
+ const t = /class/g + const t = /class/g
+ return r.match(t) ? r.replace(/class: "/g, `class: "${e} `) : r + return r.match(t) ? r.replace(/class: "/g, `class: "${e} `) : r
+}, g = P('d'), D = ({ react: e = !1, ignore: r = [], classNameTransformers = [] } = {}) => ({ +}, g = P('d'), D = ({ react: e = !1, ignore: r = [], prefix, classNameTransformers = [] } = {}) => ({
+ name: 'vite-plugin-scope-tailwind', config: t => { + name: 'vite-plugin-scope-tailwind', config: t => {
+ var a, s + var a, s
+ const n = ((s = (a = t.css) == null ? void 0 : a.postcss) == null ? void 0 : s.plugins) ?? [], o = O() + const n = ((s = (a = t.css) == null ? void 0 : a.postcss) == null ? void 0 : s.plugins) ?? [], o = O()
@ -103,34 +103,54 @@ index 0e337b0..495546b 100644
+ css: { + css: {
+ postcss: { + postcss: {
+ plugins: [...n, ...R(o).map(_ => require(p.join(process.cwd(), 'node_modules', _))), S({ + plugins: [...n, ...R(o).map(_ => require(p.join(process.cwd(), 'node_modules', _))), S({
+ prefix: `${g}.`, + prefix: `${prefix || g}.`,
+ ignore: r + ignore: r
+ })] + })]
+ } + }
+ } + }
+ } + }
+ }, transform: e ? $(g, classNameTransformers) : k(g) + }, transform: e ? $(prefix || g, classNameTransformers) : k(prefix || g)
+}) +})
+module.exports = D +module.exports = D
//# sourceMappingURL=index.cjs.map //# sourceMappingURL=index.cjs.map
diff --git a/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs b/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs diff --git a/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs b/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs
index 9594d38..824fafe 100644 index 9594d38..14bbb10 100644
--- a/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs --- a/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs
+++ b/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs +++ b/node_modules/vite-plugin-scope-tailwind/dist/es/index.mjs
@@ -111,6 +111,7 @@ const S = ({ @@ -111,6 +111,8 @@ const S = ({
return r.match(t) ? r.replace(/class: "/g, `class: "${e} `) : r; return r.match(t) ? r.replace(/class: "/g, `class: "${e} `) : r;
}, g = P("d"), M = ({ }, g = P("d"), M = ({
react: e = !1, react: e = !1,
+ classNameTransformers = [], + classNameTransformers = [],
+ prefix,
ignore: r = [] ignore: r = []
} = {}) => ({ } = {}) => ({
name: "vite-plugin-scope-tailwind", name: "vite-plugin-scope-tailwind",
@@ -131,7 +132,7 @@ const S = ({ @@ -125,13 +127,13 @@ const S = ({
...R(o).map(
(_) => require(p.join(process.cwd(), "node_modules", _))
),
- S({ prefix: `${g}.`, ignore: r })
+ S({ prefix: `${prefix || g}.`, ignore: r })
]
}
} }
}; };
}, },
- transform: e ? $(g) : k(g) - transform: e ? $(g) : k(g)
+ transform: e ? $(g, classNameTransformers) : k(g) + transform: e ? $(prefix || g, classNameTransformers) : k(prefix || g )
}); });
export { export {
M as default M as default
diff --git a/node_modules/vite-plugin-scope-tailwind/dist/main.d.ts b/node_modules/vite-plugin-scope-tailwind/dist/main.d.ts
index 2b63f48..9396191 100644
--- a/node_modules/vite-plugin-scope-tailwind/dist/main.d.ts
+++ b/node_modules/vite-plugin-scope-tailwind/dist/main.d.ts
@@ -2,5 +2,7 @@ import { Plugin } from "vite";
declare const plugin: ({ react, ignore, }?: {
react?: boolean | undefined;
ignore?: RegExp | RegExp[] | undefined;
+ classNameTransformers?: string[],
+ prefix?: string
}) => Plugin;
export default plugin;

View File

@ -0,0 +1 @@
export const TW_PREFIX = 'lumesdk'

View File

@ -1,23 +1,34 @@
import { Variant, AnimatePresence, m } from "framer-motion"; import { Variant, AnimatePresence, m } from "framer-motion";
import React from "react"; import React from "react";
const SwitchableComponentContext = React.createContext<SwitchableComponentContextType | undefined>(undefined); const SwitchableComponentContext = React.createContext<
SwitchableComponentContextType | undefined
>(undefined);
export const SwitchableComponentProvider = ({ children }: React.PropsWithChildren) => { export const SwitchableComponentProvider = ({
const [visibleComponent, setVisibleComponent] = React.useState<SwitchableComponentType>(); children,
}: React.PropsWithChildren) => {
const [visibleComponent, setVisibleComponent] =
React.useState<SwitchableComponentType>();
return <SwitchableComponentContext.Provider return (
value={{ visibleComponent: visibleComponent ?? DEFAULT_COMPONENT, setVisibleComponent }} <SwitchableComponentContext.Provider
> value={{
{children} visibleComponent: visibleComponent ?? DEFAULT_COMPONENT,
</SwitchableComponentContext.Provider> setVisibleComponent,
} }}>
{children}
</SwitchableComponentContext.Provider>
);
};
export function useSwitchableComponent(initialValue?: SwitchableComponentType) { export function useSwitchableComponent(initialValue?: SwitchableComponentType) {
const contextValue = React.useContext(SwitchableComponentContext); const contextValue = React.useContext(SwitchableComponentContext);
if (contextValue === undefined) { if (contextValue === undefined) {
throw new Error('useSwitchableComponent hook is being used outside of its context. Please ensure that it is wrapped within a <SwitchableComponentProvider>.'); throw new Error(
"useSwitchableComponent hook is being used outside of its context. Please ensure that it is wrapped within a <SwitchableComponentProvider>.",
);
} }
React.useEffect(() => { React.useEffect(() => {
// Set the initial value if it's provided // Set the initial value if it's provided
@ -30,22 +41,25 @@ export function useSwitchableComponent(initialValue?: SwitchableComponentType) {
} }
const variants: Record<string, Variant> = { const variants: Record<string, Variant> = {
hidden: { y: 50, opacity: 0, position: 'absolute' }, hidden: { y: 50, opacity: 0, position: "absolute" },
show: { show: {
y: 0, y: 0,
x: 0, x: 0,
opacity: 1, opacity: 1,
position: 'relative', position: "relative",
transition: { transition: {
type: "tween", type: "tween",
ease: 'easeInOut' ease: "easeInOut",
}, },
}, },
exit: { y: -50, opacity: 0, position: 'absolute' } exit: { y: -50, opacity: 0, position: "absolute" },
}; };
export const SwitchableComponent = ({ children, index }: React.PropsWithChildren<{ index: string }>) => { export const SwitchableComponent = ({
const [width, setWidth] = React.useState<number>() children,
index,
}: React.PropsWithChildren<{ index: string }>) => {
const [width, setWidth] = React.useState<number>();
return ( return (
<AnimatePresence> <AnimatePresence>
<m.div <m.div
@ -55,9 +69,10 @@ export const SwitchableComponent = ({ children, index }: React.PropsWithChildren
exit="exit" exit="exit"
variants={variants} variants={variants}
className="h-full w-full" className="h-full w-full"
style={{ maxWidth: width ?? 'auto' }} style={{ maxWidth: width ?? "auto" }}
onTransitionEnd={(e) => setWidth(e.currentTarget.getBoundingClientRect().width!)} onTransitionEnd={(e) =>
> setWidth(e.currentTarget.getBoundingClientRect().width!)
}>
{children} {children}
</m.div> </m.div>
</AnimatePresence> </AnimatePresence>
@ -65,21 +80,33 @@ export const SwitchableComponent = ({ children, index }: React.PropsWithChildren
}; };
type SwitchableComponentType<T extends {} = {}> = { type SwitchableComponentType<T extends {} = {}> = {
index: string, index: string;
render: (props: T | any) => ReturnType<React.FC> render: (props: T | any) => ReturnType<React.FC>;
} };
type SwitchableComponentContextType<T = unknown> = { type SwitchableComponentContextType<T = unknown> = {
visibleComponent: SwitchableComponentType<T extends {} ? T : any>, visibleComponent: SwitchableComponentType<T extends {} ? T : any>;
setVisibleComponent: React.Dispatch<React.SetStateAction<SwitchableComponentType<T extends {} ? T : any> | undefined>> setVisibleComponent: React.Dispatch<
} React.SetStateAction<
SwitchableComponentType<T extends {} ? T : any> | undefined
>
>;
};
const DEFAULT_COMPONENT = { render: () => undefined, index: Symbol('DEFAULT_COMPONENT').toString() } const DEFAULT_COMPONENT = {
render: () => undefined,
index: Symbol("DEFAULT_COMPONENT").toString(),
};
// Factory function // Factory function
export function makeSwitchable<T extends {}>(Component: React.FC<T>, index: string) { export function makeSwitchable<T extends {}>(
Component: React.FC<T>,
index: string,
) {
return { return {
render(props: T) { return <Component {...props} /> }, render(props: T) {
index: index || Symbol(Component.name).toString() return <Component {...props} />;
},
index: index || Symbol(Component.name).toString(),
}; };
}; }

View File

@ -71,8 +71,7 @@ const NetworkIndicator = ({ network }: { network: Network }) => {
className={cn([ className={cn([
"text-[12px] -mt-1", "text-[12px] -mt-1",
chainIndicatorVariant({ syncState: network.syncState }), chainIndicatorVariant({ syncState: network.syncState }),
])} ])}>
>
{SYNCSTATE_TO_TEXT[network.syncState]} {SYNCSTATE_TO_TEXT[network.syncState]}
</span> </span>
</div> </div>
@ -101,8 +100,7 @@ const CircularProgress = ({
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
style={{ transform: "rotate(-90deg)" }} style={{ transform: "rotate(-90deg)" }}>
>
<circle <circle
r="45" r="45"
cx="50" cx="50"
@ -111,8 +109,7 @@ const CircularProgress = ({
stroke="#e0e0e0" stroke="#e0e0e0"
strokeWidth="4px" strokeWidth="4px"
strokeDasharray="282.74px" strokeDasharray="282.74px"
strokeDashoffset="0" strokeDashoffset="0"></circle>
></circle>
<circle <circle
r="45" r="45"
cx="50" cx="50"
@ -122,16 +119,14 @@ const CircularProgress = ({
strokeLinecap="round" strokeLinecap="round"
strokeDashoffset={`${progressOffset}px`} strokeDashoffset={`${progressOffset}px`}
fill="transparent" fill="transparent"
strokeDasharray="282.74px" strokeDasharray="282.74px"></circle>
></circle>
<text <text
x={textOffset} x={textOffset}
y="57.5px" y="57.5px"
fill="currentColor" fill="currentColor"
fontSize="26px" fontSize="26px"
fontWeight="normal" fontWeight="normal"
style={{ transform: "rotate(90deg) translate(0px, -98px)" }} style={{ transform: "rotate(90deg) translate(0px, -98px)" }}>
>
{chain.sync} {chain.sync}
</text> </text>
</svg> </svg>

View File

@ -9,7 +9,6 @@ import { LazyMotion, domAnimation } from "framer-motion";
import * as Dialog from "@radix-ui/react-dialog"; import * as Dialog from "@radix-ui/react-dialog";
import LumeLogoBg from "./LumeLogoBg"; import LumeLogoBg from "./LumeLogoBg";
import type { FC } from "react"; import type { FC } from "react";
import { useState } from "react";
const LumeIdentity: FC = () => { const LumeIdentity: FC = () => {
const { visibleComponent, setVisibleComponent } = useSwitchableComponent( const { visibleComponent, setVisibleComponent } = useSwitchableComponent(
@ -117,7 +116,8 @@ export default function Wrapped() {
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" /> <Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" />
<Dialog.Content className="fixed z-50 w-full h-full top-0 flex items-center justify-center"> {/* @ditorodev: `left-[calc(50%-192px)] top-[calc(50vh-174px)]` these two are me being dumb and lazy, would be cool to fix with proper centering */}
<Dialog.Content className="absolute left-[calc(50%-192px)] top-[calc(50vh-174px)] mx-auto my-auto w-96 max-w-full h-auto z-40 flex items-center justify-center">
<SwitchableComponentProvider> <SwitchableComponentProvider>
<LumeIdentity /> <LumeIdentity />
</SwitchableComponentProvider> </SwitchableComponentProvider>

View File

@ -1,26 +1,23 @@
import React, { useEffect, useState } from "react"; import { useState } from "react";
import { import {
login, login,
loginComplete, // loginComplete,
logoutComplete, // logoutComplete,
} from "@lumeweb/libkernel/kernel"; } from "@lumeweb/libkernel/kernel";
export function useLumeIndentity() { export function useLumeIndentity() {
const [loggedIn, setLoggedIn] = useState(false); const [loggedIn, setLoggedIn] = useState(false);
useEffect(() => {
loginComplete().then(() => {
setLoggedIn(true);
});
logoutComplete().then(() => {
setLoggedIn(false);
});
});
return { return {
isSignedIn: loggedIn, isSignedIn: loggedIn,
async signIn(key: Uint8Array) { async signIn(key: Uint8Array) {
await login(key); await login(key);
// await loginComplete(); # this function is buggy `auth.ts:42 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'promise') `
setLoggedIn(true);
},
async signOut() {
// await logoutComplete();
setLoggedIn(false);
}, },
signOut: () => {},
}; };
} }

View File

@ -7,8 +7,7 @@ const LumeLogoBg = ({ className }: { className?: string }) => {
viewBox="0 0 524 500" viewBox="0 0 524 500"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink">
>
<mask <mask
id="mask0_902_66" id="mask0_902_66"
style={{ maskType: "alpha" }} style={{ maskType: "alpha" }}
@ -16,8 +15,7 @@ const LumeLogoBg = ({ className }: { className?: string }) => {
x="-2" x="-2"
y="-1" y="-1"
width="404" width="404"
height="349" height="349">
>
<rect <rect
x="-1.04292" x="-1.04292"
y="346.31" y="346.31"
@ -41,8 +39,7 @@ const LumeLogoBg = ({ className }: { className?: string }) => {
id="pattern0" id="pattern0"
patternContentUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"
width="1" width="1"
height="1" height="1">
>
<use <use
xlinkHref="#image0_902_66" xlinkHref="#image0_902_66"
transform="matrix(0.000399371 0 0 0.000331658 0.0222222 0.0369089)" transform="matrix(0.000399371 0 0 0.000331658 0.0222222 0.0369089)"
@ -54,8 +51,7 @@ const LumeLogoBg = ({ className }: { className?: string }) => {
y1="186.741" y1="186.741"
x2="-59.0615" x2="-59.0615"
y2="163.457" y2="163.457"
gradientUnits="userSpaceOnUse" gradientUnits="userSpaceOnUse">
>
<stop stopColor="#1FC3F7" /> <stop stopColor="#1FC3F7" />
<stop offset="0.534226" stopColor="#33A653" /> <stop offset="0.534226" stopColor="#33A653" />
<stop offset="0.799851" stopColor="#62C554" /> <stop offset="0.799851" stopColor="#62C554" />

View File

@ -15,6 +15,7 @@ import { useMemo, useState } from "react";
import * as bip39 from "@scure/bip39"; import * as bip39 from "@scure/bip39";
import { wordlist } from "@scure/bip39/wordlists/english"; import { wordlist } from "@scure/bip39/wordlists/english";
import { TW_PREFIX } from "../../../../scoped-tailwind-prefix";
async function seedToKey(seed: string) { async function seedToKey(seed: string) {
return bip39.mnemonicToSeed(seed); return bip39.mnemonicToSeed(seed);
@ -96,9 +97,11 @@ const SetupAccountKeyComponent = () => {
transition={{ type: "just", delay: 0.1 }} transition={{ type: "just", delay: 0.1 }}
className="min-h-12 h-full max-w-full" className="min-h-12 h-full max-w-full"
style={{ maxWidth: width ?? "auto" }} style={{ maxWidth: width ?? "auto" }}
ref={(t) => ref={(t) => {
setTimeout(() => setWidth(t!.getBoundingClientRect().width!), 0) if (t) {
}> setTimeout(() => setWidth(t.getBoundingClientRect().width!), 0);
}
}}>
<Button <Button
className="w-full h-full" className="w-full h-full"
onClick={() => setVisibleComponent(SeedPhraseGeneration)}> onClick={() => setVisibleComponent(SeedPhraseGeneration)}>
@ -150,15 +153,15 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
transition={{ type: "tween", duration: 0.1 }}></m.div> transition={{ type: "tween", duration: 0.1 }}></m.div>
) : null} ) : null}
</AnimatePresence> </AnimatePresence>
<div className="z-20 relative mb-2.5 w-full h-full flex-wrap justify-center items-center gap-2.5 inline-flex"> <div className="z-20 relative mb-2 w-full h-full flex-wrap justify-center items-center gap-2 inline-flex">
{phrases.map((phrase, index) => ( {phrases.map((phrase, index) => (
<div <div
key={`SeedPhrase_${index}`} key={`SeedPhrase_${index}`}
className={`justify-center items-center gap-2.5 flex w-[calc(33%-10px)] h-10 rounded border border-current relative ring-current text-neutral-700`}> className={`${TW_PREFIX} relative justify-center items-center gap-2 flex h-10 rounded border border-current ring-current text-neutral-700 w-[calc(33%-8px)]`}>
<span className=" text-white text-md font-normal leading-normal w-full h-fit px-2.5 bg-transparent text-center"> <span className="${TW_PREFIX} text-white text-md font-normal leading-normal w-full h-fit px-2 bg-transparent text-center">
{phrase} {phrase}
</span> </span>
<span className="left-[6px] top-0 absolute text-current text-xs font-normal leading-normal"> <span className="${TW_PREFIX} left-[6px] top-0 absolute text-current text-xs font-normal leading-normal">
{index + 1} {index + 1}
</span> </span>
</div> </div>
@ -177,7 +180,7 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
) : null} ) : null}
</AnimatePresence> </AnimatePresence>
<Button <Button
className={`w-full h-12 ${ className={`${TW_PREFIX} w-[calc(100%-8px)] h-12 ${
buttonClickedState === "clicked" buttonClickedState === "clicked"
? "!text-primary !border-primary" ? "!text-primary !border-primary"
: "" : ""
@ -194,7 +197,7 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
</div> </div>
{step === 0 ? ( {step === 0 ? (
<Button <Button
className="z-20 w-full h-12 text-white bg-neutral-700 hover:bg-neutral-800" className="z-20 ml-1 w-[calc(100%-8px)] h-12 text-white border border-neutral-700 bg-neutral-700 hover:bg-neutral-800"
variant="secondary" variant="secondary"
onClick={() => setStep(1)}> onClick={() => setStep(1)}>
Continue Continue

View File

@ -48,12 +48,12 @@ const LumeProvider = ({ children }: { children: ReactNode }) => {
(id: string, newNetwork: NetworkStatus & { syncState: SyncState }) => { (id: string, newNetwork: NetworkStatus & { syncState: SyncState }) => {
setLume((prevLume) => { setLume((prevLume) => {
const updatedNetworks = prevLume.networks.map((network) => const updatedNetworks = prevLume.networks.map((network) =>
network.id === id ? { ...network, ...newNetwork } : network network.id === id ? { ...network, ...newNetwork } : network,
); );
return { ...prevLume, networks: updatedNetworks }; return { ...prevLume, networks: updatedNetworks };
}); });
}, },
[] [],
); );
const update = async () => { const update = async () => {

View File

@ -1,6 +1,6 @@
import { type ClassValue, clsx } from "clsx" import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge" import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs));
} }

2
src/vite-env.d.ts vendored
View File

@ -1,2 +1,2 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" /> /// <reference types="vite-plugin-svgr/client" />

View File

@ -6,13 +6,14 @@ import svgr from "vite-plugin-svgr";
import dts from "vite-plugin-dts"; import dts from "vite-plugin-dts";
import optimizer from "vite-plugin-optimizer"; import optimizer from "vite-plugin-optimizer";
import noBundlePlugin from "vite-plugin-no-bundle"; import noBundlePlugin from "vite-plugin-no-bundle";
import { TW_PREFIX } from "./scoped-tailwind-prefix";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
svgr(), svgr(),
react(), react(),
scopeTailwind({ react: true }), scopeTailwind({ react: true, prefix: TW_PREFIX, classNameTransformers: ['cn'] }),
dts({ dts({
tsconfigPath: "tsconfig.build.json", tsconfigPath: "tsconfig.build.json",
}), }),