@groupeactual/ui-kit 0.1.7 → 0.1.9

package/dist/esm/material-ui-components/Button/Button.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ButtonProps } from '@mui/material';
+declare type ActButtonType = (props: ButtonProps) => JSX.Element | null;
+declare const ActButton: ActButtonType;
+export default ActButton;

package/dist/esm/material-ui-components/Button/index.d.ts

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

package/dist/esm/material-ui-components/Form/Checkbox/Checkbox.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+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;
+    sx: SxProps<Theme>;
+}
+declare const Checkbox: ({ name, value, error, label, onChange, sx }: Props) => JSX.Element;
+export default Checkbox;

package/dist/esm/material-ui-components/Form/Checkbox/index.d.ts

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

package/dist/esm/material-ui-components/Form/TextInput/TextInput.d.ts

@@ -0,0 +1,15 @@
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
+import { TextFieldProps } from '@mui/material/TextField';
+interface Props {
+    error?: string;
+    onBlur: FocusEventHandler<unknown>;
+    onChange: ChangeEventHandler<unknown>;
+    label: string;
+    value: string;
+    name: string;
+    placeholder?: string;
+    disabled?: boolean;
+    endAdornment?: ReactNode;
+}
+declare const TextInput: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, placeholder, ...props }: Omit<TextFieldProps, 'error'> & Props) => JSX.Element;
+export default TextInput;

package/dist/esm/material-ui-components/Form/TextInput/index.d.ts

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

package/dist/esm/material-ui-components/Heading/Heading.d.ts

@@ -1,7 +1,8 @@
-import { PropsWithChildren } from 'react';
-import { TypographyProps } from "@mui/material";
-interface Props extends TypographyProps {
-    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/// <reference types="react" />
+import { TypographyProps } from '@mui/material';
+interface Props extends Omit<TypographyProps, 'paragraph'> {
+    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2';
+    component?: string;
 }
-declare const ActHeading: ({ children, ...props }: PropsWithChildren<Props>) => JSX.Element;
+declare const ActHeading: (props: Props) => JSX.Element;
 export default ActHeading;

package/dist/esm/material-ui-components/Text/Text.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TypographyProps } from '@mui/material';
+interface Props extends TypographyProps {
+    variant?: 'body1' | 'body2' | 'caption';
+    component?: string;
+}
+declare const ActText: (props: Props) => JSX.Element;
+export default ActText;

package/dist/esm/material-ui-components/Text/index.d.ts

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

package/dist/esm/material-ui-components/index.d.ts

@@ -1,2 +1,5 @@
-export { default as ActTextField } from "./TextField";
-export { default as ActHeading } from "./Heading";
+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 ActCheckbox } from './Form/Checkbox';

package/dist/esm/mui-base-components/index.d.ts

@@ -1 +1,2 @@
-export { default as ActButton } from "./Button";
+declare const _default: {};
+export default _default;

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { TypographyProps, ButtonProps } from '@mui/material';
+import * as react from 'react';
+import { FocusEventHandler, ChangeEventHandler, ReactNode, PropsWithChildren } from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
-import React, { PropsWithChildren } from 'react';
-import { TypographyProps } from '@mui/material';
+import { SxProps, Theme } from '@mui/system';
 
 interface ActTagProps {
     label?: string;
@@ -9,21 +11,53 @@ interface ActTagProps {
 }
 declare const ActTag: (props: ActTagProps) => JSX.Element;
 
-declare const ActTextField: (props: TextFieldProps) => JSX.Element;
+interface Props$4 extends TypographyProps {
+    variant?: 'body1' | 'body2' | 'caption';
+    component?: string;
+}
+declare const ActText: (props: Props$4) => JSX.Element;
 
-interface Props$1 extends TypographyProps {
-    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface Props$3 extends Omit<TypographyProps, 'paragraph'> {
+    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2';
+    component?: string;
 }
-declare const ActHeading: ({ children, ...props }: PropsWithChildren<Props$1>) => JSX.Element;
+declare const ActHeading: (props: Props$3) => JSX.Element;
+
+declare type ActButtonType = (props: ButtonProps) => JSX.Element | null;
+declare const ActButton: ActButtonType;
 
-interface ActButtonProps {
-    children: React.ReactNode;
+interface Props$2 {
+    error?: string;
+    onBlur: FocusEventHandler<unknown>;
+    onChange: ChangeEventHandler<unknown>;
+    label: string;
+    value: string;
+    name: string;
+    placeholder?: string;
+    disabled?: boolean;
+    endAdornment?: ReactNode;
 }
-declare const ActButton: ({ children, ...props }: ActButtonProps) => JSX.Element;
+declare const TextInput: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, placeholder, ...props }: Omit<TextFieldProps, 'error'> & Props$2) => JSX.Element;
 
-interface Props {
+interface Props$1 {
+    error?: string;
+    label: string;
+    value: boolean;
     name: string;
+    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;
+
+interface DesignSystemContextValues {
+    isDarkTheme: boolean;
+    themeName: 'default' | 'lucie';
+    toggleDarkTheme(): void;
+}
+declare const DesignSystemContext: react.Context<DesignSystemContextValues>;
+interface Props {
+    name?: DesignSystemContextValues['themeName'];
 }
-declare const DesignSystemProvider: ({ children, name: themeName }: PropsWithChildren<Props>) => JSX.Element;
+declare const DesignSystemProvider: ({ children, name }: PropsWithChildren<Props>) => JSX.Element;
 
-export { ActButton, ActHeading, ActTag, ActTextField, DesignSystemProvider };
+export { ActButton, Checkbox as ActCheckbox, ActHeading, ActTag, ActText, TextInput as ActTextInput, DesignSystemContext, DesignSystemContextValues, DesignSystemProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A simple template for a custom React component library",
   "scripts": {
     "build": "rollup -c",
@@ -17,11 +17,24 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.4",
     "@types/react": "^18.0.15",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
     "babel-loader": "^8.2.5",
     "clsx": "^1.2.1",
     "css-loader": "^6.7.1",
+    "eslint": "^8.0.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-standard-with-typescript": "^23.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jest": "^27.0.4",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
+    "prettier": "^2.7.1",
     "rollup": "^2.77.2",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-postcss": "^4.0.2",
@@ -46,6 +59,7 @@
     "@mui/material": "^5.10.0",
     "@mui/system": "^5.9.3",
     "@types/styled-components": "^5.1.25",
+    "formik": "^2.2.9",
     "framer-motion": "^6.5.1",
     "postcss": "^8.4.14",
     "styled-components": "^5.3.5",

package/src/DesignSystemProvider.tsx

@@ -1,20 +1,60 @@
-import { PropsWithChildren, useState} from 'react';
-import { DesignSystemContext } from '@groupeactual/design-tokens';
+import {
+  PropsWithChildren,
+  useMemo,
+  useState,
+  createContext,
+  useContext
+} from 'react';
+import { useThemeTokens } from '@groupeactual/design-tokens';
+import { ThemeProvider } from '@emotion/react';
+import { createTheme } from '@mui/material';
+
+export interface DesignSystemContextValues {
+  isDarkTheme: boolean;
+  themeName: 'default' | 'lucie';
+  toggleDarkTheme(): void;
+}
+
+export const DesignSystemContext = createContext<DesignSystemContextValues>({
+  isDarkTheme: false,
+  themeName: 'default',
+  toggleDarkTheme: () => {}
+});
 
 interface Props {
-  name: string;
+  name?: DesignSystemContextValues['themeName'];
 }
 
-const DesignSystemProvider = ({children, name: themeName} : PropsWithChildren<Props>) => {
+const MaterialThemeProvider = ({ children }: PropsWithChildren<unknown>) => {
+  const { themeName } =
+    useContext<DesignSystemContextValues>(DesignSystemContext);
+  const { materialUIThemeTokens } = useThemeTokens(themeName);
+
+  const theme = useMemo(
+    () => createTheme(materialUIThemeTokens),
+    [materialUIThemeTokens]
+  );
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+const DesignSystemProvider = ({
+  children,
+  name: themeName = 'default'
+}: PropsWithChildren<Props>) => {
   const [isDarkTheme, setIsDarkTheme] = useState(false);
 
   const toggleDarkTheme = (): void => {
     setIsDarkTheme(!isDarkTheme);
-  }
+  };
 
-  return (<DesignSystemContext.Provider value={{ isDarkTheme, themeName, toggleDarkTheme}}>
-      {children}
-    </DesignSystemContext.Provider>);
-}
+  return (
+    <DesignSystemContext.Provider
+      value={{ isDarkTheme, themeName, toggleDarkTheme }}
+    >
+      <MaterialThemeProvider>{children}</MaterialThemeProvider>
+    </DesignSystemContext.Provider>
+  );
+};
 
 export default DesignSystemProvider;

package/src/index.ts

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

package/src/material-ui-components/Button/Button.tsx

@@ -0,0 +1,16 @@
+import { Button, ButtonProps } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+type ActButtonType = (props: ButtonProps) => JSX.Element | null;
+
+const ActButton: ActButtonType = styled(Button)<ButtonProps>(({ theme }) => ({
+  color: theme.palette.blueClickable,
+  border: `1px solid ${theme.palette.greyLightBorder}`,
+  borderRadius: 4,
+  fontWeight: theme.typography.fontWeightBold,
+  lineHeight: '18px',
+  textTransform: 'unset',
+  fontSize: 14
+}));
+
+export default ActButton;

package/src/material-ui-components/Button/index.ts

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

package/src/material-ui-components/Form/Checkbox/Checkbox.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+
+import {
+  Checkbox as CheckboxMUI,
+  FormControl,
+  FormControlLabel,
+  Typography
+} from '@mui/material';
+import { Box, SxProps, Theme } from '@mui/system';
+
+interface Props {
+  error?: string;
+  label: string;
+  value: boolean;
+  name: string;
+  onChange: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
+  sx: SxProps<Theme>;
+}
+const Checkbox = ({ name, value, error, label, onChange, sx }: Props): JSX.Element => {
+  const [internalValue, setInternalValue] = useState(value);
+
+  useEffect(() => {
+    if (value !== internalValue) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  return (
+    <FormControl fullWidth>
+      <FormControlLabel
+        sx={{ display: 'table' }}
+        control={
+          <Box sx={{ display: 'table-cell' }}>
+            <CheckboxMUI
+              name={name}
+              sx={{ marginTop: -0.5 }}
+              checked={internalValue}
+              color="primary"
+              onChange={(e) => {
+                setInternalValue(e.target.checked);
+                onChange(name, e.target.checked, true);
+              }}
+            />
+          </Box>
+        }
+        label={<Typography sx={sx}>{label}</Typography>}
+      />
+      {error && (
+        <Typography sx={{ 
+          marginTop: -1,
+          color: "#B80025", 
+          fontWeight: 400, 
+          fontSize: "10px" 
+        }}>
+          {error}
+        </Typography>
+      )}
+    </FormControl>
+  );
+};
+
+export default Checkbox;

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

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

package/src/material-ui-components/Form/TextInput/TextInput.tsx

@@ -0,0 +1,66 @@
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  ReactNode,
+  useEffect,
+  useState
+} from 'react';
+
+import TextField, { TextFieldProps } from '@mui/material/TextField';
+
+interface Props {
+  error?: string;
+  onBlur: FocusEventHandler<unknown>;
+  onChange: ChangeEventHandler<unknown>;
+  label: string;
+  value: string;
+  name: string;
+  placeholder?: string;
+  disabled?: boolean;
+  endAdornment?: ReactNode;
+}
+const TextInput = ({
+  name,
+  value,
+  error,
+  onBlur,
+  onChange,
+  label,
+  disabled,
+  endAdornment,
+  placeholder = '',
+  ...props
+}: Omit<TextFieldProps, 'error'> & Props): JSX.Element => {
+  const [internalValue, setInternalValue] = useState(value);
+  useEffect(() => {
+    if (value !== internalValue) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  return (
+    <TextField
+      variant="standard"
+      name={name}
+      label={label}
+      value={internalValue}
+      onClick={(e) => e.stopPropagation()}
+      InputProps={{
+        endAdornment
+      }}
+      onChange={(e) => { 
+        setInternalValue(e.currentTarget.value);
+        onChange(e);
+      }}
+      onBlur={(e) => {
+        onBlur(e);
+      }}
+      error={!!error}
+      helperText={error ?? ''}
+      disabled={disabled}
+      {...props}
+    />
+  );
+};
+
+export default TextInput;

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

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

package/src/material-ui-components/Heading/Heading.tsx

@@ -1,32 +1,10 @@
-import { PropsWithChildren } from 'react';
-import { createTheme, ThemeProvider, Typography, TypographyProps } from "@mui/material";
-import { useThemeTokens } from "@groupeactual/design-tokens";
+import { Typography, TypographyProps } from '@mui/material';
 
-interface Props
-  extends TypographyProps
-  {
-    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  }
+interface Props extends Omit<TypographyProps, 'paragraph'> {
+  variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2';
+  component?: string;
+}
 
-const ActHeading = ({  children, ...props }: PropsWithChildren<Props>) => {
-    const {themeName, tokens} = useThemeTokens()
-
-    const variants = {
-      h3 : {
-        fontSize: tokens.fontSizes.h3,
-        fontWeight: tokens.fontWeight.bold,
-      }
-    }
-
-    const theme = createTheme({
-      typography: {
-        ...variants
-      },
-    });
-
-      return <ThemeProvider theme={theme}>
-        <Typography {...props}>Theme : {themeName} {children}</Typography>
-      </ThemeProvider>;
-};
+const ActHeading = (props: Props) => <Typography {...props} />;
 
 export default ActHeading;

package/src/material-ui-components/Text/Text.tsx

@@ -0,0 +1,10 @@
+import { Typography, TypographyProps } from '@mui/material';
+
+interface Props extends TypographyProps {
+  variant?: 'body1' | 'body2' | 'caption';
+  component?: string;
+}
+
+const ActText = (props: Props) => <Typography {...props} />;
+
+export default ActText;

package/src/material-ui-components/Text/index.ts

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

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

@@ -1,2 +1,5 @@
-export { default as ActTextField } from "./TextField";
-export { default as ActHeading } from "./Heading";
+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 ActCheckbox } from './Form/Checkbox';

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

@@ -1 +1 @@
-export { default as ActButton } from "./Button";
+export default {};

package/dist/cjs/material-ui-components/TextField/TextField.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { TextFieldProps } from '@mui/material/TextField';
-declare const ActTextField: (props: TextFieldProps) => JSX.Element;
-export default ActTextField;

package/dist/cjs/material-ui-components/TextField/index.d.ts

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

package/dist/cjs/mui-base-components/Button/Button.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface ActButtonProps {
-    children: React.ReactNode;
-}
-declare const ActButton: ({ children, ...props }: ActButtonProps) => JSX.Element;
-export default ActButton;

package/dist/cjs/mui-base-components/Button/index.d.ts

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

package/dist/esm/material-ui-components/TextField/TextField.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { TextFieldProps } from '@mui/material/TextField';
-declare const ActTextField: (props: TextFieldProps) => JSX.Element;
-export default ActTextField;

package/dist/esm/material-ui-components/TextField/index.d.ts

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

package/dist/esm/mui-base-components/Button/Button.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface ActButtonProps {
-    children: React.ReactNode;
-}
-declare const ActButton: ({ children, ...props }: ActButtonProps) => JSX.Element;
-export default ActButton;

package/dist/esm/mui-base-components/Button/index.d.ts

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

package/src/material-ui-components/TextField/TextField.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-
-const ActTextField = (props: TextFieldProps) => {
-  return <TextField {...props} />
-};
-
-export default ActTextField;

package/src/material-ui-components/TextField/index.ts

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

package/src/mui-base-components/Button/Button.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
-import { styled } from '@mui/system';
-
-const ButtonStyled = styled(ButtonUnstyled)`
-  font-family: sans-serif;
-  font-weight: bold;
-  font-size: 0.875rem;
-  background-color: tomato;
-  padding: 12px 24px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  border: none;
-
-  &:hover {
-    background-color: red;
-  }
-
-  &.${buttonUnstyledClasses.active} {
-    background-color: rgb(86, 0, 0);
-  }
-
-  &.${buttonUnstyledClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
-    outline: none;
-  }
-
-  &.${buttonUnstyledClasses.disabled} {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-
-export interface ActButtonProps {
-  children: React.ReactNode
-}
-
-const ActButton = ({ children, ...props }: ActButtonProps) => {
-  return <ButtonStyled {...props}>{children}</ButtonStyled>;
-};
-
-export default ActButton;

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

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