From b1e9bb2249412005b0f036e915b22158e29cb586 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Le=20Ralec?=
Date: Thu, 16 Dec 2021 15:57:44 +0100
Subject: [PATCH 01/32] chore: refactoring field
---
docs/pages/components/field-better.mdx | 269 +++++++++++++++++++++++++
docs/pages/components/field.mdx | 39 +---
packages/ConnectedField/package.json | 2 +-
packages/Field/index.tsx | 144 +++----------
packages/Field/styles.ts | 5 +-
packages/Field/utils.ts | 27 +--
6 files changed, 314 insertions(+), 172 deletions(-)
create mode 100644 docs/pages/components/field-better.mdx
diff --git a/docs/pages/components/field-better.mdx b/docs/pages/components/field-better.mdx
new file mode 100644
index 0000000000..be3541ac32
--- /dev/null
+++ b/docs/pages/components/field-better.mdx
@@ -0,0 +1,269 @@
+export { getStaticProps } from '../../getStaticProps'
+
+import {
+ component,
+ dependencies,
+ name,
+ peerDependencies,
+ version,
+} from '@welcome-ui/field/package.json'
+
+# Field
+
+
+
+We recommend using [Final Form](https://github.com/final-form/react-final-form), [Redux Form](https://github.com/erikras/redux-form) or [Formik](https://github.com/jaredpalmer/formik) with these components. If so, use `ConnectedField` for your fields (as in the examples below). The examples below give you an overview of common props (e.g. `size`, `disable`, `required` etc.)
+
+You can find props for each field component in the other `Forms` pages.
+
+## Install and import
+
+
+
+## Classic
+
+```jsx
+
+
+
+
+
+
+
+
+
+
+
+
+Invalid field
}>
+
+
+
+
+
+```
+
+```jsx
+function () {
+ const ref = React.useRef(null)
+
+ const handleClick = () => {
+ ref.current.focus()
+ }
+
+ return (
+ <>
+
+
+
+
+ >
+ )
+}
+```
+
+```jsx
+function () {
+ const [state, setState] = React.useState('')
+
+ const handleChange = (event) => {
+ setState(event.target.value + 'a')
+ }
+
+ return (
+
+
+
+ )
+}
+```
+
+```jsx
+function () {
+ const [state, setState] = React.useState(false)
+
+ const handleChange = (event) => {
+ setState(s => !s)
+ }
+
+ return (
+
+
+
+ )
+}
+```
+
+## Disabled
+
+```jsx
+
+```
+
+## Variants
+
+```jsx
+
+```
+
+## Disabled
+
+```jsx
+
+```
+
+## Required
+
+```jsx
+
+```
+
+## Refs
+
+You can create a `ref`\* and pass it to a component to access the underlying DOM element.
+
+Note: `ref`s can be created with either `React.createRef()` or `React.useRef(null)` for functional components or a callback ref if using a React `class`.
+
+```jsx
+function() {
+ const connectedInputRef = createRef()
+ const normalInputRef = useRef(null)
+ const nakedInputRef = useRef(null)
+ const fileUploadRef = useRef(null)
+ const buttonRef = useRef(null)
+ const linkRef = useRef(null)
+
+ const handleConnectedClick = () => {
+ connectedInputRef.current.focus()
+ }
+
+ const handleNormalClick = () => {
+ normalInputRef.current.focus()
+ }
+
+ const handleNakedClick = () => {
+ nakedInputRef.current.focus()
+ }
+
+ const handleFileUploadClick = () => {
+ fileUploadRef.current.focus()
+ }
+
+ const handleButtonClick = () => {
+ console.debug('