From bcd4f279a8e9b344576885c82c0318f109c7efe1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Thu, 8 Aug 2024 14:28:06 -0500 Subject: [PATCH] feat: radius --- .../customize/[embed]/components/Color.tsx | 1 - .../customize/[embed]/components/Radius.tsx | 24 ++ .../tools/embed/customize/[embed]/page.tsx | 391 +----------------- src/components/PageWrapper.tsx | 2 +- src/stores/embedState/constants.ts | 1 - src/stores/embedState/index.ts | 5 - 6 files changed, 31 insertions(+), 393 deletions(-) create mode 100644 src/app/tools/embed/customize/[embed]/components/Radius.tsx diff --git a/src/app/tools/embed/customize/[embed]/components/Color.tsx b/src/app/tools/embed/customize/[embed]/components/Color.tsx index d25a008e5..324538f6e 100644 --- a/src/app/tools/embed/customize/[embed]/components/Color.tsx +++ b/src/app/tools/embed/customize/[embed]/components/Color.tsx @@ -5,7 +5,6 @@ import { EmbedPreviewControllerProps } from '../page'; export function Color({ configKey }: EmbedPreviewControllerProps) { const mutateEmbedState = EmbedState.useMutation(); - const embedStore = EmbedState.useStore(); const input = useRef(null); return ( diff --git a/src/app/tools/embed/customize/[embed]/components/Radius.tsx b/src/app/tools/embed/customize/[embed]/components/Radius.tsx new file mode 100644 index 000000000..806975919 --- /dev/null +++ b/src/app/tools/embed/customize/[embed]/components/Radius.tsx @@ -0,0 +1,24 @@ +import { Slider } from '@radix-ui/themes'; +import * as EmbedState from '../../../../../../stores/embedState'; +import { EmbedPreviewControllerProps } from '../page'; + +export function Radius({ configKey }: EmbedPreviewControllerProps) { + const mutateEmbedState = EmbedState.useMutation(); + return ( + { + const radius = state[configKey] as EmbedState.RadixRadius; + return radius === 'full' ? 5 : parseInt(radius); + }), + ]} + onValueChange={([value]) => { + mutateEmbedState((draft) => { + draft[configKey] = value === 5 ? 'full' : `${value}`; + }); + }} + /> + ); +} diff --git a/src/app/tools/embed/customize/[embed]/page.tsx b/src/app/tools/embed/customize/[embed]/page.tsx index 2da7270a1..550c4c8d0 100644 --- a/src/app/tools/embed/customize/[embed]/page.tsx +++ b/src/app/tools/embed/customize/[embed]/page.tsx @@ -12,6 +12,7 @@ import { EmbedItemType } from '../../../../../stores/embedState/constants'; import { configurations, previews } from '../../configurations'; import { Boolean } from './components/Boolean'; import { Color } from './components/Color'; +import { Radius } from './components/Radius'; export interface EmbedPreviewControllerProps { configKey: string; @@ -65,6 +66,11 @@ export default function Page({ control = ; break; } + + case EmbedItemType.Radius: { + control = ; + break; + } } return ( @@ -82,391 +88,6 @@ export default function Page({ ); })} - - {/* {Object.entries(config).map(([configKeyRaw, configItem]) => { - const configKey = configKeyRaw as keyof ( - | Immutable> - | ExtractEmbedConfigTypes - ); - const stateItem = state[configKey]; - let control: ReactNode; - - if (configItem.type === EmbedItemType.Slider) { - control = ( - - } - config={configItem as EmbedItemType} - /> - ); - } - - // switch (configItem.type) { - // case EmbedConfigType.Slider: { - // control = ( - - // ); - // break; - // } - - // case EmbedConfigType.Boolean: { - // control = ( - // - // mutateState((draft) => { - // (draft[configKey] as boolean) = checked; - // }) - // } - // /> - // ); - // break; - // } - - // case EmbedConfigType.RichText: { - // control = ( - // <> - // ['default']).color}`} - // onValueChange={(value) => { - // mutateState((draft) => { - // ( - // draft[ - // configKey - // ] as EmbedConfigItemType['default'] - // ).color = value as RadixTextColor; - // }); - // }} - // > - // - // - // - // {' '} - // White - // - // - // {' '} - // Gray - // - // {Object.entries(radixColors) - // .filter( - // ([key]) => - // !key.endsWith('A') && - // !key.endsWith('P3') && - // !key.endsWith('Dark') && - // !radixGrays.includes(key), - // ) - // .map(([key]) => ( - // - // {' '} - // {capitalize(key)} - // - // ))} - // - // - // ['default'] - // ).size - // } - // onValueChange={(value) => { - // mutateState((draft) => { - // ( - // draft[ - // configKey - // ] as EmbedConfigItemType['default'] - // ).size = value as RadixSizeWithout0; - // }); - // }} - // > - // - // - // {times(9, (index) => ( - // - // Size {index + 1} - // - // ))} - // - // - // ['default'] - // ).weight - // } - // onValueChange={(value) => { - // mutateState((draft) => { - // ( - // draft[ - // configKey - // ] as EmbedConfigItemType['default'] - // ).weight = value as RadixTextWeight; - // }); - // }} - // > - // - // - // {radixTextWeights.map((weight) => ( - // - // {startCase(weight)} - // - // ))} - // - // - // - // ); - // break; - // } - - // case EmbedConfigType.Number: { - // control = ( - // { - // mutateState((draft) => { - // (draft[configKey] as number) = ( - // event.target as HTMLInputElement - // ).valueAsNumber; - // }); - // }} - // > - // {configItem.unit && ( - // px - // )} - // - // ); - // break; - // } - - // case EmbedConfigType.String: { - // control = ( - // { - // mutateState((draft) => { - // (draft[configKey] as string) = ( - // event.target as HTMLInputElement - // ).value; - // }); - // }} - // /> - // ); - // break; - // } - - // case EmbedConfigType.SizeWithout0: - // case EmbedConfigType.Size: { - // control = ( - // - // mutateState((draft) => { - // (draft[configKey] as RadixSize) = - // `${value}` as RadixSize; - // }) - // } - // /> - // ); - // break; - // } - - // case EmbedConfigType.Radius: { - // control = ( - // - // mutateState((draft) => { - // (draft[configKey] as RadixRadius) = ( - // value === 5 ? 'full' : `${value}` - // ) as RadixRadius; - // }) - // } - // /> - // ); - // break; - // } - - // case EmbedConfigType.Color: { - // control = ( - // <> - // { - // mutateState((draft) => { - // (draft[configKey] as RadixColor).base = - // value as RadixColorBase; - // }); - // }} - // > - // - // - // {Object.entries(radixColors) - // .filter( - // ([key]) => - // !key.endsWith('A') && - // !key.endsWith('P3') && - // !key.endsWith('Dark'), - // ) - // .map(([key]) => ( - // - // {' '} - // {capitalize(key)} - // - // ))} - // - // - - // { - // mutateState((draft) => { - // (draft[configKey] as RadixColor).variant = - // value as RadixColorVariant; - // }); - // }} - // > - // - // - // {times(12, (index) => { - // const variant = - // `${index + 1}` as RadixColorVariantRaw; - - // return ( - // <> - // - // {' '} - // {variant} - // - // - // - // - // {' '} - // {variant} translucent - // - // - // ); - // })} - // - // - // - // ); - // break; - // } - // } - - return ( - - {capitalize(startCase(configKey as string))} - - {control && {control}} - {!control && Immutable} - - ); - })} */} diff --git a/src/components/PageWrapper.tsx b/src/components/PageWrapper.tsx index 32df02174..1900d58a0 100644 --- a/src/components/PageWrapper.tsx +++ b/src/components/PageWrapper.tsx @@ -1,6 +1,6 @@ import { Flex, FlexProps, Theme } from '@radix-ui/themes'; import { ComponentProps } from 'react'; -import { RadixSize } from '../stores/embedState/constants'; +import { RadixSize } from '../stores/embedState'; type PageWrapperProps = FlexProps & { color?: ComponentProps['accentColor']; diff --git a/src/stores/embedState/constants.ts b/src/stores/embedState/constants.ts index 77e94bbf8..0926716b6 100644 --- a/src/stores/embedState/constants.ts +++ b/src/stores/embedState/constants.ts @@ -1,7 +1,6 @@ import { EmbedConfigItem } from '.'; export enum EmbedItemType { - Number, Radius, Size, SizeWithout0, diff --git a/src/stores/embedState/index.ts b/src/stores/embedState/index.ts index e0a693b56..81967bdab 100644 --- a/src/stores/embedState/index.ts +++ b/src/stores/embedState/index.ts @@ -45,11 +45,6 @@ export type EmbedConfigItem = ( type: EmbedItemType.Boolean; default: boolean; } - | { - type: EmbedItemType.Number; - default: number; - unit?: string; - } | { type: EmbedItemType.String; default: string;