Merge pull request #2 from Jaspersoft/mui-integration

copy in mui components from jrs-ui

package.json

@@ -11,7 +11,8 @@
   "scripts": {
     "test": "yarn workspaces run test",
     "build": "yarn workspaces run build",
-    "start": "cd packages/test-app && yarn start" 
+    "clean": "yarn workspaces run clean",
+    "start": "yarn workspace test-app run start"
   },
   "repository": {
     "type": "git",

packages/jrs-ui-components/.env

@@ -0,0 +1,15 @@
+# This file is used to set default value for the environement variables
+# Create .env.local file to override these values
+# Or set set normal OS env variable - it will take precedence over values defined in .env* files
+# see https://www.npmjs.com/package/dotenv-cli
+
+# Increase memory for nodejs
+NODE_OPTIONS=--max-old-space-size=4096
+
+# Pathe where all styles from all FAF-modules will be collected
+BUILD_THEMES_DIR=dist
+
+# Logger
+LOGGER_ENABLED=true
+LOGGER_LEVEL=error
+LOGGER_APPENDERS=console

packages/jrs-ui-components/.gitignore

@@ -0,0 +1,10 @@
+*.iml
+.idea/
+.env.local
+build/
+node_modules/
+package-lock.json
+/buildArtifactVersionName.txt
+yarn-error.log
+/.tscache
+dist

packages/jrs-ui-components/babel.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    [ '@babel/preset-env', { targets: { node: 'current' } } ],
+    [ '@babel/preset-react', { runtime: 'automatic' } ],
+    '@babel/preset-typescript'
+  ]
+};

packages/jrs-ui-components/index.js

@@ -0,0 +1,7 @@
+import {StylesProvider} from './material-ui/styles/StylesProvider.tsx';
+import {Checkbox} from './material-ui/Checkbox/Checkbox.tsx'
+
+export {
+    StylesProvider,
+    Checkbox,
+}

packages/jrs-ui-components/jest.config.ts

@@ -0,0 +1,17 @@
+import { Config } from 'jest';
+
+const conf: Config = {
+    verbose: true,
+    watchPathIgnorePatterns: [
+        'node_modules',
+        'dist',
+        'coverage',
+        'build'
+    ],
+    testEnvironment: 'jsdom',
+    transform: {
+        '^.+\\.([tj]s|[tj]sx)$': 'babel-jest'
+    }
+};
+
+export default conf;

packages/jrs-ui-components/material-ui/Accordion/Accordion.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react';
+import { Accordion as MuiAccordion, AccordionProps as MuiAccordionProps } from '@mui/material';
+
+export type AccordionSize = 'normal' | 'small';
+
+const AccordionSizeToClass: {[key in AccordionSize]: string} = {
+    small: 'jv-mAccordionSmall',
+    normal: ''
+}
+
+export type AccordionProps = MuiAccordionProps & {
+    size?: AccordionSize
+};
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(({
+    className = '', size = 'normal', children, ...rest
+}, ref) => {
+
+    const sizeClass = AccordionSizeToClass[size];
+
+    return (
+        <MuiAccordion ref={ref} className={`jv-mAccordion mui ${sizeClass} ${className}`} elevation={0} square {...rest}>
+            {children}
+        </MuiAccordion>
+    )
+})

packages/jrs-ui-components/material-ui/Accordion/AccordionFull.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef, ReactNode } from 'react';
+import { Accordion, AccordionProps } from './Accordion';
+import { AccordionSummary, AccordionSummaryProps } from '../AccordionSummary/AccordionSummary';
+import { AccordionDetails, AccordionDetailsProps } from '../AccordionDetails/AccordionDetails';
+
+export type AccordionFullProps = AccordionProps & {
+    id?: string,
+    SummaryProps?: AccordionSummaryProps,
+    summary?: ReactNode
+    DetailsProps?: AccordionDetailsProps;
+    children: NonNullable<React.ReactNode>;
+};
+
+export const AccordionFull = forwardRef<HTMLDivElement, AccordionFullProps>(({
+    id, size = 'normal', SummaryProps, summary, DetailsProps, children, ...rest
+}, ref) => {
+    const headerId = id ? `${id}-header` : undefined;
+    const contentId = id ? `${id}-content` : undefined;
+
+    return (
+        <Accordion ref={ref} size={size} {...rest}>
+            <AccordionSummary id={headerId} aria-controls={contentId} size={size} {...SummaryProps}>{summary}</AccordionSummary>
+            <AccordionDetails {...DetailsProps}>{children}</AccordionDetails>
+        </Accordion>
+    )
+})

packages/jrs-ui-components/material-ui/AccordionDetails/AccordionDetails.tsx

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import { AccordionDetails as MuiAccordionDetails, AccordionDetailsProps as MuiAccordionDetailsProps } from '@mui/material';
+
+export type AccordionDetailsProps = MuiAccordionDetailsProps;
+
+export const AccordionDetails = forwardRef<unknown, MuiAccordionDetailsProps>(({
+    className = '', children, ...rest
+}, ref) => {
+
+    return (
+        <MuiAccordionDetails ref={ref} className={`jv-mAccordion-body mui ${className}`} {...rest}>{children}</MuiAccordionDetails>
+    )
+})

packages/jrs-ui-components/material-ui/AccordionSummary/AccordionSummary.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react';
+import { AccordionSummary as MuiAccordionSummary, AccordionSummaryProps as MuiAccordionSummaryProps } from '@mui/material';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { AccordionSize } from '../Accordion/Accordion';
+
+const AccordionSummarySizeToClass: {[key in AccordionSize]: string} = {
+    small: 'jv-mAccordion-titleShaded',
+    normal: ''
+}
+
+export type AccordionSummaryProps = MuiAccordionSummaryProps & {
+    size?: AccordionSize
+}
+
+export const AccordionSummary = forwardRef<HTMLDivElement, AccordionSummaryProps>(({
+    className = '', classes = {}, size = 'normal', children, ...rest
+}, ref) => {
+    const { content = '', expandIconWrapper = '', ...restClasses } = classes;
+
+    const sizeClass = AccordionSummarySizeToClass[size];
+
+    return (
+        <MuiAccordionSummary
+            ref={ref}
+            className={`jv-mAccordion-title mui ${sizeClass} ${className}`}
+            classes={{
+                content: `jv-mAccordion-title-text mui ${content}`,
+                expandIconWrapper: `jv-mAccordion-title-icon mui ${expandIconWrapper}`,
+                ...restClasses
+            }}
+            expandIcon={<ChevronRightIcon />}
+            {...rest}
+        >
+            {children}
+        </MuiAccordionSummary>
+    )
+})

packages/jrs-ui-components/material-ui/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement, Ref } from 'react';
+import MuiAutocomplete, { AutocompleteProps as MuiAutocompleteProps } from '@mui/material/Autocomplete';
+import { Paper, PaperProps } from '@mui/material';
+
+export type AutocompleteProps<
+    T,
+    Multiple extends boolean | undefined = undefined,
+    DisableClearable extends boolean | undefined = undefined,
+    FreeSolo extends boolean | undefined = undefined
+    > = MuiAutocompleteProps< T, Multiple, DisableClearable, FreeSolo> & { paperComponentProps?: PaperProps }
+
+function AutoCompleteFunc<
+    T,
+    Multiple extends boolean | undefined = undefined,
+    DisableClearable extends boolean | undefined = undefined,
+    FreeSolo extends boolean | undefined = undefined
+    >({ paperComponentProps = {}, ...rest }: AutocompleteProps< T, Multiple, DisableClearable, FreeSolo>, ref: Ref<HTMLDivElement>) {
+    const { elevation = 8, ...restPaperProps } = paperComponentProps
+    return (
+        <MuiAutocomplete
+            ref={ref}
+            PaperComponent={({ children }) => (
+                <Paper elevation={elevation} {...restPaperProps}>{children}</Paper>
+            )}
+            {...rest}
+        />
+    )
+}
+export const Autocomplete = React.forwardRef(AutoCompleteFunc) as
+    <
+        T,
+        Multiple extends boolean | undefined = undefined,
+        DisableClearable extends boolean | undefined = undefined,
+        FreeSolo extends boolean | undefined = undefined
+        >(props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo> & React.RefAttributes<HTMLDivElement>) => ReactElement;

packages/jrs-ui-components/material-ui/Badge/Badge.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import { Badge as MuiBadge, BadgeProps } from '@mui/material';
+
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(({ className, ...rest }, ref) => {
+    return (
+        <MuiBadge
+            ref={ref}
+            className={`${className}`}
+            {...rest}
+        />
+    )
+})

packages/jrs-ui-components/material-ui/Button/Button.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+import {
+    Button as MuiButton, ButtonProps as MuiButtonProps
+} from '@mui/material';
+import { ColorToClass, SizeToClass } from '../types/ButtonTypes';
+
+export type ButtonProps = MuiButtonProps & {
+    labelProps?: {
+        labelClasses?: string;
+    }
+};
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
+    labelProps = {}, className = '', size = 'medium', color = 'secondary', children, ...rest
+}, ref) => {
+
+    const { labelClasses = '' } = labelProps;
+    return (
+        <MuiButton
+            ref={ref}
+            className={`jv-mButton ${SizeToClass[size]} ${ColorToClass[color]} mui ${className}`}
+            disableElevation
+            size={size}
+            {...rest}
+        >
+            <span className={`jv-MuiButton-label jv-mButton-label mui ${labelClasses}`}>{children}</span>
+        </MuiButton>
+    )
+})

packages/jrs-ui-components/material-ui/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import {
+    ButtonGroup as MuiButtonGroup, ButtonGroupProps as MuiButtonGroupProps
+} from '@mui/material';
+
+export const ButtonGroup = forwardRef<HTMLDivElement, MuiButtonGroupProps>(({
+    className = '', ...rest
+}, ref) => {
+    return (
+        <MuiButtonGroup
+            ref={ref}
+            className={`jv-mButtongroup mui ${className}`}
+            variant="contained"
+            color="secondary"
+            disableElevation
+            {...rest}
+        />
+    )
+})

packages/jrs-ui-components/material-ui/ButtonGroup/LabeledButtonGroup.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import {
+    ButtonGroupProps as MuiButtonGroupProps, InputLabel, InputLabelProps as MuiInputLabelProps
+} from '@mui/material';
+import { ButtonGroup } from './ButtonGroup';
+import { SizeToClass } from '../types/InputTypes';
+
+export type ButtonGroupProps = MuiButtonGroupProps & {
+    label: string,
+    buttonGroupClassName?: string,
+    InputLabelProps?: MuiInputLabelProps
+}
+
+export const LabeledButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(({
+    id, label, className = '', buttonGroupClassName = '', size, InputLabelProps = {}, children, ...rest
+}, ref) => {
+
+    const inputLabelId = id ? `${id}-label` : undefined;
+    const buttonGroupId = id ? `${id}-buttonGroup` : undefined;
+    const ariaLabeledBy = inputLabelId || undefined;
+
+    const { className: inputLabelClassName = '', ...restInputLabelProps } = InputLabelProps;
+
+    return (
+        <div id={id} ref={ref} className={`jv-mInput jv-mInputInline jv-mInputButtons mui ${SizeToClass[size ?? 'medium']} ${className}`}>
+            <InputLabel id={inputLabelId} className={`jv-mInput-label mui ${inputLabelClassName}`} {...restInputLabelProps}>{label}</InputLabel>
+            <ButtonGroup id={buttonGroupId} className={buttonGroupClassName} size={size} aria-labelledby={ariaLabeledBy} {...rest}>
+                {children}
+            </ButtonGroup>
+        </div>
+    )
+})

packages/jrs-ui-components/material-ui/Cards/Cards.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import {
+    Card as MuiCard, CardProps as MuiCardProps
+} from '@mui/material';
+
+type CardProps = MuiCardProps
+
+export const Cards = forwardRef<HTMLDivElement, CardProps>(({
+    variant = 'elevation', className: cardClassname = '', elevation = 2, ...rest
+}, ref) => {
+
+    return (
+        <MuiCard ref={ref} className={`jv-mCard  ${cardClassname} mui`} variant={variant} elevation={elevation} {...rest} />
+    )
+})

packages/jrs-ui-components/material-ui/Cards/CustomizableCard.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+import {
+    Card as MuiCard, CardContent as MuiCardContent, CardHeader as MuiCardHeader, CardProps as MuiCardProps, CardContentProps as MuiCardContentProps, CardHeaderProps as MuiCardHeaderProps
+} from '@mui/material';
+
+type CardProps = MuiCardProps & {
+    cardOverflow?: boolean
+    isLastOrSingleCard?: boolean
+    isCardHeader?: boolean
+    cardHeaderProps?: MuiCardHeaderProps,
+    cardContentProps?: MuiCardContentProps,
+    paddedCardBodyContent?: React.ReactNode
+}
+
+export const CustomizableCard = forwardRef<HTMLDivElement, CardProps>(({
+    isCardHeader = false, isLastOrSingleCard = false, cardOverflow = false, paddedCardBodyContent, variant = 'elevation', className: cardClassname = '', elevation = 2, children, cardHeaderProps = {}, cardContentProps = {}, ...rest
+}, ref) => {
+
+    const {
+        title = '', className: cardHeaderClassName = '', classes: cardHeaderClasses = '', ...restCardHeaderProps
+    } = cardHeaderProps;
+
+    const overflowClass = cardOverflow ? 'jv-uOverflow-show' : '';
+    const marginClass = isLastOrSingleCard ? '' : 'jv-uMargin-b-08';
+    return (
+        <MuiCard ref={ref} className={`jv-mCard ${marginClass} ${overflowClass} ${cardClassname} mui`} variant={variant} elevation={elevation} {...rest}>
+            <MuiCardContent {...cardContentProps}>
+                { isCardHeader && (
+                    <MuiCardHeader
+                        className={`jv-mCard-header jv-mCard-headerLarge  ${cardHeaderClassName} mui`}
+                        classes={{ title: `jv-mCard-header-title ${cardHeaderClasses} mui` }}
+                        title={title}
+                        {...restCardHeaderProps}
+                    />
+                )}
+                { paddedCardBodyContent && (
+                    <div className="jv-mCard-bodyPadded jv-mCard-body mui"> {paddedCardBodyContent} </div>
+                )}
+                { children && (
+                    <div className="jv-mCard-body mui">
+                        {children}
+                    </div>
+                ) }
+            </MuiCardContent>
+        </MuiCard>
+    )
+})