@salutejs/plasma-new-hope 0.149.0-canary.1418.10942866373.0 → 0.149.0-canary.1421.10953636107.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (241) hide show
  1. package/cjs/components/DatePicker/RangeDate/RangeDate.css +2 -0
  2. package/cjs/components/DatePicker/RangeDate/RangeDate.js +39 -2
  3. package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  4. package/cjs/components/DatePicker/SingleDate/SingleDate.css +2 -0
  5. package/cjs/components/DatePicker/SingleDate/SingleDate.js +26 -2
  6. package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
  7. package/cjs/components/DatePicker/utils/setInitValue.js +12 -0
  8. package/cjs/components/DatePicker/utils/setInitValue.js.map +1 -0
  9. package/cjs/components/Slider/Slider.css +2 -0
  10. package/cjs/components/Slider/Slider.js +19 -6
  11. package/cjs/components/Slider/Slider.js.map +1 -1
  12. package/cjs/components/Slider/components/Double/Double.css +2 -0
  13. package/cjs/components/Slider/components/Double/Double.js +38 -2
  14. package/cjs/components/Slider/components/Double/Double.js.map +1 -1
  15. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +56 -0
  16. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js.map +1 -0
  17. package/cjs/components/Slider/components/Single/Single.css +2 -0
  18. package/cjs/components/Slider/components/Single/Single.js +35 -12
  19. package/cjs/components/Slider/components/Single/Single.js.map +1 -1
  20. package/cjs/components/Slider/utils/index.js +6 -0
  21. package/cjs/components/Slider/utils/index.js.map +1 -1
  22. package/cjs/components/TextArea/TextArea.js +3 -2
  23. package/cjs/components/TextArea/TextArea.js.map +1 -1
  24. package/cjs/components/TextField/TextField.js +1 -3
  25. package/cjs/components/TextField/TextField.js.map +1 -1
  26. package/cjs/hooks/useForm.js +131 -0
  27. package/cjs/hooks/useForm.js.map +1 -0
  28. package/cjs/index.css +2 -0
  29. package/cjs/index.js +5 -2
  30. package/cjs/index.js.map +1 -1
  31. package/cjs/utils/index.js.map +1 -1
  32. package/cjs/utils/inputHidden.js +15 -0
  33. package/cjs/utils/inputHidden.js.map +1 -0
  34. package/cjs/utils/inputHidden_1ciypqb.css +1 -0
  35. package/cjs/utils/setRefList.js +28 -0
  36. package/cjs/utils/setRefList.js.map +1 -0
  37. package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +39 -2
  38. package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +26 -2
  39. package/emotion/cjs/components/DatePicker/utils/setInitValue.js +11 -0
  40. package/emotion/cjs/components/Slider/Slider.js +15 -6
  41. package/emotion/cjs/components/Slider/components/Double/Double.js +38 -2
  42. package/{styled-components/cjs/components/Mask/Mask.js → emotion/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js} +43 -38
  43. package/emotion/cjs/components/Slider/components/Single/Single.js +30 -7
  44. package/emotion/cjs/components/Slider/components/index.js +11 -0
  45. package/emotion/cjs/components/Slider/utils/index.js +6 -1
  46. package/emotion/cjs/components/TextArea/TextArea.js +3 -3
  47. package/emotion/cjs/components/TextField/TextField.js +2 -4
  48. package/emotion/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx +245 -0
  49. package/emotion/cjs/examples/plasma_web/components/Form/Form.stories.tsx +245 -0
  50. package/emotion/cjs/hooks/index.js +8 -1
  51. package/emotion/cjs/hooks/useForm.js +137 -0
  52. package/emotion/cjs/index.js +0 -11
  53. package/emotion/cjs/utils/index.js +15 -0
  54. package/emotion/cjs/utils/inputHidden.js +10 -0
  55. package/emotion/cjs/utils/setRefList.js +27 -0
  56. package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +39 -2
  57. package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +26 -2
  58. package/emotion/es/components/DatePicker/utils/setInitValue.js +5 -0
  59. package/emotion/es/components/Slider/Slider.js +16 -6
  60. package/emotion/es/components/Slider/components/Double/Double.js +39 -3
  61. package/emotion/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +51 -0
  62. package/emotion/es/components/Slider/components/Single/Single.js +31 -8
  63. package/emotion/es/components/Slider/components/index.js +1 -0
  64. package/emotion/es/components/Slider/utils/index.js +5 -0
  65. package/emotion/es/components/TextArea/TextArea.js +4 -4
  66. package/emotion/es/components/TextField/TextField.js +2 -4
  67. package/emotion/es/examples/plasma_b2c/components/Form/Form.stories.tsx +245 -0
  68. package/emotion/es/examples/plasma_web/components/Form/Form.stories.tsx +245 -0
  69. package/emotion/es/hooks/index.js +2 -1
  70. package/emotion/es/hooks/useForm.js +128 -0
  71. package/emotion/es/index.js +1 -2
  72. package/emotion/es/utils/index.js +1 -0
  73. package/emotion/es/utils/inputHidden.js +4 -0
  74. package/emotion/es/utils/setRefList.js +20 -0
  75. package/es/components/DatePicker/RangeDate/RangeDate.css +2 -0
  76. package/es/components/DatePicker/RangeDate/RangeDate.js +39 -2
  77. package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  78. package/es/components/DatePicker/SingleDate/SingleDate.css +2 -0
  79. package/es/components/DatePicker/SingleDate/SingleDate.js +26 -2
  80. package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
  81. package/es/components/DatePicker/utils/setInitValue.js +8 -0
  82. package/es/components/DatePicker/utils/setInitValue.js.map +1 -0
  83. package/es/components/Slider/Slider.css +2 -0
  84. package/es/components/Slider/Slider.js +20 -7
  85. package/es/components/Slider/Slider.js.map +1 -1
  86. package/es/components/Slider/components/Double/Double.css +2 -0
  87. package/es/components/Slider/components/Double/Double.js +39 -3
  88. package/es/components/Slider/components/Double/Double.js.map +1 -1
  89. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +52 -0
  90. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js.map +1 -0
  91. package/es/components/Slider/components/Single/Single.css +2 -0
  92. package/es/components/Slider/components/Single/Single.js +31 -8
  93. package/es/components/Slider/components/Single/Single.js.map +1 -1
  94. package/es/components/Slider/utils/index.js +6 -1
  95. package/es/components/Slider/utils/index.js.map +1 -1
  96. package/es/components/TextArea/TextArea.js +3 -2
  97. package/es/components/TextArea/TextArea.js.map +1 -1
  98. package/es/components/TextField/TextField.js +1 -3
  99. package/es/components/TextField/TextField.js.map +1 -1
  100. package/es/hooks/useForm.js +127 -0
  101. package/es/hooks/useForm.js.map +1 -0
  102. package/es/index.css +2 -0
  103. package/es/index.js +2 -1
  104. package/es/index.js.map +1 -1
  105. package/es/utils/index.js.map +1 -1
  106. package/es/utils/inputHidden.js +11 -0
  107. package/es/utils/inputHidden.js.map +1 -0
  108. package/es/utils/inputHidden_1ciypqb.css +1 -0
  109. package/es/utils/setRefList.js +23 -0
  110. package/es/utils/setRefList.js.map +1 -0
  111. package/package.json +3 -4
  112. package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +39 -2
  113. package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +26 -2
  114. package/styled-components/cjs/components/DatePicker/utils/setInitValue.js +11 -0
  115. package/styled-components/cjs/components/Slider/Slider.js +15 -6
  116. package/styled-components/cjs/components/Slider/components/Double/Double.js +38 -2
  117. package/{emotion/cjs/components/Mask/Mask.js → styled-components/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js} +43 -38
  118. package/styled-components/cjs/components/Slider/components/Single/Single.js +30 -7
  119. package/styled-components/cjs/components/Slider/components/index.js +11 -0
  120. package/styled-components/cjs/components/Slider/utils/index.js +6 -1
  121. package/styled-components/cjs/components/TextArea/TextArea.js +2 -2
  122. package/styled-components/cjs/components/TextField/TextField.js +1 -3
  123. package/styled-components/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx +245 -0
  124. package/styled-components/cjs/examples/plasma_web/components/Form/Form.stories.tsx +245 -0
  125. package/styled-components/cjs/hooks/index.js +8 -1
  126. package/styled-components/cjs/hooks/useForm.js +137 -0
  127. package/styled-components/cjs/index.js +0 -11
  128. package/styled-components/cjs/utils/index.js +15 -0
  129. package/styled-components/cjs/utils/inputHidden.js +10 -0
  130. package/styled-components/cjs/utils/setRefList.js +27 -0
  131. package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +39 -2
  132. package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +26 -2
  133. package/styled-components/es/components/DatePicker/utils/setInitValue.js +5 -0
  134. package/styled-components/es/components/Slider/Slider.js +16 -6
  135. package/styled-components/es/components/Slider/components/Double/Double.js +39 -3
  136. package/styled-components/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +51 -0
  137. package/styled-components/es/components/Slider/components/Single/Single.js +31 -8
  138. package/styled-components/es/components/Slider/components/index.js +1 -0
  139. package/styled-components/es/components/Slider/utils/index.js +5 -0
  140. package/styled-components/es/components/TextArea/TextArea.js +3 -3
  141. package/styled-components/es/components/TextField/TextField.js +1 -3
  142. package/styled-components/es/examples/plasma_b2c/components/Form/Form.stories.tsx +245 -0
  143. package/styled-components/es/examples/plasma_web/components/Form/Form.stories.tsx +245 -0
  144. package/styled-components/es/hooks/index.js +2 -1
  145. package/styled-components/es/hooks/useForm.js +128 -0
  146. package/styled-components/es/index.js +1 -2
  147. package/styled-components/es/utils/index.js +1 -0
  148. package/styled-components/es/utils/inputHidden.js +4 -0
  149. package/styled-components/es/utils/setRefList.js +20 -0
  150. package/types/components/DatePicker/RangeDate/RangeDate.d.ts +2 -0
  151. package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
  152. package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts +4 -0
  153. package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts.map +1 -1
  154. package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
  155. package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts +4 -0
  156. package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts.map +1 -1
  157. package/types/components/DatePicker/utils/setInitValue.d.ts +2 -0
  158. package/types/components/DatePicker/utils/setInitValue.d.ts.map +1 -0
  159. package/types/components/Slider/Slider.d.ts.map +1 -1
  160. package/types/components/Slider/Slider.types.d.ts +2 -2
  161. package/types/components/Slider/Slider.types.d.ts.map +1 -1
  162. package/types/components/Slider/components/Double/Double.d.ts.map +1 -1
  163. package/types/components/Slider/components/Double/Double.types.d.ts +2 -0
  164. package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -1
  165. package/types/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.d.ts +4 -0
  166. package/types/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.d.ts.map +1 -0
  167. package/types/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.d.ts +5 -0
  168. package/types/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.d.ts.map +1 -0
  169. package/types/components/Slider/components/Single/Single.d.ts.map +1 -1
  170. package/types/components/Slider/components/Single/Single.types.d.ts +3 -1
  171. package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -1
  172. package/types/components/Slider/components/index.d.ts +2 -0
  173. package/types/components/Slider/components/index.d.ts.map +1 -1
  174. package/types/components/Slider/utils/index.d.ts +1 -0
  175. package/types/components/Slider/utils/index.d.ts.map +1 -1
  176. package/types/components/TextArea/TextArea.d.ts.map +1 -1
  177. package/types/components/TextField/TextField.d.ts.map +1 -1
  178. package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts +1 -0
  179. package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts.map +1 -1
  180. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +3 -1
  181. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -1
  182. package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts +1 -0
  183. package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts.map +1 -1
  184. package/types/examples/plasma_web/components/Slider/Slider.d.ts +3 -1
  185. package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -1
  186. package/types/hooks/index.d.ts +1 -0
  187. package/types/hooks/index.d.ts.map +1 -1
  188. package/types/hooks/useForm.d.ts +10 -0
  189. package/types/hooks/useForm.d.ts.map +1 -0
  190. package/types/index.d.ts +0 -1
  191. package/types/index.d.ts.map +1 -1
  192. package/types/utils/index.d.ts +1 -0
  193. package/types/utils/index.d.ts.map +1 -1
  194. package/types/utils/inputHidden.d.ts +3 -0
  195. package/types/utils/inputHidden.d.ts.map +1 -0
  196. package/types/utils/setRefList.d.ts +6 -0
  197. package/types/utils/setRefList.d.ts.map +1 -0
  198. package/cjs/components/Mask/Mask.js +0 -45
  199. package/cjs/components/Mask/Mask.js.map +0 -1
  200. package/emotion/cjs/components/Mask/Mask.template-doc.mdx +0 -125
  201. package/emotion/cjs/components/Mask/index.js +0 -12
  202. package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.js +0 -9
  203. package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -127
  204. package/emotion/cjs/examples/plasma_web/components/Mask/Mask.js +0 -9
  205. package/emotion/cjs/examples/plasma_web/components/Mask/Mask.stories.tsx +0 -125
  206. package/emotion/es/components/Mask/Mask.js +0 -45
  207. package/emotion/es/components/Mask/Mask.template-doc.mdx +0 -125
  208. package/emotion/es/components/Mask/index.js +0 -1
  209. package/emotion/es/examples/plasma_b2c/components/Mask/Mask.js +0 -3
  210. package/emotion/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -127
  211. package/emotion/es/examples/plasma_web/components/Mask/Mask.js +0 -3
  212. package/emotion/es/examples/plasma_web/components/Mask/Mask.stories.tsx +0 -125
  213. package/es/components/Mask/Mask.js +0 -41
  214. package/es/components/Mask/Mask.js.map +0 -1
  215. package/styled-components/cjs/components/Mask/Mask.template-doc.mdx +0 -125
  216. package/styled-components/cjs/components/Mask/index.js +0 -12
  217. package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.js +0 -9
  218. package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -127
  219. package/styled-components/cjs/examples/plasma_web/components/Mask/Mask.js +0 -9
  220. package/styled-components/cjs/examples/plasma_web/components/Mask/Mask.stories.tsx +0 -125
  221. package/styled-components/es/components/Mask/Mask.js +0 -45
  222. package/styled-components/es/components/Mask/Mask.template-doc.mdx +0 -125
  223. package/styled-components/es/components/Mask/index.js +0 -1
  224. package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.js +0 -3
  225. package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +0 -127
  226. package/styled-components/es/examples/plasma_web/components/Mask/Mask.js +0 -3
  227. package/styled-components/es/examples/plasma_web/components/Mask/Mask.stories.tsx +0 -125
  228. package/types/components/Mask/Mask.d.ts +0 -5
  229. package/types/components/Mask/Mask.d.ts.map +0 -1
  230. package/types/components/Mask/Mask.types.d.ts +0 -62
  231. package/types/components/Mask/Mask.types.d.ts.map +0 -1
  232. package/types/components/Mask/index.d.ts +0 -2
  233. package/types/components/Mask/index.d.ts.map +0 -1
  234. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts +0 -191
  235. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts.map +0 -1
  236. package/types/examples/plasma_web/components/Mask/Mask.d.ts +0 -191
  237. package/types/examples/plasma_web/components/Mask/Mask.d.ts.map +0 -1
  238. /package/emotion/cjs/components/{Mask/Mask.types.js → Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.js} +0 -0
  239. /package/emotion/es/components/{Mask/Mask.types.js → Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.js} +0 -0
  240. /package/styled-components/cjs/components/{Mask/Mask.types.js → Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.js} +0 -0
  241. /package/styled-components/es/components/{Mask/Mask.types.js → Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.js} +0 -0
@@ -0,0 +1,245 @@
1
+ import { useForm as useReactHookForm, Controller } from 'react-hook-form';
2
+ import React from 'react';
3
+ import type { Meta, StoryObj } from '@storybook/react';
4
+
5
+ import { WithTheme } from '../../../_helpers';
6
+ import { Button } from '../Button/Button';
7
+ import { TextField } from '../TextField/TextField';
8
+ import { TextArea } from '../TextArea/TextArea';
9
+ import { Checkbox } from '../Checkbox/Checkbox';
10
+ import { Switch } from '../Switch/Switch';
11
+ import { Radiobox } from '../Radiobox/Radiobox';
12
+ import { RadioGroup } from '../../../../components/Radiobox';
13
+ import { Slider } from '../Slider/Slider';
14
+ import { useForm } from '../../../../hooks';
15
+ import { DatePicker, DatePickerRange } from '../DatePicker/DatePicker';
16
+
17
+ type StoryDropdownProps = {};
18
+
19
+ const langName = 'language';
20
+ const itemsRadiobox = [
21
+ { langName, value: 'c', label: 'C', disabled: false },
22
+ { langName, value: 'cpp', label: 'C++', disabled: false },
23
+ { langName, value: 'assembly', label: 'Assembly', disabled: false },
24
+ ];
25
+
26
+ const PlasmaForm = () => {
27
+ const onSubmit = (data) => {
28
+ console.log(data);
29
+ };
30
+
31
+ const { formRef, formData } = useForm(onSubmit, {
32
+ textfield: 'textfield',
33
+ textarea: 'textarea',
34
+ checkbox: 'checkobox',
35
+ switch: true,
36
+ radiobox: 'c',
37
+ slider: 10,
38
+ sliderd: [10, 20],
39
+ datepicker: '12.09.2024',
40
+ datepickerRange: ['09.09.2024', '12.09.2024'],
41
+ });
42
+
43
+ return (
44
+ <form onSubmit={formData} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }} ref={formRef}>
45
+ <TextField name="textfield" placeholder="Textfield" required={false} />
46
+ <TextArea name="textarea" autoResize placeholder="Textarea" />
47
+ <Checkbox name="checkbox" label="Checkbox" />
48
+ <Switch name="switch" label="Switch" labelPosition="after" />
49
+ <RadioGroup aria-labelledby="radiogroup-title-id">
50
+ <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
51
+ Выберите язык программирования для изучения.
52
+ </div>
53
+ {itemsRadiobox.map((item) => (
54
+ <Radiobox
55
+ name="radiobox"
56
+ key={item.value}
57
+ value={item.value}
58
+ label={item.label}
59
+ disabled={item.disabled}
60
+ />
61
+ ))}
62
+ </RadioGroup>
63
+ <Slider name="slider" label="Slider" type="single" min={0} max={100} />
64
+ <Slider name="sliderd" label="Slider" type="double" min={0} max={100} />
65
+ <DatePicker label="DatePicker" name="datepicker" />
66
+ <DatePickerRange label="DatePicker" name="datepickerRange" />
67
+ <Button type="submit">Отправить</Button>
68
+ </form>
69
+ );
70
+ };
71
+
72
+ const meta: Meta<StoryDropdownProps> = {
73
+ title: 'plasma_b2c/Form',
74
+ decorators: [WithTheme],
75
+ component: PlasmaForm,
76
+ };
77
+
78
+ export default meta;
79
+
80
+ const StoryPlasmaForm = () => {
81
+ return <PlasmaForm />;
82
+ };
83
+
84
+ export const DefaultPlasmaForm: StoryObj<StoryDropdownProps> = {
85
+ render: () => <StoryPlasmaForm />,
86
+ };
87
+
88
+ const DefaultForm = () => {
89
+ const onSubmit = (event) => {
90
+ event.preventDefault();
91
+
92
+ const fData = new FormData(event.target);
93
+
94
+ for (const p of fData) {
95
+ const name = p[0];
96
+ const value = p[1];
97
+
98
+ console.log(name, value);
99
+ }
100
+ };
101
+ return (
102
+ <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
103
+ <TextField name="textfield" placeholder="Textfield" required={false} />
104
+ <TextArea name="textarea" autoResize placeholder="Textarea" />
105
+ <Checkbox name="checkbox" label="Checkbox" />
106
+ <Switch name="switch" label="Switch" labelPosition="after" />
107
+ <RadioGroup aria-labelledby="radiogroup-title-id">
108
+ <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
109
+ Выберите язык программирования для изучения.
110
+ </div>
111
+ {itemsRadiobox.map((item) => (
112
+ <Radiobox
113
+ name="radiobox"
114
+ key={item.value}
115
+ value={item.value}
116
+ label={item.label}
117
+ disabled={item.disabled}
118
+ />
119
+ ))}
120
+ </RadioGroup>
121
+ <Slider name="slider" label="Slider" type="single" min={0} max={100} />
122
+ <Slider name="sliderd" label="Slider" type="double" min={0} max={100} />
123
+ <DatePicker label="DatePicker" name="datepicker" />
124
+ <DatePickerRange label="DatePicker" name="datepickerRange" />
125
+ <Button type="submit">Отправить</Button>
126
+ </form>
127
+ );
128
+ };
129
+
130
+ const StoryDefaultForm = () => {
131
+ return <DefaultForm />;
132
+ };
133
+
134
+ export const FormDefault: StoryObj<StoryDropdownProps> = {
135
+ render: () => <StoryDefaultForm />,
136
+ };
137
+
138
+ const DefaultUseForm = () => {
139
+ const { register, handleSubmit } = useReactHookForm({
140
+ defaultValues: {
141
+ textfield: 'John Doe',
142
+ textarea: 'Default description',
143
+ checkbox: true,
144
+ switch: true,
145
+ radiobox: 'c',
146
+ slider: 10,
147
+ },
148
+ });
149
+ const onSubmit = (data) => {
150
+ console.log(data);
151
+ };
152
+
153
+ return (
154
+ <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
155
+ <TextField {...register('textfield')} placeholder="Textfield" required={false} />
156
+ <TextArea {...register('textarea')} autoResize placeholder="Textarea" />
157
+ <Checkbox {...register('checkbox')} label="Checkbox" />
158
+ <Switch {...register('switch')} label="Switch" labelPosition="after" />
159
+ <RadioGroup aria-labelledby="radiogroup-title-id">
160
+ <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
161
+ Выберите язык программирования для изучения.
162
+ </div>
163
+ {itemsRadiobox.map((item) => (
164
+ <Radiobox
165
+ {...register('radiobox')}
166
+ key={item.value}
167
+ value={item.value}
168
+ label={item.label}
169
+ disabled={item.disabled}
170
+ />
171
+ ))}
172
+ </RadioGroup>
173
+ <Button type="submit">Отправить</Button>
174
+ </form>
175
+ );
176
+ };
177
+
178
+ const StoryHookForm = () => {
179
+ return <DefaultUseForm />;
180
+ };
181
+
182
+ export const UseHookForm: StoryObj<StoryDropdownProps> = {
183
+ render: () => <StoryHookForm />,
184
+ };
185
+
186
+ const DefaultUseFormController = () => {
187
+ const { control, handleSubmit } = useReactHookForm({
188
+ defaultValues: {
189
+ textfield: 'John Doe',
190
+ textarea: 'Default description',
191
+ checkbox: true,
192
+ switch: true,
193
+ radiobox: 'c',
194
+ slider: 10,
195
+ sliderd: [10, 20],
196
+ },
197
+ });
198
+ const onSubmit = (data) => {
199
+ console.log(data);
200
+ };
201
+
202
+ return (
203
+ <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
204
+ <Controller
205
+ name="textfield"
206
+ control={control}
207
+ render={({ field }) => <TextField {...field} label="TextField" />}
208
+ />
209
+ <Controller
210
+ name="textarea"
211
+ control={control}
212
+ render={({ field }) => <TextArea {...field} label="TextArea" />}
213
+ />
214
+ <Controller
215
+ name="checkbox"
216
+ control={control}
217
+ render={({ field }) => <Checkbox {...field} checked={field.value} label="Checkbox" />}
218
+ />
219
+ <Controller
220
+ name="switch"
221
+ control={control}
222
+ render={({ field }) => <Switch {...field} checked={field.value} labelPosition="after" label="Switch" />}
223
+ />
224
+ <Controller
225
+ name="slider"
226
+ control={control}
227
+ render={({ field }) => <Slider {...field} type="single" label="Slider" min={0} max={100} />}
228
+ />
229
+ <Controller
230
+ name="sliderd"
231
+ control={control}
232
+ render={({ field }) => <Slider {...field} type="double" label="Slider" min={0} max={100} />}
233
+ />
234
+ <Button type="submit">Отправить</Button>
235
+ </form>
236
+ );
237
+ };
238
+
239
+ const StoryHookFormController = () => {
240
+ return <DefaultUseFormController />;
241
+ };
242
+
243
+ export const UseHookFormController: StoryObj<StoryDropdownProps> = {
244
+ render: () => <StoryHookFormController />,
245
+ };
@@ -0,0 +1,245 @@
1
+ import { useForm as useReactHookForm, Controller } from 'react-hook-form';
2
+ import React from 'react';
3
+ import type { Meta, StoryObj } from '@storybook/react';
4
+
5
+ import { WithTheme } from '../../../_helpers';
6
+ import { Button } from '../Button/Button';
7
+ import { TextField } from '../TextField/TextField';
8
+ import { TextArea } from '../TextArea/TextArea';
9
+ import { Checkbox } from '../Checkbox/Checkbox';
10
+ import { Switch } from '../Switch/Switch';
11
+ import { Radiobox } from '../Radiobox/Radiobox';
12
+ import { RadioGroup } from '../../../../components/Radiobox';
13
+ import { Slider } from '../Slider/Slider';
14
+ import { useForm } from '../../../../hooks';
15
+ import { DatePicker, DatePickerRange } from '../DatePicker/DatePicker';
16
+
17
+ type StoryDropdownProps = {};
18
+
19
+ const langName = 'language';
20
+ const itemsRadiobox = [
21
+ { langName, value: 'c', label: 'C', disabled: false },
22
+ { langName, value: 'cpp', label: 'C++', disabled: false },
23
+ { langName, value: 'assembly', label: 'Assembly', disabled: false },
24
+ ];
25
+
26
+ const PlasmaForm = () => {
27
+ const onSubmit = (data) => {
28
+ console.log(data);
29
+ };
30
+
31
+ const { formRef, formData } = useForm(onSubmit, {
32
+ textfield: 'textfield',
33
+ textarea: 'textarea',
34
+ checkbox: 'checkobox',
35
+ switch: true,
36
+ radiobox: 'c',
37
+ slider: 10,
38
+ sliderd: [10, 20],
39
+ datepicker: '12.09.2024',
40
+ datepickerRange: ['09.09.2024', '12.09.2024'],
41
+ });
42
+
43
+ return (
44
+ <form onSubmit={formData} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }} ref={formRef}>
45
+ <TextField name="textfield" placeholder="Textfield" required={false} />
46
+ <TextArea name="textarea" autoResize placeholder="Textarea" />
47
+ <Checkbox name="checkbox" label="Checkbox" />
48
+ <Switch name="switch" label="Switch" labelPosition="after" />
49
+ <RadioGroup aria-labelledby="radiogroup-title-id">
50
+ <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
51
+ Выберите язык программирования для изучения.
52
+ </div>
53
+ {itemsRadiobox.map((item) => (
54
+ <Radiobox
55
+ name="radiobox"
56
+ key={item.value}
57
+ value={item.value}
58
+ label={item.label}
59
+ disabled={item.disabled}
60
+ />
61
+ ))}
62
+ </RadioGroup>
63
+ <Slider name="slider" label="Slider" type="single" min={0} max={100} />
64
+ <Slider name="sliderd" label="Slider" type="double" min={0} max={100} />
65
+ <DatePicker label="DatePicker" name="datepicker" />
66
+ <DatePickerRange label="DatePicker" name="datepickerRange" />
67
+ <Button type="submit">Отправить</Button>
68
+ </form>
69
+ );
70
+ };
71
+
72
+ const meta: Meta<StoryDropdownProps> = {
73
+ title: 'plasma_web/Form',
74
+ decorators: [WithTheme],
75
+ component: PlasmaForm,
76
+ };
77
+
78
+ export default meta;
79
+
80
+ const StoryPlasmaForm = () => {
81
+ return <PlasmaForm />;
82
+ };
83
+
84
+ export const DefaultPlasmaForm: StoryObj<StoryDropdownProps> = {
85
+ render: () => <StoryPlasmaForm />,
86
+ };
87
+
88
+ const DefaultForm = () => {
89
+ const onSubmit = (event) => {
90
+ event.preventDefault();
91
+
92
+ const fData = new FormData(event.target);
93
+
94
+ for (const p of fData) {
95
+ const name = p[0];
96
+ const value = p[1];
97
+
98
+ console.log(name, value);
99
+ }
100
+ };
101
+ return (
102
+ <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
103
+ <TextField name="textfield" placeholder="Textfield" required={false} />
104
+ <TextArea name="textarea" autoResize placeholder="Textarea" />
105
+ <Checkbox name="checkbox" label="Checkbox" />
106
+ <Switch name="switch" label="Switch" labelPosition="after" />
107
+ <RadioGroup aria-labelledby="radiogroup-title-id">
108
+ <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
109
+ Выберите язык программирования для изучения.
110
+ </div>
111
+ {itemsRadiobox.map((item) => (
112
+ <Radiobox
113
+ name="radiobox"
114
+ key={item.value}
115
+ value={item.value}
116
+ label={item.label}
117
+ disabled={item.disabled}
118
+ />
119
+ ))}
120
+ </RadioGroup>
121
+ <Slider name="slider" label="Slider" type="single" min={0} max={100} />
122
+ <Slider name="sliderd" label="Slider" type="double" min={0} max={100} />
123
+ <DatePicker label="DatePicker" name="datepicker" />
124
+ <DatePickerRange label="DatePicker" name="datepickerRange" />
125
+ <Button type="submit">Отправить</Button>
126
+ </form>
127
+ );
128
+ };
129
+
130
+ const StoryDefaultForm = () => {
131
+ return <DefaultForm />;
132
+ };
133
+
134
+ export const FormDefault: StoryObj<StoryDropdownProps> = {
135
+ render: () => <StoryDefaultForm />,
136
+ };
137
+
138
+ const DefaultUseForm = () => {
139
+ const { register, handleSubmit } = useReactHookForm({
140
+ defaultValues: {
141
+ textfield: 'John Doe',
142
+ textarea: 'Default description',
143
+ checkbox: true,
144
+ switch: true,
145
+ radiobox: 'c',
146
+ slider: 10,
147
+ },
148
+ });
149
+ const onSubmit = (data) => {
150
+ console.log(data);
151
+ };
152
+
153
+ return (
154
+ <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
155
+ <TextField {...register('textfield')} placeholder="Textfield" required={false} />
156
+ <TextArea {...register('textarea')} autoResize placeholder="Textarea" />
157
+ <Checkbox {...register('checkbox')} label="Checkbox" />
158
+ <Switch {...register('switch')} label="Switch" labelPosition="after" />
159
+ <RadioGroup aria-labelledby="radiogroup-title-id">
160
+ <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
161
+ Выберите язык программирования для изучения.
162
+ </div>
163
+ {itemsRadiobox.map((item) => (
164
+ <Radiobox
165
+ {...register('radiobox')}
166
+ key={item.value}
167
+ value={item.value}
168
+ label={item.label}
169
+ disabled={item.disabled}
170
+ />
171
+ ))}
172
+ </RadioGroup>
173
+ <Button type="submit">Отправить</Button>
174
+ </form>
175
+ );
176
+ };
177
+
178
+ const StoryHookForm = () => {
179
+ return <DefaultUseForm />;
180
+ };
181
+
182
+ export const UseHookForm: StoryObj<StoryDropdownProps> = {
183
+ render: () => <StoryHookForm />,
184
+ };
185
+
186
+ const DefaultUseFormController = () => {
187
+ const { control, handleSubmit } = useReactHookForm({
188
+ defaultValues: {
189
+ textfield: 'John Doe',
190
+ textarea: 'Default description',
191
+ checkbox: true,
192
+ switch: true,
193
+ radiobox: 'c',
194
+ slider: 10,
195
+ sliderd: [10, 20],
196
+ },
197
+ });
198
+ const onSubmit = (data) => {
199
+ console.log(data);
200
+ };
201
+
202
+ return (
203
+ <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
204
+ <Controller
205
+ name="textfield"
206
+ control={control}
207
+ render={({ field }) => <TextField {...field} label="TextField" />}
208
+ />
209
+ <Controller
210
+ name="textarea"
211
+ control={control}
212
+ render={({ field }) => <TextArea {...field} label="TextArea" />}
213
+ />
214
+ <Controller
215
+ name="checkbox"
216
+ control={control}
217
+ render={({ field }) => <Checkbox {...field} checked={field.value} label="Checkbox" />}
218
+ />
219
+ <Controller
220
+ name="switch"
221
+ control={control}
222
+ render={({ field }) => <Switch {...field} checked={field.value} labelPosition="after" label="Switch" />}
223
+ />
224
+ <Controller
225
+ name="slider"
226
+ control={control}
227
+ render={({ field }) => <Slider {...field} type="single" label="Slider" min={0} max={100} />}
228
+ />
229
+ <Controller
230
+ name="sliderd"
231
+ control={control}
232
+ render={({ field }) => <Slider {...field} type="double" label="Slider" min={0} max={100} />}
233
+ />
234
+ <Button type="submit">Отправить</Button>
235
+ </form>
236
+ );
237
+ };
238
+
239
+ const StoryHookFormController = () => {
240
+ return <DefaultUseFormController />;
241
+ };
242
+
243
+ export const UseHookFormController: StoryObj<StoryDropdownProps> = {
244
+ render: () => <StoryHookFormController />,
245
+ };
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "useForceUpdate", {
21
21
  return _useForceUpdate.useForceUpdate;
22
22
  }
23
23
  });
24
+ Object.defineProperty(exports, "useForm", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _useForm.useForm;
28
+ }
29
+ });
24
30
  Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
25
31
  enumerable: true,
26
32
  get: function get() {
@@ -51,4 +57,5 @@ var _usePreviousValue = /*#__PURE__*/require("./usePreviousValue");
51
57
  var _useForceUpdate = /*#__PURE__*/require("./useForceUpdate");
52
58
  var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
53
59
  var _useOutsideClick = /*#__PURE__*/require("./useOutsideClick");
54
- var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");
60
+ var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");
61
+ var _useForm = /*#__PURE__*/require("./useForm");
@@ -0,0 +1,137 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.useForm = void 0;
8
+ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
10
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
11
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
12
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
13
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
14
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
15
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
16
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
17
+ var initData = function initData(ref, defaultValues) {
18
+ if (!ref.current) {
19
+ return;
20
+ }
21
+ var form = ref.current;
22
+ var items = form.elements;
23
+ for (var i = 0; i < items.length; i++) {
24
+ var item = items[i];
25
+ var _name = item.name,
26
+ value = item.value,
27
+ type = item.type;
28
+ if ((type === 'text' || type === 'textarea') && defaultValues[_name]) {
29
+ item.value = String(defaultValues[_name]);
30
+ }
31
+ if (type === 'checkbox' && defaultValues[_name]) {
32
+ item.checked = Boolean(defaultValues[_name]);
33
+ }
34
+ if (type === 'radio' && defaultValues[_name]) {
35
+ item.checked = defaultValues[_name] === value;
36
+ }
37
+ if (type === 'number' && defaultValues[_name]) {
38
+ var sliderType = item.getAttribute('datatype');
39
+ if (sliderType === 'slider-single') {
40
+ item.setAttribute('defaultValue', String(defaultValues[_name]));
41
+ var event = new Event('setInitValue');
42
+ item.dispatchEvent(event);
43
+ }
44
+ if (sliderType === 'slider-double') {
45
+ var isMax = item.getAttribute('data-slidertype') === 'max' ? 1 : 0;
46
+ var _data = defaultValues[_name];
47
+ item.setAttribute('defaultValue', String(_data[isMax]));
48
+ var _event = new Event('setInitValue');
49
+ item.dispatchEvent(_event);
50
+ }
51
+ }
52
+ if (type === 'hidden') {
53
+ var datepickerType = item.getAttribute('datatype');
54
+ if (datepickerType === 'datepicker-single') {
55
+ item.setAttribute('defaultValue', String(defaultValues[_name]));
56
+ var _event2 = new Event('setInitValue');
57
+ item.dispatchEvent(_event2);
58
+ }
59
+ if (datepickerType === 'datepicker-double') {
60
+ var isTo = item.getAttribute('data-datepicker') === 'to' ? 1 : 0;
61
+ var _data2 = defaultValues[_name];
62
+ item.setAttribute('defaultValue', String(_data2[isTo]));
63
+ var _event3 = new Event('setInitValue');
64
+ item.dispatchEvent(_event3);
65
+ }
66
+ }
67
+ }
68
+ };
69
+ var valideParams = function valideParams(name) {
70
+ return name && name !== '';
71
+ };
72
+ var useForm = exports.useForm = function useForm(onSubmit, defaultValues) {
73
+ var formRef = /*#__PURE__*/_react["default"].createRef();
74
+ (0, _react.useEffect)(function () {
75
+ initData(formRef, defaultValues);
76
+ }, []);
77
+ var formData = function formData(event) {
78
+ event.preventDefault();
79
+ var result = {};
80
+ var form = event.target;
81
+ var items = form.elements;
82
+ for (var i = 0; i < items.length; i++) {
83
+ var item = items[i];
84
+ var _name2 = item.name,
85
+ value = item.value,
86
+ type = item.type;
87
+ if ((type === 'text' || type === 'textarea') && valideParams(_name2)) {
88
+ result[_name2] = value;
89
+ }
90
+ if (type === 'checkbox' && valideParams(_name2)) {
91
+ result[_name2] = item.checked;
92
+ }
93
+ if (type === 'radio' && valideParams(_name2)) {
94
+ if (item.checked) {
95
+ result[_name2] = value;
96
+ } else if (!(_name2 in result)) {
97
+ result[_name2] = null;
98
+ }
99
+ }
100
+ if (type === 'number' && valideParams(_name2)) {
101
+ var sliderType = item.getAttribute('datatype');
102
+ if (sliderType === 'slider-single') {
103
+ result[_name2] = value;
104
+ }
105
+ if (sliderType === 'slider-double') {
106
+ var isMin = item.getAttribute('data-slidertype') === 'min';
107
+ if (isMin) {
108
+ result[_name2] = [Number(value)];
109
+ }
110
+ if (!isMin && Array.isArray(result[_name2])) {
111
+ result[_name2] = [].concat(_toConsumableArray(result[_name2]), [Number(value)]);
112
+ }
113
+ }
114
+ }
115
+ if (type === 'hidden' && valideParams(_name2)) {
116
+ var _sliderType = item.getAttribute('datatype');
117
+ if (_sliderType === 'datepicker-single') {
118
+ result[_name2] = value;
119
+ }
120
+ if (_sliderType === 'datepicker-double') {
121
+ var _isMin = item.getAttribute('data-datepicker') === 'from';
122
+ if (_isMin) {
123
+ result[_name2] = [String(value)];
124
+ }
125
+ if (!_isMin && Array.isArray(result[_name2])) {
126
+ result[_name2] = [].concat(_toConsumableArray(result[_name2]), [String(value)]);
127
+ }
128
+ }
129
+ }
130
+ }
131
+ onSubmit(result);
132
+ };
133
+ return {
134
+ formRef: formRef,
135
+ formData: formData
136
+ };
137
+ };
@@ -629,15 +629,4 @@ Object.keys(_Editable).forEach(function (key) {
629
629
  return _Editable[key];
630
630
  }
631
631
  });
632
- });
633
- var _Mask = /*#__PURE__*/require("./components/Mask");
634
- Object.keys(_Mask).forEach(function (key) {
635
- if (key === "default" || key === "__esModule") return;
636
- if (key in exports && exports[key] === _Mask[key]) return;
637
- Object.defineProperty(exports, key, {
638
- enumerable: true,
639
- get: function get() {
640
- return _Mask[key];
641
- }
642
- });
643
632
  });