[component lib] input forward ref react-hook-form (#30)

packages/frontend/src/components/shared/Input/Input.tsx

@@ -1,11 +1,18 @@
-import { ReactNode, useMemo } from 'react';
-import { ComponentPropsWithoutRef } from 'react';
-import { InputTheme, inputTheme } from './Input.theme';
+import {
+  forwardRef,
+  ReactNode,
+  useMemo,
+  ComponentPropsWithoutRef,
+} from 'react';
+import { FieldValues, UseFormRegister } from 'react-hook-form';
+
 import { WarningIcon } from 'components/shared/CustomIcon';
 import { cloneIcon } from 'utils/cloneIcon';
 import { cn } from 'utils/classnames';
 
-export interface InputProps
+import { InputTheme, inputTheme } from './Input.theme';
+
+export interface InputProps<T extends FieldValues = FieldValues>
   extends InputTheme,
     Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
   label?: string;
@@ -13,93 +20,108 @@ export interface InputProps
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;
   helperText?: string;
+
+  // react-hook-form optional register
+  register?: ReturnType<UseFormRegister<T>>;
 }
 
-export const Input = ({
-  className,
-  label,
-  description,
-  leftIcon,
-  rightIcon,
-  helperText,
-  size,
-  state,
-  appearance,
-  ...props
-}: InputProps) => {
-  const styleProps = useMemo(
-    () => ({
-      size: size || 'md',
-      state: state || 'default',
-      appearance, // Pass appearance to inputTheme
-    }),
-    [size, state, appearance],
-  );
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      label,
+      description,
+      leftIcon,
+      rightIcon,
+      helperText,
+      register,
+      size,
+      state,
+      appearance,
+      ...props
+    },
+    ref,
+  ) => {
+    const styleProps = useMemo(
+      () => ({
+        size: size || 'md',
+        state: state || 'default',
+        appearance, // Pass appearance to inputTheme
+      }),
+      [size, state, appearance],
+    );
 
-  const {
-    container: containerCls,
-    label: labelCls,
-    description: descriptionCls,
-    input: inputCls,
-    icon: iconCls,
-    iconContainer: iconContainerCls,
-    helperText: helperTextCls,
-    helperIcon: helperIconCls,
-  } = inputTheme({ ...styleProps });
+    const {
+      container: containerCls,
+      label: labelCls,
+      description: descriptionCls,
+      input: inputCls,
+      icon: iconCls,
+      iconContainer: iconContainerCls,
+      helperText: helperTextCls,
+      helperIcon: helperIconCls,
+    } = inputTheme({ ...styleProps });
+
+    const renderLabels = useMemo(() => {
+      if (!label && !description) return null;
+      return (
+        <div className="flex flex-col gap-y-1">
+          <p className={labelCls()}>{label}</p>
+          <p className={descriptionCls()}>{description}</p>
+        </div>
+      );
+    }, [labelCls, descriptionCls, label, description]);
+
+    const renderLeftIcon = useMemo(() => {
+      return (
+        <div className={iconContainerCls({ class: 'left-0 pl-4' })}>
+          {cloneIcon(leftIcon, { className: iconCls(), 'aria-hidden': true })}
+        </div>
+      );
+    }, [cloneIcon, iconCls, iconContainerCls, leftIcon]);
+
+    const renderRightIcon = useMemo(() => {
+      return (
+        <div className={iconContainerCls({ class: 'pr-4 right-0' })}>
+          {cloneIcon(rightIcon, { className: iconCls(), 'aria-hidden': true })}
+        </div>
+      );
+    }, [cloneIcon, iconCls, iconContainerCls, rightIcon]);
+
+    const renderHelperText = useMemo(() => {
+      if (!helperText) return null;
+      return (
+        <div className={helperTextCls()}>
+          {state &&
+            cloneIcon(<WarningIcon className={helperIconCls()} />, {
+              'aria-hidden': true,
+            })}
+          <p>{helperText}</p>
+        </div>
+      );
+    }, [cloneIcon, state, helperIconCls, helperText, helperTextCls]);
 
-  const renderLabels = useMemo(() => {
-    if (!label && !description) return null;
     return (
-      <div className="flex flex-col gap-y-1">
-        <p className={labelCls()}>{label}</p>
-        <p className={descriptionCls()}>{description}</p>
+      <div className="flex flex-col gap-y-2 w-full">
+        {renderLabels}
+        <div className={containerCls({ class: className })}>
+          {leftIcon && renderLeftIcon}
+          <input
+            {...(register ? register : {})}
+            className={cn(inputCls(), {
+              'pl-10': leftIcon,
+            })}
+            {...props}
+            ref={ref}
+          />
+          {rightIcon && renderRightIcon}
+        </div>
+        {renderHelperText}
       </div>
     );
-  }, [labelCls, descriptionCls, label, description]);
+  },
+);
 
-  const renderLeftIcon = useMemo(() => {
-    return (
-      <div className={iconContainerCls({ class: 'left-0 pl-4' })}>
-        {cloneIcon(leftIcon, { className: iconCls(), 'aria-hidden': true })}
-      </div>
-    );
-  }, [cloneIcon, iconCls, iconContainerCls, leftIcon]);
+Input.displayName = 'Input';
 
-  const renderRightIcon = useMemo(() => {
-    return (
-      <div className={iconContainerCls({ class: 'pr-4 right-0' })}>
-        {cloneIcon(rightIcon, { className: iconCls(), 'aria-hidden': true })}
-      </div>
-    );
-  }, [cloneIcon, iconCls, iconContainerCls, rightIcon]);
-
-  const renderHelperText = useMemo(() => {
-    if (!helperText) return null;
-    return (
-      <div className={helperTextCls()}>
-        {state &&
-          cloneIcon(<WarningIcon className={helperIconCls()} />, {
-            'aria-hidden': true,
-          })}
-        <p>{helperText}</p>
-      </div>
-    );
-  }, [cloneIcon, state, helperIconCls, helperText, helperTextCls]);
-
-  return (
-    <div className="flex flex-col gap-y-2 w-full">
-      {renderLabels}
-      <div className={containerCls({ class: className })}>
-        {leftIcon && renderLeftIcon}
-        <input
-          className={cn(inputCls(), {
-            'pl-10': leftIcon,
-          })}
-          {...props}
-        />
-        {rightIcon && renderRightIcon}
-      </div>
-      {renderHelperText}
-    </div>
-  );
-};
+export { Input };

packages/frontend/src/components/shared/Table/Table.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+const Header: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <thead className="text-left">{children}</thead>
+);
+const Body: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <tbody className="text-left">{children}</tbody>
+);
+const Row: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <tr className="text-left">{children}</tr>
+);
+const ColumnHeaderCell: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <th className="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
+    {children}
+  </th>
+);
+const RowHeaderCell: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <th
+    scope="row"
+    className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
+  >
+    {children}
+  </th>
+);
+const Cell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+    {children}
+  </td>
+);
+
+const Table: React.FC<{ children: React.ReactNode }> & {
+  Header: typeof Header;
+  Body: typeof Body;
+  Row: typeof Row;
+  ColumnHeaderCell: typeof ColumnHeaderCell;
+  RowHeaderCell: typeof RowHeaderCell;
+  Cell: typeof Cell;
+} = ({ children }) => <table className="min-w-full">{children}</table>;
+
+Table.Header = Header;
+Table.Body = Body;
+Table.Row = Row;
+Table.ColumnHeaderCell = ColumnHeaderCell;
+Table.RowHeaderCell = RowHeaderCell;
+Table.Cell = Cell;
+
+export { Table };

packages/frontend/src/components/shared/Table/index.ts

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

packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx

@@ -1,12 +1,13 @@
 import toast from 'react-hot-toast';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import {
-  Typography,
   Alert,
   Button,
 } from '@snowballtools/material-tailwind-react-fork';
 
 import { useGQLClient } from '../../../../../../../context/GQLClientContext';
+import { Heading } from 'components/shared/Heading';
+import { Table } from 'components/shared/Table';
 
 const Config = () => {
   const { id, orgSlug } = useParams();
@@ -38,37 +39,44 @@ const Config = () => {
     }
   };
 
+  // TODO: Figure out DNS Provider if possible and update appropriatly
   return (
     <div className="flex flex-col gap-6 w-full">
       <div>
-        <Typography variant="h5">Configure DNS</Typography>
-        <Typography variant="small">
+        <Heading className="text-sky-950 text-lg font-medium leading-normal">
+          Setup domain name
+        </Heading>
+        <p className="text-blue-gray-500">
           Add the following records to your domain.&nbsp;
           <a href="https://www.namecheap.com/" target="_blank" rel="noreferrer">
-            <span className="underline">Go to NameCheap</span> ^
+            <span className="underline">Go to NameCheap</span>
           </a>
-        </Typography>
+        </p>
       </div>
 
-      <table className="rounded-lg w-3/4 text-blue-gray-600">
-        <tbody>
-          <tr className="border-b-2 border-gray-300">
-            <th className="text-left p-2">Type</th>
-            <th className="text-left p-2">Name</th>
-            <th className="text-left p-2">Value</th>
-          </tr>
-          <tr className="border-b-2 border-gray-300">
-            <td className="text-left p-2">A</td>
-            <td className="text-left p-2">@</td>
-            <td className="text-left p-2">56.49.19.21</td>
-          </tr>
-          <tr>
-            <td className="text-left p-2">CNAME</td>
-            <td className="text-left p-2">www</td>
-            <td className="text-left p-2">cname.snowballtools.xyz</td>
-          </tr>
-        </tbody>
-      </table>
+      <Table>
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeaderCell>Type</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>Host</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>Value</Table.ColumnHeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          <Table.Row>
+            <Table.RowHeaderCell>A</Table.RowHeaderCell>
+            <Table.Cell>@</Table.Cell>
+            <Table.Cell>56.49.19.21</Table.Cell>
+          </Table.Row>
+
+          <Table.Row>
+            <Table.RowHeaderCell>CNAME</Table.RowHeaderCell>
+            <Table.Cell>www</Table.Cell>
+            <Table.Cell>cname.snowballtools.xyz</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
 
       <Alert color="blue">
         <i>^</i>It can take up to 48 hours for these updates to reflect

packages/frontend/src/stories/Components/Table.stories.tsx

@@ -0,0 +1,48 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Table } from 'components/shared/Table';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {
+  render: ({}) => (
+    <Table>
+      <Table.Header>
+        <Table.Row>
+          <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
+          <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
+          <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        <Table.Row>
+          <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
+          <Table.Cell>danilo@example.com</Table.Cell>
+          <Table.Cell>Developer</Table.Cell>
+        </Table.Row>
+
+        <Table.Row>
+          <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
+          <Table.Cell>zahra@example.com</Table.Cell>
+          <Table.Cell>Admin</Table.Cell>
+        </Table.Row>
+
+        <Table.Row>
+          <Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>
+          <Table.Cell>jasper@example.com</Table.Cell>
+          <Table.Cell>Developer</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  ),
+  args: {},
+};