form-fields.stories.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
  1. import React from 'react';
  2. import {action} from '@storybook/addon-actions';
  3. import {number, boolean} from '@storybook/addon-knobs';
  4. import {withInfo} from '@storybook/addon-info';
  5. import {Panel} from 'app/components/panels';
  6. import DatePickerField from 'app/views/settings/components/forms/datePickerField';
  7. import Form from 'app/views/settings/components/forms/form';
  8. import FormField from 'app/views/settings/components/forms/formField';
  9. import NewBooleanField from 'app/views/settings/components/forms/booleanField';
  10. import RadioField from 'app/views/settings/components/forms/radioField';
  11. import RadioGroup from 'app/views/settings/components/forms/controls/radioGroup';
  12. import RangeSlider from 'app/views/settings/components/forms/controls/rangeSlider';
  13. import SelectField from 'app/views/settings/components/forms/selectField';
  14. import Switch from 'app/components/switch';
  15. import TextCopyInput from 'app/views/settings/components/forms/textCopyInput';
  16. import TextField from 'app/views/settings/components/forms/textField';
  17. import TextareaField from 'app/views/settings/components/forms/textareaField';
  18. export default {
  19. title: 'Forms/Fields',
  20. };
  21. export const _TextField = withInfo({
  22. text: 'Simple text input',
  23. propTablesExclude: [Form],
  24. })(() => (
  25. <Panel>
  26. <Form initialData={{context: {location: 'cat'}}}>
  27. <TextField
  28. name="simpletextfieldvalue"
  29. label="Simple Text Field with Value"
  30. placeholder="Simple Text Field"
  31. defaultValue="With a value present"
  32. />
  33. <TextField
  34. name="simpletextfieldplaceholder"
  35. label="Simple Text Field with Placeholder"
  36. placeholder="This is placeholder text"
  37. />
  38. <TextField
  39. name="simpletextfieldvaluedisabled"
  40. label="Disabled - Simple Text Field with Value"
  41. placeholder="Simple Text Field"
  42. defaultValue="With a value present"
  43. disabled
  44. />
  45. <TextField
  46. name="simpletextfieldplaceholderdisabled"
  47. label="Disabled - Simple Text Field with Placeholder"
  48. placeholder="This is placeholder text in a disabled field"
  49. disabled
  50. />
  51. <TextField
  52. name="textfieldwithreturnsubmit"
  53. label="Text Field With Return Submit"
  54. placeholder="Type here to show the return button"
  55. showReturnButton
  56. />
  57. <TextField
  58. name="textfieldflexiblecontrol"
  59. label="Text Field With Flexible Control State Size"
  60. placeholder="Type text and then delete it"
  61. required
  62. flexibleControlStateSize
  63. />
  64. <TextField
  65. name="textfielddisabled"
  66. label="Text field with disabled reason"
  67. placeholder="I am disabled"
  68. disabled
  69. disabledReason="This is the reason this field is disabled"
  70. />
  71. </Form>
  72. </Panel>
  73. ));
  74. _TextField.story = {
  75. name: 'TextField',
  76. };
  77. export const _TextareaField = withInfo({
  78. text: 'Textarea input',
  79. propTablesExclude: [Form],
  80. })(() => (
  81. <Panel>
  82. <Form initialData={{context: {location: 'cat'}}}>
  83. <TextareaField
  84. name="simpletextfieldvalue"
  85. label="Simple Textarea Field with Value"
  86. help="Additional help text"
  87. placeholder="Simple Textarea Field"
  88. defaultValue="With a value present"
  89. />
  90. <TextareaField
  91. name="simpletextfieldautosize"
  92. autosize={boolean('autosize', true)}
  93. label="Textarea field with autosize"
  94. rows={number('Number of rows', 2)}
  95. placeholder="Use knobs to control rows and autosize setting"
  96. />
  97. <TextareaField
  98. name="simpletextfieldvaluedisabled"
  99. label="Disabled - Simple Textarea Field with Value"
  100. placeholder="Simple Textarea Field"
  101. defaultValue="With a value present"
  102. disabled
  103. />
  104. <TextareaField
  105. name="simpletextfieldplaceholderdisabled"
  106. label="Disabled - Simple Textarea Field with Placeholder"
  107. placeholder="This is placeholder text in a disabled field"
  108. disabled
  109. />
  110. <TextareaField
  111. name="textfieldwithreturnsubmit"
  112. label="Textarea Field With Return Submit"
  113. placeholder="Type here to show the return button"
  114. showReturnButton
  115. />
  116. <TextareaField
  117. name="textfieldflexiblecontrol"
  118. label="Textarea Field With Flexible Control State Size"
  119. placeholder="Type text and then delete it"
  120. required
  121. flexibleControlStateSize
  122. />
  123. <TextareaField
  124. name="textfielddisabled"
  125. label="Textarea Field with disabled reason"
  126. placeholder="I am disabled"
  127. disabled
  128. disabledReason="This is the reason this field is disabled"
  129. />
  130. <TextareaField
  131. name="textareafielderror"
  132. label="Textarea Field with error"
  133. placeholder="I have an error"
  134. error="An error has occurred"
  135. />
  136. </Form>
  137. </Panel>
  138. ));
  139. _TextareaField.story = {
  140. name: 'TextareaField',
  141. };
  142. export const __BooleanField = withInfo({
  143. text: 'Boolean field (i.e. checkbox)',
  144. propTablesExclude: [Form],
  145. })(() => (
  146. <Form>
  147. <NewBooleanField name="field" label="New Boolean Field" />
  148. </Form>
  149. ));
  150. __BooleanField.story = {
  151. name: 'BooleanField',
  152. };
  153. export const _DatePickerField = withInfo({
  154. text: 'Date picker field with a popup calendar picker (for a single date)',
  155. propTablesExclude: [Form],
  156. })(() => (
  157. <Form>
  158. <DatePickerField name="field" label="Date Picker Field" />
  159. </Form>
  160. ));
  161. _DatePickerField.story = {
  162. name: 'DatePickerField',
  163. };
  164. export const _RadioField = withInfo({
  165. text: 'Radio field',
  166. propTablesExclude: [Form],
  167. })(() => (
  168. <Form>
  169. <RadioField
  170. name="radio"
  171. label="Radio Field"
  172. choices={[
  173. ['choice_one', 'Choice One'],
  174. ['choice_two', 'Choice Two'],
  175. ['choice_three', 'Choice Three'],
  176. ]}
  177. />
  178. </Form>
  179. ));
  180. _RadioField.story = {
  181. name: 'RadioField',
  182. };
  183. export const _SelectField = withInfo({
  184. text: 'Select Field',
  185. propTablesExclude: [Form],
  186. })(() => (
  187. <Form>
  188. <SelectField
  189. name="select"
  190. label="Select Field"
  191. choices={[
  192. ['choice_one', 'Choice One'],
  193. ['choice_two', 'Choice Two'],
  194. ['choice_three', 'Choice Three'],
  195. ]}
  196. />
  197. </Form>
  198. ));
  199. _SelectField.story = {
  200. name: 'SelectField',
  201. };
  202. export const SelectFieldMultiple = withInfo({
  203. text: 'Select Control w/ multiple',
  204. propTablesExclude: [Form],
  205. })(() => (
  206. <Form>
  207. <SelectField
  208. name="select"
  209. label="Multi Select"
  210. multiple
  211. choices={[
  212. ['choice_one', 'Choice One'],
  213. ['choice_two', 'Choice Two'],
  214. ['choice_three', 'Choice Three'],
  215. ]}
  216. />
  217. </Form>
  218. ));
  219. SelectFieldMultiple.story = {
  220. name: 'SelectField multiple',
  221. };
  222. export const NonInlineField = withInfo({
  223. text: 'Radio Group used w/ FormField',
  224. propTablesExclude: [Form],
  225. })(() => (
  226. <Form>
  227. <FormField name="radio" label="Radio Field" inline={false}>
  228. {({value, label, onChange}) => (
  229. <RadioGroup
  230. onChange={onChange}
  231. label={label}
  232. value={value}
  233. choices={[
  234. ['choice_one', 'Choice One', 'Description for Choice One'],
  235. ['choice_two', 'Choice Two', 'Description for Choice Two'],
  236. ['choice_three', 'Choice Three'],
  237. ]}
  238. />
  239. )}
  240. </FormField>
  241. </Form>
  242. ));
  243. NonInlineField.story = {
  244. name: 'Non-inline field',
  245. };
  246. export const _RangeSlider = withInfo('Range slider')(() => (
  247. <div style={{backgroundColor: '#fff', padding: 20}}>
  248. <RangeSlider
  249. name="rangeField"
  250. min={1}
  251. max={10}
  252. step={1}
  253. value={1}
  254. formatLabel={value => {
  255. return `${value} Toaster Strudle${value > 1 ? 's' : ''}`;
  256. }}
  257. />
  258. </div>
  259. ));
  260. _RangeSlider.story = {
  261. name: 'RangeSlider',
  262. };
  263. export const WithoutAParentForm = withInfo(
  264. 'New form fields used without having a parent Form'
  265. )(() => {
  266. return (
  267. <div>
  268. <TextField
  269. name="simpletextfield"
  270. label="Simple Text Field"
  271. placeholder="Simple Text Field"
  272. onChange={action('TextField onChange')}
  273. />
  274. <NewBooleanField
  275. name="field"
  276. label="New Boolean Field"
  277. onChange={action('BooleanField onChange')}
  278. />
  279. <RadioField
  280. name="radio"
  281. label="Radio Field"
  282. onChange={action('RadioField onChange')}
  283. choices={[
  284. ['choice_one', 'Choice One'],
  285. ['choice_two', 'Choice Two'],
  286. ['choice_three', 'Choice Three'],
  287. ]}
  288. />
  289. <Switch id="test" />
  290. </div>
  291. );
  292. });
  293. WithoutAParentForm.story = {
  294. name: 'Without a parent Form',
  295. };
  296. export const __TextCopyInput = withInfo('Description')(() => (
  297. <TextCopyInput onCopy={action('Copied!')}>Value to be copied </TextCopyInput>
  298. ));
  299. __TextCopyInput.story = {
  300. name: 'TextCopyInput',
  301. };