autoforma 1.0.0 → 1.0.1

package/dist/src/components/AutoForm.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { FormValidateInput } from '@mantine/form';
+import { FieldRenderCustomRender } from '../types/custom-render';
+import { FieldSchema } from '../types/field';
+export interface AutoFormProps {
+    values?: Record<string, any>;
+    schema: FieldSchema[];
+    onSubmit: (values: Record<string, any>) => void;
+    container: (Form: React.ReactNode, onSubmit: VoidFunction, readOnly?: true) => React.ReactNode;
+    fieldContainer?: (field: React.ReactNode, fieldSchema: FieldSchema) => React.ReactNode;
+    customRender?: FieldRenderCustomRender;
+    validate?: FormValidateInput<Record<string, any>>;
+    readOnly?: true;
+    onFieldChange?: (name: string, value: any, values: Record<string, any>) => Record<string, any>;
+}
+export declare const validateRequiredFields: (schema: FieldSchema[], values: Record<string, any>, parentPath?: string) => Record<string, string>;
+declare const AutoForm: React.FC<AutoFormProps>;
+export default AutoForm;

package/dist/src/components/FieldRender.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { FieldRenderCustomRender } from '../types/custom-render';
+import { ArrayFieldOptions, FieldSchema } from '../types/field';
+interface FieldRenderProps {
+    field: FieldSchema;
+    value: any;
+    error?: React.ReactNode | Record<string, React.ReactNode>;
+    onChange: (name: string, value: any) => void;
+    formValues: Record<string, any>;
+    fieldContainer?: (field: React.ReactNode, fieldSchema: FieldSchema) => React.ReactNode;
+    customRender?: FieldRenderCustomRender;
+    readOnly?: true;
+}
+export declare function getArrayOptions(name: string, onChange: (name: string, value: any) => void, value: Record<string, any>[]): ArrayFieldOptions;
+declare const FieldRender: React.FC<FieldRenderProps>;
+export default FieldRender;

package/dist/src/components/fields/ArrayField.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { BaseFieldProps, FieldSchema } from '../../types/field';
+interface ArrayFieldProps extends BaseFieldProps<Record<string, any>[]> {
+    fields: FieldSchema[];
+    options: {
+        addElement: (val: Record<string, any>) => void;
+        replaceElement: (index: number, val: Record<string, any>) => void;
+        removeElement: (index: number) => void;
+    };
+    error?: Record<string, React.ReactNode>;
+}
+declare const ArrayField: React.FC<ArrayFieldProps>;
+export default ArrayField;

package/dist/src/components/fields/CheckField.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { BaseFieldProps } from '../../types/field';
+interface CheckFieldProps extends BaseFieldProps<boolean> {
+    label: string;
+}
+declare const CheckField: React.FC<CheckFieldProps>;
+export default CheckField;

package/dist/src/components/fields/DateField.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { BaseFieldProps } from '../../types/field';
+interface DateFieldProps extends BaseFieldProps<Date> {
+}
+declare const DateField: React.FC<DateFieldProps>;
+export default DateField;

package/dist/src/components/fields/DateTimeField.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { BaseFieldProps } from '../../types/field';
+interface DateTimeFieldProps extends BaseFieldProps<Date> {
+}
+declare const DateTimeField: React.FC<DateTimeFieldProps>;
+export default DateTimeField;

package/dist/src/components/fields/NumberField.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { BaseFieldProps } from '../../types/field';
+interface NumberFieldProps extends BaseFieldProps<number> {
+}
+declare const NumberField: React.FC<NumberFieldProps>;
+export default NumberField;

package/dist/src/components/fields/ObjectField.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { BaseFieldProps, FieldSchema } from '../../types/field';
+interface ObjectFieldProps extends BaseFieldProps<Record<string, any>> {
+    fields: FieldSchema[];
+    formValues: Record<string, any>;
+    error?: Record<string, React.ReactNode>;
+}
+declare const ObjectField: React.FC<ObjectFieldProps>;
+export default ObjectField;

package/dist/src/components/fields/SelectField.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { BaseFieldProps } from '../../types/field';
+interface SelectFieldProps extends BaseFieldProps<string> {
+    data: {
+        label: string;
+        value: string;
+    }[];
+}
+declare const SelectField: React.FC<SelectFieldProps>;
+export default SelectField;

package/dist/src/components/fields/TextAreaField.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { BaseFieldProps } from '../../types/field';
+interface TextAreaFieldProps extends BaseFieldProps<string> {
+}
+declare const TextAreaField: React.FC<TextAreaFieldProps>;
+export default TextAreaField;

package/dist/src/components/fields/TextField.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { BaseFieldProps } from '../../types/field';
+interface TextFieldProps extends BaseFieldProps<string> {
+}
+declare const TextField: React.FC<TextFieldProps>;
+export default TextField;

package/dist/src/components/fields/TimeField.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { BaseFieldProps } from '../../types/field';
+interface TimeFieldProps extends BaseFieldProps<string> {
+}
+declare const TimeField: React.FC<TimeFieldProps>;
+export default TimeField;

package/{src/index.ts → dist/src/index.d.ts}

@@ -1,3 +1,2 @@
-// src/index.ts
-export { default as AutoForm } from './components/AutoForm';
-export type { AutoFormProps } from './components/AutoForm';
+export { default as AutoForm } from './components/AutoForm';
+export type { AutoFormProps } from './components/AutoForm';

package/dist/src/stories/AutoForm.stories.d.ts

@@ -0,0 +1,9 @@
+import { default as AutoForm } from '../components/AutoForm';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof AutoForm>;
+export default meta;
+type Story = StoryObj<typeof AutoForm>;
+export declare const Standard: Story;
+export declare const ReadOnly: Story;
+export declare const FormValidation: Story;
+export declare const CustomizedForm: Story;

package/dist/src/stories/Fields.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as AutoForm } from '../components/AutoForm';
+declare const meta: Meta<typeof AutoForm>;
+export default meta;
+type Story = StoryObj<typeof AutoForm>;
+export declare const TextField: Story;
+export declare const NumberField: Story;
+export declare const SelectField: Story;
+export declare const CheckField: Story;
+export declare const DateField: Story;
+export declare const ArrayField: Story;
+export declare const ObjectField: Story;

package/dist/src/theme.d.ts

@@ -0,0 +1,141 @@
+export declare const theme: {
+    focusRing?: "auto" | "always" | "never" | undefined;
+    scale?: number | undefined;
+    fontSmoothing?: boolean | undefined;
+    white?: string | undefined;
+    black?: string | undefined;
+    colors?: {
+        [x: string & {}]: import('@mantine/core').MantineColorsTuple | undefined;
+        red?: import('@mantine/core').MantineColorsTuple | undefined;
+        dark?: import('@mantine/core').MantineColorsTuple | undefined;
+        gray?: import('@mantine/core').MantineColorsTuple | undefined;
+        pink?: import('@mantine/core').MantineColorsTuple | undefined;
+        grape?: import('@mantine/core').MantineColorsTuple | undefined;
+        violet?: import('@mantine/core').MantineColorsTuple | undefined;
+        indigo?: import('@mantine/core').MantineColorsTuple | undefined;
+        blue?: import('@mantine/core').MantineColorsTuple | undefined;
+        cyan?: import('@mantine/core').MantineColorsTuple | undefined;
+        green?: import('@mantine/core').MantineColorsTuple | undefined;
+        lime?: import('@mantine/core').MantineColorsTuple | undefined;
+        yellow?: import('@mantine/core').MantineColorsTuple | undefined;
+        orange?: import('@mantine/core').MantineColorsTuple | undefined;
+        teal?: import('@mantine/core').MantineColorsTuple | undefined;
+    } | undefined;
+    primaryShade?: import('@mantine/core').MantineColorShade | {
+        light?: import('@mantine/core').MantineColorShade | undefined;
+        dark?: import('@mantine/core').MantineColorShade | undefined;
+    } | undefined;
+    primaryColor?: string | undefined;
+    variantColorResolver?: import('@mantine/core').VariantColorsResolver | undefined;
+    autoContrast?: boolean | undefined;
+    luminanceThreshold?: number | undefined;
+    fontFamily?: string | undefined;
+    fontFamilyMonospace?: string | undefined;
+    headings?: {
+        fontFamily?: string | undefined;
+        fontWeight?: string | undefined;
+        textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined;
+        sizes?: {
+            h1?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h2?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h3?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h4?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h5?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h6?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+        } | undefined;
+    } | undefined;
+    radius?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    defaultRadius?: import('@mantine/core').MantineRadius | undefined;
+    spacing?: {
+        [x: number]: string | undefined;
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    fontSizes?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    lineHeights?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    breakpoints?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    shadows?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    respectReducedMotion?: boolean | undefined;
+    cursorType?: "default" | "pointer" | undefined;
+    defaultGradient?: {
+        from?: string | undefined;
+        to?: string | undefined;
+        deg?: number | undefined;
+    } | undefined;
+    activeClassName?: string | undefined;
+    focusClassName?: string | undefined;
+    components?: {
+        [x: string]: {
+            classNames?: any;
+            styles?: any;
+            vars?: any;
+            defaultProps?: any;
+        } | undefined;
+    } | undefined;
+    other?: {
+        [x: string]: any;
+    } | undefined;
+};

package/dist/src/types/custom-render.d.ts

@@ -0,0 +1,11 @@
+import { ArrayFieldOptions, FieldSchema } from './field';
+export type FieldRenderCustomRender = (field: FieldSchema, value: any, error: React.ReactNode | Record<string, React.ReactNode>, onChange: (name: string, value: any) => void, formValues: Record<string, any>, options?: ArrayFieldOptions, readOnly?: true) => React.ReactNode;
+export interface CustomFieldRender {
+    field: FieldSchema;
+    value: any;
+    error: React.ReactNode | Record<string, React.ReactNode>;
+    onChange: (name: string, value: any) => void;
+    formValues: Record<string, any>;
+    options?: ArrayFieldOptions;
+    readOnly?: true;
+}

package/dist/src/types/field.d.ts

@@ -0,0 +1,30 @@
+export type FieldType = 'text' | 'number' | 'object' | 'array' | 'check' | 'select' | 'textarea' | 'date' | 'datetime' | 'time';
+export interface FieldSchema {
+    name: string;
+    type: FieldType;
+    label: string;
+    description?: string;
+    placeholder?: string;
+    extra?: Record<string, any>;
+    disabled?: (values: Record<string, any>) => boolean | boolean;
+    visible?: (values: Record<string, any>) => boolean | boolean;
+    initialValue?: any;
+    required?: true;
+    readOnly?: true;
+    fields?: FieldSchema[];
+    data?: {
+        label: string;
+        value: string;
+    }[];
+}
+export interface BaseFieldProps<T> {
+    name: string;
+    value: T;
+    onChange: (name: string, value: T | null) => void;
+    readOnly?: true;
+}
+export type ArrayFieldOptions = {
+    addElement: (value: Record<string, any>) => void;
+    replaceElement: (index: number, val: Record<string, any>) => void;
+    removeElement: (index: number) => void;
+};

package/dist/src/types/form.d.ts

@@ -0,0 +1,7 @@
+import { FieldSchema } from './field';
+export interface FormSchema {
+    fields: FieldSchema[];
+    onSubmit?: (values: Record<string, any>) => void;
+    formData?: Record<string, any>;
+    initialValues?: Record<string, any>;
+}

package/{test-utils/index.ts → dist/test-utils/index.d.ts}

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

package/dist/test-utils/render.d.ts

@@ -0,0 +1 @@
+export declare function render(ui: React.ReactNode): import('@testing-library/react').RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "autoforma",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "homepage": "http://sajinael98.github.io/AutoForma",
   "scripts": {
     "dev": "vite",
@@ -83,5 +83,11 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
-  }
-}
+  },
+  "files": [
+    "dist",
+    "src/components",
+    "src/types",
+    "README.md"
+  ]
+}

package/.github/workflows/npm_test.yml

@@ -1,27 +0,0 @@
-name: npm test
-
-on:
-  pull_request:
-    branches:
-      - '**'
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
-  cancel-in-progress: true
-
-jobs:
-  test_pull_request:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
-          cache-dependency-path: '**/yarn.lock'
-      - name: Install dependencies
-        run: yarn
-      - name: Run build
-        run: npm run build
-      - name: Run tests
-        run: npm test

package/.nvmrc

@@ -1 +0,0 @@
-v22.11.0

package/.prettierrc.mjs

@@ -1,35 +0,0 @@
-/** @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig} */
-const config = {
-  printWidth: 100,
-  singleQuote: true,
-  trailingComma: 'es5',
-  plugins: ['@ianvs/prettier-plugin-sort-imports'],
-  importOrder: [
-    '.*styles.css$',
-    '',
-    'dayjs',
-    '^react$',
-    '^next$',
-    '^next/.*$',
-    '<BUILTIN_MODULES>',
-    '<THIRD_PARTY_MODULES>',
-    '^@mantine/(.*)$',
-    '^@mantinex/(.*)$',
-    '^@mantine-tests/(.*)$',
-    '^@docs/(.*)$',
-    '^@/.*$',
-    '^../(?!.*.css$).*$',
-    '^./(?!.*.css$).*$',
-    '\\.css$',
-  ],
-  overrides: [
-    {
-      files: '*.mdx',
-      options: {
-        printWidth: 70,
-      },
-    },
-  ],
-};
-
-export default config;

package/.storybook/main.ts

@@ -1,17 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
-    '@chromatic-com/storybook',
-    '@storybook/experimental-addon-test',
-    '@storybook/addon-docs',
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-};
-export default config;

package/.storybook/preview.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Preview } from '@storybook/react';
-import { MantineProvider } from '@mantine/core';
-
-import '@mantine/core/styles.css';
-import '@mantine/dates/styles.css';
-
-const preview: Preview = {
-  decorators: [
-    (Story) => (
-      <MantineProvider>
-        <Story />
-      </MantineProvider>
-    ),
-  ],
-};
-
-export default preview;

package/.storybook/vitest.setup.ts

@@ -1,9 +0,0 @@
-import { beforeAll } from 'vitest';
-import { setProjectAnnotations } from '@storybook/react';
-import * as projectAnnotations from './preview';
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-const project = setProjectAnnotations([projectAnnotations]);
-
-beforeAll(project.beforeAll);

package/.stylelintignore

@@ -1 +0,0 @@
-dist

package/.stylelintrc.json

@@ -1,28 +0,0 @@
-{
-  "extends": ["stylelint-config-standard-scss"],
-  "rules": {
-    "custom-property-pattern": null,
-    "selector-class-pattern": null,
-    "scss/no-duplicate-mixins": null,
-    "declaration-empty-line-before": null,
-    "declaration-block-no-redundant-longhand-properties": null,
-    "alpha-value-notation": null,
-    "custom-property-empty-line-before": null,
-    "property-no-vendor-prefix": null,
-    "color-function-notation": null,
-    "length-zero-no-unit": null,
-    "selector-not-notation": null,
-    "no-descending-specificity": null,
-    "comment-empty-line-before": null,
-    "scss/at-mixin-pattern": null,
-    "scss/at-rule-no-unknown": null,
-    "value-keyword-case": null,
-    "media-feature-range-notation": null,
-    "selector-pseudo-class-no-unknown": [
-      true,
-      {
-        "ignorePseudoClasses": ["global"]
-      }
-    ]
-  }
-}