mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 02:37:05 +02:00
feat: radius
This commit is contained in:
TrèsAbhi committed
1 parent
27cfc225de
commit
bcd4f279a8
6 files changed
+31
-393
No files matched your search
@@ -5,7 +5,6 @@ import { EmbedPreviewControllerProps } from '../page';
|
||||
|
||||
export function Color({ configKey }: EmbedPreviewControllerProps) {
|
||||
const mutateEmbedState = EmbedState.useMutation();
|
||||
const embedStore = EmbedState.useStore();
|
||||
const input = useRef<HTMLInputElement>(null);
|
||||
|
||||
return (
|
||||
|
||||
@@ -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}`;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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 = <Color configKey={configKey} />;
|
||||
break;
|
||||
}
|
||||
|
||||
case EmbedItemType.Radius: {
|
||||
control = <Radius configKey={configKey} />;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -82,391 +88,6 @@ export default function Page({
|
||||
</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>
|
||||
</ScrollArea>
|
||||
|
||||
|
||||
@@ -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<typeof Theme>['accentColor'];
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { EmbedConfigItem } from '.';
|
||||
|
||||
export enum EmbedItemType {
|
||||
Number,
|
||||
Radius,
|
||||
Size,
|
||||
SizeWithout0,
|
||||
|
||||
@@ -45,11 +45,6 @@ export type EmbedConfigItem = (
|
||||
type: EmbedItemType.Boolean;
|
||||
default: boolean;
|
||||
}
|
||||
| {
|
||||
type: EmbedItemType.Number;
|
||||
default: number;
|
||||
unit?: string;
|
||||
}
|
||||
| {
|
||||
type: EmbedItemType.String;
|
||||
default: string;
|
||||
|
||||
Reference in new issue
Block a user