chore: refactoring field (#981)

* chore: refactoring field * chore: some clean field * fix: rollback IconWrapper * chore: refactoring select tests without ConnectedField * chore: refactoring InputText tests without ConnectedField * chore: refactoring PasswordInput tests without ConnectedField * chore: refactoring Checkbox tests without ConnectedField * chore: refactoring Search tests without ConnectedField * chore: refactoring Picker tests without ConnectedField * fix: remove forwardFieldRef type from system * chore: remove ConnectedField component * chore: refactoring DateTimePicker tests without ConnectedField * fix: replace ConnectedField in documentation and use new Field api Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co> * chore: add some tests for Field * fix: add hookform to fieldgroup doc Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co> * fix: fix tests and add size props and id to field children Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co> * fix: remove size prop from field Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co> * fix: add skipped test to handle no id no name field child Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co> * chore: generate random id/htmlFor if no exist * fix: @welcome-ui/system version * chore: update input-text doc * chore: update docs with new field on label/field/password-input/textarea * chore: update docs with new field on select * chore: update docs with new field on toggle/search * chore: update docs with new field on file-drop * chore: update docs with new field on pickers/markdown-editor/radios * chore: update file-upload doc * fix: remove useless comment * fix: typo on drawer.mdx * fix: restore DatePicker tests * refactor: default fields style (#988) * fix: polish field test with toContain instead toBe Co-authored-by: Paul-Xavier Ceccaldi <pix@wttj.co>
WTTJ · Feb 10, 2022 · 6e24d54 · 6e24d54
1 parent a895b09
commit 6e24d54
Show file tree

Hide file tree

Showing 88 changed files with 1,948 additions and 2,728 deletions.
diff --git a/docs/components/Code.js b/docs/components/Code.js
@@ -5,7 +5,6 @@ import * as React from 'react'
 import { LivePreview, LiveProvider } from 'react-live'
 import theme from 'prism-react-renderer/themes/nightOwl'
 import NextLink from 'next/link'
-import { Form as FinalForm } from 'react-final-form'
 import dateFR from 'date-fns/locale/fr'
 import * as yup from 'yup'
 import { Controller } from 'react-hook-form'
@@ -20,7 +19,6 @@ import { Breadcrumb } from '@welcome-ui/breadcrumb'
 import { Button } from '@welcome-ui/button'
 import { Card } from '@welcome-ui/card'
 import { Checkbox } from '@welcome-ui/checkbox'
-import { ConnectedField } from '@welcome-ui/connected-field'
 import { DatePicker } from '@welcome-ui/date-picker'
 import { DateTimePicker } from '@welcome-ui/date-time-picker'
 import * as DropdownMenu from '@welcome-ui/dropdown-menu'
@@ -68,7 +66,6 @@ import * as Emoji from '@welcome-ui/emoji'
 
 import * as constants from '../constants'
 
-import { Form } from './Form'
 import { HookForm } from './HookForm'
 import { IconsList } from './IconsList'
 import * as S from './Code.styled'
@@ -137,7 +134,6 @@ export function Code({ children, className, isCopyable = true, live = true, row
       Checkbox,
       CodeContent: S.CodeContent,
       CodeContentRow: S.CodeContentRow,
-      ConnectedField,
       constants,
       Controller,
       dateFR,
@@ -152,8 +148,6 @@ export function Code({ children, className, isCopyable = true, live = true, row
       FileDrop,
       ...Files,
       FileUpload,
-      FinalForm,
-      Form,
       Group,
       Hint,
       HookForm,
@@ -199,7 +193,13 @@ export function Code({ children, className, isCopyable = true, live = true, row
   if (live === true && language === 'jsx') {
     return (
       <LiveProvider {...liveProviderProps}>
-        <S.LivePreview className="codeEditor">
+        <Card
+          className="codeEditor"
+          display="flex"
+          flexDirection="column"
+          mb="md"
+          overflow="visible"
+        >
           <Card.Body color="dark.900" padding="xl" paddingBottom="lg">
             <LivePreview />
             <S.ShowEditor>
@@ -209,7 +209,7 @@ export function Code({ children, className, isCopyable = true, live = true, row
               </Button>
             </S.ShowEditor>
           </Card.Body>
-        </S.LivePreview>
+        </Card>
         {editorOpen && (
           <S.LiveEditor>
             <S.LiveEditorContent onChange={handleChange} padding={20} style={liveEditorStyle} />

diff --git a/docs/components/Code.styled.js b/docs/components/Code.styled.js
@@ -1,7 +1,6 @@
 import styled from '@xstyled/styled-components'
 import { th } from '@xstyled/system'
 import { LiveEditor as ReactLiveEditor, LiveError as ReactLiveError } from 'react-live'
-import { Card } from '@welcome-ui/card'
 import { Box } from '@welcome-ui/box'
 
 export const LiveEditor = styled(Box)`
@@ -38,13 +37,6 @@ export const LiveError = styled(ReactLiveError)`
   margin: xxs 0 lg;
 `
 
-export const LivePreview = styled(Card)`
-  display: flex;
-  flex-direction: column;
-  overflow: visible;
-  margin-bottom: md;
-`
-
 export const ShowEditor = styled.div`
   padding-top: sm;
   margin-top: xl;

diff --git a/docs/components/Form.js b/docs/components/Form.js
diff --git a/docs/components/Header.js b/docs/components/Header.js
@@ -17,7 +17,7 @@ import { Navigation } from './Navigation'
 import { SelectTheme } from './SelectTheme'
 import * as S from './Header.styled'
 
-export const Header = () => {
+export function Header() {
   const modal = useModalState()
   const theme = useThemeContext()
 
@@ -26,7 +26,7 @@ export const Header = () => {
       window.docsearch({
         apiKey: '85801aa252bde17259c4a5a61c1e84db',
         indexName: 'welcome-ui',
-        inputSelector: '#search-algolia'
+        inputSelector: '#search-algolia',
       })
     }
   }, [])
@@ -75,14 +75,14 @@ export const Header = () => {
         <SelectTheme id="navigation" />
       </Box>
       <Box display={{ xs: 'none', md: 'block' }} mt="md" w="100%">
-        <Field
-          component={InputText}
-          icon={<SearchIcon color="light.100" size="sm" />}
-          isClearable
-          name="search-algolia"
-          placeholder="Search"
-          size="sm"
-        />
+        <Field size="sm">
+          <InputText
+            icon={<SearchIcon color="light.100" size="sm" />}
+            isClearable
+            name="search-algolia"
+            placeholder="Search"
+          />
+        </Field>
       </Box>
       <Box
         display={{ xs: 'none', md: 'block' }}

diff --git a/docs/pages/components/checkbox.mdx b/docs/pages/components/checkbox.mdx
@@ -19,13 +19,70 @@ import {
 ## Usage
 
 ```jsx
-<Form initialValues={{ vue: true }}>
-  <FieldGroup label="Check the frameworks you have already worked with">
-    <ConnectedField component={Checkbox} name="react" label="React" />
-    <ConnectedField component={Checkbox} label="Angular" name="angular" id="angular_custom_id" />
-    <ConnectedField component={Checkbox} name="vue" label="Vue" />
-  </FieldGroup>
-</Form>
+function() {
+  const FormChildren = ({ control, register }) => (
+    <FieldGroup label="Check the frameworks you have already worked with">
+      <Controller
+        name="react"
+        control={control}
+        render={({ onChange, value}) => (
+            <Field label="React">
+              <Checkbox
+                name="react"
+                onChange={e => onChange(!e.target.checked)}
+                checked={value}
+              />
+            </Field>
+          )
+         }
+      />
+      <Controller
+        name="angular"
+        control={control}
+        render={({ onChange, value}) => (
+            <Field label="Angular">
+              <Checkbox
+                name="angular"
+                onChange={e => onChange(!e.target.checked)}
+                checked={value}
+              />
+            </Field>
+          )
+         }
+      />
+      <Controller
+        name="vue"
+        control={control}
+        render={({ onChange, value}) => (
+            <Field label="Vue">
+              <Checkbox
+                name="vue"
+                onChange={e => onChange(!e.target.checked)}
+                checked={value}
+              />
+            </Field>
+          )
+         }
+      />
+    </FieldGroup>
+  )
+
+  return (
+    <HookForm
+      defaultValues={{ vue: true }}
+      schemaValidate={() =>
+        yup.object().shape({
+          react: yup.boolean().required().oneOf([true, false]),
+          angular: yup.boolean().required().oneOf([true, false]),
+          vue: yup.boolean().required().oneOf([true, false]),
+        })
+      }
+    >
+      <FormChildren />
+    </HookForm>
+  )
+}
+
 ```
 
 ## Standalone

diff --git a/docs/pages/components/date-picker.mdx b/docs/pages/components/date-picker.mdx
@@ -21,46 +21,81 @@ It is based on the [react-datepicker](https://github.com/Hacker0x01/react-datepi
 ## Simple use case
 
 ```jsx
-<Form initialValues={{ welcome: Date.now() }}>
-  <ConnectedField component={DatePicker} label="Date" name="welcome" />
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Date">
+      <DatePicker name="welcome" onChange={handleChange} value={value} />
+    </Field>
+  )
+}
 ```
 
 ## Pass props from the original library.
 
 ```jsx
-<Form initialValues={{ welcome2: Date.now() }}>
-  <ConnectedField
-    component={DatePicker}
-    dateFormat="MMM dd yyyy"
-    label="Date"
-    maxDate={new Date()}
-    name="welcome2"
-    popperProps={{ zIndex: 50 }}
-    yearDropdownItemNumber={30}
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Date">
+      <DatePicker
+        dateFormat="MMM dd yyyy"
+        name="welcome2"
+        maxDate={new Date()}
+        popperProps={{ zIndex: 50 }}
+        yearDropdownItemNumber={30}
+        onChange={handleChange}
+        value={value}
+      />
+    </Field>
+  )
+}
 ```
 
 ## Give an Icon
 
 ```jsx
-<Form initialValues={{ welcome3: Date.now() }}>
-  <ConnectedField
-    component={DatePicker}
-    icon={<DateIcon color="light.100" />}
-    label="Date"
-    name="welcome3"
-  />
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Date">
+      <DatePicker icon={<DateIcon color="light.100" />} name="welcome3" value={value} onChange={handleChange} />
+    </Field>
+  )
+}
 ```
 
 ## fr locale
 
 ```jsx
-<Form initialValues={{}}>
-  <ConnectedField component={DatePicker} label="Date" locale={dateFR} name="welcome4" />
-</Form>
+function () {
+  const [value, setValue] = useState(Date.now())
+
+  const handleChange = newValue => {
+    setValue(newValue)
+  }
+
+  return (
+    <Field label="Date">
+      <DatePicker locale={dateFR} name="welcome4" value={value} onChange={handleChange} />
+    </Field>
+  )
+}
 ```
 
 ## Properties