feat: add user profile page (#6)

components/design/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Checkbox as Component, CheckboxProps } from './Checkbox'
+
+const Stories: Meta = {
+  title: 'Checkbox',
+  component: Component
+}
+
+export default Stories
+
+export const Checkbox: Story<CheckboxProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+Checkbox.args = { label: 'Checkbox' }

components/design/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { Checkbox } from './Checkbox'
+
+describe('<Checkbox />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Checkbox label='Checkbox' />)
+    expect(baseElement).toBeTruthy()
+  })
+})

components/design/Checkbox/Checkbox.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames'
+
+export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
+  className?: string
+  label: string
+}
+
+export const Checkbox: React.FC<CheckboxProps> = (props) => {
+  const { label, id, className } = props
+  return (
+    <div className={classNames('flex items-center mt-4', className)}>
+      <input
+        {...props}
+        type='checkbox'
+        id={id}
+        className='relative appearance-none min-h-[25px] min-w-[25px] bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] dark:from-[#1f2937] dark:to-[#273547] mr-3 cursor-pointer rounded-md after:absolute before:absolute after:w-[2px] before:w-[2px] after:bg-black before:bg-black dark:after:bg-white dark:before:bg-white transition-all after:transition-all before:transition-all after:top-[62.5%] after:left-[36%] after:h-[7px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:duration-200 before:top-[50%] before:left-[59%] before:h-[12px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 checked:after:scale-100 checked:before:scale-100'
+      />
+      <label
+        className='cursor-pointer opacity-80 hover:opacity-100 transition duration-400 select-none '
+        htmlFor={id}
+      >
+        {label}
+      </label>
+    </div>
+  )
+}

components/design/Checkbox/index.ts

@@ -0,0 +1 @@
+export * from './Checkbox'

components/design/Input/Input.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
+import classNames from 'classnames'
 
 import { FormState } from '../FormState'
 
@@ -8,6 +9,7 @@ export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   label: string
   error?: string | null
   showForgotPassword?: boolean
+  className?: string
 }
 
 export const getInputType = (inputType: string): string => {
@@ -18,6 +20,7 @@ export const Input: React.FC<InputProps> = (props) => {
   const {
     label,
     name,
+    className,
     type = 'text',
     showForgotPassword = false,
     error,
@@ -34,7 +37,9 @@ export const Input: React.FC<InputProps> = (props) => {
   return (
     <>
       <div className='flex flex-col'>
-        <div className='flex justify-between mt-6 mb-2'>
+        <div
+          className={classNames('flex justify-between mt-6 mb-2', className)}
+        >
           <label className='pl-1' htmlFor={name}>
             {label}
           </label>
@@ -53,7 +58,7 @@ export const Input: React.FC<InputProps> = (props) => {
           <input
             data-testid='input'
             data-cy={`input-${name ?? 'name'}`}
-            className='h-11 leading-10 px-3 rounded-lg bg-[#f1f1f1] text-[#2a2a2a] caret-green-600 font-paragraph w-full focus:border focus:outline-none focus:shadow-green border-0'
+            className='h-11 leading-10 px-3 rounded-lg bg-[#f1f1f1] text-[#2a2a2a] border border-transparent caret-green-600 font-paragraph w-full focus:border focus:outline-none focus:shadow-green'
             {...rest}
             id={name}
             name={name}

components/design/Textarea/Textarea.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Textarea as Component, TextareaProps } from './Textarea'
+
+const Stories: Meta = {
+  title: 'Textarea',
+  component: Component
+}
+
+export default Stories
+
+export const Textarea: Story<TextareaProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+Textarea.args = { label: 'Textarea' }

components/design/Textarea/Textarea.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { Textarea } from './Textarea'
+
+describe('<Textarea />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Textarea label='Textarea' />)
+    expect(baseElement).toBeTruthy()
+  })
+})

components/design/Textarea/Textarea.tsx

@@ -0,0 +1,30 @@
+import TextareaAutosize, {
+  TextareaAutosizeProps
+} from 'react-textarea-autosize'
+
+export interface TextareaProps extends TextareaAutosizeProps {
+  label: string
+}
+
+export const Textarea: React.FC<TextareaProps> = (props) => {
+  const { label, id, ...rest } = props
+
+  return (
+    <div className='flex flex-col'>
+      <div className='flex justify-between mt-6 mb-2'>
+        <label className='pl-1' htmlFor={id}>
+          {label}
+        </label>
+      </div>
+      <div className='mt-0 relative'>
+        <TextareaAutosize
+          className='p-3 rounded-lg bg-[#f1f1f1] text-[#2a2a2a] caret-green-600 font-paragraph w-full focus:border focus:outline-none resize-none focus:shadow-green overflow-hidden'
+          wrap='soft'
+          id={id}
+          name={id}
+          {...rest}
+        />
+      </div>
+    </div>
+  )
+}

components/design/Textarea/index.ts

@@ -0,0 +1 @@
+export * from './Textarea'