input field

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## 1.2.0 (2024-06-11)
+- Implemented the input field component
+
 ## 1.1.0 (2023-03-30)
 
 ### Added
@@ -9,4 +12,4 @@ All notable changes to this project will be documented in this file.
 ## 1.0.0 (2023-03-30)
 
 ### Added
-- Implemented the sidebar component.
+- Implemented the sidebar component.

apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import { Meta, StoryObj } from '@storybook/react';
+import { InputField, type InputProps } from '@csesoc/ui-components/src/inputs';
+
+const meta: Meta<typeof InputField> = {
+    component: InputField,
+    title: 'Example/InputField',
+    argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof InputField>;
+
+// DEFAULT INPUT FIELDS
+export const Light: Story = (args: InputProps) => <InputField {...args} />;
+Light.args = {
+    theme: 'light',
+    style: 'text',
+    state: 'default'
+}
+
+export const Disabled: Story = (args: InputProps) => <InputField {...args} />;
+Disabled.args = {
+    theme: 'light',
+    style: 'text',
+    state: 'disabled'
+}
+
+export const Error: Story = (args: InputProps) => <InputField {...args} />;
+Error.args = {
+    theme: 'light',
+    style: 'text',
+    state: 'error'
+}
+
+export const Dark: Story = (args: InputProps) => <InputField {...args} />;
+Dark.args = {
+    theme: 'dark',
+    style: 'text',
+    state: 'default'
+}
+
+export const DisabledDark: Story = (args: InputProps) => <InputField {...args} />;
+DisabledDark.args = {
+    theme: 'dark',
+    style: 'text',
+    state: 'disabled'
+}
+
+export const ErrorDark: Story = (args: InputProps) => <InputField {...args} />;
+ErrorDark.args = {
+    theme: 'dark',
+    style: 'text',
+    state: 'error'
+}
+
+// PASSWORD INPUT FIELDS
+export const PasswordLight: Story = (args: InputProps) => <InputField {...args} />;
+PasswordLight.args = {
+    theme: 'light',
+    style: 'password',
+    state: 'default'
+}
+
+export const PasswordDisabled: Story = (args: InputProps) => <InputField {...args} />;
+PasswordDisabled.args = {
+    theme: 'light',
+    style: 'password',
+    state: 'disabled'
+}
+
+export const PasswordError: Story = (args: InputProps) => <InputField {...args} />;
+PasswordError.args = {
+    theme: 'light',
+    style: 'password',
+    state: 'error'
+}
+
+export const PasswordDark: Story = (args: InputProps) => <InputField {...args} />;
+PasswordDark.args = {
+    theme: 'dark',
+    style: 'password',
+    state: 'default'
+}
+
+export const PasswordDisabledDark: Story = (args: InputProps) => <InputField {...args} />;
+PasswordDisabledDark.args = {
+    theme: 'dark',
+    style: 'password',
+    state: 'disabled'
+}
+
+export const PasswordErrorDark: Story = (args: InputProps) => <InputField {...args} />;
+PasswordErrorDark.args = {
+    theme: 'dark',
+    style: 'password',
+    state: 'error'
+}
+
+// ICON INPUT FIELDS
+export const IconLight: Story = (args: InputProps) => <InputField {...args} />;
+IconLight.args = {
+    theme: 'light',
+    style: 'icon',
+    state: 'default'
+}
+
+export const IconDisabled: Story = (args: InputProps) => <InputField {...args} />;
+IconDisabled.args = {
+    theme: 'light',
+    style: 'icon',
+    state: 'disabled'
+}
+
+export const IconError: Story = (args: InputProps) => <InputField {...args} />;
+IconError.args = {
+    theme: 'light',
+    style: 'icon',
+    state: 'error'
+}
+
+export const IconDark: Story = (args: InputProps) => <InputField {...args} />;
+IconDark.args = {
+    theme: 'dark',
+    style: 'icon',
+    state: 'default'
+}
+
+export const IconDisabledDark: Story = (args: InputProps) => <InputField {...args} />;
+IconDisabledDark.args = {
+    theme: 'dark',
+    style: 'icon',
+    state: 'disabled'
+}
+
+export const IconErrorDark: Story = (args: InputProps) => <InputField {...args} />;
+IconErrorDark.args = {
+    theme: 'dark',
+    style: 'icon',
+    state: 'error'
+}

apps/storybook/src/stories/examples/inputFields/LargeInputField.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Meta, StoryObj } from '@storybook/react';
+import { LargeInputField, type InputProps } from '@csesoc/ui-components/src/inputs';
+
+const meta: Meta<typeof LargeInputField> = {
+    component: LargeInputField,
+    title: 'Example/LargeInputField',
+    argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof LargeInputField>;
+
+export const Light: Story = (args: InputProps) => <LargeInputField {...args} />;
+Light.args = {
+    theme: 'light',
+    state: 'default'
+};
+
+export const Disabled: Story = (args: InputProps) => <LargeInputField {...args} />;
+Disabled.args = {
+    theme: 'light',
+    state: 'disabled'
+};
+
+export const Error: Story = (args: InputProps) => <LargeInputField {...args} />;
+Error.args = {
+    theme: 'light',
+    state: 'error'
+};
+
+export const Dark: Story = (args: InputProps) => <LargeInputField {...args} />;
+Dark.args = {
+    theme: 'dark',
+    state: 'default'
+};
+
+export const DisabledDark: Story = (args: InputProps) => <LargeInputField {...args} />;
+DisabledDark.args = {
+    theme: 'dark',
+    state: 'disabled'
+};
+
+export const ErrorDark: Story = (args: InputProps) => <LargeInputField {...args} />;
+ErrorDark.args = {
+    theme: 'dark',
+    state: 'error'
+};

apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Meta, StoryObj } from '@storybook/react';
+import { SmallInputField, type SmallInputProps } from '@csesoc/ui-components/src/inputs';
+
+const meta: Meta<typeof SmallInputField> = {
+    component: SmallInputField,
+    title: 'Example/SmallInputField',
+    argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof SmallInputField>;
+
+export const Light: Story = (args: SmallInputProps) => <SmallInputField {...args} />;
+Light.args = {
+    theme: 'light',
+    state: 'default'
+};
+
+export const Disabled: Story = (args: SmallInputProps) => <SmallInputField {...args} />;
+Disabled.args = {
+    theme: 'light',
+    state: 'disabled'
+};
+
+export const Error: Story = (args: SmallInputProps) => <SmallInputField {...args} />;
+Error.args = {
+    theme: 'light',
+    state: 'error'
+};
+
+export const Dark: Story = (args: SmallInputProps) => <SmallInputField {...args} />;
+Dark.args = {
+    theme: 'dark',
+    state: 'default'
+};
+
+export const DisabledDark: Story = (args: SmallInputProps) => <SmallInputField {...args} />;
+DisabledDark.args = {
+    theme: 'dark',
+    state: 'disabled'
+};
+
+export const ErrorDark: Story = (args: SmallInputProps) => <SmallInputField {...args} />;
+ErrorDark.args = {
+    theme: 'dark',
+    state: 'error'
+};