@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.
Files changed (57) hide show
  1. package/components/DataDisplay/Chip/Chip.d.ts +6 -0
  2. package/components/DataDisplay/Chip/Chip.js +29 -0
  3. package/components/DataDisplay/Chip/ChipStyles.d.ts +7 -0
  4. package/components/DataDisplay/Chip/ChipStyles.js +2 -0
  5. package/components/atoms/Button/Button.d.ts +6 -0
  6. package/components/atoms/Button/Button.js +29 -0
  7. package/components/atoms/Button/ButtonStyles.d.ts +7 -0
  8. package/components/atoms/Button/ButtonStyles.js +2 -0
  9. package/components/atoms/Button/PrimaryButton.d.ts +3 -0
  10. package/components/atoms/Button/PrimaryButton.js +29 -0
  11. package/components/atoms/Checkbox/Checkbox.d.ts +6 -0
  12. package/components/atoms/Checkbox/Checkbox.js +29 -0
  13. package/components/atoms/Checkbox/CheckboxStyles.d.ts +7 -0
  14. package/components/atoms/Checkbox/CheckboxStyles.js +2 -0
  15. package/components/atoms/IconButton/IconButton.d.ts +6 -0
  16. package/components/atoms/IconButton/IconButton.js +29 -0
  17. package/components/atoms/IconButton/IconButtonStyles.d.ts +7 -0
  18. package/components/atoms/IconButton/IconButtonStyles.js +2 -0
  19. package/components/atoms/Radio/Radio.d.ts +6 -0
  20. package/components/atoms/Radio/Radio.js +29 -0
  21. package/components/atoms/Radio/RadioStyles.d.ts +7 -0
  22. package/components/atoms/Radio/RadioStyles.js +2 -0
  23. package/components/atoms/Select/Select.d.ts +6 -0
  24. package/components/atoms/Select/Select.js +29 -0
  25. package/components/atoms/Select/SelectStyles.d.ts +7 -0
  26. package/components/atoms/Select/SelectStyles.js +2 -0
  27. package/components/atoms/Slider/Slider.d.ts +6 -0
  28. package/components/atoms/Slider/Slider.js +29 -0
  29. package/components/atoms/Slider/SliderStyles.d.ts +7 -0
  30. package/components/atoms/Slider/SliderStyles.js +2 -0
  31. package/components/atoms/Switch/Switch.d.ts +6 -0
  32. package/components/atoms/Switch/Switch.js +29 -0
  33. package/components/atoms/Switch/SwitchStyles.d.ts +7 -0
  34. package/components/atoms/Switch/SwitchStyles.js +2 -0
  35. package/components/atoms/TextField/TextField.d.ts +26 -0
  36. package/components/atoms/TextField/TextField.js +17 -0
  37. package/components/atoms/TextField/TextFieldStyles.d.ts +7 -0
  38. package/components/atoms/TextField/TextFieldStyles.js +2 -0
  39. package/components/atoms/ToggleButton/ToggleButton.d.ts +6 -0
  40. package/components/atoms/ToggleButton/ToggleButton.js +29 -0
  41. package/components/atoms/ToggleButton/ToggleButtonStyles.d.ts +7 -0
  42. package/components/atoms/ToggleButton/ToggleButtonStyles.js +2 -0
  43. package/components/feedback/Alert/Alert.d.ts +6 -0
  44. package/components/feedback/Alert/Alert.js +29 -0
  45. package/components/feedback/Alert/AlertStyles.d.ts +7 -0
  46. package/components/feedback/Alert/AlertStyles.js +2 -0
  47. package/components/index.d.ts +1 -0
  48. package/components/index.js +3 -0
  49. package/index.d.ts +2 -0
  50. package/index.js +2 -0
  51. package/license +7 -0
  52. package/package.json +117 -0
  53. package/readme.md +128 -0
  54. package/utils/index.d.ts +1 -0
  55. package/utils/index.js +3 -0
  56. package/utils/theme.d.ts +83 -0
  57. package/utils/theme.js +45 -0
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { ChipProps } from '@mui/material/Chip';
3
+ interface IChipProps extends ChipProps {
4
+ }
5
+ export default function Chip({ ...rest }: IChipProps): JSX.Element;
6
+ export {};
@@ -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,7 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const ChipStyles: (params: void) => {
3
+ classes: Record<never, string>;
4
+ theme: Theme;
5
+ css: import("tss-react").Css;
6
+ cx: import("tss-react").Cx;
7
+ };
@@ -0,0 +1,2 @@
1
+ import { makeStyles } from 'tss-react/mui';
2
+ export var ChipStyles = makeStyles()(function (theme) { return ({}); });
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { ButtonProps } from '@mui/material/Button';
3
+ interface IButtonProps extends ButtonProps {
4
+ }
5
+ export default function Button({ ...rest }: IButtonProps): JSX.Element;
6
+ export {};
@@ -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,7 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const ButtonStyles: (params: void) => {
3
+ classes: Record<never, string>;
4
+ theme: Theme;
5
+ css: import("tss-react").Css;
6
+ cx: import("tss-react").Cx;
7
+ };
@@ -0,0 +1,2 @@
1
+ import { makeStyles } from 'tss-react/mui';
2
+ export var ButtonStyles = makeStyles()(function (theme) { return ({}); });
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import MUIButton from '@mui/material/Button';
3
+ export default function PrimaryButton({ ...rest }: {} & React.ComponentPropsWithoutRef<typeof MUIButton>): JSX.Element;
@@ -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,6 @@
1
+ /// <reference types="react" />
2
+ import { CheckboxProps } from '@mui/material/Checkbox';
3
+ interface ICheckboxProps extends CheckboxProps {
4
+ }
5
+ export default function Checkbox({ ...rest }: ICheckboxProps): JSX.Element;
6
+ export {};
@@ -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,7 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const CheckboxStyles: (params: void) => {
3
+ classes: Record<never, string>;
4
+ theme: Theme;
5
+ css: import("tss-react").Css;
6
+ cx: import("tss-react").Cx;
7
+ };
@@ -0,0 +1,2 @@
1
+ import { makeStyles } from 'tss-react/mui';
2
+ export var CheckboxStyles = makeStyles()(function (theme) { return ({}); });
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { IconButtonProps } from '@mui/material/IconButton';
3
+ interface IIconButtonProps extends IconButtonProps {
4
+ }
5
+ export default function IconButton({ ...rest }: IIconButtonProps): JSX.Element;
6
+ export {};
@@ -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,7 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const IconButtonStyles: (params: void) => {
3
+ classes: Record<never, string>;
4
+ theme: Theme;
5
+ css: import("tss-react").Css;
6
+ cx: import("tss-react").Cx;
7
+ };
@@ -0,0 +1,2 @@
1
+ import { makeStyles } from 'tss-react/mui';
2
+ export var IconButtonStyles = makeStyles()(function (theme) { return ({}); });
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { RadioProps } from '@mui/material/Radio';
3
+ interface IRadioProps extends RadioProps {
4
+ }
5
+ export default function Radio({ ...rest }: IRadioProps): JSX.Element;
6
+ export {};
@@ -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,7 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const RadioStyles: (params: void) => {
3
+ classes: Record<never, string>;
4
+ theme: Theme;
5
+ css: import("tss-react").Css;
6
+ cx: import("tss-react").Cx;
7
+ };
@@ -0,0 +1,2 @@
1
+ import { makeStyles } from 'tss-react/mui';
2
+ export var RadioStyles = makeStyles()(function (theme) { return ({}); });
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
3
+ export type { SelectChangeEvent };
4
+ interface ISelectProps extends SelectProps {
5
+ }
6
+ export default function Select({ ...rest }: ISelectProps): JSX.Element;
@@ -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,7 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const SelectStyles: (params: void) => {
3
+ classes: Record<never, string>;
4
+ theme: Theme;
5
+ css: import("tss-react").Css;
6
+ cx: import("tss-react").Cx;
7
+ };
@@ -0,0 +1,2 @@
1
+ import { makeStyles } from 'tss-react/mui';
2
+ export var SelectStyles = makeStyles()(function (theme) { return ({}); });
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { SliderProps } from '@mui/material/Slider';
3
+ interface ISliderProps extends SliderProps {
4
+ }
5
+ export default function Slider({ ...rest }: ISliderProps): JSX.Element;
6
+ export {};
@@ -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,7 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const SliderStyles: (params: void) => {
3
+ classes: Record<never, string>;
4
+ theme: Theme;
5
+ css: import("tss-react").Css;
6
+ cx: import("tss-react").Cx;
7
+ };
@@ -0,0 +1,2 @@
1
+ import { makeStyles } from 'tss-react/mui';
2
+ export var SliderStyles = makeStyles()(function (theme) { return ({}); });
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { SwitchProps } from '@mui/material/Switch';
3
+ interface ISwitchProps extends SwitchProps {
4
+ }
5
+ export default function Switch({ ...rest }: ISwitchProps): JSX.Element;
6
+ export {};
@@ -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,7 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const SwitchStyles: (params: void) => {
3
+ classes: Record<never, string>;
4
+ theme: Theme;
5
+ css: import("tss-react").Css;
6
+ cx: import("tss-react").Cx;
7
+ };
@@ -0,0 +1,2 @@
1
+ import { makeStyles } from 'tss-react/mui';
2
+ export var SwitchStyles = makeStyles()(function (theme) { return ({}); });
@@ -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,7 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const TextFieldStyles: (params: void) => {
3
+ classes: Record<never, string>;
4
+ theme: Theme;
5
+ css: import("tss-react").Css;
6
+ cx: import("tss-react").Cx;
7
+ };
@@ -0,0 +1,2 @@
1
+ import { makeStyles } from 'tss-react/mui';
2
+ export var TextFieldStyles = makeStyles()(function (theme) { return ({}); });
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { ToggleButtonProps } from '@mui/material/ToggleButton';
3
+ interface IToggleButtonProps extends ToggleButtonProps {
4
+ }
5
+ export default function ToggleButton({ ...rest }: IToggleButtonProps): JSX.Element;
6
+ export {};
@@ -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,7 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const ToggleButtonStyles: (params: void) => {
3
+ classes: Record<never, string>;
4
+ theme: Theme;
5
+ css: import("tss-react").Css;
6
+ cx: import("tss-react").Cx;
7
+ };
@@ -0,0 +1,2 @@
1
+ import { makeStyles } from 'tss-react/mui';
2
+ export var ToggleButtonStyles = makeStyles()(function (theme) { return ({}); });
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { AlertProps } from '@mui/material/Alert';
3
+ interface IAlertProps extends AlertProps {
4
+ }
5
+ export default function Alert({ ...rest }: IAlertProps): JSX.Element;
6
+ export {};
@@ -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,7 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ export declare const AlertStyles: (params: void) => {
3
+ classes: Record<never, string>;
4
+ theme: Theme;
5
+ css: import("tss-react").Css;
6
+ cx: import("tss-react").Cx;
7
+ };
@@ -0,0 +1,2 @@
1
+ import { makeStyles } from 'tss-react/mui';
2
+ export var AlertStyles = makeStyles()(function (theme) { return ({}); });
@@ -0,0 +1 @@
1
+ export { default as Button } from './atoms/Button/Button';
@@ -0,0 +1,3 @@
1
+ /* Export */
2
+ /* Atoms */
3
+ export { default as Button } from './atoms/Button/Button';
package/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import Button from './components/atoms/Button/Button';
2
+ export { Button };
package/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import Button from './components/atoms/Button/Button';
2
+ export { Button };
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/)
@@ -0,0 +1 @@
1
+ export { defaultTheme, darkTheme, lightTheme } from './theme';
package/utils/index.js ADDED
@@ -0,0 +1,3 @@
1
+ /* Export */
2
+ /* Theming */
3
+ export { defaultTheme, darkTheme, lightTheme } from './theme';
@@ -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
+ };