fix(initialValue): enable setting initial value via prop (#6)

package.json

@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
-    "@form-atoms/field": "^4.0.0",
+    "@form-atoms/field": "^4.0.7",
     "@mdx-js/react": "^2.3.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^11.1.0",

src/components/checkbox-field/CheckboxField.stories.tsx

@@ -39,3 +39,20 @@ export const Optional: FormStory = {
     ),
   },
 };
+
+const imGoing = checkboxField();
+
+export const Initialized: FormStory = {
+  ...optionalField,
+  args: {
+    fields: { imGoing },
+    children: () => (
+      <CheckboxField
+        field={imGoing}
+        initialValue={true}
+        label="I'm going"
+        helperText="Oh yes 👍"
+      />
+    ),
+  },
+};

src/components/checkbox-field/CheckboxField.tsx

@@ -1,15 +1,17 @@
 import { CheckboxFieldProps, useCheckboxFieldProps } from "@form-atoms/field";
 import { Checkbox, CheckboxProps, HelperText, Label } from "flowbite-react";
+import { ReactNode } from "react";
 
 import { useFieldError } from "../../hooks";
 
 export const CheckboxField = ({
   field,
   label,
   helperText,
+  initialValue,
   ...uiProps
-}: CheckboxFieldProps & CheckboxProps) => {
-  const props = useCheckboxFieldProps(field);
+}: CheckboxFieldProps & CheckboxProps & { helperText?: ReactNode }) => {
+  const props = useCheckboxFieldProps(field, { initialValue });
   const { color, error } = useFieldError(field);
   const help = error ?? helperText;
 

src/components/checkbox-group-field/CheckboxGroupField.stories.tsx

@@ -44,3 +44,22 @@ export const Optional: FormStory = {
     ),
   },
 };
+
+const langs = stringArrayField();
+
+export const Initialized: FormStory = {
+  ...optionalField,
+  args: {
+    fields: { langs },
+    children: () => (
+      <CheckboxGroupField
+        field={langs}
+        initialValue={["css", "ts", "react"]}
+        label="What programming languages are you proficient?"
+        options={options}
+        getValue={getValue}
+        getLabel={getLabel}
+      />
+    ),
+  },
+};

src/components/checkbox-group-field/CheckboxGroupField.tsx

@@ -1,13 +1,19 @@
 import {
-  FieldProps,
   UseCheckboxGroupProps,
   ZodArrayField,
   useCheckboxGroup,
 } from "@form-atoms/field";
 import { Checkbox, HelperText, Label } from "flowbite-react";
 
 import { Option as BaseOption, type OptionRenderProp } from "../";
-import { FlowbiteField } from "../field";
+import { FlowbiteField, type FlowbiteFieldProps } from "../field";
+
+export type CheckboxGroupFieldProps<
+  Option,
+  Field extends ZodArrayField,
+> = FlowbiteFieldProps<Field> &
+  UseCheckboxGroupProps<Option, Field> &
+  Partial<OptionRenderProp>;
 
 export const CheckboxGroupField = <Option, Field extends ZodArrayField>({
   field,
@@ -17,17 +23,19 @@ export const CheckboxGroupField = <Option, Field extends ZodArrayField>({
   label,
   required,
   helperText,
+  initialValue,
   Option = BaseOption,
   ...uiProps
-}: UseCheckboxGroupProps<Option, Field> &
-  FieldProps<Field> &
-  Partial<OptionRenderProp>) => {
-  const checkboxGroup = useCheckboxGroup({
-    field,
-    options,
-    getValue,
-    getLabel,
-  });
+}: CheckboxGroupFieldProps<Option, Field>) => {
+  const checkboxGroup = useCheckboxGroup(
+    {
+      field,
+      options,
+      getValue,
+      getLabel,
+    },
+    { initialValue },
+  );
 
   return (
     <FlowbiteField

src/components/field/FlowbiteField.tsx

@@ -12,24 +12,25 @@ import { RenderProp } from "react-render-prop-type";
 import { RequiredIndicator } from "../";
 import { FlowbiteStateColor, useFieldError } from "../../hooks";
 
-type Children = RenderProp<
+type ChildrenProp = RenderProp<
   Omit<RequiredProps, "isFieldRequired"> & {
     id: string;
     helperText: ReactNode;
     color?: FlowbiteStateColor;
   }
 >;
 
-type FlowbiteFieldProps<Field extends ZodField<any, any>> = FieldProps<Field> &
-  Children;
+export type FlowbiteFieldProps<Field extends ZodField> = FieldProps<Field> & {
+  helperText?: ReactNode;
+};
 
-export const FlowbiteField = <Field extends ZodField<any, any>>({
+export const FlowbiteField = <Field extends ZodField>({
   field,
   required,
   label,
   children,
   ...uiProps
-}: FlowbiteFieldProps<Field>) => {
+}: FlowbiteFieldProps<Field> & ChildrenProp) => {
   const id = `${field}`;
   const { color, error } = useFieldError(field);
   const requiredProps = useRequiredProps({ field, required });

src/components/file-field/FilesField.tsx

@@ -1,10 +1,10 @@
-import { FileFieldProps, useFilesFieldProps } from "@form-atoms/field";
+import { FilesFieldProps, useFilesFieldProps } from "@form-atoms/field";
 import { FileInput, FileInputProps } from "flowbite-react";
 
 import { InputColors } from "../../hooks";
 import { FlowbiteField } from "../field";
 
-type FlowbiteFilesFieldProps = FileFieldProps &
+type FlowbiteFilesFieldProps = FilesFieldProps &
   FileInputProps & { colors?: InputColors };
 
 export const FilesField = ({

src/components/number-field/NumberField.stories.tsx

@@ -40,3 +40,14 @@ export const Optional: FormStory = {
     children: () => <NumberField field={optional} label="Amount" />,
   },
 };
+
+const initialized = numberField();
+
+export const Initialized: FormStory = {
+  args: {
+    fields: { initialized },
+    children: () => (
+      <NumberField field={initialized} initialValue={300} label="Amount" />
+    ),
+  },
+};

src/components/number-field/NumberField.tsx

@@ -8,9 +8,10 @@ export const NumberField = ({
   field,
   helperText,
   required,
+  initialValue,
   ...inputProps
 }: NumberFieldProps & TextInputProps) => {
-  const props = useNumberFieldProps(field);
+  const props = useNumberFieldProps(field, { initialValue });
 
   return (
     <FlowbiteField
@@ -25,7 +26,6 @@ export const NumberField = ({
           type="number"
           {...inputProps}
           {...props}
-          value={props.value ?? ""}
           {...fieldProps}
         />
       )}

src/components/radio-field/RadioField.stories.tsx

@@ -42,3 +42,21 @@ export const Optional: FormStory = {
     ),
   },
 };
+
+const initialized = stringField();
+
+export const Initialized: FormStory = {
+  args: {
+    fields: { country: initialized },
+    children: () => (
+      <RadioField
+        field={initialized}
+        label="Country of Origin"
+        options={options}
+        initialValue="CZ"
+        getValue={getValue}
+        getLabel={getLabel}
+      />
+    ),
+  },
+};

src/components/radio-field/RadioField.tsx

@@ -1,5 +1,4 @@
 import {
-  FieldProps,
   RadioGroupProps,
   SelectField,
   useOptions,
@@ -12,9 +11,19 @@ import { RenderProp } from "react-render-prop-type";
 import {
   Option as BaseOption,
   FlowbiteField,
+  FlowbiteFieldProps,
   type OptionRenderProp,
 } from "../";
 
+type ContainerProp = RenderProp<PropsWithChildren, "Container">;
+
+export type RadioFieldProps<
+  Option,
+  Field extends SelectField,
+> = FlowbiteFieldProps<Field> &
+  RadioGroupProps<Option, Field> &
+  Partial<ContainerProp & OptionRenderProp>;
+
 export const RadioField = <Option, Field extends SelectField>({
   field,
   options,
@@ -23,13 +32,15 @@ export const RadioField = <Option, Field extends SelectField>({
   label,
   helperText,
   required,
+  initialValue,
   Container = Fragment,
   Option = BaseOption,
   ...uiProps
-}: RadioGroupProps<Option, Field> &
-  Omit<FieldProps<Field>, "field"> &
-  Partial<RenderProp<PropsWithChildren, "Container"> & OptionRenderProp>) => {
-  const props = useSelectFieldProps({ field, options, getValue });
+}: RadioFieldProps<Option, Field>) => {
+  const props = useSelectFieldProps(
+    { field, options, getValue },
+    { initialValue },
+  );
   const { renderOptions } = useOptions({ field, options, getLabel });
 
   return (

src/components/radio-option/RadioOption.tsx

@@ -6,6 +6,7 @@ import {
 } from "@form-atoms/field";
 import { HelperText, Label, Radio } from "flowbite-react";
 import { useAtomValue } from "jotai";
+import { ReactNode } from "react";
 
 import { useFieldError } from "../../hooks";
 import { RequiredIndicator } from "../required-indicator";
@@ -15,7 +16,7 @@ export const RadioOption = <Field extends CheckboxField>({
   required,
   label,
   helperText,
-}: FieldProps<Field>) => {
+}: FieldProps<Field> & { helperText?: ReactNode }) => {
   const id = `${field}`;
   const props = useCheckboxFieldProps(field);
   const { error } = useFieldError(field);

src/components/rating-field/RatingField.stories.tsx

@@ -36,3 +36,19 @@ export const Optional: FormStory = {
     ),
   },
 };
+
+const initial = numberField();
+
+export const Initialized: FormStory = {
+  ...optionalField,
+  args: {
+    fields: { initial },
+    children: () => (
+      <RatingField
+        field={initial}
+        initialValue={4}
+        label="Rate your experience"
+      />
+    ),
+  },
+};

src/components/rating-field/RatingField.tsx

@@ -1,20 +1,29 @@
-import { NumberFieldProps, useNumberFieldProps } from "@form-atoms/field";
+import {
+  NumberField,
+  NumberFieldProps,
+  useNumberFieldProps,
+} from "@form-atoms/field";
 import { HelperText, Rating, RatingProps } from "flowbite-react";
 import { useFieldActions } from "form-atoms";
 
-import { FlowbiteField } from "../field";
+import { FlowbiteField, FlowbiteFieldProps } from "../field";
 
 const options = [1, 2, 3, 4, 5];
 
+export type RatingFieldProps = FlowbiteFieldProps<NumberField> &
+  RatingProps &
+  NumberFieldProps;
+
 export const RatingField = ({
   field,
   size = "md",
   label,
   helperText,
   required,
+  initialValue,
   ...uiProps
-}: RatingProps & NumberFieldProps) => {
-  const props = useNumberFieldProps(field);
+}: RatingFieldProps) => {
+  const props = useNumberFieldProps(field, { initialValue });
   const actions = useFieldActions(field);
 
   return (

src/components/select-field/SelectField.stories.tsx

@@ -44,3 +44,22 @@ export const Optional: FormStory = {
     ),
   },
 };
+
+const initial = stringField();
+
+export const Initialized: FormStory = {
+  args: {
+    fields: { country: initial },
+    children: () => (
+      <SelectField
+        field={initial}
+        initialValue="SK"
+        label="Country of Origin"
+        placeholder="Click to pick a country"
+        options={options}
+        getValue={getValue}
+        getLabel={getLabel}
+      />
+    ),
+  },
+};

src/components/select-field/SelectField.tsx

@@ -6,10 +6,14 @@ import {
   useSelectOptions,
 } from "@form-atoms/field";
 import { SelectProps as FlowbiteSelectProps, Select } from "flowbite-react";
-import { ReactNode } from "react";
 
 import { FlowbiteField } from "../field";
 
+export type SelectFieldProps<
+  Option,
+  Field extends SelectZodField,
+> = SelectProps<Option, Field> & FlowbiteSelectProps;
+
 export const SelectField = <Option, Field extends SelectZodField>({
   field,
   options,
@@ -19,10 +23,13 @@ export const SelectField = <Option, Field extends SelectZodField>({
   label,
   helperText,
   required,
+  initialValue,
   ...uiProps
-}: SelectProps<Option, Field> &
-  FlowbiteSelectProps & { label?: ReactNode }) => {
-  const props = useSelectFieldProps({ field, options, getValue });
+}: SelectFieldProps<Option, Field>) => {
+  const props = useSelectFieldProps(
+    { field, options, getValue },
+    { initialValue },
+  );
   const { selectOptions } = useSelectOptions({
     field,
     options,