@saas-ui/forms 0.1.0

package/dist/layout.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SimpleGridProps } from '@chakra-ui/react';
+export declare type FormLayoutProps = SimpleGridProps;
+export declare const FormLayout: ({ children, ...props }: FormLayoutProps) => JSX.Element;
+//# sourceMappingURL=layout.d.ts.map

package/dist/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAsB,eAAe,EAAY,MAAM,kBAAkB,CAAA;AAEhF,oBAAY,eAAe,GAAG,eAAe,CAAA;AAU7C,eAAO,MAAM,UAAU,2BAA4B,eAAe,gBAsBjE,CAAA"}

package/dist/object-field.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ResponsiveValue } from '@chakra-ui/system';
+import { FieldProps } from './field';
+export interface ObjectFieldProps extends FieldProps {
+    name: string;
+    children: React.ReactNode;
+    columns?: ResponsiveValue<number>;
+    spacing?: ResponsiveValue<string | number>;
+}
+export declare const ObjectField: React.FC<ObjectFieldProps>;
+//# sourceMappingURL=object-field.d.ts.map

package/dist/object-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-field.d.ts","sourceRoot":"","sources":["../src/object-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGnD,OAAO,EAAa,UAAU,EAAE,MAAM,SAAS,CAAA;AAI/C,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IACjC,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;CAC3C;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CASlD,CAAA"}

package/dist/resolvers/yup.d.ts

@@ -0,0 +1,12 @@
+import { SchemaOf, AnySchema } from 'yup';
+import { FieldProps } from '../Field';
+export declare const resolver: import("@hookform/resolvers/yup").Resolver;
+/**
+ * A helper function to render forms automatically based on a Yup schema
+ *
+ * @param schema The Yup schema
+ * @returns {FieldProps[]}
+ */
+export declare const getFieldsFromSchema: (schema: SchemaOf<AnySchema>) => FieldProps[];
+export declare const getNestedSchema: (schema: SchemaOf<AnySchema>, path: string) => any;
+//# sourceMappingURL=yup.d.ts.map

package/dist/resolvers/yup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"yup.d.ts","sourceRoot":"","sources":["../../src/resolvers/yup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAS,MAAM,KAAK,CAAA;AAGhD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,eAAO,MAAM,QAAQ,4CAAc,CAAA;AAmCnC;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,WACtB,SAAS,SAAS,CAAC,KAC1B,UAAU,EA4BZ,CAAA;AAED,eAAO,MAAM,eAAe,WAAY,SAAS,SAAS,CAAC,QAAQ,MAAM,QAExE,CAAA"}

package/dist/submit-button.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '@saas-ui/button';
+export declare const SubmitButton: import("@chakra-ui/system").ComponentWithAs<"button", ButtonProps>;
+//# sourceMappingURL=submit-button.d.ts.map

package/dist/submit-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"submit-button.d.ts","sourceRoot":"","sources":["../src/submit-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAIrD,eAAO,MAAM,YAAY,oEAgBxB,CAAA"}

package/dist/use-array-field.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { UseFieldArrayReturn } from 'react-hook-form';
+export interface UseArrayFieldReturn extends UseFieldArrayReturn {
+    /**
+     * The array field name
+     */
+    name: string;
+    /**
+     * The default value for new items
+     */
+    defaultValue: Record<string, any>;
+    /**
+     * Min amount of items
+     */
+    min?: number;
+    /**
+     * Max amount of items
+     */
+    max?: number;
+}
+export declare const ArrayFieldProvider: React.Provider<UseArrayFieldReturn>, useArrayFieldContext: () => UseArrayFieldReturn;
+export interface UseArrayFieldRowReturn {
+    /**
+     * Name of the array field including the index, eg 'field.0'
+     */
+    name: string;
+    /**
+     * The field index
+     */
+    index: number;
+    /**
+     * Remove this array item
+     */
+    remove: () => void;
+    /**
+     * True if this is the first item
+     */
+    isFirst: boolean;
+    /**
+     * True if this is the last item
+     */
+    isLast: boolean;
+}
+export declare const ArrayFieldRowProvider: React.Provider<UseArrayFieldRowReturn>, useArrayFieldRowContext: () => UseArrayFieldRowReturn;
+export interface ArrayFieldOptions {
+    /**
+     * The field name
+     */
+    name: string;
+    /**
+     * Default value for new values in the array
+     */
+    defaultValue?: Record<string, any>;
+    /**
+     * Default key name for rows, change this if your data uses 'id'
+     * @default "id"
+     */
+    keyName?: string;
+    min?: number;
+    max?: number;
+}
+export declare const useArrayField: ({ name, defaultValue, keyName, min, max, }: ArrayFieldOptions) => {
+    name: string;
+    defaultValue: Record<string, any>;
+    min: number | undefined;
+    max: number | undefined;
+    swap: (indexA: number, indexB: number) => void;
+    move: (indexA: number, indexB: number) => void;
+    prepend: (value: Partial<unknown> | Partial<unknown>[], options?: import("react-hook-form").FieldArrayMethodProps | undefined) => void;
+    append: (value: Partial<unknown> | Partial<unknown>[], options?: import("react-hook-form").FieldArrayMethodProps | undefined) => void;
+    remove: (index?: number | number[] | undefined) => void;
+    insert: (index: number, value: Partial<unknown> | Partial<unknown>[], options?: import("react-hook-form").FieldArrayMethodProps | undefined) => void;
+    update: (index: number, value: Partial<unknown>) => void;
+    replace: (value: Partial<unknown> | Partial<unknown>[]) => void;
+    fields: Record<string, string>[];
+};
+export interface UseArrayFieldRowProps {
+    index: number;
+}
+export declare const useArrayFieldRow: ({ index }: UseArrayFieldRowProps) => {
+    index: number;
+    isFirst: boolean;
+    isLast: boolean;
+    name: string;
+    remove: () => void;
+};
+export declare const useArrayFieldRemoveButton: () => {
+    onClick: () => void;
+    isDisabled: boolean;
+};
+export declare const useArrayFieldAddButton: () => {
+    onClick: () => void;
+    isDisabled: boolean;
+};
+//# sourceMappingURL=use-array-field.d.ts.map

package/dist/use-array-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-array-field.d.ts","sourceRoot":"","sources":["../src/use-array-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAGL,mBAAmB,EACpB,MAAM,iBAAiB,CAAA;AAIxB,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACjC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,eAAO,MAAO,kBAAkB,uCAAE,oBAAoB,2BAGlD,CAAA;AAEJ,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;CAChB;AAED,eAAO,MAAO,qBAAqB,0CAAE,uBAAuB,8BAGxD,CAAA;AAEJ,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,eAAO,MAAM,aAAa,+CAMvB,iBAAiB;;;;;;;;;;;;;;CAenB,CAAA;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,gBAAgB,cAAe,qBAAqB;;;;;;CAmBhE,CAAA;AAED,eAAO,MAAM,yBAAyB;;;CAUrC,CAAA;AAED,eAAO,MAAM,sBAAsB;;;CAYlC,CAAA"}

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const mapNestedFields: (name: string, children: React.ReactNode) => {}[] | null | undefined;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,eAAO,MAAM,eAAe,SAAU,MAAM,YAAY,MAAM,SAAS,4BAUtE,CAAA"}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@saas-ui/forms",
+  "version": "0.1.0",
+  "description": "Theme and components agnostic SaasProvider",
+  "source": "src/index.ts",
+  "exports": {
+    "require": "./dist/index.js",
+    "development": "./src/index.ts",
+    "default": "./dist/index.modern.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.modern.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "clean": "rimraf --no-glob ./dist",
+    "build": "yarn clean && cross-env NODE_ENV=production microbundle --tsconfig ./tsconfig.json --jsx React.createElement --jsxFragment React.Fragment -f cjs,modern --compress",
+    "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../.eslintrc.js",
+    "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
+    "typecheck": "tsc --noEmit"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Eelco Wiersma <eelco@appulse.nl>",
+  "license": "MIT",
+  "homepage": "https://saas-ui.dev/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AppulseSoftware/saas-ui",
+    "directory": "packages/saas-ui-forms"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "chakra-ui",
+    "design-system",
+    "react-components",
+    "uikit",
+    "accessible",
+    "components",
+    "emotion",
+    "library",
+    "design-system",
+    "forms",
+    "react-hook-form"
+  ],
+  "storybook": {
+    "title": "Saas UI",
+    "url": "https://storybook.saas-ui.dev"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^2.8.3",
+    "@saas-ui/button": "workspace:*",
+    "@saas-ui/input-right-button": "workspace:*",
+    "@saas-ui/number-input": "workspace:*",
+    "@saas-ui/password-input": "workspace:*",
+    "@saas-ui/pin-input": "workspace:*",
+    "@saas-ui/radio": "workspace:*",
+    "@saas-ui/select": "workspace:*",
+    "react-hook-form": "^7.22.0"
+  },
+  "peerDependencies": {
+    "@chakra-ui/react": ">=1.7.0",
+    "@chakra-ui/system": ">=1.0.0",
+    "react": ">=16.8.6"
+  },
+  "optionalDependencies": {
+    "yup": "^0.32.11"
+  }
+}

package/src/array-field.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react'
+
+import { chakra, ResponsiveValue } from '@chakra-ui/system'
+
+import { AddIcon, MinusIcon } from '@chakra-ui/icons'
+import { IconButton, ButtonProps } from '@saas-ui/button'
+
+import { FormLayout } from './layout'
+import { BaseField, FieldProps } from './field'
+
+import { mapNestedFields } from './utils'
+
+import {
+  useArrayField,
+  useArrayFieldRow,
+  useArrayFieldContext,
+  ArrayFieldProvider,
+  ArrayFieldOptions,
+  ArrayFieldRowProvider,
+  useArrayFieldRowContext,
+  useArrayFieldRemoveButton,
+  useArrayFieldAddButton,
+} from './use-array-field'
+
+interface ArrayField {
+  id: string
+  [key: string]: unknown
+}
+
+interface ArrayFieldRowProps {
+  /**
+   * Amount of field columns
+   */
+  columns?: ResponsiveValue<number>
+  /**
+   * Spacing between fields
+   */
+  spacing?: ResponsiveValue<string | number>
+  /**
+   * The array index
+   */
+  index: number
+}
+
+export const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({
+  children,
+  columns,
+  spacing,
+  index,
+}) => {
+  return (
+    <ArrayFieldRowContainer index={index}>
+      <ArrayFieldRowFields columns={columns} spacing={spacing}>
+        {children}
+      </ArrayFieldRowFields>
+      <ArrayFieldRemoveButton />
+    </ArrayFieldRowContainer>
+  )
+}
+
+export interface ArrayFieldRowFieldsProps {
+  /**
+   * Amount of field columns
+   */
+  columns?: ResponsiveValue<number>
+  /**
+   * Spacing between fields
+   */
+  spacing?: ResponsiveValue<string | number>
+}
+
+export const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({
+  children,
+  columns,
+  spacing,
+  ...layoutProps
+}) => {
+  const { name } = useArrayFieldRowContext()
+  return (
+    <FormLayout
+      flex="1"
+      columns={columns}
+      gridGap={spacing}
+      mr="2"
+      {...layoutProps}
+    >
+      {mapNestedFields(name, children)}
+    </FormLayout>
+  )
+}
+
+export const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({
+  children,
+  index,
+}) => {
+  const context = useArrayFieldRow({ index })
+
+  const styles = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    width: '100%',
+    mb: 4,
+  }
+
+  return (
+    <ArrayFieldRowProvider value={context}>
+      <chakra.div __css={styles}>{children}</chakra.div>
+    </ArrayFieldRowProvider>
+  )
+}
+
+export const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {
+  return (
+    <IconButton
+      icon={<MinusIcon />}
+      aria-label="Remove row"
+      {...useArrayFieldRemoveButton()}
+      {...props}
+    />
+  )
+}
+
+export const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {
+  return (
+    <IconButton
+      icon={<AddIcon />}
+      aria-label="Add row"
+      float="right"
+      {...useArrayFieldAddButton()}
+      {...props}
+    />
+  )
+}
+
+export interface ArrayFieldProps
+  extends ArrayFieldOptions,
+    Omit<FieldProps, 'defaultValue'> {}
+
+export const ArrayField: React.FC<ArrayFieldProps> = (props) => {
+  const { children, ...containerProps } = props
+
+  return (
+    <ArrayFieldContainer {...containerProps}>
+      <ArrayFieldRows>
+        {(fields: ArrayField[]) => (
+          <>
+            {fields.map(({ id }, index: number) => (
+              <ArrayFieldRow key={id} index={index}>
+                {children}
+              </ArrayFieldRow>
+            ))}
+          </>
+        )}
+      </ArrayFieldRows>
+      <ArrayFieldAddButton />
+    </ArrayFieldContainer>
+  )
+}
+
+export interface ArrayFieldRowsProps {
+  children: (fields: ArrayField[]) => React.ReactElement | null
+}
+
+export const ArrayFieldRows = ({
+  children,
+}: ArrayFieldRowsProps): React.ReactElement | null => {
+  const { fields } = useArrayFieldContext()
+  return children(fields)
+}
+
+export const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({
+  name,
+  defaultValue,
+  keyName,
+  min,
+  max,
+  children,
+  ...fieldProps
+}) => {
+  const context = useArrayField({
+    name,
+    defaultValue,
+    keyName,
+    min,
+    max,
+  })
+
+  return (
+    <ArrayFieldProvider value={context}>
+      <BaseField name={name} {...fieldProps}>
+        {children}
+      </BaseField>
+    </ArrayFieldProvider>
+  )
+}

package/src/auto-form.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+
+import { forwardRef } from '@chakra-ui/react'
+
+import { Form, FormProps } from './form'
+
+import { FormLayout } from './layout'
+import { Fields } from './fields'
+import { SubmitButton } from './submit-button'
+
+interface AutoFormOptions {
+  schema: any
+  submitLabel?: false | string
+}
+
+export interface AutoFormProps
+  extends Omit<FormProps, 'schema'>,
+    AutoFormOptions {}
+
+export const AutoForm = forwardRef<AutoFormProps, 'form'>(
+  ({ schema, submitLabel, ...props }, ref) => {
+    return (
+      <Form {...props} schema={schema} ref={ref}>
+        <FormLayout>
+          {<Fields schema={schema} />}
+          {submitLabel && <SubmitButton label={submitLabel} />}
+        </FormLayout>
+      </Form>
+    )
+  }
+)
+
+AutoForm.defaultProps = {
+  submitLabel: 'Submit',
+}

package/src/display-field.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { useFormContext } from 'react-hook-form'
+
+import {
+  Text,
+  FormControl,
+  FormControlProps,
+  FormLabel,
+} from '@chakra-ui/react'
+
+import { FieldProps } from './Field'
+
+export interface DisplayFieldProps
+  extends FormControlProps,
+    Omit<FieldProps, 'type' | 'label'> {}
+
+export const DisplayField: React.FC<DisplayFieldProps> = ({
+  name,
+  label,
+  placeholder,
+  ...props
+}) => {
+  const { getValues } = useFormContext()
+
+  return (
+    <FormControl {...props}>
+      {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}
+      <Text fontSize="md">{getValues(name)}</Text>
+    </FormControl>
+  )
+}