feat(design-system): add Input, Textarea component and stories

.github/dependabot.yml

@@ -16,16 +16,16 @@ updates:
       prefix-development: 'chore'
       include: 'scope'
   - package-ecosystem: 'npm' # See documentation for possible values
-      directory: '/frontend' # Location of package manifests
-      schedule:
-        interval: 'daily'
-        time: '01:00'
-        timezone: 'Asia/Singapore'
-      commit-message:
-        prefix: 'fix'
-        prefix-development: 'chore'
-        include: 'scope'
-      labels:
-        - "react"
-        - "dependencies"
-      target-branch: "form-v2/develop"
+    directory: '/frontend' # Location of package manifests
+    schedule:
+      interval: 'daily'
+      time: '01:00'
+      timezone: 'Asia/Singapore'
+    commit-message:
+      prefix: 'fix'
+      prefix-development: 'chore'
+      include: 'scope'
+    labels:
+      - 'react'
+      - 'dependencies'
+    target-branch: 'form-v2/develop'

.gitignore

@@ -62,4 +62,5 @@ tmp/
 
 # Tests
 # =======
-coverage/
+coverage/
+frontend/.eslintcache

frontend/package.json

@@ -14,6 +14,7 @@
     "react-hook-form": "^7.10.1",
     "react-icons": "^3.0.0",
     "react-router-dom": "^5.2.0",
+    "react-textarea-autosize": "^8.3.3",
     "typescript": "^4.3.5",
     "web-vitals": "^0.2.2"
   },

frontend/src/assets/icons/BxsCheckCircle.tsx

@@ -1,17 +1,19 @@
-// Retrieved from https://reactsvgicons.com/boxicons
+import { forwardRef } from 'react'
 
-export const BxsCheckCircle = (
-  props: React.SVGProps<SVGSVGElement>,
-): JSX.Element => {
+export const BxsCheckCircle = forwardRef<
+  SVGSVGElement,
+  React.SVGProps<SVGSVGElement>
+>((props, ref) => {
   return (
     <svg
       viewBox="0 0 24 24"
       fill="currentColor"
       height="1em"
       width="1em"
       {...props}
+      ref={ref}
     >
       <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.999 14.413l-3.713-3.705L7.7 11.292l2.299 2.295 5.294-5.294 1.414 1.414-6.706 6.706z" />
     </svg>
   )
-}
+})

frontend/src/components/Input/Input.stories.tsx

@@ -0,0 +1,100 @@
+import { useForm } from 'react-hook-form'
+import {
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+} from '@chakra-ui/form-control'
+import { Meta, Story } from '@storybook/react'
+
+import Button from '../Button'
+
+import { Input, InputProps } from './Input'
+
+export default {
+  title: 'Components/Input',
+  component: Input,
+  decorators: [],
+} as Meta
+
+const Template: Story<InputProps> = (args) => <Input {...args} />
+export const Default = Template.bind({})
+Default.args = {
+  placeholder: 'Test placeholder',
+}
+
+export const Prefilled = Template.bind({})
+Prefilled.args = {
+  placeholder: 'Test placeholder',
+  defaultValue: 'Prefilled field',
+  isPrefilled: true,
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  isInvalid: true,
+  placeholder: 'Test placeholder',
+  defaultValue: 'Field error',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  isInvalid: false,
+  isSuccess: true,
+  placeholder: 'Test placeholder',
+  defaultValue: 'Field success',
+}
+export const Disabled = Template.bind({})
+Disabled.args = {
+  defaultValue: 'Some text',
+  placeholder: 'Test placeholder',
+  isDisabled: true,
+}
+
+export const Playground: Story = ({
+  name,
+  label,
+  isDisabled,
+  isRequired,
+  ...args
+}) => {
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm()
+  const onSubmit = (data: unknown) => alert(JSON.stringify(data))
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} noValidate>
+      <FormControl
+        isRequired={isRequired}
+        isDisabled={isDisabled}
+        isInvalid={!!errors[name]}
+        mb={6}
+      >
+        <FormLabel htmlFor={name}>{label}</FormLabel>
+        <Input
+          {...args}
+          {...register(name, {
+            required: isRequired
+              ? { value: true, message: 'Required field' }
+              : false,
+          })}
+        />
+        <FormErrorMessage>
+          {errors[name] && errors[name].message}
+        </FormErrorMessage>
+      </FormControl>
+      <Button variant="solid" type="submit">
+        Submit
+      </Button>
+    </form>
+  )
+}
+Playground.args = {
+  name: 'Test playground input',
+  label: 'Field label',
+  placeholder: 'Fill in this field',
+  isRequired: true,
+  isDisabled: false,
+}

frontend/src/components/Input/Input.tsx

@@ -0,0 +1,56 @@
+import {
+  forwardRef,
+  Icon,
+  Input as ChakraInput,
+  InputGroup,
+  InputProps as ChakraInputProps,
+  InputRightElement,
+  useMultiStyleConfig,
+} from '@chakra-ui/react'
+import { omit } from '@chakra-ui/utils'
+
+import { BxsCheckCircle } from '~assets/icons/BxsCheckCircle'
+
+export interface InputProps extends ChakraInputProps {
+  /**
+   * Whether the input is in a prefilled state.
+   */
+  isPrefilled?: boolean
+  /**
+   * Whether the input is in a success state.
+   */
+  isSuccess?: boolean
+}
+
+export const Input = forwardRef<InputProps, 'input'>((props, ref) => {
+  const inputStyles = useMultiStyleConfig('Input', props)
+
+  // Omit extra props so they will not be passed into the DOM and trigger
+  // React warnings.
+  const inputProps = omit(props, ['isSuccess', 'isPrefilled'])
+
+  // Return normal input component if not success state.
+  if (!props.isSuccess) {
+    return <ChakraInput ref={ref} {...inputProps} sx={inputStyles.field} />
+  }
+
+  return (
+    // InputGroup is required for InputRightElement to retrieve the correct
+    // style props. Will crash if not included.
+    <InputGroup>
+      <ChakraInput ref={ref} {...inputProps} sx={inputStyles.field} />
+      <InputRightElement sx={inputStyles.success}>
+        <Icon as={BxsCheckCircle} />
+      </InputRightElement>
+    </InputGroup>
+  )
+})
+
+/**
+ * This is used in by Chakra's `InputGroup` component to remove border radii
+ * when paired with `InputLeftAddon` or `InputRightAddon`.
+ *
+ * See https://github.com/chakra-ui/chakra-ui/blob/main/packages/input/src/input.tsx#L70 and
+ * https://github.com/chakra-ui/chakra-ui/blob/main/packages/input/src/input-group.tsx#L58.
+ */
+Input.id = 'Input'

frontend/src/components/Input/index.ts

@@ -0,0 +1,2 @@
+export type { InputProps } from './Input'
+export { Input as default } from './Input'

frontend/src/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,101 @@
+import { useForm } from 'react-hook-form'
+import {
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+} from '@chakra-ui/form-control'
+import { Meta, Story } from '@storybook/react'
+
+import Button from '../Button'
+
+import { Textarea, TextareaProps } from './Textarea'
+
+export default {
+  title: 'Components/Textarea',
+  component: Textarea,
+  decorators: [],
+} as Meta
+
+const Template: Story<TextareaProps> = (args) => <Textarea {...args} />
+export const Default = Template.bind({})
+Default.args = {
+  placeholder: 'Test placeholder',
+}
+
+export const Prefilled = Template.bind({})
+Prefilled.args = {
+  placeholder: 'Test placeholder',
+  defaultValue: 'Prefilled field',
+  isPrefilled: true,
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  isInvalid: true,
+  placeholder: 'Test placeholder',
+  defaultValue: 'Field error',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  isInvalid: false,
+  isSuccess: true,
+  placeholder: 'Test placeholder',
+  defaultValue: 'Field success',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  defaultValue: 'Some text',
+  placeholder: 'Test placeholder',
+  isDisabled: true,
+}
+
+export const Playground: Story = ({
+  name,
+  label,
+  isDisabled,
+  isRequired,
+  ...args
+}) => {
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm()
+  const onSubmit = (data: unknown) => alert(JSON.stringify(data))
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} noValidate>
+      <FormControl
+        isRequired={isRequired}
+        isDisabled={isDisabled}
+        isInvalid={!!errors[name]}
+        mb={6}
+      >
+        <FormLabel htmlFor={name}>{label}</FormLabel>
+        <Textarea
+          {...args}
+          {...register(name, {
+            required: isRequired
+              ? { value: true, message: 'Required field' }
+              : false,
+          })}
+        />
+        <FormErrorMessage>
+          {errors[name] && errors[name].message}
+        </FormErrorMessage>
+      </FormControl>
+      <Button variant="solid" type="submit">
+        Submit
+      </Button>
+    </form>
+  )
+}
+Playground.args = {
+  name: 'Test playground Textarea',
+  label: 'Field label',
+  placeholder: 'Fill in this field',
+  isRequired: true,
+  isDisabled: false,
+}