@learningpool/ui 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/DataDisplay/Chip/Chip.d.ts +6 -0
- package/components/DataDisplay/Chip/Chip.js +29 -0
- package/components/DataDisplay/Chip/ChipStyles.d.ts +7 -0
- package/components/DataDisplay/Chip/ChipStyles.js +2 -0
- package/components/atoms/Button/Button.d.ts +6 -0
- package/components/atoms/Button/Button.js +29 -0
- package/components/atoms/Button/ButtonStyles.d.ts +7 -0
- package/components/atoms/Button/ButtonStyles.js +2 -0
- package/components/atoms/Button/PrimaryButton.d.ts +3 -0
- package/components/atoms/Button/PrimaryButton.js +29 -0
- package/components/atoms/Checkbox/Checkbox.d.ts +6 -0
- package/components/atoms/Checkbox/Checkbox.js +29 -0
- package/components/atoms/Checkbox/CheckboxStyles.d.ts +7 -0
- package/components/atoms/Checkbox/CheckboxStyles.js +2 -0
- package/components/atoms/IconButton/IconButton.d.ts +6 -0
- package/components/atoms/IconButton/IconButton.js +29 -0
- package/components/atoms/IconButton/IconButtonStyles.d.ts +7 -0
- package/components/atoms/IconButton/IconButtonStyles.js +2 -0
- package/components/atoms/Radio/Radio.d.ts +6 -0
- package/components/atoms/Radio/Radio.js +29 -0
- package/components/atoms/Radio/RadioStyles.d.ts +7 -0
- package/components/atoms/Radio/RadioStyles.js +2 -0
- package/components/atoms/Select/Select.d.ts +6 -0
- package/components/atoms/Select/Select.js +29 -0
- package/components/atoms/Select/SelectStyles.d.ts +7 -0
- package/components/atoms/Select/SelectStyles.js +2 -0
- package/components/atoms/Slider/Slider.d.ts +6 -0
- package/components/atoms/Slider/Slider.js +29 -0
- package/components/atoms/Slider/SliderStyles.d.ts +7 -0
- package/components/atoms/Slider/SliderStyles.js +2 -0
- package/components/atoms/Switch/Switch.d.ts +6 -0
- package/components/atoms/Switch/Switch.js +29 -0
- package/components/atoms/Switch/SwitchStyles.d.ts +7 -0
- package/components/atoms/Switch/SwitchStyles.js +2 -0
- package/components/atoms/TextField/TextField.d.ts +26 -0
- package/components/atoms/TextField/TextField.js +17 -0
- package/components/atoms/TextField/TextFieldStyles.d.ts +7 -0
- package/components/atoms/TextField/TextFieldStyles.js +2 -0
- package/components/atoms/ToggleButton/ToggleButton.d.ts +6 -0
- package/components/atoms/ToggleButton/ToggleButton.js +29 -0
- package/components/atoms/ToggleButton/ToggleButtonStyles.d.ts +7 -0
- package/components/atoms/ToggleButton/ToggleButtonStyles.js +2 -0
- package/components/feedback/Alert/Alert.d.ts +6 -0
- package/components/feedback/Alert/Alert.js +29 -0
- package/components/feedback/Alert/AlertStyles.d.ts +7 -0
- package/components/feedback/Alert/AlertStyles.js +2 -0
- package/components/index.d.ts +1 -0
- package/components/index.js +3 -0
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/license +7 -0
- package/package.json +117 -0
- package/readme.md +128 -0
- package/utils/index.d.ts +1 -0
- package/utils/index.js +3 -0
- package/utils/theme.d.ts +83 -0
- package/utils/theme.js +45 -0
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import MUIChip from '@mui/material/Chip';
|
|
25
|
+
import { ChipStyles } from './ChipStyles';
|
|
26
|
+
export default function Chip(_a) {
|
|
27
|
+
var rest = __rest(_a, []);
|
|
28
|
+
return (_jsx(MUIChip, __assign({ classes: ChipStyles().classes }, rest)));
|
|
29
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import MUIButton from '@mui/material/Button';
|
|
25
|
+
import { ButtonStyles } from './ButtonStyles';
|
|
26
|
+
export default function Button(_a) {
|
|
27
|
+
var rest = __rest(_a, []);
|
|
28
|
+
return (_jsx(MUIButton, __assign({ disableElevation: true, variant: 'contained', classes: ButtonStyles().classes }, rest)));
|
|
29
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import MUIButton from '@mui/material/Button';
|
|
25
|
+
import { ButtonStyles } from './ButtonStyles';
|
|
26
|
+
export default function PrimaryButton(_a) {
|
|
27
|
+
var rest = __rest(_a, []);
|
|
28
|
+
return (_jsx(MUIButton, __assign({ disableElevation: true, variant: 'contained', color: 'primary' }, rest, { classes: ButtonStyles().classes })));
|
|
29
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import MUICheckbox from '@mui/material/Checkbox';
|
|
25
|
+
import { CheckboxStyles } from './CheckboxStyles';
|
|
26
|
+
export default function Checkbox(_a) {
|
|
27
|
+
var rest = __rest(_a, []);
|
|
28
|
+
return (_jsx(MUICheckbox, __assign({ classes: CheckboxStyles().classes }, rest)));
|
|
29
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import MUIIconButton from '@mui/material/IconButton';
|
|
25
|
+
import { IconButtonStyles } from './IconButtonStyles';
|
|
26
|
+
export default function IconButton(_a) {
|
|
27
|
+
var rest = __rest(_a, []);
|
|
28
|
+
return (_jsx(MUIIconButton, __assign({ classes: IconButtonStyles().classes }, rest)));
|
|
29
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import MUIRadio from '@mui/material/Radio';
|
|
25
|
+
import { RadioStyles } from './RadioStyles';
|
|
26
|
+
export default function Radio(_a) {
|
|
27
|
+
var rest = __rest(_a, []);
|
|
28
|
+
return (_jsx(MUIRadio, __assign({ classes: RadioStyles().classes }, rest)));
|
|
29
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import MUISelect from '@mui/material/Select';
|
|
25
|
+
import { SelectStyles } from './SelectStyles';
|
|
26
|
+
export default function Select(_a) {
|
|
27
|
+
var rest = __rest(_a, []);
|
|
28
|
+
return (_jsx(MUISelect, __assign({ classes: SelectStyles().classes }, rest)));
|
|
29
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import MUISlider from '@mui/material/Slider';
|
|
25
|
+
import { SliderStyles } from './SliderStyles';
|
|
26
|
+
export default function Slider(_a) {
|
|
27
|
+
var rest = __rest(_a, []);
|
|
28
|
+
return (_jsx(MUISlider, __assign({ classes: SliderStyles().classes }, rest)));
|
|
29
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import MUISwitch from '@mui/material/Switch';
|
|
25
|
+
import { SwitchStyles } from './SwitchStyles';
|
|
26
|
+
export default function Switch(_a) {
|
|
27
|
+
var rest = __rest(_a, []);
|
|
28
|
+
return (_jsx(MUISwitch, __assign({ classes: SwitchStyles().classes }, rest)));
|
|
29
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BaseTextFieldProps } from '@mui/material/TextField';
|
|
3
|
+
import { OutlinedInputProps } from '@mui/material/OutlinedInput';
|
|
4
|
+
interface ITextFieldProps extends BaseTextFieldProps {
|
|
5
|
+
/**
|
|
6
|
+
* Callback fired when the value is changed.
|
|
7
|
+
*
|
|
8
|
+
* @param {object} event The event source of the callback.
|
|
9
|
+
* You can pull out the new value by accessing `event.target.value` (string).
|
|
10
|
+
*/
|
|
11
|
+
onChange?: OutlinedInputProps['onChange'];
|
|
12
|
+
/**
|
|
13
|
+
* The variant to use.
|
|
14
|
+
* @default 'outlined'
|
|
15
|
+
*/
|
|
16
|
+
variant?: 'outlined';
|
|
17
|
+
/**
|
|
18
|
+
* Props applied to the Input element.
|
|
19
|
+
* It will be a [`FilledInput`](/api/filled-input/),
|
|
20
|
+
* [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/)
|
|
21
|
+
* component depending on the `variant` prop value.
|
|
22
|
+
*/
|
|
23
|
+
InputProps?: Partial<OutlinedInputProps>;
|
|
24
|
+
}
|
|
25
|
+
export default function TextField(props: ITextFieldProps): JSX.Element;
|
|
26
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import MUITextField from '@mui/material/TextField';
|
|
14
|
+
import { TextFieldStyles } from './TextFieldStyles';
|
|
15
|
+
export default function TextField(props) {
|
|
16
|
+
return (_jsx(MUITextField, __assign({ classes: TextFieldStyles().classes }, props)));
|
|
17
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import MUIToggleButton from '@mui/material/ToggleButton';
|
|
25
|
+
import { ToggleButtonStyles } from './ToggleButtonStyles';
|
|
26
|
+
export default function ToggleButton(_a) {
|
|
27
|
+
var rest = __rest(_a, []);
|
|
28
|
+
return (_jsx(MUIToggleButton, __assign({ classes: ToggleButtonStyles().classes }, rest)));
|
|
29
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import MUIAlert from '@mui/material/Alert';
|
|
25
|
+
import { AlertStyles } from './AlertStyles';
|
|
26
|
+
export default function Alert(_a) {
|
|
27
|
+
var rest = __rest(_a, []);
|
|
28
|
+
return (_jsx(MUIAlert, __assign({ classes: AlertStyles().classes }, rest)));
|
|
29
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Button } from './atoms/Button/Button';
|
package/index.d.ts
ADDED
package/index.js
ADDED
package/license
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
Copyright (c) 2022 Learningpool.
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
4
|
+
|
|
5
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
6
|
+
|
|
7
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/package.json
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@learningpool/ui",
|
|
3
|
+
"author": "Learning Pool",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"learning-pool",
|
|
7
|
+
"react",
|
|
8
|
+
"components",
|
|
9
|
+
"ui"
|
|
10
|
+
],
|
|
11
|
+
"version": "1.0.2",
|
|
12
|
+
"private": false,
|
|
13
|
+
"main": "dist/index.js",
|
|
14
|
+
"module": "dist/index.js",
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"@emotion/react": "^11.7.1",
|
|
17
|
+
"@emotion/styled": "^11.6.0",
|
|
18
|
+
"@mui/icons-material": "^5.4.1",
|
|
19
|
+
"@mui/material": "^5.3.1",
|
|
20
|
+
"@testing-library/jest-dom": "^5.16.1",
|
|
21
|
+
"@testing-library/react": "^12.1.2",
|
|
22
|
+
"@testing-library/user-event": "^13.5.0",
|
|
23
|
+
"@types/jest": "^27.4.0",
|
|
24
|
+
"@types/node": "^16.11.21",
|
|
25
|
+
"@types/react": "^17.0.38",
|
|
26
|
+
"@types/react-dom": "^17.0.11",
|
|
27
|
+
"anysort": "^2.0.0",
|
|
28
|
+
"react": "^17.0.2",
|
|
29
|
+
"react-dom": "^17.0.2",
|
|
30
|
+
"react-scripts": "5.0.0",
|
|
31
|
+
"tss-react": "^3.3.6",
|
|
32
|
+
"typescript": "^4.6.2",
|
|
33
|
+
"web-vitals": "^2.1.4"
|
|
34
|
+
},
|
|
35
|
+
"scripts": {
|
|
36
|
+
"analyze:build": "source-map-explorer 'build/static/js/*.js'",
|
|
37
|
+
"analyze:module": "source-map-explorer 'dist/*.js'",
|
|
38
|
+
"start": "start-storybook -p 6006",
|
|
39
|
+
"start:run-tests": "yarn test:generate-output && yarn start",
|
|
40
|
+
"build": "build-storybook",
|
|
41
|
+
"build:module": "rm -rf dist && yarn run tsc",
|
|
42
|
+
"test": "jest",
|
|
43
|
+
"test:update-snapshot": "jest --updateSnapshot",
|
|
44
|
+
"test:generate-output": "jest --json --outputFile=.jest-test-results.json",
|
|
45
|
+
"semantic-release": "ht2-release-public-circleci-lib-dist"
|
|
46
|
+
},
|
|
47
|
+
"jest": {
|
|
48
|
+
"setupFilesAfterEnv": [
|
|
49
|
+
"./jest.setup.ts"
|
|
50
|
+
],
|
|
51
|
+
"collectCoverageFrom": [
|
|
52
|
+
"./src/lib/**/*.{ts,tsx}"
|
|
53
|
+
],
|
|
54
|
+
"collectCoverage": true
|
|
55
|
+
},
|
|
56
|
+
"eslintConfig": {
|
|
57
|
+
"extends": [
|
|
58
|
+
"react-app",
|
|
59
|
+
"react-app/jest"
|
|
60
|
+
],
|
|
61
|
+
"overrides": [
|
|
62
|
+
{
|
|
63
|
+
"files": [
|
|
64
|
+
"**/*.stories.*"
|
|
65
|
+
],
|
|
66
|
+
"rules": {
|
|
67
|
+
"import/no-anonymous-default-export": "off"
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
},
|
|
72
|
+
"browserslist": {
|
|
73
|
+
"production": [
|
|
74
|
+
">0.2%",
|
|
75
|
+
"not dead",
|
|
76
|
+
"not op_mini all"
|
|
77
|
+
],
|
|
78
|
+
"development": [
|
|
79
|
+
"last 1 chrome version",
|
|
80
|
+
"last 1 firefox version",
|
|
81
|
+
"last 1 safari version"
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
"devDependencies": {
|
|
85
|
+
"@babel/cli": "^7.13.16",
|
|
86
|
+
"@babel/core": "^7.14.0",
|
|
87
|
+
"@babel/preset-env": "^7.14.1",
|
|
88
|
+
"@babel/preset-react": "^7.13.13",
|
|
89
|
+
"@babel/preset-typescript": "^7.16.7",
|
|
90
|
+
"@ht2-labs/semantic-release": "^2.0.99",
|
|
91
|
+
"@storybook/addon-a11y": "^6.4.18",
|
|
92
|
+
"@storybook/addon-actions": "^6.5.0-alpha.34",
|
|
93
|
+
"@storybook/addon-essentials": "^6.5.0-alpha.34",
|
|
94
|
+
"@storybook/addon-jest": "^6.4.18",
|
|
95
|
+
"@storybook/addon-links": "^6.5.0-alpha.34",
|
|
96
|
+
"@storybook/addons": "^6.4.18",
|
|
97
|
+
"@storybook/builder-webpack5": "^6.5.0-alpha.34",
|
|
98
|
+
"@storybook/manager-webpack5": "^6.5.0-alpha.34",
|
|
99
|
+
"@storybook/node-logger": "^6.5.0-alpha.34",
|
|
100
|
+
"@storybook/preset-create-react-app": "^4.0.0",
|
|
101
|
+
"@storybook/react": "^6.5.0-alpha.34",
|
|
102
|
+
"@storybook/theming": "^6.4.18",
|
|
103
|
+
"babel-preset-minify": "^0.5.1",
|
|
104
|
+
"source-map-explorer": "^2.5.2",
|
|
105
|
+
"source-map-loader": "^3.0.1",
|
|
106
|
+
"ts-node": "^10.5.0",
|
|
107
|
+
"webpack": "^5.68.0"
|
|
108
|
+
},
|
|
109
|
+
"release": {
|
|
110
|
+
"branches": [
|
|
111
|
+
"main"
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
"publishConfig": {
|
|
115
|
+
"access": "public"
|
|
116
|
+
}
|
|
117
|
+
}
|
package/readme.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# Learningpool UI (Component library)
|
|
2
|
+
|
|
3
|
+
Learningpool UI is the Component library for use on Learningpool projects. There is a long-term vision, for now though, there are only a handful of components to utilize.
|
|
4
|
+
|
|
5
|
+
It is built on top of [MUI](https://mui.com) and bootstrapped with [Create React App](https://github.com/facebook/create-react-app). Our documentation is provided via [Storybook](https://storybook.js.org) and our tests are written using [Jest](https://jestjs.io).
|
|
6
|
+
|
|
7
|
+
Our module uses [semantic versionsing](https://semver.org) and publishes to [NPM](https://www.npmjs.com).
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
First clone the repo then run:
|
|
12
|
+
|
|
13
|
+
### `yarn install`
|
|
14
|
+
|
|
15
|
+
## Available Scripts
|
|
16
|
+
|
|
17
|
+
In the project directory, you can run:
|
|
18
|
+
|
|
19
|
+
### `yarn start`
|
|
20
|
+
|
|
21
|
+
Runs the app in the development mode.\
|
|
22
|
+
Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
|
|
23
|
+
|
|
24
|
+
The page will reload if you make edits.\
|
|
25
|
+
You will also see any lint errors in the console.
|
|
26
|
+
|
|
27
|
+
### `yarn start:run-test`
|
|
28
|
+
The same as the `yarn start` command but runs the `yarn test:generate-output` command first, so the test results displayed within Storybook are up-to-date.
|
|
29
|
+
|
|
30
|
+
### `yarn build-storybook`
|
|
31
|
+
Builds the Storybook app for pushing to the public subdomain.
|
|
32
|
+
|
|
33
|
+
### `yarn test`
|
|
34
|
+
Runs the component Jest tests. If its the first run it also takes a snapshot for comparison, on successive runs.
|
|
35
|
+
|
|
36
|
+
### `yarn test:update-snapshot`
|
|
37
|
+
Updates the Jest snapshot.
|
|
38
|
+
|
|
39
|
+
### `yarn test:generate-output`
|
|
40
|
+
Runs the tests and outputs the results to a file `.jest-test-results.json` for use within the [Storybook addon Jest](https://storybook.js.org/addons/@storybook/addon-jest/)
|
|
41
|
+
|
|
42
|
+
## Getting started
|
|
43
|
+
|
|
44
|
+
### Project structure
|
|
45
|
+
|
|
46
|
+
A quick understanding of the architecture of the project is useful before getting started. As this project is used to maintain a Component library it compiles into a module that is hosted on NPM. The `lib` and `stories` directory structure should mirror each other for ease of navigation through the project.
|
|
47
|
+
|
|
48
|
+
```
|
|
49
|
+
src
|
|
50
|
+
│
|
|
51
|
+
└───lib
|
|
52
|
+
│ │
|
|
53
|
+
│ └───atoms
|
|
54
|
+
│ │ │
|
|
55
|
+
│ │ └───Button
|
|
56
|
+
│ │ ...
|
|
57
|
+
│ └───molecules
|
|
58
|
+
│ ...
|
|
59
|
+
└───stories
|
|
60
|
+
│
|
|
61
|
+
└───atoms
|
|
62
|
+
│ │
|
|
63
|
+
│ └───Button
|
|
64
|
+
│ ...
|
|
65
|
+
└───molecules
|
|
66
|
+
...
|
|
67
|
+
```
|
|
68
|
+
---
|
|
69
|
+
### Creating a component
|
|
70
|
+
To get started it is recommended to create a directory for the component in the directory appropriate for your component:
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
src
|
|
74
|
+
│
|
|
75
|
+
└───lib
|
|
76
|
+
│
|
|
77
|
+
└───atoms
|
|
78
|
+
│
|
|
79
|
+
└───Component
|
|
80
|
+
Component.test.tsx
|
|
81
|
+
Component.tsx
|
|
82
|
+
ComponentStyles.tsx
|
|
83
|
+
```
|
|
84
|
+
Once you have created the above structure, it should be mirrored within the `src/stories` directory. It may not require a directory if it is just one file e.g. `src/stories/atoms/Component.stories.tsx`
|
|
85
|
+
|
|
86
|
+
If the component is a bit more complicated and requires extra work for the story, it would be best to create a directory to containing the story and additional files.
|
|
87
|
+
```
|
|
88
|
+
src
|
|
89
|
+
│
|
|
90
|
+
└───stories
|
|
91
|
+
│
|
|
92
|
+
└───atoms
|
|
93
|
+
│
|
|
94
|
+
└───Component
|
|
95
|
+
Component.stories.tsx
|
|
96
|
+
Component.tsx
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Using the library
|
|
100
|
+
|
|
101
|
+
Add the following in the head of the project (if React it's likely to be index.html within the public directory).
|
|
102
|
+
|
|
103
|
+
```
|
|
104
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:wght@400;600;700&display=swap" />
|
|
105
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:wght@300;400;500&display=swap" />
|
|
106
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
|
107
|
+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" />
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
Importing and using components from the library.
|
|
111
|
+
|
|
112
|
+
```javascript
|
|
113
|
+
import { Button } from 'learningpool-ui'
|
|
114
|
+
|
|
115
|
+
return <Button />
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
See all the components currently available [components source code](https://bitbucket.org/learningpool/learningpool-ui/src/master/src/lib/components/).
|
|
119
|
+
|
|
120
|
+
## Contributing
|
|
121
|
+
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
|
|
122
|
+
|
|
123
|
+
Please make sure to update tests as appropriate.
|
|
124
|
+
|
|
125
|
+
There are related repositories which will be linked in the future.
|
|
126
|
+
|
|
127
|
+
## License
|
|
128
|
+
[MIT](https://choosealicense.com/licenses/mit/)
|
package/utils/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { defaultTheme, darkTheme, lightTheme } from './theme';
|
package/utils/index.js
ADDED
package/utils/theme.d.ts
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
export declare const defaultTheme: {
|
|
2
|
+
typography: {
|
|
3
|
+
h1: {
|
|
4
|
+
fontFamily: string;
|
|
5
|
+
};
|
|
6
|
+
h2: {
|
|
7
|
+
fontFamily: string;
|
|
8
|
+
};
|
|
9
|
+
h3: {
|
|
10
|
+
fontFamily: string;
|
|
11
|
+
};
|
|
12
|
+
h4: {
|
|
13
|
+
fontFamily: string;
|
|
14
|
+
};
|
|
15
|
+
h5: {
|
|
16
|
+
fontFamily: string;
|
|
17
|
+
};
|
|
18
|
+
h6: {
|
|
19
|
+
fontFamily: string;
|
|
20
|
+
};
|
|
21
|
+
subtitle1: {
|
|
22
|
+
fontFamily: string;
|
|
23
|
+
};
|
|
24
|
+
subtitle2: {
|
|
25
|
+
fontFamily: string;
|
|
26
|
+
};
|
|
27
|
+
body1: {
|
|
28
|
+
fontFamily: string;
|
|
29
|
+
};
|
|
30
|
+
body2: {
|
|
31
|
+
fontFamily: string;
|
|
32
|
+
};
|
|
33
|
+
button: {
|
|
34
|
+
fontWeight: number;
|
|
35
|
+
fontFamily: string;
|
|
36
|
+
};
|
|
37
|
+
caption: {
|
|
38
|
+
fontFamily: string;
|
|
39
|
+
};
|
|
40
|
+
overline: {
|
|
41
|
+
fontFamily: string;
|
|
42
|
+
};
|
|
43
|
+
fontFamily: string;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
export declare const lightTheme: {
|
|
47
|
+
palette: {
|
|
48
|
+
primary: {
|
|
49
|
+
main: string;
|
|
50
|
+
};
|
|
51
|
+
secondary: {
|
|
52
|
+
main: "#2196f3";
|
|
53
|
+
};
|
|
54
|
+
divider: string;
|
|
55
|
+
text: {
|
|
56
|
+
primary: "#000";
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
export declare const darkTheme: {
|
|
61
|
+
palette: {
|
|
62
|
+
primary: {
|
|
63
|
+
50: "#fff8e1";
|
|
64
|
+
100: "#ffecb3";
|
|
65
|
+
200: "#ffe082";
|
|
66
|
+
300: "#ffd54f";
|
|
67
|
+
400: "#ffca28";
|
|
68
|
+
500: "#ffc107";
|
|
69
|
+
600: "#ffb300";
|
|
70
|
+
700: "#ffa000";
|
|
71
|
+
800: "#ff8f00";
|
|
72
|
+
900: "#ff6f00";
|
|
73
|
+
A100: "#ffe57f";
|
|
74
|
+
A200: "#ffd740";
|
|
75
|
+
A400: "#ffc400";
|
|
76
|
+
A700: "#ffab00";
|
|
77
|
+
};
|
|
78
|
+
divider: string;
|
|
79
|
+
text: {
|
|
80
|
+
primary: "#fff";
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
};
|
package/utils/theme.js
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { amber, blue, common } from '@mui/material/colors';
|
|
13
|
+
var DEFAULT_HEADER_TYPOGRAPHY = {
|
|
14
|
+
fontFamily: '"Montserrat", "Roboto", "Helvetica", "Arial", sans-serif'
|
|
15
|
+
};
|
|
16
|
+
var DEFAULT_BODY_TYPOGRAPHY = {
|
|
17
|
+
fontFamily: '"Source Sans Pro", "Roboto", "Helvetica", "Arial", sans-serif'
|
|
18
|
+
};
|
|
19
|
+
// @TODO: Discuss this with the experience design team, according to the UUI Figma
|
|
20
|
+
export var defaultTheme = {
|
|
21
|
+
typography: __assign(__assign({}, DEFAULT_BODY_TYPOGRAPHY), { h1: DEFAULT_HEADER_TYPOGRAPHY, h2: DEFAULT_HEADER_TYPOGRAPHY, h3: DEFAULT_HEADER_TYPOGRAPHY, h4: DEFAULT_HEADER_TYPOGRAPHY, h5: DEFAULT_HEADER_TYPOGRAPHY, h6: DEFAULT_HEADER_TYPOGRAPHY, subtitle1: DEFAULT_BODY_TYPOGRAPHY, subtitle2: DEFAULT_BODY_TYPOGRAPHY, body1: DEFAULT_BODY_TYPOGRAPHY, body2: DEFAULT_BODY_TYPOGRAPHY, button: __assign(__assign({}, DEFAULT_BODY_TYPOGRAPHY), { fontWeight: 700 }), caption: DEFAULT_BODY_TYPOGRAPHY, overline: DEFAULT_BODY_TYPOGRAPHY })
|
|
22
|
+
};
|
|
23
|
+
export var lightTheme = {
|
|
24
|
+
palette: {
|
|
25
|
+
primary: {
|
|
26
|
+
main: '#0069b4'
|
|
27
|
+
},
|
|
28
|
+
secondary: {
|
|
29
|
+
main: blue[500]
|
|
30
|
+
},
|
|
31
|
+
divider: 'rgba(0, 0, 0, 0.075)',
|
|
32
|
+
text: {
|
|
33
|
+
primary: common.black
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
export var darkTheme = {
|
|
38
|
+
palette: {
|
|
39
|
+
primary: amber,
|
|
40
|
+
divider: 'rgba(255, 255, 255, 0.075)',
|
|
41
|
+
text: {
|
|
42
|
+
primary: common.white
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
};
|