From 2524eb2304a4ec33bb8f430e802b4f76e8005142 Mon Sep 17 00:00:00 2001 From: Ty Tremblay Date: Fri, 20 Dec 2024 10:50:15 -0500 Subject: [PATCH] better formatting --- package.json | 1 + pnpm-lock.yaml | 3 ++ src/components/QR/PreviewText.tsx | 5 ++- .../CommitAndResetSection.tsx | 10 ++++-- src/components/inputs/TimerInput.tsx | 3 +- src/components/ui/badge.tsx | 36 +++++++++++++++++++ src/components/ui/collapsible.tsx | 9 +++++ src/store/store.ts | 1 + 8 files changed, 63 insertions(+), 5 deletions(-) create mode 100644 src/components/ui/badge.tsx create mode 100644 src/components/ui/collapsible.tsx diff --git a/package.json b/package.json index c610cd5..6ede4c4 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-aspect-ratio": "^1.1.1", "@radix-ui/react-checkbox": "^1.1.3", + "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-dialog": "^1.1.3", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-select": "^2.1.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ed3d1f9..7b54119 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ importers: '@radix-ui/react-checkbox': specifier: ^1.1.3 version: 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-collapsible': + specifier: ^1.1.2 + version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@radix-ui/react-dialog': specifier: ^1.1.3 version: 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) diff --git a/src/components/QR/PreviewText.tsx b/src/components/QR/PreviewText.tsx index 5e6c655..ffbb72c 100644 --- a/src/components/QR/PreviewText.tsx +++ b/src/components/QR/PreviewText.tsx @@ -5,6 +5,7 @@ import { AccordionItem, AccordionTrigger, } from '../ui/accordion'; +import { Badge } from '../ui/badge'; export type PreviewTextProps = { data: string; @@ -34,7 +35,9 @@ export function PreviewText(props: PreviewTextProps) { {fieldValues.map(fv => (
{fv.code} - {fv.value} + + {JSON.stringify(fv.value)} +
))} diff --git a/src/components/Sections/CommitAndResetSection/CommitAndResetSection.tsx b/src/components/Sections/CommitAndResetSection/CommitAndResetSection.tsx index 0745cc8..5097708 100644 --- a/src/components/Sections/CommitAndResetSection/CommitAndResetSection.tsx +++ b/src/components/Sections/CommitAndResetSection/CommitAndResetSection.tsx @@ -17,10 +17,14 @@ export function CommitAndResetSection() { }, [formData]); const missingRequiredFields = useMemo(() => { - return requiredFields.some( - rf => !fieldValues.find(fv => fv.code === rf)?.value, + console.log( + 'missingRequiredFields', + fieldValues.filter(f => requiredFields.includes(f.code)), ); - }, [formData]); + return fieldValues + .filter(f => requiredFields.includes(f.code)) + .some(f => f.value === undefined || f.value === '' || f.value === null); + }, [formData, fieldValues]); return (
diff --git a/src/components/inputs/TimerInput.tsx b/src/components/inputs/TimerInput.tsx index 9a067ab..9b9e32f 100644 --- a/src/components/inputs/TimerInput.tsx +++ b/src/components/inputs/TimerInput.tsx @@ -36,9 +36,10 @@ export default function TimerInput(props: ConfigurableInputProps) { return; } - setTime(0); + setTime(data.defaultValue); toggleTimer(false); setTimes([]); + updateValue(props.code, data.defaultValue); }, []); useEvent('resetFields', resetState); diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 0000000..e87d62b --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx new file mode 100644 index 0000000..a23e7a2 --- /dev/null +++ b/src/components/ui/collapsible.tsx @@ -0,0 +1,9 @@ +import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" + +const Collapsible = CollapsiblePrimitive.Root + +const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger + +const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent + +export { Collapsible, CollapsibleTrigger, CollapsibleContent } diff --git a/src/store/store.ts b/src/store/store.ts index 9b4b6ec..c63016f 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -50,6 +50,7 @@ export function resetToDefaultConfig() { } export function updateValue(code: string, data: any) { + console.log('updateValue', code, data); useQRScoutState.setState( produce((state: QRScoutState) => { const field = state.fieldValues.find(f => f.code === code);