TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 12:09:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: radius

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-08-08 14:28:06 -05:00
1 parent 27cfc225de
commit bcd4f279a8
6 files changed
+31 -393
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/embed/customize/[embed]/components/Color.tsx
-1
View File
@@ -5,7 +5,6 @@ import { EmbedPreviewControllerProps } from '../page';
export function Color({ configKey }: EmbedPreviewControllerProps) { export function Color({ configKey }: EmbedPreviewControllerProps) {
const mutateEmbedState = EmbedState.useMutation(); const mutateEmbedState = EmbedState.useMutation();
const embedStore = EmbedState.useStore();
const input = useRef<HTMLInputElement>(null); const input = useRef<HTMLInputElement>(null);
return ( return (
src/app/tools/embed/customize/[embed]/components/Radius.tsx
+24
View File
@@ -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 (
<Slider
min={0}
max={5}
value={[
EmbedState.use((state) => {
const radius = state[configKey] as EmbedState.RadixRadius;
return radius === 'full' ? 5 : parseInt(radius);
}),
]}
onValueChange={([value]) => {
mutateEmbedState((draft) => {
draft[configKey] = value === 5 ? 'full' : `${value}`;
});
}}
/>
);
}
src/app/tools/embed/customize/[embed]/page.tsx
+6 -385
View File
@@ -12,6 +12,7 @@ import { EmbedItemType } from '../../../../../stores/embedState/constants';
import { configurations, previews } from '../../configurations'; import { configurations, previews } from '../../configurations';
import { Boolean } from './components/Boolean'; import { Boolean } from './components/Boolean';
import { Color } from './components/Color'; import { Color } from './components/Color';
import { Radius } from './components/Radius';
export interface EmbedPreviewControllerProps { export interface EmbedPreviewControllerProps {
configKey: string; configKey: string;
@@ -65,6 +66,11 @@ export default function Page({
control = <Color configKey={configKey} />; control = <Color configKey={configKey} />;
break; break;
} }
case EmbedItemType.Radius: {
control = <Radius configKey={configKey} />;
break;
}
} }
return ( return (
@@ -82,391 +88,6 @@ export default function Page({
</Flex> </Flex>
); );
})} })}
{/* {Object.entries(config).map(([configKeyRaw, configItem]) => {
const configKey = configKeyRaw as keyof (
| Immutable<ExtractEmbedConfigTypes<Config>>
| ExtractEmbedConfigTypes<Config>
);
const stateItem = state[configKey];
let control: ReactNode;
if (configItem.type === EmbedItemType.Slider) {
control = (
<Slider
state={
stateItem as EmbedConfigItemStateType<EmbedItemType.Slider>
}
config={configItem as EmbedItemType<EmbedItemType.Slider>}
/>
);
}
// switch (configItem.type) {
// case EmbedConfigType.Slider: {
// control = (
// );
// break;
// }
// case EmbedConfigType.Boolean: {
// control = (
// <Switch
// checked={state[configKey] as boolean}
// onCheckedChange={(checked) =>
// mutateState((draft) => {
// (draft[configKey] as boolean) = checked;
// })
// }
// />
// );
// break;
// }
// case EmbedConfigType.RichText: {
// control = (
// <>
// <Select.Root
// value={`${(state[configKey] as EmbedConfigItemType<EmbedConfigType.RichText>['default']).color}`}
// onValueChange={(value) => {
// mutateState((draft) => {
// (
// draft[
// configKey
// ] as EmbedConfigItemType<EmbedConfigType.RichText>['default']
// ).color = value as RadixTextColor;
// });
// }}
// >
// <Select.Trigger />
// <Select.Content>
// <Select.Item value="undefined">
// <Box
// style={{
// display: 'inline-block',
// width: '1em',
// height: '1em',
// verticalAlign: 'text-top',
// borderRadius: toRadiusVar('full'),
// backgroundColor: 'white',
// }}
// />{' '}
// White
// </Select.Item>
// <Select.Item value="gray">
// <Box
// style={{
// display: 'inline-block',
// width: '1em',
// height: '1em',
// verticalAlign: 'text-top',
// borderRadius: toRadiusVar('full'),
// backgroundColor: 'gray',
// }}
// />{' '}
// Gray
// </Select.Item>
// {Object.entries(radixColors)
// .filter(
// ([key]) =>
// !key.endsWith('A') &&
// !key.endsWith('P3') &&
// !key.endsWith('Dark') &&
// !radixGrays.includes(key),
// )
// .map(([key]) => (
// <Select.Item key={key} value={key}>
// <Box
// style={{
// display: 'inline-block',
// width: '1em',
// height: '1em',
// verticalAlign: 'text-top',
// borderRadius: toRadiusVar('full'),
// backgroundColor: toColorVar({
// base: key as RadixColorBase,
// variant: '9',
// }),
// }}
// />{' '}
// {capitalize(key)}
// </Select.Item>
// ))}
// </Select.Content>
// </Select.Root>
// <Select.Root
// value={
// (
// state[
// configKey
// ] as EmbedConfigItemType<EmbedConfigType.RichText>['default']
// ).size
// }
// onValueChange={(value) => {
// mutateState((draft) => {
// (
// draft[
// configKey
// ] as EmbedConfigItemType<EmbedConfigType.RichText>['default']
// ).size = value as RadixSizeWithout0;
// });
// }}
// >
// <Select.Trigger />
// <Select.Content>
// {times(9, (index) => (
// <Select.Item key={index} value={`${index + 1}`}>
// Size {index + 1}
// </Select.Item>
// ))}
// </Select.Content>
// </Select.Root>
// <Select.Root
// value={
// (
// state[
// configKey
// ] as EmbedConfigItemType<EmbedConfigType.RichText>['default']
// ).weight
// }
// onValueChange={(value) => {
// mutateState((draft) => {
// (
// draft[
// configKey
// ] as EmbedConfigItemType<EmbedConfigType.RichText>['default']
// ).weight = value as RadixTextWeight;
// });
// }}
// >
// <Select.Trigger />
// <Select.Content>
// {radixTextWeights.map((weight) => (
// <Select.Item key={weight} value={weight}>
// {startCase(weight)}
// </Select.Item>
// ))}
// </Select.Content>
// </Select.Root>
// </>
// );
// break;
// }
// case EmbedConfigType.Number: {
// control = (
// <TextField.Root
// style={{ width: 64 }}
// type="number"
// value={state[configKey] as number}
// onChange={(event) => {
// mutateState((draft) => {
// (draft[configKey] as number) = (
// event.target as HTMLInputElement
// ).valueAsNumber;
// });
// }}
// >
// {configItem.unit && (
// <TextField.Slot side="right">px</TextField.Slot>
// )}
// </TextField.Root>
// );
// break;
// }
// case EmbedConfigType.String: {
// control = (
// <TextField.Root
// placeholder="Empty"
// style={{ width: 64 }}
// value={state[configKey] as string}
// onChange={(event) => {
// mutateState((draft) => {
// (draft[configKey] as string) = (
// event.target as HTMLInputElement
// ).value;
// });
// }}
// />
// );
// break;
// }
// case EmbedConfigType.SizeWithout0:
// case EmbedConfigType.Size: {
// control = (
// <Slider
// value={[Number(state[configKey])]}
// min={
// configItem.type === EmbedConfigType.SizeWithout0 ? 1 : 0
// }
// max={9}
// onValueChange={([value]) =>
// mutateState((draft) => {
// (draft[configKey] as RadixSize) =
// `${value}` as RadixSize;
// })
// }
// />
// );
// break;
// }
// case EmbedConfigType.Radius: {
// control = (
// <Slider
// value={[
// (state[configKey] as RadixRadius) === 'full'
// ? 5
// : Number(state[configKey]),
// ]}
// min={0}
// max={5}
// onValueChange={([value]) =>
// mutateState((draft) => {
// (draft[configKey] as RadixRadius) = (
// value === 5 ? 'full' : `${value}`
// ) as RadixRadius;
// })
// }
// />
// );
// break;
// }
// case EmbedConfigType.Color: {
// control = (
// <>
// <Select.Root
// value={(state[configKey] as RadixColor).base}
// onValueChange={(value) => {
// mutateState((draft) => {
// (draft[configKey] as RadixColor).base =
// value as RadixColorBase;
// });
// }}
// >
// <Select.Trigger />
// <Select.Content>
// {Object.entries(radixColors)
// .filter(
// ([key]) =>
// !key.endsWith('A') &&
// !key.endsWith('P3') &&
// !key.endsWith('Dark'),
// )
// .map(([key]) => (
// <Select.Item key={key} value={key}>
// <Box
// style={{
// display: 'inline-block',
// width: '1em',
// height: '1em',
// verticalAlign: 'text-top',
// borderRadius: toRadiusVar('full'),
// backgroundColor: toColorVar({
// base: key as RadixColorBase,
// variant: '9',
// }),
// }}
// />{' '}
// {capitalize(key)}
// </Select.Item>
// ))}
// </Select.Content>
// </Select.Root>
// <Select.Root
// value={(state[configKey] as RadixColor).variant}
// onValueChange={(value) => {
// mutateState((draft) => {
// (draft[configKey] as RadixColor).variant =
// value as RadixColorVariant;
// });
// }}
// >
// <Select.Trigger />
// <Select.Content>
// {times(12, (index) => {
// const variant =
// `${index + 1}` as RadixColorVariantRaw;
// return (
// <>
// <Select.Item value={variant}>
// <Box
// style={{
// display: 'inline-block',
// width: '1em',
// height: '1em',
// verticalAlign: 'text-top',
// borderRadius: toRadiusVar('full'),
// backgroundColor: toColorVar({
// base: (state[configKey] as RadixColor)
// .base,
// variant,
// }),
// }}
// />{' '}
// {variant}
// </Select.Item>
// <Select.Item value={`a${variant}`}>
// <Box
// style={{
// display: 'inline-block',
// overflow: 'hidden',
// width: '1em',
// height: '1em',
// verticalAlign: 'text-top',
// borderRadius: toRadiusVar('full'),
// backgroundColor: toColorVar({
// base: (state[configKey] as RadixColor)
// .base,
// variant: `a${variant}`,
// }),
// }}
// >
// <Box
// style={{
// width: '50%',
// height: '100%',
// backgroundColor: toColorVar({
// base: (state[configKey] as RadixColor)
// .base,
// variant,
// }),
// }}
// />
// </Box>{' '}
// {variant} translucent
// </Select.Item>
// </>
// );
// })}
// </Select.Content>
// </Select.Root>
// </>
// );
// break;
// }
// }
return (
<Flex
direction="column"
gap="1"
mb="1"
pb={configItem.pad ? '6' : undefined}
>
<Text>{capitalize(startCase(configKey as string))}</Text>
{control && <Flex gap="1">{control}</Flex>}
{!control && <Text color="red">Immutable</Text>}
</Flex>
);
})} */}
</Flex> </Flex>
</ScrollArea> </ScrollArea>
src/components/PageWrapper.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Flex, FlexProps, Theme } from '@radix-ui/themes'; import { Flex, FlexProps, Theme } from '@radix-ui/themes';
import { ComponentProps } from 'react'; import { ComponentProps } from 'react';
import { RadixSize } from '../stores/embedState/constants'; import { RadixSize } from '../stores/embedState';
type PageWrapperProps = FlexProps & { type PageWrapperProps = FlexProps & {
color?: ComponentProps<typeof Theme>['accentColor']; color?: ComponentProps<typeof Theme>['accentColor'];
src/stores/embedState/constants.ts
-1
View File
@@ -1,7 +1,6 @@
import { EmbedConfigItem } from '.'; import { EmbedConfigItem } from '.';
export enum EmbedItemType { export enum EmbedItemType {
Number,
Radius, Radius,
Size, Size,
SizeWithout0, SizeWithout0,
src/stores/embedState/index.ts
-5
View File
@@ -45,11 +45,6 @@ export type EmbedConfigItem = (
type: EmbedItemType.Boolean; type: EmbedItemType.Boolean;
default: boolean; default: boolean;
} }
| {
type: EmbedItemType.Number;
default: number;
unit?: string;
}
| { | {
type: EmbedItemType.String; type: EmbedItemType.String;
default: string; default: string;