From 0da60ca5df3ff2cf504c17aae1be61de149eae6b Mon Sep 17 00:00:00 2001 From: indaviande Date: Mon, 9 Dec 2024 10:43:16 +0100 Subject: [PATCH 1/9] change secondary to main --- src/components/primitives/Text.tsx | 33 ++++++++++++++---- src/components/primitives/Title.tsx | 52 ++++++++++++++++++++++++----- 2 files changed, 71 insertions(+), 14 deletions(-) diff --git a/src/components/primitives/Text.tsx b/src/components/primitives/Text.tsx index edc2f9f8..64a57d7c 100644 --- a/src/components/primitives/Text.tsx +++ b/src/components/primitives/Text.tsx @@ -9,7 +9,7 @@ export const textStyles = tv( look: { base: "text-main-11", soft: "text-main-11", - bold: "text-secondary-12", + bold: "text-main-12", tint: "text-accent-12", hype: "text-accent-11", }, @@ -19,7 +19,8 @@ export const textStyles = tv( md: "text-base", lg: "text-lg", xl: "text-xl", - display1: "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]", + display1: + "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]", 1: "font-title !text-3xl", 2: "font-title font-bold leading-none italic !text-[clamp(52px,1vw+2.875rem,64px)]", 3: "font-title font-bold leading-snug italic !text-[clamp(28px,1vw+1.375rem,40px)]", @@ -49,12 +50,32 @@ export const textStyles = tv( { look: "hype", interactable: true, class: "hover:text-main-12" }, ], }, - { twMerge: false }, + { twMerge: false } ); -export type TextProps = Component & { bold?: boolean }, HTMLParagraphElement>; +export type TextProps = Component< + Styled & { bold?: boolean }, + HTMLParagraphElement +>; -export default function Text({ look, size, style, bold, interactable, className, ...props }: TextProps) { +export default function Text({ + look, + size, + style, + bold, + interactable, + className, + ...props +}: TextProps) { const styleBold = bold ? "font-bold" : ""; - return

; + return ( +

+ ); } diff --git a/src/components/primitives/Title.tsx b/src/components/primitives/Title.tsx index 3365fd2f..ae0e2cb0 100644 --- a/src/components/primitives/Title.tsx +++ b/src/components/primitives/Title.tsx @@ -11,7 +11,7 @@ export const titleStyles = tv( look: { base: "text-main-12", soft: "text-main-11", - bold: "text-secondary-12", + bold: "text-main-12", hype: "text-accent-12", }, }, @@ -20,7 +20,7 @@ export const titleStyles = tv( look: "base", }, }, - { twMerge: false }, + { twMerge: false } ); export type TitleProps = Component< @@ -31,19 +31,55 @@ export type TitleProps = Component< HTMLHeadingElement >; -export default function Title({ look, h, size: _size, className, ...props }: TitleProps) { +export default function Title({ + look, + h, + size: _size, + className, + ...props +}: TitleProps) { const size = _size ?? h; switch (h) { case 1: - return

; + return ( +

+ ); case 2: - return

; + return ( +

+ ); case 3: - return

; + return ( +

+ ); case 4: - return

; + return ( +

+ ); case 5: - return

; + return ( +
+ ); default: break; } From 28fbe39972d3a437c4abe3a0434415aaf09b0bff Mon Sep 17 00:00:00 2001 From: indaviande Date: Mon, 9 Dec 2024 14:38:48 +0100 Subject: [PATCH 2/9] change pagination --- src/components/primitives/Icon.tsx | 2 +- src/components/primitives/Tabs.tsx | 102 +++++++++++++++++++---------- 2 files changed, 69 insertions(+), 35 deletions(-) diff --git a/src/components/primitives/Icon.tsx b/src/components/primitives/Icon.tsx index 5beab083..3ecd6ded 100644 --- a/src/components/primitives/Icon.tsx +++ b/src/components/primitives/Icon.tsx @@ -6,7 +6,7 @@ import type { Component, Styled } from "../.."; import Image from "./Image"; export const iconStyles = tv({ - base: "flex flex-col border-0 gap-1 overflow-hidden self-center rounded-sm w-[calc(1em+2px)] h-[calc(1em+2px)]", + base: "flex flex-col border-0 gap-1 overflow-hidden self-center rounded-sm w-[1em] h-[1em]", variants: { size: { xs: "", diff --git a/src/components/primitives/Tabs.tsx b/src/components/primitives/Tabs.tsx index 0b3eb039..c96ead40 100644 --- a/src/components/primitives/Tabs.tsx +++ b/src/components/primitives/Tabs.tsx @@ -6,6 +6,7 @@ import { mergeClass } from "../../utils/css"; import type { Component, Styled, Themable } from "../../utils/types"; import Group from "../extenders/Group"; import EventBlocker from "./EventBlocker"; +import { Container } from "dappkit"; export const tabsStyles = tv( { @@ -14,50 +15,61 @@ export const tabsStyles = tv( base: "flex items-center ease !leading-none text-xl border-main-0 font-bold select-none focus-visible:outline focus-visible:outline-dashed focus-visible:outline-main-12 text-nowrap font-text", line: "", active: "", + container: "", }, variants: { look: { soft: { base: "text-main-12", - line: "border-b-1 border-accent-11", + line: "border-accent-11", active: "border-accent-11", + container: "", }, base: { base: "text-main-12", - line: "border-b-1 border-accent-11", + line: "border-accent-11", active: "border-accent-11", + container: "bg-main-3", }, bold: { base: "text-main-12", - line: "border-b-1 border-accent-11", + line: "border-accent-11", active: "border-accent-11", + container: "", }, tint: { base: "text-main-12", - line: "border-b-1 border-accent-11", + line: "border-accent-11", active: "border-accent-11", + container: "", }, hype: { base: "text-main-12", - line: "border-b-1 border-accent-11", + line: "border-accent-11", active: "border-accent-11", + container: "", }, }, size: { xs: { - base: "border-b-1 pb-xs gap-sm text-xs", + base: "pb-xs gap-sm text-xs", + container: "mb-xs pt-xs*2", }, sm: { base: "border-b-2 pb-sm gap-sm text-sm", + container: "mb-sm pt-sm*2", }, md: { base: "border-b-4 pb-md gap-sm text-base", + container: "mb-md pt-md*2", }, lg: { base: "border-b-5 pb-lg gap-sm text-lg", + container: "mb-lg pt-lg*2", }, xl: { base: "border-b-6 pb-xl gap-sm text-xl", + container: "mb-xl pt-xl*2", }, }, }, @@ -66,7 +78,7 @@ export const tabsStyles = tv( size: "md", }, }, - { twMerge: false }, + { twMerge: false } ); type TabsStyleProps = VariantProps; @@ -86,43 +98,65 @@ export type TabsProps = Component< HTMLButtonElement >; -export default function Tabs({ look, size, to, theme, className, tabs = [], ...props }: TabsProps) { +export default function Tabs({ + look, + size, + to, + theme, + className, + tabs = [], + ...props +}: TabsProps) { const themeVars = useThemableProps(props); const styleProps = tabsStyles({ look, size }); const location = useLocation(); - const { base, active, line } = tabsStyles({ + const { base, active, line, container } = tabsStyles({ look: look ?? "base", size: size ?? "md", }); return ( - - {tabs.map(tab => { - return ( - <> - {tab.link ? ( - - + + {tabs.map((tab) => { + return ( + <> + {tab.link ? ( + + + {tab.label} + + + ) : ( + - )} - - ); - })} - + + )} + + ); + })} + + ); } From 1aae3e5efde57b0c4525e4eaf468231d29b62481 Mon Sep 17 00:00:00 2001 From: indaviande Date: Mon, 9 Dec 2024 15:39:32 +0100 Subject: [PATCH 3/9] change Select & tabs --- src/components/extenders/Select.tsx | 129 ++++++++++++++++++---------- src/components/primitives/Tabs.tsx | 66 +++++++------- src/components/primitives/Text.tsx | 6 +- 3 files changed, 119 insertions(+), 82 deletions(-) diff --git a/src/components/extenders/Select.tsx b/src/components/extenders/Select.tsx index f99e0a2a..2faa7574 100644 --- a/src/components/extenders/Select.tsx +++ b/src/components/extenders/Select.tsx @@ -17,7 +17,8 @@ export const selectStyles = tv({ "text-main-11 rounded-sm flex items-center dim focus-visible:outline-main-12 !leading-none justify-between gap-1 text-nowrap font-text font-semibold", ], slots: { - dropdown: "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]", + dropdown: + "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]", item: "rounded-sm flex justify-between items-center gap-lg cursor-pointer select-none p-sm outline-offset-0 outline-0 text-nowrap focus-visible:outline-main-12", icon: "flex items-center", value: "flex gap-sm items-center", @@ -27,26 +28,26 @@ export const selectStyles = tv({ variants: { look: { soft: { - base: "bg-main-0 border-main-9 active:text-main-12 text-main-11", + base: "bg-main-0 active:text-main-12 text-main-11", icon: "border-main-0", item: "hover:bg-main-5 data-[active-item]:bg-main-5 active:bg-main-4 text-main-12", }, base: { + base: "bg-main-0 border-main-9 border-1 active:text-main-12 text-main-11", + icon: "border-main-0", + item: "hover:bg-main-5 data-[active-item]:bg-main-5 active:bg-main-4 text-main-12", + }, + bold: { base: "bg-main-1 active:text-main-12 text-main-11", icon: "", item: "hover:bg-main-5 data-[active-item]:bg-main-5 active:bg-main-4 text-main-12", check: "text-accent-10", }, - bold: { + tint: { base: "bg-main-5 active:text-main-12 text-main-11", icon: "", item: "hover:bg-main-3 data-[active-item]:bg-main-6 active:bg-main-5 text-main-12", }, - tint: { - base: "bg-main-8 active:text-main-12 text-main-11", - icon: "", - item: "hover:bg-accent-6 data-[active-item]:bg-accent-6 active:bg-accent-5 text-main-12", - }, hype: { base: "bg-accent-5 active:text-main-12 text-accent-11", icon: "", @@ -55,35 +56,35 @@ export const selectStyles = tv({ }, size: { xs: { - base: "text-xs", + base: "gap-xs text-xs", value: "px-sm*2 py-xs*2", icon: "text-sm", item: "px-md text-xs", prefixLabel: "text-xs", }, sm: { - base: "text-sm", + base: "gap-sm text-sm", value: "px-md py-sm", icon: "text-base", item: "px-md text-sm", prefixLabel: "text-sm", }, md: { - base: "text-md", + base: "gap-md text-md", value: "px-md text-md py-md", icon: "text-lg", item: "px-md text-md", prefixLabel: "text-sm", }, lg: { - base: "text-lg", + base: "gap-lg text-lg", value: "px-xl/2 py-lg", icon: "text-xl", item: "px-lg text-lg", prefixLabel: "text-base", }, xl: { - base: "text-xl", + base: "gap-xl text-xl", value: "px-sm*2 py-lg", icon: "text-xl", item: "px-xl text-xl", @@ -137,12 +138,14 @@ export type SelectProps = Component<{ }> & RadixSelect.SelectProps; -type MaybeArray = IsArray extends true ? T[] : T; +type MaybeArray = IsArray extends true + ? T[] + : T; export default function Select< T extends string | number, Multiple extends undefined | boolean, - Value extends MaybeArray, + Value extends MaybeArray >({ look, size, @@ -174,35 +177,45 @@ export default function Select< }); const value = useMemo(() => getter ?? internal, [getter, internal]); - const setValue = useCallback((v: Value) => setter?.(v) ?? setInternal(v), [setter]); + const setValue = useCallback( + (v: Value) => setter?.(v) ?? setInternal(v), + [setter] + ); const [searchInput, setSearch] = useState(); const matches = useMemo(() => { if (!search) return Object.keys(options ?? {}); // const textToMatch = Object.keys(options ?? {}).map(option => `${option}_${options[option]?.props?.children?.filter(a => typeof a !== "object").join(" ")}`) - const textToMatch = Object.keys(options ?? {}).reduce( - (matches, option) => { - const opt = options?.[option]; - const key = - typeof opt === "string" - ? opt - : ( - options?.[option] as Exclude> - )?.props?.children - ?.filter?.((a: unknown) => typeof a !== "object") - ?.join(" "); + const textToMatch = Object.keys(options ?? {}).reduce((matches, option) => { + const opt = options?.[option]; + const key = + typeof opt === "string" + ? opt + : ( + options?.[option] as Exclude< + ReactNode, + string | number | boolean | Iterable + > + )?.props?.children + ?.filter?.((a: unknown) => typeof a !== "object") + ?.join(" "); - return Object.assign(matches, { [`${option}`]: option }, { [`${key}`]: option }); - }, - {} as { [key: string]: keyof typeof options }, - ); - const searchMatches = matchSorter(Object.keys(textToMatch), searchInput ?? "").map(key => textToMatch[key]); + return Object.assign( + matches, + { [`${option}`]: option }, + { [`${key}`]: option } + ); + }, {} as { [key: string]: keyof typeof options }); + const searchMatches = matchSorter( + Object.keys(textToMatch), + searchInput ?? "" + ).map((key) => textToMatch[key]); const uniqueOptionMatches = Array.from( searchMatches.reduce((set, option) => { set.add(option); return set; - }, new Set()), + }, new Set()) ) as (typeof value)[]; return uniqueOptionMatches; @@ -211,7 +224,9 @@ export default function Select< const label = useMemo(() => { if ( value && - (typeof value === "number" || typeof value === "string" || typeof value === "symbol") && + (typeof value === "number" || + typeof value === "string" || + typeof value === "symbol") && options?.[value] ) return options?.[value]; @@ -221,8 +236,9 @@ export default function Select< + "w-[1.2em] h-[1.2em] flex items-center justify-center rounded-full bg-main-6 text-main-12" + )} + > {value.length} {" "} {placeholder} @@ -234,17 +250,23 @@ export default function Select< return ( { + setValue={(value) => { setSearch(value); - }}> + }} + > setValue(v as Value)} + setValue={(v) => setValue(v as Value)} value={value as string} - defaultValue={multiple ? [] : undefined}> + defaultValue={multiple ? [] : undefined} + >
{label}
- {loading ? : } + {loading ? ( + + ) : ( + + )}
@@ -254,7 +276,11 @@ export default function Select< )} @@ -264,7 +290,9 @@ export default function Select< setValue((!!multiple ? [] : undefined) as any as Value)} + onClick={() => + setValue((!!multiple ? [] : undefined) as any as Value) + } render={ 0) || value === undefined) && "opacity-0", + !( + (typeof value === "object" && + value?.length > 0) || + value === undefined + ) && "opacity-0" )} size="sm" remix="RiCheckFill" @@ -285,7 +317,7 @@ export default function Select< } /> )} - {matches?.map(_value => ( + {matches?.map((_value) => ( - - {tabs.map((tab) => { - return ( - <> - {tab.link ? ( - - + + + {tabs.map((tab) => { + return ( + <> + {tab.link ? ( + + + {tab.label} + + + ) : ( + - )} - - ); - })} - - + + )} + + ); + })} + + + ); } diff --git a/src/components/primitives/Text.tsx b/src/components/primitives/Text.tsx index 64a57d7c..077a2c7a 100644 --- a/src/components/primitives/Text.tsx +++ b/src/components/primitives/Text.tsx @@ -22,9 +22,9 @@ export const textStyles = tv( display1: "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]", 1: "font-title !text-3xl", - 2: "font-title font-bold leading-none italic !text-[clamp(52px,1vw+2.875rem,64px)]", - 3: "font-title font-bold leading-snug italic !text-[clamp(28px,1vw+1.375rem,40px)]", - 4: "font-title leading-normal !text-[clamp(16px,1vw+1.375rem,30px)]", + 2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]", + 3: "font-title font-bold leading-none italic !text-[clamp(28px,1vw+1.375rem,40px)]", + 4: "font-title font-bold leading-[1.18] !text-[clamp(18px,0.667vw+0.875rem,26px)]", 5: "font-title font-bold leading-normal !text-[clamp(15px,0.25vw+0.84375rem,18px)] uppercase tracking-[1.6px] ", 6: "font-title !text-sm", }, From 19d3b2c4d81f81747af6bd5bc6cc7c7fb47512e5 Mon Sep 17 00:00:00 2001 From: indaviande Date: Mon, 9 Dec 2024 15:58:58 +0100 Subject: [PATCH 4/9] change modal --- src/components/dapp/WalletButton.tsx | 2 +- src/components/extenders/Modal.tsx | 2 +- src/components/primitives/Text.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/dapp/WalletButton.tsx b/src/components/dapp/WalletButton.tsx index 8349d055..d3cdcd2f 100644 --- a/src/components/dapp/WalletButton.tsx +++ b/src/components/dapp/WalletButton.tsx @@ -36,7 +36,7 @@ export default function WalletButton(props: ButtonProps) { if (!connected) return ( - }> + }> diff --git a/src/components/extenders/Modal.tsx b/src/components/extenders/Modal.tsx index 5de12c73..e591d53f 100644 --- a/src/components/extenders/Modal.tsx +++ b/src/components/extenders/Modal.tsx @@ -28,7 +28,7 @@ export default function Modal({ state, title, description, modal, children, clas - + {title && ( {typeof title === "string" ? {title} : title} diff --git a/src/components/primitives/Text.tsx b/src/components/primitives/Text.tsx index 077a2c7a..e2dc31e4 100644 --- a/src/components/primitives/Text.tsx +++ b/src/components/primitives/Text.tsx @@ -23,7 +23,7 @@ export const textStyles = tv( "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]", 1: "font-title !text-3xl", 2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]", - 3: "font-title font-bold leading-none italic !text-[clamp(28px,1vw+1.375rem,40px)]", + 3: "font-title font-bold leading-none italic !text-[clamp(26px,0.667vw+1.375rem,34px)]", 4: "font-title font-bold leading-[1.18] !text-[clamp(18px,0.667vw+0.875rem,26px)]", 5: "font-title font-bold leading-normal !text-[clamp(15px,0.25vw+0.84375rem,18px)] uppercase tracking-[1.6px] ", 6: "font-title !text-sm", From 931d0a3d8895109c2b82289c97247012a1e83ca6 Mon Sep 17 00:00:00 2001 From: indaviande Date: Mon, 9 Dec 2024 17:27:58 +0100 Subject: [PATCH 5/9] change Hero + connect wallet and search results modals --- README.md | 2 +- src/components/extenders/Modal.tsx | 2 +- src/components/extenders/Select.tsx | 107 +++++++++------------------ src/components/primitives/Box.tsx | 101 +++++++++++++------------ src/components/primitives/Icon.tsx | 2 +- src/components/primitives/Input.tsx | 2 +- src/components/primitives/Slider.tsx | 2 +- src/components/primitives/Tabs.tsx | 34 ++------- src/components/primitives/Text.tsx | 31 ++------ src/components/primitives/Title.tsx | 50 ++----------- 10 files changed, 112 insertions(+), 221 deletions(-) diff --git a/README.md b/README.md index 3ea5176a..d265ffed 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ import { tv } from 'tailwind-variants' export const buttonStyles = tv({ base: - 'text-main-11 flex items-center gap-1 border-1 outline-offset-0 outline-0 text-nowrap', + 'text-main-11 flex items-center border-1 outline-offset-0 outline-0 text-nowrap', variants: { look: { base: diff --git a/src/components/extenders/Modal.tsx b/src/components/extenders/Modal.tsx index e591d53f..2b44e36c 100644 --- a/src/components/extenders/Modal.tsx +++ b/src/components/extenders/Modal.tsx @@ -28,7 +28,7 @@ export default function Modal({ state, title, description, modal, children, clas - + {title && ( {typeof title === "string" ? {title} : title} diff --git a/src/components/extenders/Select.tsx b/src/components/extenders/Select.tsx index 2faa7574..f1616e1f 100644 --- a/src/components/extenders/Select.tsx +++ b/src/components/extenders/Select.tsx @@ -14,11 +14,10 @@ import Group from "./Group"; export const selectStyles = tv({ base: [ - "text-main-11 rounded-sm flex items-center dim focus-visible:outline-main-12 !leading-none justify-between gap-1 text-nowrap font-text font-semibold", + "text-main-11 rounded-sm flex items-center dim focus-visible:outline-main-12 !leading-none justify-between text-nowrap font-text font-semibold", ], slots: { - dropdown: - "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]", + dropdown: "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]", item: "rounded-sm flex justify-between items-center gap-lg cursor-pointer select-none p-sm outline-offset-0 outline-0 text-nowrap focus-visible:outline-main-12", icon: "flex items-center", value: "flex gap-sm items-center", @@ -138,14 +137,12 @@ export type SelectProps = Component<{ }> & RadixSelect.SelectProps; -type MaybeArray = IsArray extends true - ? T[] - : T; +type MaybeArray = IsArray extends true ? T[] : T; export default function Select< T extends string | number, Multiple extends undefined | boolean, - Value extends MaybeArray + Value extends MaybeArray, >({ look, size, @@ -177,45 +174,35 @@ export default function Select< }); const value = useMemo(() => getter ?? internal, [getter, internal]); - const setValue = useCallback( - (v: Value) => setter?.(v) ?? setInternal(v), - [setter] - ); + const setValue = useCallback((v: Value) => setter?.(v) ?? setInternal(v), [setter]); const [searchInput, setSearch] = useState(); const matches = useMemo(() => { if (!search) return Object.keys(options ?? {}); // const textToMatch = Object.keys(options ?? {}).map(option => `${option}_${options[option]?.props?.children?.filter(a => typeof a !== "object").join(" ")}`) - const textToMatch = Object.keys(options ?? {}).reduce((matches, option) => { - const opt = options?.[option]; - const key = - typeof opt === "string" - ? opt - : ( - options?.[option] as Exclude< - ReactNode, - string | number | boolean | Iterable - > - )?.props?.children - ?.filter?.((a: unknown) => typeof a !== "object") - ?.join(" "); + const textToMatch = Object.keys(options ?? {}).reduce( + (matches, option) => { + const opt = options?.[option]; + const key = + typeof opt === "string" + ? opt + : ( + options?.[option] as Exclude> + )?.props?.children + ?.filter?.((a: unknown) => typeof a !== "object") + ?.join(" "); - return Object.assign( - matches, - { [`${option}`]: option }, - { [`${key}`]: option } - ); - }, {} as { [key: string]: keyof typeof options }); - const searchMatches = matchSorter( - Object.keys(textToMatch), - searchInput ?? "" - ).map((key) => textToMatch[key]); + return Object.assign(matches, { [`${option}`]: option }, { [`${key}`]: option }); + }, + {} as { [key: string]: keyof typeof options }, + ); + const searchMatches = matchSorter(Object.keys(textToMatch), searchInput ?? "").map(key => textToMatch[key]); const uniqueOptionMatches = Array.from( searchMatches.reduce((set, option) => { set.add(option); return set; - }, new Set()) + }, new Set()), ) as (typeof value)[]; return uniqueOptionMatches; @@ -224,9 +211,7 @@ export default function Select< const label = useMemo(() => { if ( value && - (typeof value === "number" || - typeof value === "string" || - typeof value === "symbol") && + (typeof value === "number" || typeof value === "string" || typeof value === "symbol") && options?.[value] ) return options?.[value]; @@ -236,9 +221,8 @@ export default function Select< + "w-[1.2em] h-[1.2em] flex items-center justify-center rounded-full bg-main-6 text-main-12", + )}> {value.length} {" "} {placeholder} @@ -250,23 +234,17 @@ export default function Select< return ( { + setValue={value => { setSearch(value); - }} - > + }}> setValue(v as Value)} + setValue={v => setValue(v as Value)} value={value as string} - defaultValue={multiple ? [] : undefined} - > + defaultValue={multiple ? [] : undefined}>
{label}
- {loading ? ( - - ) : ( - - )} + {loading ? : }
@@ -276,11 +254,7 @@ export default function Select< )} @@ -290,9 +264,7 @@ export default function Select< - setValue((!!multiple ? [] : undefined) as any as Value) - } + onClick={() => setValue((!!multiple ? [] : undefined) as any as Value)} render={ 0) || - value === undefined - ) && "opacity-0" + !((typeof value === "object" && value?.length > 0) || value === undefined) && "opacity-0", )} size="sm" remix="RiCheckFill" @@ -317,7 +285,7 @@ export default function Select< } /> )} - {matches?.map((_value) => ( + {matches?.map(_value => ( + sizeScale.flatMap(content => [ + { + size, + content, + container: true as const, + class: `rounded-${size}+${content}` as `rounded-${typeof size}+${typeof content}`, + }, + { + size, + content, + container: false as const, + class: `rounded-${size}` as `rounded-${typeof size}`, + }, + ]), + ), }, - defaultVariants: { - size: "md", - content: "md", - look: "base", - container: true, - }, - compoundVariants: sizeScale.flatMap(size => - sizeScale.flatMap(content => [ - { - size, - content, - container: true as const, - class: `rounded-${size}+${content}` as `rounded-${typeof size}+${typeof content}`, - }, - { - size, - content, - container: false as const, - class: `rounded-${size}` as `rounded-${typeof size}`, - }, - ]), - ), -}); + { twMerge: false }, +); export type BoxProps = Component & Themable>; diff --git a/src/components/primitives/Icon.tsx b/src/components/primitives/Icon.tsx index 3ecd6ded..fe28ef0e 100644 --- a/src/components/primitives/Icon.tsx +++ b/src/components/primitives/Icon.tsx @@ -6,7 +6,7 @@ import type { Component, Styled } from "../.."; import Image from "./Image"; export const iconStyles = tv({ - base: "flex flex-col border-0 gap-1 overflow-hidden self-center rounded-sm w-[1em] h-[1em]", + base: "flex flex-col border-0 overflow-hidden self-center rounded-sm w-[1em] h-[1em]", variants: { size: { xs: "", diff --git a/src/components/primitives/Input.tsx b/src/components/primitives/Input.tsx index c7b388fc..2c7c3bc4 100644 --- a/src/components/primitives/Input.tsx +++ b/src/components/primitives/Input.tsx @@ -7,7 +7,7 @@ import type { Component, GetSet, Styled } from "../../utils/types"; import Group from "../extenders/Group"; export const inputStyles = tv({ - base: "text-main-12 flex items-center gap-1 text-nowrap font-text", + base: "text-main-12 flex items-center text-nowrap font-text", variants: { look: { none: "bg-main-0 border-0", diff --git a/src/components/primitives/Slider.tsx b/src/components/primitives/Slider.tsx index 74dcce85..3addc17f 100644 --- a/src/components/primitives/Slider.tsx +++ b/src/components/primitives/Slider.tsx @@ -6,7 +6,7 @@ import type { Component, GetSet, Styled } from "../../utils/types"; export const sliderStyles = tv({ base: [ - "relative text-main-11 flex items-center justify-between gap-1 border-1 outline-offset-0 outline-0 text-nowrap font-text font-bold", + "relative text-main-11 flex items-center justify-between border-1 outline-offset-0 outline-0 text-nowrap font-text font-bold", ], slots: { thumb: "aspect-square text-xs border-1 bg-main-4 mt-sm shadow-md font-text font-normal", diff --git a/src/components/primitives/Tabs.tsx b/src/components/primitives/Tabs.tsx index 2b9d1ad7..c2956a23 100644 --- a/src/components/primitives/Tabs.tsx +++ b/src/components/primitives/Tabs.tsx @@ -1,4 +1,5 @@ import { Link, useLocation } from "@remix-run/react"; +import { Container } from "dappkit"; import type { ReactNode } from "react"; import { type VariantProps, tv } from "tailwind-variants"; import useThemableProps from "../../hooks/theming/useThemableProps"; @@ -6,7 +7,6 @@ import { mergeClass } from "../../utils/css"; import type { Component, Styled, Themable } from "../../utils/types"; import Group from "../extenders/Group"; import EventBlocker from "./EventBlocker"; -import { Container } from "dappkit"; export const tabsStyles = tv( { @@ -78,7 +78,7 @@ export const tabsStyles = tv( size: "md", }, }, - { twMerge: false } + { twMerge: false }, ); type TabsStyleProps = VariantProps; @@ -98,15 +98,7 @@ export type TabsProps = Component< HTMLButtonElement >; -export default function Tabs({ - look, - size, - to, - theme, - className, - tabs = [], - ...props -}: TabsProps) { +export default function Tabs({ look, size, to, theme, className, tabs = [], ...props }: TabsProps) { const themeVars = useThemableProps(props); const styleProps = tabsStyles({ look, size }); const location = useLocation(); @@ -120,7 +112,7 @@ export default function Tabs({ - {tabs.map((tab) => { + {tabs.map(tab => { return ( <> {tab.link ? ( @@ -128,13 +120,7 @@ export default function Tabs({ + className={mergeClass(styleProps, base(), className, location.pathname === tab.link && active())}> {tab.label} @@ -142,15 +128,9 @@ export default function Tabs({ )} diff --git a/src/components/primitives/Text.tsx b/src/components/primitives/Text.tsx index e2dc31e4..1134fa8b 100644 --- a/src/components/primitives/Text.tsx +++ b/src/components/primitives/Text.tsx @@ -19,8 +19,7 @@ export const textStyles = tv( md: "text-base", lg: "text-lg", xl: "text-xl", - display1: - "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]", + display1: "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]", 1: "font-title !text-3xl", 2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]", 3: "font-title font-bold leading-none italic !text-[clamp(26px,0.667vw+1.375rem,34px)]", @@ -50,32 +49,12 @@ export const textStyles = tv( { look: "hype", interactable: true, class: "hover:text-main-12" }, ], }, - { twMerge: false } + { twMerge: false }, ); -export type TextProps = Component< - Styled & { bold?: boolean }, - HTMLParagraphElement ->; +export type TextProps = Component & { bold?: boolean }, HTMLParagraphElement>; -export default function Text({ - look, - size, - style, - bold, - interactable, - className, - ...props -}: TextProps) { +export default function Text({ look, size, style, bold, interactable, className, ...props }: TextProps) { const styleBold = bold ? "font-bold" : ""; - return ( -

- ); + return

; } diff --git a/src/components/primitives/Title.tsx b/src/components/primitives/Title.tsx index ae0e2cb0..2880c70d 100644 --- a/src/components/primitives/Title.tsx +++ b/src/components/primitives/Title.tsx @@ -20,7 +20,7 @@ export const titleStyles = tv( look: "base", }, }, - { twMerge: false } + { twMerge: false }, ); export type TitleProps = Component< @@ -31,55 +31,19 @@ export type TitleProps = Component< HTMLHeadingElement >; -export default function Title({ - look, - h, - size: _size, - className, - ...props -}: TitleProps) { +export default function Title({ look, h, size: _size, className, ...props }: TitleProps) { const size = _size ?? h; switch (h) { case 1: - return ( -

- ); + return

; case 2: - return ( -

- ); + return

; case 3: - return ( -

- ); + return

; case 4: - return ( -

- ); + return

; case 5: - return ( -

- ); + return
; default: break; } From 653fb26aa9f47d6a6dc26f4d2df7e10f06563e6f Mon Sep 17 00:00:00 2001 From: indaviande Date: Mon, 9 Dec 2024 17:28:24 +0100 Subject: [PATCH 6/9] lint --- src/components/extenders/Select.tsx | 105 ++++++++++++++++++---------- 1 file changed, 70 insertions(+), 35 deletions(-) diff --git a/src/components/extenders/Select.tsx b/src/components/extenders/Select.tsx index f1616e1f..62d8ed10 100644 --- a/src/components/extenders/Select.tsx +++ b/src/components/extenders/Select.tsx @@ -17,7 +17,8 @@ export const selectStyles = tv({ "text-main-11 rounded-sm flex items-center dim focus-visible:outline-main-12 !leading-none justify-between text-nowrap font-text font-semibold", ], slots: { - dropdown: "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]", + dropdown: + "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]", item: "rounded-sm flex justify-between items-center gap-lg cursor-pointer select-none p-sm outline-offset-0 outline-0 text-nowrap focus-visible:outline-main-12", icon: "flex items-center", value: "flex gap-sm items-center", @@ -137,12 +138,14 @@ export type SelectProps = Component<{ }> & RadixSelect.SelectProps; -type MaybeArray = IsArray extends true ? T[] : T; +type MaybeArray = IsArray extends true + ? T[] + : T; export default function Select< T extends string | number, Multiple extends undefined | boolean, - Value extends MaybeArray, + Value extends MaybeArray >({ look, size, @@ -174,35 +177,45 @@ export default function Select< }); const value = useMemo(() => getter ?? internal, [getter, internal]); - const setValue = useCallback((v: Value) => setter?.(v) ?? setInternal(v), [setter]); + const setValue = useCallback( + (v: Value) => setter?.(v) ?? setInternal(v), + [setter] + ); const [searchInput, setSearch] = useState(); const matches = useMemo(() => { if (!search) return Object.keys(options ?? {}); // const textToMatch = Object.keys(options ?? {}).map(option => `${option}_${options[option]?.props?.children?.filter(a => typeof a !== "object").join(" ")}`) - const textToMatch = Object.keys(options ?? {}).reduce( - (matches, option) => { - const opt = options?.[option]; - const key = - typeof opt === "string" - ? opt - : ( - options?.[option] as Exclude> - )?.props?.children - ?.filter?.((a: unknown) => typeof a !== "object") - ?.join(" "); + const textToMatch = Object.keys(options ?? {}).reduce((matches, option) => { + const opt = options?.[option]; + const key = + typeof opt === "string" + ? opt + : ( + options?.[option] as Exclude< + ReactNode, + string | number | boolean | Iterable + > + )?.props?.children + ?.filter?.((a: unknown) => typeof a !== "object") + ?.join(" "); - return Object.assign(matches, { [`${option}`]: option }, { [`${key}`]: option }); - }, - {} as { [key: string]: keyof typeof options }, - ); - const searchMatches = matchSorter(Object.keys(textToMatch), searchInput ?? "").map(key => textToMatch[key]); + return Object.assign( + matches, + { [`${option}`]: option }, + { [`${key}`]: option } + ); + }, {} as { [key: string]: keyof typeof options }); + const searchMatches = matchSorter( + Object.keys(textToMatch), + searchInput ?? "" + ).map((key) => textToMatch[key]); const uniqueOptionMatches = Array.from( searchMatches.reduce((set, option) => { set.add(option); return set; - }, new Set()), + }, new Set()) ) as (typeof value)[]; return uniqueOptionMatches; @@ -211,7 +224,9 @@ export default function Select< const label = useMemo(() => { if ( value && - (typeof value === "number" || typeof value === "string" || typeof value === "symbol") && + (typeof value === "number" || + typeof value === "string" || + typeof value === "symbol") && options?.[value] ) return options?.[value]; @@ -221,8 +236,9 @@ export default function Select< + "w-[1.2em] h-[1.2em] flex items-center justify-center rounded-full bg-main-6 text-main-12" + )} + > {value.length} {" "} {placeholder} @@ -234,17 +250,23 @@ export default function Select< return ( { + setValue={(value) => { setSearch(value); - }}> + }} + > setValue(v as Value)} + setValue={(v) => setValue(v as Value)} value={value as string} - defaultValue={multiple ? [] : undefined}> + defaultValue={multiple ? [] : undefined} + >
{label}
- {loading ? : } + {loading ? ( + + ) : ( + + )}
@@ -254,7 +276,11 @@ export default function Select< )} @@ -264,7 +290,9 @@ export default function Select< setValue((!!multiple ? [] : undefined) as any as Value)} + onClick={() => + setValue((!!multiple ? [] : undefined) as any as Value) + } render={ 0) || value === undefined) && "opacity-0", + !( + (typeof value === "object" && + value?.length > 0) || + value === undefined + ) && "opacity-0" )} size="sm" remix="RiCheckFill" @@ -285,7 +317,7 @@ export default function Select< } /> )} - {matches?.map(_value => ( + {matches?.map((_value) => ( Date: Mon, 9 Dec 2024 17:39:51 +0100 Subject: [PATCH 7/9] fix lint --- src/components/extenders/Select.tsx | 103 ++++++++++------------------ 1 file changed, 35 insertions(+), 68 deletions(-) diff --git a/src/components/extenders/Select.tsx b/src/components/extenders/Select.tsx index 62d8ed10..8c0b0fdd 100644 --- a/src/components/extenders/Select.tsx +++ b/src/components/extenders/Select.tsx @@ -17,8 +17,7 @@ export const selectStyles = tv({ "text-main-11 rounded-sm flex items-center dim focus-visible:outline-main-12 !leading-none justify-between text-nowrap font-text font-semibold", ], slots: { - dropdown: - "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]", + dropdown: "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]", item: "rounded-sm flex justify-between items-center gap-lg cursor-pointer select-none p-sm outline-offset-0 outline-0 text-nowrap focus-visible:outline-main-12", icon: "flex items-center", value: "flex gap-sm items-center", @@ -138,14 +137,12 @@ export type SelectProps = Component<{ }> & RadixSelect.SelectProps; -type MaybeArray = IsArray extends true - ? T[] - : T; +type MaybeArray = IsArray extends true ? T[] : T; export default function Select< T extends string | number, Multiple extends undefined | boolean, - Value extends MaybeArray + Value extends MaybeArray, >({ look, size, @@ -177,45 +174,35 @@ export default function Select< }); const value = useMemo(() => getter ?? internal, [getter, internal]); - const setValue = useCallback( - (v: Value) => setter?.(v) ?? setInternal(v), - [setter] - ); + const setValue = useCallback((v: Value) => setter?.(v) ?? setInternal(v), [setter]); const [searchInput, setSearch] = useState(); const matches = useMemo(() => { if (!search) return Object.keys(options ?? {}); // const textToMatch = Object.keys(options ?? {}).map(option => `${option}_${options[option]?.props?.children?.filter(a => typeof a !== "object").join(" ")}`) - const textToMatch = Object.keys(options ?? {}).reduce((matches, option) => { - const opt = options?.[option]; - const key = - typeof opt === "string" - ? opt - : ( - options?.[option] as Exclude< - ReactNode, - string | number | boolean | Iterable - > - )?.props?.children - ?.filter?.((a: unknown) => typeof a !== "object") - ?.join(" "); + const textToMatch = Object.keys(options ?? {}).reduce( + (matches, option) => { + const opt = options?.[option]; + const key = + typeof opt === "string" + ? opt + : ( + options?.[option] as Exclude> + )?.props?.children + ?.filter?.((a: unknown) => typeof a !== "object") + ?.join(" "); - return Object.assign( - matches, - { [`${option}`]: option }, - { [`${key}`]: option } - ); - }, {} as { [key: string]: keyof typeof options }); - const searchMatches = matchSorter( - Object.keys(textToMatch), - searchInput ?? "" - ).map((key) => textToMatch[key]); + return Object.assign(matches, { [`${option}`]: option }, { [`${key}`]: option }); + }, + {} as { [key: string]: keyof typeof options }, + ); + const searchMatches = matchSorter(Object.keys(textToMatch), searchInput ?? "").map(key => textToMatch[key]); const uniqueOptionMatches = Array.from( searchMatches.reduce((set, option) => { set.add(option); return set; - }, new Set()) + }, new Set()), ) as (typeof value)[]; return uniqueOptionMatches; @@ -224,9 +211,7 @@ export default function Select< const label = useMemo(() => { if ( value && - (typeof value === "number" || - typeof value === "string" || - typeof value === "symbol") && + (typeof value === "number" || typeof value === "string" || typeof value === "symbol") && options?.[value] ) return options?.[value]; @@ -236,9 +221,8 @@ export default function Select< + "w-[1.2em] h-[1.2em] flex items-center justify-center rounded-full bg-main-6 text-main-12", + )}> {value.length} {" "} {placeholder} @@ -250,23 +234,17 @@ export default function Select< return ( { + setValue={value => { setSearch(value); - }} - > + }}> setValue(v as Value)} + setValue={v => setValue(v as Value)} value={value as string} - defaultValue={multiple ? [] : undefined} - > + defaultValue={multiple ? [] : undefined}>
{label}
- {loading ? ( - - ) : ( - - )} + {loading ? : }
@@ -276,11 +254,7 @@ export default function Select< )} @@ -289,8 +263,8 @@ export default function Select< {allOption && !searchInput && ( + // biome-ignore lint/suspicious/noExplicitAny: template makes this typing difficult even tough it works setValue((!!multiple ? [] : undefined) as any as Value) } render={ @@ -303,11 +277,7 @@ export default function Select< key="select" className={mergeClass( check(), - !( - (typeof value === "object" && - value?.length > 0) || - value === undefined - ) && "opacity-0" + !((typeof value === "object" && value?.length > 0) || value === undefined) && "opacity-0", )} size="sm" remix="RiCheckFill" @@ -317,7 +287,7 @@ export default function Select< } /> )} - {matches?.map((_value) => ( + {matches?.map(_value => ( Date: Mon, 9 Dec 2024 17:47:59 +0100 Subject: [PATCH 8/9] change import --- src/components/primitives/Tabs.tsx | 35 ++++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/src/components/primitives/Tabs.tsx b/src/components/primitives/Tabs.tsx index c2956a23..8c8923ee 100644 --- a/src/components/primitives/Tabs.tsx +++ b/src/components/primitives/Tabs.tsx @@ -1,5 +1,5 @@ import { Link, useLocation } from "@remix-run/react"; -import { Container } from "dappkit"; + import type { ReactNode } from "react"; import { type VariantProps, tv } from "tailwind-variants"; import useThemableProps from "../../hooks/theming/useThemableProps"; @@ -7,6 +7,7 @@ import { mergeClass } from "../../utils/css"; import type { Component, Styled, Themable } from "../../utils/types"; import Group from "../extenders/Group"; import EventBlocker from "./EventBlocker"; +import { Container } from "../.."; export const tabsStyles = tv( { @@ -78,7 +79,7 @@ export const tabsStyles = tv( size: "md", }, }, - { twMerge: false }, + { twMerge: false } ); type TabsStyleProps = VariantProps; @@ -98,7 +99,15 @@ export type TabsProps = Component< HTMLButtonElement >; -export default function Tabs({ look, size, to, theme, className, tabs = [], ...props }: TabsProps) { +export default function Tabs({ + look, + size, + to, + theme, + className, + tabs = [], + ...props +}: TabsProps) { const themeVars = useThemableProps(props); const styleProps = tabsStyles({ look, size }); const location = useLocation(); @@ -112,7 +121,7 @@ export default function Tabs({ look, size, to, theme, className, tabs = [], ...p - {tabs.map(tab => { + {tabs.map((tab) => { return ( <> {tab.link ? ( @@ -120,7 +129,13 @@ export default function Tabs({ look, size, to, theme, className, tabs = [], ...p + className={mergeClass( + styleProps, + base(), + className, + location.pathname === tab.link && active() + )} + > {tab.label} @@ -128,9 +143,15 @@ export default function Tabs({ look, size, to, theme, className, tabs = [], ...p )} From 7386f78c36c23fc493610eccde5c5f487df4021b Mon Sep 17 00:00:00 2001 From: indaviande Date: Mon, 9 Dec 2024 17:54:44 +0100 Subject: [PATCH 9/9] lint --- src/components/primitives/Tabs.tsx | 34 ++++++------------------------ 1 file changed, 7 insertions(+), 27 deletions(-) diff --git a/src/components/primitives/Tabs.tsx b/src/components/primitives/Tabs.tsx index 8c8923ee..6c10178d 100644 --- a/src/components/primitives/Tabs.tsx +++ b/src/components/primitives/Tabs.tsx @@ -2,12 +2,12 @@ import { Link, useLocation } from "@remix-run/react"; import type { ReactNode } from "react"; import { type VariantProps, tv } from "tailwind-variants"; +import { Container } from "../.."; import useThemableProps from "../../hooks/theming/useThemableProps"; import { mergeClass } from "../../utils/css"; import type { Component, Styled, Themable } from "../../utils/types"; import Group from "../extenders/Group"; import EventBlocker from "./EventBlocker"; -import { Container } from "../.."; export const tabsStyles = tv( { @@ -79,7 +79,7 @@ export const tabsStyles = tv( size: "md", }, }, - { twMerge: false } + { twMerge: false }, ); type TabsStyleProps = VariantProps; @@ -99,15 +99,7 @@ export type TabsProps = Component< HTMLButtonElement >; -export default function Tabs({ - look, - size, - to, - theme, - className, - tabs = [], - ...props -}: TabsProps) { +export default function Tabs({ look, size, to, theme, className, tabs = [], ...props }: TabsProps) { const themeVars = useThemableProps(props); const styleProps = tabsStyles({ look, size }); const location = useLocation(); @@ -121,7 +113,7 @@ export default function Tabs({ - {tabs.map((tab) => { + {tabs.map(tab => { return ( <> {tab.link ? ( @@ -129,13 +121,7 @@ export default function Tabs({ + className={mergeClass(styleProps, base(), className, location.pathname === tab.link && active())}> {tab.label} @@ -143,15 +129,9 @@ export default function Tabs({ )}