11 |
19 |
20 | `;
21 |
--------------------------------------------------------------------------------
/__tests__/StatsCard/StatsCard.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import renderer from "react-test-renderer";
3 | import StatsCard from "../../components/StatsCard/StatsCard";
4 | import Work from "@material-ui/icons/Work";
5 | import Update from "@material-ui/icons/Update";
6 |
7 | describe("StatsCard", () => {
8 | it("Snapshot", () => {
9 | const component = renderer.create(
10 |
7 |
28 | `;
29 |
--------------------------------------------------------------------------------
/__tests__/FakeText/__snapshots__/FakeText.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`LoadingFakeText snapshot 1`] = `
4 |
11 |
21 |
22 |
25 | Content of the side-menu
26 |
27 |
7 |
10 |
13 |
16 |
19 |
22 |
25 |
28 |
31 |
34 |
37 |
38 | `;
39 |
--------------------------------------------------------------------------------
/src/components/Toast/toastStyle.js:
--------------------------------------------------------------------------------
1 | import styles from '../../assets/jss/styles.js';
2 |
3 | export const toastStyle = theme => {
4 | const {
5 | snackDangerBgColor,
6 | snackWarningBgColor,
7 | snackSuccessBgColor,
8 | snackSuccessColor,
9 | snackWarningColor,
10 | snackDangerColor
11 | } = styles(theme);
12 |
13 | return {
14 | default: { borderRadius: '6px', padding: '6px 20px' },
15 | success: { backgroundColor: snackSuccessBgColor, color: snackSuccessColor },
16 | error: { backgroundColor: snackDangerBgColor, color: snackDangerColor },
17 | warning: { backgroundColor: snackWarningBgColor, color: snackWarningColor },
18 | toastWrapper: { borderRadius: '6px', width: '500px', overflowWrap: 'anywhere' }
19 | }
20 | }
--------------------------------------------------------------------------------
/__tests__/ExpandingText/__snapshots__/ExpandingText.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`ExpandingText snapshot 1`] = `
4 |
5 |
30 |
31 | `;
32 |
--------------------------------------------------------------------------------
/src/components/CustomTextField/textFieldStyle.js:
--------------------------------------------------------------------------------
1 | import styles from '../../assets/jss/styles';
2 |
3 | const textFieldStyle = theme => {
4 | const { defaultFont, grayColor } = styles(theme);
5 | return {
6 | label: {
7 | ...defaultFont,
8 | color: grayColor[3] + " !important",
9 | fontWeight: "400",
10 | lineHeight: "1.42857",
11 | top: "0px",
12 | marginTop: "0px"
13 | },
14 | input: {
15 | color: grayColor[14],
16 | "&,&::placeholder": {
17 | ...defaultFont,
18 | fontWeight: "400",
19 | opacity: "1"
20 | },
21 | "&::placeholder": {
22 | color: grayColor[3]
23 | }
24 | },
25 | };
26 | }
27 |
28 | export default textFieldStyle;
--------------------------------------------------------------------------------
/__tests__/ImageCard/ImageCard.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ImageCard from "../../components/ImageCard/ImageCard";
3 | import AssignmentLate from "@material-ui/icons/AssignmentLate";
4 | import { mount } from 'enzyme';
5 |
6 | describe("Render ImageCard", () => {
7 | it("imageSize should be equal to 's'", () => {
8 | const wrapper = mount(
9 |
19 | {children}
20 |
21 | );
22 | }
23 |
24 | Card.propTypes = {
25 | /**
26 | * The className of card.
27 | */
28 | className: PropTypes.string,
29 | /**
30 | * The color of card.
31 | */
32 | color: PropTypes.oneOf([
33 | "primary",
34 | "info",
35 | "success",
36 | "warning",
37 | "danger",
38 | "rose"
39 | ]),
40 | /**
41 | * The content of card.
42 | */
43 | children: PropTypes.node
44 | };
--------------------------------------------------------------------------------
/src/components/Charts/components/ChartMix.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ChartCard from "../../ChartCard";
3 | import PropTypes from "prop-types";
4 | import { Scatter } from "react-chartjs-2";
5 | import "chartjs-plugin-datalabels";
6 |
7 | export const ChartMix = ({ chartColor, dataInfo, displayDataLabels, options, ...other }) => {
8 | let opts = {
9 | ...options,
10 | plugins: {
11 | datalabels: {
12 | formatter: function (value) {
13 | return value;
14 | },
15 | align: "top",
16 | font: {
17 | size: 8
18 | },
19 | display: displayDataLabels
20 | }
21 | },
22 | ...other
23 | };
24 |
25 | return (
26 |
7 |
31 | `;
32 |
--------------------------------------------------------------------------------
/src/components/SideMenu/SideMenu.d.ts:
--------------------------------------------------------------------------------
1 | export interface Props {
2 | /**
3 | * The content of the menu
4 | */
5 | content?: React.ReactNode
6 | /**
7 | * The icon to be displayed on the button
8 | */
9 | icon?: Object
10 | /**
11 | * Override or extend the styles applied to the side-menu
12 | */
13 | customSideMenuClass?: string
14 | /**
15 | * Override or extend the styles applied to the button
16 | */
17 | customButtonClass?: string
18 | /**
19 | * Override or extend the styles applied to the icon
20 | */
21 | customIconClass?: string
22 | /**
23 | * Override or extend the styles applied to the dropdown
24 | */
25 | customContainerClass?: string
26 | /**
27 | * Demos:
28 | *
29 | * - https://bit.dev/totalsoft_oss/react-mui/side-menu
30 | *
31 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-webapp-components/tree/master/components/SideMenu
32 | */
33 | }
34 |
35 | export type SideMenuProps = Props
36 |
37 | export default function SideMenu(props: SideMenuProps): JSX.Element
--------------------------------------------------------------------------------
/__tests__/Tooltip/__snapshots__/Tooltip.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Tooltip Snapshot 1`] = `
4 |
15 |
41 |
42 | `;
43 |
--------------------------------------------------------------------------------
/__tests__/DialogDisplay/DialogDisplay.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import DialogDisplay from '../../components/DialogDisplay/DialogDisplay';
3 | import { mount } from 'enzyme';
4 | import { IconButton } from "@material-ui/core";
5 |
6 | describe('DialogDisplay', () => {
7 | it('IconButton has modalCloseButton class', () => {
8 | const onCloseMock = jest.fn();
9 |
10 | const wrapper = mount(
10 |
25 |
13 |
16 | Title
17 |
18 |
21 | Subtitle
22 |
23 |
24 |
28 | Card content
29 |
30 | {
29 | [...Array(lines)].map((e, i) => )
30 | }
31 |
32 |
33 | if (onPaper) {
34 | return Content1
11 | },
12 | {
13 | tabButton: "Button2",
14 | tabContent: Content2
15 | }
16 | ];
17 |
18 | describe("NavPills", () => {
19 | it("active, color and actions props should be equal to the default values provided", () => {
20 | const wrapper = mount(
21 | Card
9 | );
10 |
11 | const testInstance = wrapper.root;
12 |
13 | expect(testInstance.findByType('div').props.className).toContain('card');
14 | expect(testInstance.findByType('div').props.className).toContain('rose');
15 | });
16 |
17 | it('class danger are present', () => {
18 | const wrapper = renderer.create(
19 |
Card
20 | );
21 |
22 | const testInstance = wrapper.root;
23 |
24 | expect(testInstance.findByType('div').props.className).toContain('danger');
25 | });
26 |
27 | it('class warning are present', () => {
28 | const wrapper = renderer.create(
29 |
Card
30 | );
31 |
32 | const testInstance = wrapper.root;
33 |
34 | expect(testInstance.findByType('div').props.className).toContain('warning');
35 | });
36 |
37 | it('class info are present', () => {
38 | const wrapper = renderer.create(
39 |
16 |
18 | )
19 | }
20 |
21 | BackToButton.defaultProps = {
22 | color: "theme",
23 | fontSize: "small",
24 | size: "medium"
25 | };
26 |
27 | BackToButton.propTypes = {
28 | /**
29 | * The title of button.
30 | */
31 | title: PropTypes.string,
32 | /**
33 | * The color of button.
34 | */
35 | color: PropTypes.oneOf([
36 | "primary",
37 | "info",
38 | "theme",
39 | "themeNoBackground",
40 | "themeWithBackground",
41 | "success",
42 | "warning",
43 | "danger",
44 | "rose",
45 | "white",
46 | "simple",
47 | "defaultNoBackground",
48 | "primaryNoBackground",
49 | "infoNoBackground",
50 | "successNoBackground",
51 | "warningNoBackground",
52 | "dangerNoBackground",
53 | "roseNoBackground",
54 | "themeWithGradient"
55 | ]),
56 | /**
57 | * The size of button.
58 | */
59 | size: PropTypes.oneOf([
60 | "small",
61 | "medium"
62 | ]),
63 | /**
64 | * The fontSize of button's content.
65 | */
66 | fontSize: PropTypes.oneOf([
67 | "inherit",
68 | "small",
69 | "medium",
70 | "large"
71 | ]),
72 | /**
73 | * The path where the browser will be directed to when the button is clicked.
74 | */
75 | path: PropTypes.string
76 | }
77 |
78 | export default BackToButton;
--------------------------------------------------------------------------------
/src/components/RegularCard/RegularCard.d.ts:
--------------------------------------------------------------------------------
1 | import { CardProps } from '@material-ui/core/Card';
2 | import { CardContentProps } from '@material-ui/core/CardContent';
3 | import { CardHeaderProps } from '@material-ui/core/CardHeader';
4 |
5 | export interface Props {
6 |
7 | /**
8 | * Override or extend the styles applied to the card
9 | */
10 | customCardClasses?: string;
11 |
12 | /**
13 | * Override or extend the styles applied to the title of the card
14 | */
15 | customCardTitleClasses?: string;
16 |
17 | /**
18 | * Override or extend the styles applied to the content of the card
19 | */
20 | customCardContentClasses?: string
21 | /**
22 | * The footer to be displayed. This property can be a string or a component
23 | */
24 | footer?: React.ReactNode;
25 |
26 | /**
27 | * If set to true, the background will be transparent
28 | */
29 | plainCard?: boolean;
30 |
31 | /**
32 | * The title of the card
33 | */
34 | cardTitle?: React.ReactNode;
35 |
36 | /**
37 | * The subtitle of the card
38 | */
39 | cardSubtitle?: React.ReactNode;
40 |
41 | /**
42 | * The content of the card
43 | */
44 | content?: React.ReactNode;
45 |
46 | /**
47 | * Title alignment
48 | */
49 | titleAlign?: "right" |
50 | "left" |
51 | "center"
52 |
53 | /**
54 | * Content alignment
55 | */
56 | contentAlign?: "right" |
57 | "left" |
58 | "center"
59 |
60 | /**
61 | * Subtitle alignment
62 | */
63 | subtitleAlign?: "right" |
64 | "left" |
65 | "center"
66 |
67 | /**
68 | * Demos:
69 | *
70 | * - https://bit.dev/totalsoft_oss/react-mui/regular-card
71 | *
72 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/RegularCard/RegularCard.js
73 | */
74 |
75 | }
76 |
77 | export type RegularCardProps = Props | CardProps | CardContentProps | CardHeaderProps
78 |
79 | export default function RegularCard(props: RegularCardProps): JSX.Element;
--------------------------------------------------------------------------------
/__tests__/DownwardButton/DownwardButton.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import DownwardButton from '../../components/DownwardButton/DownwardButton';
3 | import { mount } from 'enzyme';
4 | import { IconButton } from "@material-ui/core";
5 |
6 | describe('DownwardButton', () => {
7 | it('onClick should be called', () => {
8 | const onClickMock = jest.fn();
9 |
10 | const wrapper = mount(
9 | {editMode === true
10 | ?
13 | )
14 |
15 | EditButton.defaultProps = {
16 | editMode: true,
17 | color: "theme",
18 | fontSize: "medium",
19 | size: "medium"
20 | };
21 |
22 | EditButton.propTypes = {
23 | /**
24 | * The title of button.
25 | */
26 | title: PropTypes.string,
27 | /**
28 | * Callback fired when a "click" event is detected.
29 | */
30 | onClick: PropTypes.func,
31 | /**
32 | * If true, the edit icon will be visible.
33 | */
34 | editMode: PropTypes.bool,
35 | /**
36 | * If true, the button will be disabled.
37 | */
38 | disabled: PropTypes.bool,
39 | /**
40 | * The color of button.
41 | */
42 | color: PropTypes.oneOf([
43 | "primary",
44 | "info",
45 | "theme",
46 | "themeNoBackground",
47 | "themeWithBackground",
48 | "success",
49 | "warning",
50 | "danger",
51 | "rose",
52 | "white",
53 | "simple",
54 | "defaultNoBackground",
55 | "primaryNoBackground",
56 | "infoNoBackground",
57 | "successNoBackground",
58 | "warningNoBackground",
59 | "dangerNoBackground",
60 | "roseNoBackground",
61 | "themeWithGradient"
62 | ]),
63 | /**
64 | * The size of button.
65 | */
66 | size: PropTypes.oneOf([
67 | "small",
68 | "medium"
69 | ]),
70 | /**
71 | * The fontSize of button's content.
72 | */
73 | fontSize: PropTypes.oneOf([
74 | "inherit",
75 | "small",
76 | "medium",
77 | "large"
78 | ])
79 | };
80 |
81 | export default EditButton;
--------------------------------------------------------------------------------
/src/components/Card/cardStyle.js:
--------------------------------------------------------------------------------
1 | import styles from "../../assets/jss/styles";
2 | import defaultTheme from "../themes/defaultTheme";
3 |
4 | const cardStyle = theme => {
5 | const {
6 | whiteColor,
7 | roseColor,
8 | successColor,
9 | dangerColor,
10 | warningColor,
11 | infoColor,
12 | hexToRgb
13 | } = styles(theme);
14 |
15 | return {
16 | card: {
17 | ...theme.card
18 | },
19 | s: {
20 | height: "80px",
21 | width: "80px"
22 | },
23 | m: {
24 | height: "163px",
25 | width: "163px"
26 | },
27 | l: {
28 | height: "280px",
29 | width: "280px"
30 | },
31 | primary: {
32 | background:
33 | theme.palette?.primary?.main || defaultTheme?.palette?.primary?.main,
34 | color: whiteColor
35 | },
36 | info: {
37 | background:
38 | "linear-gradient(60deg," + infoColor[1] + "," + infoColor[2] + ")",
39 | "& h1 small": {
40 | color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
41 | },
42 | color: whiteColor
43 | },
44 | success: {
45 | background:
46 | "linear-gradient(60deg," +
47 | successColor[1] +
48 | "," +
49 | successColor[2] +
50 | ")",
51 | "& h1 small": {
52 | color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
53 | },
54 | color: whiteColor
55 | },
56 | warning: {
57 | background:
58 | "linear-gradient(60deg," +
59 | warningColor[1] +
60 | "," +
61 | warningColor[2] +
62 | ")",
63 | "& h1 small": {
64 | color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
65 | },
66 | color: whiteColor
67 | },
68 | danger: {
69 | background:
70 | "linear-gradient(60deg," + dangerColor[1] + "," + dangerColor[2] + ")",
71 | "& h1 small": {
72 | color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
73 | },
74 | color: whiteColor
75 | },
76 | rose: {
77 | background:
78 | "linear-gradient(60deg," + roseColor[1] + "," + roseColor[2] + ")",
79 | "& h1 small": {
80 | color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
81 | },
82 | color: whiteColor
83 | }
84 | };
85 | };
86 |
87 | export default cardStyle;
88 |
--------------------------------------------------------------------------------
/__tests__/Accordion/Accordion.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Accordion from '../../components/Accordion/Accordion';
3 | import { shallow, mount } from "enzyme";
4 | import { Accordion as AccordionBase } from "@material-ui/core";
5 |
6 | const someArray = [{
7 | title: 'Accordion 1',
8 | value: 'Client 1'
9 | }, {
10 | title: 'Accordion 2',
11 | value: 'Client 2'
12 | },
13 | {
14 | title: 'Accordion 3',
15 | value: 'Client 3'
16 | }
17 | ]
18 |
19 | describe('Accordion', () => {
20 | it('Three children are expected to render', () => {
21 | const wrapper = shallow( {
24 | return {
25 | title: item.title,
26 | content: (
27 | {
42 | return {
43 | title: item.title,
44 | content: (
45 | {
61 | return {
62 | title: item.title,
63 | content: (
64 | {
4 | /**
5 | * The title of button.
6 | */
7 | title?: string
8 | /**
9 | * @default "theme"
10 | * The color of button.
11 | */
12 | color?: "primary" |
13 | "info" |
14 | "theme" |
15 | "themeNoBackground" |
16 | "themeWithBackground" |
17 | "success" |
18 | "warning" |
19 | "danger" |
20 | "rose" |
21 | "white" |
22 | "simple" |
23 | "defaultNoBackground" |
24 | "primaryNoBackground" |
25 | "infoNoBackground" |
26 | "successNoBackground" |
27 | "warningNoBackground" |
28 | "dangerNoBackground" |
29 | "roseNoBackground" |
30 | "themeWithGradient"
31 | /**
32 | * @default "medium"
33 | * The size of button.
34 | */
35 | size?: "medium" | "small"
36 | /**
37 | * @default "small"
38 | * The fontsize of button's content.
39 | */
40 | fontSize?: "inherit" | "small" | "medium" | "large"
41 | /**
42 | * The path where the browser will be directed to when the button is clicked.
43 | */
44 | path?: string
45 | /**
46 | * Override or extend the styles applied to the component
47 | */
48 | className?: string
49 | /**
50 | * @default false
51 | * If true, button will be disabled.
52 | */
53 | disabled?: boolean
54 | /**
55 | * @default false
56 | * If true, the keyboard focus ripple will be disabled.
57 | */
58 | disableFocusRipple?: boolean
59 | /**
60 | * If true, the ripple effect will be disabled.
61 | */
62 | disableRipple?: boolean
63 | /**
64 | * @default "false"
65 | * If given, uses a negative margin to counteract the padding on one side
66 | * (this is often helpful for aligning the left or right side of the icon
67 | * with content above or below, without ruining the border size and shape).
68 | */
69 | edge?: "start" | "end" | "false"
70 |
71 | }
72 | /**
73 | *
74 | * Demos:
75 | *
76 | * - https://bit.dev/totalsoft_oss/react-mui/back-to-button
77 | *
78 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/BackToButton/BackToButton.js
79 | *
80 | * Bit component used:
81 | *
82 | * - IconButton: https://bit.dev/totalsoft_oss/react-mui/icon-button
83 | *
84 | */
85 | export default function BackToButton(props: BackToButtonProps): JSX.Element;
--------------------------------------------------------------------------------
/src/components/SideMenu/sideMenuStyle.js:
--------------------------------------------------------------------------------
1 | import styles from "../../assets/jss/styles";
2 | import defaultTheme from "../themes/defaultTheme";
3 |
4 | const sideMenuStyle = theme => {
5 | const { whiteColor, grayColor } = styles(theme);
6 |
7 | return {
8 | sideMenu: {
9 | position: "fixed",
10 | top: "180px",
11 | right: 0,
12 | width: "44px",
13 | height: "38px",
14 | background: "rgba(0, 0, 0, 0.3)",
15 | zIndex: 1031,
16 | borderRadius: "8px 0 0 8px",
17 | textAlign: "center"
18 | },
19 | moreButton: {
20 | display: "flex",
21 | justifyContent: "center",
22 | height: "100%",
23 | "&:hover": {
24 | outline: "none",
25 | backgroundColor:
26 | theme?.palette?.sideMenu?.hoverBgColor ||
27 | defaultTheme?.palette?.sideMenu?.hoverBgColor,
28 | boxShadow: "none",
29 | cursor: "pointer"
30 | }
31 | },
32 | sideMenuIcon: {
33 | color: `${whiteColor}`,
34 | height: "100%"
35 | },
36 | menuContainer: {
37 | position: "absolute",
38 | top: "8px",
39 | right: "60px",
40 | zIndex: 1000,
41 | display: "none",
42 | float: "left",
43 | minWidth: "160px",
44 | minHeight: "40px",
45 | backgroundColor: `${whiteColor}`,
46 | opacity: 0,
47 | border: "1px solid #ccc",
48 | borderRadius: "4px",
49 | WebkitBoxShadow: "0 6px 12px rgba(0, 0, 0, 0.175)",
50 | WebkitTransform: "translateY(-15%)",
51 | transformOrigin: "0 0",
52 | margin: "5px",
53 | padding: "10px",
54 | "&:before, &:after": {
55 | content: '""',
56 | display: "inline-block",
57 | position: "absolute",
58 | top: "8%"
59 | },
60 | "&:before": {
61 | borderBottom: "16px solid transparent",
62 | borderLeft: `16px solid ${grayColor}`,
63 | borderTop: "16px solid transparent",
64 | right: "-17px"
65 | },
66 | "&:after": {
67 | borderBottom: "16px solid transparent",
68 | borderLeft: `16px solid ${whiteColor}`,
69 | borderTop: "16px solid transparent",
70 | right: "-16px"
71 | }
72 | },
73 | menuShow: {
74 | opacity: 1,
75 | WebkitTransform: "translateY(-13%)",
76 | transformOrigin: "0 0",
77 | display: "block"
78 | }
79 | };
80 | };
81 |
82 | export default sideMenuStyle;
83 |
--------------------------------------------------------------------------------
/src/components/IconButton/IconButton.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import cx from "classnames";
4 | import { IconButton, makeStyles, deprecatedPropType } from "@material-ui/core";
5 | import Tooltip from '../Tooltip/Tooltip';
6 | import iconButtonStyle from "./iconButtonStyle";
7 |
8 | const useStyles = makeStyles(iconButtonStyle);
9 |
10 | // eslint-disable-next-line react/prop-types
11 | const Button = ({ children, color, className, ...rest }) => {
12 | const classes = useStyles();
13 | const buttonClasses =
14 | classes.button +
15 | cx({
16 | [" " + classes[color]]: color,
17 | [" " + className]: className
18 | });
19 | return
20 | {children}
21 |
22 | }
23 |
24 | function CustomIconButton({ tooltip, ...rest }) {
25 | return tooltip ?
26 |
27 |
28 |
29 | :
30 |
31 | }
32 |
33 | CustomIconButton.defaultProps = {
34 | color: "theme",
35 | size: "medium"
36 | }
37 |
38 | CustomIconButton.propTypes = {
39 | /**
40 | * The color of the button
41 | */
42 | color: PropTypes.oneOf([
43 | "primary",
44 | "info",
45 | "theme",
46 | "themeNoBackground",
47 | "themeWithBackground",
48 | "success",
49 | "warning",
50 | "danger",
51 | "rose",
52 | "white",
53 | "defaultNoBackground",
54 | "primaryNoBackground",
55 | "infoNoBackground",
56 | "successNoBackground",
57 | "warningNoBackground",
58 | "dangerNoBackground",
59 | "roseNoBackground",
60 | "themeWithGradient"
61 | ]),
62 | /**
63 | * The size of the button
64 | */
65 | size: PropTypes.oneOf([
66 | "small",
67 | "medium"
68 | ]),
69 | /**
70 | * Override or extend the styles applied to the component
71 | */
72 | customClass: deprecatedPropType(
73 | PropTypes.string,
74 | 'Use `className` instead.',
75 | ),
76 | /**
77 | * Override or extend the styles applied to the component
78 | */
79 | className: PropTypes.string,
80 | /**
81 | * If true, button will be disabled. Default is set to false
82 | */
83 | disabled: PropTypes.bool,
84 | /**
85 | * The text to be displayed when the user hover over the button
86 | */
87 | tooltip: PropTypes.string,
88 | /**
89 | * The content of the button
90 | */
91 | children: PropTypes.node
92 | };
93 |
94 | export default CustomIconButton;
--------------------------------------------------------------------------------
/src/components/AddButton/AddButton.d.ts:
--------------------------------------------------------------------------------
1 | import { ButtonProps } from '@material-ui/core/Button';
2 |
3 | export interface AddButtonProps extends Omit {
4 | /**
5 | * The title of button.
6 | */
7 | title?: string
8 | /**
9 | * Callback fired when a "click" event is detected.
10 | */
11 | onClick?: () => void
12 | /**
13 | * @default false
14 | * If true, button will be disabled.
15 | */
16 | disabled?: boolean
17 | /**
18 | * @default "theme"
19 | * The color of button.
20 | */
21 | color?: "primary" |
22 | "info" |
23 | "theme" |
24 | "themeNoBackground" |
25 | "themeWithBackground" |
26 | "success" |
27 | "warning" |
28 | "danger" |
29 | "rose" |
30 | "white" |
31 | "simple" |
32 | "defaultNoBackground" |
33 | "primaryNoBackground" |
34 | "infoNoBackground" |
35 | "successNoBackground" |
36 | "warningNoBackground" |
37 | "dangerNoBackground" |
38 | "roseNoBackground" |
39 | "themeWithGradient"
40 | /**
41 | * @default "medium"
42 | * The size of button.
43 | */
44 | size?: "medium" | "small"
45 | /**
46 | * @default "small"
47 | * The fontSize of button's content.
48 | */
49 | fontSize?: "inherit" | "small" | "medium" | "large"
50 | /**
51 | * Override or extend the styles applied to the component
52 | */
53 | className?: string
54 | /**
55 | * @default false
56 | * If true, the keyboard focus ripple will be disabled.
57 | */
58 | disableFocusRipple?: boolean
59 | /**
60 | * If true, the ripple effect will be disabled.
61 | */
62 | disableRipple?: boolean
63 | /**
64 | * @default "false"
65 | * If given, uses a negative margin to counteract the padding on one side
66 | * (this is often helpful for aligning the left or right side of the icon
67 | * with content above or below, without ruining the border size and shape).
68 | */
69 | edge?: "start" | "end" | "false"
70 | }
71 | /**
72 | *
73 | * Demos:
74 | *
75 | * - https://bit.dev/totalsoft_oss/react-mui/add-button
76 | *
77 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/AddButton/AddButton.js
78 | *
79 | * Bit component used:
80 | *
81 | * - IconButton: https://bit.dev/totalsoft_oss/react-mui/icon-button
82 | *
83 | */
84 | export default function AddButton(props: AddButtonProps): JSX.Element;
--------------------------------------------------------------------------------
/src/components/Button/Button.d.ts:
--------------------------------------------------------------------------------
1 | import { ButtonProps as BaseProps } from '@material-ui/core/Button';
2 | import React from 'react';
3 |
4 | export interface ButtonProps extends Omit {
5 | /**
6 | * The color of the button.
7 | */
8 | color?: "primary" |
9 | "info" |
10 | "theme" |
11 | "themeNoBackground" |
12 | "themeWithBackground" |
13 | "success" |
14 | "warning" |
15 | "danger" |
16 | "rose" |
17 | "white" |
18 | "simple" |
19 | "defaultNoBackground" |
20 | "primaryNoBackground" |
21 | "infoNoBackground" |
22 | "successNoBackground" |
23 | "warningNoBackground" |
24 | "dangerNoBackground" |
25 | "roseNoBackground" |
26 | "white" |
27 | "transparent" |
28 | "themeWithGradient"
29 | /**
30 | * If true, rounded corners are enabled.
31 | */
32 | round?: boolean
33 | /**
34 | * The content of the component.
35 | */
36 | children?: React.ReactNode
37 | /**
38 | * If true, the button will take up the full width of its container.
39 | */
40 | fullWidth?: boolean
41 | /**
42 | * If true, the button will be disabled.
43 | */
44 | disabled?: boolean
45 | /**
46 | * Override or extend the styles applied to the component
47 | * @deprecated Use `className` instead.
48 | */
49 | customClass?: string
50 | /**
51 | * A custom class provided.
52 | */
53 | className?: string
54 | /**
55 | * If true, the button's min width will be set to 160px.
56 | */
57 | wd?: boolean
58 | /**
59 | * If true, the button will be smaller.
60 | */
61 | justIcon?: boolean
62 | /**
63 | * If true, the button will float to the right.
64 | */
65 | right?: boolean
66 | /**
67 | * The size of the button.
68 | */
69 | size?: "sm" | "lg" | "xs"
70 | /**
71 | * The tooltip of the button.
72 | */
73 | tooltip?: string
74 | /**
75 | * Element placed before the children.
76 | */
77 | startIcon?: React.ReactNode
78 | /**
79 | * Element placed after the children.
80 | */
81 | endIcon?: React.ReactNode
82 | }
83 | /**
84 | *
85 | * Demos:
86 | *
87 | * - https://bit.dev/totalsoft_oss/react-mui/button
88 | *
89 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/Button/Button.js
90 | *
91 | * Material-UI components used:
92 | *
93 | * - Button: https://material-ui.com/api/button/
94 | * - Tooltip: https://material-ui.com/api/tooltip/
95 | *
96 | */
97 | export default function Button(props: ButtonProps): JSX.Element;
--------------------------------------------------------------------------------
/src/components/CancelButton/CancelButton.d.ts:
--------------------------------------------------------------------------------
1 | import { ButtonProps } from '@material-ui/core/Button';
2 |
3 | export interface CancelButtonProps extends Omit {
4 | /**
5 | * The title of button.
6 | */
7 | title?: string
8 | /**
9 | * Callback fired when a "click" event is detected.
10 | */
11 | onClick?: () => void
12 | /**
13 | * @default false
14 | * If true, button will be disabled.
15 | */
16 | disabled?: boolean
17 | /**
18 | * @default "theme"
19 | * The color of button.
20 | */
21 | color?: "primary" |
22 | "info" |
23 | "theme" |
24 | "themeNoBackground" |
25 | "themeWithBackground" |
26 | "success" |
27 | "warning" |
28 | "danger" |
29 | "rose" |
30 | "white" |
31 | "simple" |
32 | "defaultNoBackground" |
33 | "primaryNoBackground" |
34 | "infoNoBackground" |
35 | "successNoBackground" |
36 | "warningNoBackground" |
37 | "dangerNoBackground" |
38 | "roseNoBackground" |
39 | "themeWithGradient"
40 | /**
41 | * @default "medium "
42 | * The size of button.
43 | */
44 | size?: "medium" | "small"
45 | /**
46 | *@default "small"
47 | * The fontSize of button's content.
48 | */
49 | fontSize?: "inherit" | "medium" | "small" | "large"
50 | /**
51 | * Override or extend the styles applied to the component
52 | */
53 | className?: string
54 | /**
55 | * @default false
56 | * If true, the keyboard focus ripple will be disabled.
57 | */
58 | disableFocusRipple?: boolean
59 | /**
60 | * If true, the ripple effect will be disabled.
61 | */
62 | disableRipple?: boolean
63 | /**
64 | * @default "false"
65 | * If given, uses a negative margin to counteract the padding on one side
66 | * (this is often helpful for aligning the left or right side of the icon
67 | * with content above or below, without ruining the border size and shape).
68 | */
69 | edge?: "start" | "end" | "false"
70 | }
71 | /**
72 | *
73 | * Demos:
74 | *
75 | * - https://bit.dev/totalsoft_oss/react-mui/cancel-button
76 | *
77 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/CancelButton/CancelButton.js
78 | *
79 | * Bit components used:
80 | *
81 | * - IconButton: https://bit.dev/totalsoft_oss/react-mui/icon-button
82 | *
83 | */
84 | export default function CancelButton(props: CancelButtonProps): JSX.Element;
--------------------------------------------------------------------------------
/src/components/DownloadButton/DownloadButton.d.ts:
--------------------------------------------------------------------------------
1 | import { ButtonProps } from '@material-ui/core/Button';
2 |
3 | export interface DownloadButtonProps extends Omit {
4 | /**
5 | * The title of button.
6 | */
7 | title?: string;
8 | /**
9 | * Callback fired when a "click" event is detected.
10 | */
11 | onClick?: () => void
12 | /**
13 | * If true, the button will be disabled.
14 | */
15 | disabled?: boolean
16 | /**
17 | * @default "theme"
18 | * The color of button.
19 | */
20 | color?: "primary" |
21 | "info" |
22 | "theme" |
23 | "themeNoBackground" |
24 | "themeWithBackground" |
25 | "success" |
26 | "warning" |
27 | "danger" |
28 | "rose" |
29 | "white" |
30 | "simple" |
31 | "defaultNoBackground" |
32 | "primaryNoBackground" |
33 | "infoNoBackground" |
34 | "successNoBackground" |
35 | "warningNoBackground" |
36 | "dangerNoBackground" |
37 | "roseNoBackground" |
38 | "themeWithGradient"
39 | /**
40 | * @default "medium"
41 | * The size of button.
42 | */
43 | size?: "medium" | "small"
44 | /**
45 | * @default "medium"
46 | * The fontSize of button's content.
47 | */
48 | fontSize?: "inherit" | "small" | "medium" | "large"
49 | /**
50 | * Override or extend the styles applied to the component
51 | */
52 | className?: string
53 | /**
54 | * @default false
55 | * If true, the keyboard focus ripple will be disabled.
56 | */
57 | disableFocusRipple?: boolean
58 | /**
59 | * If true, the ripple effect will be disabled.
60 | */
61 | disableRipple?: boolean
62 | /**
63 | * @default "false"
64 | * If given, uses a negative margin to counteract the padding on one side
65 | * (this is often helpful for aligning the left or right side of the icon
66 | * with content above or below, without ruining the border size and shape).
67 | */
68 | edge?: "start" | "end" | "false"
69 | }
70 | /**
71 | *
72 | * Demos:
73 | *
74 | * - https://bit.dev/totalsoft_oss/react-mui/download-button
75 | *
76 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/DownloadButton/DownloadButton.js
77 | *
78 | * Bit component used:
79 | *
80 | * - IconButton: https://bit.dev/totalsoft_oss/react-mui/icon-button
81 | *
82 | */
83 | export default function DownloadButton(props: DownloadButtonProps): JSX.Element;
--------------------------------------------------------------------------------
/src/components/DownwardButton/DownwardButton.d.ts:
--------------------------------------------------------------------------------
1 | import { ButtonProps } from '@material-ui/core/Button';
2 |
3 | export interface DownwardButtonProps extends Omit {
4 | /**
5 | * The title of button.
6 | */
7 | title?: string;
8 | /**
9 | * Callback fired when a "click" event is detected.
10 | */
11 | onClick?: () => void
12 | /**
13 | * If true, the button will be disabled.
14 | */
15 | disabled?: boolean
16 | /**
17 | * @default "theme"
18 | * The color of button.
19 | */
20 | color?: "primary" |
21 | "info" |
22 | "theme" |
23 | "themeNoBackground" |
24 | "themeWithBackground" |
25 | "success" |
26 | "warning" |
27 | "danger" |
28 | "rose" |
29 | "white" |
30 | "simple" |
31 | "defaultNoBackground" |
32 | "primaryNoBackground" |
33 | "infoNoBackground" |
34 | "successNoBackground" |
35 | "warningNoBackground" |
36 | "dangerNoBackground" |
37 | "roseNoBackground" |
38 | "themeWithGradient"
39 | /**
40 | * @default "medium"
41 | * The size of button.
42 | */
43 | size?: "medium" | "small"
44 | /**
45 | * @default "medium"
46 | * The fontSize of button's content.
47 | */
48 | fontSize?: "inherit" | "small" | "medium" | "large"
49 | /**
50 | * Override or extend the styles applied to the component
51 | */
52 | className?: string
53 | /**
54 | * @default false
55 | * If true, the keyboard focus ripple will be disabled.
56 | */
57 | disableFocusRipple?: boolean
58 | /**
59 | * If true, the ripple effect will be disabled.
60 | */
61 | disableRipple?: boolean
62 | /**
63 | * @default "false"
64 | * If given, uses a negative margin to counteract the padding on one side
65 | * (this is often helpful for aligning the left or right side of the icon
66 | * with content above or below, without ruining the border size and shape).
67 | */
68 | edge?: "start" | "end" | "false"
69 | }
70 | /**
71 | *
72 | * Demos:
73 | *
74 | * - https://bit.dev/totalsoft_oss/react-mui/downward-button
75 | *
76 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/DownwardButton/DownwardButton.js
77 | *
78 | * Bit component used:
79 | *
80 | * - IconButton: https://bit.dev/totalsoft_oss/react-mui/icon-button
81 | *
82 | */
83 | export default function DownwardButton(props: DownwardButtonProps): JSX.Element;
--------------------------------------------------------------------------------
/src/components/Typography/Typography.d.ts:
--------------------------------------------------------------------------------
1 | import { TypographyProps as BaseProps } from "@material-ui/core/Typography";
2 |
3 | export interface TypographyProps extends BaseProps {
4 | /**
5 | * If provided, a text will appear on hover
6 | */
7 | tooltip?: string | React.ReactNode;
8 |
9 | /**
10 | * @default 'inherit'
11 | * Applies the theme typography styles.
12 |
13 | */
14 | variant?:
15 | | "inherit"
16 | | "h1"
17 | | "h2"
18 | | "h3"
19 | | "h4"
20 | | "h5"
21 | | "h6"
22 | | "subtitle1"
23 | | "subtitle2"
24 | | "body1"
25 | | "body2"
26 | | "caption"
27 | | "button"
28 | | "overline";
29 |
30 | /**
31 | * The color of the component
32 | */
33 | color?:
34 | | "initial"
35 | | "inherit"
36 | | "primary"
37 | | "secondary"
38 | | "textPrimary"
39 | | "textSecondary"
40 | | "error";
41 |
42 | /**
43 | * Set the text-align on the component.
44 | */
45 | align?: "inherit" | "left" | "center" | "right" | "justify";
46 |
47 | /**
48 | * @default 'initial'
49 | * Controls the display type
50 | */
51 | display?: "initial" | "block" | "inline";
52 |
53 | /**
54 | * @default false
55 | * If true, the text will have a bottom margin.
56 | */
57 | gutterBottom?: boolean;
58 |
59 | /**
60 | * @default false
61 | * If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.
62 | * Note that text overflow can only happen with block or inline-block level elements (the element needs
63 | * to have a width in order to overflow).
64 | */
65 | noWrap?: boolean;
66 |
67 | /**
68 | * @default false
69 | * If true, the text will have a bottom margin.
70 | */
71 | paragraph?: boolean;
72 |
73 | /**
74 | * Control the text emphasis
75 | */
76 | emphasis?:
77 | | "bold"
78 | | "italic"
79 | | "underline"
80 | | "line-through"
81 | | "overline"
82 | | ("bold" | "italic" | "underline" | "line-through" | "overline")[];
83 |
84 | /**
85 | * Demos:
86 | *
87 | * - https://bit.dev/totalsoft_oss/react-mui/typography
88 | *
89 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/Typography/Typography.js
90 | *
91 | * Material-UI component used:
92 | *
93 | * - Typography: https://material-ui.com/api/typography/
94 | *
95 | */
96 | }
97 |
98 | export default function Typography(props: TypographyProps): JSX.Element;
99 |
--------------------------------------------------------------------------------
/src/components/ImageCard/imageCardStyle.js:
--------------------------------------------------------------------------------
1 | import styles from "../../assets/jss/styles.js";
2 | import defaultTheme from "../themes/defaultTheme.js";
3 |
4 | const imageCardStyle = theme => {
5 | const {
6 | whiteColor,
7 | roseColor,
8 | successColor,
9 | dangerColor,
10 | warningColor,
11 | infoColor,
12 | blackColor,
13 | hexToRgb
14 | } = styles(theme);
15 |
16 | return {
17 | image: {
18 | borderRadius: "50% !important",
19 | margin: "5px 0px",
20 | boxShadow:
21 | "0 5px 15px -8px rgba(" +
22 | hexToRgb(blackColor) +
23 | ", 0.24), 0 8px 10px -5px rgba(" +
24 | hexToRgb(blackColor) +
25 | ", 0.2)"
26 | },
27 | s: {
28 | height: "80px",
29 | width: "80px"
30 | },
31 | m: {
32 | height: "163px",
33 | width: "163px"
34 | },
35 | l: {
36 | height: "280px",
37 | width: "280px"
38 | },
39 | primary: {
40 | background:
41 | theme.palette?.primary?.main || defaultTheme?.palette?.primary?.main,
42 | color: whiteColor
43 | },
44 | info: {
45 | background:
46 | "linear-gradient(60deg," + infoColor[1] + "," + infoColor[2] + ")",
47 | "& h1 small": {
48 | color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
49 | },
50 | color: whiteColor
51 | },
52 | success: {
53 | background:
54 | "linear-gradient(60deg," +
55 | successColor[1] +
56 | "," +
57 | successColor[2] +
58 | ")",
59 | "& h1 small": {
60 | color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
61 | },
62 | color: whiteColor
63 | },
64 | warning: {
65 | background:
66 | "linear-gradient(60deg," +
67 | warningColor[1] +
68 | "," +
69 | warningColor[2] +
70 | ")",
71 | "& h1 small": {
72 | color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
73 | },
74 | color: whiteColor
75 | },
76 | danger: {
77 | background:
78 | "linear-gradient(60deg," + dangerColor[1] + "," + dangerColor[2] + ")",
79 | "& h1 small": {
80 | color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
81 | },
82 | color: whiteColor
83 | },
84 | rose: {
85 | background:
86 | "linear-gradient(60deg," + roseColor[1] + "," + roseColor[2] + ")",
87 | "& h1 small": {
88 | color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
89 | },
90 | color: whiteColor
91 | }
92 | };
93 | };
94 |
95 | export default imageCardStyle;
96 |
--------------------------------------------------------------------------------
/src/components/IconButton/IconButton.d.ts:
--------------------------------------------------------------------------------
1 | import { IconButtonProps as BaseProps } from '@material-ui/core/IconButton';
2 |
3 | export interface IconButtonProps extends Omit {
4 | /**
5 | * The content of the button
6 | */
7 | children?: React.ReactNode
8 | /**
9 | * @default "theme"
10 | * The color of the button
11 | */
12 | color?: "primary" |
13 | "info" |
14 | "theme" |
15 | "themeNoBackground" |
16 | "themeWithBackground" |
17 | "success" |
18 | "warning" |
19 | "danger" |
20 | "rose" |
21 | "white" |
22 | "defaultNoBackground" |
23 | "primaryNoBackground" |
24 | "infoNoBackground" |
25 | "successNoBackground" |
26 | "warningNoBackground" |
27 | "dangerNoBackground" |
28 | "roseNoBackground" |
29 | "themeWithGradient"
30 | /**
31 | * @default "medium"
32 | * The size of the button
33 | */
34 | size?: "small" | "medium"
35 | /**
36 | * Override or extend the styles applied to the component
37 | * @deprecated Use `className` instead.
38 | */
39 | customClass?: string
40 | /**
41 | * Override or extend the styles applied to the component
42 | */
43 | className?: string
44 | /**
45 | * @default false
46 | * If true, button will be disabled.
47 | */
48 | disabled?: boolean
49 | /**
50 | * @default false
51 | * If true, the keyboard focus ripple will be disabled.
52 | */
53 | disableFocusRipple?: boolean
54 | /**
55 | * If true, the ripple effect will be disabled.
56 | */
57 | disableRipple?: boolean
58 | /**
59 | * @default "false"
60 | * If given, uses a negative margin to counteract the padding on one side
61 | * (this is often helpful for aligning the left or right side of the icon
62 | * with content above or below, without ruining the border size and shape).
63 | */
64 | edge?: "start" | "end" | "false"
65 | /**
66 | * The text to be displayed when the user hovers over the button
67 | */
68 | tooltip?: string
69 | /**
70 | * Demos:
71 | *
72 | * - https://bit.dev/totalsoft_oss/react-mui/icon-button
73 | *
74 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/IconButton/IconButton.js
75 | *
76 | * Material-UI component used:
77 | *
78 | * - IconButton: https://material-ui.com/api/icon-button/
79 | *
80 | */
81 | }
82 |
83 | export default function IconButton(props: IconButtonProps): JSX.Element;
--------------------------------------------------------------------------------
/src/components/DialogDisplay/DialogDisplay.d.ts:
--------------------------------------------------------------------------------
1 | import { DialogProps } from '@material-ui/core/Dialog';
2 |
3 | export interface DialogDisplayProps extends Omit {
4 | /**
5 | * The id(s) of the element(s) that label the dialog.
6 | */
7 | id: string;
8 | /**
9 | * @default false
10 | * If true, the dialog is open.
11 | */
12 | open?: boolean
13 | /**
14 | * @default false
15 | * If true, the dialog will be full-screen.
16 | */
17 | fullScreen?: boolean
18 | /**
19 | * @default 'paper'
20 | * Determine the container for scrolling the dialog.
21 | */
22 | scroll?: 'body' | 'paper'
23 | /**
24 | * Callback fired when the component requests to be closed.
25 | * Signature: function(event: object, reason: string) => void
26 | * @param {object} event The event source of the callback.
27 | * @param {string} reason Can be: "escapeKeyDown", "backdropClick", "closeActionClick".
28 | */
29 | onClose?: (event: object, reason: string) => void
30 | /**
31 | * The content of dialog.
32 | */
33 | content?: React.ReactNode
34 | /**
35 | * The actions provided below the dialog.
36 | */
37 | actions?: React.ReactNode
38 | /**
39 | * The title of dialog.
40 | */
41 | title?: string | React.ReactNode
42 | /**
43 | * The value of the overflowY CSS property
44 | */
45 | overflowY?: "scroll" | "hidden" | "visible" | "auto",
46 | /**
47 | * @default false
48 | * If true, clicking the backdrop will not fire the onClose callback.
49 | */
50 | disableBackdropClick?: boolean
51 | /**
52 | * @default false
53 | * If true, hitting escape will not fire the onClose callback.
54 | */
55 | disableEscapeKeyDown?: boolean
56 | }
57 | /**
58 | *
59 | * Demos:
60 | *
61 | * - https://bit.dev/totalsoft_oss/react-mui/dialog-display
62 | *
63 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/DialogDisplay/DialogDisplay.js
64 | *
65 | * Material UI components used:
66 | *
67 | * - Dialog: https://material-ui.com/api/dialog/
68 | * - DialogTitle: https://material-ui.com/api/dialog-title/
69 | * - DialogContent: https://material-ui.com/api/dialog-content/
70 | * - DialogContentText: https://material-ui.com/api/dialog-content-text/
71 | * - DialogActions: https://material-ui.com/api/dialog-actions/
72 | *
73 | */
74 | export default function DialogDisplay(props: DialogDisplayProps): JSX.Element;
--------------------------------------------------------------------------------
/src/components/FileUploadButton/FileUploadButton.d.ts:
--------------------------------------------------------------------------------
1 | export interface FileUploadButtonProps {
2 | /**
3 | * The component to render. If component prop isn't provided, UploadButton will be rendered.
4 | */
5 | component?: Object;
6 | /**
7 | * The content of the button
8 | */
9 | children?: React.ReactNode;
10 | /**
11 | * This function is called after a file is selected
12 | * @param {file} file
13 | */
14 | onFileSelected?: (file: File) => void
15 | /**
16 | * If one of them is true, button will be disabled
17 | */
18 | uploading?: boolean;
19 | disabled?: boolean;
20 | /**
21 | * Accepted type of file to upload
22 | */
23 | accept?: string;
24 | /**
25 | * The minimum size of the file to be uploaded
26 | */
27 | minSize?: number;
28 | /**
29 | * The maximum size of the file to be uploaded
30 | */
31 | maxSize?: number;
32 | /**
33 | * @default "Uploading"
34 | * Text shown when a file is uploading
35 | */
36 | uploadingText?: string;
37 | /**
38 | * @default "Upload"
39 | * Text to be displayed
40 | */
41 | uploadText?: string;
42 | /**
43 | * @default "Invalid file type. Please upload type {{accept}}"
44 | * If the file type isn't the same with the one received in the accept prop, it will be prompted this text
45 | */
46 | invalidTypeText?: string;
47 | /**
48 | * @default "Maximum allowed size of {{maxSize}} exceeded."
49 | * If the file size exceeded maxSize, it wil be prompted this text
50 | * { maxSize: (maxSize / 1024) > 1024 ? (maxSize / (1024 * 1024)).toFixed(2) + "MB" : (maxSize / 1024) + "KB" }
51 | */
52 | tooLargeText?: string;
53 | /**
54 | * @default "Minimum allowed size of upload is {{minSize}}."
55 | * If the file size is less than minSize, it wil be prompted this text
56 | * { minSize: (minSize / 1024) > 1024 ? (minSize / (1024 * 1024)).toFixed(2) + "MB" : (minSize / 1024) + "KB" }
57 | */
58 | tooSmallText?: string;
59 | /**
60 | * Demos:
61 | *
62 | * - https://bit.dev/totalsoft_oss/react-mui/file-upload-button
63 | *
64 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/FileUploadButton/FileUploadButton.js
65 | *
66 | * Material-UI component used:
67 | *
68 | * - IconButton: https://material-ui.com/api/icon-button/
69 | *
70 | */
71 | }
72 |
73 | export default function FileUploadButtonProps(props: FileUploadButtonProps): JSX.Element;
--------------------------------------------------------------------------------
/src/components/TemplateEditor/TemplateEditor.d.ts:
--------------------------------------------------------------------------------
1 | export interface TemplateEditorProps {
2 | /**
3 | *The disabled property can dynamically switch the editor between a “disabled” (read-only) mode (true) and the standard editable mode (false)
4 | */
5 | disabled?: boolean
6 | /**
7 | * This property allows the editor to be used as a controlled component by setting the value property and using the onEditorChange event
8 | */
9 | value?: string
10 | /**
11 | * Initial content of the editor when the editor is initialized.
12 | */
13 | initialValue?: string
14 | /**
15 | * Your API Key is a unique token that links your TinyMCE instances to your account. It grants you access to all of the Premium Plugins
16 | */
17 | apiKey?: string
18 | /**
19 | * Used to store the state of the editor outside the editor React component.
20 | */
21 | onEditorChange?: () => void
22 | /**
23 | * Sets the height of the entire editor, including the menu bar, toolbars, and status bar.
24 | */
25 | height?: number
26 | /**
27 | * This option allows you to specify which menus should appear and the order that they appear in the menu bar at the top
28 | * If set to false, the menubar will not be visible
29 | */
30 | menubar?: boolean | string
31 | /**
32 | * This option allows you to specify which plugins will attempt to load when starting up the editor.
33 | * They will be specified as strings inside an array
34 | */
35 | plugins?: []
36 | /**
37 | * This option allows you to specify the buttons and the order that they will appear on toolbar.
38 | * They will be specified in a string separated by white spaces
39 | */
40 | toolbar?: string
41 | /**
42 | * Use the branding option to enable or disable the “Powered by Tiny” link displayed in the status bar
43 | */
44 | branding?: boolean
45 | /**
46 | * This option allows you to show or not the selected element and its html path
47 | */
48 | elementpath?: boolean
49 | /**
50 | * Demos:
51 | *
52 | * - https://bit.dev/totalsoft_oss/react-mui/template-editor
53 | *
54 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/TemplateEditor/TemplateEditor.js
55 | *
56 | * Component used:
57 | *
58 | * - Editor: https://www.tiny.cloud/docs/integrations/react/
59 | *
60 | */
61 | }
62 |
63 | export default function TemplateEditor(props: TemplateEditorProps): JSX.Element
--------------------------------------------------------------------------------
Card
40 | );
41 |
42 | const testInstance = wrapper.root;
43 |
44 | expect(testInstance.findByType('div').props.className).toContain('info');
45 | });
46 |
47 | it('class primary are present', () => {
48 | const wrapper = renderer.create(
49 |
24 |
31 |
32 | )
33 | }
34 |
35 | ExpandingText.defaultProps = {
36 | minLength: 2000,
37 | showLessText: "Show less",
38 | showMoreText: "Show more"
39 | }
40 |
41 | ExpandingText.propTypes = {
42 | /**
43 | * The text content.
44 | */
45 | text: PropTypes.string.isRequired,
46 | /**
47 | * The minimum length of the narrow text.
48 | */
49 | minLength: PropTypes.number,
50 | /**
51 | * The content of the button when the text is narrow.
52 | */
53 | showLessText: PropTypes.string.isRequired,
54 | /**
55 | * The content of the button when the text is wide.
56 | */
57 | showMoreText: PropTypes.string.isRequired
58 | };
59 |
60 | export default ExpandingText;
--------------------------------------------------------------------------------
/src/components/IconCard/IconCard.d.ts:
--------------------------------------------------------------------------------
1 | import { CardProps } from '@material-ui/core/Card';
2 | import { CardContentProps } from '@material-ui/core/CardContent';
3 | import { CardHeaderProps } from '@material-ui/core/CardHeader';
4 |
5 | export interface Props {
6 | /**
7 | * Icon to be displayed. This property is mandatory
8 | */
9 | icon: Object;
10 | /**
11 | * @default "theme"
12 | * The color of the icon that will be displayed
13 | */
14 | iconColor?: "orange" |
15 | "green" |
16 | "red" |
17 | "blue" |
18 | "purple" |
19 | "rose" |
20 | "theme" |
21 | "themeWithGradient"
22 |
23 | /**
24 | * @default ""
25 | * The title to be displayed. This property can be a string or a component
26 | */
27 | title?: React.ReactNode;
28 | /**
29 | * The subtitle to be displayed. This property can be a string or a component
30 | */
31 | subtitle?: React.ReactNode;
32 | /**
33 | * The content of the card
34 | */
35 | content?: React.ReactNode;
36 | /**
37 | * The footer to be displayed. This property can be a string or a component
38 | */
39 | footer?: React.ReactNode;
40 | /**
41 | * If set to true, the background will be transparent
42 | */
43 | plain?: boolean;
44 | /**
45 | * Override or extend the styles applied to the content of the card
46 | */
47 | customCardContentClass?: string;
48 | /**
49 | * Override or extend the styles applied to the card
50 | */
51 | customCardClass?: string;
52 | /**
53 | * Demos:
54 | *
55 | * - https://bit.dev/totalsoft_oss/react-mui/icon-card
56 | *
57 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/IconCard/IconCard.js
58 | */
59 | }
60 |
61 | export type IconCardProps = Props | CardProps | CardContentProps | CardHeaderProps
62 |
63 | export default function IconCard(props: IconCardProps): JSX.Element;
--------------------------------------------------------------------------------
/__tests__/StatsCard/__snapshots__/StatsCard.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`StatsCard Snapshot 1`] = `
4 | Card
50 | );
51 |
52 | const testInstance = wrapper.root;
53 |
54 | expect(testInstance.findByType('div').props.className).toContain('primary');
55 | });
56 | });
--------------------------------------------------------------------------------
/src/components/IconCard/iconCardStyle.js:
--------------------------------------------------------------------------------
1 | import styles from "../../assets/jss/styles";
2 | import defaultTheme from "../themes/defaultTheme";
3 |
4 | const iconCardStyle = theme => {
5 | const {
6 | card,
7 | cardHeader,
8 | orangeCardHeader,
9 | greenCardHeader,
10 | redCardHeader,
11 | blueCardHeader,
12 | purpleCardHeader,
13 | roseCardHeader,
14 | themeCardHeader,
15 | themeWithGradientCardHeader
16 | } = styles(theme);
17 |
18 | return {
19 | card,
20 | cardPlain: {
21 | background: "transparent",
22 | boxShadow: "none"
23 | },
24 | cardHeader: {
25 | ...cardHeader,
26 | float: "left"
27 | },
28 | orangeCardHeader,
29 | greenCardHeader,
30 | redCardHeader,
31 | blueCardHeader,
32 | purpleCardHeader,
33 | roseCardHeader,
34 | themeCardHeader,
35 | themeWithGradientCardHeader,
36 | cardContent: {
37 | padding: "15px 20px",
38 | position: "relative"
39 | },
40 | cardAvatar: {
41 | margin: "0px"
42 | },
43 | cardIcon: {
44 | paddingTop: "3px",
45 | paddingLeft: "3px",
46 | paddingRight: "3px",
47 | color: "#FFFFFF",
48 | width: "30px",
49 | height: "30px"
50 | },
51 | cardTitle: {
52 | ...(theme.header?.title || defaultTheme?.header.title),
53 | display: "flex",
54 | paddingBottom: "5px",
55 | marginBottom: "3px"
56 | },
57 | cardCategory: {
58 | color: "#999999",
59 | fontSize: "14px",
60 | fontWeight: "400",
61 | lineHeight: "1",
62 | marginBottom: "0"
63 | },
64 | cardFooter: {
65 | margin: "0 20px 10px",
66 | paddingTop: "10px",
67 | borderTop: "1px solid #eeeeee"
68 | },
69 | expansionPanelDetails: {
70 | "@media (max-width: 480px)": {
71 | padding: "4px"
72 | }
73 | }
74 | };
75 | };
76 |
77 | export default iconCardStyle;
78 |
--------------------------------------------------------------------------------
/src/components/Charts/components/ChartBar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ChartCard from "../../ChartCard";
3 | import PropTypes from "prop-types";
4 | import { Bar } from "react-chartjs-2";
5 | import "chartjs-plugin-datalabels";
6 |
7 | export const ChartBar = ({
8 | labels,
9 | title,
10 | displayDataLabels,
11 | dataInfo,
12 | underChart,
13 | chartColor,
14 | text,
15 | StatIcon,
16 | statText,
17 | hover,
18 | options,
19 | ...other
20 | }) => {
21 | let data =
22 | dataInfo.datasets &&
23 | dataInfo.datasets.map(value => {
24 | return {
25 | ...value,
26 | borderColor: value.color,
27 | backgroundColor: value.color,
28 | ...other
29 | };
30 | });
31 |
32 | let opts = {
33 | ...options,
34 | plugins: {
35 | datalabels: {
36 | formatter: function (value) {
37 | return value;
38 | },
39 | align: "top",
40 | font: {
41 | size: 8
42 | },
43 | display: displayDataLabels
44 | }
45 | }
46 | };
47 |
48 | return (
49 |
9 |
11 | )
12 |
13 | AddButton.defaultProps = {
14 | color: "theme",
15 | fontSize: "small",
16 | size: "medium"
17 | };
18 |
19 | AddButton.propTypes = {
20 | /**
21 | * The title of button.
22 | */
23 | title: PropTypes.string,
24 | /**
25 | * Callback fired when a "click" event is detected.
26 | */
27 | onClick: PropTypes.func,
28 | /**
29 | * If true, the button will be disabled.
30 | */
31 | disabled: PropTypes.bool,
32 | /**
33 | * The color of button.
34 | */
35 | color: PropTypes.oneOf([
36 | "primary",
37 | "info",
38 | "theme",
39 | "themeNoBackground",
40 | "themeWithBackground",
41 | "success",
42 | "warning",
43 | "danger",
44 | "rose",
45 | "white",
46 | "simple",
47 | "defaultNoBackground",
48 | "primaryNoBackground",
49 | "infoNoBackground",
50 | "successNoBackground",
51 | "warningNoBackground",
52 | "dangerNoBackground",
53 | "roseNoBackground",
54 | "themeWithGradient"
55 | ]),
56 | /**
57 | * The size of button.
58 | */
59 | size: PropTypes.oneOf([
60 | "small",
61 | "medium"
62 | ]),
63 | /**
64 | * The fontSize of button's content.
65 | */
66 | fontSize: PropTypes.oneOf([
67 | "inherit",
68 | "small",
69 | "medium",
70 | "large"
71 | ])
72 | };
73 |
74 | export default AddButton;
--------------------------------------------------------------------------------
/src/components/CancelButton/CancelButton.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import CancelIcon from '@material-ui/icons/Cancel';
4 | import CustomIconButton from '../IconButton';
5 |
6 | const CancelButton = ({ title, onClick, disabled, fontSize, ...rest }) => (
7 |
8 |
10 | )
11 |
12 | CancelButton.defaultProps = {
13 | color: "theme",
14 | fontSize: "small",
15 | size: "medium"
16 | };
17 |
18 | CancelButton.propTypes = {
19 | /**
20 | * The title of button.
21 | */
22 | title: PropTypes.string,
23 | /**
24 | * Callback fired when a "click" event is detected.
25 | */
26 | onClick: PropTypes.func,
27 | /**
28 | * If true, the button will be disabled.
29 | */
30 | disabled: PropTypes.bool,
31 | /**
32 | * The color of button.
33 | */
34 | color: PropTypes.oneOf([
35 | "primary",
36 | "info",
37 | "theme",
38 | "themeNoBackground",
39 | "themeWithBackground",
40 | "success",
41 | "warning",
42 | "danger",
43 | "rose",
44 | "white",
45 | "simple",
46 | "defaultNoBackground",
47 | "primaryNoBackground",
48 | "infoNoBackground",
49 | "successNoBackground",
50 | "warningNoBackground",
51 | "dangerNoBackground",
52 | "roseNoBackground",
53 | "themeWithGradient"
54 | ]),
55 | /**
56 | * The size of button.
57 | */
58 | size: PropTypes.oneOf([
59 | "small",
60 | "medium"
61 | ]),
62 | /**
63 | * The fontSize of button's content.
64 | */
65 | fontSize: PropTypes.oneOf([
66 | "inherit",
67 | "small",
68 | "medium",
69 | "large"
70 | ])
71 | };
72 |
73 | export default CancelButton;
--------------------------------------------------------------------------------
/src/components/DeleteButton/DeleteButton.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import DeleteIcon from '@material-ui/icons/Delete';
4 | import CustomIconButton from '../IconButton';
5 |
6 | const DeleteButton = ({ title, onClick, disabled, fontSize, ...rest }) => (
7 |
8 |
10 | )
11 |
12 | DeleteButton.defaultProps = {
13 | color: "theme",
14 | fontSize: "medium",
15 | size: "medium"
16 | };
17 |
18 | DeleteButton.propTypes = {
19 | /**
20 | * The title of button.
21 | */
22 | title: PropTypes.string,
23 | /**
24 | * Callback fired when a "click" event is detected.
25 | */
26 | onClick: PropTypes.func,
27 | /**
28 | * If true, the button will be disabled.
29 | */
30 | disabled: PropTypes.bool,
31 | /**
32 | * The color of button.
33 | */
34 | color: PropTypes.oneOf([
35 | "primary",
36 | "info",
37 | "theme",
38 | "themeNoBackground",
39 | "themeWithBackground",
40 | "success",
41 | "warning",
42 | "danger",
43 | "rose",
44 | "white",
45 | "simple",
46 | "defaultNoBackground",
47 | "primaryNoBackground",
48 | "infoNoBackground",
49 | "successNoBackground",
50 | "warningNoBackground",
51 | "dangerNoBackground",
52 | "roseNoBackground",
53 | "themeWithGradient"
54 | ]),
55 | /**
56 | * The size of button.
57 | */
58 | size: PropTypes.oneOf([
59 | "small",
60 | "medium"
61 | ]),
62 | /**
63 | * The fontSize of button's content.
64 | */
65 | fontSize: PropTypes.oneOf([
66 | "inherit",
67 | "small",
68 | "medium",
69 | "large"
70 | ])
71 | };
72 |
73 | export default DeleteButton;
--------------------------------------------------------------------------------
/__tests__/DownloadButton/DownloadButton.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import DownloadButton from '../../components/DownloadButton/DownloadButton';
3 | import { mount } from 'enzyme';
4 | import { IconButton } from "@material-ui/core";
5 |
6 | describe('DownloadButton', () => {
7 | it('onClick should be called', () => {
8 | const onClickMock = jest.fn();
9 |
10 | const wrapper = mount( { }}
25 | disabled={true}
26 | fontSize="small"
27 | > );
28 |
29 | expect(wrapper.find(IconButton).props().disabled).toBe(true);
30 | });
31 |
32 | it('the button should be enabled', () => {
33 | const wrapper = mount( { }}
36 | disabled={false}
37 | fontSize="small"
38 | > );
39 |
40 | expect(wrapper.find(IconButton).props().disabled).toBe(false);
41 | });
42 |
43 | it('the color, fontSize and size props should be equal to the default values if they are not provided', () => {
44 | const wrapper = mount( { }}
47 | disabled={false}
48 | fontSize="small"
49 | > );
50 |
51 | expect(wrapper.props().color).toBe('theme');
52 | expect(wrapper.props().fontSize).toBe('small');
53 | expect(wrapper.props().size).toBe('medium');
54 | });
55 | });
--------------------------------------------------------------------------------
/src/components/Pagination/PaginationActions.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { makeStyles } from '@material-ui/core';
4 | import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
5 | import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
6 | import IconButton from '../IconButton';
7 | import paginationStyle from './paginationStyle';
8 |
9 | const useStyles = makeStyles(paginationStyle);
10 |
11 | function TablePaginationActions({ count, page, rowsPerPage, onPageChange }) {
12 | const classes = useStyles();
13 |
14 | const handleBackButtonClick = useCallback(event => {
15 | onPageChange(event, page - 1, 0);
16 | }, [onPageChange, page])
17 |
18 | const handleNextButtonClick = useCallback(event => {
19 | onPageChange(event, page + 1, 1);
20 | }, [onPageChange, page])
21 |
22 | return (
23 |
29 |
34 |
35 | {showPassword ?
37 |
38 |
39 | }
40 | />
41 | );
42 | };
43 |
44 | PasswordField.defaultProps = {
45 | hidePasswordText: "Hide password",
46 | showPasswordText: "Show password text"
47 | };
48 |
49 | PasswordField.propTypes = {
50 | /**
51 | * The text to be displayed on tooltip when the user wants to hide the password
52 | */
53 | hidePasswordText: PropTypes.string,
54 | /**
55 | * The text to be displayed on tooltip when the user wants to show the password
56 | */
57 | showPasswordText: PropTypes.string
58 | };
59 |
60 | export default PasswordField;
61 |
--------------------------------------------------------------------------------
/src/components/DownloadButton/DownloadButton.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
4 | import CustomIconButton from '../IconButton';
5 |
6 | const DownloadButton = ({ title, onClick, disabled, fontSize, ...rest }) => (
7 |
8 |
10 | )
11 |
12 | DownloadButton.defaultProps = {
13 | color: "theme",
14 | fontSize: "medium",
15 | size: "medium"
16 | };
17 |
18 | DownloadButton.propTypes = {
19 | /**
20 | * The title of button.
21 | */
22 | title: PropTypes.string,
23 | /**
24 | * Callback fired when a "click" event is detected.
25 | */
26 | onClick: PropTypes.func,
27 | /**
28 | * The color of button.
29 | */
30 | color: PropTypes.oneOf([
31 | "primary",
32 | "info",
33 | "theme",
34 | "themeNoBackground",
35 | "themeWithBackground",
36 | "success",
37 | "warning",
38 | "danger",
39 | "rose",
40 | "white",
41 | "simple",
42 | "defaultNoBackground",
43 | "primaryNoBackground",
44 | "infoNoBackground",
45 | "successNoBackground",
46 | "warningNoBackground",
47 | "dangerNoBackground",
48 | "roseNoBackground",
49 | "themeWithGradient"
50 | ]),
51 | /**
52 | * The size of button.
53 | */
54 | size: PropTypes.oneOf([
55 | "small",
56 | "medium"
57 | ]),
58 | /**
59 | * The fontSize of button's content.
60 | */
61 | fontSize: PropTypes.oneOf([
62 | "inherit",
63 | "small",
64 | "medium",
65 | "large"
66 | ]),
67 | /**
68 | * If true, the button will be disabled.
69 | */
70 | disabled: PropTypes.bool
71 | };
72 |
73 | export default DownloadButton;
--------------------------------------------------------------------------------
/src/components/DownwardButton/DownwardButton.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import { ArrowDownward } from '@material-ui/icons';
4 | import CustomIconButton from '../IconButton';
5 |
6 | function DownwardButton({ title, onClick, disabled, fontSize, ...rest }) {
7 | return (
8 |
9 |
11 | )
12 | }
13 |
14 | DownwardButton.defaultProps = {
15 | color: "theme",
16 | fontSize: "small",
17 | size: "medium"
18 | };
19 |
20 | DownwardButton.propTypes = {
21 | /**
22 | * The title of button.
23 | */
24 | title: PropTypes.string,
25 | /**
26 | * Callback fired when a "click" event is detected.
27 | */
28 | onClick: PropTypes.func,
29 | /**
30 | * If true, the button will be disabled.
31 | */
32 | disabled: PropTypes.bool,
33 | /**
34 | * The color of button.
35 | */
36 | color: PropTypes.oneOf([
37 | "primary",
38 | "info",
39 | "theme",
40 | "themeNoBackground",
41 | "themeWithBackground",
42 | "success",
43 | "warning",
44 | "danger",
45 | "rose",
46 | "white",
47 | "simple",
48 | "defaultNoBackground",
49 | "primaryNoBackground",
50 | "infoNoBackground",
51 | "successNoBackground",
52 | "warningNoBackground",
53 | "dangerNoBackground",
54 | "roseNoBackground",
55 | "themeWithGradient"
56 | ]),
57 | /**
58 | * The size of button.
59 | */
60 | size: PropTypes.oneOf([
61 | "small",
62 | "medium"
63 | ]),
64 | /**
65 | * The fontSize of button's content.
66 | */
67 | fontSize: PropTypes.oneOf([
68 | "inherit",
69 | "small",
70 | "medium",
71 | "large"
72 | ])
73 | }
74 |
75 | export default DownwardButton;
--------------------------------------------------------------------------------
/src/components/ChartCard/ChartCard.d.ts:
--------------------------------------------------------------------------------
1 | export interface ChartCardProps {
2 | /**
3 | * The main content of chart.
4 | */
5 | chart: React.ReactNode;
6 | /**
7 | * The actions(made of array of buttons) of card.
8 | */
9 | title?: string
10 | /**
11 | * The text content of chart.
12 | */
13 | text?: string
14 | /**
15 | * The icon of chart.
16 | */
17 | StatIcon: unknown
18 | /**
19 | * @default "gray"
20 | * The icon's color of chart.
21 | */
22 | statIconColor: "warning" |
23 | "primary" |
24 | "danger" |
25 | "success" |
26 | "info" |
27 | "rose" |
28 | "gray"
29 | /**
30 | * @default "purple"
31 | * The color of chart.
32 | */
33 | chartColor: "orange" |
34 | "green" |
35 | "red" |
36 | "blue" |
37 | "purple" |
38 | "rose" |
39 | "white"
40 | /**
41 | * The color of chart.
42 | */
43 | statLink: React.ReactNode
44 | /**
45 | * The text status of chart.
46 | */
47 | statText: string
48 | /**
49 | * @default false
50 | * If true, the chart moves up on click hover.
51 | */
52 | hover: boolean
53 | /**
54 | * If provided, its content will appear just below the main content.
55 | */
56 | underChart: React.ReactNode
57 | }
58 | /**
59 | *
60 | * Demos:
61 | *
62 | * - https://bit.dev/totalsoft_oss/react-mui/chart-card
63 | *
64 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/ChartCard/ChartCard.js
65 | *
66 | * Warning:
67 | * This component will be provided only through ChartFactory API. This approach is not compulsory
68 | * but it's recommended to ensure the correct behavior of the component.
69 | */
70 | export default function ChartCard(props: ChartCardProps): JSX.Element;
--------------------------------------------------------------------------------
/src/components/CustomLinearProgress/customLinearProgressStyle.js:
--------------------------------------------------------------------------------
1 | import styles from "../../assets/jss/styles";
2 | import defaultTheme from "../themes/defaultTheme";
3 |
4 | const customLinearProgressStyle = theme => {
5 | const {
6 | warningColor,
7 | dangerColor,
8 | successColor,
9 | infoColor,
10 | roseColor,
11 | grayColor,
12 | hexToRgb
13 | } = styles(theme);
14 |
15 | return {
16 | root: {
17 | height: "4px",
18 | marginBottom: "20px",
19 | overflow: "hidden"
20 | },
21 | bar: {
22 | height: "4px"
23 | },
24 | primary: {
25 | backgroundColor:
26 | theme.palette?.primary?.main || defaultTheme?.palette?.primary?.main
27 | },
28 | warning: {
29 | backgroundColor: warningColor
30 | },
31 | danger: {
32 | backgroundColor: dangerColor
33 | },
34 | success: {
35 | backgroundColor: successColor
36 | },
37 | info: {
38 | backgroundColor: infoColor
39 | },
40 | rose: {
41 | backgroundColor: roseColor
42 | },
43 | gray: {
44 | backgroundColor: grayColor
45 | },
46 | primaryBackground: {
47 | background:
48 | "rgba(" +
49 | hexToRgb(
50 | theme.palette?.primary?.main || defaultTheme.palette?.primary?.main
51 | ) +
52 | ", 0.2)"
53 | },
54 | warningBackground: {
55 | background: "rgba(" + hexToRgb(warningColor) + ", 0.2)"
56 | },
57 | dangerBackground: {
58 | background: "rgba(" + hexToRgb(dangerColor) + ", 0.2)"
59 | },
60 | successBackground: {
61 | background: "rgba(" + hexToRgb(successColor) + ", 0.2)"
62 | },
63 | infoBackground: {
64 | background: "rgba(" + hexToRgb(infoColor) + ", 0.2)"
65 | },
66 | roseBackground: {
67 | background: "rgba(" + hexToRgb(roseColor) + ", 0.2)"
68 | },
69 | grayBackground: {
70 | background: "rgba(" + hexToRgb(grayColor) + ", 0.2)"
71 | }
72 | };
73 | };
74 |
75 | export default customLinearProgressStyle;
76 |
--------------------------------------------------------------------------------
/src/components/StatsCard/StatsCard.d.ts:
--------------------------------------------------------------------------------
1 | import { CardProps } from '@material-ui/core/Card';
2 | import { CardContentProps } from '@material-ui/core/CardContent';
3 | import { CardHeaderProps } from '@material-ui/core/CardHeader';
4 | import { CardActionsProps } from '@material-ui/core/CardActions';
5 |
6 | export interface Props {
7 |
8 | /**
9 | * The icon to be displayed. This property is required
10 | */
11 | Icon: unknown;
12 |
13 | /**
14 | * @default "blue"
15 | * The color of the icon
16 | */
17 | iconColor?: "orange" |
18 | "green" |
19 | "red" |
20 | "blue" |
21 | "purple"
22 |
23 | /**
24 | * The tile of the card
25 | */
26 | title?: React.ReactNode;
27 |
28 | /**
29 | * Description of the card content
30 | */
31 | description?: React.ReactNode;
32 |
33 | /**
34 | * Footer for description
35 | */
36 | subContent?: React.ReactNode;
37 |
38 | /**
39 | * Icon for content
40 | */
41 | StatIcon?: unknown;
42 |
43 | /**
44 | * @default "gray"
45 | * The color of the status icon
46 | */
47 | statIconColor?: "warning" |
48 | "primary" |
49 | "danger" |
50 | "success" |
51 | "info" |
52 | "rose" |
53 | "gray"
54 |
55 | /**
56 | * Link for content
57 | */
58 | statLink?: Object;
59 |
60 | /**
61 | * The footer
62 | */
63 | footer?: React.ReactNode;
64 |
65 | /**
66 | * Demos:
67 | *
68 | * - https://bit.dev/totalsoft_oss/react-mui/stats-card
69 | *
70 | * Take a look over the code for further information:https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/StatsCard/StatsCard.js
71 | */
72 |
73 | }
74 |
75 | export type StatsCardProps = Props | CardProps | CardContentProps | CardHeaderProps | CardActionsProps
76 |
77 | export default function StatsCard(props: StatsCardProps): JSX.Element;
--------------------------------------------------------------------------------
/src/components/Charts/components/ChartLine.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ChartCard from "../../ChartCard";
3 | import PropTypes from "prop-types";
4 | import { Line } from "react-chartjs-2";
5 | import "chartjs-plugin-datalabels";
6 |
7 | export const ChartLine = ({
8 | labels,
9 | title,
10 | displayDataLabels,
11 | borderWidth,
12 | dataInfo,
13 | underChart,
14 | chartColor,
15 | text,
16 | StatIcon,
17 | statText,
18 | hover,
19 | options,
20 | ...other
21 | }) => {
22 | let data =
23 | dataInfo.datasets &&
24 | dataInfo.datasets.map(value => {
25 | return {
26 | ...value,
27 | borderColor: value.color,
28 | borderWidth: borderWidth,
29 | backgroundColor: value.color,
30 | ...other
31 | };
32 | });
33 |
34 | let opts = {
35 | ...options,
36 | plugins: {
37 | datalabels: {
38 | formatter: function (value) {
39 | return value;
40 | },
41 | align: "top",
42 | font: {
43 | size: 8
44 | },
45 | display: displayDataLabels
46 | }
47 | }
48 | };
49 |
50 | return (
51 |
15 |
22 | :
23 |
24 |
31 |
33 | = Math.ceil(count / rowsPerPage) - 1}
36 | aria-label="Next Page"
37 | size="small"
38 | color="defaultNoBackground"
39 | >
40 |
42 |
43 | );
44 | }
45 |
46 | TablePaginationActions.propTypes = {
47 | count: PropTypes.number.isRequired,
48 | onPageChange: PropTypes.func.isRequired,
49 | page: PropTypes.number.isRequired,
50 | rowsPerPage: PropTypes.number.isRequired
51 | };
52 |
53 | export default TablePaginationActions;
--------------------------------------------------------------------------------
/src/components/Accordion/accordionStyle.js:
--------------------------------------------------------------------------------
1 | import styles from '../../assets/jss/styles';
2 |
3 | const accordionStyle = theme => {
4 |
5 | const { themeColor } = styles(theme);
6 |
7 | return {
8 | root: {
9 | flexGrow: 1,
10 | marginBottom: "20px",
11 | '@media (max-width: 480px)': {
12 | width: "100%"
13 | },
14 |
15 | },
16 | expansionPanel: {
17 | boxShadow: "none",
18 | "&:before": {
19 | display: "none !important"
20 | }
21 | },
22 | expansionPanelExpanded: {
23 | margin: "0"
24 | },
25 | expansionPanelSummary: {
26 | minHeight: "auto !important",
27 | backgroundColor: "transparent",
28 | // borderBottom: "1px solid #ddd",
29 | padding: "2px 2px 2px 0px",
30 | borderTopLeftRadius: "3px",
31 | borderTopRightRadius: "3px",
32 | color: "#3C4858",
33 | "&:hover": {
34 | color: themeColor
35 | }
36 | },
37 | expansionPanelSummaryExpaned: {
38 | color: themeColor
39 | },
40 | expansionPanelSummaryContent: {
41 | margin: "0"
42 | },
43 | expansionPanelSummaryExpandIcon: {
44 | [theme.breakpoints.up("md")]: {
45 | top: "auto !important"
46 | },
47 | transform: "rotate(0deg)",
48 | color: "inherit",
49 | [theme.breakpoints.down("sm")]: {
50 | top: "10px !important"
51 | }
52 | },
53 | expansionPanelSummaryExpandIconExpanded: {
54 | [theme.breakpoints.up("md")]: {
55 | top: "auto !important"
56 | },
57 | transform: "rotate(180deg)",
58 | [theme.breakpoints.down("sm")]: {
59 | top: "10px !important"
60 | }
61 | },
62 | title: {
63 | fontSize: "15px",
64 | fontWeight: "bolder",
65 | marginTop: "0",
66 | marginBottom: "0",
67 | color: "inherit"
68 | },
69 | expansionPanelDetails: {
70 | padding: "15px 0px 5px"
71 | }
72 | }
73 | };
74 |
75 | export default accordionStyle;
--------------------------------------------------------------------------------
/__tests__/CardTitle/CardTitle.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import CardTitle from '../../components/CardTitle/CardTitle';
4 | import Button from '../../components/Button/Button';
5 | import { Box } from "@material-ui/core";
6 |
7 | describe('CardTitle', () => {
8 | it('classes container and cardTitle are present', () => {
9 | const onClickMock = jest.fn();
10 |
11 | const wrapper = renderer.create(
16 | {text.substring(0, minLength)}
{text.length > minLength ? 18 |
}
20 | />
21 | {text.length > minLength ? 18 |
{showMoreText}
: ""}
25 | {text}
27 |
}
29 | />
30 | 27 |
{showLessText}
7 |
62 | `;
63 |
--------------------------------------------------------------------------------
/src/components/BackToButton/BackToButton.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import PropTypes from "prop-types";
3 | import { useHistory } from 'react-router-dom';
4 | import { ArrowBack } from '@material-ui/icons';
5 | import CustomIconButton from '../IconButton';
6 |
7 | function BackToButton({ title, path, fontSize, ...rest }) {
8 | const history = useHistory();
9 |
10 | const onBackToList = useCallback(() => {
11 | history.push(path);
12 | }, [history, path])
13 |
14 | return (
15 |
10 |
28 |
13 |
23 |
24 |
27 |
31 |
42 | 34 | Title 35 |
36 |39 | Description 40 |
41 |
45 |
61 |
48 |
58 |
59 |
60 |
28 | {item.value}
29 |
30 | )
31 | };
32 | })}
33 | />);
34 |
35 | expect(wrapper.find(AccordionBase)).toHaveLength(3);
36 | });
37 |
38 | it('Second child is expanded', () => {
39 | const wrapper = mount(
46 | {item.value}
47 |
48 | )
49 | };
50 | })}
51 | />);
52 |
53 | expect(wrapper.prop('active')).toBe(1)
54 | expect(wrapper.find(AccordionBase).at(1).props().expanded).toBe(true)
55 | });
56 |
57 | it('Third child is expanded', () => {
58 | const wrapper = mount(
65 | {item.value}
66 |
67 | )
68 | };
69 | })}
70 | />);
71 |
72 | expect(wrapper.find(AccordionBase).at(2).props().expanded).toBe(true)
73 | });
74 | });
--------------------------------------------------------------------------------
/src/components/IconButton/iconButtonStyle.js:
--------------------------------------------------------------------------------
1 | import styles from '../../assets/jss/styles';
2 |
3 | const iconButtonStyle = theme => {
4 | const { whiteColor, grayColor, defaultFont, buttonColors } = styles(theme)
5 |
6 | return {
7 | button: {
8 | ...defaultFont,
9 | color: whiteColor,
10 | boxShadow: '0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12)',
11 | overflow: 'hidden',
12 | position: 'relative',
13 | border: 'none',
14 | textTransform: 'uppercase',
15 | willChange: 'box-shadow, transform',
16 | transition: 'box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
17 | display: 'inline-block',
18 | textAlign: 'center',
19 | whiteSpace: 'nowrap',
20 | verticalAlign: 'middle',
21 | touchAction: 'manipulation',
22 | cursor: 'pointer',
23 | userSelect: 'none',
24 | backgroundImage: 'none',
25 | backgroundColor: grayColor,
26 | '&:hover': {
27 | backgroundColor: grayColor,
28 | boxShadow:
29 | '0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2)'
30 | }
31 | },
32 | primary: buttonColors.primary,
33 | info: buttonColors.info,
34 | success: buttonColors.success,
35 | warning: buttonColors.warning,
36 | danger: buttonColors.danger,
37 | rose: buttonColors.rose,
38 | white: buttonColors.white,
39 | defaultNoBackground: buttonColors.defaultNoBackground,
40 | primaryNoBackground: buttonColors.primaryNoBackground,
41 | infoNoBackground: buttonColors.infoNoBackground,
42 | successNoBackground: buttonColors.successNoBackground,
43 | warningNoBackground: buttonColors.warningNoBackground,
44 | dangerNoBackground: buttonColors.dangerNoBackground,
45 | roseNoBackground: buttonColors.roseNoBackground,
46 | transparent: buttonColors.transparent,
47 | theme: buttonColors.theme,
48 | themeNoBackground: buttonColors.themeNoBackground,
49 | themeWithBackground: buttonColors.themeWithBackground,
50 | themeWithGradient: buttonColors.themeWithGradient,
51 | disabled: buttonColors.disabled,
52 | justIcon: { ...defaultFont }
53 | }
54 | }
55 |
56 | export default iconButtonStyle
--------------------------------------------------------------------------------
/__tests__/Button/Button.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import Button from '../../components/Button/Button';
4 | import { Button as ButtonBase } from "@material-ui/core";
5 |
6 | describe('Button', () => {
7 | it('button will be rounded', () => {
8 | const wrapper = renderer.create();
11 |
12 | const testInstance = wrapper.root;
13 |
14 | expect(testInstance.findByType(ButtonBase).props.className).toContain('round');
15 | });
16 |
17 |
18 | it('button will not be rounded', () => {
19 | const wrapper = renderer.create();
22 |
23 | const testInstance = wrapper.root;
24 |
25 | expect(testInstance.findByType(ButtonBase).props.className).not.toContain('round');
26 | });
27 |
28 | it('button will not be fullWidth', () => {
29 | const wrapper = renderer.create();
32 |
33 | const testInstance = wrapper.root;
34 |
35 | expect(testInstance.findByType(ButtonBase).props.className).not.toContain('fullWidth');
36 | });
37 |
38 | it('button will be fullWidth', () => {
39 | const wrapper = renderer.create();
42 |
43 | const testInstance = wrapper.root;
44 |
45 | expect(testInstance.findByType(ButtonBase).props.className).toContain('fullWidth');
46 | });
47 |
48 | it('button will be disabled', () => {
49 | const wrapper = renderer.create();
52 |
53 | const testInstance = wrapper.root;
54 |
55 | expect(testInstance.findByType(ButtonBase).props.className).toContain('disabled');
56 | });
57 |
58 |
59 | it('button will not be disabled', () => {
60 | const wrapper = renderer.create();
63 |
64 | const testInstance = wrapper.root;
65 |
66 | expect(testInstance.findByType(ButtonBase).props.className).not.toContain('disabled');
67 | });
68 | });
--------------------------------------------------------------------------------
/src/components/BackToButton/BackToButton.d.ts:
--------------------------------------------------------------------------------
1 | import { ButtonProps } from '@material-ui/core/Button';
2 |
3 | export interface BackToButtonProps extends Omit