moved things. added checkbox

packages/ui-patterns/form/Checkbox/FormCheckbox.stories.tsx

@@ -0,0 +1,136 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { StoryContext, StoryObj } from '@storybook/react'
+import { useForm } from 'react-hook-form'
+import {
+  Button,
+  Checkbox_Shadcn_,
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  Form_Shadcn_,
+} from 'ui'
+import { z } from 'zod'
+import { transformSourceForm } from '../../lib/transformSource'
+import { FormCheckbox } from './FormCheckbox'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: 'Form Data Inputs/FormCheckbox',
+  component: FormCheckbox,
+  decorators: [
+    (Story: any) => {
+      return <Story />
+    },
+  ],
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+    docs: {
+      // controls: { exclude: ['style'] },
+      source: {
+        language: 'tsx',
+        transform: (code: string, StoryContext: StoryContext) =>
+          transformSourceForm(code, StoryContext).replace('_c', 'FormCheckbox'),
+      },
+    },
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  // argTypes: {},
+}
+
+// export default meta
+
+type Story = StoryObj<typeof FormCheckbox>
+
+export const Primary: Story = {
+  render: function Render(args) {
+    const FormSchema = z.object({
+      mobile: z.boolean().default(false).optional(),
+    })
+
+    const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+      defaultValues: {
+        mobile: true,
+      },
+    })
+
+    function onSubmit(data: z.infer<typeof FormSchema>) {
+      console.log(data)
+    }
+    return (
+      // <Form_Shadcn_ {...form}>
+      //   <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
+      //     <FormCheckbox {...args} name="username" control={form.control} />
+      //     <Button size="small" type="primary" htmlType="submit">
+      //       Submit
+      //     </Button>
+      //   </form>
+      // </Form_Shadcn_>
+
+      <Form_Shadcn_ {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          {/* <FormCheckbox
+            control={form.control}
+            name="mobile"
+            label="Use different settings for my mobile devices"
+            description="You can manage your mobile notifications in the mobile settings page."
+          /> */}
+          <FormField_Shadcn_
+            control={form.control}
+            name="mobile"
+            render={({ field }) => (
+              <FormItem_Shadcn_ className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                <FormControl_Shadcn_>
+                  <Checkbox_Shadcn_ checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl_Shadcn_>
+                <div className="space-y-1 leading-none">
+                  <FormLabel_Shadcn_>
+                    Use different settings for my mobile devices
+                  </FormLabel_Shadcn_>
+                  <FormDescription_Shadcn_>
+                    You can manage your mobile notifications in the mobile settings page.
+                  </FormDescription_Shadcn_>
+                </div>
+              </FormItem_Shadcn_>
+            )}
+          />
+          {/* <FormField_Shadcn_
+          control={form.control}
+          name="mobile"
+          render={({ field }) => (
+            <FormItem_Shadcn_ className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+              <FormControl_Shadcn_>
+                <Checkbox_Shadcn_
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <div className="space-y-1 leading-none">
+                <FormLabel>
+                  Use different settings for my mobile devices
+                </FormLabel>
+                <FormDescription>
+                  You can manage your mobile notifications in the{" "}
+                  <Link href="/examples/forms">mobile settings</Link> page.
+                </FormDescription>
+              </div>
+            </FormItem>
+          )}
+        /> */}
+          <Button htmlType="submit">Submit</Button>
+        </form>
+      </Form_Shadcn_>
+    )
+  },
+  args: {
+    label: 'Username',
+    description: 'this is the description',
+    labelOptional: 'optional',
+    placeholder: 'shadcn',
+  },
+}

packages/ui-patterns/form/Checkbox/FormCheckbox.tsx

@@ -0,0 +1,38 @@
+import React, { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+import { FormControl_Shadcn_, FormField_Shadcn_, FormItem_Shadcn_ } from 'ui'
+import { InputWithLayout } from '../withLayout/InputWithLayout'
+import { CheckboxWithLayout } from '../withLayout/CheckboxWithLayout'
+
+export interface Props extends Omit<ComponentProps<typeof InputWithLayout>, 'ref'> {
+  name: React.ComponentProps<typeof FormField_Shadcn_>['name']
+  control: any // { key: string }
+  formField?: Omit<React.ComponentProps<typeof FormField_Shadcn_>, 'ref'>
+}
+
+const FormCheckbox = forwardRef<
+  ElementRef<typeof CheckboxWithLayout>,
+  Omit<ComponentPropsWithoutRef<typeof CheckboxWithLayout>, 'name'> & Props
+>(({ formField, name, control, ...props }, ref) => {
+  return (
+    <FormField_Shadcn_
+      {...formField}
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <FormItem_Shadcn_>
+          <FormControl_Shadcn_>
+            <CheckboxWithLayout
+              {...props}
+              {...field}
+              isReactForm={true}
+              checked={field.value}
+              onCheckedChange={field.onChange}
+            />
+          </FormControl_Shadcn_>
+        </FormItem_Shadcn_>
+      )}
+    />
+  )
+})
+
+export { FormCheckbox }

packages/ui-patterns/form/Input/FormInput.stories.tsx

@@ -3,7 +3,7 @@ import { StoryContext, StoryObj } from '@storybook/react'
 import { useForm } from 'react-hook-form'
 import { Button, Form_Shadcn_ } from 'ui'
 import { z } from 'zod'
-import { transformSourceForm } from '../lib/transformSource'
+import { transformSourceForm } from '../../lib/transformSource'
 import { FormInput } from './FormInput'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export

packages/ui-patterns/form/Input/FormInput.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
 import { FormControl_Shadcn_, FormField_Shadcn_, FormItem_Shadcn_ } from 'ui'
-import { InputWithLayout } from './InputWithLayout'
+import { InputWithLayout } from '../withLayout/InputWithLayout'
 
 export interface Props extends Omit<ComponentProps<typeof InputWithLayout>, 'ref'> {
   name: React.ComponentProps<typeof FormField_Shadcn_>['name']
@@ -20,7 +20,7 @@ const FormInput = forwardRef<
       render={({ field }) => (
         <FormItem_Shadcn_>
           <FormControl_Shadcn_>
-            <InputWithLayout {...props} {...field} isForm={true} />
+            <InputWithLayout {...props} {...field} isReactForm={true} />
           </FormControl_Shadcn_>
         </FormItem_Shadcn_>
       )}

packages/ui-patterns/form/Page.tsx

@@ -20,9 +20,9 @@ import {
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
-import { FormInput } from './FormInput'
+import { FormInput } from './Input/FormInput'
 import { Box, User, User2 } from 'lucide-react'
-import { FormSelect, FormSelectTrigger } from './FormSelect'
+import { FormSelect, FormSelectTrigger } from './Select/FormSelect'
 
 // import { Header } from './Header'
 

packages/ui-patterns/form/Select/FormSelect.stories.tsx

@@ -17,10 +17,10 @@ import {
   SelectValue_Shadcn_,
 } from 'ui'
 import { z } from 'zod'
-import { transformSourceForm } from '../lib/transformSource'
+import { transformSourceForm } from '../../lib/transformSource'
 import { FormSelect, FormSelectTrigger } from './FormSelect'
-import { FormInput } from './FormInput'
-import { InputWithLayout } from './InputWithLayout'
+import { FormInput } from '../Input/FormInput'
+import { InputWithLayout } from '../withLayout/InputWithLayout'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 export default {

packages/ui-patterns/form/Select/FormSelect.tsx

@@ -6,8 +6,8 @@ import {
   SelectTrigger_Shadcn_,
   Select_Shadcn_,
 } from 'ui'
-import { InputWithLayout } from './InputWithLayout'
-import { SelectWithLayout } from './SelectWithLayout'
+import { InputWithLayout } from '../withLayout/InputWithLayout'
+import { SelectWithLayout } from '../withLayout/SelectWithLayout'
 
 export interface Props extends Omit<ComponentProps<typeof InputWithLayout>, 'ref'> {
   name: React.ComponentProps<typeof FormField_Shadcn_>['name']
@@ -32,7 +32,7 @@ const FormSelect = forwardRef<
               defaultValue={field.value}
               {...props}
               {...field}
-              isForm={true}
+              isReactForm={true}
             />
           </FormControl_Shadcn_>
         </FormItem_Shadcn_>

packages/ui-patterns/form/withLayout/CheckboxWithLayout.stories.tsx

@@ -0,0 +1,48 @@
+import { StoryContext, StoryObj } from '@storybook/react'
+import { transformSourceForm } from '../../lib/transformSource'
+import { CheckboxWithLayout } from './CheckboxWithLayout'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: 'Data Inputs with Layout/CheckboxWithLayout',
+  component: CheckboxWithLayout,
+  decorators: [
+    (Story: any) => {
+      return <Story />
+    },
+  ],
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+    docs: {
+      // controls: { exclude: ['style'] },
+      source: {
+        language: 'tsx',
+        transform: (code: string, StoryContext: StoryContext) =>
+          transformSourceForm(code, StoryContext).replace('_c', 'FormInput'),
+      },
+    },
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  // argTypes: {},
+}
+
+type Story = StoryObj<typeof CheckboxWithLayout>
+
+export const Primary: Story = {
+  render: function Render(args) {
+    return (
+      <div className="w-80">
+        <CheckboxWithLayout {...args} />
+      </div>
+    )
+  },
+  args: {
+    id: 'username',
+    name: 'username',
+    label: 'Username',
+    description: 'this is the description',
+  },
+}

packages/ui-patterns/form/withLayout/CheckboxWithLayout.tsx

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+import { FormLayout, FormLayoutProps } from '../../forms/layout/FormLayout'
+import { Checkbox_Shadcn_ } from 'ui'
+
+const CheckboxWithLayout = forwardRef<
+  ElementRef<typeof Checkbox_Shadcn_>,
+  ComponentPropsWithoutRef<typeof Checkbox_Shadcn_> & Omit<FormLayoutProps, 'layout'>
+>(
+  (
+    { afterLabel, beforeLabel, labelOptional, label, description, isReactForm = false, ...props },
+    ref
+  ) => {
+    return (
+      <FormLayout
+        label={label}
+        afterLabel={afterLabel}
+        beforeLabel={beforeLabel}
+        labelOptional={labelOptional}
+        layout="flex"
+        descriptionText={description}
+        isReactForm={isReactForm}
+        name={props.name}
+      >
+        <Checkbox_Shadcn_ ref={ref} {...props} />
+      </FormLayout>
+    )
+  }
+)
+
+export { CheckboxWithLayout }

packages/ui-patterns/form/withLayout/InputWithLayout.stories.tsx

@@ -1,6 +1,5 @@
 import { StoryContext, StoryObj } from '@storybook/react'
-import { transformSourceForm } from '../lib/transformSource'
-import { FormInput } from './FormInput'
+import { transformSourceForm } from '../../lib/transformSource'
 import { InputWithLayout } from './InputWithLayout'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -32,7 +31,7 @@ export default {
 
 // export default meta
 
-type Story = StoryObj<typeof FormInput>
+type Story = StoryObj<typeof InputWithLayout>
 
 export const Primary: Story = {
   render: function Render(args) {

packages/ui-patterns/form/withLayout/InputWithLayout.tsx

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
-import { FormLayout, FormLayoutProps } from '../forms/layout/FormLayout'
-import { Input } from './../data-inputs/Input'
+import { FormLayout, FormLayoutProps } from '../../forms/layout/FormLayout'
+import { Input } from '../../data-inputs/Input'
 
 const InputWithLayout = forwardRef<
   ElementRef<typeof Input>,
@@ -14,7 +14,7 @@ const InputWithLayout = forwardRef<
       layout,
       label,
       description,
-      isForm = false,
+      isReactForm = false,
       ...props
     },
     ref
@@ -27,7 +27,7 @@ const InputWithLayout = forwardRef<
         labelOptional={labelOptional}
         layout={layout}
         descriptionText={description}
-        isForm={isForm}
+        isReactForm={isReactForm}
       >
         <Input ref={ref} {...props} />
       </FormLayout>

packages/ui-patterns/form/withLayout/SelectWithLayout.stories.tsx

@@ -1,13 +1,12 @@
 import { StoryContext, StoryObj } from '@storybook/react'
-import { transformSourceForm } from '../lib/transformSource'
-import { FormInput } from './FormInput'
-import { SelectWithLayout } from './SelectWithLayout'
 import {
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
 } from 'ui'
+import { transformSourceForm } from '../../lib/transformSource'
+import { SelectWithLayout } from './SelectWithLayout'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 export default {
@@ -38,7 +37,7 @@ export default {
 
 // export default meta
 
-type Story = StoryObj<typeof FormInput>
+type Story = StoryObj<typeof SelectWithLayout>
 
 export const Primary: Story = {
   render: function Render(args) {
@@ -47,7 +46,6 @@ export const Primary: Story = {
         <SelectWithLayout
           {...args}
           name="email"
-          isForm={false}
           defaultValue={'m@example.com'}
           value={'m@example.com'}
         >
@@ -64,8 +62,8 @@ export const Primary: Story = {
     )
   },
   args: {
-    label: 'Username',
-    description: 'this is the description',
-    labelOptional: 'optional',
+    // label: 'Username',
+    // description: 'this is the description',
+    // labelOptional: 'optional',
   },
 }

packages/ui-patterns/form/withLayout/SelectWithLayout.tsx

@@ -1,10 +1,10 @@
 import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
 import { Select_Shadcn_ } from 'ui'
-import { FormLayout, FormLayoutProps } from '../forms/layout/FormLayout'
+import { FormLayout, FormLayoutProps } from '../../forms/layout/FormLayout'
 
 const SelectWithLayout = forwardRef<
   ElementRef<typeof Select_Shadcn_>,
-  Omit<ComponentPropsWithoutRef<typeof Select_Shadcn_>, 'name'> & FormLayoutProps
+  ComponentPropsWithoutRef<typeof Select_Shadcn_> & FormLayoutProps
 >(
   (
     {
@@ -14,7 +14,7 @@ const SelectWithLayout = forwardRef<
       layout,
       label,
       description,
-      isForm = false,
+      isReactForm = false,
       ...props
     },
     ref
@@ -27,7 +27,7 @@ const SelectWithLayout = forwardRef<
         labelOptional={labelOptional}
         layout={layout}
         descriptionText={description}
-        isForm={isForm}
+        isReactForm={isReactForm}
       >
         <Select_Shadcn_ {...props} />
       </FormLayout>

packages/ui-patterns/forms/layout/FormLayout.tsx

@@ -15,7 +15,7 @@ export type FormLayoutProps = {
   beforeLabel?: string
   labelOptional?: string | React.ReactNode
   layout?: 'horizontal' | 'vertical'
-  isForm?: boolean
+  isReactForm?: boolean
 }
 
 type Props = {
@@ -32,7 +32,8 @@ type Props = {
   afterLabel?: string | React.ReactNode
   nonBoxInput?: boolean
   labelLayout?: 'horizontal' | 'vertical'
-  isForm?: boolean
+  isReactForm?: boolean
+  name?: string
 }
 
 export const FormLayout = React.forwardRef<
@@ -109,10 +110,10 @@ export const FormLayout = React.forwardRef<
 
     const hasLabel = Boolean(label || beforeLabel || afterLabel)
 
-    const renderError = props.isForm && <FormMessage_Shadcn_ className="mt-2" />
+    const renderError = props.isReactForm && <FormMessage_Shadcn_ className="mt-2" />
 
     const renderDescription =
-      descriptionText && props.isForm ? (
+      descriptionText && props.isReactForm ? (
         <FormDescription_Shadcn_
           className={[__styles.description.base, __styles.description.size[size]].join(' ')}
           id={id + '-description'}
@@ -130,7 +131,27 @@ export const FormLayout = React.forwardRef<
         </p>
       )
 
-    const Label = (props.isForm && FormLabel_Shadcn_) || Label_Shadcn_
+    const LabelContents = () => (
+      <>
+        {beforeLabel && (
+          <span
+            className={[__styles.label_before.base, __styles.label_before.size[size]].join(' ')}
+            id={id + '-before'}
+          >
+            {beforeLabel}
+          </span>
+        )}
+        {label}
+        {afterLabel && (
+          <span
+            className={[__styles.label_after.base, __styles.label_after.size[size]].join(' ')}
+            id={id + '-after'}
+          >
+            {afterLabel}
+          </span>
+        )}
+      </>
+    )
 
     return (
       <div ref={ref} {...props} className={cn(containerClasses.join(' '), className)}>
@@ -145,31 +166,16 @@ export const FormLayout = React.forwardRef<
             // }
             className={labelContainerClasses.join(' ')}
           >
-            {hasLabel && (
-              <Label>
-                {beforeLabel && (
-                  <span
-                    className={[__styles.label_before.base, __styles.label_before.size[size]].join(
-                      ' '
-                    )}
-                    id={id + '-before'}
-                  >
-                    {beforeLabel}
-                  </span>
-                )}
-                {label}
-                {afterLabel && (
-                  <span
-                    className={[__styles.label_after.base, __styles.label_after.size[size]].join(
-                      ' '
-                    )}
-                    id={id + '-after'}
-                  >
-                    {afterLabel}
-                  </span>
-                )}
-              </Label>
+            {hasLabel && props.isForm ? (
+              <FormLabel_Shadcn_ htmlFor={props.name}>
+                <LabelContents />
+              </FormLabel_Shadcn_>
+            ) : (
+              <Label_Shadcn_ htmlFor={props.name}>
+                <LabelContents />
+              </Label_Shadcn_>
             )}
+
             {labelOptional && (
               <span
                 className={[__styles.label_optional.base, __styles.label_optional.size[size]].join(