@groupeactual/ui-kit 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A simple template for a custom React component library",
   "scripts": {
     "build": "rollup -c",
@@ -33,14 +33,15 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.0",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@groupeactual/design-tokens": "workspace:^0.1.2",
+    "@groupeactual/design-tokens": "workspace:^0.1.3",
     "@mui/base": "^5.0.0-alpha.92",
     "@mui/material": "^5.10.0",
     "@mui/system": "^5.9.3",

package/src/DesignSystemProvider.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren, useState} from 'react';
+import { DesignSystemContext } from '@groupeactual/design-tokens';
+
+interface Props {
+  name: string;
+}
+
+const DesignSystemProvider = ({children, name: themeName} : PropsWithChildren<Props>) => {
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+
+  const toggleDarkTheme = (): void => {
+    setIsDarkTheme(!isDarkTheme);
+  }
+
+  return (<DesignSystemContext.Provider value={{ isDarkTheme, themeName, toggleDarkTheme}}>
+      {children}
+    </DesignSystemContext.Provider>);
+}
+
+export default DesignSystemProvider;

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

@@ -0,0 +1,23 @@
+.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

@@ -0,0 +1,19 @@
+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

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

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

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

package/src/index.ts

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

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

@@ -0,0 +1,32 @@
+import { PropsWithChildren } from 'react';
+import { createTheme, ThemeProvider, Typography, TypographyProps } from "@mui/material";
+import { useThemeTokens } from "@groupeactual/design-tokens";
+
+interface Props
+  extends TypographyProps
+  {
+    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  }
+
+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>;
+};
+
+export default ActHeading;

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

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

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

@@ -0,0 +1,8 @@
+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

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

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

@@ -0,0 +1,2 @@
+export { default as ActTextField } from "./TextField";
+export { default as ActHeading } from "./Heading";

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

@@ -0,0 +1,44 @@
+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

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

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

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