@groupeactual/ui-kit 0.2.0 → 0.2.2

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ButtonProps } from '@mui/material/Button';
+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/Heading/Heading.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TypographyProps } from '@mui/material/Typography';
+import { TypographyProps } from '@mui/material';
 interface Props extends Omit<TypographyProps, 'paragraph'> {
     variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2';
     component?: string;

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

@@ -3,5 +3,3 @@ 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';
-export { default as ActAccordion } from './Accordion';
-export { default as IconProvider } from './Icon/IconProvider';

package/dist/index.d.ts

@@ -8,12 +8,6 @@ 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$6 extends TypographyProps {
     variant?: 'body1' | 'body2' | 'caption';
     component?: string;
@@ -40,7 +34,7 @@ interface Props$4 {
     disabled?: boolean;
     endAdornment?: ReactNode;
 }
-declare const TextInput: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, placeholder, ...props }: Omit<TextFieldProps, 'error'> & Props$4) => JSX.Element;
+declare const TextField: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, placeholder, ...props }: Omit<TextFieldProps, 'error'> & Props$4) => JSX.Element;
 
 interface Props$3 {
     error?: string;
@@ -70,7 +64,7 @@ declare const IconProvider: ({ variant, icon, color, size }: Props$1) => JSX.Ele
 
 interface DesignSystemContextValues {
     isDarkTheme: boolean;
-    themeName: 'default' | 'lucie';
+    themeName: string;
     toggleDarkTheme: () => void;
 }
 declare const DesignSystemContext: react.Context<DesignSystemContextValues>;
@@ -79,4 +73,4 @@ interface Props {
 }
 declare const DesignSystemProvider: ({ children, name }: PropsWithChildren<Props>) => JSX.Element;
 
-export { ActAccordion, ActButton, Checkbox as ActCheckbox, ActHeading, ActTag, ActText, TextInput as ActTextInput, DesignSystemContext, DesignSystemContextValues, DesignSystemProvider, IconProvider };
+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.2.0",
+  "version": "0.2.2",
   "description": "A simple template for a custom React component library",
   "scripts": {
     "build": "rollup -c",
@@ -55,7 +55,7 @@
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@groupeactual/design-tokens": "^0.1.1",
+    "@groupeactual/design-tokens": "^0.1.8",
     "@mui/base": "^5.0.0-alpha.92",
     "@mui/material": "^5.10.0",
     "@mui/system": "^5.9.3",

package/src/DesignSystemProvider.tsx

@@ -5,13 +5,13 @@ import {
   createContext,
   useContext
 } from 'react';
-import { useThemeTokens } from '@groupeactual/design-tokens';
+import { useMaterialThemeTokens } from '@groupeactual/design-tokens';
 import { ThemeProvider } from '@emotion/react';
 import { createTheme } from '@mui/material';
 
 export interface DesignSystemContextValues {
   isDarkTheme: boolean;
-  themeName: 'default' | 'lucie';
+  themeName: string;
   toggleDarkTheme: () => void;
 }
 
@@ -28,12 +28,9 @@ interface Props {
 const MaterialThemeProvider = ({ children }: PropsWithChildren<unknown>) => {
   const { themeName } =
     useContext<DesignSystemContextValues>(DesignSystemContext);
-  const { materialUIThemeTokens } = useThemeTokens(themeName);
+  const { muiTokens } = useMaterialThemeTokens(themeName);
 
-  const theme = useMemo(
-    () => createTheme(materialUIThemeTokens),
-    [materialUIThemeTokens]
-  );
+  const theme = useMemo(() => createTheme(muiTokens), [muiTokens]);
 
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };

package/src/components/Button/index.ts

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

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}

@@ -6,7 +6,7 @@ import {
   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}
@@ -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/components/Heading/index.ts

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

package/src/components/Text/index.ts

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

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

@@ -1,7 +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,24 +0,0 @@
-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 {};