@aveonline/ui-react 1.17.1 → 1.18.0
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/README.md +126 -126
- package/dist/components/atoms/Tooltip/TooltipAnchor.d.ts +1 -1
- package/dist/components/atoms/Tooltip/TooltipFloat.d.ts +1 -1
- package/dist/components/index.d.ts +3 -0
- package/dist/components/molecules/Card/Simple/ICardSimple.d.ts +13 -0
- package/dist/components/molecules/Card/Simple/Simple.d.ts +2 -0
- package/dist/components/molecules/Card/Simple/index.d.ts +2 -0
- package/dist/components/molecules/DateInputPicker/Atoms/CustomButton.d.ts +3 -0
- package/dist/components/molecules/DateInputPicker/Atoms/CustomInput.d.ts +3 -0
- package/dist/components/molecules/DateInputPicker/Atoms/CustomRangeInput.d.ts +3 -0
- package/dist/components/molecules/DateInputPicker/Atoms/PluginEspecialDates.d.ts +3 -0
- package/dist/components/molecules/DateInputPicker/DateInputPicker.d.ts +3 -0
- package/dist/components/molecules/DateInputPicker/Datelocate.d.ts +7 -0
- package/dist/components/molecules/DateInputPicker/IDateInputPicker.d.ts +42 -0
- package/dist/components/templates/SecondMain/SecondMain.d.ts +9 -0
- package/dist/components/templates/SecondMain/index.d.ts +1 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/reset.css +273 -273
- package/dist/tailwind.config.js +242 -242
- package/dist/tailwind.css +1 -1
- package/dist/tokens.css +160 -160
- package/dist/types/Template.d.ts +2 -2
- package/dist/types/Tokens.d.ts +4 -1
- package/dist/ui-react.mjs +9456 -7492
- package/dist/ui-react.umd.js +42 -34
- package/dist/vite-env.d.ts +2 -2
- package/package.json +110 -108
- package/dist/components/molecules/Selectable/select.d.ts +0 -27
package/README.md
CHANGED
|
@@ -1,126 +1,126 @@
|
|
|
1
|
-
<div align="center">
|
|
2
|
-
<img height="100" src="https://user-images.githubusercontent.com/38017835/197309416-fd4390a0-cfb6-41f3-ac26-10d067d92a25.png">
|
|
3
|
-
<h1 align="center">ui ecosystem react</h1>
|
|
4
|
-
<p>The home base for Aveonline design system, ui-react provides essential design resources for our developers to use in the Aveonline-branded interfaces that they create.</p>
|
|
5
|
-
<a href="https://ui-aveonline.netlify.app/">Go Storybook</a>
|
|
6
|
-
</div>
|
|
7
|
-
|
|
8
|
-
## Before started
|
|
9
|
-
|
|
10
|
-
For usage with tailwind config, install:
|
|
11
|
-
|
|
12
|
-
```shell
|
|
13
|
-
npm i @tailwindcss/forms -D
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
## Getting started
|
|
17
|
-
|
|
18
|
-
Working with all config from this library or only components availables
|
|
19
|
-
|
|
20
|
-
```shell
|
|
21
|
-
npm i @aveonline/ui-react
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## Usage with tailwind
|
|
25
|
-
|
|
26
|
-
Import things into your JS app from the `@aveonline/ui-react` package.
|
|
27
|
-
|
|
28
|
-
```ts
|
|
29
|
-
import { Button } from '@aveonline/ui-react'
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
`tailwind.config.js`
|
|
33
|
-
|
|
34
|
-
```ts
|
|
35
|
-
/** @type {import('tailwindcss').Config} */
|
|
36
|
-
|
|
37
|
-
const tailwindConfig = require('@aveonline/ui-react/tailwind.config.js')
|
|
38
|
-
const { content, ...all } = tailwindConfig
|
|
39
|
-
|
|
40
|
-
const config = {
|
|
41
|
-
content: [
|
|
42
|
-
...content,
|
|
43
|
-
'./pages/**/*.{ts,tsx}',
|
|
44
|
-
'./components/**/*.{ts,tsx}',
|
|
45
|
-
'./node_modules/@aveonline/ui-react/dist/*.{mjs,js}'
|
|
46
|
-
],
|
|
47
|
-
...all
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
module.exports = config
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## Usage css
|
|
54
|
-
|
|
55
|
-
Import things into your JS app from the `@aveonline/ui-react` package.
|
|
56
|
-
|
|
57
|
-
```css
|
|
58
|
-
/* global.css or tailwind.css local */
|
|
59
|
-
@tailwind base;
|
|
60
|
-
@tailwind components;
|
|
61
|
-
@tailwind utilities;
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
```ts
|
|
65
|
-
// import this lines at main.ts or root
|
|
66
|
-
import './global.css' // Reference tailwind local
|
|
67
|
-
import '@aveonline/ui-react/reset.css' // Only not usage tailwind
|
|
68
|
-
import '@aveonline/ui-react/tokens.css' // Required
|
|
69
|
-
import '@aveonline/ui-react/tailwind.css' // Required
|
|
70
|
-
import '@aveonline/ui-react/index.css' // Required
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
## Example usage
|
|
74
|
-
|
|
75
|
-
```html
|
|
76
|
-
<!-- Class from library -->
|
|
77
|
-
<div class="bg-letter-default">
|
|
78
|
-
<p class="text-letter-subdued">Hello human</p>
|
|
79
|
-
</div>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
## Developing @aveonline/ui-react
|
|
83
|
-
|
|
84
|
-
Developing locally against Storybook is easy; run `npm run storybook`.
|
|
85
|
-
|
|
86
|
-
```shell
|
|
87
|
-
npm i
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
Tests
|
|
91
|
-
|
|
92
|
-
Run `npm run test` to execute all unit test components.
|
|
93
|
-
|
|
94
|
-
We use `vitest` and `testing-library/react` for unit/integration tests and [Chromatic](https://www.chromaticqa.com/) for visual regression testing.
|
|
95
|
-
|
|
96
|
-
Open Storybook
|
|
97
|
-
|
|
98
|
-
```shell
|
|
99
|
-
npm run dev
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
ui-react production
|
|
103
|
-
|
|
104
|
-
```shell
|
|
105
|
-
npm run build
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
Storybook production
|
|
109
|
-
|
|
110
|
-
```shell
|
|
111
|
-
npm run build:storybook
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
Run test
|
|
115
|
-
|
|
116
|
-
```shell
|
|
117
|
-
npm run test
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
Run regression testing
|
|
121
|
-
|
|
122
|
-
- [Join](https://www.chromatic.com/library?appId=6362f0c0f36774d17ed0c3a0&inviteToken=4adce6358a9b439f8b636d0599e6db4b)
|
|
123
|
-
|
|
124
|
-
```shell
|
|
125
|
-
npm run chromatic
|
|
126
|
-
```
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img height="100" src="https://user-images.githubusercontent.com/38017835/197309416-fd4390a0-cfb6-41f3-ac26-10d067d92a25.png">
|
|
3
|
+
<h1 align="center">ui ecosystem react</h1>
|
|
4
|
+
<p>The home base for Aveonline design system, ui-react provides essential design resources for our developers to use in the Aveonline-branded interfaces that they create.</p>
|
|
5
|
+
<a href="https://ui-aveonline.netlify.app/">Go Storybook</a>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
## Before started
|
|
9
|
+
|
|
10
|
+
For usage with tailwind config, install:
|
|
11
|
+
|
|
12
|
+
```shell
|
|
13
|
+
npm i @tailwindcss/forms -D
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Getting started
|
|
17
|
+
|
|
18
|
+
Working with all config from this library or only components availables
|
|
19
|
+
|
|
20
|
+
```shell
|
|
21
|
+
npm i @aveonline/ui-react
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage with tailwind
|
|
25
|
+
|
|
26
|
+
Import things into your JS app from the `@aveonline/ui-react` package.
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
import { Button } from '@aveonline/ui-react'
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
`tailwind.config.js`
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
/** @type {import('tailwindcss').Config} */
|
|
36
|
+
|
|
37
|
+
const tailwindConfig = require('@aveonline/ui-react/tailwind.config.js')
|
|
38
|
+
const { content, ...all } = tailwindConfig
|
|
39
|
+
|
|
40
|
+
const config = {
|
|
41
|
+
content: [
|
|
42
|
+
...content,
|
|
43
|
+
'./pages/**/*.{ts,tsx}',
|
|
44
|
+
'./components/**/*.{ts,tsx}',
|
|
45
|
+
'./node_modules/@aveonline/ui-react/dist/*.{mjs,js}'
|
|
46
|
+
],
|
|
47
|
+
...all
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
module.exports = config
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Usage css
|
|
54
|
+
|
|
55
|
+
Import things into your JS app from the `@aveonline/ui-react` package.
|
|
56
|
+
|
|
57
|
+
```css
|
|
58
|
+
/* global.css or tailwind.css local */
|
|
59
|
+
@tailwind base;
|
|
60
|
+
@tailwind components;
|
|
61
|
+
@tailwind utilities;
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
```ts
|
|
65
|
+
// import this lines at main.ts or root
|
|
66
|
+
import './global.css' // Reference tailwind local
|
|
67
|
+
import '@aveonline/ui-react/reset.css' // Only not usage tailwind
|
|
68
|
+
import '@aveonline/ui-react/tokens.css' // Required
|
|
69
|
+
import '@aveonline/ui-react/tailwind.css' // Required
|
|
70
|
+
import '@aveonline/ui-react/index.css' // Required
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Example usage
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<!-- Class from library -->
|
|
77
|
+
<div class="bg-letter-default">
|
|
78
|
+
<p class="text-letter-subdued">Hello human</p>
|
|
79
|
+
</div>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Developing @aveonline/ui-react
|
|
83
|
+
|
|
84
|
+
Developing locally against Storybook is easy; run `npm run storybook`.
|
|
85
|
+
|
|
86
|
+
```shell
|
|
87
|
+
npm i
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Tests
|
|
91
|
+
|
|
92
|
+
Run `npm run test` to execute all unit test components.
|
|
93
|
+
|
|
94
|
+
We use `vitest` and `testing-library/react` for unit/integration tests and [Chromatic](https://www.chromaticqa.com/) for visual regression testing.
|
|
95
|
+
|
|
96
|
+
Open Storybook
|
|
97
|
+
|
|
98
|
+
```shell
|
|
99
|
+
npm run dev
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
ui-react production
|
|
103
|
+
|
|
104
|
+
```shell
|
|
105
|
+
npm run build
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
Storybook production
|
|
109
|
+
|
|
110
|
+
```shell
|
|
111
|
+
npm run build:storybook
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Run test
|
|
115
|
+
|
|
116
|
+
```shell
|
|
117
|
+
npm run test
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
Run regression testing
|
|
121
|
+
|
|
122
|
+
- [Join](https://www.chromatic.com/library?appId=6362f0c0f36774d17ed0c3a0&inviteToken=4adce6358a9b439f8b636d0599e6db4b)
|
|
123
|
+
|
|
124
|
+
```shell
|
|
125
|
+
npm run chromatic
|
|
126
|
+
```
|
|
@@ -6,5 +6,5 @@ declare type PropsType = React.HTMLProps<HTMLElement> & {
|
|
|
6
6
|
fullWidthContainer?: boolean;
|
|
7
7
|
classNameContainer?: string;
|
|
8
8
|
};
|
|
9
|
-
export declare const TooltipAnchor: React.ForwardRefExoticComponent<Pick<PropsType, "size" | "className" | "color" | "disabled" | "default" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "
|
|
9
|
+
export declare const TooltipAnchor: React.ForwardRefExoticComponent<Pick<PropsType, "size" | "className" | "color" | "disabled" | "default" | "children" | "title" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "pattern" | "src" | "alt" | "state" | "type" | "onClick" | "start" | "id" | "name" | "value" | "onChange" | "checked" | "target" | "hidden" | "as" | "htmlFor" | "kind" | "download" | "defaultChecked" | "role" | "tabIndex" | "aria-checked" | "aria-labelledby" | "aria-describedby" | "onKeyUp" | "onKeyPress" | "key" | "open" | "fullWidthContainer" | "classNameContainer" | "asChild" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "width" | "wmode" | "wrap" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLElement>>;
|
|
10
10
|
export {};
|
|
@@ -4,5 +4,5 @@ import { TooltipState } from './ITooltip';
|
|
|
4
4
|
declare type PropsType = React.HTMLProps<HTMLDivElement> & {
|
|
5
5
|
state: TooltipState;
|
|
6
6
|
} & IChildren;
|
|
7
|
-
export declare const TooltipFloat: React.ForwardRefExoticComponent<Pick<PropsType, "size" | "className" | "color" | "disabled" | "default" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "
|
|
7
|
+
export declare const TooltipFloat: React.ForwardRefExoticComponent<Pick<PropsType, "size" | "className" | "color" | "disabled" | "default" | "children" | "title" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "pattern" | "src" | "alt" | "state" | "type" | "onClick" | "start" | "id" | "name" | "value" | "onChange" | "checked" | "target" | "hidden" | "as" | "htmlFor" | "kind" | "download" | "defaultChecked" | "role" | "tabIndex" | "aria-checked" | "aria-labelledby" | "aria-describedby" | "onKeyUp" | "onKeyPress" | "key" | "open" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "width" | "wmode" | "wrap" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
|
|
8
8
|
export {};
|
|
@@ -32,9 +32,12 @@ export * from './molecules/DropdownFilterMultiple';
|
|
|
32
32
|
export * from './molecules/Table';
|
|
33
33
|
export * from './molecules/Table/atoms/CheckBoxTable';
|
|
34
34
|
export * from './molecules/DropdownButton';
|
|
35
|
+
export * from './molecules/DateInputPicker';
|
|
35
36
|
export * from './molecules/Card/Select';
|
|
37
|
+
export * from './molecules/Card/Simple';
|
|
36
38
|
export * from './molecules/CardHistory';
|
|
37
39
|
export * from './molecules/Filter/FilterSearchMultiple';
|
|
38
40
|
export * from './organisms/Navigation';
|
|
39
41
|
export * from './templates/Main';
|
|
40
42
|
export * from './templates/Shipment';
|
|
43
|
+
export * from './templates/SecondMain';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { IChildren } from '@/types';
|
|
2
|
+
interface IButtonCardSimple {
|
|
3
|
+
title?: string;
|
|
4
|
+
action?: () => void;
|
|
5
|
+
}
|
|
6
|
+
interface ICardSimple extends IChildren {
|
|
7
|
+
id: string;
|
|
8
|
+
description?: string;
|
|
9
|
+
title?: string;
|
|
10
|
+
size?: 'sm' | 'md';
|
|
11
|
+
button?: IButtonCardSimple;
|
|
12
|
+
}
|
|
13
|
+
export type { ICardSimple, IButtonCardSimple };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import DateObject from 'react-date-object';
|
|
2
|
+
import { FocusEvent, MouseEventHandler } from 'react';
|
|
3
|
+
declare type IValueInput = Array<DateObject> | Array<string> | string | DateObject | Array<null> | null;
|
|
4
|
+
interface IDateInputPickerType {
|
|
5
|
+
type: 'single' | 'multiple';
|
|
6
|
+
valueInput: (item: IValueInput) => void;
|
|
7
|
+
textInsideInput?: string;
|
|
8
|
+
isError?: boolean;
|
|
9
|
+
isDisable?: boolean;
|
|
10
|
+
}
|
|
11
|
+
interface ICustomInput {
|
|
12
|
+
openCalendar?: (event: FocusEvent<HTMLInputElement, Element>) => void;
|
|
13
|
+
value?: string | undefined;
|
|
14
|
+
handleValueChange?: (event: FocusEvent<HTMLInputElement, Element>) => void;
|
|
15
|
+
clickDelete?: () => void;
|
|
16
|
+
auxInitialValue: number;
|
|
17
|
+
textInsideInput?: string;
|
|
18
|
+
isError?: boolean;
|
|
19
|
+
isDisable?: boolean;
|
|
20
|
+
}
|
|
21
|
+
interface ICustomRangeInput {
|
|
22
|
+
openCalendar?: (event: FocusEvent<HTMLInputElement, Element>) => void;
|
|
23
|
+
handleValueChange?: (event: FocusEvent<HTMLInputElement, Element>) => void;
|
|
24
|
+
value?: Array<string> | string;
|
|
25
|
+
clickDelete?: () => void;
|
|
26
|
+
textInsideInput?: string;
|
|
27
|
+
isError?: boolean;
|
|
28
|
+
isDisable?: boolean;
|
|
29
|
+
}
|
|
30
|
+
interface IPluginEspecialDates {
|
|
31
|
+
functionCumpustonPlugin: (value: string | null, setValuesInput: Array<string> | Array<DateObject> | null) => void;
|
|
32
|
+
initialValue: string | null;
|
|
33
|
+
}
|
|
34
|
+
interface IItemSpecialDates {
|
|
35
|
+
name: string;
|
|
36
|
+
click: () => void;
|
|
37
|
+
}
|
|
38
|
+
interface ICustomButton {
|
|
39
|
+
direction?: string;
|
|
40
|
+
handleClick?: MouseEventHandler<HTMLButtonElement>;
|
|
41
|
+
}
|
|
42
|
+
export { IValueInput, DateObject, IDateInputPickerType, IPluginEspecialDates, ICustomInput, ICustomRangeInput, ICustomButton, IItemSpecialDates };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ITemplate } from '../../../types';
|
|
2
|
+
/**
|
|
3
|
+
* Template: Layout main
|
|
4
|
+
*/
|
|
5
|
+
declare function Layout({ children, className, title, ...rest }: ITemplate): JSX.Element;
|
|
6
|
+
declare namespace Layout {
|
|
7
|
+
var Main: ({ children, className, ...rest }: ITemplate) => JSX.Element;
|
|
8
|
+
}
|
|
9
|
+
export default Layout;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as LayoutSecondMain } from './SecondMain';
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[type=radio]:checked{background-image:url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D'0%200%2016%2016'%20fill%3D'%232C6ECB'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'4'%2F%3E%3C%2Fsvg%3E")}[type=radio]:checked:disabled{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:disabled{background-image:url("data:image/svg+xml;utf8, %3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%224%22%20fill%3D%22white%22%20fill-opacity%3D%220.01%22%2F%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_1575_10817)%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.72%206.23998C14.8872%206.4057%2014.9862%206.62814%2014.9973%206.8633C15.0084%207.09847%2014.9309%207.32924%2014.78%207.50998L9.41%2013.71C9.33315%2013.797%209.23949%2013.8675%209.13466%2013.9174C9.02982%2013.9672%208.91598%2013.9953%208.8%2014C8.68415%2014.0029%208.56899%2013.9813%208.46213%2013.9364C8.35526%2013.8916%208.2591%2013.8247%208.18%2013.74L5.25%2010.64C5.10033%2010.4603%205.01837%2010.2338%205.01837%209.99998C5.01837%209.76613%205.10033%209.53967%205.25%209.35998C5.32761%209.27734%205.42134%209.21148%205.52539%209.16646C5.62945%209.12143%205.74162%209.09821%205.855%209.09821C5.96837%209.09821%206.08055%209.12143%206.1846%209.16646C6.28865%209.21148%206.38238%209.27734%206.46%209.35998L8.75%2011.79L13.52%206.28998C13.5932%206.20432%2013.6834%206.13468%2013.7847%206.0854C13.8861%206.03613%2013.9965%206.00827%2014.1091%206.00358C14.2217%205.99889%2014.3341%206.01746%2014.4392%206.05813C14.5443%206.09881%2014.6399%206.16071%2014.72%206.23998V6.23998Z%22%20fill%3D%22%23D6D6D6%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0_1575_10817%22%3E%0A%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22white%22%20transform%3D%22translate(5%205)%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A%0A")}.ui__spinner{animation:ui__spinner_rotation 1.5s linear infinite}@keyframes ui__spinner_rotation{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.table--tbody tr:first-child>td{border-color:transparent!important}.table--tbody tr:last-child td:first-child{border-radius:0 0 0 10px}.table--tbody tr:last-child td:last-child{border-radius:0 0 10px}
|
|
1
|
+
[type=radio]:checked{background-image:url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D'0%200%2016%2016'%20fill%3D'%232C6ECB'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'4'%2F%3E%3C%2Fsvg%3E")}[type=radio]:checked:disabled{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:disabled{background-image:url("data:image/svg+xml;utf8, %3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%224%22%20fill%3D%22white%22%20fill-opacity%3D%220.01%22%2F%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_1575_10817)%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.72%206.23998C14.8872%206.4057%2014.9862%206.62814%2014.9973%206.8633C15.0084%207.09847%2014.9309%207.32924%2014.78%207.50998L9.41%2013.71C9.33315%2013.797%209.23949%2013.8675%209.13466%2013.9174C9.02982%2013.9672%208.91598%2013.9953%208.8%2014C8.68415%2014.0029%208.56899%2013.9813%208.46213%2013.9364C8.35526%2013.8916%208.2591%2013.8247%208.18%2013.74L5.25%2010.64C5.10033%2010.4603%205.01837%2010.2338%205.01837%209.99998C5.01837%209.76613%205.10033%209.53967%205.25%209.35998C5.32761%209.27734%205.42134%209.21148%205.52539%209.16646C5.62945%209.12143%205.74162%209.09821%205.855%209.09821C5.96837%209.09821%206.08055%209.12143%206.1846%209.16646C6.28865%209.21148%206.38238%209.27734%206.46%209.35998L8.75%2011.79L13.52%206.28998C13.5932%206.20432%2013.6834%206.13468%2013.7847%206.0854C13.8861%206.03613%2013.9965%206.00827%2014.1091%206.00358C14.2217%205.99889%2014.3341%206.01746%2014.4392%206.05813C14.5443%206.09881%2014.6399%206.16071%2014.72%206.23998V6.23998Z%22%20fill%3D%22%23D6D6D6%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0_1575_10817%22%3E%0A%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22white%22%20transform%3D%22translate(5%205)%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A%0A")}.ui__spinner{animation:ui__spinner_rotation 1.5s linear infinite}@keyframes ui__spinner_rotation{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.table--tbody tr:first-child>td{border-color:transparent!important}.table--tbody tr:last-child td:first-child{border-radius:0 0 0 10px}.table--tbody tr:last-child td:last-child{border-radius:0 0 10px}.scrollStyle-scrollbar-customized-scrollbar::-webkit-scrollbar{background-color:#fff!important;height:8px!important;width:5px!important}.scrollStyle-scrollbar-customized-scrollbar::-webkit-scrollbar-thumb{background:gray!important}.rmdp-day{color:#4a4f54!important}.rmdp-day.rmdp-range.start{background:#007aff!important;border:transparent!important;color:#fff!important}.rmdp-range{background-color:#ddeaf7;border:transparent!important;box-shadow:none!important;color:#4a4f54!important}.rmdp-day.rmdp-range.end{background:#007aff!important;border:transparent!important;color:#fff!important}.rmdp-week-day{color:#797c81!important}.rmdp-day.rmdp-selected span:not(.highlight){border-radius:4px!important}.rmdp-day.rmdp-today span{background-color:var(--colors-action-primary-pressed)!important}
|
package/dist/index.d.ts
CHANGED
|
@@ -32,6 +32,7 @@ export * from './components/molecules/DropdownFilterMultiple';
|
|
|
32
32
|
export * from './components/molecules/Table';
|
|
33
33
|
export * from './components/molecules/Table/atoms/CheckBoxTable';
|
|
34
34
|
export * from './components/molecules/DropdownButton';
|
|
35
|
+
export * from './components/molecules/DateInputPicker';
|
|
35
36
|
export * from './components/molecules/Card/Select';
|
|
36
37
|
export * from './components/molecules/CardHistory';
|
|
37
38
|
export * from './components/molecules/Filter/FilterSearchMultiple';
|