inato · jrmdayn · Jan 16, 2025 · Dec 24, 2024 · Dec 24, 2024 · Dec 25, 2024
diff --git a/.changeset/little-rice-shave.md b/.changeset/little-rice-shave.md
@@ -0,0 +1,8 @@
+---
+"@inato-form/react-hook-form": minor
+"@inato-form/mantine": minor
+"@inato-form/fields": minor
+"@inato-form/core": minor
+---
+
+Add @inato-form/react-hook-form and @inato-form/mantine packages
diff --git a/apps/vite/.gitignore b/apps/vite/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/vite/README.md b/apps/vite/README.md
@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```
diff --git a/apps/vite/eslint.config.js b/apps/vite/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/apps/vite/index.html b/apps/vite/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/vite/package.json b/apps/vite/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@inato-form/core": "workspace:^",
+    "@inato-form/fields": "workspace:^",
+    "@inato-form/mantine": "workspace:^",
+    "@inato-form/react-hook-form": "workspace:^",
+    "@mantine/core": "^7.15.2",
+    "@mantine/hooks": "^7.15.2",
+    "effect": "^3.11.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "7.53.2",
+    "react-router-dom": "^7.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "postcss": "^8.4.49",
+    "postcss-preset-mantine": "^1.17.0",
+    "postcss-simple-vars": "^7.0.1",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5"
+  }
+}
diff --git a/apps/vite/postcss.config.cjs b/apps/vite/postcss.config.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};
diff --git a/apps/vite/public/vite.svg b/apps/vite/public/vite.svg
diff --git a/apps/vite/src/App.tsx b/apps/vite/src/App.tsx
@@ -0,0 +1,23 @@
+import "@mantine/core/styles.css";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+
+import forms from "./forms";
+import { MantineProvider } from "@mantine/core";
+import { Layout } from "./Layout";
+
+export default function App() {
+  return (
+    <MantineProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route element={<Layout />}>
+            {forms.map((Form) => (
+              <Route key={Form.route} path={Form.route} element={<Form />} />
+            ))}
+            <Route path="*" element={<Navigate to="/simple" />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </MantineProvider>
+  );
+}
diff --git a/apps/vite/src/Layout.tsx b/apps/vite/src/Layout.tsx
@@ -0,0 +1,31 @@
+import { AppShell, Burger, Group, Title, NavLink } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { Outlet } from "react-router-dom";
+import forms from "./forms";
+
+export function Layout() {
+  const [opened, { toggle }] = useDisclosure();
+
+  return (
+    <AppShell
+      header={{ height: 60 }}
+      navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
+      padding="md"
+    >
+      <AppShell.Header>
+        <Group h="100%" px="md">
+          <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+          <Title>Inato forms</Title>
+        </Group>
+      </AppShell.Header>
+      <AppShell.Navbar p="md">
+        {forms.map(({ route, title }) => (
+          <NavLink key={route} href={route} label={title} />
+        ))}
+      </AppShell.Navbar>
+      <AppShell.Main>
+        <Outlet />
+      </AppShell.Main>
+    </AppShell>
+  );
+}
diff --git a/apps/vite/src/forms/Simple.tsx b/apps/vite/src/forms/Simple.tsx
@@ -0,0 +1,72 @@
+import { FormBody, FormDisplay } from "@inato-form/core";
+import {
+  Checkbox,
+  CheckboxGroup,
+  MultiSelect,
+  NumberInput,
+  RadioGroup,
+  Select,
+  TextArea,
+  TextInput,
+} from "@inato-form/fields";
+import { Effect, pipe } from "effect";
+import * as Mantine from "@mantine/core";
+import { reportError, simulateSubmit } from "./utils";
+import { MantineReactHookFormLive } from "./layer";
+
+const body = FormBody.struct({
+  text: TextInput.Required,
+  textarea: TextArea.Required,
+  number: NumberInput.Optional,
+  select: Select.OptionalWithLiterals("react", "svelte", "ng", "vue"),
+  multiselect: MultiSelect.Default("react", "svelte", "ng", "vue"),
+  radiogroup: RadioGroup.Optional("react", "svelte", "ng", "vue"),
+  checkbox: Checkbox.Default,
+  checkboxgroup: CheckboxGroup.Default("react", "svelte", "ng", "vue"),
+});
+
+const Display = pipe(
+  FormDisplay.make(body),
+  Effect.provide(MantineReactHookFormLive),
+  Effect.runSync
+);
+
+const options = [
+  { label: "React", value: "react" },
+  { label: "Svelte", value: "svelte" },
+  { label: "Angular", value: "ng" },
+  { label: "Vue", value: "vue" },
+] as const;
+
+export default function Simple() {
+  return (
+    <Display.Form
+      onSubmit={({ encoded }) => simulateSubmit(encoded)}
+      onError={reportError}
+      validationMode="onSubmit"
+    >
+      <Mantine.Stack>
+        <Display.text label="text" placeholder="type something here..." />
+        <Display.textarea label="textarea" />
+        <Display.number label="number" />
+        <Display.checkbox label="checkbox" />
+        <Display.select
+          label="select"
+          placeholder="select one option"
+          options={options}
+        />
+        <Display.multiselect
+          label="multiselect"
+          placeholder="select one or more option"
+          options={options}
+        />
+        <Display.radiogroup label="radiogroup" options={options} />
+        <Display.checkboxgroup label="checkboxgroup" options={options} />
+        <Mantine.Group justify="end">
+          <Display.Clear>clear</Display.Clear>
+          <Display.Submit>submit</Display.Submit>
+        </Mantine.Group>
+      </Mantine.Stack>
+    </Display.Form>
+  );
+}
diff --git a/apps/vite/src/forms/index.ts b/apps/vite/src/forms/index.ts
@@ -0,0 +1,9 @@
+import Simple from "./Simple"
+import type { FormExample } from "./utils"
+import { makeFormExample } from "./utils"
+
+const all: ReadonlyArray<FormExample> = [
+  makeFormExample(Simple, { route: "/simple", title: "Simple form" })
+]
+
+export default all
diff --git a/apps/vite/src/forms/layer.ts b/apps/vite/src/forms/layer.ts
@@ -0,0 +1,9 @@
+import { MantineFields } from "@inato-form/mantine"
+import { ReactHookForm } from "@inato-form/react-hook-form"
+import * as Mantine from "@mantine/core"
+import { Layer, pipe } from "effect"
+
+export const MantineReactHookFormLive = pipe(
+  MantineFields.layer,
+  Layer.provideMerge(ReactHookForm.layer(Mantine.Button))
+)
diff --git a/apps/vite/src/forms/utils.tsx b/apps/vite/src/forms/utils.tsx
@@ -0,0 +1,35 @@
+import { Container, Title } from "@mantine/core";
+import { pipe, Effect, Logger } from "effect";
+
+export interface FormExample extends React.FC {
+  title: string;
+  route: string;
+}
+
+export const makeFormExample = (
+  Form: React.FC,
+  { route, title }: { title: string; route: string }
+): FormExample => {
+  const FormExample = () => (
+    <Container mt="lg" maw={500}>
+      <Title>{title}</Title>
+      <Form />
+    </Container>
+  );
+  return Object.assign(FormExample, { title, route });
+};
+
+export const simulateSubmit = (values: unknown) =>
+  pipe(
+    Effect.log("submitting", { values }),
+    Effect.andThen(Effect.sleep(1000)),
+    Effect.provide(Logger.pretty),
+    Effect.runPromise
+  );
+
+export const reportError = (error: unknown) =>
+  pipe(
+    Effect.log("failed to submit", { error }),
+    Effect.provide(Logger.pretty),
+    Effect.runPromise
+  );
diff --git a/apps/vite/src/main.tsx b/apps/vite/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
diff --git a/apps/vite/src/vite-env.d.ts b/apps/vite/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />