Merge pull request #2 from qoretechnologies/feature/forms-and-fields

Forms and fields

Author: Foxhoundn

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqraft",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/form/fields/Field.tsx

@@ -0,0 +1,37 @@
+import { TFormFieldType, TFormFieldValueType } from '../../../types/Form';
+import { FormStringField } from './string/String';
+
+export interface IFormFieldProps<T extends TFormFieldType = TFormFieldType> {
+  type?: T;
+  value: TFormFieldValueType<T>;
+  onChange: (value: TFormFieldValueType<T>, event?: unknown) => void;
+
+  validateSelf?: boolean;
+  onValidateChange?: (isValid: boolean) => void;
+}
+
+export const FormField = <T extends TFormFieldType>({
+  type,
+  onChange,
+  ...rest
+}: IFormFieldProps<T>) => {
+  const handleChange = (value: TFormFieldValueType<T>, event?: unknown) => {
+    onChange(value, event);
+  };
+
+  const renderField = (type: T) => {
+    switch (type) {
+      case 'string':
+        return (
+          <FormStringField
+            {...rest}
+            onChange={(value: string) => handleChange(value as TFormFieldValueType<T>)}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return renderField(type);
+};

src/components/form/string/String.stories.tsx src/components/form/fields/string/String.stories.tsx

@@ -1,5 +1,5 @@
 import { StoryObj } from '@storybook/react';
-import { StoryMeta } from '../../../types';
+import { StoryMeta } from '../../../../types';
 import { FormStringField } from './String';
 
 const meta = {

src/components/form/string/String.tsx src/components/form/fields/string/String.tsx

@@ -3,15 +3,16 @@ import { IReqoreControlGroupProps } from '@qoretechnologies/reqore/dist/componen
 import { IReqoreInputProps } from '@qoretechnologies/reqore/dist/components/Input';
 import { IReqoreTagProps } from '@qoretechnologies/reqore/dist/components/Tag';
 import { ChangeEvent, useCallback } from 'react';
+import { TFormFieldValueType } from '../../../../types/Form';
 
 export interface IStringFormFieldProps extends Omit<IReqoreInputProps, 'onChange' | 'value'> {
   sensitive?: boolean;
-  value?: string;
+  value?: TFormFieldValueType<'string'>;
   label?: IReqoreTagProps['label'];
   labelPosition?: 'top' | 'left' | 'right' | 'bottom';
   labelProps?: IReqoreTagProps;
   wrapperProps?: IReqoreControlGroupProps;
-  onChange?: (value?: string, event?: ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (value?: TFormFieldValueType<'string'>, event?: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const FormStringField = ({

src/hooks/useValidation.ts

@@ -0,0 +1,9 @@
+import { TFormFieldType } from '../types/Form';
+
+// @ts-expect-error "need to implement this"
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useValidation = (value: any, type?: TFormFieldType) => {
+  // Build validation...
+
+  return true;
+};

src/index.tsx

@@ -1 +1 @@
-export { FormStringField, IStringFormFieldProps } from './components/form/string/String';
+export { FormStringField, IStringFormFieldProps } from './components/form/fields/string/String';

src/types/Form.ts

@@ -0,0 +1,57 @@
+export type TFormFieldType =
+  | 'string'
+  | 'number'
+  | 'boolean'
+  | 'date'
+  | 'time'
+  | 'datetime'
+  | 'select'
+  | 'multiSelect'
+  | 'radio'
+  | 'checkbox'
+  | 'file'
+  | 'image'
+  | 'color'
+  | 'password'
+  | 'email'
+  | 'phone'
+  | 'url'
+  | 'markdown';
+
+export type TFormFieldValueType<T> = T extends 'string'
+  ? string
+  : T extends 'number'
+  ? number
+  : T extends 'boolean'
+  ? boolean
+  : T extends 'date'
+  ? Date | string
+  : T extends 'time'
+  ? Date | string
+  : T extends 'datetime'
+  ? Date | string
+  : T extends 'select'
+  ? string
+  : T extends 'multiSelect'
+  ? string[]
+  : T extends 'radio'
+  ? string
+  : T extends 'checkbox'
+  ? boolean
+  : T extends 'file'
+  ? File
+  : T extends 'image'
+  ? string
+  : T extends 'color'
+  ? string
+  : T extends 'password'
+  ? string
+  : T extends 'email'
+  ? string
+  : T extends 'phone'
+  ? string
+  : T extends 'url'
+  ? string
+  : T extends 'markdown'
+  ? string
+  : any;