Add form storybook

package.json

@@ -25,6 +25,8 @@
     "antd": "^5.21.2",
     "autoprefixer": "^10.4.20",
     "classnames": "^2.5.1",
+    "formik": "^2.4.6",
+    "formik-antd": "^3.0.0-beta.9",
     "highcharts": "^11.4.8",
     "highcharts-react-official": "^3.2.1",
     "package-lock.json": "^1.0.0",
@@ -33,7 +35,8 @@
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.5.3",
-    "vite": "^5.4.8"
+    "vite": "^5.4.8",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",

src/appTheme.ts

@@ -21,8 +21,8 @@ export const appTheme: ThemeConfig = {
     colorSuccess: 'var(--j2-color-success)',
     colorWarning: 'var(--j2-color-warning)',
     colorInfo: 'var(--j2-color-info)',
-    colorError: 'var(--j2-color-error)',
     colorLink: 'var(--j2-color-link)',
+    colorError: '#bf6c6f',
     colorErrorBg: 'var(--j2-color-error-bg)',
     colorErrorBgHover: 'var(--j2-color-error-bg-hover)',
     colorErrorBorder: 'var(--j2-color-error-border)',

src/components/alert/__tests__/__snapshots__/alert.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Alert should render correctly 1`] = `
 <div>
   <div
-    class="ant-alert ant-alert-info ant-alert-no-icon css-dev-only-do-not-override-ccdg5a"
+    class="ant-alert ant-alert-info ant-alert-no-icon css-dev-only-do-not-override-tpassh"
     data-show="true"
     role="alert"
   >

src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Breadcrumb should render correctly 1`] = `
 <div>
   <nav
-    class="ant-breadcrumb css-dev-only-do-not-override-ccdg5a"
+    class="ant-breadcrumb css-dev-only-do-not-override-tpassh"
   >
     <ol />
   </nav>

src/components/button/__tests__/__snapshots__/button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Button should render correctly 1`] = `
 <div>
   <button
-    class="ant-btn css-dev-only-do-not-override-ccdg5a ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+    class="ant-btn css-dev-only-do-not-override-tpassh ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   />
 </div>

src/components/card/__tests__/__snapshots__/card.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Card should render correctly 1`] = `
 <div>
   <div
-    class="ant-card ant-card-bordered css-dev-only-do-not-override-ccdg5a"
+    class="ant-card ant-card-bordered css-dev-only-do-not-override-tpassh"
   >
     <div
       class="ant-card-head"

src/components/dropdown/__tests__/__snapshots__/dropdown.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Dropdown should render correctly 1`] = `
     class="ant-dropdown-trigger"
   >
     <button
-      class="ant-btn css-dev-only-do-not-override-ccdg5a ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+      class="ant-btn css-dev-only-do-not-override-tpassh ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>

src/components/form/Form.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Formik } from 'formik'
+import { Form } from 'formik-antd'
+import { Select } from '../select'
+import { Button } from '../button/Button'
+import { action } from '@storybook/addon-actions'
+import * as Yup from 'yup'
+
+const meta = {
+  title: 'Components/Form',
+  component: Form,
+} satisfies Meta<typeof Form>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const BasicForm: Story = {
+  render: () => {
+    return (
+      <Formik
+        initialValues={{ ma_plan_type: '' }}
+        validationSchema={Yup.object({
+          ma_plan_type: Yup.string().required('MA plan type is required'),
+        })}
+        onSubmit={(values) => action('form-submitted')(values)}
+      >
+        {({ isValid, dirty }) => {
+          const isFormReadyToSubmit = isValid && dirty
+          return (
+            <Form>
+              <Form.Item label="MA Plan Type" name="ma_plan_type" required>
+                <Select
+                  name="ma_plan_type"
+                  placeholder="Select a plan type"
+                  allowClear={true}
+                  style={{ width: '256px' }}
+                  options={[
+                    { label: 'HMO', value: 'hmo' },
+                    { label: 'HMO SNP', value: 'hmo_snp' },
+                    { label: 'HMO-POS', value: 'hmo_pos' },
+                    { label: 'HMO D-SNP', value: 'hmo_d_snp' },
+                    { label: 'PPO', value: 'ppo' },
+                    { label: 'PPO SNP', value: 'ppo_snp' },
+                    { label: 'PFFS', value: 'pffs' },
+                    { label: 'MSA', value: 'msa' },
+                    { label: 'Cost Plan', value: 'cost_plan' },
+                    { label: 'PACE', value: 'pace' },
+                  ]}
+                />
+              </Form.Item>
+              <Button
+                type="primary"
+                htmlType="submit"
+                disabled={!isFormReadyToSubmit}
+              >
+                Submit
+              </Button>
+            </Form>
+          )
+        }}
+      </Formik>
+    )
+  },
+}

src/components/form/index.tsx

@@ -0,0 +1 @@
+export { FormInput } from './FormInput'

src/components/radio/__tests__/__snapshots__/radio.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Radio should render correctly 1`] = `
 <div>
   <label
-    class="ant-radio-wrapper css-dev-only-do-not-override-ccdg5a"
+    class="ant-radio-wrapper css-dev-only-do-not-override-tpassh"
   >
     <span
       class="ant-radio ant-wave-target"
@@ -24,10 +24,10 @@ exports[`Radio should render correctly 1`] = `
 exports[`RadioGroup should render correctly 1`] = `
 <div>
   <div
-    class="ant-radio-group ant-radio-group-solid css-dev-only-do-not-override-ccdg5a"
+    class="ant-radio-group ant-radio-group-solid css-dev-only-do-not-override-tpassh"
   >
     <label
-      class="ant-radio-button-wrapper css-dev-only-do-not-override-ccdg5a"
+      class="ant-radio-button-wrapper css-dev-only-do-not-override-tpassh"
     >
       <span
         class="ant-radio-button"
@@ -46,7 +46,7 @@ exports[`RadioGroup should render correctly 1`] = `
       </span>
     </label>
     <label
-      class="ant-radio-button-wrapper css-dev-only-do-not-override-ccdg5a"
+      class="ant-radio-button-wrapper css-dev-only-do-not-override-tpassh"
     >
       <span
         class="ant-radio-button"

src/components/select/Select.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { Formik } from 'formik'
+import { Form } from 'formik-antd'
 import { Select } from './Select'
 
 const meta = {
@@ -16,9 +18,13 @@ const meta = {
     allowClear: {
       control: 'boolean',
     },
+    loading: {
+      control: 'boolean',
+    },
     onChange: { action: 'changed' },
   },
   args: {
+    name: 'plan_metal',
     size: 'middle',
     options: [
       { label: 'Bronze Plan', value: 'bronze' },
@@ -36,7 +42,15 @@ export const Basic: Story = {
   args: {
     size: 'middle',
     defaultValue: 'bronze',
+    loading: false,
   },
+  render: (args) => (
+    <Formik initialValues={{ plan_metal: 'bronze' }} onSubmit={() => {}}>
+      <Form>
+        <Select {...args} />
+      </Form>
+    </Formik>
+  ),
 }
 
 export const Search: Story = {
@@ -46,6 +60,7 @@ export const Search: Story = {
     placeholder: 'Select a health care plan',
     optionFilterProp: 'label',
     allowClear: true,
+    loading: false,
     onChange: { action: 'changed' },
     onSearch: { action: 'searched' },
     options: [
@@ -55,6 +70,13 @@ export const Search: Story = {
       { value: 'platinum', label: 'Platinum Plan' },
     ],
   },
+  render: (args) => (
+    <Formik initialValues={{ plan_metal: '' }} onSubmit={() => {}}>
+      <Form>
+        <Select {...args} />
+      </Form>
+    </Formik>
+  ),
 }
 
 export const Multiple: Story = {
@@ -64,5 +86,16 @@ export const Multiple: Story = {
     placeholder: 'Select health care plans',
     defaultValue: ['bronze', 'gold'],
     allowClear: true,
+    loading: false,
   },
+  render: (args) => (
+    <Formik
+      initialValues={{ plan_metal: ['bronze', 'gold'] }}
+      onSubmit={() => {}}
+    >
+      <Form>
+        <Select {...args} />
+      </Form>
+    </Formik>
+  ),
 }

src/components/select/Select.tsx

@@ -1,15 +1,12 @@
-import { Select as AntDSelect, Spin } from 'antd'
+import { Select as AntDSelect } from 'formik-antd'
+import { Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import type { SelectProps as AntDSelectProps } from 'antd'
 import { CaretDown, MagnifyingGlass, XCircle } from '@phosphor-icons/react'
 import { useState } from 'react'
 
 type SelectProps = Expand<AntDSelectProps> & {
-  size?: 'large' | 'middle' | 'small'
-  mode?: '' | 'multiple'
-  onChange?: (value: string | string[]) => void
-  onSearch?: (value: string) => void
-  options?: { label: string; value: string }[]
+  name: string
 }
 
 export const Select = (props: SelectProps) => {