Refactor atom input component 1

components/atom/helpText/demo/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@s-ui/react-atom-checkbox": "2",
     "@s-ui/react-atom-icon": "1",
-    "@s-ui/react-atom-input": "5",
+    "@s-ui/react-atom-input": "5.22.0-beta.0",
     "@s-ui/react-atom-label": "1",
     "@s-ui/react-atom-textarea": "2"
   }

components/atom/input/demo/articles/ArticleAddonAndIcon.js

@@ -0,0 +1,175 @@
+import {useState} from 'react'
+
+import PropTypes from 'prop-types'
+
+import {
+  AntDesignIcon,
+  Article,
+  Cell,
+  Code,
+  Grid,
+  H2,
+  Input,
+  ListItem,
+  Paragraph,
+  RadioButton,
+  RadioButtonGroup,
+  UnorderedList
+} from '@s-ui/documentation-library'
+
+import AtomInput from '../../src/index.js'
+
+const ArticleAddonAndIcon = ({className}) => {
+  const [state, setState] = useState({})
+  const {icon, iconValue, rightAddon, leftAddon} = state
+  const setStatus = (newState = {}) => setState({...state, ...newState})
+  const valueIcon = iconValue ? (
+    <AntDesignIcon icon={iconValue} style={{color: 'currentColor'}} />
+  ) : null
+  return (
+    <Article className={className}>
+      <H2>Addon and Icon</H2>
+      <Paragraph>
+        Input offers the possibility to add icons and contents on its left or
+        right positions
+      </Paragraph>
+      <UnorderedList>
+        <ListItem>
+          <Code>leftAddon</Code> and <Code>rightAddon</Code>: use it as a label
+          for the input field
+        </ListItem>
+        <ListItem>
+          <Code>leftIcon</Code> and <Code>rightIcon</Code>: use it as a valid
+          symbol for the field
+        </ListItem>
+      </UnorderedList>
+      <Paragraph>This field props can be combined all together.</Paragraph>
+      <Grid cols={2} gutter={[8, 8]}>
+        <Cell span={2}>
+          <AtomInput
+            leftIcon={icon === 'leftIcon' ? valueIcon : undefined}
+            rightIcon={icon === 'rightIcon' ? valueIcon : undefined}
+            leftAddon={leftAddon}
+            rightAddon={rightAddon}
+          />
+        </Cell>
+        <Cell>
+          <RadioButtonGroup
+            onChange={(event, value) => {
+              setStatus({icon: value})
+            }}
+            fullWidth
+          >
+            <RadioButton value="leftIcon" label="leftIcon" />
+            <RadioButton value="rightIcon" label="rightIcon" />
+          </RadioButtonGroup>
+        </Cell>
+        <Cell>
+          <RadioButtonGroup
+            onChange={(event, value) =>
+              setStatus({
+                iconValue: value
+              })
+            }
+            fullWidth
+          >
+            <RadioButton
+              value="AiFillFire"
+              label={
+                <AntDesignIcon
+                  icon="AiFillFire"
+                  style={{color: 'currentColor'}}
+                />
+              }
+            />
+            <RadioButton
+              value="AiOutlineSketch"
+              label={
+                <AntDesignIcon
+                  icon="AiOutlineSketch"
+                  style={{color: 'currentColor'}}
+                />
+              }
+            />
+            <RadioButton
+              value="AiOutlineInfoCircle"
+              label={
+                <AntDesignIcon
+                  icon="AiOutlineInfoCircle"
+                  style={{color: 'currentColor'}}
+                />
+              }
+            />
+            <RadioButton
+              value="AiTwotoneSkin"
+              label={
+                <AntDesignIcon
+                  icon="AiTwotoneSkin"
+                  style={{color: 'currentColor'}}
+                />
+              }
+            />
+            <RadioButton
+              value="AiOutlineExclamationCircle"
+              label={
+                <AntDesignIcon
+                  icon="AiOutlineExclamationCircle"
+                  style={{color: 'currentColor'}}
+                />
+              }
+            />
+            <RadioButton
+              value="AiOutlineCar"
+              label={
+                <AntDesignIcon
+                  icon="AiOutlineCar"
+                  style={{color: 'currentColor'}}
+                />
+              }
+            />
+            <RadioButton
+              value="AiOutlineAppstore"
+              label={
+                <AntDesignIcon
+                  icon="AiOutlineAppstore"
+                  style={{color: 'currentColor'}}
+                />
+              }
+            />
+            <RadioButton
+              value="AiFillTrophy"
+              label={
+                <AntDesignIcon
+                  icon="AiFillTrophy"
+                  style={{color: 'currentColor'}}
+                />
+              }
+            />
+          </RadioButtonGroup>
+        </Cell>
+        <Cell>
+          <Input
+            fullWidth
+            placeholder="leftAddon text"
+            onChange={event => setStatus({leftAddon: event.target.value})}
+          />
+        </Cell>
+        <Cell>
+          <Input
+            fullWidth
+            placeholder="rightAddon text"
+            onChange={event => setStatus({rightAddon: event.target.value})}
+          />
+        </Cell>
+      </Grid>
+    </Article>
+  )
+}
+
+ArticleAddonAndIcon.propTypes = {
+  className: PropTypes.string
+}
+
+ArticleAddonAndIcon.displayName = 'ArticleAddonAndIcon'
+
+export default ArticleAddonAndIcon

components/atom/input/demo/articles/ArticleBorderless.js

@@ -0,0 +1,58 @@
+import {useState} from 'react'
+
+import PropTypes from 'prop-types'
+
+import {
+  Article,
+  Cell,
+  Code,
+  Grid,
+  H2,
+  Paragraph,
+  RadioButton
+} from '@s-ui/documentation-library'
+
+import AtomInput from '../../src/index.js'
+
+const ArticleBorderless = ({className}) => {
+  const [border, setBorder] = useState(true)
+  const [mode, setMode] = useState('light')
+  return (
+    <Article mode={mode} className={className}>
+      <H2>No border</H2>
+      <Paragraph>
+        The border of the input can be removed using the boolean prop{' '}
+        <Code>noBorder</Code>
+      </Paragraph>
+      <Grid cols={2} gutter={[8, 8]}>
+        <Cell>
+          <RadioButton
+            fullWidth
+            value={border}
+            label="hide border"
+            onClick={(event, value) => setBorder(!value)}
+          />
+        </Cell>
+        <Cell>
+          <RadioButton
+            fullWidth
+            value={mode}
+            label="set dark"
+            onClick={(event, value) => setMode(value ? 'dark' : 'light')}
+          />
+        </Cell>
+        <Cell span={2}>
+          <AtomInput placeholder="click to interact" noBorder={!border} />
+        </Cell>
+      </Grid>
+    </Article>
+  )
+}
+
+ArticleBorderless.propTypes = {
+  className: PropTypes.string
+}
+
+ArticleBorderless.displayName = 'ArticleBorderless'
+
+export default ArticleBorderless

components/atom/input/demo/articles/ArticleDefault.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types'
+
+import {Article, H2, Paragraph} from '@s-ui/documentation-library'
+
+import AtomInput from '../../src/index.js'
+
+const ArticleDefault = ({className}) => (
+  <Article className={className}>
+    <H2>Default</H2>
+    <Paragraph>
+      By default, the element gets the following look and feel.
+    </Paragraph>
+    <div>
+      <AtomInput />
+    </div>
+  </Article>
+)
+
+ArticleDefault.propTypes = {
+  className: PropTypes.string
+}
+
+ArticleDefault.displayName = 'ArticleDefault'
+
+export default ArticleDefault

components/atom/input/demo/articles/ArticleDisabledReadOnly.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types'
+
+import {
+  Article,
+  Cell,
+  Code,
+  Grid,
+  H2,
+  Label,
+  Paragraph
+} from '@s-ui/documentation-library'
+
+import AtomInput from '../../src/index.js'
+
+const ArticleDisabledReadOnly = ({className}) => {
+  return (
+    <Article className={className}>
+      <H2>Disable and ReadOnly</H2>
+      <Paragraph>
+        Input provides two different modes that blocks the component behavior
+        the difference between them is the appearance.
+      </Paragraph>
+      <Paragraph>
+        The developer can disable the component using the <Code>disabled</Code>{' '}
+        boolean prop. It can be blocked also using the <Code>readOnly</Code>{' '}
+        boolean propm, but it will look like the default input.
+      </Paragraph>
+      <Grid gutter={[8, 8]} cols={2}>
+        <Cell>
+          <Label>disabed</Label>
+        </Cell>
+        <Cell>
+          <Label>readOnly</Label>
+        </Cell>
+        <Cell>
+          <AtomInput value="disabled" disabled />
+        </Cell>
+        <Cell>
+          <AtomInput value="readOnly" readOnly />
+        </Cell>
+      </Grid>
+    </Article>
+  )
+}
+
+ArticleDisabledReadOnly.propTypes = {
+  className: PropTypes.string
+}
+
+ArticleDisabledReadOnly.displayName = 'ArticleDisabledReadOnly'
+
+export default ArticleDisabledReadOnly

components/atom/input/demo/articles/ArticleErrorStatus.js

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types'
+
+import {
+  Article,
+  Cell,
+  Code,
+  Grid,
+  H2,
+  Label,
+  Paragraph
+} from '@s-ui/documentation-library'
+
+import AtomInput from '../../src/index.js'
+
+const ArticleErrorStatus = ({className}) => {
+  return (
+    <Article className={className}>
+      <H2>Error State</H2>
+      <Paragraph>
+        Input can show its error mode using the boolean prop{' '}
+        <Code>errorStatus</Code>
+      </Paragraph>
+      <Grid cols={3} gutter={[8, 8]}>
+        <Cell>
+          <Label>true</Label>
+        </Cell>
+        <Cell>
+          <Label>undefined</Label>
+        </Cell>
+        <Cell>
+          <Label>false</Label>
+        </Cell>
+        <Cell>
+          <AtomInput errorState />
+        </Cell>
+        <Cell>
+          <AtomInput errorState={undefined} />
+        </Cell>
+        <Cell>
+          <AtomInput errorState={false} />
+        </Cell>
+      </Grid>
+    </Article>
+  )
+}
+
+ArticleErrorStatus.propTypes = {
+  className: PropTypes.string
+}
+
+ArticleErrorStatus.displayName = 'ArticleErrorStatus'
+
+export default ArticleErrorStatus