Merge pull request #153 from awell-health/forms

Add form folder & components

.storybook/preview.tsx

@@ -4,19 +4,16 @@ import '../style.css';
 import { Preview } from '@storybook/react';
 
 const preview: Preview = {
-  decorators: [
-    (Story) => (
-      <Story />
-    ),
-  ],
+  decorators: [(Story) => <Story />],
   parameters: {
     options: {
       // The `a` and `b` arguments in this function have a type of `import('@storybook/types').IndexEntry`. Remember that the function is executed in a JavaScript environment, so use JSDoc for IntelliSense to introspect it.
-      storySort: (a, b) =>
-        a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
-    },
+      storySort: (a, b) => {
+        return a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true });
+      }
+    }
   },
-  tags: ['autodocs'],
+  tags: ['autodocs']
 };
 
-export default preview;
+export default preview;

eslint.config.js

@@ -14,7 +14,8 @@ export default [
     files: ['src/**/*.{js,mjs,cjs,ts,jsx,tsx}'],
     rules: {
       'react/react-in-jsx-scope': 'off',
-      'react/jsx-filename-extension': [1, { extensions: ['.ts', '.tsx'] }]
+      'react/jsx-filename-extension': [1, { extensions: ['.ts', '.tsx'] }],
+      'react/prop-types': 'off'
     },
     settings: {
       react: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/design-system",
-  "version": "0.11.12",
+  "version": "0.12.0",
   "type": "module",
   "files": [
     "dist"

src/components/index.ts

@@ -1,23 +1,24 @@
+export * from './ui/action-icon';
+export * from './ui/alert-dialog';
 export * from './ui/alert';
 export * from './ui/avatar';
-export * from './ui/alert-dialog';
 export * from './ui/badge';
 export * from './ui/button';
 export * from './ui/card';
 export * from './ui/dropdown';
+export * from './ui/form/checkbox';
+export * from './ui/form/input';
+export * from './ui/form/form-section';
+export * from './ui/form/select';
+export * from './ui/form/textarea';
+export * from './ui/form/toggle';
 export * from './ui/icon';
-export * from './ui/input';
-export * from './ui/select';
-export * from './ui/tab';
-export * from './ui/table';
-export * from './ui/textarea';
-export * from './ui/tooltip';
-export * from './ui/toast';
-export * from './ui/action-icon';
-export * from './ui/pagination';
-export * from './ui/checkbox';
-export * from './ui/toggle';
 export * from './ui/menu';
-export * from './ui/spinner';
 export * from './ui/modal';
+export * from './ui/pagination';
 export * from './ui/radial-progress';
+export * from './ui/spinner';
+export * from './ui/tab';
+export * from './ui/table';
+export * from './ui/toast';
+export * from './ui/tooltip';

src/components/ui/divider/Divider.spec.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { expect, it, describe } from 'vitest';
+import { Divider } from './Divider';
+
+describe('Divider', () => {
+  it('match snapshot', () => {
+    const { container } = render(<Divider />);
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/ui/divider/Divider.tsx

@@ -0,0 +1 @@
+export const Divider = (): JSX.Element => <div className='h-[1.5px] bg-gray-200 w-full' />;

src/components/ui/divider/__snapshots__/Divider.spec.tsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Divider > match snapshot 1`] = `
+<div>
+  <div
+    class="h-[1.5px] bg-gray-200 w-full"
+  />
+</div>
+`;

src/components/ui/divider/__snapshots__/FormSection.spec.tsx.snap

@@ -0,0 +1,22 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FormSection > match snapshot 1`] = `
+<div>
+  <div
+    class="py-6 flex flex-col gap-2"
+  >
+    <h5
+      class="text-lg font-medium leading-5 text-neutral-dark-800"
+    >
+      Test Title
+    </h5>
+    <div
+      class="mt-2"
+    >
+      <div>
+        Test Content
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/ui/divider/index.ts

@@ -0,0 +1,3 @@
+import { Divider } from './Divider';
+
+export { Divider };

src/components/ui/checkbox/checkbox.tsx → src/components/ui/form/checkbox/checkbox.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 import { VariantProps, cva } from 'class-variance-authority';
-import { Icon } from '../icon';
+import { Icon } from '../../icon';
 
 const checkboxVariants = cva('', {
   variants: {

src/components/ui/form/form-section/FormSection.spec.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { expect, it, describe } from 'vitest';
+import { FormSection } from './FormSection';
+
+describe('FormSection', () => {
+  const subject = (props = {}) => (
+    <FormSection title='Test Title' {...props}>
+      <div>Test Content</div>
+    </FormSection>
+  );
+
+  it('match snapshot', () => {
+    const { container } = render(subject());
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders the title', () => {
+    render(subject());
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+  });
+
+  it('renders the hint when provided', () => {
+    render(subject({ hint: 'Test Hint' }));
+    expect(screen.getByText('Test Hint')).toBeInTheDocument();
+  });
+
+  it('does not render the hint when not provided', () => {
+    render(subject());
+    expect(screen.queryByText('Test Hint')).not.toBeInTheDocument();
+  });
+
+  it('renders children content', () => {
+    render(subject({ children: 'Test Content' }));
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+  });
+});

src/components/ui/form/form-section/FormSection.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+
+interface Props {
+  title: string;
+  hint?: string;
+  children: React.ReactNode | JSX.Element | string;
+}
+
+export const FormSection: FC<Props> = ({ children, title, hint = null }) => {
+  return (
+    <div className='py-6 flex flex-col gap-2'>
+      <h5 className='text-lg font-medium leading-5 text-neutral-dark-800'>{title}</h5>
+      {hint !== null && <div className='text-gray-500'>{hint}</div>}
+      <div className='mt-2'>{children}</div>
+    </div>
+  );
+};

src/components/ui/form/form-section/__snapshots__/FormSection.spec.tsx.snap

@@ -0,0 +1,22 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FormSection > match snapshot 1`] = `
+<div>
+  <div
+    class="py-6 flex flex-col gap-2"
+  >
+    <h5
+      class="text-lg font-medium leading-5 text-neutral-dark-800"
+    >
+      Test Title
+    </h5>
+    <div
+      class="mt-2"
+    >
+      <div>
+        Test Content
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/ui/form/form-section/index.ts

@@ -0,0 +1,3 @@
+import { FormSection } from './FormSection';
+
+export { FormSection };

src/components/ui/input/input.spec.tsx → src/components/ui/form/input/input.spec.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { expect, it, describe, vi } from 'vitest';
 import { Input } from './input';
-import { Icon } from '../icon';
+import { Icon } from '@/components/ui/icon';
 
 describe('Input', () => {
   const subject = (props = {}) => {

src/components/ui/input/input.tsx → src/components/ui/form/input/input.tsx

@@ -9,10 +9,10 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   prefixIcon?: JSX.Element;
   hasError?: boolean;
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  className?: string;
+  type?: string;
 }
-
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  // eslint-disable-next-line react/prop-types
   (
     {
       className,

src/stories/Divider.stories.tsx

@@ -0,0 +1,14 @@
+import { Divider } from '@/components/ui/divider';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  component: Divider
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+
+type Story = StoryObj<typeof Divider>;
+
+export const Example = {
+  render: () => <Divider />
+} satisfies Story;

src/stories/Checkbox.stories.tsx → src/stories/Form/Checkbox.stories.tsx

@@ -1,4 +1,4 @@
-import { Checkbox } from '@/components/ui/checkbox';
+import { Checkbox } from '@/components/ui/form/checkbox';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {

src/stories/Form/FormSection.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormSection } from '@/components/ui/form/form-section';
+import { Input } from '../../components';
+
+const meta = {
+  component: FormSection
+} satisfies Meta<typeof FormSection>;
+
+export default meta;
+
+type Story = StoryObj<typeof FormSection>;
+
+export const Example = {
+  args: {
+    title: 'Form Section Title',
+    hint: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+  },
+  render: (args) => (
+    <FormSection {...args}>
+      <div className='flex flex-col gap-4'>
+        <Input />
+      </div>
+    </FormSection>
+  )
+} satisfies Story;

src/stories/Input.stories.tsx → src/stories/Form/Input.stories.tsx

@@ -1,6 +1,6 @@
-import { Input } from '@/components/ui/input';
+import { Input } from '@/components/ui/form/input';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Icon } from '../components';
+import { Icon } from '../../components';
 
 const meta = {
   component: Input

src/stories/Select.stories.tsx → src/stories/Form/Select.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Select } from '../components/ui/select';
-import { Icon } from '../components';
+import { Select } from '@/components/ui/form/select';
+import { Icon } from '../../components';
 
 const meta = {
   component: Select

src/stories/Textarea.stories.tsx → src/stories/Form/Textarea.stories.tsx

@@ -1,4 +1,4 @@
-import { Textarea } from '@/components/ui/textarea';
+import { Textarea } from '@/components/ui/form/textarea';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {

src/stories/Toggle.stories.tsx → src/stories/Form/Toggle.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Toggle } from '../components/ui/toggle/toggle';
+import { Toggle } from '../../components/ui/form/toggle/toggle';
 
 const meta = {
   component: Toggle

style.css

@@ -3483,6 +3483,10 @@ input.tab:checked + .tab-content,
   height: 2.25rem;
 }
 
+.h-\[1\.5px\] {
+  height: 1.5px;
+}
+
 .h-\[34px\] {
   height: 34px;
 }
@@ -3599,10 +3603,6 @@ input.tab:checked + .tab-content,
   width: 46px;
 }
 
-.w-\[48px\] {
-  width: 48px;
-}
-
 .w-full {
   width: 100%;
 }
@@ -3925,6 +3925,11 @@ input.tab:checked + .tab-content,
   background-color: rgb(207 250 254 / var(--tw-bg-opacity));
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -4141,6 +4146,11 @@ input.tab:checked + .tab-content,
   padding-bottom: 1rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .\!pb-0 {
   padding-bottom: 0px !important;
 }
@@ -4231,6 +4241,10 @@ input.tab:checked + .tab-content,
   font-weight: 400;
 }
 
+.leading-5 {
+  line-height: 1.25rem;
+}
+
 .leading-7 {
   line-height: 1.75rem;
 }