Form with controls and hooks (#9)

* Add dependencies and necessary translations

* Add Form component with hooks

* Add FormControl component with ZodUtils

* Add translations to storybook previews

* Add field Controls

* Add Control stories, change file structure and add `index.ts`

* Add changeset

* Use memo instead of forwardRef

* Small cleanup and improvements
- move hooks to form folder
- replace `type + &` with `interface + extends`
- improve package.json
and more

* Move files a bit and remove `control` word from filenames

* Create `FormTranslationContext` and use instead of `i18n`

* Remove i18n dependencies and files

* Remove export of alias `FormWithControls`

.changeset/chilly-timers-sort.md

@@ -0,0 +1,8 @@
+---
+"@utima/ui-informed": minor
+---
+
+Add Form component with `informed` and context
+Add multiple Controls tied with utima/ui components and stories for them
+Add Zod resolver
+Setup i18next with essential czech translations (so far without possibility to customize)

packages/ui-informed/README.md

@@ -4,4 +4,37 @@ Combination of components from Utima/ui and form library Informed.
 
 # Development
 
-For this package to be working locally for you, you need to have have @utima/ui package built.
+For this package to be working locally for you, you need to have have @utima/ui package built.
+
+# Usage
+
+There are some default translations. If you want to replace them you need to wrap your application (or form) with `FormTranslationsContext.Provider` with value that will replace default translations, f.e.:
+
+```javascript
+const translations = {
+  actions: {
+    success: {
+      title: 'Úspěch',
+      message: 'Položka byla úspěšně uložena.',
+    },
+    fail: {
+      title: 'Neúspěch',
+      message: 'Položka nebyla uložena.',
+    },
+  },
+  errors: {
+    required: 'Tento údaj je povinný',
+  },
+  labels: {
+    optional: 'volitelné',
+  },
+};
+
+function App() {
+  return (
+    <FormTranslationsContext.Provider value={translations}>
+      ...
+    </FormTranslationsContext.Provider>
+  );
+}
+```

packages/ui-informed/package.json

@@ -50,11 +50,16 @@
     "react-dom": "^18.2.0",
     "storybook": "^7.6.16",
     "tailwindcss": "^3.4.1",
-    "vite-tsconfig-paths": "^4.3.1"
+    "vite-tsconfig-paths": "^4.3.1",
+    "zod": "^3.22.4"
   },
   "peerDependencies": {
     "@utima/ui": "^0.16.2",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "zod": ">=3.0.0 <4.0.0"
+  },
+  "dependencies": {
+    "informed": "^4.56.3"
   }
 }

packages/ui-informed/src/controls/checkbox/Checkbox.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Checkbox } from './Checkbox';
+import { Form } from '../..';
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  tags: ['autodocs'],
+  title: 'Controls/CheckboxControl',
+  args: {
+    name: 'input',
+    label: 'Checkbox',
+    tooltip: 'Tooltip',
+  },
+  decorators: [
+    Story => (
+      <Form initialValues={{ input: false }}>
+        <div className='flex flex-col sm:col-span-3'>
+          <Story />
+        </div>
+      </Form>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Basic: Story = {
+  args: {},
+};

packages/ui-informed/src/controls/checkbox/Checkbox.tsx

@@ -0,0 +1,33 @@
+import { Checkbox as CheckboxUI } from '@utima/ui';
+import type { ComponentProps } from 'react';
+
+import { FormControl } from '../../formControl/FormControl';
+
+type CheckboxProps = Omit<ComponentProps<typeof FormControl>, 'render'>;
+
+/**
+ * CheckboxControl component that is controlled by Informed. It is a wrapped in the
+ * `FormControl` component, which provides the necessary props for Informed to
+ * work along with label and error message handling.
+ */
+export function Checkbox({ ...restProps }: CheckboxProps) {
+  return (
+    <FormControl
+      {...restProps}
+      render={({ field: { ref, userProps, fieldApi, fieldState } }) => (
+        <CheckboxUI
+          ref={ref}
+          value={fieldState.value as any} // TODO: correct type
+          onCheckedChange={value => {
+            fieldApi.setValue(value);
+            fieldApi.setTouched(true);
+            fieldApi.setFocused(true);
+          }}
+          variant={fieldState.showError ? 'danger' : 'primary'}
+          {...userProps}
+          type='button'
+        />
+      )}
+    />
+  );
+}