likhith/Text field UI component

package.json

@@ -51,6 +51,7 @@
         "@types/node": "^17.0.18",
         "@types/react": "^17.0.39",
         "@types/webpack": "^5.28.0",
+        "@types/zxcvbn": "^4.4.1",
         "babel-loader": "^8.2.3",
         "file-loader": "^6.2.0",
         "fork-ts-checker-webpack-plugin": "^7.2.1",
@@ -79,6 +80,7 @@
         "@storybook/addon-a11y": "^6.5.9",
         "classnames": "^2.3.1",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "zxcvbn": "^4.4.2"
     }
 }

src/components/core/text-field/stories/text-field.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, Story } from '@storybook/react';
+import LocationPin from '@assets/svg/location-pin.svg';
+import type { TextFieldProps } from '../text-field';
+import TextField from '../text-field';
+
+export default {
+    title: 'TextField',
+    argTypes: {
+        label: {
+            description: 'Displays a label for the input field',
+        },
+        inline_prefix_element: {
+            description: 'Displays the provided inline-prefix element',
+        },
+        inline_suffix_element: {
+            description: 'Displays the provided inline-suffix element',
+        },
+        hint: {
+            description: 'Displays a hint text',
+        },
+        error: {
+            description: 'Displays an error text',
+        },
+        success: {
+            description: 'Displays a success text',
+        },
+        max_length: {
+            description: 'Max length that the field can accept',
+        },
+        type: {
+            defaultValue: 'text',
+            control: {
+                type: 'select',
+                options: ['email', 'number', 'password', 'tel', 'text', 'textarea'],
+            },
+            description: 'Type of input field',
+        },
+        disabled: {
+            description:
+                'Extends the style of HTML [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) attribute.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
+        },
+        readOnly: {
+            description: 'Makes the field still focusable and functional but value cannot be edited',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
+        },
+        dark: {
+            description: 'Displays content in dark theme',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
+        },
+    },
+} as Meta<TextFieldProps>;
+
+const Template: Story<TextFieldProps> = (args) => <TextField {...args}></TextField>;
+
+export const SimpleTextField = Template.bind({});
+SimpleTextField.args = {
+    label: 'Text field',
+    type: 'text',
+    success: '',
+    error: '',
+    hint: '',
+    disabled: false,
+    dark: false,
+    readOnly: false,
+};
+
+export const TextFieldWithSuffixText = Template.bind({});
+TextFieldWithSuffixText.args = {
+    label: 'Currency',
+    type: 'number',
+    success: '',
+    error: '',
+    hint: '',
+    inline_suffix_element: <div>USD</div>,
+    disabled: false,
+    dark: false,
+    readOnly: false,
+};
+
+export const TextFieldWithPrefixText = Template.bind({});
+TextFieldWithPrefixText.args = {
+    label: 'Phone no.',
+    type: 'tel',
+    success: '',
+    error: '',
+    hint: '',
+    inline_prefix_element: <div>+971</div>,
+    disabled: false,
+    readOnly: false,
+    dark: false,
+};
+
+export const TextFieldWithSuffixIcon = Template.bind({});
+TextFieldWithSuffixIcon.args = {
+    label: 'Location',
+    type: 'text',
+    success: '',
+    error: '',
+    hint: '',
+    inline_suffix_element: <img src={LocationPin} alt="location-icon" />,
+    disabled: false,
+    readOnly: false,
+    dark: false,
+};
+
+export const TextFieldWithCharacterLimit = Template.bind({});
+TextFieldWithCharacterLimit.args = {
+    label: 'Description',
+    type: 'text',
+    success: '',
+    error: '',
+    hint: '',
+    max_length: 10,
+    disabled: false,
+    readOnly: false,
+    dark: false,
+};
+
+export const PasswordField = Template.bind({});
+PasswordField.args = {
+    label: 'Password',
+    type: 'password',
+    success: '',
+    error: '',
+    hint: '',
+    disabled: false,
+    readOnly: false,
+    dark: false,
+};
+
+export const TextAreaField = Template.bind({});
+TextAreaField.args = {
+    label: 'Instruction',
+    type: 'textarea',
+    hint: '',
+    max_length: 250,
+    disabled: false,
+    readOnly: false,
+    dark: false,
+};