feat: added haring-react-hook-form package, FormDynamicZone, related …

…types/utilities

packages/haring-react-hook-form/CHANGELOG.md

@@ -0,0 +1 @@
+# @smile/haring-react-hook-form

packages/haring-react-hook-form/README.md

@@ -0,0 +1,32 @@
+# @smile/haring-react-hook-form
+
+React Hook Form related components.
+
+## Documentation
+
+You can access the documentation here: https://smile-sa.github.io/haring-doc
+
+## Prerequisite
+
+You must have React 18 or later installed on your project.
+
+## Installation
+
+You must install `@smile/haring-react` first and then install
+`react-hook-form` peer dependencies with:
+
+```bash
+npm i @smile/haring-react react-hook-form
+```
+
+## Styles
+
+Import the styles in your app with:
+
+```js
+import '@smile/haring-react-hook-form/style.css';
+```
+
+## License
+
+LGPL-3.0

packages/haring-react-hook-form/babel.config.cjs

@@ -0,0 +1,3 @@
+const { babelConfig } = require('test');
+
+module.exports = babelConfig;

packages/haring-react-hook-form/jest.config.ts

@@ -0,0 +1 @@
+export { jestConfig as default } from 'test';

packages/haring-react-hook-form/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@smile/haring-react-hook-form",
+  "version": "0.15.0",
+  "description": "React Hook Form component library based on mantine",
+  "license": "LGPL-3.0",
+  "homepage": "https://github.com/Smile-SA/haring",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Smile-SA/haring.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Smile-SA/haring/issues"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "next",
+    "nextjs",
+    "ui",
+    "components",
+    "ui-kit",
+    "library",
+    "frontend",
+    "design",
+    "form",
+    "react-hook-form"
+  ],
+  "author": {
+    "name": "Tony Cabaye",
+    "email": "tonai59+github@gmail.com",
+    "url": "https://github.com/tonai"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./server": {
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs",
+      "types": "./dist/server.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "server": [
+        "./dist/server.d.ts"
+      ],
+      "mock": [
+        "./dist/mock.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "CHANGELOG.md",
+    "LICENSE",
+    "package.json",
+    "README.md",
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "jest",
+    "prepublishOnly": "npm run build && node ../../scripts/prepublish.mjs"
+  },
+  "dependencies": {
+    "@smile/haring-react": "0.15.0",
+    "@smile/haring-react-shared": "0.15.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.0",
+    "@storybook/addon-actions": "^7.4.1",
+    "@storybook/jest": "^0.2.2",
+    "@storybook/preview-api": "^7.4.1",
+    "@storybook/testing-library": "^0.2.0",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "test": "*",
+    "tsconfig": "*",
+    "typescript": "~5.2.0",
+    "vite": "^5.0.12",
+    "vite-plugin-dts": "^3.7.2"
+  },
+  "peerDependencies": {
+    "@mantine/core": ">=7.11.0",
+    "@mantine/hooks": ">=7.11.0",
+    "react-hook-form": "^7.52.2",
+    "@phosphor-icons/react": ">=2",
+    "react": ">=18.0",
+    "react-dom": ">=18.0"
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}

packages/haring-react-hook-form/src/Components/FormDynamicZone/FormDynamicZone.mock.tsx

@@ -0,0 +1,44 @@
+import type { IFormDynBlock, IFormField, IFormRegisterFunc } from '../../types';
+import type { ReactElement } from 'react';
+
+import { Alien, Cube, Leaf, TreasureChest } from '@phosphor-icons/react';
+
+export const blockOptionsMock = [
+  { id: 'default', label: 'Default', leftSection: <Alien /> },
+  { id: 'other', label: 'Other', leftSection: <Leaf /> },
+  { id: 'stuff', label: 'Stuff', leftSection: <TreasureChest /> },
+];
+
+export const dynamicBlocksMock: IFormDynBlock[] = [
+  {
+    block: {
+      blockHeader: (
+        <>
+          <Cube key="1" />
+          <span key="2">Example</span>
+        </>
+      ),
+      blockType: 'default',
+      opened: true,
+      value: 'initial',
+    },
+    button: {
+      blockType: 'default',
+      label: 'Example',
+      leftSection: <Cube />,
+    },
+    renderFunc: (
+      b: IFormField,
+      _i: number,
+      register: IFormRegisterFunc,
+      registerName: string,
+    ): ReactElement => {
+      return (
+        <>
+          <span>works</span>
+          <input key={b.id} {...register(registerName)} />
+        </>
+      );
+    },
+  },
+];

packages/haring-react-hook-form/src/Components/FormDynamicZone/FormDynamicZone.stories.tsx

@@ -0,0 +1,35 @@
+import type { IFormDynamicZoneProps } from './FormDynamicZone';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactElement } from 'react';
+
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { FormDynamicZone as Cmp } from './FormDynamicZone';
+import { dynamicBlocksMock } from './FormDynamicZone.mock';
+
+const meta = {
+  component: Cmp,
+  tags: ['autodocs'],
+  title: '3-custom/Form/FormDynamicZone',
+} satisfies Meta<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+function render() {
+  return function Render(props: IFormDynamicZoneProps): ReactElement {
+    const methods = useForm();
+    return (
+      <FormProvider {...methods}>
+        <div style={{ margin: '0 200px' }}>
+          <Cmp {...props} />
+        </div>
+      </FormProvider>
+    );
+  };
+}
+
+export const FormDynamicZone: IStory = {
+  args: { dynamicBlocks: dynamicBlocksMock, dynamicZoneName: 'dynTest' },
+  render: render(),
+};

packages/haring-react-hook-form/src/Components/FormDynamicZone/FormDynamicZone.test.tsx

@@ -0,0 +1,26 @@
+import type { ReactElement } from 'react';
+
+import { renderWithProviders } from '@smile/haring-react-shared/test-utils';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { FormDynamicZone } from './FormDynamicZone';
+import { dynamicBlocksMock } from './FormDynamicZone.mock';
+
+describe('FormDynamicZone', () => {
+  it('matches snapshot', () => {
+    function TestWithProvider(): ReactElement {
+      const methods = useForm();
+      return (
+        <FormProvider {...methods}>
+          <FormDynamicZone
+            dynamicBlocks={dynamicBlocksMock}
+            dynamicZoneName="dynamicZoneTest"
+          />
+        </FormProvider>
+      );
+    }
+
+    const { container } = renderWithProviders(<TestWithProvider />);
+    expect(container).toMatchSnapshot();
+  });
+});