pcm-shared-components 0.0.180 → 0.0.183
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/ImageStack/index.js +76 -0
- package/dist/components/ImageStack/storybook/index.docs.mdx +14 -0
- package/dist/components/ImageStack/storybook/index.stories.js +35 -0
- package/dist/components/Layout/SimpleTab/index.js +80 -70
- package/dist/styles/tailwind.css +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Tooltip from '@mui/material/Tooltip';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import { ThemeProvider } from '@mui/system';
|
|
5
|
+
import { createTheme, useTheme } from '@mui/material/styles';
|
|
6
|
+
|
|
7
|
+
const ImageStack = props => {
|
|
8
|
+
//?--------------------------------------------------------
|
|
9
|
+
//?--------------------------------------------------------
|
|
10
|
+
//? url paths need to be predefined on the server: src/workers/Parameters/parameters_get.php
|
|
11
|
+
//?--------------------------------------------------------
|
|
12
|
+
//?--------------------------------------------------------
|
|
13
|
+
const {
|
|
14
|
+
images = [],
|
|
15
|
+
imageSize,
|
|
16
|
+
orientation,
|
|
17
|
+
theme
|
|
18
|
+
} = props;
|
|
19
|
+
const compTheme = theme ? theme : useTheme();
|
|
20
|
+
const defaultTheme = createTheme(compTheme);
|
|
21
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
22
|
+
theme: defaultTheme
|
|
23
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
24
|
+
className: ""
|
|
25
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
26
|
+
className: `flex ${orientation === 'horizontal' ? 'flex-row' : 'flex-col'} overflow-hidden `
|
|
27
|
+
}, images.map((img, idx) => /*#__PURE__*/React.createElement(Tooltip, {
|
|
28
|
+
key: 'itt_' + idx,
|
|
29
|
+
arrow: true,
|
|
30
|
+
className: "",
|
|
31
|
+
title: /*#__PURE__*/React.createElement("div", {
|
|
32
|
+
className: ""
|
|
33
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
34
|
+
loading: "lazy",
|
|
35
|
+
className: "bg-black w-100 min-w-100 max-w-100 ",
|
|
36
|
+
alt: "",
|
|
37
|
+
src: img,
|
|
38
|
+
key: 'image_stack_preview_2_' + idx
|
|
39
|
+
}))
|
|
40
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
41
|
+
loading: "lazy",
|
|
42
|
+
className: "rounded-full border-gray-200 bg-white",
|
|
43
|
+
style: {
|
|
44
|
+
zIndex: images.length - idx,
|
|
45
|
+
width: imageSize,
|
|
46
|
+
height: imageSize,
|
|
47
|
+
marginLeft: `${orientation === 'horizontal' ? `-${idx > 0 ? imageSize / 3 : 0}px` : 0}`,
|
|
48
|
+
marginTop: `${orientation === 'horizontal' ? 0 : `-${idx > 0 ? imageSize / 3 : 0}px`}`,
|
|
49
|
+
borderWidth: `${Number(imageSize / .24 / 100).toFixed(0)}px !important`
|
|
50
|
+
},
|
|
51
|
+
alt: "",
|
|
52
|
+
src: img,
|
|
53
|
+
key: 'image_stack_preview_' + idx
|
|
54
|
+
}))))));
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export default ImageStack;
|
|
58
|
+
ImageStack.defaultProps = {
|
|
59
|
+
images: [],
|
|
60
|
+
imageSize: 60,
|
|
61
|
+
orientation: 'horizontal',
|
|
62
|
+
theme: undefined
|
|
63
|
+
};
|
|
64
|
+
ImageStack.propTypes = {
|
|
65
|
+
/** An array of images with the full URL and image name. */
|
|
66
|
+
images: PropTypes.array,
|
|
67
|
+
|
|
68
|
+
/** This is the height and width of the image. Needs to be a cube for the stack circle to work properly. */
|
|
69
|
+
imageSize: PropTypes.number,
|
|
70
|
+
|
|
71
|
+
/** This is orientation of the image stack */
|
|
72
|
+
orientation: PropTypes.oneOf(['vertical', 'horizontal']),
|
|
73
|
+
|
|
74
|
+
/** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
|
|
75
|
+
theme: PropTypes.object
|
|
76
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
|
|
2
|
+
import ImageStack from '..'
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
# ImageStack
|
|
6
|
+
Simple image stack with image preview on hover
|
|
7
|
+
|
|
8
|
+
## Importing the component in your project.
|
|
9
|
+
```js
|
|
10
|
+
import {ImageStack} from 'pcm-shared-components';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<ArgsTable of={ImageStack} />
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import ImageStack from '..';
|
|
2
|
+
import IndexDocs from './index.docs.mdx';
|
|
3
|
+
import { faker } from '@faker-js/faker';
|
|
4
|
+
export const IMAGES = [];
|
|
5
|
+
Array.from({
|
|
6
|
+
length: 10
|
|
7
|
+
}).forEach(() => {
|
|
8
|
+
IMAGES.push(faker.image.avatar());
|
|
9
|
+
});
|
|
10
|
+
export default {
|
|
11
|
+
title: 'Image/ImageStack',
|
|
12
|
+
component: ImageStack,
|
|
13
|
+
argTypes: {},
|
|
14
|
+
parameters: {
|
|
15
|
+
docs: {
|
|
16
|
+
// inlineStories: true,
|
|
17
|
+
page: IndexDocs
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const ImageStackTemplate = args => /*#__PURE__*/React.createElement(ImageStack, args);
|
|
23
|
+
|
|
24
|
+
export const ImageStackHorizontal = ImageStackTemplate.bind({});
|
|
25
|
+
ImageStackHorizontal.args = {
|
|
26
|
+
orientation: 'horizontal',
|
|
27
|
+
imageSize: 40,
|
|
28
|
+
images: IMAGES
|
|
29
|
+
};
|
|
30
|
+
export const ImageStackVertical = ImageStackTemplate.bind({});
|
|
31
|
+
ImageStackVertical.args = {
|
|
32
|
+
orientation: 'vertical',
|
|
33
|
+
imageSize: 60,
|
|
34
|
+
images: IMAGES
|
|
35
|
+
};
|
|
@@ -8,51 +8,41 @@ import Tab from '@mui/material/Tab';
|
|
|
8
8
|
import { ThemeProvider } from '@mui/system';
|
|
9
9
|
import { createTheme, useTheme } from '@mui/material/styles';
|
|
10
10
|
import TabPanel from './components/TabPanel';
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
import { makeStyles } from '@mui/styles';
|
|
12
|
+
const useStyles = makeStyles(() => ({
|
|
13
|
+
root: {
|
|
14
|
+
height: ({
|
|
15
|
+
tabHeight
|
|
16
|
+
}) => tabHeight,
|
|
17
|
+
minHeight: ({
|
|
18
|
+
tabHeight
|
|
19
|
+
}) => tabHeight,
|
|
20
|
+
backgroundColor: 'transparent' // textTransform: 'none', //changes so the text is not upper cased
|
|
21
|
+
// color: 'white !important',
|
|
22
|
+
// '&:focus': {
|
|
23
|
+
// color: 'orange !important',
|
|
24
|
+
// },
|
|
14
25
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
### Using the component
|
|
22
|
-
Note: the tab index id and setter for the id are managed by the parent component.
|
|
23
|
-
```//PitchCamp shared component
|
|
24
|
-
<SimpleTab
|
|
25
|
-
childrenTabs:
|
|
26
|
-
[
|
|
27
|
-
{
|
|
28
|
-
tabTitle: 'Tab one',
|
|
29
|
-
tabPanel: <>This is tab one</>
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
tabTitle: 'Tab two',
|
|
33
|
-
tabPanel: <>This is tab Two</>
|
|
34
|
-
}
|
|
35
|
-
],
|
|
36
|
-
selectedTabIndex: selectedTabIdx,
|
|
37
|
-
setSelectedTabIndex: handleSetIndex,
|
|
38
|
-
/>
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
*/
|
|
26
|
+
},
|
|
27
|
+
indicator: {
|
|
28
|
+
height: 3,
|
|
29
|
+
borderRadius: 25 // backgroundColor: 'orange',
|
|
42
30
|
|
|
31
|
+
}
|
|
32
|
+
}));
|
|
43
33
|
export const SimpleTab = props => {
|
|
44
|
-
const [selectedTabIdx, setSelectedTabIdx] = useState(0);
|
|
45
|
-
|
|
46
|
-
const handleSetIndex = value => {
|
|
47
|
-
setSelectedTabIdx(value);
|
|
48
|
-
};
|
|
49
|
-
|
|
50
34
|
const {
|
|
51
35
|
childrenTabs,
|
|
52
36
|
selectedTabIndex,
|
|
53
37
|
setSelectedTabIndex,
|
|
38
|
+
variant,
|
|
39
|
+
tabStyles,
|
|
40
|
+
tabsWrapperClassName,
|
|
54
41
|
theme
|
|
55
|
-
} = props;
|
|
42
|
+
} = props;
|
|
43
|
+
const classes = useStyles({
|
|
44
|
+
tabHeight: variant === 'dense' ? 24 : 48
|
|
45
|
+
}); //Uses the default mui theme if none is passed.
|
|
56
46
|
|
|
57
47
|
const compTheme = theme ? theme : useTheme();
|
|
58
48
|
const defaultTheme = createTheme(compTheme);
|
|
@@ -68,44 +58,18 @@ export const SimpleTab = props => {
|
|
|
68
58
|
};
|
|
69
59
|
};
|
|
70
60
|
|
|
71
|
-
SimpleTab.defaultProps = {
|
|
72
|
-
childrenTabs: [],
|
|
73
|
-
selectedTabIndex: selectedTabIdx,
|
|
74
|
-
setSelectedTabIndex: handleSetIndex,
|
|
75
|
-
theme: undefined
|
|
76
|
-
};
|
|
77
|
-
SimpleTab.propTypes = {
|
|
78
|
-
/** An array of object that determines the tab title and tab content.
|
|
79
|
-
*
|
|
80
|
-
* - The childrenTabs are object withing an array
|
|
81
|
-
*
|
|
82
|
-
```
|
|
83
|
-
[{tabTitle:'something',tabPanel:<Object/>}]
|
|
84
|
-
```
|
|
85
|
-
*/
|
|
86
|
-
childrenTabs: PropTypes.array,
|
|
87
|
-
|
|
88
|
-
/** Is the index value of the current selected tab */
|
|
89
|
-
selectedTabIndex: PropTypes.number,
|
|
90
|
-
|
|
91
|
-
/** The setter for selectedTabIndex: receives one parameter and it's the ```value``` of the index*/
|
|
92
|
-
setSelectedTabIndex: PropTypes.func,
|
|
93
|
-
|
|
94
|
-
/** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
|
|
95
|
-
theme: PropTypes.object
|
|
96
|
-
};
|
|
97
61
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
98
62
|
theme: defaultTheme
|
|
99
63
|
}, /*#__PURE__*/React.createElement("div", {
|
|
100
|
-
className: "flex flex-col w-full h-full overflow-hidden"
|
|
64
|
+
className: "flex flex-col w-full h-full overflow-hidden "
|
|
101
65
|
}, /*#__PURE__*/React.createElement(AppBar, {
|
|
102
66
|
position: "static",
|
|
103
67
|
color: "default",
|
|
104
|
-
elevation: 0
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
68
|
+
elevation: 0
|
|
69
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
70
|
+
className: tabsWrapperClassName
|
|
108
71
|
}, /*#__PURE__*/React.createElement(Tabs, {
|
|
72
|
+
classes: classes,
|
|
109
73
|
value: selectedTabIndex,
|
|
110
74
|
onChange: handleChange,
|
|
111
75
|
indicatorColor: "primary",
|
|
@@ -114,13 +78,59 @@ export const SimpleTab = props => {
|
|
|
114
78
|
scrollButtons: "auto",
|
|
115
79
|
"aria-label": ""
|
|
116
80
|
}, childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(Tab, _extends({
|
|
81
|
+
classes: classes,
|
|
82
|
+
style: tabStyles,
|
|
117
83
|
label: ct.tabTitle
|
|
118
84
|
}, a11yProps(idx), {
|
|
119
85
|
key: `simple_tabs_${idx}`
|
|
120
|
-
}))))), childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(TabPanel, {
|
|
86
|
+
})))))), childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(TabPanel, {
|
|
121
87
|
value: selectedTabIndex,
|
|
122
88
|
index: idx,
|
|
123
89
|
key: `simple_tabs_panels_${idx}`
|
|
124
90
|
}, ct.tabPanel))));
|
|
125
91
|
};
|
|
126
|
-
export default SimpleTab;
|
|
92
|
+
export default SimpleTab;
|
|
93
|
+
SimpleTab.defaultProps = {
|
|
94
|
+
childrenTabs: [],
|
|
95
|
+
selectedTabIndex: 0,
|
|
96
|
+
setSelectedTabIndex: () => {},
|
|
97
|
+
variant: 'normal',
|
|
98
|
+
tabStyles: {},
|
|
99
|
+
tabsWrapperClassName: ' bg-white ',
|
|
100
|
+
theme: undefined
|
|
101
|
+
};
|
|
102
|
+
SimpleTab.propTypes = {
|
|
103
|
+
/** An array of object that determines the tab title and tab content.
|
|
104
|
+
*
|
|
105
|
+
* - The childrenTabs are object withing an array
|
|
106
|
+
*
|
|
107
|
+
```
|
|
108
|
+
[{tabTitle:'something',tabPanel:<Object/>}]
|
|
109
|
+
```
|
|
110
|
+
*/
|
|
111
|
+
childrenTabs: PropTypes.array,
|
|
112
|
+
|
|
113
|
+
/** Controls the heigh and spacing of the tab control */
|
|
114
|
+
variant: PropTypes.oneOf(['dense', 'normal']),
|
|
115
|
+
|
|
116
|
+
/** Is the index value of the current selected tab */
|
|
117
|
+
selectedTabIndex: PropTypes.number,
|
|
118
|
+
|
|
119
|
+
/** The setter for selectedTabIndex: receives one parameter and it's the ```value``` of the index*/
|
|
120
|
+
setSelectedTabIndex: PropTypes.func,
|
|
121
|
+
|
|
122
|
+
/** Additional classes passed to the Div wrapper of the <Tabs></Tabs> component.
|
|
123
|
+
* Example:
|
|
124
|
+
* - Center tabs 'flex flex-row justify-center w-full'
|
|
125
|
+
* - Right tabs 'flex flex-row justify-end w-full'
|
|
126
|
+
* - Gray background 'bg-gray-200'
|
|
127
|
+
*/
|
|
128
|
+
tabsWrapperClassName: PropTypes.string,
|
|
129
|
+
|
|
130
|
+
/** Additional styles to be applied to the Tab component
|
|
131
|
+
* Example: {margin:'auto'} */
|
|
132
|
+
tabStyles: PropTypes.object,
|
|
133
|
+
|
|
134
|
+
/** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
|
|
135
|
+
theme: PropTypes.object
|
|
136
|
+
};
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-4{margin-top:.4rem;margin-bottom:.4rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.ml-0{margin-left:0}.mr-0{margin-right:0}.ml-4{margin-left:.4rem}.mt-12{margin-top:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mr-12{margin-right:1.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.ml-12{margin-left:1.2rem}.mb-24{margin-bottom:2.4rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.
|
|
1
|
+
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-4{margin-top:.4rem;margin-bottom:.4rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.ml-0{margin-left:0}.mr-0{margin-right:0}.ml-4{margin-left:.4rem}.mt-12{margin-top:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mr-12{margin-right:1.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.ml-12{margin-left:1.2rem}.mb-24{margin-bottom:2.4rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.w-auto{width:auto}.w-1\/2{width:50%}.w-2\/5{width:40%}.grow{flex-grow:1}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{overscroll-behavior:none}.rounded-full{border-radius:9999px}.rounded{border-radius:.4rem}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-2{border-width:2px}.border-gray-200{--tw-border-opacity:1;border-color:rgb(238 238 238/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.bg-black{--tw-bg-opacity:1;background-color:rgb(34 41 47/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity))}.bg-yellow-100\/50{background-color:#fff9c480}.p-6{padding:.6rem}.px-4{padding-left:.4rem;padding-right:.4rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.px-2{padding-left:.2rem;padding-right:.2rem}.pt-12{padding-top:1.2rem}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pb-4{padding-bottom:.4rem}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-2xl{line-height:3.2rem}.text-24,.text-2xl{font-size:2.4rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.drop-shadow-none,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (min-width:960px){.md\:pt-0{padding-top:0}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pcm-shared-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.183",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"babel": {
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"@babel/core": "^7.17.5",
|
|
31
31
|
"@babel/preset-env": "^7.16.11",
|
|
32
32
|
"@babel/preset-react": "^7.16.7",
|
|
33
|
+
"@faker-js/faker": "^7.5.0",
|
|
33
34
|
"@rollup/plugin-babel": "^5.3.1",
|
|
34
35
|
"@storybook/addon-a11y": "^6.5.9",
|
|
35
36
|
"@storybook/addon-actions": "^6.5.9",
|