Fix form-field for new Storybook format (#12756)

* form-field

* add proptype

ui/components/ui/form-field/README.mdx

@@ -0,0 +1,31 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import FormField from '.';
+
+# Form Field
+
+Various data fields available for forms and pages.
+
+<Canvas>
+  <Story id="ui-components-ui-form-field-form-field-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={FormField} />
+
+### Title detail
+
+Show form fields with title detail on the left of the title
+
+<Canvas>
+  <Story id="ui-components-ui-form-field-form-field-stories-js--form-field-with-title-detail" />
+</Canvas>
+
+### Error
+
+Show form fields with error state
+
+<Canvas>
+  <Story id="ui-components-ui-form-field-form-field-stories-js--form-field-with-error" />
+</Canvas>

ui/components/ui/form-field/form-field.js

@@ -113,19 +113,61 @@ export default function FormField({
 }
 
 FormField.propTypes = {
+  /**
+   * Identifier for testing purpose
+   */
   dataTestId: PropTypes.string,
+  /**
+   * Form Fields Title
+   */
   titleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Show unit (eg. ETH)
+   */
   titleUnit: PropTypes.string,
+  /**
+   * Add Tooltip and text content
+   */
   tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Show content (text, image, component) in title
+   */
   titleDetail: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Show error message
+   */
   error: PropTypes.string,
+  /**
+   * Handler when fields change
+   */
   onChange: PropTypes.func,
+  /**
+   * Field value
+   */
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Show detail text if field mode is numeric
+   */
   detailText: PropTypes.string,
+  /**
+   * Set autofocus on render
+   */
   autoFocus: PropTypes.bool,
+  /**
+   * Set numeric mode, the default is text
+   */
   numeric: PropTypes.bool,
+  /**
+   * Set password mode
+   */
   password: PropTypes.bool,
+  /**
+   * Allow decimals on the field
+   */
   allowDecimals: PropTypes.bool,
+  /**
+   * Check if the form disabled
+   */
   disabled: PropTypes.bool,
 };
 

ui/components/ui/form-field/form-field.stories.js

@@ -1,33 +1,54 @@
 /* eslint-disable react/prop-types */
 
 import React, { useState } from 'react';
-import { select } from '@storybook/addon-knobs';
+import README from './README.mdx';
 import FormField from '.';
 
 export default {
   title: 'Components/UI/FormField',
   id: __filename,
+  component: FormField,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    titleText: { control: 'text' },
+    titleUnit: { control: 'text' },
+    tooltipText: { control: 'text' },
+    titleDetail: {
+      options: ['text', 'button', 'checkmark'],
+      control: { type: 'select' },
+    },
+    error: { control: 'text' },
+    onChange: { action: 'onChange' },
+    value: { control: 'number' },
+    detailText: { control: 'text' },
+    autoFocus: { control: 'boolean' },
+    numeric: { control: 'boolean' },
+    password: { control: 'boolean' },
+    allowDecimals: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
 };
 
-export const DefaultStory = ({ ...props }) => {
-  const options = { text: false, numeric: true };
+export const DefaultStory = (args) => {
   const [value, setValue] = useState('');
   return (
     <div style={{ width: '600px' }}>
-      <FormField
-        onChange={setValue}
-        titleText="Title"
-        value={value}
-        numeric={select('text or numeric', options, options.text)}
-        {...props}
-      />
+      <FormField {...args} onChange={setValue} value={value} />
     </div>
   );
 };
 
 DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  numeric: false,
+  titleText: 'Title',
+};
 
-export const FormFieldWithTitleDetail = () => {
+export const FormFieldWithTitleDetail = (args) => {
   const [clicked, setClicked] = useState(false);
   const detailOptions = {
     text: <div style={{ fontSize: '12px' }}>Detail</div>,
@@ -41,18 +62,20 @@ export const FormFieldWithTitleDetail = () => {
     ),
     checkmark: <i className="fas fa-check" />,
   };
-  return (
-    <DefaultStory
-      titleText="Title"
-      titleDetail={
-        detailOptions[
-          select('detailType', ['text', 'button', 'checkmark'], 'text')
-        ]
-      }
-    />
-  );
+
+  return <FormField {...args} titleDetail={detailOptions[args.titleDetail]} />;
 };
 
-export const FormFieldWithError = () => {
-  return <DefaultStory titleText="Title" error="Incorrect Format" />;
+FormFieldWithTitleDetail.args = {
+  titleText: 'Title',
+  titleDetail: 'text',
+};
+
+export const FormFieldWithError = (args) => {
+  return <FormField {...args} />;
+};
+
+FormFieldWithError.args = {
+  titleText: 'Title',
+  error: 'Incorrect Format',
 };