feat(text-input): add component

src/models/base-input-props.model.ts

@@ -0,0 +1,9 @@
+import { InputSize } from '.';
+
+export type BaseInputProps = {
+  size?: InputSize;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: boolean;
+  className?: string;
+};

src/models/index.ts

@@ -1 +1,3 @@
 export * from './queryable-component.model';
+export * from './base-input-props.model';
+export * from './input-size.model';

src/models/input-size.model.ts

@@ -0,0 +1 @@
+export type InputSize = 'md' | 'sm';

src/ui/index.ts

@@ -4,3 +4,4 @@ export * from './pagination';
 export * from './property-item';
 export * from './table';
 export * from './typography';
+export * from './text-input';

src/ui/text-input/index.ts

@@ -0,0 +1 @@
+export * from './text-input.component';

src/ui/text-input/text-input.component.tsx

@@ -0,0 +1,32 @@
+import React, { ComponentPropsWithRef, forwardRef } from 'react';
+import clsx from 'clsx';
+
+import { BaseInputProps } from '../../models';
+import { getTextBasedInputClasses } from '../../utils/text-based-input.utils';
+
+type TextInputProps = BaseInputProps & ComponentPropsWithRef<'input'>;
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  ({ disabled, readOnly, error, size, className, ...rest }, ref) => {
+    return (
+      <>
+        <input
+          ref={ref}
+          type="text"
+          disabled={disabled}
+          readOnly={readOnly}
+          aria-invalid={error || undefined}
+          className={clsx(
+            getTextBasedInputClasses({
+              disabled: disabled || readOnly,
+              error,
+              size,
+            }),
+            className
+          )}
+          {...rest}
+        />
+      </>
+    );
+  }
+);

src/ui/text-input/text-input.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { TextInput } from './text-input.component';
+
+export default {
+  title: 'Atoms/TextInput',
+  component: TextInput,
+} as ComponentMeta<typeof TextInput>;
+
+export const Default: ComponentStory<typeof TextInput> = () => <TextInput />;
+
+export const Disabled: ComponentStory<typeof TextInput> = () => (
+  <TextInput disabled={true} />
+);
+
+export const Readonly: ComponentStory<typeof TextInput> = () => (
+  <TextInput readOnly={true} />
+);

src/utils/text-based-input.utils.ts

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+
+import { InputSize } from '../models';
+
+type TextBasedInputClassProps = {
+  disabled?: boolean;
+  error?: boolean;
+  size?: InputSize;
+};
+
+export const getTextBasedInputClasses = ({
+  disabled,
+  error,
+  size = 'md',
+}: TextBasedInputClassProps) =>
+  clsx(
+    'appearance-none border rounded focus:outline-none placeholder-primary-300 bg-slate-100',
+    {
+      'py-1 px-2 text-sm': size === 'sm',
+      'py-3 px-4 text-base': size === 'md',
+      // 'text-primary-400': disabled,
+      // 'text-primary-500': !disabled,
+      // 'border-red-500 focus:ring-1 focus:ring-red-500': error,
+      'border-primary-150 focus:shadow-primary-100': !error,
+    }
+  );