Merge pull request #19 from uninus-opensource/improvement/match-inputs

chore: adjust Inputs to matched the design guidelines (tentative)

apps/web/tourism/app/(landing-page)/_module/index.tsx

@@ -2,10 +2,19 @@
 
 import Image from 'next/image';
 import { FC, ReactElement } from 'react';
-import { Footer, Navbar } from '@psu/web-component-molecules';
-import { Button } from '@psu/web-component-atoms';
+import { FieldText, Footer, Navbar } from '@psu/web-component-molecules';
+import { Button, InputText } from '@psu/web-component-atoms';
+import {
+  ControlledFieldCheckbox,
+  ControlledFieldSelect,
+  ControlledFieldText,
+  ControlledFieldTextArea,
+} from '@psu/web-component-organisms';
+import { MdEmail } from 'react-icons/md';
+import { useForm } from 'react-hook-form';
 
 export const TourismModule: FC = (): ReactElement => {
+  const form = useForm();
   return (
     <main className="w-full min-h-screen space-y-10">
       <Navbar logoUrl="/assets/logo.svg" />
@@ -136,6 +145,116 @@ export const TourismModule: FC = (): ReactElement => {
           </div>
         </div>
       </article>
+      <div className="flex flex-col justify-center items-center w-full">
+        <div className="px-10 grid grid-cols-2 gap-5">
+          <div className="flex flex-col gap-2">
+            <ControlledFieldText
+              name="email"
+              status="default"
+              message="Controlled"
+              label="Controlled Email"
+              prepend={<MdEmail />}
+              control={form.control}
+            />
+            <ControlledFieldText
+              name="email"
+              status="success"
+              message="Controlled"
+              label="Controlled Email"
+              append={<MdEmail />}
+              control={form.control}
+            />
+            <ControlledFieldText
+              name="email"
+              status="warning"
+              message="Controlled"
+              label="Controlled Email"
+              control={form.control}
+            />
+            <ControlledFieldText
+              name="email"
+              status="error"
+              message="Controlled"
+              label="Controlled Email"
+              id="email"
+              append={<MdEmail />}
+              prepend={<MdEmail />}
+              control={form.control}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <ControlledFieldTextArea
+              label="Textarea"
+              name="messages"
+              control={form.control}
+              append={<MdEmail />}
+              status="default"
+            />
+            <ControlledFieldTextArea
+              label="Textarea"
+              name="messages"
+              control={form.control}
+              status="success"
+            />
+            <ControlledFieldTextArea
+              label="Textarea"
+              name="messages"
+              control={form.control}
+              status="warning"
+            />
+            <ControlledFieldTextArea
+              label="Textarea"
+              name="messages"
+              control={form.control}
+              status="error"
+            />
+          </div>
+          <div className="flex">
+            <ControlledFieldCheckbox
+              size="sm"
+              name="check"
+              label="sm"
+              id="checkbos"
+              control={form.control}
+            />
+            <ControlledFieldCheckbox
+              size="md"
+              name="checkbox"
+              label="md"
+              id="checkbos"
+              control={form.control}
+            />
+            <ControlledFieldCheckbox
+              size="lg"
+              name="checkbox"
+              label="lg"
+              id="checkbos"
+              control={form.control}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <ControlledFieldSelect
+              name="select"
+              control={form.control}
+              options={[
+                { label: 'Option 1', value: 'option-1' },
+                { label: 'Option 2', value: 'option-2' },
+                { label: 'Option 3', value: 'option-3' },
+              ]}
+            />
+            <ControlledFieldSelect
+              name="select"
+              control={form.control}
+              options={[
+                { label: 'Option 1', value: 'option-1' },
+                { label: 'Option 2', value: 'option-2' },
+                { label: 'Option 3', value: 'option-3' },
+              ]}
+              status="error"
+            />
+          </div>
+        </div>
+      </div>
       <Footer />
     </main>
   );

libs/entities/src/types/common/index.ts

@@ -12,6 +12,8 @@ import type {
   HTMLAttributes,
   InputHTMLAttributes,
   LabelHTMLAttributes,
+  ReactElement,
+  ReactNode,
   TextareaHTMLAttributes,
 } from 'react';
 import type { FieldValues, UseControllerProps } from 'react-hook-form';
@@ -70,7 +72,9 @@ export type TState = 'default' | 'loading';
 
 export type TInputExtend<T = undefined> = {
   size?: TSize;
-  status?: Exclude<TVariant, 'primary' | 'secondary'> | T;
+  status?: Exclude<TVariant, 'primary' | 'secondary' | 'info'> | T;
+  append?: ReactNode;
+  prepend?: ReactNode;
 };
 
 export type TInput = Omit<

libs/entities/src/types/common/style.ts

@@ -1,7 +1,12 @@
 import { TInput } from '.';
 import { cn } from '../../utils';
 
-export const className = ({ size = 'sm', status = 'default' }: TInput) =>
+export const className = ({
+  size = 'sm',
+  status = 'default',
+  append,
+  prepend,
+}: TInput) =>
   cn(
     'rounded-md w-full border outline-none focus:ring-none focus:outline-none',
     'disabled:cursor-not-allowed disabled:bg-grey-50',
@@ -12,7 +17,25 @@ export const className = ({ size = 'sm', status = 'default' }: TInput) =>
       'md:px-5 md:py-4': size === 'lg',
     },
     {
-      'bg-white border-2 border-green text-neutral-30% placeholder:text-neutral-30%':
+      'md:pl-3 md:pr-7 md:py-2 md:text-xs':
+        (size === 'sm' && append) || (!size && append),
+      'md:pl-4 md:pr-8 md:py-3': size === 'md' && append,
+      'md:pl-5 md:pr-9 md:py-4': size === 'lg' && append,
+    },
+    {
+      'md:pr-3 md:pl-7 md:py-2 md:text-xs':
+        (size === 'sm' && prepend) || (!size && prepend),
+      'md:pr-4 md:pl-8 md:py-3': size === 'md' && prepend,
+      'md:pr-5 md:pl-9 md:py-4': size === 'lg' && prepend,
+    },
+    {
+      'md:px-7 md:py-2 md:text-xs':
+        (size === 'sm' && append && prepend) || (!size && append && prepend),
+      'md:px-8 md:py-3': size === 'md' && append && prepend,
+      'md:px-9 md:py-4': size === 'lg' && append && prepend,
+    },
+    {
+      'bg-white border border-neutral-60% focus-within:border-neutral-100% text-neutral-100% placeholder:text-neutral-50%':
         status === 'default' || !status,
       'bg-green-10% text-green placeholder:text-green': status === 'success',
       'bg-red-10% text-red placeholder:text-red': status === 'error',

libs/web/components/atoms/src/inputs/checkbox/checkbox.tsx

@@ -11,7 +11,7 @@ export const InputCheckbox: FC<TInputSpecial> = ({
 
   const className = clsx(
     'before:block before:-translate-y-2/4 before:-translate-x-2/4',
-    "before:content[''] peer relative cursor-pointer appearance-none rounded-md",
+    "before:content[''] peer relative cursor-pointer appearance-none rounded",
     'border border-grey transition-all before:absolute before:top-2/4 before:left-2/4',
     'before:rounded-full before:bg-primary-2 before:opacity-0 before:transition-opacity',
     'checked:border-primary checked:bg-primary checked:before:bg-primary hover:before:opacity-10',
@@ -26,14 +26,13 @@ export const InputCheckbox: FC<TInputSpecial> = ({
   const iconClassName = clsx(
     'absolute text-white transition-opacity opacity-0 pointer-events-none peer-checked:opacity-100',
     {
-      'left-[1.8px]': size === 'sm',
-      'left-[2px]': size === 'md',
-      'left-[3px]': size === 'lg',
+      'left-[1px]': size === 'sm',
+      'left-[2px]': size === 'md' || size === 'lg',
     }
   );
 
   const svgClassName = clsx({
-    'h-3 w-3': size === 'sm',
+    'h-3 w-3 ml-[1px]': size === 'sm',
     'h-4 w-4': size === 'md',
     'h-5 w-5': size === 'lg',
   });

libs/web/components/atoms/src/inputs/select/select.tsx

@@ -19,7 +19,7 @@ export const InputSelect: FC<TSelect> = (props): ReactElement => {
     .otherwise(() => '#6A7280');
 
   const statusDropdownIconColor = cn('mr-2', {
-    'text-error': props.status === 'error',
+    'text-red-40%': props.status === 'error',
     'text-neutral-40%': props.status === 'none' || !props.status,
   });
 

libs/web/components/atoms/src/inputs/text/text.tsx

@@ -1,5 +1,5 @@
 import { FC, useId } from 'react';
-import { TInput, className } from '@psu/entities';
+import { TInput, className, cn } from '@psu/entities';
 
 export const InputText: FC<TInput> = ({
   size = 'sm',
@@ -9,6 +9,123 @@ export const InputText: FC<TInput> = ({
 }) => {
   const id = useId();
 
+  if (props.append && props.prepend) {
+    return (
+      <div
+        className={cn(
+          'relative',
+          {
+            'text-neutral-60% focus-within:text-neutral-100%':
+              status === 'default' || !status,
+            'bg-green-10% text-green placeholder:text-green':
+              status === 'success',
+            'bg-red-10% text-red placeholder:text-red': status === 'error',
+            'bg-yellow-10% text-yellow-60% placeholder:text-yellow-60%':
+              status === 'warning',
+          },
+          {
+            'text-sm': size === 'sm',
+            'text-lg': size === 'md',
+            'text-xl': size === 'lg',
+          }
+        )}
+      >
+        <input
+          {...props}
+          id={id}
+          className={className({
+            size,
+            status,
+            append: props.append,
+            prepend: props.prepend,
+          })}
+          placeholder={placeholder}
+        />
+        <span
+          className={cn('absolute top-1/2 right-2 transform -translate-y-1/2')}
+        >
+          {props.append}
+        </span>
+        <span
+          className={cn('absolute top-1/2 left-2 transform -translate-y-1/2')}
+        >
+          {props.prepend}
+        </span>
+      </div>
+    );
+  }
+
+  if (props.append) {
+    return (
+      <div
+        className={cn(
+          'relative',
+          {
+            'text-neutral-60% focus-within:text-neutral-100%':
+              status === 'default' || !status,
+            'bg-green-10% text-green placeholder:text-green':
+              status === 'success',
+            'bg-red-10% text-red placeholder:text-red': status === 'error',
+            'bg-yellow-10% text-yellow-60% placeholder:text-yellow-60%':
+              status === 'warning',
+          },
+          {
+            'text-sm': size === 'sm',
+            'text-lg': size === 'md',
+            'text-xl': size === 'lg',
+          }
+        )}
+      >
+        <input
+          {...props}
+          id={id}
+          className={className({ size, status, append: props.append })}
+          placeholder={placeholder}
+        />
+        <span
+          className={cn('absolute top-1/2 right-2 transform -translate-y-1/2')}
+        >
+          {props.append}
+        </span>
+      </div>
+    );
+  }
+  if (props.prepend) {
+    return (
+      <div
+        className={cn(
+          'relative',
+          {
+            'text-neutral-60% focus-within:text-neutral-100%':
+              status === 'default' || !status,
+            'bg-green-10% text-green placeholder:text-green':
+              status === 'success',
+            'bg-red-10% text-red placeholder:text-red': status === 'error',
+            'bg-yellow-10% text-yellow-60% placeholder:text-yellow-60%':
+              status === 'warning',
+          },
+          {
+            'text-sm': size === 'sm',
+            'text-lg': size === 'md',
+            'text-xl': size === 'lg',
+          }
+        )}
+      >
+        <input
+          {...props}
+          id={id}
+          className={className({ size, status, prepend: props.prepend })}
+          placeholder={placeholder}
+        />
+        <span
+          className={cn('absolute top-1/2 left-2 transform -translate-y-1/2')}
+        >
+          {props.prepend}
+        </span>
+      </div>
+    );
+  }
+
   return (
     <input
       {...props}

libs/web/components/atoms/src/message/message.tsx

@@ -11,17 +11,16 @@ export const Message: FC<TMessage> = (props): ReactElement => {
     .with('error', () => <BiErrorCircle />)
     .with('success', () => <BiCheckCircle />)
     .with('warning', () => <BiErrorCircle />)
-    .with('info', () => <BiErrorCircle />)
     .with('default', () => null)
     .otherwise(() => null);
 
   const className = clsx(
-    'text-xs flex items-start pt-1 gap-x-1 mt-[-7px]',
+    'text-xs flex items-center pt-1 gap-x-1 mt-[-7px]',
     {
-      'text-error': status === 'error',
-      'text-success': status === 'success',
+      'text-red': status === 'error',
+      'text-green': status === 'success',
       'text-grey': status === 'default',
-      'text-warning': status === 'warning',
+      'text-yellow-60%': status === 'warning',
     },
     props.className
   );