w-design-system 0.0.27 → 0.0.28
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/dist/components/DatePicker/index.d.ts +17 -0
- package/dist/components/DatePicker/index.d.ts.map +1 -0
- package/dist/components/DatePicker/index.js +22 -0
- package/dist/components/DatePicker/index.js.map +1 -0
- package/dist/components/DatePicker/stories.d.ts +8 -0
- package/dist/components/DatePicker/stories.d.ts.map +1 -0
- package/dist/components/DatePicker/stories.js +61 -0
- package/dist/components/DatePicker/stories.js.map +1 -0
- package/dist/components/DateRangePicker/index.d.ts +19 -0
- package/dist/components/DateRangePicker/index.d.ts.map +1 -0
- package/dist/components/DateRangePicker/index.js +159 -0
- package/dist/components/DateRangePicker/index.js.map +1 -0
- package/dist/components/DateRangePicker/stories.d.ts +8 -0
- package/dist/components/DateRangePicker/stories.d.ts.map +1 -0
- package/dist/components/DateRangePicker/stories.js +60 -0
- package/dist/components/DateRangePicker/stories.js.map +1 -0
- package/dist/components/DateRangePicker/styles.d.ts +18 -0
- package/dist/components/DateRangePicker/styles.d.ts.map +1 -0
- package/dist/components/DateRangePicker/styles.js +114 -0
- package/dist/components/DateRangePicker/styles.js.map +1 -0
- package/dist/components/Input/index.d.ts +3 -3
- package/dist/components/Input/index.d.ts.map +1 -1
- package/dist/components/Input/index.js +3 -3
- package/dist/components/Paginate/index.d.ts +2 -2
- package/dist/components/Paginate/stories.d.ts +3 -3
- package/dist/components/Select/index.d.ts +20 -0
- package/dist/components/Select/index.d.ts.map +1 -0
- package/dist/components/Select/index.js +68 -0
- package/dist/components/Select/index.js.map +1 -0
- package/dist/components/Select/stories.d.ts +7 -0
- package/dist/components/Select/stories.d.ts.map +1 -0
- package/dist/components/Select/stories.js +48 -0
- package/dist/components/Select/stories.js.map +1 -0
- package/dist/components/Select/styles.d.ts +8 -0
- package/dist/components/Select/styles.d.ts.map +1 -0
- package/dist/components/Select/styles.js +47 -0
- package/dist/components/Select/styles.js.map +1 -0
- package/dist/components/Themes/index.d.ts +1 -0
- package/dist/components/Themes/index.d.ts.map +1 -1
- package/dist/components/Themes/index.js +5 -2
- package/dist/components/Themes/index.js.map +1 -1
- package/dist/components/Types/index.d.ts +6 -1
- package/dist/components/Types/index.d.ts.map +1 -1
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/{DateInput → DatePicker}/index.tsx +5 -5
- package/src/components/{DateInput → DatePicker}/stories.tsx +21 -9
- package/src/components/{RangeDateInput → DateRangePicker}/index.tsx +79 -117
- package/src/components/{RangeDateInput → DateRangePicker}/stories.tsx +12 -13
- package/src/components/{DateInput → DateRangePicker}/styles.ts +41 -55
- package/src/components/Input/index.tsx +7 -7
- package/src/components/Paginate/index.tsx +2 -2
- package/src/components/Paginate/stories.tsx +4 -4
- package/src/components/Select/index.tsx +123 -0
- package/src/components/Select/stories.tsx +51 -0
- package/src/components/Select/styles.ts +55 -0
- package/src/components/Themes/index.ts +5 -0
- package/src/components/Types/index.ts +8 -1
- package/src/index.tsx +3 -2
- package/src/components/RangeDateInput/styles.ts +0 -145
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React, { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface SelectProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
label?: string;
|
|
5
|
+
leftIcon?: ReactNode;
|
|
6
|
+
onOptionChange?: (option: number | null) => void;
|
|
7
|
+
options?: {
|
|
8
|
+
text: string;
|
|
9
|
+
id: number;
|
|
10
|
+
}[];
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
rightIcon?: ReactNode;
|
|
13
|
+
selectedOption?: number | null;
|
|
14
|
+
value?: string;
|
|
15
|
+
}
|
|
16
|
+
export interface SelectRef {
|
|
17
|
+
setOpen(open: boolean): void;
|
|
18
|
+
}
|
|
19
|
+
export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<SelectRef>>;
|
|
20
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,cAAc,EAEd,SAAS,EAMV,MAAM,OAAO,CAAA;AAOd,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAChD,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CAC7B;AA2FD,eAAO,MAAM,MAAM,+EAAoC,CAAA"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React, { useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
|
|
13
|
+
import { chevronDownSVG } from '../../assets/icon';
|
|
14
|
+
import { IconWrapper } from '../IconWrapper';
|
|
15
|
+
import { Input } from '../Input';
|
|
16
|
+
import { theme } from '../Themes';
|
|
17
|
+
import { OptionButton, Dropdown, DropdownWrapper, SelectWrapper } from './styles';
|
|
18
|
+
const SelectFowardRef = (_a, ref) => {
|
|
19
|
+
var _b;
|
|
20
|
+
var { children, label, leftIcon, onOptionChange, options, placeholder, rightIcon, selectedOption, value } = _a, props = __rest(_a, ["children", "label", "leftIcon", "onOptionChange", "options", "placeholder", "rightIcon", "selectedOption", "value"]);
|
|
21
|
+
const [open, setOpen] = useState(false);
|
|
22
|
+
const wrapperRef = useRef(null);
|
|
23
|
+
useImperativeHandle(ref, () => ({
|
|
24
|
+
setOpen,
|
|
25
|
+
}));
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (!open)
|
|
28
|
+
return;
|
|
29
|
+
const handler = (event) => {
|
|
30
|
+
let element = event.target;
|
|
31
|
+
while (element && element !== document.body.parentElement) {
|
|
32
|
+
if (element === wrapperRef.current)
|
|
33
|
+
break;
|
|
34
|
+
element = element.parentElement;
|
|
35
|
+
}
|
|
36
|
+
if (element === document.body.parentElement) {
|
|
37
|
+
setOpen(false);
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
document.addEventListener('click', handler);
|
|
41
|
+
return () => {
|
|
42
|
+
document.removeEventListener('click', handler);
|
|
43
|
+
};
|
|
44
|
+
}, [open]);
|
|
45
|
+
const onOptionClick = (option) => {
|
|
46
|
+
onOptionChange && onOptionChange(option);
|
|
47
|
+
setOpen(false);
|
|
48
|
+
};
|
|
49
|
+
const valueComputed = useMemo(() => {
|
|
50
|
+
if (value)
|
|
51
|
+
return value;
|
|
52
|
+
if (selectedOption) {
|
|
53
|
+
const option = options === null || options === void 0 ? void 0 : options.find(option => option.id === selectedOption);
|
|
54
|
+
return option === null || option === void 0 ? void 0 : option.text;
|
|
55
|
+
}
|
|
56
|
+
return '';
|
|
57
|
+
}, [value, selectedOption, options]);
|
|
58
|
+
return (React.createElement(SelectWrapper, Object.assign({}, props, { ref: wrapperRef }),
|
|
59
|
+
React.createElement(Input, { leftIcon: leftIcon, rightIcon: React.createElement(React.Fragment, null,
|
|
60
|
+
rightIcon,
|
|
61
|
+
React.createElement(IconWrapper, { className: `icon ${open ? 'icon-rotate' : ''}`, src: chevronDownSVG, width: "16px", color: theme.colors.shade30 })), placeholder: placeholder, label: label, value: valueComputed, readonly: true, onClick: () => setOpen(!open) }),
|
|
62
|
+
open && (React.createElement(DropdownWrapper, null,
|
|
63
|
+
React.createElement(Dropdown, null,
|
|
64
|
+
((_b = options === null || options === void 0 ? void 0 : options.length) !== null && _b !== void 0 ? _b : 0) > 0 && (React.createElement("div", null, options === null || options === void 0 ? void 0 : options.map(option => (React.createElement(OptionButton, { selected: option.id === selectedOption, key: option.id, onClick: () => onOptionClick(option.id) }, option.text))))),
|
|
65
|
+
children)))));
|
|
66
|
+
};
|
|
67
|
+
export const Select = React.forwardRef(SelectFowardRef);
|
|
68
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Select } from './index';
|
|
3
|
+
declare const meta: Meta<typeof Select>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Select>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
//# sourceMappingURL=stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAG7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAWC,CAAA;AAE/B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AA8BpC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { Select } from './index';
|
|
13
|
+
import React from 'react';
|
|
14
|
+
const meta = {
|
|
15
|
+
title: 'Components/Select',
|
|
16
|
+
component: Select,
|
|
17
|
+
tags: ['autodocs'],
|
|
18
|
+
argTypes: {
|
|
19
|
+
placeholder: { control: 'text' },
|
|
20
|
+
label: { control: 'text' },
|
|
21
|
+
disabled: { control: 'boolean' },
|
|
22
|
+
selectedOption: { control: 'number' },
|
|
23
|
+
onOptionChange: { action: 'selectedOptionChange' },
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
export default meta;
|
|
27
|
+
const ComponentWrapper = (_a) => {
|
|
28
|
+
var { options } = _a, args = __rest(_a, ["options"]);
|
|
29
|
+
const [selectedOption, setSelectOption] = React.useState(null);
|
|
30
|
+
return (React.createElement(Select, Object.assign({ selectedOption: selectedOption, onOptionChange: option => setSelectOption(option), options: options !== null && options !== void 0 ? options : [
|
|
31
|
+
{
|
|
32
|
+
text: 'Opção 1',
|
|
33
|
+
id: 1,
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
text: 'Opção 2',
|
|
37
|
+
id: 2,
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
text: 'Opção 3',
|
|
41
|
+
id: 3,
|
|
42
|
+
},
|
|
43
|
+
] }, args)));
|
|
44
|
+
};
|
|
45
|
+
export const Default = {
|
|
46
|
+
render: args => React.createElement(ComponentWrapper, { label: "Label", placeholder: "Placeholder" }),
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Select/stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,cAAc,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACrC,cAAc,EAAE,EAAE,MAAM,EAAE,sBAAsB,EAAE;KACnD;CAC4B,CAAA;AAE/B,eAAe,IAAI,CAAA;AAGnB,MAAM,gBAAgB,GAAG,CAAC,EAAiC,EAAE,EAAE;QAArC,EAAE,OAAO,OAAwB,EAAnB,IAAI,cAAlB,WAAoB,CAAF;IAC1C,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,IAAI,CAAC,CAAA;IAE7E,OAAO,CACL,oBAAC,MAAM,kBACL,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,MAAM,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EACjD,OAAO,EACL,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI;YACT;gBACE,IAAI,EAAE,SAAS;gBACf,EAAE,EAAE,CAAC;aACN;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,EAAE,EAAE,CAAC;aACN;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,EAAE,EAAE,CAAC;aACN;SACF,IAEC,IAAI,EACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,oBAAC,gBAAgB,IAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,aAAa,GAAG;CAC7E,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const SelectWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
2
|
+
export declare const Dropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
3
|
+
export declare const DropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
4
|
+
export interface OptionButtonProps {
|
|
5
|
+
selected: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const OptionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, OptionButtonProps>> & string;
|
|
8
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,6NAQzB,CAAA;AAED,eAAO,MAAM,QAAQ,6NASpB,CAAA;AAED,eAAO,MAAM,eAAe,6NAE3B,CAAA;AAGD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,YAAY,kQAqBxB,CAAA"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import { theme } from '../Themes';
|
|
3
|
+
export const SelectWrapper = styled.div `
|
|
4
|
+
position: relative;
|
|
5
|
+
.icon {
|
|
6
|
+
transition: transform 0.3s;
|
|
7
|
+
}
|
|
8
|
+
.icon-rotate {
|
|
9
|
+
transform: rotate(180deg) translateY(5px);
|
|
10
|
+
}
|
|
11
|
+
`;
|
|
12
|
+
export const Dropdown = styled.div `
|
|
13
|
+
position: absolute;
|
|
14
|
+
width: 252px;
|
|
15
|
+
padding: 16px;
|
|
16
|
+
z-index: 1;
|
|
17
|
+
border-radius: 4px;
|
|
18
|
+
border: 1px solid ${theme.colors.shade20};
|
|
19
|
+
margin-top: 7px;
|
|
20
|
+
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
|
|
21
|
+
`;
|
|
22
|
+
export const DropdownWrapper = styled.div `
|
|
23
|
+
position: relative;
|
|
24
|
+
`;
|
|
25
|
+
export const OptionButton = styled.button `
|
|
26
|
+
background-color: transparent;
|
|
27
|
+
border: none;
|
|
28
|
+
font-size: ${theme.paragraph.medium};
|
|
29
|
+
font-family: 'Nunito Sans', sans-serif;
|
|
30
|
+
color: ${({ selected }) => (selected ? theme.colors.cyan30 : theme.colors.shade40)};
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
padding: 0;
|
|
33
|
+
width: 100%;
|
|
34
|
+
text-align: left;
|
|
35
|
+
height: 46px;
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
|
|
39
|
+
&:not(:last-child) {
|
|
40
|
+
border-bottom: 1px solid ${theme.colors.shade10};
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&:hover {
|
|
44
|
+
color: ${theme.colors.cyan30};
|
|
45
|
+
}
|
|
46
|
+
`;
|
|
47
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQtC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;sBAMZ,KAAK,CAAC,MAAM,CAAC,OAAO;;;CAGzC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAA;AAOD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAmB;;;eAG7C,KAAK,CAAC,SAAS,CAAC,MAAM;;WAE1B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;;;;;;+BAUrD,KAAK,CAAC,MAAM,CAAC,OAAO;;;;aAItC,KAAK,CAAC,MAAM,CAAC,MAAM;;CAE/B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Themes/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Themes/index.ts"],"names":[],"mappings":"AAoDA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAA;AAeD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BjB,CAAA"}
|
|
@@ -36,6 +36,9 @@ const mint = {
|
|
|
36
36
|
mint20: '#D7EFDE',
|
|
37
37
|
mint10: '#EBF8EF',
|
|
38
38
|
};
|
|
39
|
+
const special = {
|
|
40
|
+
cyan30opacity16: 'rgba(33, 126, 253, 0.16)',
|
|
41
|
+
};
|
|
39
42
|
const white = '#FFFFFF';
|
|
40
43
|
const black = '#333333';
|
|
41
44
|
const transparent = 'transparent';
|
|
@@ -65,9 +68,9 @@ const zIndex = {
|
|
|
65
68
|
export const theme = {
|
|
66
69
|
zIndex,
|
|
67
70
|
spacing,
|
|
68
|
-
colors: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, yellow), shades), red), honey), mint), cyan), { white,
|
|
71
|
+
colors: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, yellow), shades), red), honey), mint), cyan), { white,
|
|
69
72
|
black,
|
|
70
|
-
transparent }),
|
|
73
|
+
transparent }), special),
|
|
71
74
|
fonts: ['Nunito Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
|
|
72
75
|
title: {
|
|
73
76
|
medium: '24px',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Themes/index.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,MAAM,GAAG,GAAG;IACV,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAA;AAED,MAAM,KAAK,GAAG;IACZ,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,MAAM,MAAM,GAAG;IACb,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;CACpB,CAAA;AAED,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,KAAK,GAAG,SAAS,CAAA;AACvB,MAAM,KAAK,GAAG,SAAS,CAAA;AACvB,MAAM,WAAW,GAAG,aAAa,CAAA;AAEjC,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;CACf,CAAA;AAED,MAAM,MAAM,GAAG;IACb,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,IAAI,EAAE,KAAK;CACZ,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM;IACN,OAAO;IACP,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Themes/index.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,MAAM,GAAG,GAAG;IACV,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAA;AAED,MAAM,KAAK,GAAG;IACZ,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,MAAM,MAAM,GAAG;IACb,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;CACpB,CAAA;AAED,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,OAAO,GAAG;IACd,eAAe,EAAE,0BAA0B;CAC5C,CAAA;AAED,MAAM,KAAK,GAAG,SAAS,CAAA;AACvB,MAAM,KAAK,GAAG,SAAS,CAAA;AACvB,MAAM,WAAW,GAAG,aAAa,CAAA;AAEjC,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;CACf,CAAA;AAED,MAAM,MAAM,GAAG;IACb,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,IAAI,EAAE,KAAK;CACZ,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM;IACN,OAAO;IACP,MAAM,sHACD,MAAM,GACN,MAAM,GACN,GAAG,GACH,KAAK,GACL,IAAI,GACJ,IAAI,KACP,KAAK;QACL,KAAK;QACL,WAAW,KACR,OAAO,CACX;IACD,KAAK,EAAE,CAAC,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,CAAC;IAC5E,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;IACD,SAAS,EAAE;QACT,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,MAAM;QACjB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;CACF,CAAA"}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import type { DatePickerProps } from '../DatePicker';
|
|
3
|
+
import type { DateRangePickerProps } from '../DateRangePicker';
|
|
4
|
+
import type { SelectProps } from '../Select';
|
|
5
|
+
import type { SelectRef } from '../Select';
|
|
6
|
+
import type { PaginateProps } from '../Paginate';
|
|
2
7
|
type ColorsVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'gray' | 'warning' | 'yellow';
|
|
3
8
|
type ColorsVariantBanner = 'notice' | 'success' | 'danger' | 'warning';
|
|
4
9
|
export interface ButtonTypes extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
@@ -41,5 +46,5 @@ export interface TabsTypes extends HTMLAttributes<HTMLDivElement> {
|
|
|
41
46
|
defaultActiveTab?: string;
|
|
42
47
|
onTabChange?: (activeTab: string) => void;
|
|
43
48
|
}
|
|
44
|
-
export {};
|
|
49
|
+
export { DatePickerProps, DateRangePickerProps, SelectProps, SelectRef, PaginateProps };
|
|
45
50
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAChD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAA;AACnG,KAAK,mBAAmB,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEtE,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACpF,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;CACjC;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C;AAED,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,16 +2,17 @@ export { Banner } from './components/Banner/index';
|
|
|
2
2
|
export { Button } from './components/Button/index';
|
|
3
3
|
export { ButtonRadiusIcon } from './components/ButtonRadiusIcon/index';
|
|
4
4
|
export { ButtonRound } from './components/ButtonRound/index';
|
|
5
|
-
export { DateInput } from './components/
|
|
5
|
+
export { DatePicker as DateInput } from './components/DatePicker/index';
|
|
6
6
|
export { IconWrapper } from './components/IconWrapper/index';
|
|
7
7
|
export { Input } from './components/Input/index';
|
|
8
8
|
export { Modal } from './components/Modal/index';
|
|
9
9
|
export { Paginate } from './components/Paginate/index';
|
|
10
10
|
export { Paragraph } from './components/Paragraph/index';
|
|
11
|
-
export { RangeDateInput } from './components/
|
|
11
|
+
export { DateRangePicker as RangeDateInput } from './components/DateRangePicker/index';
|
|
12
12
|
export { Table } from './components/Table/index';
|
|
13
13
|
export { Tabs } from './components/Tabs/index';
|
|
14
14
|
export { theme } from './components/Themes/index';
|
|
15
15
|
export { Title } from './components/Title/index';
|
|
16
|
+
export { Select } from './components/Select/index';
|
|
16
17
|
export { appsSVG, alertSVG, bindSVG, bellSVG, checkSVG, calendarSVG, chevronDownSVG, chevronLeftSVG, chevronRightSVG, closeSVG, commentSVG, docCheckSVG, docSVG, dumpSVG, dashboardSVG, docDownloadSVG, docUploadSVG, editSVG, editalSVG, imageSVG, monitoringSVG, settingSVG, financeSVG, spreadsheetSVG, orderSVG, moneySVG, eyesSVG, portalSVG, spinSVG, } from './assets/icon/index';
|
|
17
18
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAA;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAA;AACtF,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EACL,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAW,EACX,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,WAAW,EACX,MAAM,EACN,OAAO,EACP,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,aAAa,EACb,UAAU,EACV,UAAU,EACV,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,GACR,MAAM,qBAAqB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -2,16 +2,17 @@ export { Banner } from './components/Banner/index';
|
|
|
2
2
|
export { Button } from './components/Button/index';
|
|
3
3
|
export { ButtonRadiusIcon } from './components/ButtonRadiusIcon/index';
|
|
4
4
|
export { ButtonRound } from './components/ButtonRound/index';
|
|
5
|
-
export { DateInput } from './components/
|
|
5
|
+
export { DatePicker as DateInput } from './components/DatePicker/index';
|
|
6
6
|
export { IconWrapper } from './components/IconWrapper/index';
|
|
7
7
|
export { Input } from './components/Input/index';
|
|
8
8
|
export { Modal } from './components/Modal/index';
|
|
9
9
|
export { Paginate } from './components/Paginate/index';
|
|
10
10
|
export { Paragraph } from './components/Paragraph/index';
|
|
11
|
-
export { RangeDateInput } from './components/
|
|
11
|
+
export { DateRangePicker as RangeDateInput } from './components/DateRangePicker/index';
|
|
12
12
|
export { Table } from './components/Table/index';
|
|
13
13
|
export { Tabs } from './components/Tabs/index';
|
|
14
14
|
export { theme } from './components/Themes/index';
|
|
15
15
|
export { Title } from './components/Title/index';
|
|
16
|
+
export { Select } from './components/Select/index';
|
|
16
17
|
export { appsSVG, alertSVG, bindSVG, bellSVG, checkSVG, calendarSVG, chevronDownSVG, chevronLeftSVG, chevronRightSVG, closeSVG, commentSVG, docCheckSVG, docSVG, dumpSVG, dashboardSVG, docDownloadSVG, docUploadSVG, editSVG, editalSVG, imageSVG, monitoringSVG, settingSVG, financeSVG, spreadsheetSVG, orderSVG, moneySVG, eyesSVG, portalSVG, spinSVG, } from './assets/icon/index';
|
|
17
18
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAA;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAA;AACtF,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EACL,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAW,EACX,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,WAAW,EACX,MAAM,EACN,OAAO,EACP,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,aAAa,EACb,UAAU,EACV,UAAU,EACV,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,GACR,MAAM,qBAAqB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React, { HTMLAttributes } from 'react'
|
|
2
|
-
import {
|
|
2
|
+
import { DateRangePicker } from '../DateRangePicker'
|
|
3
3
|
|
|
4
|
-
export interface
|
|
4
|
+
export interface DatePickerProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
5
|
placeholder?: string
|
|
6
6
|
label: string
|
|
7
|
-
|
|
7
|
+
options?: { text: string; id: number }[]
|
|
8
8
|
selectedOption?: number | null
|
|
9
9
|
readonly?: boolean
|
|
10
10
|
disabled?: boolean
|
|
@@ -13,12 +13,12 @@ export interface DateInputProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
13
13
|
onSelectedCustomDate?: (date: Date | null) => void
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
export const
|
|
16
|
+
export const DatePicker: React.FC<DatePickerProps> = ({ onSelectedCustomDate, customDate, ...props }) => {
|
|
17
17
|
const onRangeSelected = (start: Date | null) => {
|
|
18
18
|
if (onSelectedCustomDate) onSelectedCustomDate(start)
|
|
19
19
|
}
|
|
20
20
|
return (
|
|
21
|
-
<
|
|
21
|
+
<DateRangePicker
|
|
22
22
|
{...props}
|
|
23
23
|
isRange={false}
|
|
24
24
|
onSelectedCustomRange={onRangeSelected}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react'
|
|
2
|
-
import {
|
|
2
|
+
import { DatePicker as DatePicker } from './index'
|
|
3
3
|
import React from 'react'
|
|
4
4
|
|
|
5
|
-
const meta: Meta<typeof
|
|
6
|
-
title: 'Components/
|
|
7
|
-
component:
|
|
5
|
+
const meta: Meta<typeof DatePicker> = {
|
|
6
|
+
title: 'Components/DatePicker',
|
|
7
|
+
component: DatePicker,
|
|
8
8
|
tags: ['autodocs'],
|
|
9
9
|
argTypes: {
|
|
10
10
|
placeholder: { control: 'text' },
|
|
@@ -12,21 +12,33 @@ const meta: Meta<typeof DateInput> = {
|
|
|
12
12
|
readonly: { control: 'boolean' },
|
|
13
13
|
disabled: { control: 'boolean' },
|
|
14
14
|
},
|
|
15
|
-
} satisfies Meta<typeof
|
|
15
|
+
} satisfies Meta<typeof DatePicker>
|
|
16
16
|
|
|
17
17
|
export default meta
|
|
18
|
-
type Story = StoryObj<typeof
|
|
18
|
+
type Story = StoryObj<typeof DatePicker>
|
|
19
19
|
|
|
20
20
|
const ComponentWrapper = ({ defaultOptions, ...args }: any) => {
|
|
21
21
|
const [selectedOption, setSelectOption] = React.useState<number | null>(null)
|
|
22
|
+
|
|
22
23
|
const [customDate, setCustomDate] = React.useState<Date | null>(null)
|
|
24
|
+
const onSelectedOptionChange = (option: number | null) => {
|
|
25
|
+
setSelectOption(option)
|
|
26
|
+
if (option === null) {
|
|
27
|
+
setCustomDate(null)
|
|
28
|
+
return
|
|
29
|
+
}
|
|
30
|
+
const date = new Date()
|
|
31
|
+
date.setDate(date.getDate() + option)
|
|
32
|
+
setCustomDate(date)
|
|
33
|
+
|
|
34
|
+
}
|
|
23
35
|
return (
|
|
24
|
-
<
|
|
36
|
+
<DatePicker
|
|
25
37
|
selectedOption={selectedOption}
|
|
26
38
|
customDate={customDate}
|
|
27
|
-
onSelectedOptionChange={
|
|
39
|
+
onSelectedOptionChange={onSelectedOptionChange}
|
|
28
40
|
onSelectedCustomDate={date => setCustomDate(date)}
|
|
29
|
-
|
|
41
|
+
options={
|
|
30
42
|
defaultOptions ?? [
|
|
31
43
|
{
|
|
32
44
|
text: 'Ontem',
|