form-input-fields 1.0.19 → 1.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -37
- package/dist/stories/App.stories.d.ts +19 -0
- package/dist/stories/App.stories.d.ts.map +1 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A collection of Material-UI form field components with Formik integration.
|
|
4
4
|
|
|
5
|
-
**Version 1.0.
|
|
5
|
+
**Version 1.0.21**
|
|
6
6
|
|
|
7
7
|
More control in the progress of development.
|
|
8
8
|
|
|
@@ -360,20 +360,20 @@ The FormDropDownField component accepts all props from `FormDropDownFieldProps`,
|
|
|
360
360
|
|
|
361
361
|
#### FormDropDownFieldProps Interface
|
|
362
362
|
|
|
363
|
-
| Prop | Type
|
|
364
|
-
| ---------------- |
|
|
365
|
-
| `items` | `Array<{ id: string
|
|
366
|
-
| `addInputSelect` | `boolean`
|
|
367
|
-
| `selectText` | `string`
|
|
368
|
-
| `required` | `boolean`
|
|
369
|
-
| `disabled` | `boolean`
|
|
370
|
-
| `className` | `string`
|
|
371
|
-
| `helperText` | `string`
|
|
372
|
-
| `error` | `boolean`
|
|
373
|
-
| `onChange` | `(value: any) => void`
|
|
374
|
-
| `onBlur` | `(event: React.FocusEvent<HTMLInputElement>) => void`
|
|
375
|
-
| `variant` | `'standard'
|
|
376
|
-
| `sx` | `SxProps<Theme>`
|
|
363
|
+
| Prop | Type | Default | Description |
|
|
364
|
+
| ---------------- | ------------------------------------------------------ | ------------ | -------------------------------------------------------------------------------------- |
|
|
365
|
+
| `items` | `Array<{ id: string \| number; description: string }>` | `[]` | Array of items to display in the dropdown |
|
|
366
|
+
| `addInputSelect` | `boolean` | `false` | Whether to show a default "Select" option as the first item |
|
|
367
|
+
| `selectText` | `string` | `'Select'` | Text to display for the default "Select" option |
|
|
368
|
+
| `required` | `boolean` | `false` | Whether the field is required |
|
|
369
|
+
| `disabled` | `boolean` | `false` | Whether the field is disabled |
|
|
370
|
+
| `className` | `string` | - | Custom class name for the root element |
|
|
371
|
+
| `helperText` | `string` | - | Helper text to display below the field |
|
|
372
|
+
| `error` | `boolean` | - | Error state of the field (overrides Formik error state) |
|
|
373
|
+
| `onChange` | `(value: any) => void` | - | Custom change handler |
|
|
374
|
+
| `onBlur` | `(event: React.FocusEvent<HTMLInputElement>) => void` | - | Custom blur handler |
|
|
375
|
+
| `variant` | `'standard' \| 'outlined' \| 'filled'` | `'standard'` | The variant of the MUI TextField. |
|
|
376
|
+
| `sx` | `SxProps<Theme>` | - | The system prop that allows defining system overrides as well as additional CSS styles |
|
|
377
377
|
|
|
378
378
|
### Examples
|
|
379
379
|
|
|
@@ -1261,33 +1261,33 @@ import { FormMaskField } from 'form-input-fields';
|
|
|
1261
1261
|
|
|
1262
1262
|
### Props
|
|
1263
1263
|
|
|
1264
|
-
| Prop | Type
|
|
1265
|
-
| ------------------ |
|
|
1266
|
-
| `mask` | `string`
|
|
1267
|
-
| `placeholderChar` | `string`
|
|
1268
|
-
| `toUpperCase` | `boolean`
|
|
1269
|
-
| `returnCleanValue` | `boolean`
|
|
1270
|
-
| `showMaskPattern` | `boolean`
|
|
1271
|
-
| `showPlaceholder` | `boolean`
|
|
1272
|
-
| `onChange` | `function`
|
|
1273
|
-
| `variant` | `'standard'
|
|
1274
|
-
| `sx` | `SxProps<Theme>`
|
|
1264
|
+
| Prop | Type | Default | Description |
|
|
1265
|
+
| ------------------ | -------------------------------------- | ------------ | -------------------------------------------------------------------------------------- |
|
|
1266
|
+
| `mask` | `string` | - | Mask pattern using the characters above |
|
|
1267
|
+
| `placeholderChar` | `string` | `'_'` | Character shown in placeholder for mask positions |
|
|
1268
|
+
| `toUpperCase` | `boolean` | `false` | Convert input to uppercase automatically |
|
|
1269
|
+
| `returnCleanValue` | `boolean` | `false` | Return unmasked value to Formik (true) or masked value (false) |
|
|
1270
|
+
| `showMaskPattern` | `boolean` | `false` | Show the mask pattern as helper text below the input field |
|
|
1271
|
+
| `showPlaceholder` | `boolean` | `false` | Show placeholder text with mask pattern in the input field |
|
|
1272
|
+
| `onChange` | `function` | - | Custom change handler with masked, clean, and raw values |
|
|
1273
|
+
| `variant` | `'standard' \| 'outlined' \| 'filled'` | `'standard'` | The variant of the MUI TextField. |
|
|
1274
|
+
| `sx` | `SxProps<Theme>` | - | The system prop that allows defining system overrides as well as additional CSS styles |
|
|
1275
1275
|
|
|
1276
1276
|
Plus all standard Material-UI TextField props and Formik FieldProps.
|
|
1277
1277
|
|
|
1278
1278
|
#### FormMaskFieldProps Interface
|
|
1279
1279
|
|
|
1280
|
-
| Prop | Type
|
|
1281
|
-
| ------------------ |
|
|
1282
|
-
| `mask` | `string`
|
|
1283
|
-
| `placeholderChar` | `string`
|
|
1284
|
-
| `toUpperCase` | `boolean`
|
|
1285
|
-
| `returnCleanValue` | `boolean`
|
|
1286
|
-
| `showMaskPattern` | `boolean`
|
|
1287
|
-
| `showPlaceholder` | `boolean`
|
|
1288
|
-
| `onChange` | `function`
|
|
1289
|
-
| `variant` | `'standard'
|
|
1290
|
-
| `sx` | `SxProps<Theme>`
|
|
1280
|
+
| Prop | Type | Default | Description |
|
|
1281
|
+
| ------------------ | -------------------------------------- | ------------ | -------------------------------------------------------------------------------------- |
|
|
1282
|
+
| `mask` | `string` | - | Mask pattern using the characters above |
|
|
1283
|
+
| `placeholderChar` | `string` | `'_'` | Character shown in placeholder for mask positions |
|
|
1284
|
+
| `toUpperCase` | `boolean` | `false` | Convert input to uppercase automatically |
|
|
1285
|
+
| `returnCleanValue` | `boolean` | `false` | Return unmasked value to Formik (true) or masked value (false) |
|
|
1286
|
+
| `showMaskPattern` | `boolean` | `false` | Show the mask pattern as helper text below the input field |
|
|
1287
|
+
| `showPlaceholder` | `boolean` | `false` | Show placeholder text with mask pattern in the input field |
|
|
1288
|
+
| `onChange` | `function` | - | Custom change handler with masked, clean, and raw values |
|
|
1289
|
+
| `variant` | `'standard' \| 'outlined' \| 'filled'` | `'standard'` | The variant of the MUI TextField. |
|
|
1290
|
+
| `sx` | `SxProps<Theme>` | - | The system prop that allows defining system overrides as well as additional CSS styles |
|
|
1291
1291
|
|
|
1292
1292
|
### Examples
|
|
1293
1293
|
|
|
@@ -1829,6 +1829,30 @@ npm run test:debug
|
|
|
1829
1829
|
|
|
1830
1830
|
## History
|
|
1831
1831
|
|
|
1832
|
+
### 2025-11-11 - Storybook Documentation Site Created
|
|
1833
|
+
|
|
1834
|
+
#### Added interactive Storybook documentation at https://formik-input-fields.netlify.app
|
|
1835
|
+
|
|
1836
|
+
Created comprehensive Storybook documentation for all form field components:
|
|
1837
|
+
|
|
1838
|
+
- **FormTextField**: Stories for basic usage, variants, error states, and custom styling
|
|
1839
|
+
- **FormCheckboxField**: Interactive checkbox examples with state management
|
|
1840
|
+
- **FormDateField**: Date picker stories with various configurations and constraints
|
|
1841
|
+
- **FormDateTextField**: Text-based date input with format variations
|
|
1842
|
+
- **FormDropDownField**: Dropdown examples with default selections and validation
|
|
1843
|
+
- **FormMaskField**: Extensive masking examples (phone, date, credit card, license plate, hex colors)
|
|
1844
|
+
- **FormSwitch**: Switch component stories with different colors, sizes, and placements
|
|
1845
|
+
- **Form Fields Demo**: Complete interactive demo showcasing all components in a comprehensive form
|
|
1846
|
+
|
|
1847
|
+
The Storybook site provides:
|
|
1848
|
+
- Interactive component examples with live controls
|
|
1849
|
+
- Comprehensive documentation for all props and features
|
|
1850
|
+
- Real-time code generation showing implementation details
|
|
1851
|
+
- Responsive design testing across different screen sizes
|
|
1852
|
+
- Accessibility testing and validation
|
|
1853
|
+
|
|
1854
|
+
---
|
|
1855
|
+
|
|
1832
1856
|
### 2025-11-10 - Enhanced Styling Support and Standardized Form Controls
|
|
1833
1857
|
|
|
1834
1858
|
#### Added `sx` prop support to all form controls
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { default as App } from '../App';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof App;
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: string;
|
|
8
|
+
docs: {
|
|
9
|
+
source: {
|
|
10
|
+
code: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
tags: string[];
|
|
15
|
+
};
|
|
16
|
+
export default meta;
|
|
17
|
+
type Story = StoryObj<typeof meta>;
|
|
18
|
+
export declare const Demo: Story;
|
|
19
|
+
//# sourceMappingURL=App.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"App.stories.d.ts","sourceRoot":"","sources":["../../src/stories/App.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,GAAG,MAAM,QAAQ,CAAC;AAEzB,QAAA,MAAM,IAAI;;;;;;;;;;;;CAimBkB,CAAC;AAE7B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAGlB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "form-input-fields",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.21",
|
|
4
4
|
"description": "A customizable form field components built with TypeScript",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@mui/material": "^7.3.5",
|
|
54
54
|
"@mui/styles": "^6.4.8",
|
|
55
55
|
"@mui/x-date-pickers": "^8.17.0",
|
|
56
|
-
"@storybook/addon-docs": "10.0.6",
|
|
56
|
+
"@storybook/addon-docs": "^10.0.6",
|
|
57
57
|
"@storybook/addon-onboarding": "10.0.6",
|
|
58
58
|
"@storybook/react-vite": "10.0.6",
|
|
59
59
|
"@testing-library/dom": "^10.4.1",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@testing-library/user-event": "^14.6.1",
|
|
63
63
|
"@types/jest": "^30.0.0",
|
|
64
64
|
"@types/node": "^24.10.0",
|
|
65
|
-
"@types/react": "^19.2.
|
|
65
|
+
"@types/react": "^19.2.3",
|
|
66
66
|
"@types/react-dom": "^19.2.2",
|
|
67
67
|
"dayjs": "^1.11.19",
|
|
68
68
|
"eslint-plugin-storybook": "10.0.6",
|