@groupeactual/ui-kit 0.1.9 → 0.2.1

package/dist/index.d.ts

@@ -1,32 +1,29 @@
 /// <reference types="react" />
-import { TypographyProps, ButtonProps } from '@mui/material';
+import { TypographyProps } from '@mui/material';
+import { TypographyProps as TypographyProps$1 } from '@mui/material/Typography';
+import { ButtonProps } from '@mui/material/Button';
 import * as react from 'react';
 import { FocusEventHandler, ChangeEventHandler, ReactNode, PropsWithChildren } from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { SxProps, Theme } from '@mui/system';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
-interface ActTagProps {
-    label?: string;
-    color?: 'red' | 'green' | 'blue';
-}
-declare const ActTag: (props: ActTagProps) => JSX.Element;
-
-interface Props$4 extends TypographyProps {
+interface Props$6 extends TypographyProps {
     variant?: 'body1' | 'body2' | 'caption';
     component?: string;
 }
-declare const ActText: (props: Props$4) => JSX.Element;
+declare const ActText: (props: Props$6) => JSX.Element;
 
-interface Props$3 extends Omit<TypographyProps, 'paragraph'> {
+interface Props$5 extends Omit<TypographyProps$1, 'paragraph'> {
     variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2';
     component?: string;
 }
-declare const ActHeading: (props: Props$3) => JSX.Element;
+declare const ActHeading: (props: Props$5) => JSX.Element;
 
 declare type ActButtonType = (props: ButtonProps) => JSX.Element | null;
 declare const ActButton: ActButtonType;
 
-interface Props$2 {
+interface Props$4 {
     error?: string;
     onBlur: FocusEventHandler<unknown>;
     onChange: ChangeEventHandler<unknown>;
@@ -37,9 +34,9 @@ interface Props$2 {
     disabled?: boolean;
     endAdornment?: ReactNode;
 }
-declare const TextInput: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, placeholder, ...props }: Omit<TextFieldProps, 'error'> & Props$2) => JSX.Element;
+declare const TextField: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, placeholder, ...props }: Omit<TextFieldProps, 'error'> & Props$4) => JSX.Element;
 
-interface Props$1 {
+interface Props$3 {
     error?: string;
     label: string;
     value: boolean;
@@ -47,12 +44,28 @@ interface Props$1 {
     onChange: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
     sx: SxProps<Theme>;
 }
-declare const Checkbox: ({ name, value, error, label, onChange, sx }: Props$1) => JSX.Element;
+declare const Checkbox: ({ name, value, error, label, onChange, sx }: Props$3) => JSX.Element;
+
+interface Props$2 {
+    icon: ReactNode;
+    title: ReactNode;
+    content: ReactNode;
+    summaryHeight?: number;
+}
+declare const ActAccordion: ({ icon, title, content, summaryHeight }: Props$2) => JSX.Element;
+
+interface Props$1 {
+    variant?: 'roundedIcon' | 'smallRoundedIcon';
+    icon: IconProp;
+    color?: string;
+    size?: 'xxs' | 'xs' | 'sm' | 'm' | 'lg' | 'xl' | 'xxl';
+}
+declare const IconProvider: ({ variant, icon, color, size }: Props$1) => JSX.Element;
 
 interface DesignSystemContextValues {
     isDarkTheme: boolean;
     themeName: 'default' | 'lucie';
-    toggleDarkTheme(): void;
+    toggleDarkTheme: () => void;
 }
 declare const DesignSystemContext: react.Context<DesignSystemContextValues>;
 interface Props {
@@ -60,4 +73,4 @@ interface Props {
 }
 declare const DesignSystemProvider: ({ children, name }: PropsWithChildren<Props>) => JSX.Element;
 
-export { ActButton, Checkbox as ActCheckbox, ActHeading, ActTag, ActText, TextInput as ActTextInput, DesignSystemContext, DesignSystemContextValues, DesignSystemProvider };
+export { ActAccordion, ActButton, Checkbox as ActCheckbox, ActHeading, ActText, DesignSystemContext, DesignSystemContextValues, DesignSystemProvider, IconProvider, TextField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "description": "A simple template for a custom React component library",
   "scripts": {
     "build": "rollup -c",
@@ -54,14 +54,18 @@
     "@emotion/is-prop-valid": "^1.2.0",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@groupeactual/design-tokens": "^0.1.1",
     "@mui/base": "^5.0.0-alpha.92",
     "@mui/material": "^5.10.0",
     "@mui/system": "^5.9.3",
+    "@types/lodash": "^4.14.186",
     "@types/styled-components": "^5.1.25",
     "formik": "^2.2.9",
     "framer-motion": "^6.5.1",
+    "lodash": "^4.17.21",
     "postcss": "^8.4.14",
+    "prop-types": "^15.8.1",
     "styled-components": "^5.3.5",
     "tslib": "^2.4.0",
     "webpack": "^5.74.0"

package/src/DesignSystemProvider.tsx

@@ -12,7 +12,7 @@ import { createTheme } from '@mui/material';
 export interface DesignSystemContextValues {
   isDarkTheme: boolean;
   themeName: 'default' | 'lucie';
-  toggleDarkTheme(): void;
+  toggleDarkTheme: () => void;
 }
 
 export const DesignSystemContext = createContext<DesignSystemContextValues>({

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import { useThemeTokens } from '@groupeactual/design-tokens';
+
+interface Props {
+  icon: ReactNode;
+  title: ReactNode;
+  content: ReactNode;
+  summaryHeight?: number;
+}
+
+const ActAccordion = ({ icon, title, content, summaryHeight }: Props) => {
+  const { tokens } = useThemeTokens('lucie');
+  return (
+    <Accordion
+      sx={{ border: `1px solid ${tokens.colors.defaultBorder as string}` }}
+    >
+      <AccordionSummary
+        expandIcon={icon}
+        sx={{
+          height: summaryHeight || 60
+        }}
+      >
+        {title}
+      </AccordionSummary>
+      <AccordionDetails
+        sx={{
+          bgcolor: tokens.colors.greyLightBorder,
+          borderTop: '1px solid #CBCBCB'
+        }}
+      >
+        {content}
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+export default ActAccordion;

package/src/components/Accordion/index.ts

@@ -0,0 +1 @@
+export { default } from './Accordion';

package/src/{material-ui-components → components}/Button/Button.tsx

@@ -1,10 +1,11 @@
-import { Button, ButtonProps } from '@mui/material';
+import Button, { ButtonProps } from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
 
 type ActButtonType = (props: ButtonProps) => JSX.Element | null;
 
 const ActButton: ActButtonType = styled(Button)<ButtonProps>(({ theme }) => ({
   color: theme.palette.blueClickable,
+  // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
   border: `1px solid ${theme.palette.greyLightBorder}`,
   borderRadius: 4,
   fontWeight: theme.typography.fontWeightBold,

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default } from './Button';

package/src/{material-ui-components → components}/Form/Checkbox/Checkbox.tsx

@@ -1,22 +1,33 @@
 import { useEffect, useState } from 'react';
 
-import {
-  Checkbox as CheckboxMUI,
-  FormControl,
-  FormControlLabel,
-  Typography
-} from '@mui/material';
-import { Box, SxProps, Theme } from '@mui/system';
+import CheckboxMUI from '@mui/material/Checkbox';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Typography from '@mui/material/Typography';
+
+import Box from '@mui/system/Box';
+import { SxProps, Theme } from '@mui/system';
 
 interface Props {
   error?: string;
   label: string;
   value: boolean;
   name: string;
-  onChange: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
+  onChange: (
+    field: string,
+    value: any,
+    shouldValidate?: boolean | undefined
+  ) => void;
   sx: SxProps<Theme>;
 }
-const Checkbox = ({ name, value, error, label, onChange, sx }: Props): JSX.Element => {
+const Checkbox = ({
+  name,
+  value,
+  error,
+  label,
+  onChange,
+  sx
+}: Props): JSX.Element => {
   const [internalValue, setInternalValue] = useState(value);
 
   useEffect(() => {
@@ -46,12 +57,14 @@ const Checkbox = ({ name, value, error, label, onChange, sx }: Props): JSX.Eleme
         label={<Typography sx={sx}>{label}</Typography>}
       />
       {error && (
-        <Typography sx={{ 
-          marginTop: -1,
-          color: "#B80025", 
-          fontWeight: 400, 
-          fontSize: "10px" 
-        }}>
+        <Typography
+          sx={{
+            marginTop: -1,
+            color: '#B80025',
+            fontWeight: 400,
+            fontSize: '10px'
+          }}
+        >
           {error}
         </Typography>
       )}

package/src/components/Form/Checkbox/index.ts

@@ -0,0 +1 @@
+export { default } from './Checkbox';

package/src/{material-ui-components/Form/TextInput/TextInput.tsx → components/Form/TextField/TextField.tsx}

@@ -1,4 +1,4 @@
-import React, {
+import {
   ChangeEventHandler,
   FocusEventHandler,
   ReactNode,
@@ -6,7 +6,7 @@ import React, {
   useState
 } from 'react';
 
-import TextField, { TextFieldProps } from '@mui/material/TextField';
+import MuiTextField, { TextFieldProps } from '@mui/material/TextField';
 
 interface Props {
   error?: string;
@@ -19,7 +19,7 @@ interface Props {
   disabled?: boolean;
   endAdornment?: ReactNode;
 }
-const TextInput = ({
+const TextField = ({
   name,
   value,
   error,
@@ -39,8 +39,8 @@ const TextInput = ({
   }, [value]);
 
   return (
-    <TextField
-      variant="standard"
+    <MuiTextField
+      variant="outlined"
       name={name}
       label={label}
       value={internalValue}
@@ -48,7 +48,7 @@ const TextInput = ({
       InputProps={{
         endAdornment
       }}
-      onChange={(e) => { 
+      onChange={(e) => {
         setInternalValue(e.currentTarget.value);
         onChange(e);
       }}
@@ -63,4 +63,4 @@ const TextInput = ({
   );
 };
 
-export default TextInput;
+export default TextField;

package/src/components/Form/TextField/index.ts

@@ -0,0 +1 @@
+export { default } from './TextField';

package/src/{material-ui-components → components}/Heading/Heading.tsx

@@ -1,4 +1,5 @@
-import { Typography, TypographyProps } from '@mui/material';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+
 
 interface Props extends Omit<TypographyProps, 'paragraph'> {
   variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2';

package/src/components/Heading/index.ts

@@ -0,0 +1 @@
+export { default } from "./Heading";

package/src/components/Icon/IconProvider.tsx

@@ -0,0 +1,123 @@
+import SvgIcon from '@mui/material/SvgIcon';
+import { forwardRef } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import Box from '@mui/material/Box';
+interface Props {
+  variant?: 'roundedIcon' | 'smallRoundedIcon';
+  icon: IconProp;
+  color?: string;
+  size?: 'xxs' | 'xs' | 'sm' | 'm' | 'lg' | 'xl' | 'xxl';
+}
+
+interface FontAwesomeSvgIconProps {
+  icon: any;
+  fontSize: string;
+}
+
+// eslint-disable-next-line react/display-name
+const FontAwesomeSvgIcon = forwardRef<SVGSVGElement, FontAwesomeSvgIconProps>(
+  ({ icon, fontSize }, ref) => {
+    const {
+      icon: [width, height, , , svgPathData]
+    } = icon;
+
+    return (
+      <SvgIcon
+        ref={ref}
+        viewBox={`0 0 ${width as string} ${height as string}`}
+        sx={{
+          fontSize
+        }}
+      >
+        {typeof svgPathData === 'string' ? (
+          <path d={svgPathData} />
+        ) : (
+          /**
+           * A multi-path Font Awesome icon seems to imply a duotune icon. The 0th path seems to
+           * be the faded element (referred to as the "secondary" path in the Font Awesome docs)
+           * of a duotone icon. 40% is the default opacity.
+           *
+           * @see https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#changing-opacity
+           */
+          svgPathData.map((d: string, i: number) => (
+            <path style={{ opacity: i === 0 ? 0.4 : 1 }} d={d} key={i} />
+          ))
+        )}
+      </SvgIcon>
+    );
+  }
+);
+
+const IconProvider = ({ variant, icon, color, size }: Props) => {
+  const getFontSize = (): string => {
+    if (variant === 'roundedIcon') {
+      return '1.5rem';
+    }
+    if (variant === 'smallRoundedIcon') {
+      return '0.9rem';
+    }
+    switch (size) {
+      case 'xxs':
+        return '.8rem';
+      case 'xs':
+        return '1rem';
+      case 'm':
+        return '1.5rem';
+      case 'lg':
+        return '1.8rem';
+      case 'xl':
+        return '2.2rem';
+      case 'xxl':
+        return '4rem';
+      default:
+        return '1.2rem';
+    }
+  };
+
+  const getStyles = (): SxProps<Theme> => {
+    switch (variant) {
+      case 'roundedIcon':
+        return {
+          color: 'actual.main',
+          backgroundColor: 'actual.light',
+          borderRadius: '100px',
+          overflow: 'visible',
+          height: 50,
+          width: 50,
+          display: 'flex',
+          fontSize: '1.5rem',
+          justifyContent: 'center',
+          alignItems: 'center'
+        };
+      case 'smallRoundedIcon':
+        return {
+          color: 'actual.main',
+          backgroundColor: 'actual.light',
+          borderRadius: '100px',
+          overflow: 'visible',
+          height: 30,
+          width: 30,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        };
+      default:
+        return {
+          color: color ?? 'primary.main',
+          width: getFontSize(),
+          height: getFontSize(),
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        };
+    }
+  };
+  return (
+    <Box component="span" sx={getStyles()}>
+      <FontAwesomeSvgIcon icon={icon} fontSize={getFontSize()} />
+    </Box>
+  );
+};
+
+export default IconProvider;

package/src/components/Icon/index.ts

@@ -0,0 +1 @@
+export { default } from './IconProvider';

package/src/components/Text/index.ts

@@ -0,0 +1 @@
+export { default } from './Text';

package/src/{material-ui-components → components}/index.ts

@@ -1,5 +1,7 @@
 export { default as ActText } from './Text';
 export { default as ActHeading } from './Heading';
 export { default as ActButton } from './Button';
-export { default as ActTextInput } from './Form/TextInput';
+export { default as TextField } from './Form/TextField';
 export { default as ActCheckbox } from './Form/Checkbox';
+export { default as ActAccordion } from './Accordion';
+export { default as IconProvider } from './Icon/IconProvider';

package/src/index.ts

@@ -1,6 +1,4 @@
-export * from './from-scratch-components';
-export * from './material-ui-components';
-export * from './mui-base-components';
+export * from './components';
 export {
   default as DesignSystemProvider,
   DesignSystemContext,

package/src/from-scratch-components/Tag/Tag.scss

@@ -1,23 +0,0 @@
-.tag {
-  padding: 4px 8px;
-  border-radius: 4px;
-  background: rgb(244, 244, 244);
-  color: black;
-  font-size: 14px;
-  font-family: sans-serif;
-}
-
-.tag.red {
-  background: tomato;
-  color: white;
-}
-
-.tag.blue {
-  background: blue;
-  color: white;
-}
-
-.tag.green {
-  background: green;
-  color: white;
-}

package/src/from-scratch-components/Tag/Tag.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import clsx from "clsx";
-import "./Tag.scss";
-
-export interface ActTagProps {
-  label?: string;
-  color?: 'red' | 'green' | 'blue'
-}
-
-const ActTag = (props: ActTagProps) => {
-  return <span className={clsx({
-    tag: true,
-    red: props.color === 'red',
-    green: props.color === 'green',
-    blue: props.color === 'blue'
-  })}>{props.label}</span>;
-};
-
-export default ActTag;

package/src/from-scratch-components/Tag/index.ts

@@ -1 +0,0 @@
-export { default } from "./Tag";

package/src/from-scratch-components/index.ts

@@ -1 +0,0 @@
-export { default as ActTag } from "./Tag";

package/src/material-ui-components/Form/TextInput/index.ts

@@ -1 +0,0 @@
-export { default } from './TextInput';

package/src/mui-base-components/index.ts

@@ -1 +0,0 @@
-export default {};