From a6aaaace45c80cb1be33ee19516adc23f5f5808b Mon Sep 17 00:00:00 2001 From: Chris Griffing Date: Sat, 2 Nov 2024 14:56:02 -0700 Subject: [PATCH] feat: move settings to sidebar in editor --- playgrounds/app/src/app.tsx | 6 +- playgrounds/app/src/components/Editor.tsx | 1215 +++++++++-------- playgrounds/app/src/components/Header.tsx | 44 +- .../app/src/components/ui/accordion.tsx | 83 ++ .../app/src/components/ui/radio-group.tsx | 73 + playgrounds/app/src/components/ui/select.tsx | 6 +- .../app/src/components/ui/separator.tsx | 29 + playgrounds/app/src/lib/utils.ts | 1 - playgrounds/app/src/routes/index.tsx | 8 +- 9 files changed, 838 insertions(+), 627 deletions(-) create mode 100644 playgrounds/app/src/components/ui/accordion.tsx create mode 100644 playgrounds/app/src/components/ui/radio-group.tsx create mode 100644 playgrounds/app/src/components/ui/separator.tsx diff --git a/playgrounds/app/src/app.tsx b/playgrounds/app/src/app.tsx index 0a667b6..5e8df30 100644 --- a/playgrounds/app/src/app.tsx +++ b/playgrounds/app/src/app.tsx @@ -12,12 +12,12 @@ export default function App() { return ( ( - <> +
{props.children} -
+ {/*
*/} - +
)} > diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx index 40e2fe9..bc0ed52 100644 --- a/playgrounds/app/src/components/Editor.tsx +++ b/playgrounds/app/src/components/Editor.tsx @@ -21,20 +21,6 @@ import { TextFieldTextArea, } from '~/components/ui/text-field' import { MagicMoveElement } from 'shiki-magic-move/types' -import { - DropdownMenu, - DropdownMenuCheckboxItem, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuGroupLabel, - DropdownMenuItem, - DropdownMenuPortal, - DropdownMenuSeparator, - DropdownMenuSub, - DropdownMenuSubContent, - DropdownMenuSubTrigger, - DropdownMenuTrigger, -} from '~/components/ui/dropdown-menu' import { Slider, SliderFill, @@ -44,8 +30,7 @@ import { SliderValueLabel, } from '~/components/ui/slider' import clsx from 'clsx' -import { TbCheck, TbSettings } from 'solid-icons/tb' -import { SimplerCheckbox } from '~/components/ui/checkbox' +import { Checkbox } from '~/components/ui/checkbox' import { Label } from '~/components/ui/label' import { Dialog, @@ -63,6 +48,9 @@ import { authFetch } from '~/lib/utils' import { useNavigate } from '@solidjs/router' import { authToken } from '~/lib/store' import { toast } from 'solid-sonner' +import { Separator } from './ui/separator' +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select' +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion' const animationSeconds = 1 const animationFPS = 10 @@ -78,6 +66,16 @@ const supportedFontFamilies: { name: string }[] = [ { name: 'Source Code Pro' }, ] +interface SelectOption { + label: string + value: string +} + +const bgTypeOptions: SelectOption[] = [ + { label: 'Solid', value: 'solid' }, + { label: 'Linear Gradient', value: 'linearGradient' }, +] + interface EditorProps { snippetId?: string startCode: string @@ -273,615 +271,624 @@ export default function Editor(props: EditorProps) { return ( <> - - - Step 1: Snippets - Step 2: Output - - -
-
-
Enter the code snippets you would like to diff
-
-
- -
+
+
+
+ + ( + + {props.item.rawValue} + + + )} + > + + + + + +
-
- + + ( + + {props.item.rawValue} + + + )} > - Start Code - - - - - End Code - - + + + + + +
- - -
+ + -
- ( - - {props.item.rawValue} - - - )} - > - - - - - - - - ( - - {props.item.rawValue} - - - )} + + Background + +
+
+ + + + id="bg-type" + value={bgTypeOptions.find(option => option.value === props.bgType)} + optionValue="value" + optionTextValue="label" + onChange={newType => + newType && props.setBgType(newType.value as 'solid' | 'linearGradient') + } + options={bgTypeOptions} + itemComponent={props => ( + {props.item.rawValue.label} + )} + > + + > + {state => state.selectedOption()?.label} + + + + +
+ + {props.bgType === 'linearGradient' && ( + <> +
+ + { + props.setBgGradientColorStart(e.target.value) + }} + /> +
+
+ + { + props.setBgGradientColorEnd(e.target.value) + }} + /> +
+ { + props.setBgGradientDirection(e[0]) + }} + > +
+ Direction + +
+ + deg +
+
+ + + + + + + )} + {props.bgType === 'solid' && ( +
+ + { + props.setBgColor(e.target.value) + }} + /> +
+ )} +
+ + + + + Layout + +
+ { + props.setYPadding(e[0]) + }} + > +
+ Padding (y) +
+ + px +
+
+ + + + + + + { + props.setXPadding(e[0]) + }} + > +
+ Padding (x) +
+ + px +
+
+ + + + + +
+ + + + + Shadow + +
+
+ + { + props.setShadowEnabled(!props.shadowEnabled) + }} + /> +
+ +
+ + + props.setShadowColor(e.target.value)} + /> +
+
+ { + props.setShadowOpacity(e[0]) + }} + > +
+ Opacity + +
+ + + + + +
+
+ { + props.setShadowOffsetY(e[0]) + }} + > +
+ Offset Y +
+ + px +
+
+ + + + + +
+
+ { + props.setShadowBlur(e[0]) + }} + > +
+ Blur +
+ + px +
+
+ + + + + +
+
+ + + + + Font + +
+
+ + + + id="font-family" + value={supportedFontFamilies.find(option => option.name === props.fontFamily)} + optionValue="name" + optionTextValue="name" + onChange={newFamily => newFamily && props.setFontFamily(newFamily.name)} + options={supportedFontFamilies} + itemComponent={props => ( + {props.item.rawValue.name} + )} + > + + > + {state => state.selectedOption()?.name} + + + + +
+ + { + props.setFontSize(e[0]) + }} + > +
+ Size +
+ + px +
+
+ + + + + +
+ + + +
+
+ + + Step 1: Snippets + Step 2: Output + + +
+
+
Enter the code snippets you would like to diff
+
+
+ +
+
+ +
+ + Start Code + + + + + End Code + + +
+ + +
- - - - - - - - { - setIsLooping(!open) +
+
+ +
+
+ +
- - - - - - - Background - - - - Type - - - props.setBgType('solid')} - > - Solid - - - - - props.setBgType('linearGradient')} - > - Linear Gradient - - - - - - - - - {props.bgType === 'linearGradient' && ( - <> - - - { - props.setBgType('linearGradient') - props.setBgGradientColorStart(e.target.value) - }} - /> - - - - { - props.setBgType('linearGradient') - props.setBgGradientColorEnd(e.target.value) - }} - /> - - - { - props.setBgType('linearGradient') - props.setBgGradientDirection(e[0]) - }} - > -
- Direction -
- - - - -
- - deg -
- - - - )} - {props.bgType === 'solid' && ( - Preview

+
+
+
+ + {highlighter => ( + <> +
- - { - props.setBgType('solid') - props.setBgColor(e.target.value) + - - )} - - - - - - Layout - - - - { - props.setYPadding(e[0]) - }} - > -
- Padding (y) - -
- - - - - - - - - { - props.setXPadding(e[0]) - }} - > -
- Padding (x) - -
- - - - - - - - - - - - Shadow - - - { - props.setShadowEnabled(!props.shadowEnabled) - }} - > - - - - - - - - props.setShadowColor(e.target.value)} - /> - - - { - props.setShadowOpacity(e[0]) - }} - > -
- Opacity - -
- - - - - - - - { - props.setShadowOffsetY(e[0]) - }} - > -
- Offset Y - + {/* The hidden shiki that we use to generate the magic move elements */} + - - - - - - - - { - props.setShadowBlur(e[0]) +
+
-
- Blur - -
- - - - - - - - - - - - Font - - - - { - props.setFontSize(e[0]) + onMouseDown={e => { + setIsResizing(true) }} - > -
- Size - -
- - - - - - - - - Family - - - {supportedFontFamilies.map(fontFamily => ( - props.setFontFamily(fontFamily.name)} - > - {fontFamily.name} - - - - - ))} - - - - - - - - - -
-
+ >
+ + )} + +
+
+
+
+ + + + {/* TODO: If the app grows, this logic should be surfaced to the top level route */} + +
+ + setTitle(e.currentTarget.value)} + /> +
-
- -
-

Preview

-
-
-
- - {highlighter => ( - <> -
- - {/* The hidden shiki that we use to generate the magic move elements */} - -
-
{ - setIsResizing(true) - }} - >
- - )} - -
-
-
-
- - - - {/* TODO: If the app grows, this logic should be surfaced to the top level route */} - -
- - setTitle(e.currentTarget.value)} - /> - - +
- +
diff --git a/playgrounds/app/src/components/Header.tsx b/playgrounds/app/src/components/Header.tsx index ef44814..e232601 100644 --- a/playgrounds/app/src/components/Header.tsx +++ b/playgrounds/app/src/components/Header.tsx @@ -24,7 +24,38 @@ export default function Header() { return (
-
) } diff --git a/playgrounds/app/src/components/ui/accordion.tsx b/playgrounds/app/src/components/ui/accordion.tsx new file mode 100644 index 0000000..4505d66 --- /dev/null +++ b/playgrounds/app/src/components/ui/accordion.tsx @@ -0,0 +1,83 @@ +import type { JSX, ValidComponent } from "solid-js" +import { splitProps } from "solid-js" + +import * as AccordionPrimitive from "@kobalte/core/accordion" +import type { PolymorphicProps } from "@kobalte/core/polymorphic" + +import { cn } from "~/lib/utils" + +const Accordion = AccordionPrimitive.Root + +type AccordionItemProps = + AccordionPrimitive.AccordionItemProps & { + class?: string | undefined + } + +const AccordionItem = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as AccordionItemProps, ["class"]) + return +} + +type AccordionTriggerProps = + AccordionPrimitive.AccordionTriggerProps & { + class?: string | undefined + children?: JSX.Element + } + +const AccordionTrigger = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as AccordionTriggerProps, ["class", "children"]) + return ( + + svg]:rotate-180", + local.class + )} + {...others} + > + {local.children} + + + + + + ) +} + +type AccordionContentProps = + AccordionPrimitive.AccordionContentProps & { + class?: string | undefined + children?: JSX.Element + } + +const AccordionContent = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as AccordionContentProps, ["class", "children"]) + return ( + +
{local.children}
+ + ) +} + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/playgrounds/app/src/components/ui/radio-group.tsx b/playgrounds/app/src/components/ui/radio-group.tsx new file mode 100644 index 0000000..84aa8a3 --- /dev/null +++ b/playgrounds/app/src/components/ui/radio-group.tsx @@ -0,0 +1,73 @@ +import type { JSX, ValidComponent } from "solid-js" +import { splitProps } from "solid-js" + +import type { PolymorphicProps } from "@kobalte/core/polymorphic" +import * as RadioGroupPrimitive from "@kobalte/core/radio-group" + +import { cn } from "~/lib/utils" + +type RadioGroupRootProps = + RadioGroupPrimitive.RadioGroupRootProps & { class?: string | undefined } + +const RadioGroup = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as RadioGroupRootProps, ["class"]) + return +} + +type RadioGroupItemProps = + RadioGroupPrimitive.RadioGroupItemProps & { + class?: string | undefined + children?: JSX.Element + } + +const RadioGroupItem = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as RadioGroupItemProps, ["class", "children"]) + return ( + + + + + + + + + + {local.children} + + ) +} + +type RadioGroupLabelProps = + RadioGroupPrimitive.RadioGroupLabelProps & { + class?: string | undefined + } + +const RadioGroupItemLabel = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as RadioGroupLabelProps, ["class"]) + return ( + + ) +} + +export { RadioGroup, RadioGroupItem, RadioGroupItemLabel } diff --git a/playgrounds/app/src/components/ui/select.tsx b/playgrounds/app/src/components/ui/select.tsx index 91a229c..02b8954 100644 --- a/playgrounds/app/src/components/ui/select.tsx +++ b/playgrounds/app/src/components/ui/select.tsx @@ -23,7 +23,7 @@ const SelectTrigger = ( return ( ( ( return ( = + SeparatorPrimitive.SeparatorRootProps & { class?: string | undefined } + +const Separator = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as SeparatorRootProps, ["class", "orientation"]) + return ( + + ) +} + +export { Separator } diff --git a/playgrounds/app/src/lib/utils.ts b/playgrounds/app/src/lib/utils.ts index cd5a395..a84cdff 100644 --- a/playgrounds/app/src/lib/utils.ts +++ b/playgrounds/app/src/lib/utils.ts @@ -1,7 +1,6 @@ import { type ClassValue, clsx } from 'clsx' import { twMerge } from 'tailwind-merge' import { authToken } from './store' -import { useNavigate } from '@solidjs/router' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) diff --git a/playgrounds/app/src/routes/index.tsx b/playgrounds/app/src/routes/index.tsx index 6adafd4..c6a9bcf 100644 --- a/playgrounds/app/src/routes/index.tsx +++ b/playgrounds/app/src/routes/index.tsx @@ -76,7 +76,7 @@ export default function Home() { const [bgGradientColorStart, setBgGradientColorStart] = makePersisted(createSignal('#a3d0ff'), { name: 'bgGradientColorStart', }) - const [bgGradientColorEnd, setBgGradientColorEnd] = makePersisted(createSignal('#a3d0ff'), { + const [bgGradientColorEnd, setBgGradientColorEnd] = makePersisted(createSignal('#fbc737'), { name: 'bgGradientColorEnd', }) const [bgGradientDirection, setBgGradientDirection] = makePersisted(createSignal(45), { @@ -84,10 +84,10 @@ export default function Home() { }) return ( -
-

+

+ {/*

Create and share beautiful gifs of your source code diffs. -

+

*/}