@modul/mbui 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@modul/mbui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"packageManager": "yarn@3.5.1",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"build:demo": "webpack --config ./demo/webpack.config.js",
|
|
8
8
|
"dev:demo": "webpack serve --config ./demo/webpack.config.js --open",
|
|
9
|
-
"demo": "yarn dlx http-server demo/dist -so -c-1"
|
|
9
|
+
"demo": "yarn dlx http-server demo/dist -so -c-1",
|
|
10
|
+
"storybook": "storybook dev -p 6006",
|
|
11
|
+
"build:storybook": "storybook build"
|
|
10
12
|
},
|
|
11
13
|
"lintConfig": "./.eslintrc.json",
|
|
12
14
|
"files": [
|
|
@@ -21,6 +23,14 @@
|
|
|
21
23
|
"@babel/preset-env": "^7.9.5",
|
|
22
24
|
"@babel/preset-react": "^7.9.4",
|
|
23
25
|
"@babel/preset-typescript": "^7.21.5",
|
|
26
|
+
"@storybook/addon-essentials": "^7.4.0",
|
|
27
|
+
"@storybook/addon-interactions": "^7.4.0",
|
|
28
|
+
"@storybook/addon-links": "^7.4.0",
|
|
29
|
+
"@storybook/addon-onboarding": "^1.0.8",
|
|
30
|
+
"@storybook/blocks": "^7.4.0",
|
|
31
|
+
"@storybook/react": "^7.4.0",
|
|
32
|
+
"@storybook/react-webpack5": "^7.4.0",
|
|
33
|
+
"@storybook/testing-library": "^0.2.0",
|
|
24
34
|
"@types/node": "^20.1.4",
|
|
25
35
|
"@types/react": "^18.2.6",
|
|
26
36
|
"@types/react-datepicker": "4.15.0",
|
|
@@ -35,6 +45,7 @@
|
|
|
35
45
|
"config": "3.3.9",
|
|
36
46
|
"copy-webpack-plugin": "^11.0.0",
|
|
37
47
|
"css-loader": "^6.8.1",
|
|
48
|
+
"date-fns": "^2.30.0",
|
|
38
49
|
"eslint": "8.25.0",
|
|
39
50
|
"eslint-config-prettier": "8.5.0",
|
|
40
51
|
"eslint-plugin-angular": "4.1.0",
|
|
@@ -42,11 +53,13 @@
|
|
|
42
53
|
"eslint-plugin-prettier": "4.2.1",
|
|
43
54
|
"eslint-plugin-react": "7.31.10",
|
|
44
55
|
"eslint-plugin-react-hooks": "4.6.0",
|
|
56
|
+
"eslint-plugin-storybook": "^0.6.13",
|
|
45
57
|
"glob": "^10.2.4",
|
|
46
58
|
"html-webpack-plugin": "5.5.1",
|
|
47
59
|
"prettier": "2.7.1",
|
|
48
60
|
"react": "18.2.0",
|
|
49
61
|
"react-dom": "^18.2.0",
|
|
62
|
+
"storybook": "^7.4.0",
|
|
50
63
|
"style-loader": "^3.3.3",
|
|
51
64
|
"stylus": "^0.59.0",
|
|
52
65
|
"stylus-loader": "^7.1.3",
|
|
@@ -59,6 +72,7 @@
|
|
|
59
72
|
},
|
|
60
73
|
"peerDependencies": {
|
|
61
74
|
"classnames": "^2.3.2",
|
|
75
|
+
"date-fns": "^2.30.0",
|
|
62
76
|
"react": "^18.2.0",
|
|
63
77
|
"react-dom": "^18.2.0"
|
|
64
78
|
}
|
package/src/DatePicker/index.tsx
CHANGED
|
@@ -1,4 +1,21 @@
|
|
|
1
|
-
import DatePicker from 'react-datepicker'
|
|
1
|
+
import DatePicker, { setDefaultLocale, registerLocale } from 'react-datepicker'
|
|
2
|
+
import ru from 'date-fns/esm/locale/ru'
|
|
3
|
+
|
|
2
4
|
import 'react-datepicker/dist/react-datepicker.css'
|
|
5
|
+
import './DatePicker.styl'
|
|
6
|
+
|
|
7
|
+
registerLocale('ru', ru)
|
|
8
|
+
setDefaultLocale('ru')
|
|
9
|
+
|
|
10
|
+
/* дизайн https://www.figma.com/file/JWoRIl9t7iUo2OCMUAXe8jho/Web-UI-Kit?type=design&node-id=17470-175761&mode=design&t=BHB7X1HxYLkndvZD-0
|
|
11
|
+
Виды:
|
|
12
|
+
1 - DatePicker (обычный)
|
|
13
|
+
2 - MonthPicker
|
|
14
|
+
3 - YearPicker
|
|
15
|
+
4 - DateRangePicker
|
|
16
|
+
5 - WithButtonTriggerDatePicker
|
|
17
|
+
6 - на остальные морально не готовы
|
|
18
|
+
|
|
19
|
+
*/
|
|
3
20
|
|
|
4
21
|
export { DatePicker }
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/react'
|
|
3
|
+
import { DatePicker } from '../../DatePicker'
|
|
4
|
+
|
|
5
|
+
const meta: Meta<typeof DatePicker> = {
|
|
6
|
+
component: DatePicker,
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export default meta
|
|
10
|
+
type Story = StoryObj<typeof DatePicker>
|
|
11
|
+
|
|
12
|
+
const DefaultDatePickerWrapper = (props) => {
|
|
13
|
+
const [startDate, setStartDate] = useState(new Date())
|
|
14
|
+
return (
|
|
15
|
+
<DatePicker
|
|
16
|
+
selected={startDate}
|
|
17
|
+
locale='ru-RU'
|
|
18
|
+
onChange={(date) => setStartDate(date)}
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
)
|
|
22
|
+
}
|
|
23
|
+
export const Default: Story = {
|
|
24
|
+
args: {
|
|
25
|
+
dateFormat: 'dd.MM.yyyy',
|
|
26
|
+
disabled: false,
|
|
27
|
+
dateFormatCalendar: 'dd.MM.yyyy',
|
|
28
|
+
},
|
|
29
|
+
render: (args) => <DefaultDatePickerWrapper {...args} />,
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export const TimePicker: Story = {
|
|
33
|
+
args: {
|
|
34
|
+
...Default.args,
|
|
35
|
+
dateFormat: 'hh:mm',
|
|
36
|
+
timeCaption: 'Выберите время:',
|
|
37
|
+
timeIntervals: 30,
|
|
38
|
+
timeFormat: 'hh:mm',
|
|
39
|
+
},
|
|
40
|
+
render: (args) => (
|
|
41
|
+
<DefaultDatePickerWrapper
|
|
42
|
+
showTimeSelect
|
|
43
|
+
showTimeSelectOnly
|
|
44
|
+
{...args}
|
|
45
|
+
/>
|
|
46
|
+
),
|
|
47
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/react'
|
|
3
|
+
import { Input } from '../../Base/Input'
|
|
4
|
+
|
|
5
|
+
const meta: Meta<typeof Input> = {
|
|
6
|
+
component: Input,
|
|
7
|
+
}
|
|
8
|
+
type Story = StoryObj<typeof Input>
|
|
9
|
+
|
|
10
|
+
const DefaultInputWrapper = (props) => {
|
|
11
|
+
const [val, setVal] = useState<string>('')
|
|
12
|
+
return (
|
|
13
|
+
<Input
|
|
14
|
+
value={val}
|
|
15
|
+
onChange={(e) => setVal(e)}
|
|
16
|
+
type="text"
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export const Default: Story = {
|
|
23
|
+
args: {
|
|
24
|
+
disabled: false,
|
|
25
|
+
placeholder: 'placeholder...',
|
|
26
|
+
},
|
|
27
|
+
render: (args) => <DefaultInputWrapper {...args} />,
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export default meta
|