autoforma 1.0.0

package/test-utils/index.ts

@@ -0,0 +1,5 @@
+import userEvent from '@testing-library/user-event';
+
+export * from '@testing-library/react';
+export { render } from './render';
+export { userEvent };

package/test-utils/render.tsx

@@ -0,0 +1,11 @@
+import { render as testingLibraryRender } from '@testing-library/react';
+import { MantineProvider } from '@mantine/core';
+import { theme } from '../src/theme';
+
+export function render(ui: React.ReactNode) {
+  return testingLibraryRender(ui, {
+    wrapper: ({ children }: { children: React.ReactNode }) => (
+      <MantineProvider theme={theme}>{children}</MantineProvider>
+    ),
+  });
+}

package/text

@@ -0,0 +1,64 @@
+ customRender={(field, value, error, onParentChange, formValues, options) => {
+          if (field.type === 'object' && field?.fields) {
+            const onChange = (name: string, value: any) => {
+              onParentChange(`${field.name}.${name}`, value);
+            };
+
+            const parentName = field.name;
+
+            const fieldError: Record<string, React.ReactNode> =
+              error &&
+              typeof error === 'object' &&
+              !React.isValidElement(error) &&
+              !Array.isArray(error) &&
+              !(error instanceof Promise)
+                ? (error as Record<string, React.ReactNode>)
+                : {};
+
+            const content = field?.fields.map((field, index) => (
+              <Grid.Col key={index} span={{ base: 12, md: 6 }}>
+                <FieldRender
+                  key={index}
+                  field={field}
+                  formValues={formValues}
+                  onChange={onChange}
+                  error={fieldError[`${parentName}.${field.name}`]}
+                  value={value[field.name]}
+                />
+              </Grid.Col>
+            ));
+
+            return (
+              <>
+                <Accordion
+                  defaultValue={field.name}
+                  variant="contained"
+                  styles={{
+                    root: {
+                      border:
+                        typeof error === 'object' && Object.keys(fieldError).length
+                          ? 'red 1px solid'
+                          : undefined,
+                    },
+                  }}
+                >
+                  <Accordion.Item value={field.name}>
+                    <Accordion.Control
+                      styles={{
+                        label: {
+                          visibility: 'hidden',
+                        },
+                      }}
+                    >
+                      {field.label}
+                    </Accordion.Control>
+                    <Accordion.Panel>
+                      <Grid>{content}</Grid>
+                    </Accordion.Panel>
+                  </Accordion.Item>
+                </Accordion>
+              </>
+            );
+          }
+          return null;
+        }}

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "types": ["node", "@testing-library/jest-dom", "vitest/globals"],
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@test-utils": ["./test-utils"]
+    }
+  },
+  "include": ["src", "test-utils"]
+}

package/vite.config.mjs

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      name: 'AutoForma',
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+    },
+    outDir: 'dist',
+  },
+  plugins: [react(), dts()],
+});

package/vitest.setup.mjs

@@ -0,0 +1,29 @@
+import '@testing-library/jest-dom/vitest';
+
+import { vi } from 'vitest';
+
+const { getComputedStyle } = window;
+window.getComputedStyle = (elt) => getComputedStyle(elt);
+window.HTMLElement.prototype.scrollIntoView = () => {};
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+window.ResizeObserver = ResizeObserver;

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />

package/vitest.workspace.js

@@ -0,0 +1,30 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+import { defineWorkspace } from 'vitest/config';
+
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/writing-tests/test-addon
+export default defineWorkspace([
+  'vite.config.mjs',
+  {
+    extends: 'vite.config.mjs',
+    plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
+      storybookTest({ configDir: path.join(dirname, '.storybook') }),
+    ],
+    test: {
+      name: 'storybook',
+      browser: {
+        enabled: true,
+        headless: true,
+        provider: 'playwright',
+        instances: [{ browser: 'chromium' }],
+      },
+      setupFiles: ['.storybook/vitest.setup.ts'],
+    },
+  },
+]);