datefield and multiselect to form component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinox-fund/equinox-lib",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "description": "Equinox components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -59,6 +59,8 @@
     "postcss-import": "^14.0.2",
     "postcss-nesting": "^10.1.3",
     "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-select": "^5.3.0",
     "rollup": "^2.69.0",
     "rollup-plugin-dts": "^4.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",

src/components/common/index.ts

@@ -10,6 +10,7 @@ export { default as Heading } from './Heading'
 export { default as Icon } from './Icon'
 export { default as IconButton } from './IconButton'
 export { default as Image } from './Image'
+export { default as Markup } from './Markup'
 export { default as MenuButton } from './MenuButton'
 export { default as MenuDropdown } from './MenuDropdown'
 export { default as Modal } from './Modal'

src/components/form/Checkbox/index.ts

@@ -1,3 +1,2 @@
 export { default } from './Checkbox'
-
 export type { CheckboxProps } from './Checkbox'

src/components/form/DateField/DateField.stories.tsx

@@ -0,0 +1,24 @@
+import { Story, Meta } from '@storybook/react'
+import DateField, { DateFieldProps } from './DateField'
+
+export default {
+  title: 'components/form/DateField',
+  component: DateField
+} as Meta
+
+const Template: Story<DateFieldProps> = (args) => {
+  return (
+    <div className="p-12">
+      <DateField {...args} />
+    </div>
+  )
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  name: 'birthdate',
+  placeholder: 'Enter your date of birth',
+  error: '',
+  helper: '',
+  label: ''
+}

src/components/form/DateField/DateField.tsx

@@ -0,0 +1,81 @@
+import classnames from 'classnames'
+import { FC } from 'react'
+import Typography from '../../common/Typography'
+import styles from './styles'
+
+export interface DateFieldProps {
+  name: string
+  label?: string
+  helper?: string
+  size?: 'small' | 'medium'
+  error?: string
+  placeholder?: string
+  className?: string
+  onChange?(event: React.ChangeEvent<HTMLInputElement>): void
+  [t: string]: any
+  borders?: boolean
+}
+
+const DateField: FC<DateFieldProps> = ({
+  name,
+  label,
+  value,
+  error,
+  placeholder,
+  icon,
+  helper,
+  size = 'small',
+  borders = true,
+  onChange
+}) => {
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.target.blur()
+    }
+  }
+
+  const handleFocus = (e) => {
+    e.target.type = 'date'
+  }
+
+  return (
+    <div css={styles({ size, borders })}>
+      {label && (
+        <div className="mb-1.5">
+          <Typography color="muted" size="large" caption>
+            {label}
+          </Typography>
+        </div>
+      )}
+
+      <div className="input-wrapper">
+        <input
+          name={name}
+          type={value ? 'date' : 'text'}
+          defaultValue={value}
+          onFocus={handleFocus}
+          className={classnames({ ['error']: error })}
+          placeholder={placeholder}
+          onKeyDown={handleKeyDown}
+          onChange={onChange}
+        />
+        {icon && <span className="icon">{icon}</span>}
+      </div>
+
+      <div className="helper">
+        {error && (
+          <Typography color="error" size="medium" caption>
+            {error}
+          </Typography>
+        )}
+        {helper && !error && (
+          <Typography color="muted" size="medium" caption lineBreaks>
+            {helper}
+          </Typography>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DateField

src/components/form/DateField/index.ts

@@ -0,0 +1,3 @@
+export { default } from './DateField'
+
+export type { DateFieldProps } from './DateField'