├── .babelrc ├── src ├── components │ ├── charts │ │ ├── chart │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── ChartStyles.js │ │ │ ├── chart.docs.mdx │ │ │ ├── Chart.d.ts │ │ │ ├── Chart.js │ │ │ └── mocks.js │ │ └── stats-chart │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── StatsChart.docs.mdx │ │ │ ├── StatsChart.d.ts │ │ │ └── mocks.js │ ├── surfaces │ │ ├── card │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── card.docs.mdx │ │ │ ├── CardStyles.js │ │ │ └── Card.d.ts │ │ ├── accordion │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── AccordionStyles.js │ │ │ ├── Accordion.d.ts │ │ │ ├── Accordion.test.js │ │ │ ├── accordion.docs.mdx │ │ │ └── Accordion.js │ │ ├── stats-card │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── StatsCard.docs.mdx │ │ │ ├── StatsCard.d.ts │ │ │ ├── StatsCardStyles.js │ │ │ └── StatsCard.js │ │ ├── card-header │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── CardHeader.docs.mdx │ │ │ ├── CardHeader.d.ts │ │ │ ├── CardHeaderStyles.js │ │ │ ├── CardHeader.js │ │ │ └── CardHeader.test.js │ │ ├── card-actions │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── cardActions.docs.mdx │ │ │ ├── CardActionsStyles.js │ │ │ ├── CardActions.js │ │ │ ├── CardActions.d.ts │ │ │ └── CardActions.test.js │ │ ├── accordion-list │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── AccordionList.test.js │ │ │ ├── AccordionList.d.ts │ │ │ ├── AccordionList.js │ │ │ └── AccordionList.docs.mdx │ │ └── collapse-card │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── CollapseCardStyles.js │ │ │ ├── CollapseCard.d.ts │ │ │ └── CollapseCard.docs.mdx │ ├── buttons │ │ ├── button │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── button.docs.mdx │ │ │ └── Button.d.ts │ │ ├── icon-button │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── IconButton.docs.mdx │ │ │ ├── IconButtonStyles.js │ │ │ ├── IconButton.d.ts │ │ │ ├── RadioButtonSelect.js │ │ │ └── IconButton.test.js │ │ ├── upload-button │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── UploadButton.docs.mdx │ │ │ └── uploadButtonValidators.js │ │ └── back-to-button │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── BackToButton.docs.mdx │ │ │ ├── BackToButton.test.js │ │ │ ├── BackToButton.d.ts │ │ │ └── BackToButton.js │ ├── feedback │ │ ├── not-found │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── notFound.png │ │ │ ├── mocks.js │ │ │ ├── NotFound.docs.mdx │ │ │ ├── NotFoundStyles.js │ │ │ ├── NotFound.d.ts │ │ │ ├── NotFound.js │ │ │ └── NotFound.test.js │ │ ├── forbidden │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── forbidden.png │ │ │ ├── forbidden.docs.mdx │ │ │ ├── Forbidden.d.ts │ │ │ ├── Forbidden.js │ │ │ └── Forbidden.test.js │ │ ├── custom-dialog │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── mocks.js │ │ │ ├── components │ │ │ │ ├── DividersCustomDialog.js │ │ │ │ ├── BasicCustomDialog.js │ │ │ │ ├── TextCustomDialog.js │ │ │ │ └── TransparentCustomDialog.js │ │ │ ├── CustomDialog.docs.mdx │ │ │ ├── CustomDialog.d.ts │ │ │ ├── CustomDialog.test.js │ │ │ └── CustomDialog.js │ │ ├── dialog-display │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── mocks.js │ │ │ ├── components │ │ │ │ ├── DividersDialogDisplay.js │ │ │ │ ├── BasicDialogDisplay.js │ │ │ │ ├── TextDialogDisplay.js │ │ │ │ ├── TransparentDialogDisplay.js │ │ │ │ └── ActionsDialogDisplay.js │ │ │ ├── DialogDisplay.docs.mdx │ │ │ └── DialogDisplayStyles.js │ │ ├── toast │ │ │ ├── index.d.ts │ │ │ ├── img │ │ │ │ ├── DarkTheme.png │ │ │ │ ├── ColoredTheme.png │ │ │ │ └── LightTheme.png │ │ │ ├── index.js │ │ │ ├── toast.docs.mdx │ │ │ ├── ToastContainer.d.ts │ │ │ ├── usePromiseToast.js │ │ │ ├── useToast.js │ │ │ ├── ToastContainer.js │ │ │ └── ToastStyles.js │ │ ├── linear-progress │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── LinearProgress.test.js │ │ │ ├── LinearProgress.docs.mdx │ │ │ ├── LinearProgressStyles.js │ │ │ ├── LinearProgress.d.ts │ │ │ └── LinearProgress.js │ │ └── loading-fake-text │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── LoadingFakeText.docs.mdx │ │ │ ├── LoadingFakeText.d.ts │ │ │ ├── LoadingFakeText.js │ │ │ └── LoadingFakeText.test.js │ ├── inputs │ │ ├── date-time │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── DateTime.docs.mdx │ │ │ ├── DateTimeStyles.js │ │ │ ├── DateTimeEndAdornment.js │ │ │ └── DateTime.d.ts │ │ ├── text-field │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── TextField.docs.mdx │ │ │ └── TextFieldStyles.js │ │ ├── autocomplete │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── components │ │ │ │ ├── NumericAutocomplete.js │ │ │ │ ├── ColumnHeader.js │ │ │ │ ├── PrimitiveAutocomplete.js │ │ │ │ ├── BasicAutocomplete.js │ │ │ │ ├── AsyncMultipleAutocomplete.js │ │ │ │ ├── AsyncAutocomplete.js │ │ │ │ └── ControlledCheckBox.js │ │ │ ├── common │ │ │ │ ├── FormattedJson.js │ │ │ │ └── mocks.js │ │ │ ├── autocomplete.docs.mdx │ │ │ └── Option.js │ │ ├── dynamic-input │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── ColumnHeader.js │ │ │ ├── DynamicInput.docs.mdx │ │ │ └── DynamicInput.d.ts │ │ ├── simple-slider │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── SimpleSlider.docs.mdx │ │ │ ├── SimpleSliderStyles.js │ │ │ └── SimpleSlider.d.ts │ │ └── password-field │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── password-field.docs.mdx │ │ │ ├── PasswordField.d.ts │ │ │ └── PasswordField.test.js │ ├── data-display │ │ ├── fav-icon │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── FavIcon.docs.mdx │ │ │ ├── FavIcon.d.ts │ │ │ └── FavIcon.js │ │ ├── typography │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── TypographyStyles.js │ │ │ ├── typography.docs.mdx │ │ │ ├── Typography.d.ts │ │ │ └── Typography.test.js │ │ └── expanding-text │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── ExpandingTextStyles.js │ │ │ ├── ExpandingText.docs.mdx │ │ │ └── ExpandingText.d.ts │ ├── navigation │ │ ├── nav-pills │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── NavPills.docs.mdx │ │ │ ├── components │ │ │ │ ├── ControlledCheckbox.js │ │ │ │ └── RadioButtonSelect.js │ │ │ ├── mocks.js │ │ │ └── NavPillsStyles.js │ │ ├── side-menu │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── SideMenu.d.ts │ │ │ ├── SideMenu.test.js │ │ │ ├── SideMenu.docs.mdx │ │ │ ├── SideMenuStyles.js │ │ │ └── SideMenu.js │ │ └── pagination │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ ├── PaginationStyles.js │ │ │ ├── pagination.docs.mdx │ │ │ ├── Pagination.test.js │ │ │ └── Pagination.d.ts │ └── themes │ │ ├── prints │ │ ├── Blue.PNG │ │ ├── Red.PNG │ │ ├── Default.PNG │ │ ├── Green.PNG │ │ ├── Orange.PNG │ │ ├── Vivid.PNG │ │ └── LightBlue.PNG │ │ ├── common │ │ ├── overrides │ │ │ ├── index.js │ │ │ ├── Divider.js │ │ │ ├── Button.js │ │ │ └── Card.js │ │ ├── table.js │ │ └── typography.js │ │ ├── index.js │ │ ├── vividOrangeTheme.js │ │ ├── themes.composition.js │ │ ├── blueTheme.js │ │ ├── redTheme.js │ │ ├── orangeTheme.js │ │ ├── lightBlueTheme.js │ │ ├── defaultTheme.js │ │ └── greenTheme.js └── providers │ └── theme │ ├── index.js │ ├── theme.docs.mdx │ └── ThemeProvider.js ├── utils ├── img │ ├── core.png │ ├── rocket.png │ ├── generator.PNG │ └── installation.png └── test-wrapper │ ├── index.js │ ├── TestingWrapper.js │ ├── testsFunctions.js │ └── test-wrapper.docs.mdx ├── .vscode ├── settings.json └── launch.json ├── .prettierrc.js ├── .github ├── release-drafter.yml ├── workflows │ └── release-drafter.yml └── ISSUE_TEMPLATE │ ├── FEATURE_REQUEST.yml │ └── BUG_REPORT.yml ├── types ├── asset.d.ts └── style.d.ts ├── .eslintrc.js └── .gitignore /.babelrc: -------------------------------------------------------------------------------- 1 | { "presets": ["@babel/preset-env", "@babel/preset-react"] } 2 | -------------------------------------------------------------------------------- /src/components/charts/chart/index.js: -------------------------------------------------------------------------------- 1 | import Chart from './Chart' 2 | export default Chart 3 | -------------------------------------------------------------------------------- /src/components/surfaces/card/index.js: -------------------------------------------------------------------------------- 1 | import Card from './Card' 2 | export default Card 3 | -------------------------------------------------------------------------------- /src/providers/theme/index.js: -------------------------------------------------------------------------------- 1 | export { default as ThemeProvider } from './ThemeProvider' 2 | -------------------------------------------------------------------------------- /src/components/buttons/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './Button' 2 | export default Button 3 | -------------------------------------------------------------------------------- /utils/img/core.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/utils/img/core.png -------------------------------------------------------------------------------- /utils/img/rocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/utils/img/rocket.png -------------------------------------------------------------------------------- /src/components/surfaces/card/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Card'; 2 | export * from './Card'; -------------------------------------------------------------------------------- /src/components/buttons/button/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Button'; 2 | export * from './Button'; -------------------------------------------------------------------------------- /src/components/charts/chart/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Chart' 2 | export * from './Chart' 3 | -------------------------------------------------------------------------------- /src/components/feedback/not-found/index.js: -------------------------------------------------------------------------------- 1 | import NotFound from './NotFound' 2 | export default NotFound 3 | -------------------------------------------------------------------------------- /src/components/inputs/date-time/index.js: -------------------------------------------------------------------------------- 1 | import DateTime from './DateTime' 2 | export default DateTime 3 | -------------------------------------------------------------------------------- /utils/img/generator.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/utils/img/generator.PNG -------------------------------------------------------------------------------- /src/components/data-display/fav-icon/index.js: -------------------------------------------------------------------------------- 1 | import FavIcon from './FavIcon'; 2 | export default FavIcon; 3 | -------------------------------------------------------------------------------- /src/components/feedback/forbidden/index.js: -------------------------------------------------------------------------------- 1 | import Forbidden from './Forbidden' 2 | export default Forbidden 3 | -------------------------------------------------------------------------------- /src/components/inputs/date-time/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './DateTime'; 2 | export * from './DateTime'; -------------------------------------------------------------------------------- /src/components/inputs/text-field/index.js: -------------------------------------------------------------------------------- 1 | import TextField from './TextField' 2 | export default TextField 3 | -------------------------------------------------------------------------------- /src/components/navigation/nav-pills/index.js: -------------------------------------------------------------------------------- 1 | import NavPills from './NavPills' 2 | export default NavPills 3 | -------------------------------------------------------------------------------- /src/components/navigation/side-menu/index.js: -------------------------------------------------------------------------------- 1 | import SideMenu from './SideMenu' 2 | export default SideMenu 3 | -------------------------------------------------------------------------------- /src/components/surfaces/accordion/index.js: -------------------------------------------------------------------------------- 1 | import Accordion from './Accordion' 2 | export default Accordion 3 | -------------------------------------------------------------------------------- /src/components/surfaces/stats-card/index.js: -------------------------------------------------------------------------------- 1 | import StatsCard from './StatsCard' 2 | export default StatsCard 3 | -------------------------------------------------------------------------------- /utils/img/installation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/utils/img/installation.png -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": [ 3 | "teambit", 4 | "totalsoft" 5 | ] 6 | } -------------------------------------------------------------------------------- /src/components/buttons/icon-button/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './IconButton'; 2 | export * from './IconButton'; -------------------------------------------------------------------------------- /src/components/buttons/icon-button/index.js: -------------------------------------------------------------------------------- 1 | import IconButton from './IconButton' 2 | export default IconButton 3 | -------------------------------------------------------------------------------- /src/components/charts/stats-chart/index.js: -------------------------------------------------------------------------------- 1 | import StatsChart from './StatsChart' 2 | export default StatsChart 3 | -------------------------------------------------------------------------------- /src/components/data-display/fav-icon/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './FavIcon' 2 | export * from './FavIcon' 3 | -------------------------------------------------------------------------------- /src/components/feedback/forbidden/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Forbidden' 2 | export * from './Forbidden' 3 | -------------------------------------------------------------------------------- /src/components/feedback/not-found/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './NotFound' 2 | export * from './NotFound' 3 | -------------------------------------------------------------------------------- /src/components/inputs/text-field/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './TextField' 2 | export * from './TextField' 3 | -------------------------------------------------------------------------------- /src/components/navigation/nav-pills/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './NavPills' 2 | export * from './NavPills' 3 | -------------------------------------------------------------------------------- /src/components/navigation/pagination/index.js: -------------------------------------------------------------------------------- 1 | import Pagination from './Pagination' 2 | export default Pagination 3 | -------------------------------------------------------------------------------- /src/components/navigation/side-menu/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './SideMenu' 2 | export * from './SideMenu' 3 | -------------------------------------------------------------------------------- /src/components/surfaces/accordion/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Accordion' 2 | export * from './Accordion' 3 | -------------------------------------------------------------------------------- /src/components/surfaces/card-header/index.js: -------------------------------------------------------------------------------- 1 | import CardHeader from './CardHeader' 2 | export default CardHeader 3 | -------------------------------------------------------------------------------- /src/components/buttons/upload-button/index.js: -------------------------------------------------------------------------------- 1 | import UploadButton from './UploadButton' 2 | export default UploadButton 3 | -------------------------------------------------------------------------------- /src/components/charts/stats-chart/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './StatsChart' 2 | export * from './StatsChart' 3 | -------------------------------------------------------------------------------- /src/components/data-display/typography/index.js: -------------------------------------------------------------------------------- 1 | import Typography from './Typography'; 2 | export default Typography; 3 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/index.js: -------------------------------------------------------------------------------- 1 | import Autocomplete from './Autocomplete' 2 | export default Autocomplete 3 | -------------------------------------------------------------------------------- /src/components/inputs/dynamic-input/index.js: -------------------------------------------------------------------------------- 1 | import DynamicInput from './DynamicInput' 2 | export default DynamicInput 3 | -------------------------------------------------------------------------------- /src/components/inputs/simple-slider/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './SimpleSlider'; 2 | export * from './SimpleSlider'; -------------------------------------------------------------------------------- /src/components/inputs/simple-slider/index.js: -------------------------------------------------------------------------------- 1 | import SimpleSlider from './SimpleSlider' 2 | export default SimpleSlider 3 | -------------------------------------------------------------------------------- /src/components/navigation/pagination/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Pagination' 2 | export * from './Pagination' 3 | -------------------------------------------------------------------------------- /src/components/surfaces/card-actions/index.js: -------------------------------------------------------------------------------- 1 | import CardActions from './CardActions' 2 | export default CardActions 3 | -------------------------------------------------------------------------------- /src/components/surfaces/card-header/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './CardHeader' 2 | export * from './CardHeader' 3 | -------------------------------------------------------------------------------- /src/components/surfaces/stats-card/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './StatsCard' 2 | export * from './StatsCard' 3 | -------------------------------------------------------------------------------- /src/components/buttons/back-to-button/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './BackToButton'; 2 | export * from './BackToButton'; -------------------------------------------------------------------------------- /src/components/buttons/back-to-button/index.js: -------------------------------------------------------------------------------- 1 | import BackToButton from './BackToButton' 2 | export default BackToButton 3 | -------------------------------------------------------------------------------- /src/components/buttons/upload-button/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './UploadButton'; 2 | export * from './UploadButton'; -------------------------------------------------------------------------------- /src/components/data-display/typography/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Typography' 2 | export * from './Typography' 3 | -------------------------------------------------------------------------------- /src/components/feedback/custom-dialog/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './CustomDialog'; 2 | export * from './CustomDialog'; -------------------------------------------------------------------------------- /src/components/feedback/custom-dialog/index.js: -------------------------------------------------------------------------------- 1 | import CustomDialog from './CustomDialog' 2 | export default CustomDialog 3 | -------------------------------------------------------------------------------- /src/components/feedback/dialog-display/index.js: -------------------------------------------------------------------------------- 1 | import DialogDisplay from './DialogDisplay' 2 | export default DialogDisplay 3 | -------------------------------------------------------------------------------- /src/components/feedback/toast/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ToastContainer' 2 | export * from './ToastContainer' 3 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Autocomplete' 2 | export * from './Autocomplete' 3 | -------------------------------------------------------------------------------- /src/components/inputs/dynamic-input/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './DynamicInput' 2 | export * from './DynamicInput' 3 | -------------------------------------------------------------------------------- /src/components/inputs/password-field/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './PasswordField'; 2 | export * from './PasswordField'; -------------------------------------------------------------------------------- /src/components/inputs/password-field/index.js: -------------------------------------------------------------------------------- 1 | import PasswordField from './PasswordField' 2 | export default PasswordField 3 | -------------------------------------------------------------------------------- /src/components/surfaces/accordion-list/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './AccordionList'; 2 | export * from './AccordionList'; -------------------------------------------------------------------------------- /src/components/surfaces/accordion-list/index.js: -------------------------------------------------------------------------------- 1 | import AccordionList from './AccordionList' 2 | export default AccordionList 3 | -------------------------------------------------------------------------------- /src/components/surfaces/card-actions/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './CardActions' 2 | export * from './CardActions' 3 | -------------------------------------------------------------------------------- /src/components/surfaces/collapse-card/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './CollapseCard'; 2 | export * from './CollapseCard'; -------------------------------------------------------------------------------- /src/components/surfaces/collapse-card/index.js: -------------------------------------------------------------------------------- 1 | import CollapseCard from './CollapseCard' 2 | export default CollapseCard 3 | -------------------------------------------------------------------------------- /src/components/data-display/expanding-text/index.js: -------------------------------------------------------------------------------- 1 | import ExpandingText from './ExpandingText' 2 | export default ExpandingText 3 | -------------------------------------------------------------------------------- /src/components/feedback/dialog-display/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './DialogDisplay' 2 | export * from './DialogDisplay' 3 | -------------------------------------------------------------------------------- /src/components/feedback/linear-progress/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './LinearProgress'; 2 | export * from './LinearProgress'; -------------------------------------------------------------------------------- /src/components/feedback/linear-progress/index.js: -------------------------------------------------------------------------------- 1 | import LinearProgress from './LinearProgress' 2 | export default LinearProgress 3 | -------------------------------------------------------------------------------- /src/components/themes/prints/Blue.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/src/components/themes/prints/Blue.PNG -------------------------------------------------------------------------------- /src/components/themes/prints/Red.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/src/components/themes/prints/Red.PNG -------------------------------------------------------------------------------- /utils/test-wrapper/index.js: -------------------------------------------------------------------------------- 1 | import { render, userClick } from './testsFunctions' 2 | 3 | export default { render, userClick } 4 | -------------------------------------------------------------------------------- /src/components/data-display/expanding-text/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ExpandingText' 2 | export * from './ExpandingText' 3 | -------------------------------------------------------------------------------- /src/components/feedback/loading-fake-text/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default } from './LoadingFakeText' 2 | export * from './LoadingFakeText' 3 | -------------------------------------------------------------------------------- /src/components/feedback/loading-fake-text/index.js: -------------------------------------------------------------------------------- 1 | import LoadingFakeText from './LoadingFakeText' 2 | export default LoadingFakeText 3 | -------------------------------------------------------------------------------- /src/components/themes/prints/Default.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/src/components/themes/prints/Default.PNG -------------------------------------------------------------------------------- /src/components/themes/prints/Green.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/src/components/themes/prints/Green.PNG -------------------------------------------------------------------------------- /src/components/themes/prints/Orange.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/src/components/themes/prints/Orange.PNG -------------------------------------------------------------------------------- /src/components/themes/prints/Vivid.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/src/components/themes/prints/Vivid.PNG -------------------------------------------------------------------------------- /src/components/themes/prints/LightBlue.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/src/components/themes/prints/LightBlue.PNG -------------------------------------------------------------------------------- /src/components/feedback/forbidden/forbidden.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/src/components/feedback/forbidden/forbidden.png -------------------------------------------------------------------------------- /src/components/feedback/not-found/notFound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/src/components/feedback/not-found/notFound.png -------------------------------------------------------------------------------- /src/components/feedback/toast/img/DarkTheme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/src/components/feedback/toast/img/DarkTheme.png -------------------------------------------------------------------------------- /src/components/feedback/toast/img/ColoredTheme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/src/components/feedback/toast/img/ColoredTheme.png -------------------------------------------------------------------------------- /src/components/feedback/toast/img/LightTheme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osstotalsoft/rocket-ui/HEAD/src/components/feedback/toast/img/LightTheme.png -------------------------------------------------------------------------------- /src/providers/theme/theme.docs.mdx: -------------------------------------------------------------------------------- 1 | ### ThemProvider component 2 | 3 | This component uses Material UI ThemeProvider to inject theme in all components. 4 | -------------------------------------------------------------------------------- /src/components/feedback/not-found/mocks.js: -------------------------------------------------------------------------------- 1 | export const text = 'Not Found' 2 | export const details = 'The resource requested could not be found on this server!' 3 | -------------------------------------------------------------------------------- /src/components/feedback/toast/index.js: -------------------------------------------------------------------------------- 1 | export { default as ToastContainer } from './ToastContainer' 2 | export { default as useToast } from './useToast' 3 | export { default as usePromiseToast } from './usePromiseToast' 4 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 140, 3 | tabWidth: 2, 4 | singleQuote: true, 5 | semi: false, 6 | jsxSingleQuote: true, 7 | trailingComma: 'none', 8 | arrowParens: 'avoid', 9 | }; 10 | -------------------------------------------------------------------------------- /src/components/feedback/custom-dialog/mocks.js: -------------------------------------------------------------------------------- 1 | export const title = 'Dialog component' 2 | export const text = 'Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.' 3 | -------------------------------------------------------------------------------- /src/components/feedback/dialog-display/mocks.js: -------------------------------------------------------------------------------- 1 | export const title = 'Dialog component' 2 | export const text = 'Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.' 3 | -------------------------------------------------------------------------------- /src/components/themes/common/overrides/index.js: -------------------------------------------------------------------------------- 1 | import Card from './Card' 2 | import Button from './Button' 3 | import Divider from './Divider' 4 | 5 | const componentsOverride = theme => ({ ...Card(theme), ...Button(theme), ...Divider() }) 6 | export default componentsOverride 7 | -------------------------------------------------------------------------------- /src/components/feedback/dialog-display/components/DividersDialogDisplay.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ActionsDialogDisplay from './ActionsDialogDisplay' 3 | 4 | const DividersDialogDisplay = props => { 5 | return 6 | } 7 | 8 | export default DividersDialogDisplay 9 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/components/NumericAutocomplete.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Autocomplete from '../Autocomplete' 3 | 4 | const NumericAutocomplete = props => { 5 | return 6 | } 7 | 8 | export default NumericAutocomplete 9 | -------------------------------------------------------------------------------- /src/components/navigation/pagination/PaginationStyles.js: -------------------------------------------------------------------------------- 1 | import { styled } from '@mui/material/styles' 2 | 3 | export const PaginationContainer = styled('div')(() => ({ 4 | float: 'right' 5 | })) 6 | 7 | export const RefreshButtonContainer = styled('div')(() => ({ 8 | marginRight: '-15px', 9 | lineHeight: '50px', 10 | float: 'right' 11 | })) 12 | -------------------------------------------------------------------------------- /src/components/feedback/custom-dialog/components/DividersCustomDialog.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import BasicCustomDialog from './BasicCustomDialog' 3 | 4 | const DividersCustomDialog = props => { 5 | return 6 | } 7 | 8 | export default DividersCustomDialog 9 | -------------------------------------------------------------------------------- /src/components/feedback/custom-dialog/components/BasicCustomDialog.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CustomDialog from '../CustomDialog' 3 | import { text, title } from '../mocks' 4 | 5 | const BasicCustomDialog = props => { 6 | return 7 | } 8 | 9 | export default BasicCustomDialog 10 | -------------------------------------------------------------------------------- /src/components/feedback/dialog-display/components/BasicDialogDisplay.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import DialogDisplay from '../DialogDisplay' 3 | import { text, title } from '../mocks' 4 | 5 | const BasicDialogDisplay = props => { 6 | return 7 | } 8 | 9 | export default BasicDialogDisplay 10 | -------------------------------------------------------------------------------- /src/components/data-display/expanding-text/ExpandingTextStyles.js: -------------------------------------------------------------------------------- 1 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 2 | import { styled } from '@mui/material/styles' 3 | 4 | const ShowButton = styled(Typography)(({ theme }) => ({ 5 | color: theme.palette.link.main, 6 | cursor: 'pointer' 7 | })) 8 | 9 | export default ShowButton 10 | -------------------------------------------------------------------------------- /.github/release-drafter.yml: -------------------------------------------------------------------------------- 1 | name-template: v$NEXT_PATCH_VERSION 2 | tag-template: v$NEXT_PATCH_VERSION 3 | categories: 4 | - title: 🚀 Features 5 | label: feature 6 | - title: 🐛 Bug Fixes 7 | label: fix 8 | - title: 🛠️ Maintenance 9 | label: chore 10 | change-template: '- $TITLE @$AUTHOR (#$NUMBER)' 11 | template: | 12 | ## Changes 13 | $CHANGES -------------------------------------------------------------------------------- /src/components/feedback/dialog-display/components/TextDialogDisplay.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import DialogDisplay from '../DialogDisplay' 3 | import { title, longText } from '../mocks' 4 | 5 | const TextDialogDisplay = props => { 6 | return 7 | } 8 | 9 | export default TextDialogDisplay 10 | -------------------------------------------------------------------------------- /utils/test-wrapper/TestingWrapper.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { ThemeProvider } from '@totalsoft_oss/rocket-ui.providers.theme' 4 | 5 | const TestingWrapper = ({ children }) => { 6 | return {children} 7 | } 8 | 9 | TestingWrapper.propTypes = { 10 | children: PropTypes.node 11 | } 12 | 13 | export default TestingWrapper 14 | -------------------------------------------------------------------------------- /src/components/feedback/custom-dialog/components/TextCustomDialog.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CustomDialog from '../CustomDialog' 3 | import { title, longText } from '../mocks' 4 | 5 | const TextCustomDialog = props => { 6 | return 7 | } 8 | 9 | export default TextCustomDialog 10 | -------------------------------------------------------------------------------- /src/components/feedback/custom-dialog/components/TransparentCustomDialog.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CustomDialog from '../CustomDialog' 3 | import { title, text } from '../mocks' 4 | 5 | const TransparentCustomDialog = props => { 6 | return 7 | } 8 | 9 | export default TransparentCustomDialog 10 | -------------------------------------------------------------------------------- /src/components/surfaces/collapse-card/CollapseCardStyles.js: -------------------------------------------------------------------------------- 1 | import MuiCardContent from '@mui/material/CardContent' 2 | import { styled } from '@mui/material/styles' 3 | import { includes } from 'ramda' 4 | 5 | export const CardContent = styled(MuiCardContent, { shouldForwardProp: prop => !includes(prop, ['variant']) })(({ variant }) => ({ 6 | ...(variant === 'standard' && { 7 | paddingTop: '8px' 8 | }) 9 | })) 10 | -------------------------------------------------------------------------------- /src/components/themes/index.js: -------------------------------------------------------------------------------- 1 | export { default as blueTheme } from './blueTheme'; 2 | export { default as defaultTheme } from './defaultTheme'; 3 | export { default as greenTheme } from './greenTheme'; 4 | export { default as lightBlueTheme } from './lightBlueTheme'; 5 | export { default as orangeTheme } from './orangeTheme'; 6 | export { default as redTheme } from './redTheme'; 7 | export { default as vividOrangeTheme } from './vividOrangeTheme'; 8 | -------------------------------------------------------------------------------- /src/components/data-display/typography/TypographyStyles.js: -------------------------------------------------------------------------------- 1 | import BaseTypography from '@mui/material/Typography' 2 | import { styled } from '@mui/material/styles' 3 | import { includes } from 'ramda' 4 | 5 | const Typography = styled(BaseTypography)(({ theme, variant }) => ({ 6 | fontFamily: theme.typography.fontFamily, 7 | textTransform: includes(variant, ['overline', 'button']) ? 'uppercase' : 'none' 8 | })) 9 | 10 | export default Typography 11 | -------------------------------------------------------------------------------- /src/components/inputs/dynamic-input/ColumnHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 4 | 5 | const ColumnHeader = ({ children }) => ( 6 | 7 | {children} 8 | 9 | ) 10 | ColumnHeader.propTypes = { 11 | children: PropTypes.node 12 | } 13 | 14 | export default ColumnHeader 15 | -------------------------------------------------------------------------------- /.github/workflows/release-drafter.yml: -------------------------------------------------------------------------------- 1 | name: Release Drafter 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | workflow_dispatch: 8 | inputs: 9 | 10 | jobs: 11 | update_release_draft: 12 | runs-on: ubuntu-latest 13 | steps: 14 | # Drafts your next Release notes as Pull Requests are merged into "master" 15 | - uses: release-drafter/release-drafter@v5 16 | env: 17 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 18 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/components/ColumnHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 4 | 5 | const ColumnHeader = ({ children }) => ( 6 | 7 | {children} 8 | 9 | ) 10 | ColumnHeader.propTypes = { 11 | children: PropTypes.node 12 | } 13 | 14 | export default ColumnHeader 15 | -------------------------------------------------------------------------------- /src/components/feedback/toast/toast.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Toast component.' 3 | labels: ['mui', 'react', 'toast'] 4 | --- 5 | 6 | import Toast from './ToastContainer' 7 | 8 | ## Basic Toast component 9 | 10 | Basic example that renders a toast component 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Use this live example to interact with Toast component 19 | 20 | Live example: 21 | 22 | ```js live 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /utils/test-wrapper/testsFunctions.js: -------------------------------------------------------------------------------- 1 | import { render as baseRender, fireEvent } from '@testing-library/react' 2 | import TestingWrapper from './TestingWrapper' 3 | 4 | export const render = (ui, options) => baseRender(ui, { wrapper: TestingWrapper, ...options }) 5 | 6 | // more comprehensive simulation of a user click (mousedown + click) 7 | export const userClick = element => { 8 | fireEvent.mouseDown(element) 9 | fireEvent.mouseUp(element) 10 | element.click() 11 | } 12 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/common/FormattedJson.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | 4 | const FormattedJson = ({ children }) => ( 5 | 
{JSON.stringify(children, null, 3)}
6 | ) 7 | 8 | FormattedJson.propTypes = { 9 | children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.number, PropTypes.string]) 10 | } 11 | 12 | export default FormattedJson 13 | -------------------------------------------------------------------------------- /src/components/feedback/not-found/NotFound.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'NotFound component.' 3 | labels: ['mui', 'react', 'not-found'] 4 | --- 5 | 6 | import NotFound from './NotFound' 7 | 8 | ## Basic NotFound component 9 | 10 | Basic example that renders a not-found component 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Use this live example to interact with NotFound component 19 | 20 | Live example: 21 | 22 | ```js live 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/feedback/linear-progress/LinearProgress.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { screen } from '@testing-library/react' 3 | import LinearProgress from './LinearProgress' 4 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 5 | 6 | const { render } = fns 7 | 8 | describe('LinearProgress', () => { 9 | it('renders the label', () => { 10 | render() 11 | expect(screen.getByText('80%')).toBeInTheDocument() 12 | }) 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/feedback/not-found/NotFoundStyles.js: -------------------------------------------------------------------------------- 1 | import Typography from '@mui/material/Typography' 2 | import { styled } from '@mui/material/styles' 3 | 4 | export const NotFoundText = styled(Typography)(({ theme }) => ({ 5 | textAlign: 'center', 6 | fontWeight: 'bold', 7 | fontFamily: theme.typography.defaultFont.fontFamily 8 | })) 9 | 10 | export const NotFoundImage = styled('div')(() => ({ 11 | marginBottom: '30px', 12 | marginTop: '50px', 13 | textAlign: 'center' 14 | })) 15 | 16 | export default NotFoundText 17 | -------------------------------------------------------------------------------- /src/components/feedback/dialog-display/components/TransparentDialogDisplay.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import DialogDisplay from '../DialogDisplay' 3 | import { title, text } from '../mocks' 4 | 5 | const TransparentDialogDisplay = props => { 6 | return ( 7 | 15 | ) 16 | } 17 | 18 | export default TransparentDialogDisplay 19 | -------------------------------------------------------------------------------- /src/components/feedback/forbidden/forbidden.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Forbidden component.' 3 | labels: ['mui', 'react', 'forbidden'] 4 | --- 5 | 6 | import Forbidden from './Forbidden' 7 | 8 | ## Basic Forbidden component 9 | 10 | Basic example that renders a forbidden 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Use this live example to interact with Forbidden component 19 | 20 | Live example: 21 | 22 | ```js live 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/surfaces/card-header/CardHeader.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'A CardHeader component.' 3 | labels: ['label1', 'label2', 'label3'] 4 | --- 5 | 6 | import CardHeader from './CardHeader' 7 | 8 | ## React Component for rendering text 9 | 10 | A basic div that renders some text 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Using props to customize the text 19 | 20 | Modify the text to see it change live: 21 | 22 | ```js live 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /utils/test-wrapper/test-wrapper.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'A TestWrapper component.' 3 | labels: ['label1', 'label2', 'label3'] 4 | --- 5 | 6 | import { TestWrapper } from './TestingWrapper' 7 | 8 | ## React Component for rendering text 9 | 10 | A basic div that renders some text 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Using props to customize the text 19 | 20 | Modify the text to see it change live: 21 | 22 | ```js live 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/data-display/fav-icon/FavIcon.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'FavIcon component' 3 | labels: ['mui', 'react', 'fav-icon'] 4 | --- 5 | 6 | import FavIcon from './FavIcon' 7 | 8 | ## Basic FavIcon component 9 | 10 | Basic example that renders a fav-icon 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Use this live example to interact with FavIcon component 19 | 20 | Live example: 21 | 22 | ```js 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/navigation/nav-pills/NavPills.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'NavPills component.' 3 | labels: ['mui', 'react', 'nav-pills'] 4 | --- 5 | 6 | import NavPills from './NavPills' 7 | import { tabs } from './mocks' 8 | 9 | ## Basic NavPills component 10 | 11 | Basic example that renders a nav-pills 12 | 13 | ### Component usage 14 | 15 | ```js 16 | 17 | ``` 18 | 19 | ### Use this live example to interact with NavPills component 20 | 21 | Live example: 22 | 23 | ```js live 24 | 25 | ``` 26 | -------------------------------------------------------------------------------- /src/components/surfaces/card-actions/cardActions.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'A CardActions component.' 3 | labels: ['label1', 'label2', 'label3'] 4 | --- 5 | 6 | import CardActions from './CardActions' 7 | 8 | ## React Component for rendering text 9 | 10 | A basic div that renders some text 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Using props to customize the text 19 | 20 | Modify the text to see it change live: 21 | 22 | ```js live 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/feedback/linear-progress/LinearProgress.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'LinearProgress component.' 3 | labels: ['mui', 'react', 'linear-progress'] 4 | --- 5 | 6 | import LinearProgress from './LinearProgress' 7 | 8 | ## Basic LinearProgress component 9 | 10 | Basic example that renders a linear-progress 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Use this live example to interact with LinearProgress component 19 | 20 | Live example: 21 | 22 | ```js live 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/themes/common/table.js: -------------------------------------------------------------------------------- 1 | const table = { 2 | main: { 3 | marginTop: '15px', 4 | marginBottom: '15px', 5 | borderSpacing: 0 6 | }, 7 | tableHeader: { 8 | textAlign: 'left', 9 | backgroundColor: '#00497b', 10 | padding: '10px', 11 | borderBottom: '1px solid #ddd', 12 | color: 'white' 13 | }, 14 | tableContent: { 15 | textAlign: 'left', 16 | padding: '10px ', 17 | borderBottom: '1px solid #eee' 18 | }, 19 | itemSelected: { 20 | background: '#c1c1c1', 21 | color: 'white' 22 | } 23 | } 24 | 25 | export default table 26 | -------------------------------------------------------------------------------- /src/components/surfaces/card-actions/CardActionsStyles.js: -------------------------------------------------------------------------------- 1 | import MuiCardActions from '@mui/material/CardActions' 2 | import { styled } from '@mui/material/styles' 3 | import { includes } from 'ramda' 4 | 5 | const CardActions = styled(MuiCardActions, { 6 | shouldForwardProp: prop => !includes(prop, ['variant', 'align']) 7 | })(({ theme, variant, align }) => ({ 8 | ...(variant === 'filled' && { backgroundColor: theme.palette.grey[200], minHeight: '48px', padding: theme.spacing(2, 3) }), 9 | justifyContent: align === 'left' ? 'flex-start' : 'flex-end' 10 | })) 11 | 12 | export default CardActions 13 | -------------------------------------------------------------------------------- /src/components/buttons/button/button.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Button component' 3 | labels: ['mui', 'react', 'button'] 4 | --- 5 | 6 | import Button from './Button' 7 | 8 | ## Basic button component 9 | 10 | Basic example that renders a button 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 18 | ``` 19 | 20 | ### Use this live example to interact with button component 21 | 22 | Live example: 23 | 24 | ```js live 25 | 28 | ``` 29 | -------------------------------------------------------------------------------- /src/providers/theme/ThemeProvider.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { defaultTheme } from '@totalsoft_oss/rocket-ui.themes' 4 | import { StyledEngineProvider, ThemeProvider as MUIThemeProvider } from '@mui/material/styles' 5 | 6 | const ThemeProvider = ({ children }) => { 7 | return ( 8 | 9 | {children} 10 | 11 | ) 12 | } 13 | 14 | ThemeProvider.propTypes = { 15 | children: PropTypes.node 16 | } 17 | 18 | export default ThemeProvider 19 | -------------------------------------------------------------------------------- /src/components/inputs/text-field/TextField.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'TextField component.' 3 | labels: ['mui', 'react', 'text-field'] 4 | --- 5 | 6 | import TextField from './TextField' 7 | 8 | ## Basic TextField component 9 | 10 | Basic example that renders a text-field 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Use this live example to interact with TextField component 19 | 20 | Live example: 21 | 22 | ```js live 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/inputs/date-time/DateTime.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'DateTime component.' 3 | labels: ['mui', 'react', 'date-time'] 4 | --- 5 | 6 | import DateTime from './DateTime' 7 | 8 | ## Basic DateTime component 9 | 10 | Basic example that renders a date-time 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Use this live example to interact with DateTime component 19 | 20 | Live example: 21 | 22 | ```js live 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/inputs/password-field/password-field.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'PasswordField component.' 3 | labels: ['mui', 'react', 'password-field'] 4 | --- 5 | 6 | import PasswordField from './PasswordField' 7 | 8 | ## Basic PasswordField component 9 | 10 | Basic example that renders a password-field 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Use this live example to interact with PasswordField component 19 | 20 | Live example: 21 | 22 | ```js live 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/surfaces/accordion/AccordionStyles.js: -------------------------------------------------------------------------------- 1 | import MuiAccordionDetails from '@mui/material/AccordionDetails' 2 | import MuiAccordionSummary from '@mui/material/AccordionSummary' 3 | import { styled } from '@mui/material/styles' 4 | import { includes } from 'ramda' 5 | 6 | export const AccordionDetails = styled(MuiAccordionDetails)(() => ({ 7 | padding: '8px' 8 | })) 9 | 10 | export const AccordionSummary = styled(MuiAccordionSummary, { 11 | shouldForwardProp: prop => !includes(prop, 'variant') 12 | })(({ theme, variant }) => ({ 13 | ...(variant === 'filled' && { backgroundColor: theme.palette.grey[200] }) 14 | })) 15 | -------------------------------------------------------------------------------- /src/components/feedback/loading-fake-text/LoadingFakeText.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'LoadingFakeText component.' 3 | labels: ['mui', 'react', 'loading-fake-text'] 4 | --- 5 | 6 | import LoadingFakeText from './LoadingFakeText' 7 | 8 | ## Basic LoadingFakeText component 9 | 10 | Basic example that renders a loading-fake-text 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Use this live example to interact with LoadingFakeText component 19 | 20 | Live example: 21 | 22 | ```js live 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/inputs/dynamic-input/DynamicInput.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'DynamicInput component.' 3 | labels: ['mui', 'react', 'dynamic-input'] 4 | --- 5 | 6 | import DynamicInput from './DynamicInput' 7 | 8 | ## Basic DynamicInput component 9 | 10 | Basic example that renders a dynamic-input 11 | 12 | ### Component usage 13 | 14 | ```js 15 | {}} /> 16 | ``` 17 | 18 | ### Use this live example to interact with DynamicInput component 19 | 20 | Live example: 21 | 22 | ```js live 23 | {}} /> 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/feedback/custom-dialog/CustomDialog.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'CustomDialog component.' 3 | labels: ['mui', 'react', 'custom-dialog'] 4 | --- 5 | 6 | import CustomDialog from './CustomDialog' 7 | import { title, text } from './mocks' 8 | 9 | ## Basic DialogDisplay component 10 | 11 | Basic example that renders a custom-dialog 12 | 13 | ### Component usage 14 | 15 | ```js 16 | 17 | ``` 18 | 19 | ### Use this live example to interact with CustomDialog component 20 | 21 | Live example: 22 | 23 | ```js live 24 | 25 | ``` 26 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/autocomplete.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Autocomplete component.' 3 | labels: ['mui', 'react', 'autocomplete'] 4 | --- 5 | 6 | import Autocomplete from './Autocomplete' 7 | 8 | ## Basic Autocomplete component 9 | 10 | Basic example that renders an autocomplete 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Use this live example to interact with Autocomplete component 19 | 20 | Live example: 21 | 22 | ```js live 23 | {}} /> 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/data-display/fav-icon/FavIcon.d.ts: -------------------------------------------------------------------------------- 1 | export interface FavIconProps { 2 | /** 3 | * Path to the image 4 | */ 5 | favIconSource?: string 6 | /** 7 | * Path to the fallback image. this will be use when the onerror event occur 8 | */ 9 | defaultFavIcon?: string 10 | } 11 | 12 | /** 13 | * 14 | * Demos: 15 | * 16 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/data-display/fav-icon 17 | * 18 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/data-display/fav-icon 19 | * 20 | */ 21 | 22 | export default function FavIcon(props: FavIconProps): JSX.Element 23 | -------------------------------------------------------------------------------- /src/components/surfaces/card-actions/CardActions.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import MuiCardActions from './CardActionsStyles' 4 | 5 | const CardActions = ({ variant = 'standard', align = 'left', ...rest }) => { 6 | return 7 | } 8 | 9 | CardActions.propTypes = { 10 | /** 11 | * @default 'standard' 12 | * Variant to use. 13 | */ 14 | variant: PropTypes.oneOf(['standard', 'filled']), 15 | /** 16 | * Align actions to left or right. 17 | * @default 'left' 18 | */ 19 | align: PropTypes.oneOf(['left', 'right']) 20 | } 21 | 22 | export default CardActions 23 | -------------------------------------------------------------------------------- /types/asset.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.png' { 2 | const value: any; 3 | export = value; 4 | } 5 | declare module '*.svg' { 6 | import type { FunctionComponent, SVGProps } from 'react'; 7 | 8 | export const ReactComponent: FunctionComponent & { title?: string }>; 9 | const src: string; 10 | export default src; 11 | } 12 | declare module '*.jpg' { 13 | const value: any; 14 | export = value; 15 | } 16 | declare module '*.jpeg' { 17 | const value: any; 18 | export = value; 19 | } 20 | declare module '*.gif' { 21 | const value: any; 22 | export = value; 23 | } 24 | declare module '*.bmp' { 25 | const value: any; 26 | export = value; 27 | } 28 | -------------------------------------------------------------------------------- /src/components/feedback/dialog-display/DialogDisplay.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'DialogDisplay component.' 3 | labels: ['mui', 'react', 'dialog-display'] 4 | --- 5 | 6 | import DialogDisplay from './DialogDisplay' 7 | import { text, title } from './mocks' 8 | 9 | ## Basic DialogDisplay component 10 | 11 | Basic example that renders a dialog-display 12 | 13 | ### Component usage 14 | 15 | ```js 16 | 17 | ``` 18 | 19 | ### Use this live example to interact with DialogDisplay component 20 | 21 | Live example: 22 | 23 | ```js live 24 | 25 | ``` 26 | -------------------------------------------------------------------------------- /src/components/themes/common/overrides/Divider.js: -------------------------------------------------------------------------------- 1 | export default function Divider() { 2 | return { 3 | MuiDivider: { 4 | styleOverrides: { 5 | root: { 6 | borderTop: '0px solid rgba(0, 0, 0, 0.12)', 7 | borderRight: '0px solid rgba(0, 0, 0, 0.12)', 8 | borderLeft: '0px solid rgba(0, 0, 0, 0.12)', 9 | borderBottom: 'none', 10 | margin: '1px 0px', 11 | height: '1px', 12 | backgroundColor: 'transparent', 13 | backgroundImage: 'linear-gradient(to right, rgba(52, 71, 103, 0), rgba(52, 71, 103, 0.4), rgba(52, 71, 103, 0))', 14 | opacity: '0.45' 15 | } 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/components/buttons/upload-button/UploadButton.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'UploadButton component.' 3 | labels: ['mui', 'react', 'upload-button'] 4 | --- 5 | 6 | import UploadButton from './UploadButton' 7 | import BrowserUpdatedIcon from '@mui/icons-material/BrowserUpdated' 8 | 9 | ## Basic UploadButton component 10 | 11 | Basic example that renders an upload-button 12 | 13 | ### Component usage 14 | 15 | ```js 16 | 17 | ``` 18 | 19 | ### Use this live example to interact with UploadButton component 20 | 21 | Live example: 22 | 23 | ```js live 24 | 25 | ``` 26 | -------------------------------------------------------------------------------- /src/components/feedback/forbidden/Forbidden.d.ts: -------------------------------------------------------------------------------- 1 | export interface ForbiddenProps { 2 | /** 3 | * @default "Not allowed to see this page!" 4 | * Text to be displayed 5 | */ 6 | forbiddenText?: string 7 | /** 8 | * @default "Go to main page" 9 | * Text to be displayed on button 10 | */ 11 | forbiddenButtonText?: string 12 | } 13 | 14 | /** 15 | * Demos: 16 | * 17 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/feedback/forbidden 18 | * 19 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/feedback/forbidden 20 | */ 21 | 22 | export default function Forbidden(props: ForbiddenProps): JSX.Element 23 | -------------------------------------------------------------------------------- /src/components/inputs/simple-slider/SimpleSlider.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'SimpleSlider component.' 3 | labels: ['mui', 'react', 'simple-slider'] 4 | --- 5 | 6 | import SimpleSlider from './SimpleSlider' 7 | 8 | ## Basic SimpleSlider component 9 | 10 | Basic example that renders a simple-slider 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Use this live example to interact with SimpleSlider component 19 | 20 | Live example: 21 | 22 | ```js live 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/inputs/date-time/DateTimeStyles.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CalendarTodayIcon from '@mui/icons-material/CalendarToday' 3 | import ClearIcon from '@mui/icons-material/Clear' 4 | import MuiIconButton from '@mui/material/IconButton' 5 | import { styled } from '@mui/material/styles' 6 | 7 | export const CalendarTodaySmallIcon = props => { 8 | return 9 | } 10 | 11 | export const ClearSmallIcon = props => { 12 | return 13 | } 14 | 15 | export const IconButton = styled(MuiIconButton)(({ theme }) => ({ 16 | ...theme.typography.defaultFont, 17 | padding: '0px', 18 | color: theme.palette.black.main 19 | })) 20 | -------------------------------------------------------------------------------- /src/components/buttons/back-to-button/BackToButton.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'BackToButton component.' 3 | labels: ['mui', 'react', 'back-to-button'] 4 | --- 5 | 6 | import BackToButton from './BackToButton' 7 | import { BrowserRouter } from 'react-router-dom' 8 | 9 | ## Basic BackToButton component 10 | 11 | Basic example that renders an back-to-button 12 | 13 | ### Component usage 14 | 15 | ```js 16 | 17 | ``` 18 | 19 | ### Use this live example to interact with BackToButton component 20 | 21 | Live example: 22 | 23 | ```js live 24 | 25 | 26 | 27 | ``` 28 | -------------------------------------------------------------------------------- /src/components/buttons/icon-button/IconButton.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'IconButton component.' 3 | labels: ['mui', 'react', 'icon-button'] 4 | --- 5 | 6 | import IconButton from './IconButton' 7 | import RocketIcon from '@mui/icons-material/Rocket' 8 | 9 | ## Basic IconButton component 10 | 11 | Basic example that renders an icon-button 12 | 13 | ### Component usage 14 | 15 | ```js 16 | 17 | 18 | 19 | ``` 20 | 21 | ### Use this live example to interact with IconButton component 22 | 23 | Live example: 24 | 25 | ```js live 26 | 27 | 28 | 29 | ``` 30 | -------------------------------------------------------------------------------- /src/components/charts/chart/ChartStyles.js: -------------------------------------------------------------------------------- 1 | import MuiCardContent from '@mui/material/CardContent' 2 | import { styled } from '@mui/material/styles' 3 | import CardHeader from '@totalsoft_oss/rocket-ui.components.surfaces.card-header' 4 | import { includes } from 'ramda' 5 | 6 | export const iconStyle = { 7 | color: '#FFFFFF', 8 | width: '30px', 9 | height: '30px', 10 | margin: 'auto', 11 | padding: '2px' 12 | } 13 | 14 | export const StyledCardHeader = styled(CardHeader)(() => ({ 15 | padding: '6px 24px 0px 24px' 16 | })) 17 | 18 | export const CardContent = styled(MuiCardContent, { shouldForwardProp: prop => !includes(prop, ['variant']) })(({ variant }) => ({ 19 | ...(variant === 'standard' && { 20 | paddingTop: '8px' 21 | }) 22 | })) 23 | -------------------------------------------------------------------------------- /src/components/feedback/not-found/NotFound.d.ts: -------------------------------------------------------------------------------- 1 | export interface NotFoundProps { 2 | /** 3 | * @default "Not Found" 4 | * The text to be displayed when this component is rendered 5 | */ 6 | text?: string 7 | /** 8 | * @default "The resource requested could not be found on this server!" 9 | * The details to be displayed when this component is rendered 10 | */ 11 | details?: string 12 | } 13 | 14 | /** 15 | * 16 | * Demos: 17 | * 18 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/feedback/not-found 19 | * 20 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/feedback/not-found 21 | * 22 | */ 23 | export default function NotFound(props: NotFoundProps): JSX.Element 24 | -------------------------------------------------------------------------------- /src/components/buttons/icon-button/IconButtonStyles.js: -------------------------------------------------------------------------------- 1 | import { styled } from '@mui/material/styles' 2 | import Button from '@totalsoft_oss/rocket-ui.components.buttons.button' 3 | 4 | const IconButton = styled(Button)(() => ({ 5 | alignItems: 'center', 6 | justifyContent: 'center', 7 | position: 'relative', 8 | display: 'inline-flex', 9 | borderRadius: '50%', 10 | minWidth: '0px', 11 | '&.MuiButton-sizeSmall': { 12 | padding: '0px', 13 | width: '40px', 14 | height: '40px' 15 | }, 16 | '&.MuiButton-sizeMedium': { 17 | padding: '11px', 18 | width: '48px', 19 | height: '48px' 20 | }, 21 | '&.MuiButton-sizeLarge': { 22 | padding: '15px', 23 | width: '52px', 24 | height: '52px' 25 | } 26 | })) 27 | 28 | export default IconButton 29 | -------------------------------------------------------------------------------- /src/components/feedback/linear-progress/LinearProgressStyles.js: -------------------------------------------------------------------------------- 1 | import MuiLinearProgress from '@mui/material/LinearProgress' 2 | import { styled } from '@mui/material/styles' 3 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 4 | import { includes } from 'ramda' 5 | 6 | export const LinearProgress = styled(MuiLinearProgress, { shouldForwardProp: prop => !includes(prop, ['showLabel', 'labelProps']) })( 7 | () => ({ 8 | '&.MuiLinearProgress-bar': { 9 | height: '4px' 10 | }, 11 | '&.MuiLinearProgress-root': { 12 | height: '4px', 13 | marginBottom: '20px', 14 | overflow: 'hidden' 15 | } 16 | }) 17 | ) 18 | 19 | export const Label = styled(Typography)(() => ({ 20 | marginTop: '-21px' 21 | })) 22 | 23 | export default LinearProgress 24 | -------------------------------------------------------------------------------- /src/components/surfaces/card-header/CardHeader.d.ts: -------------------------------------------------------------------------------- 1 | import { CardHeaderProps as MuiCardHeaderProps } from '@mui/material' 2 | 3 | export interface CardHeaderProps extends MuiCardHeaderProps { 4 | /** 5 | * @default 'standard' 6 | * Variant to use. 7 | */ 8 | variant?: 'standard' | 'filled' 9 | } 10 | 11 | /** 12 | * 13 | * Demos: 14 | * 15 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/surfaces/card-header 16 | * 17 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/surfaces/card-header 18 | * 19 | * Material-UI components used: 20 | * 21 | * - CardHeader: https://mui.com/material-ui/api/card-header/ 22 | * 23 | */ 24 | 25 | export default function CardHeader(props: CardHeaderProps): JSX.Element 26 | -------------------------------------------------------------------------------- /src/components/data-display/typography/typography.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Typography component.' 3 | labels: ['mui', 'react', 'typography'] 4 | --- 5 | 6 | import Typography from './Typography' 7 | 8 | ## Basic Typography component 9 | 10 | Basic example that renders an typography 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | Primary and bold - hover me to see a tooltip 17 | 18 | ``` 19 | 20 | ### Use this live example to interact with Typography component 21 | 22 | Live example: 23 | 24 | ```js live 25 | 26 | Primary and bold - hover me to see a tooltip 27 | 28 | ``` 29 | -------------------------------------------------------------------------------- /src/components/surfaces/accordion-list/AccordionList.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import AccordionList from './AccordionList' 3 | import { screen } from '@testing-library/react' 4 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 5 | 6 | const { render } = fns 7 | 8 | const mockedContent = [{ title: 'Title', details: 'Details of the content' }] 9 | 10 | describe('Accordion', () => { 11 | it('renders title content', () => { 12 | render() 13 | expect(screen.getByText(mockedContent[0].title)).toBeInTheDocument() 14 | }) 15 | 16 | it('renders details content', () => { 17 | render() 18 | expect(screen.getByText(mockedContent[0].details)).toBeInTheDocument() 19 | }) 20 | }) 21 | -------------------------------------------------------------------------------- /src/components/themes/vividOrangeTheme.js: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@mui/material/styles' 2 | import componentsOverride from './common/overrides' 3 | import { generateCustomShadows, generateShadows } from './common/shadows' 4 | import { palette } from './orangeTheme' 5 | import { generateTypography } from './common/typography' 6 | import table from './common/table' 7 | 8 | export const vividOrangeTheme = createTheme({ 9 | palette: { 10 | ...palette, 11 | BACKGROUND: { 12 | main: '#eee' 13 | } 14 | }, 15 | shape: { borderRadius: 8 }, 16 | typography: generateTypography(palette), 17 | table, 18 | shadows: generateShadows(palette), 19 | customShadows: generateCustomShadows(palette) 20 | }) 21 | 22 | vividOrangeTheme.components = componentsOverride(vividOrangeTheme) 23 | 24 | export default vividOrangeTheme 25 | -------------------------------------------------------------------------------- /src/components/feedback/dialog-display/DialogDisplayStyles.js: -------------------------------------------------------------------------------- 1 | import MuiDialogContent from '@mui/material/DialogContent' 2 | import MuiDialogTitle from '@mui/material/DialogTitle' 3 | import Backdrop from '@mui/material/Backdrop' 4 | import { styled } from '@mui/material/styles' 5 | 6 | export const justifyRight = { 7 | position: 'absolute', 8 | top: 16, 9 | right: 14 10 | } 11 | 12 | export const DialogContent = styled(MuiDialogContent)(({ theme }) => ({ 13 | fontFamily: theme.typography.defaultFont.fontFamily, 14 | fontSize: theme.typography.defaultFont.fontSize 15 | })) 16 | 17 | export const DialogTitle = styled(MuiDialogTitle)(({ theme }) => ({ 18 | fontFamily: theme.typography.defaultFont.fontFamily 19 | })) 20 | 21 | export const TransparentBackdrop = styled(Backdrop)(() => ({ 22 | backgroundColor: 'transparent' 23 | })) 24 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "launch", 10 | "name": "test", 11 | "program": "${workspaceFolder}/node_modules/@teambit/bit/dist/app.js", 12 | "args": ["test"], 13 | "resolveSourceMapLocations": [ 14 | "${workspaceFolder}/node_modules/@my-org/**/*.js" 15 | ], 16 | "outFiles": [ 17 | "${workspaceFolder}/node_modules/@my-org/**/*.js" 18 | ], 19 | "console": "integratedTerminal", 20 | "sourceMaps": true, 21 | "internalConsoleOptions": "neverOpen", 22 | "cwd": "${workspaceFolder}" 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /src/components/surfaces/accordion/Accordion.d.ts: -------------------------------------------------------------------------------- 1 | import { AccordionProps as MuiAccordionProps } from '@mui/material' 2 | 3 | export interface AccordionProps extends Omit { 4 | /** 5 | * The title of accordion. 6 | */ 7 | title?: React.ReactNode 8 | /** 9 | * The content of accordion. 10 | */ 11 | content?: React.ReactNode 12 | /** 13 | * @default 'standard' 14 | * Variant to use. 15 | */ 16 | variant?: 'standard' | 'filled' 17 | } 18 | 19 | /** 20 | * 21 | * Demos: 22 | * 23 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/surfaces/accordion 24 | * 25 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/surfaces/accordion 26 | * 27 | */ 28 | 29 | export default function Accordion(props: AccordionProps): JSX.Element 30 | -------------------------------------------------------------------------------- /src/components/buttons/back-to-button/BackToButton.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import BackToButton from './BackToButton' 3 | import { screen, waitFor } from '@testing-library/react' 4 | import { BrowserRouter, Routes, Route } from 'react-router-dom' 5 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 6 | 7 | const { render, userClick } = fns 8 | 9 | describe('BackToButton', () => { 10 | test('redirects to the path received', async () => { 11 | render( 12 | 13 | 14 | 15 | {'redirected'}}> 16 | 17 | 18 | ) 19 | userClick(screen.getByRole('button')) 20 | await waitFor(() => { 21 | expect(screen.getByText('redirected')).toBeInTheDocument() 22 | }) 23 | }) 24 | }) 25 | -------------------------------------------------------------------------------- /src/components/surfaces/stats-card/StatsCard.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'StatsCard component.' 3 | labels: ['mui', 'react', 'stats-card'] 4 | --- 5 | 6 | import StatsCard from './StatsCard' 7 | import AttachMoneyIcon from '@mui/icons-material/AttachMoney' 8 | import Grid from '@mui/material/Grid' 9 | 10 | ## Basic StatsCard component 11 | 12 | Basic example that renders an stats-card 13 | 14 | ### Component usage 15 | 16 | ```js 17 | 18 | ``` 19 | 20 | ### Use this live example to interact with StatsCard component 21 | 22 | Live example: 23 | 24 | ```js live 25 | 26 | 27 | 28 | 29 | 30 | ``` 31 | -------------------------------------------------------------------------------- /src/components/feedback/toast/ToastContainer.d.ts: -------------------------------------------------------------------------------- 1 | import { ToastContainerProps as ReactToastifyProps } from 'react-toastify' 2 | 3 | export interface ToastContainerProps extends Omit { 4 | /** 5 | * The appearance effect. 6 | * @default Slide 7 | */ 8 | transition: 'Slide' | 'Bounce' | 'Zoom' | 'Flip' 9 | } 10 | 11 | /** 12 | * 13 | * Demos: 14 | * 15 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/feedback/toast 16 | * 17 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-webapp-components/blob/master/components/Toast 18 | * 19 | * React Toastify components used: 20 | * - ToastContainer https://fkhadra.github.io/react-toastify/api/toast-container/ 21 | * - toast https://fkhadra.github.io/react-toastify/api/toast 22 | */ 23 | export default function ToastContainer(props: ToastContainerProps): JSX.Element 24 | -------------------------------------------------------------------------------- /src/components/navigation/pagination/pagination.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Pagination component.' 3 | labels: ['mui', 'react', 'pagination'] 4 | --- 5 | 6 | import Pagination from './Pagination' 7 | 8 | ## Basic Pagination component 9 | 10 | Basic example that renders a pagination 11 | 12 | ### Component usage 13 | 14 | ```js 15 | {}} 20 | pageSize={25} 21 | onRowsPerPageChange={() => {}} 22 | rowsPerPageOptions={[25, 50, 75, 100]} 23 | /> 24 | ``` 25 | 26 | ### Use this live example to interact with Pagination component 27 | 28 | Modify the text to see it change live: 29 | 30 | ```js live 31 | {}} 36 | pageSize={25} 37 | onRowsPerPageChange={() => {}} 38 | rowsPerPageOptions={[25, 50, 75, 100]} 39 | /> 40 | ``` 41 | -------------------------------------------------------------------------------- /src/components/navigation/side-menu/SideMenu.d.ts: -------------------------------------------------------------------------------- 1 | export interface SideMenuProps { 2 | /** 3 | * Content of the menu 4 | */ 5 | content?: React.ReactNode 6 | /** 7 | * @default MenuOpenIcon 8 | * Icon to be displayed on the button 9 | */ 10 | icon?: object 11 | /** 12 | * Props applied to the button 13 | */ 14 | buttonProps?: object 15 | /** 16 | * Props applied to the content 17 | */ 18 | contentProps?: object 19 | /** 20 | * Props applied to the icon 21 | */ 22 | iconProps?: object 23 | } 24 | 25 | /** 26 | * 27 | * Demos: 28 | * 29 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/navigation/side-menu 30 | * 31 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/navigation/side-menu 32 | * 33 | */ 34 | 35 | export default function SideMenu(props: SideMenuProps): JSX.Element 36 | -------------------------------------------------------------------------------- /src/components/surfaces/card-actions/CardActions.d.ts: -------------------------------------------------------------------------------- 1 | import { CardActionsProps as MuiCardActionsProps } from '@mui/material' 2 | 3 | export interface CardActionsProps extends MuiCardActionsProps { 4 | /** 5 | * @default 'standard' 6 | * Variant to use. 7 | */ 8 | variant?: 'standard' | 'filled' 9 | /** 10 | * Align actions to left or right. 11 | * @default 'left' 12 | */ 13 | align?: 'left' | 'right' 14 | } 15 | 16 | /** 17 | * 18 | * Demos: 19 | * 20 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/surfaces/card-actions 21 | * 22 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/surfaces/card-actions 23 | * 24 | * Material-UI components used: 25 | * 26 | * - CardActions: https://mui.com/material-ui/api/card-actions/ 27 | * 28 | */ 29 | 30 | export default function CardActions(props: CardActionsProps): JSX.Element 31 | -------------------------------------------------------------------------------- /src/components/charts/chart/chart.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Chart component.' 3 | labels: ['mui', 'react', 'chart'] 4 | --- 5 | 6 | import Chart from './Chart' 7 | import BarChartIcon from '@mui/icons-material/BarChart' 8 | import { lineChartData, chartOptions } from './mocks' 9 | 10 | ## Basic Chart component 11 | 12 | Basic example that renders a chart 13 | 14 | ### Component usage 15 | 16 | ```js 17 | 26 | ``` 27 | 28 | ### Use this live example to interact with Chart component 29 | 30 | Live example: 31 | 32 | ```js live 33 | 42 | ``` 43 | -------------------------------------------------------------------------------- /src/components/surfaces/accordion/Accordion.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Accordion from './Accordion' 3 | import { screen } from '@testing-library/react' 4 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 5 | 6 | const { render } = fns 7 | 8 | const mockedContent = { title: 'Title', content: 'Details of the content' } 9 | 10 | describe('Accordion', () => { 11 | it('renders title content', () => { 12 | render() 13 | expect(screen.getByText(mockedContent.title)).toBeInTheDocument() 14 | }) 15 | 16 | it('renders details content', () => { 17 | render() 18 | expect(screen.getByText(mockedContent.content)).toBeInTheDocument() 19 | }) 20 | 21 | it('renders expand more icon', () => { 22 | render() 23 | expect(screen.getByTestId('ExpandMoreIcon')).toBeInTheDocument() 24 | }) 25 | }) 26 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/components/PrimitiveAutocomplete.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Autocomplete from '../Autocomplete' 4 | 5 | const PrimitiveAutocomplete = ({ value, onChange, simpleValue, creatable, isClearable, ...rest }) => { 6 | return ( 7 | 18 | ) 19 | } 20 | 21 | PrimitiveAutocomplete.propTypes = { 22 | value: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.array]), 23 | onChange: PropTypes.func.isRequired, 24 | simpleValue: PropTypes.bool, 25 | creatable: PropTypes.bool, 26 | isClearable: PropTypes.bool 27 | } 28 | 29 | export default PrimitiveAutocomplete 30 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml: -------------------------------------------------------------------------------- 1 | name: Feature Request 🎇 2 | description: Suggest a new feature for Rocket-UI library. 3 | labels: [enhancement] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Thanks for contributing! 9 | - type: checkboxes 10 | attributes: 11 | label: Latest version 12 | description: We roll bug fixes, performance enhancements, and other improvements into new releases. 13 | options: 14 | - label: I have tested the latest version 15 | required: true 16 | - type: textarea 17 | id: feature-description 18 | attributes: 19 | label: Description 20 | description: Describe the new feature. How it should work. 21 | validations: 22 | required: true 23 | - type: textarea 24 | id: examples 25 | attributes: 26 | label: Examples 27 | description: Provide screenshots, examples of the expected behavior. 28 | -------------------------------------------------------------------------------- /src/components/buttons/back-to-button/BackToButton.d.ts: -------------------------------------------------------------------------------- 1 | import { IconButtonProps } from "@totalsoft_oss/rocket-ui.components.buttons.icon-button" 2 | 3 | export interface BackToButtonProps extends IconButtonProps { 4 | /** 5 | * Size of the icon. 6 | */ 7 | fontSize?: 'inherit' | 'small' | 'medium' | 'large' 8 | /** 9 | * Path where browser will be directed to when the button is clicked. 10 | */ 11 | path?: string 12 | } 13 | 14 | /** 15 | * 16 | * Demos: 17 | * 18 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/buttons/back-to-button 19 | * 20 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/buttons/back-to-button 21 | * 22 | * Bit component used: 23 | * 24 | * - IconButton: https://bit.cloud/totalsoft_oss/rocket-ui/components/buttons/icon-button 25 | * 26 | */ 27 | 28 | export default function BackToButton(props: BackToButtonProps): JSX.Element 29 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/components/BasicAutocomplete.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Autocomplete from '../Autocomplete' 4 | 5 | const BasicAutocomplete = ({ value, onChange, simpleValue, creatable, isClearable, ...rest }) => { 6 | return ( 7 | 18 | ) 19 | } 20 | 21 | BasicAutocomplete.propTypes = { 22 | value: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number, PropTypes.array]), 23 | onChange: PropTypes.func.isRequired, 24 | simpleValue: PropTypes.bool.isRequired, 25 | creatable: PropTypes.bool.isRequired, 26 | isClearable: PropTypes.bool 27 | } 28 | 29 | export default BasicAutocomplete 30 | -------------------------------------------------------------------------------- /src/components/charts/chart/Chart.d.ts: -------------------------------------------------------------------------------- 1 | import { SvgIconComponent } from '@mui/icons-material' 2 | 3 | export interface ChartProps { 4 | /** 5 | * Chart title. 6 | */ 7 | title?: React.ReactNode 8 | /** 9 | * Chart subtitle. 10 | */ 11 | subheader?: React.ReactNode 12 | /** 13 | * Chart icon. 14 | */ 15 | icon?: React.ElementType 16 | /** 17 | * Chart icon color. 18 | */ 19 | iconColor?: string 20 | /** 21 | * Chart type. 22 | */ 23 | type: string 24 | /** 25 | * Chart data. 26 | */ 27 | data: { 28 | labels: [] 29 | datasets: [] 30 | } 31 | } 32 | 33 | /** 34 | * 35 | * Demos: 36 | * 37 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/charts/chart 38 | * 39 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/charts/chart 40 | * 41 | */ 42 | 43 | export default function Chart(props: ChartProps): JSX.Element 44 | -------------------------------------------------------------------------------- /src/components/inputs/simple-slider/SimpleSliderStyles.js: -------------------------------------------------------------------------------- 1 | import MuiSlider from '@mui/material/Slider' 2 | import MuiFormControl from '@mui/material/FormControl' 3 | import MuiFormHelperText from '@mui/material/FormHelperText' 4 | import { styled } from '@mui/material/styles' 5 | import TextField from '@totalsoft_oss/rocket-ui.components.inputs.text-field' 6 | 7 | export const Slider = styled(MuiSlider)(() => ({ 8 | [`&.MuiSlider-root`]: { 9 | top: '-1px', 10 | margin: 0, 11 | [`& .MuiSlider-markLabel`]: { 12 | top: '20px', 13 | fontSize: '14px', 14 | lineHeight: '1.5em' 15 | } 16 | } 17 | })) 18 | 19 | export const StyledTextField = styled(TextField)(() => ({ 20 | margin: '-14px 0' 21 | })) 22 | 23 | export const FormControl = styled(MuiFormControl)(() => ({ 24 | overflow: 'visible', // fix for mobile horizontal scroll 25 | marginLeft: 0 26 | })) 27 | 28 | export const FormHelperText = styled(MuiFormHelperText)(() => ({ 29 | marginLeft: 0 30 | })) 31 | -------------------------------------------------------------------------------- /src/components/surfaces/card/card.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Card component.' 3 | labels: ['mui', 'react', 'card'] 4 | --- 5 | 6 | import Card from './Card' 7 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 8 | 9 | ## Basic Card component 10 | 11 | Basic example that renders an card 12 | 13 | ### Component usage 14 | 15 | ```js 16 | 17 | 18 | { 19 | 'Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.' 20 | } 21 | 22 | 23 | ``` 24 | 25 | ### Use this live example to interact with Card component 26 | 27 | Live example: 28 | 29 | ```js live 30 | 31 | 32 | { 33 | 'Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.' 34 | } 35 | 36 | 37 | ``` 38 | -------------------------------------------------------------------------------- /src/components/data-display/fav-icon/FavIcon.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useCallback } from 'react' 2 | import PropTypes from 'prop-types' 3 | 4 | const FavIcon = ({ favIconSource, defaultFavIcon }) => { 5 | const onError = useCallback( 6 | (event, favicon) => { 7 | favicon.href = defaultFavIcon || '#' 8 | event.onerror = null 9 | }, 10 | [defaultFavIcon] 11 | ) 12 | 13 | const setFavIcon = useCallback( 14 | source => { 15 | const favicon = document.getElementById('favicon') 16 | const img = new Image() 17 | img.onerror = event => onError(event, favicon) 18 | img.onload = () => (favicon.href = source || '#') 19 | img.src = source 20 | }, 21 | [onError] 22 | ) 23 | 24 | useEffect(() => { 25 | setFavIcon(favIconSource) 26 | }, [favIconSource, setFavIcon]) 27 | 28 | return <> 29 | } 30 | 31 | FavIcon.propTypes = { 32 | favIconSource: PropTypes.string, 33 | defaultFavIcon: PropTypes.any 34 | } 35 | 36 | export default FavIcon 37 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/components/AsyncMultipleAutocomplete.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Autocomplete from '../Autocomplete' 4 | import { loadOptions } from '../common/mocks' 5 | 6 | const AsyncMultipleAutocomplete = ({ value, onChange, simpleValue, creatable, isClearable, ...rest }) => { 7 | return ( 8 | 20 | ) 21 | } 22 | 23 | AsyncMultipleAutocomplete.propTypes = { 24 | value: PropTypes.array.isRequired, 25 | onChange: PropTypes.func.isRequired, 26 | simpleValue: PropTypes.bool, 27 | creatable: PropTypes.bool, 28 | isClearable: PropTypes.bool 29 | } 30 | 31 | export default AsyncMultipleAutocomplete 32 | -------------------------------------------------------------------------------- /src/components/surfaces/accordion-list/AccordionList.d.ts: -------------------------------------------------------------------------------- 1 | import { AccordionProps } from '@totalsoft_oss/rocket-ui.components.surfaces.accordion' 2 | 3 | export interface AccordionListProps extends Omit { 4 | /** 5 | * Default expanded accordion. 6 | */ 7 | defaultExpanded?: number 8 | /** 9 | * @default false 10 | * If false, only one accordion at a time can be expanded 11 | */ 12 | canExpandAll?: boolean 13 | /** 14 | * The content of accordion. 15 | */ 16 | content: { 17 | title: string 18 | content: React.ReactNode 19 | }[] 20 | } 21 | 22 | /** 23 | * 24 | * Demos: 25 | * 26 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/surfaces/accordion-list 27 | * 28 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/surfaces/accordion-list 29 | * 30 | */ 31 | 32 | export default function AccordionList(props: AccordionListProps): JSX.Element 33 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/common/mocks.js: -------------------------------------------------------------------------------- 1 | import { includes } from 'ramda' 2 | 3 | export const options = [ 4 | { id: 1, name: 'Esign IDM' }, 5 | { id: 2, name: 'Hera IDM', isDisabled: true }, 6 | { id: 3, name: 'Leasing IDM' }, 7 | { id: 4, name: 'Medical' } 8 | ] 9 | export const primitiveOptions = ['first option', 'second option', 'third option'] 10 | export const numericOptions = [{ period: 1 }, { period: 2 }, { period: 3 }] 11 | 12 | function sleep(delay = 0) { 13 | return new Promise(resolve => { 14 | setTimeout(resolve, delay) 15 | }) 16 | } 17 | 18 | const filterResults = input => options.filter(o => includes(input, o.name)) 19 | 20 | export const loadFilteredOptions = async input => { 21 | await sleep(1e3) 22 | return new Promise(res => (input ? res(filterResults(input)) : res(options))) 23 | } 24 | 25 | export const loadOptions = async () => { 26 | await sleep(1e3) 27 | return new Promise(res => res(options)) 28 | } 29 | 30 | export const getOptionDisabled = option => option.isDisabled 31 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/components/AsyncAutocomplete.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Autocomplete from '../Autocomplete' 4 | import { loadFilteredOptions } from '../common/mocks' 5 | 6 | const AsyncAutocomplete = ({ value, onChange, simpleValue, creatable, isClearable, ...rest }) => { 7 | return ( 8 | 19 | ) 20 | } 21 | 22 | AsyncAutocomplete.propTypes = { 23 | value: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]), 24 | onChange: PropTypes.func.isRequired, 25 | simpleValue: PropTypes.bool.isRequired, 26 | creatable: PropTypes.bool.isRequired, 27 | isClearable: PropTypes.bool 28 | } 29 | 30 | export default AsyncAutocomplete 31 | -------------------------------------------------------------------------------- /src/components/inputs/date-time/DateTimeEndAdornment.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import InputAdornment from '@mui/material/InputAdornment' 4 | import { ClearSmallIcon, IconButton } from './DateTimeStyles' 5 | 6 | const DateTimeEndAdornment = props => { 7 | const { isClearable, onClear, onOpen, OpenPickerIcon, disabled } = props 8 | return ( 9 | 10 | {isClearable && ( 11 | 12 | 13 | 14 | )} 15 | 16 | 17 | 18 | 19 | ) 20 | } 21 | 22 | DateTimeEndAdornment.propTypes = { 23 | isClearable: PropTypes.bool, 24 | onClear: PropTypes.func, 25 | onOpen: PropTypes.func, 26 | OpenPickerIcon: PropTypes.elementType, 27 | disabled: PropTypes.bool 28 | } 29 | 30 | export default DateTimeEndAdornment 31 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/components/ControlledCheckBox.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback } from 'react' 2 | import PropTypes from 'prop-types' 3 | import FormControlLabel from '@mui/material/FormControlLabel' 4 | import Checkbox from '@mui/material/Checkbox' 5 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 6 | 7 | const ControlledCheckbox = ({ value, onChange, label }) => { 8 | const handleChange = useCallback(e => onChange(e.target.checked), [onChange]) 9 | 10 | return ( 11 | } 13 | disableTypography 14 | label={ 15 | 16 | {label} 17 | 18 | } 19 | /> 20 | ) 21 | } 22 | 23 | ControlledCheckbox.propTypes = { 24 | value: PropTypes.bool, 25 | onChange: PropTypes.func, 26 | label: PropTypes.string.isRequired 27 | } 28 | 29 | export default ControlledCheckbox 30 | -------------------------------------------------------------------------------- /src/components/navigation/nav-pills/components/ControlledCheckbox.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback } from 'react' 2 | import PropTypes from 'prop-types' 3 | import FormControlLabel from '@mui/material/FormControlLabel' 4 | import Checkbox from '@mui/material/Checkbox' 5 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 6 | 7 | const ControlledCheckbox = ({ value, onChange, label }) => { 8 | const handleChange = useCallback(e => onChange(e.target.checked), [onChange]) 9 | 10 | return ( 11 | } 13 | disableTypography 14 | label={ 15 | 16 | {label} 17 | 18 | } 19 | /> 20 | ) 21 | } 22 | 23 | ControlledCheckbox.propTypes = { 24 | value: PropTypes.bool, 25 | onChange: PropTypes.func, 26 | label: PropTypes.string.isRequired 27 | } 28 | 29 | export default ControlledCheckbox 30 | -------------------------------------------------------------------------------- /src/components/inputs/text-field/TextFieldStyles.js: -------------------------------------------------------------------------------- 1 | import MuiTextField from '@mui/material/TextField' 2 | import Button from '@mui/material/Button' 3 | import { styled } from '@mui/material/styles' 4 | 5 | const PREFIX = 'StyledTextField' 6 | export const classes = { 7 | label: `${PREFIX}-label`, 8 | input: `${PREFIX}-input`, 9 | stepper: `${PREFIX}-stepper` 10 | } 11 | 12 | export const TextField = styled(MuiTextField)(({ theme }) => ({ 13 | [`& .${classes.label}`]: { 14 | ...theme.typography.defaultFont, 15 | fontWeight: '400', 16 | lineHeight: '1.42857' 17 | }, 18 | [`& .${classes.input}`]: { 19 | '&,&::placeholder': { 20 | ...theme.typography.defaultFont, 21 | fontWeight: '400' 22 | } 23 | }, 24 | [`& .${classes.stepperFixedWidth}`]: { 25 | width: '120px' 26 | } 27 | })) 28 | 29 | export const StepButton = styled(Button)(({ theme }) => ({ 30 | fontFamily: theme.typography.fontFamily, 31 | minWidth: '28px', 32 | height: '28px', 33 | fontSize: '22px', 34 | fontWeight: 'bold', 35 | borderRadius: 'unset' 36 | })) 37 | -------------------------------------------------------------------------------- /src/components/inputs/password-field/PasswordField.d.ts: -------------------------------------------------------------------------------- 1 | import { TextFieldProps } from "@totalsoft_oss/rocket-ui.components.inputs.text-field" 2 | 3 | export interface PasswordFieldProps extends TextFieldProps { 4 | /** 5 | * @default "Hide password" 6 | * Text to be displayed on tooltip when the user wants to hide the password. 7 | */ 8 | hidePasswordText?: string 9 | /** 10 | * @default "Show password" 11 | * Text to be displayed on tooltip when the user wants to show the password. 12 | */ 13 | showPasswordText?: string 14 | } 15 | 16 | /** 17 | * 18 | * Demos: 19 | * 20 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/inputs/password-field 21 | * 22 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/inputs/password-field 23 | * 24 | * Bit component used: 25 | * 26 | * - TextField: https://bit.cloud/totalsoft_oss/rocket-ui/components/inputs/text-field 27 | * 28 | */ 29 | 30 | export default function PasswordField(props: PasswordFieldProps): JSX.Element 31 | -------------------------------------------------------------------------------- /src/components/themes/themes.composition.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Blue from './prints/Blue.PNG'; 3 | import Default from './prints/Default.PNG'; 4 | import Green from './prints/Green.PNG'; 5 | import LightBlue from './prints/LightBlue.PNG'; 6 | import Orange from './prints/Orange.PNG'; 7 | import Red from './prints/Red.PNG'; 8 | import Vivid from './prints/Vivid.PNG'; 9 | 10 | export const BlueTheme = () => { 11 | return ; 12 | }; 13 | 14 | export const DefaultTheme = () => { 15 | return ; 16 | }; 17 | 18 | export const GreenTheme = () => { 19 | return ; 20 | }; 21 | 22 | export const LightBlueTheme = () => { 23 | return ; 24 | }; 25 | 26 | export const OrangeTheme = () => { 27 | return ; 28 | }; 29 | 30 | export const RedTheme = () => { 31 | return ; 32 | }; 33 | 34 | export const VividTheme = () => { 35 | return ; 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/surfaces/card-header/CardHeaderStyles.js: -------------------------------------------------------------------------------- 1 | import MuiCardHeader from '@mui/material/CardHeader' 2 | import { styled } from '@mui/material/styles' 3 | import { includes } from 'ramda' 4 | 5 | const CardHeader = styled(MuiCardHeader, { 6 | shouldForwardProp: prop => !includes(prop, ['variant', 'hasIcon', 'iconColor']) 7 | })(({ theme, variant, hasIcon, iconColor }) => ({ 8 | [`&.MuiCardHeader-root`]: { 9 | ...(variant === 'filled' && { backgroundColor: theme.palette.grey[200], minHeight: '48px' }) 10 | }, 11 | [`& .MuiCardHeader-avatar`]: { 12 | ...(hasIcon && { 13 | width: '3rem', 14 | height: '3rem', 15 | borderRadius: '0.75rem', 16 | background: `linear-gradient(195deg, ${theme.palette[iconColor].light}, ${theme.palette[iconColor].main})`, 17 | position: 'absolute', 18 | top: '-20px' 19 | }) 20 | }, 21 | [`& .MuiCardHeader-content`]: { 22 | ...(hasIcon && { 23 | paddingLeft: '80px' 24 | }) 25 | }, 26 | [`& .MuiCardHeader-action`]: { 27 | display: 'flex' 28 | } 29 | })) 30 | 31 | export default CardHeader 32 | -------------------------------------------------------------------------------- /src/components/feedback/not-found/NotFound.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { NotFoundImage, NotFoundText } from './NotFoundStyles' 4 | import notFound from './notFound.png' 5 | import Grid from '@mui/material/Grid' 6 | 7 | const NotFound = ({ text = 'Not Found', details = 'The resource requested could not be found on this server!' }) => { 8 | return ( 9 | 10 | 11 | notFoundImage 12 | 13 | {text} 14 | {details} 15 | 16 | ) 17 | } 18 | 19 | NotFound.propTypes = { 20 | /** 21 | * @default 'Not Found' 22 | * The text to be displayed when this component is rendered 23 | */ 24 | text: PropTypes.string, 25 | /** 26 | * @default 'The resource requested could not be found on this server!' 27 | * The details to be displayed when this component is rendered 28 | */ 29 | details: PropTypes.string 30 | } 31 | 32 | export default NotFound 33 | -------------------------------------------------------------------------------- /src/components/themes/common/typography.js: -------------------------------------------------------------------------------- 1 | export const defaultFont = { 2 | fontFamily: 'Source Sans Pro', 3 | fontSize: 14, 4 | lineHeight: '1.5em', 5 | fontWeight: '300' 6 | } 7 | 8 | export const generateTypography = palette => ({ 9 | ...defaultFont, 10 | defaultFont, 11 | useNextVariants: true, 12 | htmlFontSize: 14, 13 | fontWeightMedium: 300, 14 | button: { 15 | ...defaultFont, 16 | textAlign: 'center', 17 | fontStretch: 'normal', 18 | fontStyle: 'normal' 19 | }, 20 | body: { 21 | ...defaultFont, 22 | fontSize: 14 23 | }, 24 | header: { 25 | title: { 26 | borderRadius: '3px', 27 | textTransform: 'none', 28 | fontWeight: 'bold', 29 | color: palette.primary.main, 30 | '&:hover,&:focus': { 31 | background: 'transparent' 32 | } 33 | }, 34 | titleMobile: { 35 | borderRadius: '3px', 36 | textTransform: 'none', 37 | fontWeight: 'bold', 38 | color: palette.primary.main, 39 | '&:hover,&:focus': { 40 | background: 'transparent' 41 | } 42 | } 43 | } 44 | }) 45 | -------------------------------------------------------------------------------- /src/components/feedback/toast/usePromiseToast.js: -------------------------------------------------------------------------------- 1 | import { useCallback } from 'react' 2 | import { toast } from 'react-toastify' 3 | import { classes } from './ToastStyles' 4 | 5 | const usePromiseToast = () => { 6 | return useCallback( 7 | /** 8 | * 9 | * @param {Promise} promise The promise function 10 | * @param {(String|Object)} pending The message to be shown while promise in pending or the entire object with all the configurations 11 | * @param {(String|Object)} success The message to be shown when promise completed successfully or the entire object with all the configurations 12 | * @param {(String|Object)} error The message to be shown when promise was rejected or the entire object with all the configurations 13 | */ 14 | (promise, pending, success, error) => { 15 | toast.promise( 16 | promise, 17 | { pending, success, error }, 18 | { className: `${classes.success} ${classes.default} ${classes.info} ${classes.error} ${classes.error} ${classes.default} ` } 19 | ) 20 | }, 21 | [] 22 | ) 23 | } 24 | 25 | export default usePromiseToast 26 | -------------------------------------------------------------------------------- /src/components/feedback/linear-progress/LinearProgress.d.ts: -------------------------------------------------------------------------------- 1 | import { LinearProgressProps as MuiLinearProgressProps } from '@mui/material' 2 | import { TypographyProps } from '@totalsoft_oss/rocket-ui.components.data-display.typography' 3 | 4 | export interface LinearProgressProps extends Omit { 5 | /** 6 | * @default "grey" 7 | * Color of the component. 8 | */ 9 | color?: 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info' | 'rose' | 'grey' 10 | /** 11 | * Props applied to the label. 12 | */ 13 | labelProps?: TypographyProps 14 | } 15 | 16 | /** 17 | * 18 | * Demos: 19 | * 20 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/feedback/linear-progress 21 | * 22 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/feedback/linear-progress 23 | * 24 | * Material-UI component used: 25 | * 26 | * - LinearProgress: https://mui.com/material-ui/api/linear-progress/ 27 | * 28 | */ 29 | 30 | export default function LinearProgress(props: LinearProgressProps): JSX.Element 31 | -------------------------------------------------------------------------------- /src/components/feedback/loading-fake-text/LoadingFakeText.d.ts: -------------------------------------------------------------------------------- 1 | import { SkeletonProps as MuiSkeletonProps } from '@mui/material' 2 | 3 | export interface LoadingFakeTextProps extends Omit { 4 | /** 5 | * @default 'wave' 6 | * The animation. If false, the animation effect is disabled 7 | */ 8 | animation?: 'pulse' | 'wave' | 'false' 9 | /** 10 | * @default 1 11 | * The number of fake line texts that will be rendered 12 | */ 13 | lines?: number 14 | /** 15 | * @default false 16 | * If set to true, the fake text will render on a Paper component 17 | */ 18 | onPaper?: boolean 19 | } 20 | 21 | /** 22 | * Demos: 23 | * 24 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/feedback/loading-fake-text 25 | * 26 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/feedback/loading-fake-text 27 | * 28 | * Material-UI component used: 29 | * 30 | * - Skeleton: https://mui.com/api/skeleton 31 | * 32 | */ 33 | 34 | export default function LoadingFakeText(props: LoadingFakeTextProps): JSX.Element 35 | -------------------------------------------------------------------------------- /src/components/data-display/expanding-text/ExpandingText.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'ExpandingText component.' 3 | labels: ['mui', 'react', 'expanding-text'] 4 | --- 5 | 6 | import ExpandingText from './ExpandingText' 7 | 8 | ## Basic ExpandingText component 9 | 10 | Basic example that renders an expanding-text 11 | 12 | ### Component usage 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | ### Use this live example to interact with ExpandingText component 19 | 20 | Live example: 21 | 22 | ```js live 23 | 30 | ``` 31 | -------------------------------------------------------------------------------- /types/style.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css' { 2 | const classes: { readonly [key: string]: string }; 3 | export default classes; 4 | } 5 | declare module '*.module.scss' { 6 | const classes: { readonly [key: string]: string }; 7 | export default classes; 8 | } 9 | declare module '*.module.sass' { 10 | const classes: { readonly [key: string]: string }; 11 | export default classes; 12 | } 13 | 14 | declare module '*.module.less' { 15 | const classes: { readonly [key: string]: string }; 16 | export default classes; 17 | } 18 | 19 | declare module '*.less' { 20 | const classes: { readonly [key: string]: string }; 21 | export default classes; 22 | } 23 | 24 | declare module '*.css' { 25 | const classes: { readonly [key: string]: string }; 26 | export default classes; 27 | } 28 | 29 | declare module '*.sass' { 30 | const classes: { readonly [key: string]: string }; 31 | export default classes; 32 | } 33 | 34 | declare module '*.scss' { 35 | const classes: { readonly [key: string]: string }; 36 | export default classes; 37 | } 38 | 39 | declare module '*.mdx' { 40 | const component: any; 41 | export default component; 42 | } 43 | -------------------------------------------------------------------------------- /src/components/charts/stats-chart/StatsChart.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'StatsChart component.' 3 | labels: ['mui', 'react', 'stats-chart'] 4 | --- 5 | 6 | import StatsChart from './StatsChart' 7 | import Grid from '@mui/material/Grid' 8 | import AccessTimeIcon from '@mui/icons-material/AccessTime' 9 | import { statsChartData, statsChartOptions } from './mocks' 10 | 11 | ## Basic StatsChart component 12 | 13 | Basic example that renders a stats-chart 14 | 15 | ### Component usage 16 | 17 | ```js 18 | 28 | ``` 29 | 30 | ### Use this live example to interact with StatsChart component 31 | 32 | Live example: 33 | 34 | ```js live 35 | 36 | 46 | 47 | ``` 48 | -------------------------------------------------------------------------------- /src/components/navigation/side-menu/SideMenu.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { screen, waitFor } from '@testing-library/react' 3 | import SideMenu from './SideMenu' 4 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 5 | 6 | const { render, userClick } = fns 7 | 8 | const content = 'content' 9 | 10 | describe('SideMenu', () => { 11 | it("doesn't display content by default", () => { 12 | render() 13 | expect(screen.getByText(content)).not.toBeVisible() 14 | }) 15 | 16 | it('display content when the button is clicked', async () => { 17 | render() 18 | userClick(screen.getByTestId('MenuOpenIcon').parentElement) 19 | await waitFor(() => expect(screen.getByText(content)).toBeVisible()) 20 | }) 21 | 22 | it('hides content when clicked outside', async () => { 23 | render() 24 | const button = screen.getByTestId('MenuOpenIcon').parentElement 25 | userClick(button) 26 | await waitFor(() => expect(screen.getByText(content)).toBeVisible()) 27 | userClick(button.parentElement.parentElement) 28 | await waitFor(() => expect(screen.getByText(content)).not.toBeVisible()) 29 | }) 30 | }) 31 | -------------------------------------------------------------------------------- /src/components/navigation/pagination/Pagination.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { screen } from '@testing-library/react' 3 | import Pagination from './Pagination' 4 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 5 | 6 | const { render, userClick } = fns 7 | 8 | const paginationProps = { 9 | count: 100, 10 | pageSize: 10, 11 | page: 0, 12 | onPageChange: jest.fn(), 13 | onRowsPerPageChange: jest.fn() 14 | } 15 | 16 | describe('Pagination', () => { 17 | it('renders default rowsPerPageText', () => { 18 | render() 19 | expect(screen.getByText('Rows per page:')).toBeInTheDocument() 20 | }) 21 | 22 | it('onRefresh is called', () => { 23 | const mockRefresh = jest.fn() 24 | render() 25 | const refreshButton = screen.getByTestId('RefreshIcon').parentElement 26 | userClick(refreshButton) 27 | expect(mockRefresh).toBeCalledTimes(1) 28 | }) 29 | 30 | it('renders refresh button', () => { 31 | const mockRefresh = jest.fn() 32 | render() 33 | expect(screen.getByTestId('RefreshIcon')).toBeInTheDocument() 34 | }) 35 | }) 36 | -------------------------------------------------------------------------------- /src/components/buttons/back-to-button/BackToButton.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback } from 'react' 2 | import PropTypes from 'prop-types' 3 | import { useNavigate } from 'react-router-dom' 4 | import ArrowBackIcon from '@mui/icons-material/ArrowBack' 5 | import IconButton from '@totalsoft_oss/rocket-ui.components.buttons.icon-button' 6 | 7 | const BackToButton = ({ path, fontSize = 'small', size = 'medium', ...rest }) => { 8 | const navigate = useNavigate() 9 | 10 | const onBackToList = useCallback(() => { 11 | path && navigate(path) 12 | }, [history, path]) 13 | 14 | return ( 15 | 16 | 17 | 18 | ) 19 | } 20 | 21 | BackToButton.propTypes = { 22 | /** 23 | * @default 'medium' 24 | * Size of the button 25 | */ 26 | size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']), 27 | /** 28 | * @default 'small' 29 | * Size of the icon. 30 | */ 31 | fontSize: PropTypes.oneOf(['inherit', 'small', 'medium', 'large']), 32 | /** 33 | * Path where browser will be directed to when the button is clicked. 34 | */ 35 | path: PropTypes.string 36 | } 37 | 38 | export default BackToButton 39 | -------------------------------------------------------------------------------- /src/components/feedback/custom-dialog/CustomDialog.d.ts: -------------------------------------------------------------------------------- 1 | import { ButtonProps } from '@totalsoft_oss/rocket-ui.components.buttons.button' 2 | import { DialogDisplayProps } from '@totalsoft_oss/rocket-ui.components.feedback.dialog-display' 3 | 4 | export interface CustomDialogProps extends DialogDisplayProps { 5 | /** 6 | * Props applied to the button. 7 | */ 8 | buttonProps?: ButtonProps 9 | /** 10 | * Callback fired when a "click" event is detected. 11 | */ 12 | onYes: () => void 13 | /** 14 | * @deprecated 15 | * If true, the actions (buttons) are shown below. 16 | */ 17 | showActions?: boolean 18 | /** 19 | * @default 'Yes' 20 | * Text content of the first (left) action. 21 | */ 22 | textDialogYes?: string 23 | /** 24 | * @default 'No' 25 | * Text content of the second (right) action. 26 | */ 27 | textDialogNo?: string 28 | } 29 | 30 | /** 31 | * 32 | * Demos: 33 | * 34 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/feedback/custom-dialog 35 | * 36 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/feedback/custom-dialog 37 | * 38 | */ 39 | 40 | export default function CustomDialog(props: CustomDialogProps): JSX.Element 41 | -------------------------------------------------------------------------------- /src/components/surfaces/stats-card/StatsCard.d.ts: -------------------------------------------------------------------------------- 1 | import { SvgIconComponent } from '@mui/icons-material' 2 | 3 | export interface StatsCardProps { 4 | /** 5 | * Icon to be displayed. 6 | */ 7 | icon?: React.ElementType 8 | /** 9 | * @default 'info' 10 | * Icon color. 11 | */ 12 | iconColor?: 'warning' | 'primary' | 'error' | 'success' | 'info' | 'rose' | 'grey' | 'secondary' 13 | /** 14 | * Content of the title. 15 | */ 16 | title?: React.ReactNode 17 | /** 18 | * Content of the description. 19 | */ 20 | description?: React.ReactNode 21 | /** 22 | * Footer to be displayed at the bottom of the card. 23 | */ 24 | footer?: React.ReactNode 25 | /** 26 | * Variant to use. 27 | */ 28 | variant?: 'standard' | 'filled' 29 | } 30 | 31 | /** 32 | * 33 | * Demos: 34 | * 35 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/surfaces/stats-card 36 | * 37 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/surfaces/stats-card 38 | * 39 | * Material-UI components used: 40 | * 41 | * - CardHeader: https://mui.com/material-ui/api/card-header/ 42 | * 43 | */ 44 | 45 | export default function StatsCard(props: StatsCardProps): JSX.Element 46 | -------------------------------------------------------------------------------- /src/components/themes/common/overrides/Button.js: -------------------------------------------------------------------------------- 1 | export default function Button(theme) { 2 | return { 3 | MuiButton: { 4 | styleOverrides: { 5 | root: { 6 | borderRadius: '8px', 7 | '&:hover': { 8 | boxShadow: 'none' 9 | } 10 | }, 11 | sizeTiny: {}, // adds the 'tiny' size prop type which is not present in MUI 12 | sizeLarge: { 13 | height: 48 14 | }, 15 | containedInherit: { 16 | color: theme.palette.grey[800], 17 | boxShadow: theme.customShadows.z8, 18 | '&:hover': { 19 | backgroundColor: theme.palette.grey[400] 20 | } 21 | }, 22 | containedPrimary: { 23 | boxShadow: theme.customShadows.primary 24 | }, 25 | containedSecondary: { 26 | boxShadow: theme.customShadows.secondary 27 | }, 28 | outlinedInherit: { 29 | border: `1px solid ${theme.palette.grey[500_32]}`, 30 | '&:hover': { 31 | backgroundColor: theme.palette.action.hover 32 | } 33 | }, 34 | textInherit: { 35 | '&:hover': { 36 | backgroundColor: theme.palette.action.hover 37 | } 38 | } 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/themes/common/overrides/Card.js: -------------------------------------------------------------------------------- 1 | export default function Card(theme) { 2 | return { 3 | MuiCard: { 4 | styleOverrides: { 5 | root: { 6 | boxShadow: theme.shadows[5], 7 | borderRadius: Number(theme.shape.borderRadius) * 2, 8 | position: 'relative', 9 | zIndex: 0 // Fix Safari overflow: hidden with border radius 10 | } 11 | } 12 | }, 13 | MuiCardHeader: { 14 | defaultProps: { 15 | titleTypographyProps: { variant: 'h6' }, 16 | subheaderTypographyProps: { variant: 'body2' } 17 | }, 18 | styleOverrides: { 19 | root: { 20 | padding: theme.spacing(2, 3) 21 | }, 22 | content: { 23 | maxWidth: `calc(100% - ${theme.spacing(4)})` 24 | }, 25 | title: { 26 | whiteSpace: 'nowrap', 27 | overflow: 'hidden', 28 | textOverflow: 'ellipsis' 29 | } 30 | } 31 | }, 32 | MuiCardContent: { 33 | styleOverrides: { 34 | root: { 35 | padding: theme.spacing(3) 36 | } 37 | } 38 | }, 39 | MuiCardActions: { 40 | styleOverrides: { 41 | root: { 42 | padding: theme.spacing(0, 3, 3) 43 | } 44 | } 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/surfaces/accordion/accordion.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Accordion component.' 3 | labels: ['mui', 'react', 'accordion'] 4 | --- 5 | 6 | import Grid from '@mui/material/Grid' 7 | import Accordion from './Accordion' 8 | 9 | ## Basic Accordion component 10 | 11 | Basic example that renders an accordion 12 | 13 | ### Component usage 14 | 15 | ```js 16 | 20 | ``` 21 | 22 | ### Use this live example to interact with Accordion component 23 | 24 | Live example: 25 | 26 | ```js live 27 | 28 | 29 | 33 | 34 | 35 | 41 | 42 | 43 | ``` 44 | -------------------------------------------------------------------------------- /src/components/buttons/icon-button/IconButton.d.ts: -------------------------------------------------------------------------------- 1 | import { ButtonProps } from '@totalsoft_oss/rocket-ui.components.buttons.button' 2 | 3 | export interface IconButtonProps extends Omit { 4 | /** 5 | * @default 'secondary' 6 | * Color of the button 7 | */ 8 | color?: 9 | | 'primary' 10 | | 'secondary' 11 | | 'info' 12 | | 'success' 13 | | 'warning' 14 | | 'error' 15 | | 'rose' 16 | | 'white' 17 | | 'dark' 18 | | 'transparent' 19 | | 'default' 20 | | 'inherit' 21 | /** 22 | * Custom icon to be displayed 23 | */ 24 | type?: 'add' | 'cancel' | 'delete' | 'download' | 'downward' | 'edit' | 'view' | 'save' | 'upward' 25 | /** 26 | * @default 'small' 27 | * Size of the icon. 28 | */ 29 | fontSize?: 'inherit' | 'small' | 'medium' | 'large' 30 | } 31 | 32 | /** 33 | * Demos: 34 | * 35 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/buttons/icon-button 36 | * 37 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/buttons/icon-button 38 | * 39 | * Bit component used: 40 | * 41 | * - Button: https://bit.cloud/totalsoft_oss/rocket-ui/components/buttons/button 42 | * 43 | */ 44 | 45 | export default function IconButton(props: IconButtonProps): JSX.Element 46 | -------------------------------------------------------------------------------- /src/components/charts/stats-chart/StatsChart.d.ts: -------------------------------------------------------------------------------- 1 | export interface StatsChartProps { 2 | /** 3 | * Chart type. 4 | */ 5 | type: 'line' | 'bar' 6 | /** 7 | * Chart title. 8 | */ 9 | title?: string 10 | /** 11 | * The text content of chart. 12 | */ 13 | text?: string 14 | /** 15 | * Chart icon. 16 | */ 17 | StatIcon?: unknown 18 | /** 19 | * @default 'grey' 20 | * Chart icon color. 21 | */ 22 | iconColor?: 'warning' | 'primary' | 'danger' | 'success' | 'info' | 'rose' | 'grey' 23 | /** 24 | * @default 'info' 25 | * Chart color. 26 | */ 27 | chartColor?: 'warning' | 'primary' | 'danger' | 'success' | 'info' | 'rose' | 'grey' 28 | /** 29 | * Chart status text. 30 | */ 31 | statText?: React.ReactNode 32 | /** 33 | * Chart data. 34 | */ 35 | data: { 36 | labels: [] 37 | datasets: [] 38 | } 39 | /** 40 | * Action to be displayed in the right corner of the card. 41 | */ 42 | statAction?: React.ReactNode 43 | } 44 | 45 | /** 46 | * 47 | * Demos: 48 | * 49 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/charts/stats-chart 50 | * 51 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/charts/stats-chart 52 | * 53 | */ 54 | 55 | export default function StatsChart(props: StatsChartProps): JSX.Element 56 | -------------------------------------------------------------------------------- /src/components/feedback/forbidden/Forbidden.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Grid from '@mui/material/Grid' 4 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 5 | import Button from '@totalsoft_oss/rocket-ui.components.buttons.button' 6 | import forbidden from './forbidden.png' 7 | 8 | const Forbidden = ({ forbiddenText = 'Not allowed to see this page!', forbiddenButtonText = 'Go to main page' }) => { 9 | return ( 10 | 11 | 12 | ForbiddenImage 13 | 14 | 15 | 16 | {forbiddenText} 17 | 18 | 19 | 20 | 23 | 24 | 25 | ) 26 | } 27 | 28 | Forbidden.propTypes = { 29 | /** 30 | * @default 'Not allowed to see this page!' 31 | * Text to be displayed 32 | */ 33 | forbiddenText: PropTypes.string, 34 | /** 35 | * @default 'Go to main page' 36 | * Text to be displayed on button 37 | */ 38 | forbiddenButtonText: PropTypes.string 39 | } 40 | 41 | export default Forbidden 42 | -------------------------------------------------------------------------------- /src/components/surfaces/accordion/Accordion.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import BaseAccordion from '@mui/material/Accordion' 4 | import ExpandMoreIcon from '@mui/icons-material/ExpandMore' 5 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 6 | import { AccordionSummary, AccordionDetails } from './AccordionStyles' 7 | 8 | const Accordion = ({ title, content, variant = 'standard', ...rest }) => { 9 | return ( 10 | 11 | }> 12 | 13 | {title} 14 | 15 | 16 | 17 | 18 | {content} 19 | 20 | 21 | 22 | ) 23 | } 24 | 25 | Accordion.propTypes = { 26 | /** 27 | * The title of accordion. 28 | */ 29 | title: PropTypes.node, 30 | /** 31 | * The content of accordion. 32 | */ 33 | content: PropTypes.node, 34 | /** 35 | * @default 'standard' 36 | * Variant to use. 37 | */ 38 | variant: PropTypes.oneOf(['standard', 'filled']) 39 | } 40 | 41 | export default Accordion 42 | -------------------------------------------------------------------------------- /src/components/surfaces/collapse-card/CollapseCard.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CardProps } from '@totalsoft_oss/rocket-ui.components.surfaces.card' 3 | 4 | export interface CollapseCardProps extends CardProps { 5 | /** 6 | * Content of the component. 7 | */ 8 | content?: React.ReactNode 9 | /** 10 | * Content of the subheader. 11 | */ 12 | subheader?: React.ReactNode 13 | /** 14 | * If true, the card will be expanded by default. 15 | * @default false 16 | */ 17 | defaultExpanded?: boolean 18 | /** 19 | * If true, the card will be expanded. 20 | */ 21 | expanded?: boolean 22 | /** 23 | * If true, the card can be expanded. 24 | * @deprecated Use `Card` component instead 25 | */ 26 | canExpand?: boolean 27 | /** 28 | * Callback fired on toggle. 29 | */ 30 | onToggle?: (event: React.SyntheticEvent, eventExpanded: boolean) => void 31 | } 32 | 33 | /** 34 | * 35 | * Demos: 36 | * 37 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/surfaces/collapse-card 38 | * 39 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/surfaces/collapse-card 40 | * 41 | * Material-UI components used: 42 | * 43 | * - Card: https://bit.dev/totalsoft_oss/react-mui/card 44 | * 45 | */ 46 | 47 | export default function CollapseCard(props: CollapseCardProps): JSX.Element 48 | -------------------------------------------------------------------------------- /src/components/data-display/typography/Typography.d.ts: -------------------------------------------------------------------------------- 1 | import { TypographyProps as MuiTypographyProps } from '@mui/material' 2 | 3 | export interface TypographyProps extends MuiTypographyProps { 4 | /** 5 | * The color of the text 6 | */ 7 | color?: 8 | | 'initial' 9 | | 'inherit' 10 | | 'primary' 11 | | 'secondary' 12 | | 'textPrimary' 13 | | 'textSecondary' 14 | | 'error' 15 | | 'primary.main' 16 | | 'secondary.main' 17 | | 'text.primary' 18 | | 'text.secondary' 19 | | 'error.main' 20 | /** 21 | * If provided, a text will appear on hover. 22 | */ 23 | tooltip?: React.ReactNode 24 | /** 25 | * Controls the text emphasis. Different font styles can be used individually or in combination 26 | */ 27 | emphasis?: 28 | | ('bold' | 'italic' | 'underline' | 'line-through' | 'overline') 29 | | ('bold' | 'italic' | 'underline' | 'line-through' | 'overline')[] 30 | } 31 | 32 | /** 33 | * Demos: 34 | * 35 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/data-display/typography 36 | * 37 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/data-display/typography 38 | * 39 | * Material-UI component used: 40 | * 41 | * - Typography: https://mui.com/api/typography 42 | * 43 | */ 44 | 45 | export default function Typography(props: TypographyProps): JSX.Element 46 | -------------------------------------------------------------------------------- /src/components/surfaces/accordion-list/AccordionList.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import PropTypes from 'prop-types' 3 | import Accordion from '@totalsoft_oss/rocket-ui.components.surfaces.accordion' 4 | 5 | const AccordionList = ({ content, canExpandAll = false, defaultExpanded, ...rest }) => { 6 | const [localActive, setLocalActive] = useState(defaultExpanded) 7 | const handleChange = panel => (_, expanded) => setLocalActive(expanded ? panel : -1) 8 | 9 | return ( 10 | <> 11 | {content?.map((prop, key) => { 12 | return ( 13 | 20 | ) 21 | })} 22 | 23 | ) 24 | } 25 | 26 | AccordionList.propTypes = { 27 | /** 28 | * Default expanded accordion. 29 | */ 30 | defaultExpanded: PropTypes.number, 31 | /** 32 | * @default false 33 | * If false, only one accordion at a time can be expanded 34 | */ 35 | canExpandAll: PropTypes.bool, 36 | /** 37 | * The content of accordion. 38 | */ 39 | content: PropTypes.arrayOf( 40 | PropTypes.shape({ 41 | title: PropTypes.string, 42 | details: PropTypes.node 43 | }) 44 | ).isRequired 45 | } 46 | 47 | export default AccordionList 48 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:jest/recommended'], 3 | env: { 4 | browser: true, 5 | es6: true, 6 | node: true 7 | }, 8 | parser: '@babel/eslint-parser', 9 | parserOptions: { 10 | requireConfigFile: false, 11 | babelOptions: { 12 | presets: ['@babel/preset-react'] 13 | }, 14 | ecmaFeatures: { 15 | experimentalObjectRestSpread: true, 16 | jsx: true 17 | }, 18 | sourceType: 'module', 19 | project: './tsconfig.json' 20 | }, 21 | overrides: [ 22 | { 23 | files: ['**/*.d.ts'], 24 | plugins: ['@typescript-eslint'], 25 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], 26 | parser: '@typescript-eslint/parser', 27 | parserOptions: { 28 | ecmaFeatures: { 29 | jsx: true 30 | }, 31 | sourceType: 'module' 32 | } 33 | } 34 | ], 35 | plugins: ['react', 'react-hooks', 'jest'], 36 | ignorePatterns: ['**/public'], 37 | rules: { 38 | indent: 0, 39 | 'linebreak-style': 0, 40 | quotes: 0, 41 | semi: 0, 42 | 'no-console': 0, 43 | 'no-debugger': 'warn', 44 | 'react-hooks/rules-of-hooks': 'error', 45 | 'react-hooks/exhaustive-deps': 'warn', 46 | 'no-unused-vars': [1, { args: 'after-used', argsIgnorePattern: '^_' }], 47 | 'react/jsx-no-bind': ['error', { ignoreRefs: true }] 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/components/surfaces/card-header/CardHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import MuiCardHeader from './CardHeaderStyles' 4 | import Box from '@mui/material/Box' 5 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 6 | import { isValidElement } from 'react' 7 | 8 | const CardHeader = ({ variant = 'standard', actions, title, ...rest }) => { 9 | return ( 10 | ( 15 | 16 | {a} 17 | 18 | )) 19 | : actions 20 | } 21 | disableTypography 22 | title={ 23 | title ? ( 24 | isValidElement(title) ? ( 25 | title 26 | ) : ( 27 | 28 | {title} 29 | 30 | ) 31 | ) : undefined 32 | } 33 | {...rest} 34 | /> 35 | ) 36 | } 37 | 38 | CardHeader.propTypes = { 39 | /** 40 | * @default 'standard' 41 | * Variant to use. 42 | */ 43 | variant: PropTypes.oneOf(['standard', 'filled']), 44 | /** 45 | * Actions to be displayed in the right corner of the card. If an array, will display all items with spacing between them. 46 | */ 47 | actions: PropTypes.node 48 | } 49 | 50 | export default CardHeader 51 | -------------------------------------------------------------------------------- /src/components/feedback/custom-dialog/CustomDialog.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { screen } from '@testing-library/react' 3 | import CustomDialog from './CustomDialog' 4 | import { text } from './mocks' 5 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 6 | 7 | const { render, userClick } = fns 8 | 9 | describe('DialogDisplay', () => { 10 | test('displays `yes` and `no` buttons by default', () => { 11 | render() 12 | expect(screen.getByText('Yes')).toBeInTheDocument() 13 | expect(screen.getByText('No')).toBeInTheDocument() 14 | }) 15 | 16 | test('X button is hidden by default', () => { 17 | render() 18 | expect(screen.queryByLabelText('Close')).not.toBeInTheDocument() 19 | }) 20 | 21 | test('calls onClose function when clicking the `no` button', () => { 22 | const mockOnClose = jest.fn(() => {}) 23 | 24 | render() 25 | userClick(screen.getByText('No')) 26 | 27 | expect(mockOnClose).toBeCalled() 28 | }) 29 | 30 | test(`doesn't close on backdrop click when disableBackdropClick = true`, () => { 31 | const mockOnClose = jest.fn(() => {}) 32 | 33 | render() 34 | userClick(screen.getByRole('dialog').parentElement) 35 | 36 | expect(mockOnClose).not.toBeCalled() 37 | }) 38 | }) 39 | -------------------------------------------------------------------------------- /src/components/inputs/dynamic-input/DynamicInput.d.ts: -------------------------------------------------------------------------------- 1 | export interface DynamicInputProps { 2 | /** 3 | * The type of control. 4 | */ 5 | controlType?: 'INT' | 'NUM' | 'STR' | 'CLST' | 'VCLST' | 'BOOL' 6 | /** 7 | * Callback fired when the value is changed. 8 | */ 9 | onChange: (input: unknown) => void 10 | /** 11 | * Used in `CLST` and `VCLST` control types. 12 | * Function that returns a promise, which resolves to the set of options to be used once the promise resolves. 13 | */ 14 | loadOptions?: (input: string) => Promise 15 | /** 16 | * The value of the `input` element, required for a controlled component. 17 | */ 18 | value?: unknown 19 | /** 20 | * @default TextField 21 | * The default component. 22 | */ 23 | DefaultComp?: (props: unknown) => JSX.Element 24 | /** 25 | * @default '{ fullWidth: true, disabled: true }' 26 | * The props of the default component. 27 | */ 28 | defaultCompProps?: unknown 29 | } 30 | /** 31 | * 32 | * Demos: 33 | * 34 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/inputs/dynamic-input 35 | * 36 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/inputs/dynamic-input 37 | * 38 | * Components used: 39 | * 40 | * - TextField: https://mui.com/api/text-field/ 41 | * - Switch: https://mui.com/api/switch/ 42 | * - Autocomplete: https://mui.com/api/autocomplete/ 43 | * 44 | */ 45 | export default function DynamicInput(props: DynamicInputProps): JSX.Element 46 | -------------------------------------------------------------------------------- /src/components/data-display/expanding-text/ExpandingText.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export interface ExpandingTextProps { 4 | /** 5 | * Text to be displayed. 6 | */ 7 | text: string 8 | /** 9 | * Length of text to be displayed. 10 | */ 11 | minLength?: number 12 | /** 13 | * @default 'Show less' 14 | * Text of `showLess` button. 15 | */ 16 | showLessText?: React.ReactNode 17 | /** 18 | * @default 'Show more' 19 | * Text of `showMore` button. 20 | */ 21 | showMoreText?: React.ReactNode 22 | /** 23 | * @default 'block' 24 | * CSS `display` prop applied to the text. 25 | */ 26 | display?: 'inline' | 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'none' 27 | /** 28 | * Props applied to the text. 29 | */ 30 | textProps?: object 31 | /** 32 | * Props applied to the button. 33 | */ 34 | buttonProps?: object 35 | /** 36 | * @default false 37 | * Expanded state of the text. 38 | */ 39 | expanded?: boolean 40 | } 41 | 42 | /** 43 | * 44 | * Demos: 45 | * 46 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/data-display/expanding-text 47 | * 48 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/data-display/expanding-text 49 | * 50 | * Bit components used: 51 | * 52 | * - Typography: https://bit.cloud/totalsoft_oss/rocket-ui/components/data-display/typography 53 | * 54 | */ 55 | 56 | export default function ExpandingText(props: ExpandingTextProps): JSX.Element 57 | -------------------------------------------------------------------------------- /src/components/themes/blueTheme.js: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@mui/material/styles' 2 | import componentsOverride from './common/overrides' 3 | import generatePalette from './common/palette' 4 | import { generateTypography } from './common/typography' 5 | import table from './common/table' 6 | import { generateShadows, generateCustomShadows } from './common/shadows' 7 | 8 | export const palette = generatePalette({ 9 | PRIMARY: { 10 | lighter: '#81b8f8', 11 | light: '#4c88c5', 12 | main: '#00497b', 13 | dark: '#003266', 14 | darker: '#000a3b', 15 | contrastText: '#fff', 16 | rgba: 'rgba(0, 91, 148, 1)' 17 | }, 18 | SECONDARY: { 19 | lighter: '#77a2dc', 20 | light: '#4574aa', 21 | main: '#005B94', 22 | dark: '#00224e', 23 | darker: '#000026', 24 | contrastText: '#fff', 25 | rgba: 'rgb(188 228 250)' 26 | }, 27 | BACKGROUND: { 28 | main: '#F5F8FA' 29 | }, 30 | SIDE_MENU: { 31 | bgColor: '#BCE4FA', 32 | color: '#00385F', 33 | hoverBgColor: '#DFF2FD', 34 | hoverTextColor: '#00385F', 35 | bgOpacity: '1', 36 | activeBgColor: '#00497b' 37 | }, 38 | WHITE: { 39 | main: '#fff', 40 | contrastText: '#00497b' 41 | } 42 | }) 43 | 44 | const blueTheme = createTheme({ 45 | palette, 46 | shape: { borderRadius: 8 }, 47 | typography: generateTypography(palette), 48 | table, 49 | shadows: generateShadows(palette), 50 | customShadows: generateCustomShadows(palette) 51 | }) 52 | 53 | blueTheme.components = componentsOverride(blueTheme) 54 | 55 | export default blueTheme 56 | -------------------------------------------------------------------------------- /src/components/themes/redTheme.js: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@mui/material/styles' 2 | import componentsOverride from './common/overrides' 3 | import generatePalette from './common/palette' 4 | import { generateTypography } from './common/typography' 5 | import table from './common/table' 6 | import { generateShadows, generateCustomShadows } from './common/shadows' 7 | 8 | export const palette = generatePalette({ 9 | PRIMARY: { 10 | lighter: '#9d9d9d', 11 | light: '#6f6f6f', 12 | main: '#444444', 13 | dark: '#1d1d1d', 14 | darker: '#000000', 15 | contrastText: '#fff', 16 | rgba: 'rgba(68, 68, 68, 1)' 17 | }, 18 | SECONDARY: { 19 | lighter: '#ff8d62', 20 | light: '#ff5a36', 21 | main: '#ff0000', 22 | dark: '#c20000', 23 | darker: '#890000', 24 | contrastText: '#fff', 25 | rgba: 'rgba(225, 25, 50, 1)' 26 | }, 27 | BACKGROUND: { 28 | main: '#ddd8d3' 29 | }, 30 | SIDE_MENU: { 31 | bgColor: '#fff', 32 | color: '#444444', 33 | hoverBgColor: 'transparent', 34 | hoverTextColor: '#ff0000', 35 | bgOpacity: '0.8', 36 | activeBgColor: '#ff0000' 37 | }, 38 | WHITE: { 39 | main: '#fff', 40 | contrastText: '#444444' 41 | } 42 | }) 43 | 44 | const redTheme = createTheme({ 45 | palette, 46 | shape: { borderRadius: 8 }, 47 | typography: generateTypography(palette), 48 | table, 49 | shadows: generateShadows(palette), 50 | customShadows: generateCustomShadows(palette) 51 | }) 52 | 53 | redTheme.components = componentsOverride(redTheme) 54 | 55 | export default redTheme 56 | -------------------------------------------------------------------------------- /src/components/themes/orangeTheme.js: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@mui/material/styles' 2 | import componentsOverride from './common/overrides' 3 | import generatePalette from './common/palette' 4 | import { generateTypography } from './common/typography' 5 | import table from './common/table' 6 | import { generateShadows, generateCustomShadows } from './common/shadows' 7 | 8 | export const palette = generatePalette({ 9 | PRIMARY: { 10 | lighter: '#b0b0b0', 11 | light: '#818181', 12 | main: '#555555', 13 | dark: '#2c2c2c', 14 | darker: '#000000', 15 | contrastText: '#fff', 16 | rgba: 'rgba(85, 85, 85, 1)' 17 | }, 18 | SECONDARY: { 19 | lighter: '#ffd170', 20 | light: '#ffa040', 21 | main: '#FF6F00', 22 | dark: '#c43e00', 23 | darker: '#8c0000', 24 | contrastText: '#fff', 25 | rgba: 'rgba(255, 111, 0)' 26 | }, 27 | BACKGROUND: { 28 | main: '#fff' 29 | }, 30 | SIDE_MENU: { 31 | bgColor: '#000', 32 | color: '#fff', 33 | hoverBgColor: 'rgba(200, 200, 200, 0.2)', 34 | hoverTextColor: '#fff', 35 | bgOpacity: '0.8', 36 | activeBgColor: '#FF6F00' 37 | }, 38 | WHITE: { 39 | main: '#fff', 40 | contrastText: '#555555' 41 | } 42 | }) 43 | 44 | const orangeTheme = createTheme({ 45 | palette, 46 | shape: { borderRadius: 8 }, 47 | typography: generateTypography(palette), 48 | table, 49 | shadows: generateShadows(palette), 50 | customShadows: generateCustomShadows(palette) 51 | }) 52 | 53 | orangeTheme.components = componentsOverride(orangeTheme) 54 | 55 | export default orangeTheme 56 | -------------------------------------------------------------------------------- /src/components/charts/chart/Chart.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Card from '@totalsoft_oss/rocket-ui.components.surfaces.card' 4 | import { Chart as BaseChart } from 'react-chartjs-2' 5 | import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement } from 'chart.js' 6 | import { StyledCardHeader, CardContent, iconStyle } from './ChartStyles' 7 | 8 | ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement) 9 | 10 | const Chart = ({ title, subheader, icon: Icon, iconColor, type, data, ...chartProps }) => { 11 | return ( 12 | 13 | } iconColor={iconColor} /> 14 | 15 | 16 | 17 | 18 | ) 19 | } 20 | 21 | Chart.propTypes = { 22 | /** 23 | * Chart title. 24 | */ 25 | title: PropTypes.node, 26 | /** 27 | * Chart subtitle. 28 | */ 29 | subheader: PropTypes.node, 30 | /** 31 | * Chart icon. 32 | */ 33 | icon: PropTypes.elementType, 34 | /** 35 | * Chart icon color. 36 | */ 37 | iconColor: PropTypes.string, 38 | /** 39 | * Chart type. 40 | */ 41 | type: PropTypes.string.isRequired, 42 | /** 43 | * Chart data. 44 | */ 45 | data: PropTypes.shape({ 46 | labels: PropTypes.array.isRequired, 47 | datasets: PropTypes.array.isRequired 48 | }) 49 | } 50 | 51 | export default Chart 52 | -------------------------------------------------------------------------------- /src/components/themes/lightBlueTheme.js: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@mui/material/styles' 2 | import componentsOverride from './common/overrides' 3 | import generatePalette from './common/palette' 4 | import { generateTypography } from './common/typography' 5 | import table from './common/table' 6 | import { generateShadows, generateCustomShadows } from './common/shadows' 7 | 8 | export const palette = generatePalette({ 9 | PRIMARY: { 10 | lighter: '#86adff', 11 | light: '#507ed1', 12 | main: '#00529f', 13 | dark: '#002b70', 14 | darker: '#000044', 15 | contrastText: '#fff', 16 | rgba: 'rgba(0, 82, 159, 1)' 17 | }, 18 | SECONDARY: { 19 | lighter: '#81b8f8', 20 | light: '#4c88c5', 21 | main: '#005B94', 22 | dark: '#003266', 23 | darker: '#000a3b', 24 | contrastText: '#fff', 25 | rgba: 'rgb(188 228 250)' 26 | }, 27 | BACKGROUND: { 28 | main: '#efeff8' 29 | }, 30 | SIDE_MENU: { 31 | bgColor: '#fff', 32 | color: '#00529f', 33 | hoverBgColor: '#DFF2FD', 34 | hoverTextColor: '#00529f', 35 | bgOpacity: '1', 36 | activeBgColor: '#00529f' 37 | }, 38 | WHITE: { 39 | main: '#fff', 40 | contrastText: '#00529f' 41 | } 42 | }) 43 | 44 | const lightBlueTheme = createTheme({ 45 | palette, 46 | shape: { borderRadius: 8 }, 47 | typography: generateTypography(palette), 48 | table, 49 | shadows: generateShadows(palette), 50 | customShadows: generateCustomShadows(palette) 51 | }) 52 | 53 | lightBlueTheme.components = componentsOverride(lightBlueTheme) 54 | 55 | export default lightBlueTheme 56 | -------------------------------------------------------------------------------- /src/components/themes/defaultTheme.js: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@mui/material/styles' 2 | import componentsOverride from './common/overrides' 3 | import generatePalette from './common/palette' 4 | import { generateTypography } from './common/typography' 5 | import table from './common/table' 6 | import { generateShadows, generateCustomShadows } from './common/shadows' 7 | 8 | export const palette = generatePalette({ 9 | PRIMARY: { 10 | lighter: '#b0b0b0', 11 | light: '#818181', 12 | main: '#555555', 13 | dark: '#2c2c2c', 14 | darker: '#000000', 15 | contrastText: '#fff', 16 | rgba: 'rgba(85, 85, 85, 1)' 17 | }, 18 | SECONDARY: { 19 | lighter: '#a8ffff', 20 | light: '#6ff9ff', 21 | main: '#26C6DA', 22 | dark: '#0095a8', 23 | darker: '#006779', 24 | contrastText: '#fff', 25 | rgba: 'rgba(38, 198, 218, 1)' 26 | }, 27 | BACKGROUND: { 28 | main: '#fff' 29 | }, 30 | SIDE_MENU: { 31 | bgColor: '#000', 32 | color: '#fff', 33 | hoverBgColor: 'rgba(200, 200, 200, 0.2)', 34 | hoverTextColor: '#fff', 35 | bgOpacity: '0.8', 36 | activeBgColor: '#26C6DA' 37 | }, 38 | WHITE: { 39 | main: '#fff', 40 | contrastText: '#555555' 41 | } 42 | }) 43 | 44 | const defaultTheme = createTheme({ 45 | palette, 46 | shape: { borderRadius: 8 }, 47 | typography: generateTypography(palette), 48 | table, 49 | shadows: generateShadows(palette), 50 | customShadows: generateCustomShadows(palette) 51 | }) 52 | 53 | defaultTheme.components = componentsOverride(defaultTheme) 54 | 55 | export default defaultTheme 56 | -------------------------------------------------------------------------------- /src/components/feedback/dialog-display/components/ActionsDialogDisplay.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Button from '@totalsoft_oss/rocket-ui.components.buttons.button' 4 | import DialogDisplay from '../DialogDisplay' 5 | import { title, text } from '../mocks' 6 | import TextField from '@mui/material/TextField' 7 | import Grid from '@mui/material/Grid' 8 | 9 | const ActionsDialogDisplay = props => { 10 | return ( 11 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | } 26 | actions={ 27 | <> 28 | 31 | 34 | 35 | } 36 | showX={false} 37 | disableBackdropClick={true} 38 | disableEscapeKeyDown={true} 39 | {...props} 40 | /> 41 | ) 42 | } 43 | 44 | ActionsDialogDisplay.propTypes = { 45 | onClose: PropTypes.func 46 | } 47 | 48 | export default ActionsDialogDisplay 49 | -------------------------------------------------------------------------------- /src/components/surfaces/card-header/CardHeader.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { screen } from '@testing-library/react' 3 | import Button from '@totalsoft_oss/rocket-ui.components.buttons.button' 4 | import CardHeader from './CardHeader' 5 | import { defaultTheme } from '@totalsoft_oss/rocket-ui.themes' 6 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 7 | 8 | const { render } = fns 9 | const theme = defaultTheme 10 | 11 | const title = 'Title' 12 | 13 | describe('CardHeader', () => { 14 | it('when variant is `filled`, has a grey background color', () => { 15 | render() 16 | expect(screen.getByText(title).parentElement.parentElement).toHaveStyle(`background-color: ${theme.palette.grey[200]}`) 17 | }) 18 | 19 | it('has `standard` variant by default', () => { 20 | render() 21 | expect(screen.getByText(title).parentElement.parentElement).not.toHaveStyle(`background-color: ${theme.palette.grey[200]}`) 22 | }) 23 | 24 | it('when `actions` is array, renders the item with spacing between them', () => { 25 | render(one, ]} />) 26 | expect(screen.getAllByRole('button').length).toBe(2) 27 | expect(screen.getByText('two').parentElement).toHaveStyle('margin-left: 8px') 28 | }) 29 | 30 | it('when `actions` is not an array, renders the node as it is', () => { 31 | render(one} />) 32 | expect(screen.getByRole('button')).toBeInTheDocument() 33 | }) 34 | }) 35 | -------------------------------------------------------------------------------- /src/components/themes/greenTheme.js: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@mui/material/styles' 2 | import componentsOverride from './common/overrides' 3 | import generatePalette from './common/palette' 4 | import { generateTypography } from './common/typography' 5 | import table from './common/table' 6 | import { generateShadows, generateCustomShadows } from './common/shadows' 7 | 8 | export const palette = generatePalette({ 9 | PRIMARY: { 10 | lighter: '#9dffd4', 11 | light: '#67eaa2', 12 | main: '#005604', 13 | dark: '#008647', 14 | darker: '#00581e', 15 | contrastText: '#fff', 16 | rgba: 'rgba(38, 198, 218, 1)' 17 | }, 18 | SECONDARY: { 19 | lighter: '#6db45f', 20 | light: '#3d8433', 21 | main: '#2ab773', 22 | dark: '#002c00', 23 | darker: '#003000', 24 | contrastText: '#fff', 25 | rgba: 'rgb(39 108 37)' 26 | }, 27 | BACKGROUND: { 28 | main: '#eff7f0' 29 | }, 30 | SIDE_MENU: { 31 | bgColor: '#7eb58b', 32 | color: '#005604', 33 | hoverBgColor: 'rgb(239,247,240, 0.5)', 34 | hoverTextColor: '#005604', 35 | bgOpacity: '0.8', 36 | focusBgColor: '#2a912f', 37 | activeBgColor: '#005604' 38 | }, 39 | WHITE: { 40 | main: '#fff', 41 | contrastText: '#005604' 42 | } 43 | }) 44 | 45 | const greenTheme = createTheme({ 46 | palette, 47 | shape: { borderRadius: 8 }, 48 | typography: generateTypography(palette), 49 | table, 50 | shadows: generateShadows(palette), 51 | customShadows: generateCustomShadows(palette) 52 | }) 53 | 54 | greenTheme.components = componentsOverride(greenTheme) 55 | 56 | export default greenTheme 57 | -------------------------------------------------------------------------------- /src/components/buttons/icon-button/RadioButtonSelect.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import FormControl from '@mui/material/FormControl' 4 | import FormLabel from '@mui/material/FormLabel' 5 | import RadioGroup from '@mui/material/RadioGroup' 6 | import FormControlLabel from '@mui/material/FormControlLabel' 7 | import Radio from '@mui/material/Radio' 8 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 9 | 10 | const RadioButtonSelect = ({ label, options, value, valueKey = 'id', labelKey = 'name', onSelect }) => { 11 | return ( 12 | 13 | 14 | 15 | {label} 16 | 17 | 18 | 19 | {options?.map(o => ( 20 | } 24 | label={{o[labelKey]}} 25 | onClick={onSelect} 26 | /> 27 | ))} 28 | 29 | 30 | ) 31 | } 32 | 33 | RadioButtonSelect.propTypes = { 34 | value: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string, PropTypes.bool]), 35 | label: PropTypes.string, 36 | options: PropTypes.array, 37 | valueKey: PropTypes.string, 38 | labelKey: PropTypes.string, 39 | onSelect: PropTypes.func 40 | } 41 | 42 | export default RadioButtonSelect 43 | -------------------------------------------------------------------------------- /src/components/feedback/loading-fake-text/LoadingFakeText.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Paper from '@mui/material/Paper' 4 | import Skeleton from '@mui/material/Skeleton' 5 | 6 | const LoadingFakeText = ({ lines = 1, onPaper = false, variant, animation = 'wave', ...props }) => { 7 | const defaultOrText = !variant || variant === 'text' 8 | 9 | const fakeText = ( 10 | <> 11 | {defaultOrText ? ( 12 | Array(lines) 13 | .fill() 14 | .map((_e, i) => { 15 | if (i % 2 == 0) return 16 | return 17 | }) 18 | ) : ( 19 | 20 | )} 21 | 22 | ) 23 | 24 | if (onPaper) { 25 | return {fakeText} 26 | } 27 | 28 | return fakeText 29 | } 30 | 31 | LoadingFakeText.propTypes = { 32 | /** 33 | * @default 1 34 | * The number of lines appearing. 35 | */ 36 | lines: PropTypes.number, 37 | /** 38 | * @default false 39 | * If true, the fake text will be drawn on a Paper. 40 | */ 41 | onPaper: PropTypes.bool, 42 | /** 43 | * @default 'text' 44 | * The shape of the loading fake text 45 | */ 46 | variant: PropTypes.oneOf(['text', 'circular', 'rectangular']), 47 | /** 48 | * The animation. If false, the animation effect is disabled 49 | * @default 'wave' 50 | */ 51 | animation: PropTypes.oneOf(['pulse', 'wave', false]) 52 | } 53 | 54 | export default LoadingFakeText 55 | -------------------------------------------------------------------------------- /src/components/navigation/nav-pills/components/RadioButtonSelect.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import FormControl from '@mui/material/FormControl' 4 | import FormLabel from '@mui/material/FormLabel' 5 | import RadioGroup from '@mui/material/RadioGroup' 6 | import FormControlLabel from '@mui/material/FormControlLabel' 7 | import Radio from '@mui/material/Radio' 8 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 9 | 10 | const RadioButtonSelect = ({ label, options, value, valueKey = 'id', labelKey = 'name', onSelect }) => { 11 | return ( 12 | 13 | 14 | 15 | {label} 16 | 17 | 18 | 19 | {options?.map(o => ( 20 | } 24 | label={{o[labelKey]}} 25 | onClick={onSelect} 26 | /> 27 | ))} 28 | 29 | 30 | ) 31 | } 32 | 33 | RadioButtonSelect.propTypes = { 34 | value: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string, PropTypes.bool]), 35 | label: PropTypes.string, 36 | options: PropTypes.array, 37 | valueKey: PropTypes.string, 38 | labelKey: PropTypes.string, 39 | onSelect: PropTypes.func 40 | } 41 | 42 | export default RadioButtonSelect 43 | -------------------------------------------------------------------------------- /src/components/feedback/forbidden/Forbidden.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { screen } from '@testing-library/react' 3 | import Forbidden from './Forbidden' 4 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 5 | 6 | const { render } = fns 7 | 8 | const forbiddenTextValue = 'You are banned from viewing this page!' 9 | const forbiddenTextDefault = 'Not allowed to see this page!' 10 | const forbiddenButtonTextValue = 'Go to page' 11 | const forbiddenButtonTextDefault = 'Go to main page' 12 | 13 | describe('Forbidden', () => { 14 | test('displays the text received through the forbiddenText prop', () => { 15 | render() 16 | 17 | expect(screen.getByText(forbiddenTextValue)).toBeInTheDocument() 18 | }) 19 | 20 | test('displays the text received through the forbiddenButtonText prop', () => { 21 | render() 22 | 23 | expect(screen.getByText(forbiddenButtonTextValue)).toBeInTheDocument() 24 | }) 25 | 26 | test('default text and default text of the button are in screen', async () => { 27 | render() 28 | const forbiddenText = await screen.findByText(forbiddenTextDefault) 29 | const forbiddenButtonText = await screen.findByText(forbiddenButtonTextDefault) 30 | 31 | expect(forbiddenText).toBeDefined() 32 | expect(forbiddenButtonText).toBeDefined() 33 | }) 34 | 35 | test('displays image on the screen', async () => { 36 | render() 37 | const forbiddenImage = screen.getByRole('img') 38 | 39 | expect(forbiddenImage).toHaveAttribute('alt', 'ForbiddenImage') 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /src/components/feedback/toast/useToast.js: -------------------------------------------------------------------------------- 1 | import { useCallback } from 'react' 2 | import { toast } from 'react-toastify' 3 | import { classes } from './ToastStyles' 4 | import cx from 'classnames' 5 | 6 | const useToast = () => { 7 | return useCallback( 8 | /** 9 | * 10 | * @param {String} message The text to be displayed 11 | * @param {('success'|'info'|'warning'|'error')} variant The type of the toast 12 | * @param {('Slide' | 'Bounce' | 'Zoom' | 'Flip')} transition The appearance effect 13 | * @param {('top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left')} position Where to be displayed on the page 14 | * @param {(Bool,Int)} autoClose Delay in ms to close the toast 15 | */ 16 | (message, variant, transition, position, autoClose = variant !== 'error') => { 17 | const toastClasses = cx({ 18 | [classes[variant]]: variant, 19 | [classes['default']]: true 20 | }) 21 | 22 | const options = { autoClose, transition, position, className: toastClasses } 23 | switch (variant) { 24 | case 'error': 25 | toast.error(message, { ...options, autoClose: false, closeOnClick: false, draggable: false }) 26 | break 27 | case 'info': 28 | toast.info(message, options) 29 | break 30 | case 'success': 31 | toast.success(message, options) 32 | break 33 | case 'warning': 34 | toast.warn(message, options) 35 | break 36 | default: 37 | toast(message, options) 38 | break 39 | } 40 | }, 41 | [] 42 | ) 43 | } 44 | 45 | export default useToast 46 | -------------------------------------------------------------------------------- /src/components/surfaces/card-actions/CardActions.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { screen } from '@testing-library/react' 3 | import Button from '@totalsoft_oss/rocket-ui.components.buttons.button' 4 | import CardActions from './CardActions' 5 | import { defaultTheme } from '@totalsoft_oss/rocket-ui.themes' 6 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 7 | 8 | const { render } = fns 9 | const theme = defaultTheme 10 | 11 | describe('CardActions', () => { 12 | it('when variant is `filled`, has a grey background color', () => { 13 | render( 14 | 15 | 16 | 17 | ) 18 | expect(screen.getByRole('button').parentElement).toHaveStyle(`background-color: ${theme.palette.grey[200]}`) 19 | }) 20 | 21 | it('has `standard` variant by default', () => { 22 | render( 23 | 24 | 25 | 26 | ) 27 | expect(screen.getByRole('button').parentElement).not.toHaveStyle(`background-color: ${theme.palette.grey[200]}`) 28 | }) 29 | 30 | it('displays actions on the left by default', () => { 31 | render( 32 | 33 | 34 | 35 | ) 36 | expect(screen.getByRole('button').parentElement).toHaveStyle(`justify-content: flex-start`) 37 | }) 38 | 39 | it('displays actions on the right when `align` is set to `right`', () => { 40 | render( 41 | 42 | 43 | 44 | ) 45 | expect(screen.getByRole('button').parentElement).toHaveStyle(`justify-content: flex-end`) 46 | }) 47 | }) 48 | -------------------------------------------------------------------------------- /src/components/inputs/simple-slider/SimpleSlider.d.ts: -------------------------------------------------------------------------------- 1 | import { SliderProps } from '@mui/material' 2 | 3 | export interface SimpleSliderProps extends Omit { 4 | /** 5 | * The value of the label. 6 | */ 7 | label?: string 8 | /** 9 | * Callback function that is fired when the slider's value changed. 10 | */ 11 | onChange?: (value: number) => void 12 | /** 13 | * If true, the component will take up the full width of its container. 14 | */ 15 | fullWidth?: boolean 16 | /** 17 | * If true, the error styles are applied. 18 | */ 19 | error?: boolean 20 | /** 21 | * The helper text content. 22 | */ 23 | helperText?: string 24 | /** 25 | * If true, the label is displayed as required. 26 | */ 27 | required?: boolean 28 | /** 29 | * The number of decimals to be displayed 30 | */ 31 | decimalScale?: number 32 | /** 33 | * Add thousand separators on number; single character string or boolean true 34 | */ 35 | thousandSeparator?: boolean | string 36 | /** 37 | * Character that separates decimals from integers. 38 | */ 39 | decimalSeparator?: string 40 | /** 41 | * If true, the slider limits will be displayed 42 | */ 43 | showSliderLimits?: boolean 44 | } 45 | 46 | /** 47 | * Demos: 48 | * 49 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/inputs/simple-slider 50 | * 51 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/inputs/simple-slider 52 | * 53 | * Material-UI component used: 54 | * 55 | * - Slider: https://mui.com/api/slider/ 56 | * 57 | */ 58 | 59 | export default function SimpleSlider(props: SimpleSliderProps): JSX.Element 60 | -------------------------------------------------------------------------------- /src/components/surfaces/stats-card/StatsCardStyles.js: -------------------------------------------------------------------------------- 1 | import MuiCardContent from '@mui/material/CardContent' 2 | import { styled } from '@mui/material/styles' 3 | import Card from '@totalsoft_oss/rocket-ui.components.surfaces.card' 4 | import CardHeader from '@totalsoft_oss/rocket-ui.components.surfaces.card-header' 5 | import CardActions from '@totalsoft_oss/rocket-ui.components.surfaces.card-actions' 6 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 7 | 8 | export const StyledCard = styled(Card)(({ theme }) => ({ 9 | display: 'inline-block', 10 | position: 'relative', 11 | width: '100%', 12 | margin: '25px 0', 13 | boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.14)', 14 | borderRadius: '6px', 15 | color: theme.palette.primary.main, 16 | background: '#fff', 17 | overflow: 'visible' 18 | })) 19 | 20 | export const StyledCardHeader = styled(CardHeader)(() => ({ 21 | paddingTop: '5px' 22 | })) 23 | 24 | export const CardContent = styled(MuiCardContent)(() => ({ 25 | textAlign: 'right', 26 | fontSize: '10px', 27 | paddingTop: '10px', 28 | padding: '2px 10px' 29 | })) 30 | 31 | export const StyledCardActions = styled(CardActions)(({ theme }) => ({ 32 | margin: '0 20px 10px', 33 | height: 'auto', 34 | padding: '2px 0 0 0', 35 | ...theme.typography.defaultFont 36 | })) 37 | 38 | export const CardTitle = styled(Typography)(({ theme }) => ({ 39 | marginBottom: '0', 40 | color: theme.palette.grey[500], 41 | margin: '0 0 5px' 42 | })) 43 | 44 | export const CardDescription = styled(Typography)(() => ({ 45 | margin: '0' 46 | })) 47 | 48 | export const iconStyle = { 49 | color: '#FFFFFF', 50 | width: '3rem', 51 | height: '3rem', 52 | margin: 'auto', 53 | padding: '2px' 54 | } 55 | -------------------------------------------------------------------------------- /src/components/inputs/autocomplete/Option.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState, useRef } from 'react' 2 | import PropTypes from 'prop-types' 3 | import Checkbox from '@mui/material/Checkbox' 4 | import Tooltip from '@mui/material/Tooltip' 5 | import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank' 6 | import CheckBoxIcon from '@mui/icons-material/CheckBox' 7 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 8 | import { Option as BaseOption } from './AutocompleteStyles' 9 | 10 | const Option = ({ optionLabel, createdLabel, selected, withCheckboxes, ...rest }) => { 11 | const optionRef = useRef(null) 12 | const [isOverflow, setIsOverflow] = useState(false) 13 | 14 | const label = createdLabel ? `${createdLabel} "${optionLabel}"` : optionLabel 15 | 16 | useEffect(() => { 17 | setIsOverflow(optionRef?.current?.scrollWidth > optionRef?.current?.clientWidth) 18 | }, []) 19 | 20 | return withCheckboxes ? ( 21 |
  • 22 | } 24 | checkedIcon={} 25 | style={{ marginRight: 8 }} 26 | checked={selected} 27 | /> 28 | {optionLabel} 29 |
    • 30 | ) : ( 31 | 32 |
  • 33 | 34 | {label} 35 | 36 |
    • 37 |     38 | ) 39 | } 40 | 41 | Option.propTypes = { 42 | optionLabel: PropTypes.string.isRequired, 43 | selected: PropTypes.bool, 44 | withCheckboxes: PropTypes.bool, 45 | createdLabel: PropTypes.string 46 | } 47 | 48 | export default Option 49 | -------------------------------------------------------------------------------- /src/components/navigation/pagination/Pagination.d.ts: -------------------------------------------------------------------------------- 1 | import { TablePaginationProps as MuiTablePaginationProps } from '@mui/material' 2 | import React from 'react' 3 | 4 | export interface PaginationProps extends Omit { 5 | /** 6 | * If the page is loading, this property is set to true 7 | */ 8 | loading?: boolean 9 | /** 10 | * The number of rows per page. This property is required. 11 | */ 12 | pageSize: number 13 | /** 14 | * Customize the rows per page label. 15 | * 16 | * @default 'Rows per page:' 17 | */ 18 | rowsPerPageText?: React.ReactNode 19 | /** 20 | * Customize the displayed rows label. 21 | * @default 'of' 22 | */ 23 | rowsOfText?: string 24 | /** 25 | * The function called on refresh. 26 | */ 27 | onRefresh?: () => void 28 | /** 29 | * Callback fired when the page is changed. 30 | * 31 | * @param {React.MouseEvent | null} event The event source of the callback. 32 | * @param {number} page The page selected. 33 | * @param {boolean} direction Direction for previous/next page (false for previous, true for next). 34 | */ 35 | onPageChange: (event: React.MouseEvent | null, page: number, direction: boolean) => void 36 | } 37 | 38 | /** 39 | * 40 | * Demos: 41 | * 42 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/navigation/pagination 43 | * 44 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/navigation/pagination 45 | * 46 | * Material-UI components used: 47 | * 48 | * - Autocomplete: https://mui.com/material-ui/api/table-pagination/ 49 | * 50 | */ 51 | 52 | export default function Pagination(props: PaginationProps): JSX.Element 53 | -------------------------------------------------------------------------------- /src/components/feedback/toast/ToastContainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { ToastContainer as ReactToastify, Slide, toast } from 'react-toastify' 4 | import Container, { classes } from './ToastStyles' 5 | import 'react-toastify/dist/ReactToastify.css' 6 | 7 | const ToastContainer = ({ 8 | position = toast.POSITION.TOP_CENTER, 9 | autoClose = 3000, 10 | newestOnTop = true, 11 | transition = Slide, 12 | limit = 5, 13 | ...rest 14 | }) => { 15 | return ( 16 | 17 | 26 | 27 | ) 28 | } 29 | 30 | ToastContainer.propTypes = { 31 | /** 32 | * Set the delay in ms to close the toast automatically. 33 | * Use `false` to prevent the toast from closing. 34 | * @default 3000 35 | */ 36 | autoClose: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]), 37 | /** 38 | * Limit the number of toast displayed at the same time 39 | * @default 5 40 | */ 41 | limit: PropTypes.number, 42 | /** 43 | * Set the position to use. 44 | * @default 'top-center' 45 | */ 46 | position: PropTypes.oneOf(['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']), 47 | /** 48 | * The appearance effect. 49 | * @default Slide 50 | */ 51 | transition: PropTypes.oneOf(['Slide', 'Bounce', 'Zoom', 'Flip']), 52 | /** 53 | * Whether or not to display the newest toast on top. 54 | * @default true 55 | */ 56 | newestOnTop: PropTypes.bool 57 | } 58 | 59 | export default ToastContainer 60 | -------------------------------------------------------------------------------- /src/components/surfaces/card/CardStyles.js: -------------------------------------------------------------------------------- 1 | import BaseCard from '@mui/material/Card' 2 | import MuiCardContent from '@mui/material/CardContent' 3 | import { styled } from '@mui/material/styles' 4 | import { includes } from 'ramda' 5 | 6 | export const iconStyle = { 7 | color: '#FFFFFF', 8 | width: '30px', 9 | height: '30px', 10 | margin: 'auto', 11 | padding: '2px' 12 | } 13 | 14 | const getThemeColor = (theme, color) => { 15 | switch (color) { 16 | case 'rose': 17 | return { background: theme.palette.gradients.rose, color: theme.palette.white.main } 18 | case 'success': 19 | return { background: theme.palette.gradients.success } 20 | case 'danger': 21 | return { background: theme.palette.gradients.danger } 22 | case 'primary': 23 | return { background: theme.palette.primary.main, color: theme.palette.white.main } 24 | case 'warning': 25 | return { background: theme.palette.gradients.warning } 26 | case 'info': 27 | return { background: theme.palette.gradients.info } 28 | default: 29 | return { color: theme.palette.primary.main } 30 | } 31 | } 32 | 33 | const Card = styled(BaseCard, { 34 | shouldForwardProp: prop => !includes(prop, ['hasIcon', 'iconColor']) 35 | })(({ theme, color, hasIcon }) => { 36 | return { 37 | ...getThemeColor(theme, color), 38 | ...(hasIcon && { 39 | display: 'inline-block', 40 | position: 'relative', 41 | width: '100%', 42 | margin: '25px 0', 43 | background: '#fff', 44 | overflow: 'visible' 45 | }) 46 | } 47 | }) 48 | 49 | export const CardContent = styled(MuiCardContent, { shouldForwardProp: prop => !includes(prop, ['variant']) })(({ variant }) => ({ 50 | ...(variant === 'standard' && { 51 | paddingTop: '8px' 52 | }) 53 | })) 54 | 55 | export default Card 56 | -------------------------------------------------------------------------------- /src/components/feedback/linear-progress/LinearProgress.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Box from '@mui/material/Box' 4 | import { LinearProgress as MuiLinearProgress, Label } from './LinearProgressStyles' 5 | import { isNil } from 'ramda' 6 | 7 | export default function LinearProgress({ color = 'grey', variant, value, valueBuffer, showLabel, labelProps, ...rest }) { 8 | return ( 9 | 10 | 11 | 12 | 13 | {showLabel && !isNil(value) && ( 14 | 15 | 16 | 17 | )} 18 | 19 | ) 20 | } 21 | 22 | LinearProgress.propTypes = { 23 | /** 24 | * @default 'grey' 25 | * Color of the component. 26 | */ 27 | color: PropTypes.oneOf(['primary', 'secondary', 'warning', 'error', 'success', 'info', 'rose', 'grey']), 28 | /** 29 | * If true it shows the progress indicator value (%). 30 | */ 31 | showLabel: PropTypes.bool, 32 | /** 33 | * Props applied to the label. 34 | */ 35 | labelProps: PropTypes.object, 36 | /** 37 | * Variant to use. Use indeterminate or query when there is no progress value. 38 | */ 39 | variant: PropTypes.oneOf(['determinate', 'indeterminate', 'buffer', 'query']), 40 | /** 41 | * Value of the progress indicator for the determinate and buffer variants. Value between 0 and 100. 42 | */ 43 | value: PropTypes.number, 44 | /** 45 | * Value for the buffer variant. Value between 0 and 100. 46 | */ 47 | valueBuffer: PropTypes.number 48 | } 49 | -------------------------------------------------------------------------------- /src/components/navigation/nav-pills/mocks.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CarRepairIcon from '@mui/icons-material/CarRepair' 3 | import PhoneIcon from '@mui/icons-material/Phone' 4 | import RocketIcon from '@mui/icons-material/Rocket' 5 | import ShieldMoonSharpIcon from '@mui/icons-material/ShieldMoonSharp' 6 | 7 | export const tabs = (withIcons, withText) => [ 8 | { 9 | label: withText && 'Item one', 10 | icon: withIcons ? : null, 11 | content: 'Content 1' 12 | }, 13 | { 14 | label: withText && 'Item two', 15 | icon: withIcons ? : null, 16 | content: 'Content 2' 17 | }, 18 | { 19 | label: withText && 'Item three', 20 | icon: withIcons ? : null, 21 | content: 'Content 3' 22 | }, 23 | { 24 | label: withText && 'Item four', 25 | icon: withIcons ? : null, 26 | content: 'Content 4' 27 | } 28 | ] 29 | 30 | export const orientationOptions = [{ name: 'horizontal' }, { name: 'vertical' }] 31 | export const iconPositionOptions = [{ name: 'start' }, { name: 'end' }, { name: 'top' }, { name: 'bottom' }] 32 | export const numericRadioOptions = [{ name: '1' }, { name: '2' }, { name: '3' }] 33 | export const colorOptions = ['primary', 'secondary', 'info', 'success', 'warning', 'error', 'rose', 'white', 'dark'] 34 | 35 | export const controlled = `function ControlledNavPills({tabs}) { 36 | const [active, setActive] = useState(0) 37 | 38 | const handleChange = (event, newValue) => { 39 | setActive(newValue) 40 | } 41 | 42 | return( 43 | 48 | ) 49 | ` 50 | 51 | export const uncontrolled = `function UncontrolledNavPills({tabs}) { 52 | return( 53 | 56 | ) 57 | ` 58 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/BUG_REPORT.yml: -------------------------------------------------------------------------------- 1 | name: Bug Report 🐛 2 | description: Create a bug report 3 | labels: ["bug", "triage"] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Thanks for taking the time to fill out this bug report! 9 | - type: checkboxes 10 | attributes: 11 | label: Latest version 12 | description: We roll bug fixes, performance enhancements, and other improvements into new releases. 13 | options: 14 | - label: I have tested the latest version 15 | required: true 16 | - type: textarea 17 | id: bug-description 18 | attributes: 19 | label: Current behavior 20 | description: Describe the current behavior. 21 | validations: 22 | required: true 23 | - type: textarea 24 | id: expected-behavior 25 | attributes: 26 | label: Expected behavior 27 | description: Describe what should happened. 28 | validations: 29 | required: true 30 | - type: textarea 31 | id: reproduction-steps 32 | attributes: 33 | label: Steps to reproduce 34 | description: Describe to us as concisely as possible what is happening. Add screenshots or a live example if possible. 35 | - type: textarea 36 | id: versions 37 | attributes: 38 | label: Software Version 39 | description: What is your environment? 40 | value: | 41 | 1. Bit: 42 | 2. Rocket-ui: 43 | 3. Material UI: 44 | 4. React: 45 | 5. NPM/YARN: 46 | validations: 47 | required: true 48 | - type: dropdown 49 | id: browsers 50 | attributes: 51 | label: What browsers are you seeing the problem on? 52 | multiple: true 53 | options: 54 | - Firefox 55 | - Chrome 56 | - Safari 57 | - Microsoft Edge 58 | -------------------------------------------------------------------------------- /src/components/navigation/side-menu/SideMenu.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'SideMenu component.' 3 | labels: ['mui', 'react', 'side-menu'] 4 | --- 5 | 6 | import CloudDownloadIcon from '@mui/icons-material/CloudDownload' 7 | import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser' 8 | import ListItemIcon from '@mui/material/ListItemIcon' 9 | import MenuList from '@mui/material/MenuList' 10 | import MenuItem from '@mui/material/MenuItem' 11 | import SideMenu from './SideMenu' 12 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 13 | 14 | ## Basic SideMenu component 15 | 16 | Basic example that renders a side-menu 17 | 18 | ### Component usage 19 | 20 | ```js 21 | 24 | 25 | 26 | 27 | 28 | {'Load template'} 29 | 30 | 31 | 32 | 33 | 34 | {'Export Yaml'} 35 | 36 | 37 | } 38 | /> 39 | ``` 40 | 41 | ### Use this live example to interact with SideMenu component 42 | 43 | Modify the text to see it change live: 44 | 45 | ```js live 46 | 49 | 50 | 51 | 52 | 53 | {'Load template'} 54 | 55 | 56 | 57 | 58 | 59 | {'Export Yaml'} 60 | 61 | 62 | } 63 | /> 64 | ``` 65 | -------------------------------------------------------------------------------- /src/components/inputs/password-field/PasswordField.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { screen, fireEvent, waitFor } from '@testing-library/react' 3 | import PasswordField from './PasswordField' 4 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 5 | 6 | const { render, userClick } = fns 7 | 8 | describe('PasswordField', () => { 9 | test('toggles show/hide icons', async () => { 10 | render() 11 | expect(screen.getByTestId('VisibilityOffIcon')).toBeInTheDocument() 12 | userClick(screen.getByRole('button')) 13 | await waitFor(() => expect(screen.getByTestId('VisibilityIcon')).toBeInTheDocument()) 14 | }) 15 | 16 | test('hides/displays text when toggling the show button', async () => { 17 | const text = 'password' 18 | render() 19 | const input = screen.getByDisplayValue(text) 20 | expect(input).toHaveAttribute('type', 'password') 21 | userClick(screen.getByRole('button')) 22 | await waitFor(() => expect(input).toHaveAttribute('type', 'text')) 23 | }) 24 | 25 | test('displays correct tooltip', async () => { 26 | render() 27 | 28 | fireEvent.mouseOver(screen.getByTestId('VisibilityOffIcon')) 29 | await waitFor(() => { 30 | expect(screen.getByText('Show password')).toBeInTheDocument() 31 | }) 32 | 33 | fireEvent.click(screen.getByRole('button')) 34 | 35 | fireEvent.mouseOver(screen.getByTestId('VisibilityIcon')) 36 | await waitFor(() => { 37 | expect(screen.getByText('Hide password')).toBeInTheDocument() 38 | }) 39 | }) 40 | 41 | test("doesn't display tooltip when disabled", async () => { 42 | render() 43 | fireEvent.mouseOver(screen.getByTestId('VisibilityOffIcon')) 44 | await waitFor(() => { 45 | expect(screen.queryByText('Show password')).not.toBeInTheDocument() 46 | }) 47 | }) 48 | }) 49 | -------------------------------------------------------------------------------- /src/components/surfaces/stats-card/StatsCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { StyledCard, CardContent, StyledCardActions, CardTitle, CardDescription, StyledCardHeader, iconStyle } from './StatsCardStyles' 4 | import Divider from '@mui/material/Divider' 5 | 6 | const StatsCard = ({ icon: Icon, iconColor = 'info', title, description, footer, variant, footerProps, headerProps }) => { 7 | return ( 8 | 9 | } hasIcon={true} iconColor={iconColor} {...headerProps} /> 10 | 11 | {title} 12 | {description} 13 | 14 | 15 | 16 | {footer} 17 | 18 | 19 | ) 20 | } 21 | 22 | StatsCard.propTypes = { 23 | /** 24 | * Icon to be displayed. 25 | */ 26 | icon: PropTypes.elementType, 27 | /** 28 | * @default 'info' 29 | * Icon color. 30 | */ 31 | iconColor: PropTypes.oneOf(['warning', 'primary', 'error', 'success', 'info', 'rose', 'grey', 'secondary']), 32 | /** 33 | * Content of the title. 34 | */ 35 | title: PropTypes.node, 36 | /** 37 | * Content of the description. 38 | */ 39 | description: PropTypes.node, 40 | /** 41 | * Footer to be displayed at the bottom of the card. 42 | */ 43 | footer: PropTypes.node, 44 | /** 45 | * Variant to use. 46 | */ 47 | variant: PropTypes.oneOf(['standard', 'filled']), 48 | /** 49 | * Props applied to the CardActions component. 50 | */ 51 | footerProps: PropTypes.object, 52 | /** 53 | * Props applied to the CardHeader component. 54 | */ 55 | headerProps: PropTypes.object 56 | } 57 | 58 | export default StatsCard 59 | -------------------------------------------------------------------------------- /src/components/buttons/button/Button.d.ts: -------------------------------------------------------------------------------- 1 | import { ButtonProps as MuiButtonProps } from '@mui/material' 2 | 3 | export interface ButtonProps extends Omit { 4 | /** 5 | * The color of the button. 6 | */ 7 | color?: 8 | | 'primary' 9 | | 'secondary' 10 | | 'info' 11 | | 'success' 12 | | 'warning' 13 | | 'error' 14 | | 'rose' 15 | | 'default' 16 | | 'white' 17 | | 'dark' 18 | | 'transparent' 19 | | 'inherit' 20 | /** 21 | * If true, rounded corners are enabled. 22 | */ 23 | round?: boolean 24 | /** 25 | * If true, the button's min width will be set to 160px. 26 | */ 27 | wd?: boolean 28 | /** 29 | * If true, the button will be smaller. 30 | */ 31 | justIcon?: boolean 32 | /** 33 | * If true, the button will float to the right. 34 | */ 35 | right?: boolean 36 | /** 37 | * The size of the button. 38 | */ 39 | size?: 'tiny' | 'small' | 'medium' | 'large' 40 | /** 41 | * The tooltip of the button. 42 | */ 43 | tooltip?: string 44 | /** 45 | * If true, button is in loading state. 46 | */ 47 | loading?: boolean 48 | /** 49 | * @default true 50 | * If true, button text is capitalized. 51 | */ 52 | capitalize?: boolean 53 | /** 54 | * If true, a gradient background is applied. 55 | */ 56 | gradient?: boolean 57 | } 58 | 59 | /** 60 | * 61 | * Demos: 62 | * 63 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/buttons/button 64 | * 65 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/buttons/button 66 | * 67 | * Material-UI components used: 68 | * 69 | * - Button: https://mui.com/material-ui/api/button/ 70 | * - LoadingButton: https://mui.com/material-ui/api/loading-button/ 71 | * 72 | */ 73 | 74 | export default function Button(props: ButtonProps): JSX.Element 75 | -------------------------------------------------------------------------------- /src/components/navigation/nav-pills/NavPillsStyles.js: -------------------------------------------------------------------------------- 1 | import MuiTab from '@mui/material/Tab' 2 | import MuiTabs from '@mui/material/Tabs' 3 | import { styled } from '@mui/material/styles' 4 | import { includes } from 'ramda' 5 | 6 | const localTabsOverriddenProps = ['indicatorColor', 'color', 'selectedColor'] 7 | export const Tabs = styled(MuiTabs, { shouldForwardProp: prop => !includes(prop, localTabsOverriddenProps) })( 8 | ({ theme, color, indicatorColor }) => { 9 | const defaultFont = theme.typography.defaultFont 10 | 11 | return { 12 | ...defaultFont, 13 | '& .MuiTabs-indicator': { 14 | borderRadius: '0.5rem', 15 | backgroundColor: color ? theme.palette[color].main : theme.palette[indicatorColor].main 16 | } 17 | } 18 | } 19 | ) 20 | 21 | const localTabOverriddenProps = ['color', 'capitalize', 'selectedColor', 'gradient'] 22 | export const Tab = styled(MuiTab, { shouldForwardProp: prop => !includes(prop, localTabOverriddenProps) })( 23 | ({ theme, selectedColor, color, capitalize, gradient }) => { 24 | const defaultFont = theme.typography.defaultFont 25 | return { 26 | ...defaultFont, 27 | maxWidth: 'unset', 28 | minWidth: 'unset', 29 | minHeight: 'unset', 30 | margin: 5, 31 | fontWeight: theme.typography.fontWeightBold, 32 | ...(!capitalize && { 33 | textTransform: 'none' 34 | }), 35 | '&.MuiTab-root': { 36 | color: theme?.palette[color]?.main 37 | }, 38 | '&.Mui-selected': { 39 | transition: 'all 500ms linear 1ms', 40 | marginBottom: 5, 41 | borderRadius: Number(theme.shape.borderRadius) * 1.5, 42 | 43 | backgroundColor: color ? theme?.palette[color]?.main : 'transparent', 44 | color: color ? theme?.palette[color]?.contrastText : theme?.palette[selectedColor]?.main, 45 | ...(gradient && { 46 | background: theme.palette.gradients[color] 47 | }) 48 | } 49 | } 50 | } 51 | ) 52 | -------------------------------------------------------------------------------- /src/components/surfaces/collapse-card/CollapseCard.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Collapse Card component.' 3 | labels: ['mui', 'react', 'collapse-card'] 4 | --- 5 | 6 | import CollapseCard from './CollapseCard' 7 | import Button from '@totalsoft_oss/rocket-ui.components.buttons.button' 8 | import IconButton from '@totalsoft_oss/rocket-ui.components.buttons.icon-button' 9 | import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography' 10 | import QuestionMarkIcon from '@mui/icons-material/QuestionMark' 11 | import Box from '@mui/material/Box' 12 | import Grid from '@mui/material/Grid' 13 | 14 | ## Basic CollapseCard component 15 | 16 | Basic example that renders an collapse-card 17 | 18 | ### Component usage 19 | 20 | ```js 21 | 25 | 26 | 27 | } 28 | content={ 29 | 30 | 31 | Please, fill in with your personal information. 32 | 33 | 34 | } 35 | /> 36 | ``` 37 | 38 | ### Use this live example to interact with CollapseCard component 39 | 40 | Live example: 41 | 42 | ```js live 43 | 47 | 48 | 49 | } 50 | content={ 51 | <> 52 | 53 | 54 | Please, fill in with your personal information. 55 | 56 | 57 | 58 | 61 | 62 | 63 | } 64 | /> 65 | ``` 66 | -------------------------------------------------------------------------------- /src/components/data-display/typography/Typography.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { fireEvent, screen } from '@testing-library/react' 3 | import Typography from './Typography' 4 | import { defaultTheme } from '@totalsoft_oss/rocket-ui.themes' 5 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 6 | 7 | const { render } = fns 8 | const theme = defaultTheme 9 | 10 | const typographyText = 'This is a typography' 11 | const tooltipText = 'This is a tooltip' 12 | 13 | describe('Typography', () => { 14 | test('uses the font family from the theme', () => { 15 | render({typographyText}) 16 | 17 | expect(screen.getByText(typographyText)).toHaveStyle(`font-family: ${theme.typography.fontFamily}`) 18 | }) 19 | 20 | test('displays a tooltip on hover when provided', async () => { 21 | render({typographyText}) 22 | fireEvent.mouseOver(screen.getByText(typographyText)) 23 | 24 | const tooltip = await screen.findByText(tooltipText) 25 | expect(tooltip).toBeDefined() 26 | }) 27 | 28 | test('applies the correct emphasis', async () => { 29 | render({typographyText}) 30 | expect(screen.getByText(typographyText)).toHaveStyle('font-weight: bold') 31 | }) 32 | 33 | test('can combine emphases', async () => { 34 | render({typographyText}) 35 | const typography = screen.getByText(typographyText) 36 | 37 | expect(typography).toHaveStyle('font-weight: bold') 38 | expect(typography).toHaveStyle('font-style: italic') 39 | }) 40 | 41 | test('allows multiple text decorations', async () => { 42 | render( 43 | 44 | {typographyText} 45 | 46 | ) 47 | expect(screen.getByText(typographyText)).toHaveStyle('text-decoration: overline line-through') 48 | }) 49 | }) 50 | -------------------------------------------------------------------------------- /src/components/charts/stats-chart/mocks.js: -------------------------------------------------------------------------------- 1 | export const statsChartOptions = { 2 | responsive: true, 3 | maintainAspectRatio: false, 4 | barPercentage: 0.2, 5 | plugins: { 6 | title: { 7 | display: false, 8 | text: '' 9 | }, 10 | legend: { 11 | display: false, 12 | position: 'bottom' 13 | } 14 | }, 15 | layout: { 16 | padding: { 17 | left: 0, 18 | right: 20, 19 | top: 20, 20 | bottom: 0 21 | } 22 | }, 23 | scales: { 24 | x: { 25 | offset: false, 26 | grid: { 27 | display: true, 28 | color: 'white', 29 | borderDash: [1, 5], 30 | zeroLineColor: 'rgb(255,255,255)', 31 | drawBorder: false, 32 | zeroLineWidth: 0 33 | }, 34 | scaleLabel: { 35 | display: false, 36 | labelString: '', 37 | fontColor: 'black' 38 | }, 39 | ticks: { 40 | color: 'white', 41 | autoSkip: false 42 | } 43 | }, 44 | y: { 45 | grid: { 46 | display: true, 47 | color: 'white', 48 | borderDash: [1, 5], 49 | zeroLineColor: 'rgb(255,255,255)', 50 | drawBorder: false, 51 | zeroLineBorderDash: [1, 5] 52 | }, 53 | scaleLabel: { 54 | display: false, 55 | labelString: '', 56 | fontColor: 'black' 57 | }, 58 | ticks: { 59 | color: 'white' 60 | } 61 | } 62 | } 63 | } 64 | 65 | const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'] 66 | 67 | export const statsChartData = { 68 | labels, 69 | datasets: [ 70 | { 71 | data: labels.map(() => Math.floor(Math.random() * 101)), 72 | label: 'Dataset 1', 73 | backgroundColor: 'white', 74 | borderColor: 'white' 75 | }, 76 | { 77 | data: labels.map(() => Math.floor(Math.random() * 101)), 78 | label: 'Dataset 2', 79 | backgroundColor: 'white', 80 | borderColor: 'white' 81 | } 82 | ] 83 | } 84 | -------------------------------------------------------------------------------- /src/components/navigation/side-menu/SideMenuStyles.js: -------------------------------------------------------------------------------- 1 | import { styled } from '@mui/material/styles' 2 | 3 | export const SideMenuWrapper = styled('div')(() => ({ 4 | position: 'fixed', 5 | top: '180px', 6 | right: 0, 7 | width: '44px', 8 | height: '38px', 9 | background: 'rgba(0, 0, 0, 0.3)', 10 | borderRadius: '8px 0 0 8px', 11 | textAlign: 'center' 12 | })) 13 | 14 | export const SideMenuButton = styled('div')(({ theme }) => ({ 15 | position: 'fixed', 16 | top: '180px', 17 | right: 0, 18 | width: '44px', 19 | height: '38px', 20 | background: theme.palette.grey[500_24], 21 | borderRadius: '8px 0 0 8px', 22 | textAlign: 'center', 23 | display: 'flex', 24 | justifyContent: 'center', 25 | '&:hover': { 26 | outline: 'none', 27 | backgroundColor: theme.palette.grey[500_32], 28 | boxShadow: 'none', 29 | cursor: 'pointer' 30 | } 31 | })) 32 | 33 | export const SideMenuContent = styled('div', { shouldForwardProp: prop => prop !== 'show' })(({ show, theme }) => ({ 34 | position: 'absolute', 35 | top: '8px', 36 | right: '60px', 37 | display: show ? 'block' : 'none', 38 | minWidth: '160px', 39 | minHeight: '80px', 40 | backgroundColor: `#fff`, 41 | opacity: show ? 1 : 0, 42 | border: `1px solid ${theme.palette.grey[500]}`, 43 | borderRadius: '4px', 44 | WebkitBoxShadow: theme.customShadows.z1, 45 | WebkitTransform: 'translateY(-15%)', 46 | transformOrigin: '0 0', 47 | margin: '5px', 48 | padding: '10px', 49 | '&:before, &:after': { 50 | content: '""', 51 | display: 'inline-block', 52 | position: 'absolute', 53 | top: '8%' 54 | }, 55 | '&:before': { 56 | borderBottom: '16px solid transparent', 57 | borderLeft: `16px solid ${theme.palette.grey[500]}`, 58 | borderTop: '16px solid transparent', 59 | right: '-17px' 60 | }, 61 | '&:after': { 62 | borderBottom: '16px solid transparent', 63 | borderLeft: '16px solid #fff', 64 | borderTop: '16px solid transparent', 65 | right: '-16px' 66 | } 67 | })) 68 | -------------------------------------------------------------------------------- /src/components/navigation/side-menu/SideMenu.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useRef, useState } from 'react' 2 | import { SideMenuWrapper, SideMenuButton, SideMenuContent } from './SideMenuStyles' 3 | import PropTypes from 'prop-types' 4 | import MenuOpenIcon from '@mui/icons-material/MenuOpen' 5 | 6 | const SideMenu = ({ icon, content, buttonProps, contentProps, iconProps }) => { 7 | const [show, setShow] = useState(false) 8 | const sideMenuRef = useRef() 9 | 10 | const handleClickOutside = useCallback(e => { 11 | if (sideMenuRef.current && !sideMenuRef.current.contains(e.target)) { 12 | setShow(false) 13 | } 14 | }, []) 15 | 16 | const handleButtonClick = useCallback(() => { 17 | setShow(current => !current) 18 | }, []) 19 | 20 | useEffect(() => { 21 | document.addEventListener('mousedown', handleClickOutside) 22 | return () => { 23 | document.removeEventListener('mousedown', handleClickOutside) 24 | } 25 | }, [handleClickOutside]) 26 | 27 | const Icon = icon ? icon : MenuOpenIcon 28 | 29 | return ( 30 | 31 | 32 | 33 | 34 | 35 | {content} 36 | 37 | 38 | ) 39 | } 40 | 41 | SideMenu.propTypes = { 42 | /** 43 | * Content of the menu 44 | */ 45 | content: PropTypes.node, 46 | /** 47 | * @default MenuOpenIcon 48 | * Icon to be displayed on the button 49 | */ 50 | icon: PropTypes.object, 51 | /** 52 | * Props applied to the button 53 | */ 54 | buttonProps: PropTypes.object, 55 | /** 56 | * Props applied to the content 57 | */ 58 | contentProps: PropTypes.object, 59 | /** 60 | * Props applied to the icon 61 | */ 62 | iconProps: PropTypes.object 63 | } 64 | 65 | export default SideMenu 66 | -------------------------------------------------------------------------------- /src/components/charts/chart/mocks.js: -------------------------------------------------------------------------------- 1 | export const chartOptions = { 2 | maintainAspectRatio: false, 3 | barPercentage: 0.2, 4 | plugins: { 5 | title: { 6 | display: false, 7 | text: '' 8 | }, 9 | legend: { 10 | display: false, 11 | position: 'bottom' 12 | } 13 | }, 14 | layout: { 15 | padding: { 16 | left: 0, 17 | right: 20, 18 | top: 20, 19 | bottom: 0 20 | } 21 | }, 22 | scales: { 23 | x: { 24 | offset: false, 25 | grid: { 26 | display: true, 27 | borderDash: [1, 5], 28 | zeroLineColor: 'rgb(255,255,255)', 29 | drawBorder: false, 30 | zeroLineWidth: 0 31 | }, 32 | scaleLabel: { 33 | display: false, 34 | labelString: '' 35 | }, 36 | ticks: { 37 | autoSkip: false 38 | } 39 | }, 40 | y: { 41 | grid: { 42 | display: true, 43 | borderDash: [1, 5], 44 | zeroLineColor: 'rgb(255,255,255)', 45 | drawBorder: false, 46 | zeroLineBorderDash: [1, 5] 47 | }, 48 | scaleLabel: { 49 | display: false, 50 | labelString: '' 51 | } 52 | } 53 | } 54 | } 55 | 56 | const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'] 57 | 58 | export const lineChartData = { 59 | labels, 60 | datasets: [ 61 | { 62 | data: labels.map(() => Math.floor(Math.random() * 101)), 63 | label: 'Line', 64 | borderColor: '#FF0000' 65 | }, 66 | { 67 | data: labels.map(() => Math.floor(Math.random() * 101)), 68 | label: 'Line2', 69 | borderColor: '#0400ff' 70 | } 71 | ] 72 | } 73 | 74 | export const barChartData = { 75 | labels, 76 | datasets: [ 77 | { 78 | data: labels.map(() => Math.floor(Math.random() * 101)), 79 | label: 'Bar', 80 | backgroundColor: '#FF0000' 81 | }, 82 | { 83 | data: labels.map(() => Math.floor(Math.random() * 101)), 84 | label: 'Bar2', 85 | backgroundColor: '#0400ff' 86 | } 87 | ] 88 | } 89 | -------------------------------------------------------------------------------- /src/components/feedback/not-found/NotFound.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { screen } from '@testing-library/react' 3 | import { text, details } from './mocks' 4 | import NotFound from './NotFound' 5 | import { defaultTheme } from '@totalsoft_oss/rocket-ui.themes' 6 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 7 | 8 | const { render } = fns 9 | const theme = defaultTheme 10 | const defaultFont = theme.typography.defaultFont 11 | 12 | describe('NotFound', () => { 13 | test('displays not found message when page does not exist', () => { 14 | render() 15 | expect(screen.getByText(text)).toBeDefined() 16 | expect(screen.getByText(details)).toBeDefined() 17 | }) 18 | 19 | test('uses the correct color for not found', () => { 20 | render() 21 | expect(screen.getByText(text)).toHaveStyle(`color: ${'defaultTheme.palette.timColors.greyColor'}`) 22 | expect(screen.getByText(details)).toHaveStyle(`color: ${'defaultTheme.palette.timColors.greyColor'}`) 23 | }) 24 | 25 | test('uses the correct font weight for not found', () => { 26 | render() 27 | expect(screen.getByText(text)).toHaveStyle('font-weight: bold') 28 | }) 29 | 30 | test('uses the correct position for not found', () => { 31 | render() 32 | expect(screen.getByText(text)).toHaveStyle('text-align: center') 33 | }) 34 | 35 | test('not found content in screen', () => { 36 | render() 37 | expect(screen.getByText(text)).toBeInTheDocument() 38 | expect(screen.getByText(details)).toBeInTheDocument() 39 | }) 40 | 41 | test('font family of the text and details is taken from default font', () => { 42 | render() 43 | expect(screen.getByText(text)).toHaveStyle(`font-family: ${defaultFont.fontFamily}`) 44 | expect(screen.getByText(details)).toHaveStyle(`font-family: ${defaultFont.fontFamily}`) 45 | }) 46 | }) 47 | -------------------------------------------------------------------------------- /src/components/buttons/upload-button/uploadButtonValidators.js: -------------------------------------------------------------------------------- 1 | import accepts from 'attr-accept' 2 | import { curry, filter, flip, gt, gte, isEmpty, lt, lte, map, not, pipe, prop, sum } from 'ramda' 3 | 4 | const verifiedFileType = curry(flip(accepts)) 5 | const invalidFileType = curry(pipe(verifiedFileType, not)) 6 | 7 | const getSize = prop('size') 8 | const totalSize = pipe(map(getSize), sum) 9 | 10 | const biggerItems = curry((maxItemSize, file) => lt(maxItemSize, getSize(file))) 11 | const smallerItems = curry((minItemSize, file) => gt(minItemSize, getSize(file))) 12 | 13 | export const validFileTypes = curry((onError, accept, files) => { 14 | const badFiles = filter(invalidFileType(accept), files) 15 | if (isEmpty(badFiles)) return true 16 | onError && onError({ message: 'Bad file type', files: badFiles }) 17 | return false 18 | }) 19 | 20 | export const validMaxTotalSize = curry((onError, maxTotalSize, files) => { 21 | const totalFileSize = totalSize(files) 22 | if (gte(maxTotalSize, totalFileSize)) return true 23 | onError && onError({ message: 'Total size exceeded', totalFileSize }) 24 | return false 25 | }) 26 | 27 | export const validMaxItemSize = curry((onError, maxItemSize, files) => { 28 | const badFiles = filter(biggerItems(maxItemSize), files) 29 | if (isEmpty(badFiles)) return true 30 | onError && onError({ message: 'File size exceeded', files: badFiles }) 31 | return false 32 | }) 33 | 34 | export const validMinTotalSize = curry((onError, minTotalSize, files) => { 35 | const totalFileSize = totalSize(files) 36 | if (lte(minTotalSize, totalFileSize)) return true 37 | onError && onError({ message: 'Total size too small', totalFileSize }) 38 | return false 39 | }) 40 | 41 | export const validMinItemSize = curry((onError, minItemSize, files) => { 42 | const badFiles = filter(smallerItems(minItemSize), files) 43 | if (isEmpty(badFiles)) return true 44 | onError && onError({ message: 'File size too small', files: badFiles }) 45 | return false 46 | }) 47 | 48 | export default { validFileTypes, validMaxItemSize, validMaxTotalSize, validMinItemSize, validMinTotalSize } 49 | -------------------------------------------------------------------------------- /src/components/buttons/icon-button/IconButton.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import IconButton from './IconButton' 3 | import { screen, waitFor, fireEvent } from '@testing-library/react' 4 | 5 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 6 | 7 | const { render, userClick } = fns 8 | 9 | const customButtonTypes = [ 10 | { 11 | type: 'add', 12 | testId: 'AddIcon' 13 | }, 14 | { type: 'cancel', testId: 'CancelIcon' }, 15 | { 16 | type: 'delete', 17 | testId: 'DeleteIcon' 18 | }, 19 | { 20 | type: 'download', 21 | testId: 'CloudDownloadIcon' 22 | }, 23 | { 24 | type: 'downward', 25 | testId: 'ArrowDownwardIcon' 26 | }, 27 | { 28 | type: 'edit', 29 | testId: 'EditIcon' 30 | }, 31 | { 32 | type: 'view', 33 | testId: 'VisibilityIcon' 34 | }, 35 | { 36 | type: 'save', 37 | testId: 'SaveIcon' 38 | }, 39 | { 40 | type: 'upward', 41 | testId: 'ArrowUpwardIcon' 42 | } 43 | ] 44 | 45 | describe('Custom icon buttons', () => { 46 | it.each(customButtonTypes)("displays the correct icon for type = { '$type' }", ({ type, testId }) => { 47 | render() 48 | expect(screen.getByTestId(testId)).toBeInTheDocument() 49 | }) 50 | }) 51 | 52 | describe('Disabled icon button', () => { 53 | it("doesn't call onClick", async () => { 54 | const mockOnClick = jest.fn() 55 | render() 56 | userClick(screen.getByRole('button')) 57 | 58 | await waitFor(() => { 59 | expect(mockOnClick).not.toBeCalledWith() 60 | }) 61 | }) 62 | 63 | it('displays tooltip when disabled', async () => { 64 | render() 65 | fireEvent.mouseOver(screen.getByRole('button')) 66 | await waitFor(() => { 67 | expect(screen.getByText('tooltip')).toBeInTheDocument() 68 | }) 69 | }) 70 | }) 71 | 72 | describe('Loading button', () => { 73 | it('renders a progress bar when loading = { true }', () => { 74 | render() 75 | expect(screen.getByRole('progressbar')).toBeInTheDocument() 76 | }) 77 | }) 78 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Bit 2 | .bit 3 | public 4 | 5 | # Logs 6 | logs 7 | *.log 8 | npm-debug.log* 9 | yarn-debug.log* 10 | yarn-error.log* 11 | lerna-debug.log* 12 | 13 | # Diagnostic reports (https://nodejs.org/api/report.html) 14 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 15 | 16 | # Runtime data 17 | pids 18 | *.pid 19 | *.seed 20 | *.pid.lock 21 | 22 | # Directory for instrumented libs generated by jscoverage/JSCover 23 | lib-cov 24 | 25 | # Coverage directory used by tools like istanbul 26 | coverage 27 | *.lcov 28 | 29 | # nyc test coverage 30 | .nyc_output 31 | 32 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 33 | .grunt 34 | 35 | # Bower dependency directory (https://bower.io/) 36 | bower_components 37 | 38 | # node-waf configuration 39 | .lock-wscript 40 | 41 | # Compiled binary addons (https://nodejs.org/api/addons.html) 42 | build/Release 43 | 44 | # Dependency directories 45 | node_modules/ 46 | jspm_packages/ 47 | 48 | # TypeScript v1 declaration files 49 | typings/ 50 | 51 | # TypeScript cache 52 | *.tsbuildinfo 53 | 54 | # Optional npm cache directory 55 | .npm 56 | 57 | # Optional eslint cache 58 | .eslintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variables file 76 | .env 77 | .env.test 78 | 79 | # parcel-bundler cache (https://parceljs.org/) 80 | .cache 81 | 82 | # Next.js build output 83 | .next 84 | 85 | # Nuxt.js build / generate output 86 | .nuxt 87 | dist 88 | 89 | # Gatsby files 90 | .cache/ 91 | 92 | # vuepress build output 93 | .vuepress/dist 94 | 95 | # Serverless directories 96 | .serverless/ 97 | 98 | # FuseBox cache 99 | .fusebox/ 100 | 101 | # DynamoDB Local files 102 | .dynamodb/ 103 | 104 | # TernJS port file 105 | .tern-port 106 | 107 | .history 108 | 109 | .DS_Store 110 | 111 | node_modules 112 | .github 113 | dist 114 | .vscode 115 | -------------------------------------------------------------------------------- /src/components/feedback/loading-fake-text/LoadingFakeText.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { screen } from '@testing-library/react' 3 | import LoadingFakeText from './LoadingFakeText' 4 | import fns from '@totalsoft_oss/rocket-ui.utils.test-wrapper' 5 | 6 | const { render } = fns 7 | 8 | describe('Loading fake text', () => { 9 | test('applies the correct variant (text)', () => { 10 | render() 11 | expect(screen.getByTestId('skeleton')).toHaveClass(`MuiSkeleton-text`) 12 | }) 13 | 14 | test('applies the correct variant (circular)', () => { 15 | render() 16 | expect(screen.getByTestId('skeleton')).toHaveClass(`MuiSkeleton-circular`) 17 | }) 18 | 19 | test('applies the correct animation (wave)', () => { 20 | render() 21 | expect(screen.getByTestId('skeleton')).toHaveClass(`MuiSkeleton-wave`) 22 | }) 23 | 24 | test('applies the correct animation (pulse)', () => { 25 | render() 26 | expect(screen.getByTestId('skeleton')).toHaveClass(`MuiSkeleton-pulse`) 27 | }) 28 | 29 | test('renders the correct number of lines', () => { 30 | render() 31 | expect(screen.getAllByTestId('skeleton')).toHaveLength(10) 32 | }) 33 | 34 | test('by default it renders only one line', () => { 35 | render() 36 | expect(screen.getAllByTestId('skeleton')).toHaveLength(1) 37 | }) 38 | 39 | test('it renders on paper if onPaper is set to true', () => { 40 | render() 41 | expect(screen.getByTestId('skeleton').parentNode).toHaveClass('MuiPaper-root') 42 | }) 43 | 44 | test('other variants than text, are ignoring lines parameter and render only once', () => { 45 | render() 46 | expect(screen.getAllByTestId('skeleton')).toHaveLength(1) 47 | }) 48 | }) 49 | -------------------------------------------------------------------------------- /src/components/inputs/date-time/DateTime.d.ts: -------------------------------------------------------------------------------- 1 | import { DesktopDateTimePickerProps, MobileDateTimePickerProps } from '@mui/lab' 2 | import { MuiPickersAdapter } from '@mui/x-date-pickers/internals' 3 | import { TextFieldProps } from '@totalsoft_oss/rocket-ui.components.inputs.text-field' 4 | 5 | export interface DateTime extends DesktopDateTimePickerProps, MobileDateTimePickerProps { 6 | /** DateIO adapter class function */ 7 | dateAdapter?: new (...args: []) => MuiPickersAdapter 8 | /** Locale for the date library you are using */ 9 | locale?: string | object 10 | /** 11 | * @default 'date' 12 | * Choose the Picker to be displayed between: DateTimePicker, DatePicker, TimePicker, from material ui. 13 | */ 14 | showPicker?: 'date' | 'dateTime' | 'time' 15 | /** 16 | * The props that will be passed down to the TextField component that will act as the `renderInput` for the picker. 17 | */ 18 | inputProps?: TextFieldProps 19 | /** 20 | * @default 'ro' 21 | * A small sample of ISO format names that will be used to display the date. 22 | */ 23 | format?: 'de' | 'en-US' | 'fr' | 'ro' | 'ru' 24 | /** 25 | * Choose if you want a dedicated button to clear the value from the picker 26 | */ 27 | clearable?: boolean 28 | /** 29 | * This property will be passed to the renderInput 30 | * If `true`, the label is displayed in an error state. 31 | */ 32 | error?: boolean 33 | /** 34 | * This property will be passed to the renderInput 35 | * The helper text content. 36 | */ 37 | helperText?: React.ReactNode 38 | } 39 | 40 | /** 41 | * 42 | * Demos: 43 | * 44 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/inputs/date-time 45 | * 46 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/inputs/date-time 47 | * 48 | * Material-UI component used: 49 | * 50 | * - DatePicker: https://mui.com/api/date-picker/ 51 | * - DateTimePicker: https://mui.com/api/date-time-picker/ 52 | * - TimePicker: https://mui.com/api/time-picker/ 53 | * 54 | */ 55 | 56 | export default function DateTime(props: DateTime): JSX.Element 57 | -------------------------------------------------------------------------------- /src/components/feedback/custom-dialog/CustomDialog.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback } from 'react' 2 | import PropTypes from 'prop-types' 3 | import Button from '@totalsoft_oss/rocket-ui.components.buttons.button' 4 | import DialogDisplay from '@totalsoft_oss/rocket-ui.components.feedback.dialog-display' 5 | 6 | const CustomDialog = ({ onYes, onClose, buttonProps, textDialogYes = 'Yes', textDialogNo = 'No', disableBackdropClick, ...rest }) => { 7 | const handleClose = useCallback( 8 | (event, reason) => { 9 | if (disableBackdropClick && reason === 'backdropClick') return 10 | 11 | onClose(event, reason ? reason : 'closeActionClick') 12 | }, 13 | [disableBackdropClick, onClose] 14 | ) 15 | 16 | return ( 17 | 22 | 25 | 28 | 29 | } 30 | {...rest} 31 | /> 32 | ) 33 | } 34 | 35 | CustomDialog.propTypes = { 36 | /** 37 | * Props sent to the buttons. 38 | */ 39 | buttonProps: PropTypes.object, 40 | /** 41 | * Callback fired when a "click" event is detected. 42 | */ 43 | onYes: PropTypes.func, 44 | /** 45 | * Callback fired when the component requests to be closed. 46 | * Signature: function(event: object, reason: string) => void 47 | * @param {object} event The event source of the callback. 48 | * @param {string} reason Can be: "escapeKeyDown", "backdropClick", "closeActionClick". 49 | */ 50 | onClose: PropTypes.func, 51 | /** 52 | * @default 'Yes' 53 | * Text content of the first (left) action. 54 | */ 55 | textDialogYes: PropTypes.string, 56 | /** 57 | * @default 'No' 58 | * Text content of the second (right) action. 59 | */ 60 | textDialogNo: PropTypes.string, 61 | /** 62 | * If true, clicking the backdrop will not fire the onClose callback. 63 | */ 64 | disableBackdropClick: PropTypes.bool 65 | } 66 | 67 | export default CustomDialog 68 | -------------------------------------------------------------------------------- /src/components/surfaces/card/Card.d.ts: -------------------------------------------------------------------------------- 1 | import { CardActionsProps, CardMediaProps as MuiCardMediaProps, CardProps as MuiCardProps } from '@mui/material' 2 | import { CardHeaderProps } from '@totalsoft_oss/rocket-ui.components.surfaces.card-header' 3 | 4 | export type CardMediaProps = MuiCardMediaProps & { 5 | /** 6 | * Select a default size: 7 | * @s 80px X 80px 8 | * @m 163px X 163px 9 | * @l 280px X 280px 10 | */ 11 | size?: 's' | 'm' | 'l' 12 | } 13 | 14 | export interface CardProps extends Omit { 15 | /** 16 | * @default 'standard' 17 | * Variant to use. 18 | */ 19 | variant?: 'standard' | 'filled' 20 | /** 21 | * Color of card. 22 | */ 23 | color?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'rose' 24 | /** 25 | * If true, the content padding is disabled. 26 | */ 27 | disablePadding?: boolean 28 | /** 29 | * Actions to be displayed at the bottom of the card. 30 | */ 31 | actions?: React.ReactNode 32 | /** 33 | * Props applied to the CardActions component. 34 | */ 35 | actionsProps?: CardActionsProps 36 | /** 37 | * Content of the title. 38 | */ 39 | title?: React.ReactNode 40 | /** 41 | * Content of the subheader. 42 | */ 43 | subheader?: React.ReactNode 44 | /** 45 | * @default {} 46 | * Props applied to the CardHeader component. 47 | */ 48 | headerProps?: CardHeaderProps 49 | /** 50 | * Icon to be displayed. 51 | */ 52 | icon?: object 53 | /** 54 | * @default 'secondary' 55 | * Icon color. 56 | */ 57 | iconColor?: string 58 | /* 59 | * Props applied to the CardMedia component. 60 | */ 61 | mediaProps?: CardMediaProps 62 | } 63 | 64 | /** 65 | * 66 | * Demos: 67 | * 68 | * - https://bit.cloud/totalsoft_oss/rocket-ui/components/surfaces/card 69 | * 70 | * Take a look over the code for further information: https://github.com/osstotalsoft/rocket-ui/tree/main/rocket-ui/components/surfaces/card 71 | * 72 | * Material-UI components used: 73 | * 74 | * - Card: https://mui.com/api/card/ 75 | * - CardContent: https://mui.com/api/card-content/ 76 | * 77 | */ 78 | 79 | export default function Card(props: CardProps): JSX.Element 80 | -------------------------------------------------------------------------------- /src/components/feedback/toast/ToastStyles.js: -------------------------------------------------------------------------------- 1 | import { styled } from '@mui/material/styles' 2 | 3 | const PREFIX = 'StyledToast' 4 | 5 | export const classes = { 6 | default: `${PREFIX}-default`, 7 | success: `${PREFIX}-success`, 8 | info: `${PREFIX}-info`, 9 | error: `${PREFIX}-error`, 10 | warning: `${PREFIX}-warning`, 11 | toastWrapper: `${PREFIX}-toastWrapper` 12 | } 13 | 14 | const Container = styled('div')(({ theme }) => ({ 15 | [`& .${classes.default}`]: { borderRadius: '6px', padding: '6px 20px' }, 16 | [`& .${classes.success}`]: { 17 | '--toastify-color-success': theme.palette.success.main, 18 | '--toastify-text-color-success': theme.palette.success.contrastText, 19 | '--toastify-icon-color-success': theme.palette.success.main, 20 | '--toastify-color-progress-success': theme.palette.success.main 21 | }, 22 | [`& .${classes.info}`]: { 23 | '--toastify-color-info': theme.palette.info.main, 24 | '--toastify-text-color-info': theme.palette.info.contrastText, 25 | '--toastify-icon-color-info': theme.palette.info.main, 26 | '--toastify-color-progress-info': theme.palette.info.main 27 | }, 28 | [`& .${classes.error}`]: { 29 | '--toastify-color-error': theme.palette.error.main, 30 | '--toastify-text-color-error': theme.palette.error.contrastText, 31 | '--toastify-icon-color-error': theme.palette.error.main, 32 | '--toastify-color-progress-error': theme.palette.error.main 33 | }, 34 | [`& .${classes.warning}`]: { 35 | '--toastify-color-warning': theme.palette.warning.main, 36 | '--toastify-text-color-warning': theme.palette.warning.contrastText, 37 | '--toastify-icon-color-warning': theme.palette.warning.main, 38 | '--toastify-color-progress-warning': theme.palette.warning.main 39 | }, 40 | [`& .${classes.toastWrapper}`]: { 41 | borderRadius: '6px', 42 | width: '350px', 43 | overflowWrap: 'anywhere' 44 | }, 45 | [`.Toastify__close-button`]: { 46 | background: 'transparent', 47 | outline: 'none', 48 | border: 'none', 49 | padding: 0, 50 | cursor: 'pointer', 51 | opacity: 1, 52 | transition: '0.3s ease', 53 | alignSelf: 'auto' 54 | } 55 | })) 56 | 57 | export default Container 58 | -------------------------------------------------------------------------------- /src/components/surfaces/accordion-list/AccordionList.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'AccordionList component.' 3 | labels: ['mui', 'react', 'accordion-list'] 4 | --- 5 | 6 | import Grid from '@mui/material/Grid' 7 | import AccordionList from './AccordionList' 8 | 9 | ## Basic AccordionList component 10 | 11 | Basic example that renders an accordion-list 12 | 13 | ### Component usage 14 | 15 | ```js 16 | 28 | ``` 29 | 30 | ### Use this live example to interact with AccordionList component 31 | 32 | Live example: 33 | 34 | ```js live 35 | 36 | 37 | 49 | 50 | 51 | 66 | 67 | 68 | ``` 69 | --------------------------------------------------------------------------------