fix(list): use listField & List (#7)

* fix(list): use listField & List BREAKING CHANGE uses new list api * fix: type issues * chore(release): 3.1.12-next.1 ## [3.1.12-next.1](v3.1.11...v3.1.12-next.1) (2024-01-08) ### Bug Fixes * **list:** use listField & List ([07abc55](07abc55)) * type issues ([6e2bce1](6e2bce1)) * feat: v4 field BREAKING CHANGE: now uses @form-atoms/field v4 * chore(release): 4.0.0-next.1 # [4.0.0-next.1](v3.1.12-next.1...v4.0.0-next.1) (2024-01-08) ### Features * v4 field ([e22591a](e22591a)) ### BREAKING CHANGES * now uses @form-atoms/field v4 --------- Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
form-atoms · Jan 8, 2024 · ffcf6f3 · ffcf6f3
1 parent 2801698
commit ffcf6f3
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 206 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,23 @@
+# [4.0.0-next.1](https://github.com/form-atoms/flowbite/compare/v3.1.12-next.1...v4.0.0-next.1) (2024-01-08)
+
+
+### Features
+
+* v4 field ([e22591a](https://github.com/form-atoms/flowbite/commit/e22591a1242b8a7827a6da5087a5de59a9cd31c6))
+
+
+### BREAKING CHANGES
+
+* now uses @form-atoms/field v4
+
+## [3.1.12-next.1](https://github.com/form-atoms/flowbite/compare/v3.1.11...v3.1.12-next.1) (2024-01-08)
+
+
+### Bug Fixes
+
+* **list:** use listField & List ([07abc55](https://github.com/form-atoms/flowbite/commit/07abc554f64905405097f41b0abb1aed5060fcf4))
+* type issues ([6e2bce1](https://github.com/form-atoms/flowbite/commit/6e2bce12172c595e6c7c851cb8685336cc650c3b))
+
 ## [3.1.11](https://github.com/form-atoms/flowbite/compare/v3.1.10...v3.1.11) (2023-12-04)
 
 

diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
-    "@form-atoms/field": "^3.8.7",
+    "@form-atoms/field": "^4.0.0",
     "@mdx-js/react": "^2.3.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^11.1.0",
@@ -80,7 +80,7 @@
     "eslint-plugin-prettier": "5.0.1",
     "flowbite": "^2.2.0",
     "flowbite-react": "^0.7.0",
-    "form-atoms": "3.2.0",
+    "form-atoms": "3.2.1",
     "happy-dom": "12.10.3",
     "jotai": "^2.6.0",
     "jotai-devtools": "0.7.0",
@@ -132,7 +132,7 @@
     ]
   },
   "peerDependencies": {
-    "@form-atoms/field": "^3",
+    "@form-atoms/field": "^4",
     "flowbite": "^1.8.1",
     "flowbite-react": "^0.7.0"
   },

diff --git a/src/components/list-field/ListField.stories.tsx b/src/components/list-field/ListField.stories.tsx
diff --git a/src/components/list-field/NestedListField.stories.tsx b/src/components/list-field/NestedListField.stories.tsx
@@ -1,45 +1,17 @@
-import {
-  ListField,
-  listFieldBuilder,
-  numberField,
-  textField,
-} from "@form-atoms/field";
+import { List, listField, numberField, textField } from "@form-atoms/field";
 import { Button, Card } from "flowbite-react";
 
 import { NumberField } from "../number-field";
 import { formStory, meta } from "../story-form";
 import { TextField } from "../text-field";
 
 export default {
-  title: "ListField",
+  title: "List",
   ...meta,
 };
 
-const personBuilder = listFieldBuilder(({ name, age }) => ({
-  name: textField({
-    name: "name",
-    value: name,
-  }),
-  age: numberField({
-    name: "age",
-    value: age,
-  }),
-}));
-
-const addressBuilder = listFieldBuilder(({ city, street, people = [] }) => ({
-  city: textField({
-    name: "city",
-    value: city,
-  }),
-  street: textField({
-    name: "street",
-    value: street,
-  }),
-  people: personBuilder(people),
-}));
-
-const fields = {
-  addresses: addressBuilder([
+const addresses = listField({
+  value: [
     {
       city: "Bratislava",
       street: "Kosicka",
@@ -50,36 +22,53 @@ const fields = {
         },
       ],
     },
-  ]),
-};
+  ],
+  builder: ({ city, street, people = [] }) => ({
+    city: textField({
+      name: "city",
+      value: city,
+    }),
+    street: textField({
+      name: "street",
+      value: street,
+    }),
+    people: listField({
+      value: people,
+      builder: ({ name, age }) => ({
+        name: textField({
+          name: "name",
+          value: name,
+        }),
+        age: numberField({
+          name: "age",
+          value: age,
+        }),
+      }),
+    }),
+  }),
+});
 
 export const AddressesWithPeopleListField = formStory({
   args: {
-    fields,
-    children: ({ form }) => (
-      <ListField
-        form={form}
-        keyFrom="street"
-        path={["addresses"]}
-        builder={addressBuilder}
-        AddItemButton={({ add }) => (
+    fields: { addresses },
+    children: ({ fields }) => (
+      <List
+        field={fields.addresses}
+        AddButton={({ add }) => (
           <Button color="gray" onClick={add}>
             Add Address
           </Button>
         )}
       >
-        {({ fields, index }) => (
+        {({ fields }) => (
           <Card>
             <div className="grid grid-flow-col grid-cols-2 gap-4">
               <TextField label="City" field={fields.city} />
               <TextField label="Street" field={fields.street} />
             </div>
-            <ListField
-              form={form}
-              keyFrom="name"
-              path={["addresses", index, "people"]}
-              builder={personBuilder}
-              AddItemButton={({ add }) => (
+            <List
+              field={fields.people}
+              AddButton={({ add }) => (
                 <Button color="gray" onClick={add}>
                   Add Person
                 </Button>
@@ -91,10 +80,10 @@ export const AddressesWithPeopleListField = formStory({
                   <NumberField label="Age" field={fields.age} />
                 </Card>
               )}
-            </ListField>
+            </List>
           </Card>
         )}
-      </ListField>
+      </List>
     ),
   },
 });
diff --git a/src/components/list-field/Phones.stories.tsx b/src/components/list-field/Phones.stories.tsx
@@ -1,9 +1,9 @@
 import {
-  ListField,
+  List,
   Radio,
   RadioControl,
   checkboxField,
-  listFieldBuilder,
+  listField,
   textField,
 } from "@form-atoms/field";
 import { Card } from "flowbite-react";
@@ -17,33 +17,27 @@ export default {
   ...meta,
 };
 
-const phoneBuilder = listFieldBuilder(({ number, primary }) => ({
-  number: textField({ name: "number", value: number }),
-  primary: checkboxField({
-    name: "primaryPhone",
-    value: primary,
-  }).optional(),
-}));
-
-const formFields = {
-  phones: phoneBuilder([
+const phones = listField({
+  value: [
     { number: "+421 933 888 999", primary: true },
     { number: "+420 905 100 200", primary: false },
-  ]),
-};
+  ],
+  builder: ({ number, primary }) => ({
+    number: textField({ name: "number", value: number }),
+    primary: checkboxField({
+      name: "primaryPhone",
+      value: primary,
+    }).optional(),
+  }),
+});
 
 export const PhonesListField = formStory({
   args: {
-    fields: formFields,
-    children: ({ required, form }) => (
+    fields: { phones },
+    children: ({ required, fields }) => (
       <RadioControl name="primaryPhone">
         {({ control }) => (
-          <ListField
-            form={form}
-            keyFrom="primary"
-            path={["phones"]}
-            builder={phoneBuilder}
-          >
+          <List field={fields.phones}>
             {({ fields }) => (
               <Card>
                 <TextField
@@ -63,7 +57,7 @@ export const PhonesListField = formStory({
                 </Radio>
               </Card>
             )}
-          </ListField>
+          </List>
         )}
       </RadioControl>
     ),

diff --git a/src/components/rating-field/RatingField.tsx b/src/components/rating-field/RatingField.tsx
@@ -30,6 +30,7 @@ export const RatingField = ({
             {options.map((value) => (
               <div key={value} onClick={() => actions.setValue(value)}>
                 <Rating.Star
+                  // @ts-expect-error https://github.com/form-atoms/field/issues/66
                   filled={props.value && value ? value <= props.value : false}
                 />
               </div>

diff --git a/src/components/story-form/StoryForm.tsx b/src/components/story-form/StoryForm.tsx
@@ -8,6 +8,7 @@ import { RenderProp } from "react-render-prop-type";
 export type VariantProps<Fields extends FormFields> = {
   required: boolean;
   form: FormAtom<Fields>;
+  fields: Fields;
 };
 
 type StoryFormProps<Fields extends FormFields> = {
@@ -31,7 +32,7 @@ export const StoryForm = <Fields extends FormFields>({
       })}
       className="flex flex-col gap-4"
     >
-      {children({ required, form })}
+      {children({ required, form, fields })}
       <div className="flex gap-2">
         <Button type="submit">Submit</Button>
         <Button color="gray" onClick={() => reset()}>

diff --git a/src/hooks/useFieldError.tsx b/src/hooks/useFieldError.tsx
@@ -5,8 +5,8 @@ export type InputColors = (keyof FlowbiteStateColors)[];
 
 export type FlowbiteStateColor = keyof FlowbiteStateColors;
 
-export const useFieldError = <Value,>(
-  field: FieldAtom<Value>,
+export const useFieldError = (
+  field: FieldAtom<any>,
   colors: InputColors = ["failure"],
 ) => {
   const { validateStatus, errors, touched } = useFieldState(field);