work

src/components/Button/Button.stories.tsx

@@ -63,11 +63,3 @@ export const Default = {
     </div>
   ),
 }
-
-export const FileUploadAsyncOnClick = () => {
-  const client = useClient()
-
-  console.log(client)
-
-  return <Button>Upload a file</Button>
-}

src/components/Form/Form.stories.tsx

@@ -10,11 +10,11 @@ import { Button } from '../Button/index.js'
 import { format } from 'date-fns'
 
 export default {
-  title: 'Form (WIP)',
+  title: 'Form',
   component: () => {},
 }
 
-export const AllTypes = () => {
+export const Default = () => {
   const form = useForm({
     onSubmit: (values) => {
       console.log('onSubmit', values)
@@ -24,11 +24,9 @@ export const AllTypes = () => {
     },
   })
 
-  console.count('rerender')
-
   return (
     <>
-      <FormFieldGroup header="Group title">
+      <FormFieldGroup label="Group title">
         <FormField label="TextInput">
           <TextInput
             value={form.values['text'] as string}
@@ -89,24 +87,17 @@ export const AllTypes = () => {
           </Calendar>
         </FormField>
       </FormFieldGroup>
-      <pre>{JSON.stringify(form, null, 2)}</pre>
     </>
   )
 }
 
-export const WIP = () => {
+export const DynamicInitialValue = () => {
   const [apiResponse, setApiResponse] = React.useState<any>()
 
   React.useEffect(() => {
-    setTimeout(() => {
-      setApiResponse({
-        email: '[email protected]',
-        password: crypto.randomUUID(),
-      })
-      setInterval(() => {
-        setApiResponse((p) => ({ ...p, password: crypto.randomUUID() }))
-      }, 500)
-    }, 1500)
+    setInterval(() => {
+      setApiResponse((p) => ({ ...p, email: crypto.randomUUID() }))
+    }, 500)
   }, [])
 
   const form = useForm({
@@ -142,28 +133,27 @@ export const WIP = () => {
 
   return (
     <>
-      <FormFieldGroup header="Group title">
-        <FormField label="Email">
+      <FormFieldGroup label="Group title">
+        <FormField label="Email" error={form.errors['email']}>
           <TextInput
             type="email"
-            //  TODO @vassbence fix "as string"
             disabled={form.isSubmitting}
             value={form.values['email'] as string}
             onChange={(value) => {
               form.setValue('email', value)
             }}
-            error={form.errors['email']}
+            error={!!form.errors['email']}
           />
         </FormField>
-        <FormField label="Password">
+        <FormField label="Password" error={form.errors['password']}>
           <TextInput
             type="password"
             disabled={form.isSubmitting}
             value={form.values['password'] as string}
             onChange={(value) => {
               form.setValue('password', value)
             }}
-            error={form.errors['password']}
+            error={!!form.errors['password']}
           />
         </FormField>
       </FormFieldGroup>

src/components/Form/FormField.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { FormField } from './FormField.js'
+import { TextInput } from '../TextInput/index.js'
+
+export default {
+  title: 'FormField',
+  component: FormField,
+}
+
+export const Vertical = () => {
+  return (
+    <FormField label="Label" description="Description text" error="Error text">
+      <TextInput error onChange={() => {}} />
+    </FormField>
+  )
+}
+
+export const Horizontal = () => {
+  return (
+    <FormField
+      horizontal
+      label="Label"
+      description="Description text"
+      error="Error text"
+    >
+      <TextInput error onChange={() => {}} />
+    </FormField>
+  )
+}

src/components/Form/FormField.tsx

@@ -0,0 +1,108 @@
+import { ReactNode } from 'react'
+import { Text } from '../Text/index.js'
+import { colors } from '../../utils/colors.js'
+import { Icon } from '../Icon/index.js'
+
+type FormFieldProps = {
+  label?: string
+  description?: string
+  error?: string
+  children: ReactNode
+  horizontal?: boolean
+}
+
+function FormField({
+  children,
+  label,
+  description,
+  error,
+  horizontal = false,
+}: FormFieldProps) {
+  if (horizontal) {
+    return (
+      <div
+        style={{
+          flex: 1,
+          width: '100%',
+          display: 'flex',
+          gap: 16,
+          minHeight: 36,
+        }}
+      >
+        <div style={{ width: 160, paddingTop: 9.5 }}>
+          <Text variant="display-regular" color="neutral60">
+            {label}
+          </Text>
+        </div>
+        <div
+          style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}
+        >
+          {children}
+          {error && (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+                color: colors.red100,
+              }}
+            >
+              <Icon variant="error-filled" />
+              <Text color="inherit" variant="display-medium">
+                {error}
+              </Text>
+            </div>
+          )}
+          {description && (
+            <Text variant="display-regular" color="neutral60">
+              {description}
+            </Text>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      style={{
+        flex: 1,
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'start',
+        gap: 8,
+      }}
+    >
+      {label && (
+        <Text variant="display-regular" color="neutral60">
+          {label}
+        </Text>
+      )}
+      {children}
+      {error && (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4,
+            color: colors.red100,
+          }}
+        >
+          <Icon variant="error-filled" />
+          <Text color="inherit" variant="display-medium">
+            {error}
+          </Text>
+        </div>
+      )}
+      {description && (
+        <Text variant="display-regular" color="neutral60">
+          {description}
+        </Text>
+      )}
+    </div>
+  )
+}
+
+export { FormField }
+export type { FormFieldProps }

src/components/Form/FormFieldGroup.stories.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { FormFieldGroup } from './FormFieldGroup.js'
+import { FormField } from './FormField.js'
+import { TextInput } from '../TextInput/index.js'
+
+export default {
+  title: 'FormFieldGroup',
+  component: FormFieldGroup,
+}
+
+export const Vertical = () => {
+  return (
+    <FormFieldGroup label="Group title">
+      <FormField label="Label">
+        <TextInput onChange={() => {}} />
+      </FormField>
+      <FormField label="Label" description="Description text">
+        <TextInput onChange={() => {}} />
+      </FormField>
+      <FormField label="Label" error="Error text">
+        <TextInput error onChange={() => {}} />
+      </FormField>
+      <FormField
+        label="Label"
+        description="Description text"
+        error="Error text"
+      >
+        <TextInput error onChange={() => {}} />
+      </FormField>
+    </FormFieldGroup>
+  )
+}
+
+export const Horizontal = () => {
+  return (
+    <FormFieldGroup label="Group title">
+      <FormField horizontal label="Label">
+        <TextInput onChange={() => {}} />
+      </FormField>
+      <FormField horizontal label="Label" description="Description text">
+        <TextInput onChange={() => {}} />
+      </FormField>
+      <FormField horizontal label="Label" error="Error text">
+        <TextInput error onChange={() => {}} />
+      </FormField>
+      <FormField
+        horizontal
+        label="Label"
+        description="Description text"
+        error="Error text"
+      >
+        <TextInput error onChange={() => {}} />
+      </FormField>
+    </FormFieldGroup>
+  )
+}

src/components/Form/FormFieldGroup.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react'
+import { Text } from '../Text/index.js'
+import { colors } from '../../utils/colors.js'
+
+type FormFieldGroupProps = {
+  label?: string
+  children: ReactNode
+}
+
+function FormFieldGroup({ label, children }: FormFieldGroupProps) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {label && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <Text variant="display-bold" color="neutral80">
+            {label}
+          </Text>
+          <div
+            style={{ height: 1, width: '100%', background: colors.neutral10 }}
+          />
+        </div>
+      )}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export { FormFieldGroup }
+export type { FormFieldGroupProps }