pcm-shared-components 0.0.21 → 0.0.24
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.
|
@@ -3,11 +3,29 @@ import { makeStyles } from '@mui/styles';
|
|
|
3
3
|
import Fab from '@mui/material/Fab';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import Tooltip from '@mui/material/Tooltip';
|
|
6
|
-
import clsx from 'clsx';
|
|
7
|
-
|
|
6
|
+
import clsx from 'clsx';
|
|
7
|
+
import '../../../styles/tailwind.css';
|
|
8
|
+
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
8
9
|
const useStyles = makeStyles(() => ({
|
|
9
10
|
rootFabElement: {
|
|
10
|
-
margin: 2
|
|
11
|
+
margin: 2,
|
|
12
|
+
backgroundColor: ({
|
|
13
|
+
backgroundColor
|
|
14
|
+
}) => backgroundColor,
|
|
15
|
+
'&:hover': {
|
|
16
|
+
background: ({
|
|
17
|
+
hoverBackgroundColor
|
|
18
|
+
}) => hoverBackgroundColor,
|
|
19
|
+
color: ({
|
|
20
|
+
hoverTextColor
|
|
21
|
+
}) => hoverTextColor
|
|
22
|
+
},
|
|
23
|
+
boxShadow: ({
|
|
24
|
+
boxShadow
|
|
25
|
+
}) => boxShadow ? '' : 'none',
|
|
26
|
+
color: ({
|
|
27
|
+
textColor
|
|
28
|
+
}) => textColor
|
|
11
29
|
}
|
|
12
30
|
}));
|
|
13
31
|
|
|
@@ -45,11 +63,11 @@ const CustomFab = props => {
|
|
|
45
63
|
export default /*#__PURE__*/memo(CustomFab);
|
|
46
64
|
CustomFab.defaultProps = {
|
|
47
65
|
onClick: () => {},
|
|
48
|
-
Icon:
|
|
66
|
+
Icon: MoreVertIcon,
|
|
49
67
|
iconLocation: 'left',
|
|
50
68
|
buttonText: '',
|
|
51
69
|
variant: 'circular',
|
|
52
|
-
boxShadow:
|
|
70
|
+
boxShadow: true,
|
|
53
71
|
size: 'small',
|
|
54
72
|
tooltipText: '',
|
|
55
73
|
backgroundColor: undefined,
|
|
@@ -79,7 +97,7 @@ CustomFab.propTypes = {
|
|
|
79
97
|
tooltipText: PropTypes.string,
|
|
80
98
|
|
|
81
99
|
/** Display the drop shadow or not [none or undefined] */
|
|
82
|
-
boxShadow: PropTypes.
|
|
100
|
+
boxShadow: PropTypes.bool,
|
|
83
101
|
|
|
84
102
|
/** Background color */
|
|
85
103
|
backgroundColor: PropTypes.string,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import CustomFab from '../CustomFab/CustomFab';
|
|
3
3
|
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
|
|
4
|
-
import PropTypes from 'prop-types';
|
|
5
|
-
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import '../../../styles/tailwind.css';
|
|
6
6
|
export const HelpButton = props => {
|
|
7
7
|
const {
|
|
8
8
|
onClickLink,
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
import lightBlue from '@mui/material/colors/lightBlue';
|
|
2
|
+
import red from '@mui/material/colors/red';
|
|
3
|
+
const fuseDark = {
|
|
4
|
+
50: '#eceeec',
|
|
5
|
+
100: '#96c545',
|
|
6
|
+
200: '#72b05c',
|
|
7
|
+
300: '#7d8c7d',
|
|
8
|
+
400: '#556f4c',
|
|
9
|
+
500: '#3d523c',
|
|
10
|
+
600: '#384835',
|
|
11
|
+
700: '#f1632f',
|
|
12
|
+
800: '#293326',
|
|
13
|
+
900: '#21291e',
|
|
14
|
+
A100: '#96c545',
|
|
15
|
+
A200: '#72b05c',
|
|
16
|
+
A400: '#556f4c',
|
|
17
|
+
A700: '#f1632f'
|
|
18
|
+
};
|
|
19
|
+
export const theme = {
|
|
20
|
+
default: {
|
|
21
|
+
palette: {
|
|
22
|
+
type: 'light',
|
|
23
|
+
primary: fuseDark,
|
|
24
|
+
secondary: {
|
|
25
|
+
light: lightBlue[400],
|
|
26
|
+
main: lightBlue[600],
|
|
27
|
+
dark: lightBlue[700]
|
|
28
|
+
},
|
|
29
|
+
error: red
|
|
30
|
+
},
|
|
31
|
+
status: {
|
|
32
|
+
danger: 'orange'
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
sunset: {
|
|
36
|
+
palette: {
|
|
37
|
+
type: 'light',
|
|
38
|
+
primary: {
|
|
39
|
+
light: '#ff908b',
|
|
40
|
+
main: '#d0605e',
|
|
41
|
+
dark: '#9b3134'
|
|
42
|
+
},
|
|
43
|
+
secondary: {
|
|
44
|
+
light: '#c76a1d',
|
|
45
|
+
main: '#ff994c',
|
|
46
|
+
dark: '#ffca7b',
|
|
47
|
+
contrastText: '#fff'
|
|
48
|
+
},
|
|
49
|
+
error: red
|
|
50
|
+
},
|
|
51
|
+
status: {
|
|
52
|
+
danger: 'orange'
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
greeny: {
|
|
56
|
+
palette: {
|
|
57
|
+
type: 'light',
|
|
58
|
+
primary: {
|
|
59
|
+
light: '#6cabd4',
|
|
60
|
+
main: '#387ca3',
|
|
61
|
+
dark: '#005074'
|
|
62
|
+
},
|
|
63
|
+
secondary: {
|
|
64
|
+
light: '#89f6cf',
|
|
65
|
+
main: '#55c39e',
|
|
66
|
+
dark: '#159270',
|
|
67
|
+
contrastText: '#fff'
|
|
68
|
+
},
|
|
69
|
+
error: red
|
|
70
|
+
},
|
|
71
|
+
status: {
|
|
72
|
+
danger: 'orange'
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
beach: {
|
|
76
|
+
palette: {
|
|
77
|
+
type: 'light',
|
|
78
|
+
primary: {
|
|
79
|
+
light: '#c4d8dd',
|
|
80
|
+
main: '#93a7ab',
|
|
81
|
+
dark: '#65787c',
|
|
82
|
+
contrastText: '#fff'
|
|
83
|
+
},
|
|
84
|
+
secondary: {
|
|
85
|
+
light: '#ffb281',
|
|
86
|
+
main: '#f18153',
|
|
87
|
+
dark: '#ba5228',
|
|
88
|
+
contrastText: '#fff'
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
pitchCamp: {
|
|
93
|
+
palette: {
|
|
94
|
+
type: 'light',
|
|
95
|
+
primary: {
|
|
96
|
+
light: '#96c545',
|
|
97
|
+
main: '#72b05c',
|
|
98
|
+
dark: '#556f4c',
|
|
99
|
+
contrastText: '#fff'
|
|
100
|
+
},
|
|
101
|
+
secondary: {
|
|
102
|
+
light: '#ffb883',
|
|
103
|
+
main: '#f1632f',
|
|
104
|
+
dark: '#dc3f05'
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
sweetHues: {
|
|
109
|
+
palette: {
|
|
110
|
+
type: 'light',
|
|
111
|
+
primary: {
|
|
112
|
+
light: '#d5c1eb',
|
|
113
|
+
main: '#a391b9',
|
|
114
|
+
dark: '#746389',
|
|
115
|
+
contrastText: '#fff'
|
|
116
|
+
},
|
|
117
|
+
secondary: {
|
|
118
|
+
light: '#90afd4',
|
|
119
|
+
main: '#6080a3',
|
|
120
|
+
dark: '#325474'
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
},
|
|
124
|
+
defaultDark: {
|
|
125
|
+
palette: {
|
|
126
|
+
type: 'dark',
|
|
127
|
+
primary: fuseDark,
|
|
128
|
+
secondary: {
|
|
129
|
+
light: lightBlue[400],
|
|
130
|
+
main: lightBlue[600],
|
|
131
|
+
dark: lightBlue[700]
|
|
132
|
+
},
|
|
133
|
+
error: red
|
|
134
|
+
},
|
|
135
|
+
status: {
|
|
136
|
+
danger: 'orange'
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
deepOcean: {
|
|
140
|
+
palette: {
|
|
141
|
+
type: 'dark',
|
|
142
|
+
primary: {
|
|
143
|
+
light: '#8f53e7',
|
|
144
|
+
main: '#5a24b4',
|
|
145
|
+
dark: '#1e0083'
|
|
146
|
+
},
|
|
147
|
+
secondary: {
|
|
148
|
+
light: '#ff61ff',
|
|
149
|
+
main: '#fe00e9',
|
|
150
|
+
dark: '#c600b6',
|
|
151
|
+
contrastText: '#fff'
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
slate: {
|
|
156
|
+
palette: {
|
|
157
|
+
type: 'dark',
|
|
158
|
+
primary: {
|
|
159
|
+
light: '#86fff7',
|
|
160
|
+
main: '#4ecdc4',
|
|
161
|
+
dark: '#009b94'
|
|
162
|
+
},
|
|
163
|
+
secondary: {
|
|
164
|
+
light: '#ff9d99',
|
|
165
|
+
main: '#ff6b6b',
|
|
166
|
+
dark: '#c73840',
|
|
167
|
+
contrastText: '#fff'
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
};
|
|
172
|
+
export default theme;
|
|
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
|
|
|
2
2
|
import * as Prism from 'prismjs';
|
|
3
3
|
import { memo, useEffect, useRef } from 'react';
|
|
4
4
|
import './prism-languages';
|
|
5
|
-
import PropTypes from 'prop-types';
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
6
|
+
import '../../../styles/tailwind.css';
|
|
7
|
+
import '../../../styles/prism.css';
|
|
8
8
|
export const CodeHighlight = props => {
|
|
9
9
|
const domNode = useRef(null);
|
|
10
10
|
const source = useRef(trimCode());
|
package/dist/index.js
CHANGED
|
@@ -2,4 +2,5 @@ import TestButton from './components/Buttons/TestButton';
|
|
|
2
2
|
import CodeHighlight from './components/Tools/CodeHighlight/CodeHighlight';
|
|
3
3
|
import CustomFab from './components/Buttons/CustomFab/CustomFab';
|
|
4
4
|
import HelpButton from './components/Buttons/HelpButton/HelpButton';
|
|
5
|
-
|
|
5
|
+
import theme from './components/Theme/theme';
|
|
6
|
+
export { TestButton, CodeHighlight, CustomFab, HelpButton, theme };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pcm-shared-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.24",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"babel": {
|
|
@@ -30,7 +30,8 @@
|
|
|
30
30
|
"@babel/preset-env": "^7.16.11",
|
|
31
31
|
"@babel/preset-react": "^7.16.7",
|
|
32
32
|
"@rollup/plugin-babel": "^5.3.1",
|
|
33
|
-
"@storybook/addon-actions": "^6.4.
|
|
33
|
+
"@storybook/addon-actions": "^6.4.19",
|
|
34
|
+
"@storybook/addon-console": "^1.2.3",
|
|
34
35
|
"@storybook/addon-essentials": "^6.4.9",
|
|
35
36
|
"@storybook/addon-links": "^6.4.9",
|
|
36
37
|
"@storybook/addon-postcss": "^2.0.0",
|