docs(CheckboxGroup): use checkboxGroupStory

src/components/checkbox-group/CheckboxGroup.stories.tsx

@@ -1,16 +1,10 @@
-import { ReactNode } from "react";
+import { StoryObj } from "@storybook/react";
 
 import { CheckboxGroup } from "./CheckboxGroup";
+import { CheckboxGroupField } from "./CheckboxGroupField.mock";
 import { stringArrayField } from "../../fields";
 import { UseCheckboxGroupProps, ZodArrayField } from "../../hooks";
-import { formStory, meta } from "../../scenarios/StoryForm";
-import { FieldErrors } from "../field-errors";
-import { FieldLabel } from "../field-label";
-
-export default {
-  ...meta,
-  title: "components/CheckboxGroup",
-};
+import { StoryForm } from "../../scenarios/StoryForm";
 
 const languagesOptions = [
   { name: "Pascal", key: "pascal" },
@@ -22,55 +16,63 @@ const languagesOptions = [
   { name: "Na'vi", key: "navi" },
 ];
 
-const CheckboxGroupField = <Option, Field extends ZodArrayField>({
-  field,
-  label,
-  getValue,
-  getLabel,
-  options,
-}: { label: ReactNode } & UseCheckboxGroupProps<Option, Field>) => (
-  <div style={{ margin: "20px 0" }}>
-    <FieldLabel field={field} label={label} />
-    <CheckboxGroup
-      field={field}
-      getLabel={getLabel}
-      getValue={getValue}
-      options={options}
-    />
-    <FieldErrors field={field} />
-  </div>
-);
+type Language = (typeof languagesOptions)[number];
 
-export const Required = formStory({
+const meta = {
+  component: CheckboxGroup,
+  title: "components/CheckboxGroup",
   args: {
-    fields: {
-      languages: stringArrayField(),
-    },
-    children: ({ fields }) => (
-      <CheckboxGroupField
-        field={fields.languages}
-        label="What programming languages are you proficient with?"
-        options={languagesOptions}
-        getValue={({ key }) => key}
-        getLabel={({ name }) => name}
-      />
+    options: languagesOptions,
+    getValue: ({ key }: Language) => key,
+    getLabel: ({ name }: Language) => name,
+  },
+};
+
+export default meta;
+
+const checkboxGroupStory = <Option, Field extends ZodArrayField>(
+  storyObj: {
+    args: Pick<UseCheckboxGroupProps<Option, Field>, "field"> &
+      Omit<Partial<UseCheckboxGroupProps<Option, Field>>, "field">;
+  } & Omit<StoryObj<typeof meta>, "args">,
+) => ({
+  ...storyObj,
+  decorators: [
+    (Story: () => JSX.Element) => (
+      <StoryForm fields={{ field: storyObj.args.field }}>
+        {() => (
+          <p>
+            <Story />
+          </p>
+        )}
+      </StoryForm>
     ),
+  ],
+});
+
+export const Required = checkboxGroupStory({
+  args: {
+    field: stringArrayField(),
+  },
+});
+
+export const Optional = checkboxGroupStory({
+  args: {
+    field: stringArrayField().optional(),
   },
 });
 
-export const Optional = formStory({
+export const ComposedField = checkboxGroupStory({
   args: {
-    fields: {
-      attachment: stringArrayField().optional(),
-    },
-    children: ({ fields }) => (
+    field: stringArrayField(),
+  },
+  render: (props) => {
+    return (
+      // @ts-expect-error not able to infer generics
       <CheckboxGroupField
-        field={fields.attachment}
         label="What programming languages are you proficient with?"
-        options={languagesOptions}
-        getValue={({ key }) => key}
-        getLabel={({ name }) => name}
+        {...props}
       />
-    ),
+    );
   },
 });

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

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+import { CheckboxGroup } from "./CheckboxGroup";
+import { UseCheckboxGroupProps, ZodArrayField } from "../../hooks";
+import { PicoFieldErrors } from "../../scenarios/PicoFieldErrors";
+import { FieldLabel } from "../field-label";
+
+export const CheckboxGroupField = <Option, Field extends ZodArrayField>({
+  field,
+  label,
+  getValue,
+  getLabel,
+  options,
+}: { label: ReactNode } & UseCheckboxGroupProps<Option, Field>) => (
+  <>
+    <FieldLabel field={field} label={label} />
+    <p>
+      <CheckboxGroup
+        field={field}
+        getLabel={getLabel}
+        getValue={getValue}
+        options={options}
+      />
+    </p>
+    <PicoFieldErrors field={field} />
+  </>
+);

src/components/checkbox-group/Docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Stories } from "@storybook/blocks";
+import { ArgTypes, Meta, Stories } from "@storybook/blocks";
 import * as CheckboxGroupStories from "./CheckboxGroup.stories";
 
 <Meta title="components/CheckboxGroup" of={CheckboxGroupStories} />
@@ -14,13 +14,17 @@ An alternative to the [MultiSelect](?path=/docs/components-multiselect--docs) co
 import { CheckboxGroup } from "@form-atoms/field";
 ```
 
+#### Alternative
+
+- [MultiSelect](?path=/docs/components-multiselect--docs) component is an alternative for multi-choice answer.
+- Prefer the `CheckboxGroup` when there are few items to select from, which fit the screen viewport.
+
 ### Features
 
 - ✅ When empty & required, it adds the `required` prop to the checkbox, prompting user to select one of the options.
 
-### Alternative
+### Props
 
-- [MultiSelect](?path=/docs/components-multiselect--docs) component is an alternative for multi-choice answer.
-- Prefer the `CheckboxGroup` when there are few items to select from, which fit the screen viewport.
+<ArgTypes />
 
 <Stories />

src/components/field-errors/FieldErrors.tsx

@@ -2,11 +2,13 @@ import { useFieldErrors } from "form-atoms";
 import type { FieldAtom } from "form-atoms";
 import { RenderProp } from "react-render-prop-type";
 
-type Props = RenderProp<{ errors: ReturnType<typeof useFieldErrors> }>;
+type ChildrenProp = RenderProp<{ errors: ReturnType<typeof useFieldErrors> }>;
+
+export type FieldErrorsProps = {
+  field: FieldAtom<any>;
+} & Partial<ChildrenProp>;
 
 export const FieldErrors = ({
   field,
   children = ({ errors }) => <>{errors.join("\n")}</>,
-}: {
-  field: FieldAtom<any>;
-} & Partial<Props>) => children({ errors: useFieldErrors(field) });
+}: FieldErrorsProps) => children({ errors: useFieldErrors(field) });