form-input-fields 1.0.17 → 1.0.18

package/README.md

@@ -2,10 +2,14 @@
 
 A collection of Material-UI form field components with Formik integration.
 
-**Version 1.0.16**
+**Version 1.0.18**
 
 More control in the progress of development.
 
+## Storybook
+
+View interactive examples and documentation at: [https://formik-input-fields.netlify.app/](https://formik-input-fields.netlify.app/)
+
 ## Installation
 
 ### Prerequisites
@@ -553,18 +557,18 @@ The FormDateField component accepts all props from `FormDateFieldProps`, `FieldP
 
 #### FormDateFieldProps Interface
 
-| Prop              | Type       | Default                  | Description                                   |
-| ----------------- | ---------- | ------------------------ | --------------------------------------------- |
-| `format`          | `string`   | `FORM_DATE_FORMAT.short` | Date format string using dayjs format tokens  |
-| `minDate`         | `Dayjs`    | -                        | Minimum selectable date                       |
-| `maxDate`         | `Dayjs`    | -                        | Maximum selectable date                       |
-| `disablePast`     | `boolean`  | `false`                  | Disable past dates                            |
-| `disableFuture`   | `boolean`  | `false`                  | Disable future dates                          |
-| `showTodayButton` | `boolean`  | `false`                  | Show today button in the picker               |
-| `readOnly`        | `boolean`  | `false`                  | Make the field read-only                      |
-| `showDateFormat`  | `boolean`  | `false`                  | Show the date format as helper text           |
-| `onChange`        | `function` | -                        | Custom change handler with additional context |
-| `sx`              | `SxProps<Theme>` | - | The system prop that allows defining system overrides as well as additional CSS styles |
+| Prop              | Type             | Default                  | Description                                                                            |
+| ----------------- | ---------------- | ------------------------ | -------------------------------------------------------------------------------------- |
+| `format`          | `string`         | `FORM_DATE_FORMAT.short` | Date format string using dayjs format tokens                                           |
+| `minDate`         | `Dayjs`          | -                        | Minimum selectable date                                                                |
+| `maxDate`         | `Dayjs`          | -                        | Maximum selectable date                                                                |
+| `disablePast`     | `boolean`        | `false`                  | Disable past dates                                                                     |
+| `disableFuture`   | `boolean`        | `false`                  | Disable future dates                                                                   |
+| `showTodayButton` | `boolean`        | `false`                  | Show today button in the picker                                                        |
+| `readOnly`        | `boolean`        | `false`                  | Make the field read-only                                                               |
+| `showDateFormat`  | `boolean`        | `false`                  | Show the date format as helper text                                                    |
+| `onChange`        | `function`       | -                        | Custom change handler with additional context                                          |
+| `sx`              | `SxProps<Theme>` | -                        | The system prop that allows defining system overrides as well as additional CSS styles |
 
 #### Common Props (from FieldProps & TextFieldProps)
 
@@ -890,7 +894,7 @@ The FormSwitch component accepts all props from `FormSwitchProps`, `FieldProps`
 | `helperText`     | `string`         | -         | Helper text to display below the switch                                                 |
 | `error`          | `boolean`        | `false`   | Error state of the switch                                                               |
 | `className`      | `string`         | -         | Custom class name for the root element                                                  |
-| `sx`             | `SxProps<Theme>` | -         | The system prop that allows defining system overrides as well as additional CSS styles |
+| `sx`             | `SxProps<Theme>` | -         | The system prop that allows defining system overrides as well as additional CSS styles  |
 
 #### Common Props (from FieldProps & SwitchProps)
 
@@ -1084,16 +1088,16 @@ The FormDateTextField component accepts all props from `FormDateTextFieldProps`,
 
 #### FormDateTextFieldProps Interface
 
-| Prop         | Type                                                  | Default                 | Description                            |
-| ------------ | ----------------------------------------------------- | ----------------------- | -------------------------------------- |
-| `format`     | `string`                                              | `FORM_DATE_FORMAT.long` | Date format string using day.js tokens |
-| `required`   | `boolean`                                             | `false`                 | Whether the field is required          |
-| `disabled`   | `boolean`                                             | `false`                 | Whether the field is disabled          |
-| `className`  | `string`                                              | -                       | Custom class name for the root element |
-| `helperText` | `string`                                              | -                       | Helper text to display below the field |
-| `error`      | `boolean`                                             | -                       | Error state of the field               |
-| `onChange`   | `(value: Dayjs \| null) => void`                      | -                       | Custom change handler                  |
-| `onBlur`     | `(event: React.FocusEvent<HTMLInputElement>) => void` | -                       | Custom blur handler                    |
+| Prop         | Type                                                  | Default                 | Description                                                                            |
+| ------------ | ----------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------- |
+| `format`     | `string`                                              | `FORM_DATE_FORMAT.long` | Date format string using day.js tokens                                                 |
+| `required`   | `boolean`                                             | `false`                 | Whether the field is required                                                          |
+| `disabled`   | `boolean`                                             | `false`                 | Whether the field is disabled                                                          |
+| `className`  | `string`                                              | -                       | Custom class name for the root element                                                 |
+| `helperText` | `string`                                              | -                       | Helper text to display below the field                                                 |
+| `error`      | `boolean`                                             | -                       | Error state of the field                                                               |
+| `onChange`   | `(value: Dayjs \| null) => void`                      | -                       | Custom change handler                                                                  |
+| `onBlur`     | `(event: React.FocusEvent<HTMLInputElement>) => void` | -                       | Custom blur handler                                                                    |
 | `sx`         | `SxProps<Theme>`                                      | -                       | The system prop that allows defining system overrides as well as additional CSS styles |
 
 #### Common Props (from FieldProps & TextFieldProps)
@@ -1257,32 +1261,32 @@ import { FormMaskField } from 'form-input-fields';
 
 ### Props
 
-| Prop               | Type        | Default    | Description                                                    |
-| ------------------ | ----------- | ---------- | -------------------------------------------------------------- |
-| `mask`             | `string`    | -          | Mask pattern using the characters above                        |
-| `placeholderChar`  | `string`    | `'_'`      | Character shown in placeholder for mask positions              |
-| `toUpperCase`      | `boolean`   | `false`    | Convert input to uppercase automatically                       |
-| `returnCleanValue` | `boolean`   | `false`    | Return unmasked value to Formik (true) or masked value (false) |
-| `showMaskPattern`  | `boolean`   | `false`    | Show the mask pattern as helper text below the input field     |
-| `showPlaceholder`  | `boolean`   | `false`    | Show placeholder text with mask pattern in the input field     |
-| `onChange`         | `function`  | -          | Custom change handler with masked, clean, and raw values       |
-| `variant`          | `'standard' | 'outlined' | 'filled'` | 'standard' | The variant of the MUI TextField. |
-| `sx`               | `SxProps<Theme>` | - | The system prop that allows defining system overrides as well as additional CSS styles |
+| Prop               | Type             | Default    | Description                                                                            |
+| ------------------ | ---------------- | ---------- | -------------------------------------------------------------------------------------- | ---------- | --------------------------------- |
+| `mask`             | `string`         | -          | Mask pattern using the characters above                                                |
+| `placeholderChar`  | `string`         | `'_'`      | Character shown in placeholder for mask positions                                      |
+| `toUpperCase`      | `boolean`        | `false`    | Convert input to uppercase automatically                                               |
+| `returnCleanValue` | `boolean`        | `false`    | Return unmasked value to Formik (true) or masked value (false)                         |
+| `showMaskPattern`  | `boolean`        | `false`    | Show the mask pattern as helper text below the input field                             |
+| `showPlaceholder`  | `boolean`        | `false`    | Show placeholder text with mask pattern in the input field                             |
+| `onChange`         | `function`       | -          | Custom change handler with masked, clean, and raw values                               |
+| `variant`          | `'standard'      | 'outlined' | 'filled'`                                                                              | 'standard' | The variant of the MUI TextField. |
+| `sx`               | `SxProps<Theme>` | -          | The system prop that allows defining system overrides as well as additional CSS styles |
 
 Plus all standard Material-UI TextField props and Formik FieldProps.
 
 #### FormMaskFieldProps Interface
 
-| Prop               | Type             | Default    | Description                                                    |
-| ------------------ | ---------------- | ---------- | -------------------------------------------------------------- |
-| `mask`             | `string`         | -          | Mask pattern using the characters above                        |
-| `placeholderChar`  | `string`         | `'_'`      | Character shown in placeholder for mask positions              |
-| `toUpperCase`      | `boolean`        | `false`    | Convert input to uppercase automatically                       |
-| `returnCleanValue` | `boolean`        | `false`    | Return unmasked value to Formik (true) or masked value (false) |
-| `showMaskPattern`  | `boolean`        | `false`    | Show the mask pattern as helper text below the input field     |
-| `showPlaceholder`  | `boolean`        | `false`    | Show placeholder text with mask pattern in the input field     |
-| `onChange`         | `function`       | -          | Custom change handler with masked, clean, and raw values       |
-| `variant`          | `'standard'      | 'outlined' | 'filled'` | 'standard' | The variant of the MUI TextField. |
+| Prop               | Type             | Default    | Description                                                                            |
+| ------------------ | ---------------- | ---------- | -------------------------------------------------------------------------------------- | ---------- | --------------------------------- |
+| `mask`             | `string`         | -          | Mask pattern using the characters above                                                |
+| `placeholderChar`  | `string`         | `'_'`      | Character shown in placeholder for mask positions                                      |
+| `toUpperCase`      | `boolean`        | `false`    | Convert input to uppercase automatically                                               |
+| `returnCleanValue` | `boolean`        | `false`    | Return unmasked value to Formik (true) or masked value (false)                         |
+| `showMaskPattern`  | `boolean`        | `false`    | Show the mask pattern as helper text below the input field                             |
+| `showPlaceholder`  | `boolean`        | `false`    | Show placeholder text with mask pattern in the input field                             |
+| `onChange`         | `function`       | -          | Custom change handler with masked, clean, and raw values                               |
+| `variant`          | `'standard'      | 'outlined' | 'filled'`                                                                              | 'standard' | The variant of the MUI TextField. |
 | `sx`               | `SxProps<Theme>` | -          | The system prop that allows defining system overrides as well as additional CSS styles |
 
 ### Examples

package/dist/stories/FormCheckboxField.stories.d.ts

@@ -0,0 +1,22 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').MemoExoticComponent<({ id, label, checked, onChange, sx, }: import('..').FormCheckboxFieldProps) => import("react/jsx-runtime").JSX.Element>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        checked: {
+            control: "boolean";
+        };
+        label: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const WithFormik: Story;
+//# sourceMappingURL=FormCheckboxField.stories.d.ts.map

package/dist/stories/FormCheckboxField.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCheckboxField.stories.d.ts","sourceRoot":"","sources":["../../src/stories/FormCheckboxField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAWgC,CAAC;AAE3C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KA2BnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA8DxB,CAAC"}

package/dist/stories/FormDateField.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<any>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const WithValidation: Story;
+export declare const AppointmentScheduler: Story;
+export declare const ReadOnly: Story;
+export declare const CustomChangeHandler: Story;
+//# sourceMappingURL=FormDateField.stories.d.ts.map

package/dist/stories/FormDateField.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDateField.stories.d.ts","sourceRoot":"","sources":["../../src/stories/FormDateField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAK5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,GAAG,CA0BnB,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KAanB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAwB5B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KA0BlC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAuCjC,CAAC"}

package/dist/stories/FormDateTextField.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<any>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const WithFormik: Story;
+export declare const CustomFormat: Story;
+//# sourceMappingURL=FormDateTextField.stories.d.ts.map

package/dist/stories/FormDateTextField.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDateTextField.stories.d.ts","sourceRoot":"","sources":["../../src/stories/FormDateTextField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,GAAG,CAyBnB,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KAsBnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAmDxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsB1B,CAAC"}

package/dist/stories/FormDropDownField.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<any>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const WithDefaultSelection: Story;
+export declare const RequiredWithValidation: Story;
+//# sourceMappingURL=FormDropDownField.stories.d.ts.map

package/dist/stories/FormDropDownField.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDropDownField.stories.d.ts","sourceRoot":"","sources":["../../src/stories/FormDropDownField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,GAAG,CA2BnB,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KA8BnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KA4BlC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAiEpC,CAAC"}

package/dist/stories/FormMaskField.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<any>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const PhoneNumber: Story;
+export declare const DateInput: Story;
+export declare const ProductCode: Story;
+export declare const CreditCard: Story;
+export declare const CustomChangeHandler: Story;
+export declare const ShowMaskPattern: Story;
+//# sourceMappingURL=FormMaskField.stories.d.ts.map

package/dist/stories/FormMaskField.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormMaskField.stories.d.ts","sourceRoot":"","sources":["../../src/stories/FormMaskField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,GAAG,CA2BnB,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,WAAW,EAAE,KAwBzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAwBvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAwBxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAkCjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAuB7B,CAAC"}

package/dist/stories/FormSwitch.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<any>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const WithFormik: Story;
+//# sourceMappingURL=FormSwitch.stories.d.ts.map

package/dist/stories/FormSwitch.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSwitch.stories.d.ts","sourceRoot":"","sources":["../../src/stories/FormSwitch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,GAAG,CAiCnB,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KAoBnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAqDxB,CAAC"}

package/dist/stories/FormTextField.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<any>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const WithFormikValidation: Story;
+export declare const CustomValidation: Story;
+//# sourceMappingURL=FormTextField.stories.d.ts.map

package/dist/stories/FormTextField.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormTextField.stories.d.ts","sourceRoot":"","sources":["../../src/stories/FormTextField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,GAAG,CAyBnB,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KAwBnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KA+DlC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA+B9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-input-fields",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "A customizable form field components built with TypeScript",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -17,7 +17,9 @@
     "test": "jest --detectOpenHandles --forceExit --logHeapUsage",
     "test:watch": "jest --watch --detectOpenHandles --forceExit",
     "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand --verbose",
-    "test:coverage": "jest --coverage --detectOpenHandles --forceExit"
+    "test:coverage": "jest --coverage --detectOpenHandles --forceExit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "keywords": [
     "react",
@@ -48,9 +50,12 @@
     "@babel/preset-typescript": "^7.28.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/styles": "^6.4.8",
     "@mui/material": "^7.3.5",
+    "@mui/styles": "^6.4.8",
     "@mui/x-date-pickers": "^8.17.0",
+    "@storybook/addon-docs": "10.0.6",
+    "@storybook/addon-onboarding": "10.0.6",
+    "@storybook/react-vite": "10.0.6",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -60,12 +65,14 @@
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "dayjs": "^1.11.19",
+    "eslint-plugin-storybook": "10.0.6",
     "formik": "^2.4.9",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jsdom": "^27.1.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "storybook": "10.0.6",
     "ts-jest": "^29.4.5",
     "typescript": "^5.9.3",
     "vite": "^7.2.2",
@@ -74,8 +81,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/styles": "^6.4.8",
     "@mui/material": "^7.2.0",
+    "@mui/styles": "^6.4.8",
     "@mui/x-date-pickers": "^8.7.0",
     "dayjs": "^1.11.13",
     "formik": "^2.4.6",