norma-library 0.6.987 → 0.6.988

package/.storybook/{preview.ts → preview.tsx}

@@ -1,6 +1,17 @@
 import type { Preview } from '@storybook/react';
+import { themes } from '../src/helpers';
+import { NormaProvider } from '../src/providers/NormaProvider';
 
 const preview: Preview = {
+  decorators: [
+    (Story) => {
+      return (
+        <NormaProvider theme={themes.light}>
+          <Story />
+        </NormaProvider>
+      );
+    }
+  ],
   parameters: {
     docs: {
       source: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.6.987",
+  "version": "0.6.988",
   "private": false,
   "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
   "scripts": {

package/src/components/ChatMessage.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { ChatMessageProps } from '@/interfaces';
 import { Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { ChatMessageProps } from '@/interfaces';
+import React from 'react';
+import { olosPalette } from '../helpers';
 
 const Item = styled(Box)<{
   orient?: string;
 }>(({ orient }) => ({
-  borderColor: '#ccc',
   display: 'flex',
   position: 'relative',
   width: '100%',
@@ -15,28 +15,32 @@ const Item = styled(Box)<{
   alignItems: 'center',
 }));
 
-const ContainerStyled = styled(Box)({
+const ContainerStyled = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   minWidth: '640px',
-  backgroundColor: '#F0F0F0',
-  padding: '10px',
-});
+  backgroundColor: theme?.palette?.grey?.[100] || '#F0F0F0',
+  padding: theme?.spacing?.(1.25) || '10px',
+}));
 
 const BoxStyled = styled(Box)<{
   orient?: string;
-}>(({ orient }) => ({
+}>(({ theme, orient }) => ({
   width: '70%',
-  backgroundColor: orient === 'replay' ? '#E18B50' : '#FFF',
-  color: orient === 'replay' ? '#FFF' : '#4D4F5C',
+  backgroundColor: orient === 'replay'
+    ? theme?.palette?.primary?.main || olosPalette.primary.main
+    : theme?.palette?.background?.paper || '#FFF',
+  color: orient === 'replay'
+    ? theme?.palette?.primary?.contrastText || '#FFF'
+    : theme?.palette?.text?.primary || '#4D4F5C',
   borderTopLeftRadius: 30,
   borderTopRightRadius: 30,
   borderBottomLeftRadius: orient === 'me' ? 2 : 30,
   borderBottomRightRadius: orient === 'me' ? 30 : 2,
-  marginLeft: orient === 'replay' ? '10px' : 0,
-  marginRight: orient === 'me' ? '10px' : 0,
-  padding: 20,
+  marginLeft: orient === 'replay' ? theme?.spacing?.(1.25) || '10px' : 0,
+  marginRight: orient === 'me' ? theme?.spacing?.(1.25) || '10px' : 0,
+  padding: theme?.spacing?.(2.5) || 20,
 }));
 
 export const ChatMessage: React.FC<ChatMessageProps> = ({ data }) => {
@@ -48,31 +52,38 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({ data }) => {
           <BoxStyled orient={item.send}>
             <Typography
               variant="subtitle2"
-              style={{
+              sx={{
                 marginBottom: '5px',
-                font: 'normal normal 600 16px/20px Source Sans Pro',
+                fontWeight: 600,
+                fontSize: '16px',
+                lineHeight: '20px',
+                fontFamily: theme => theme?.typography?.fontFamily || 'Source Sans Pro',
               }}
             >
               {item.name}
             </Typography>
             <Typography
               variant="body1"
-              style={{
-                font: 'normal normal normal 16px/20px Source Sans Pro',
+              sx={{
+                fontSize: '16px',
+                lineHeight: '20px',
+                fontFamily: theme => theme?.typography?.fontFamily || 'Source Sans Pro',
               }}
             >
               {item.message}
             </Typography>
             <Typography
               variant="caption"
-              style={{
+              sx={{
                 position: 'absolute',
                 bottom: '-18px',
                 left: item.send === 'me' ? 0 : 'auto',
                 right: item.send === 'me' ? 'auto' : 0,
-                font: 'normal normal normal 11px/13px Source Sans Pro',
+                fontSize: '11px',
+                lineHeight: '13px',
+                fontFamily: theme => theme?.typography?.fontFamily || 'Source Sans Pro',
                 opacity: 0.5,
-                color: '#4D4F5C',
+                color: theme => theme?.palette?.text?.secondary || '#4D4F5C',
               }}
             >
               {item.time}

package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts

@@ -17,7 +17,7 @@ export const ChatMessageBalloonRowStyle: any = styled('div')<{ direction: string
 `;
 
 export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>`
-  background-color: ${props => (props.direction === 'I' ? '#FFF' : '#E18B50')};
+  background-color: ${props => (props.direction === 'I' ? props.theme.palette.background.paper : props.theme.palette.primary.main)};
   border: 2px solid transparent;
   border-radius: ${props => (props.direction === 'I' ? '20px 20px 0px 20px' : '20px 20px 20px 0px')};
   box-sizing: border-box;
@@ -29,20 +29,20 @@ export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>
   transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 
   &.is-highlight {
-    border: 2px solid #8a8888;
+    border: 2px solid ${props => props.theme.palette.info.light};
   }
 
   &.is-interactive {
     cursor: pointer;
 
     &:hover {
-      border: 2px solid #8a8888;
+      border: 2px solid ${props => props.theme.palette.primary.light};
     }
   }
 `;
 
 export const ChatMessageDateStyle: any = styled(Typography)`
-  color: #43425d;
+  color: ${props => props.theme.palette.text.secondary};
   opacity: 0.5;
 `;
 

package/src/components/IconButton.tsx

@@ -1,19 +1,46 @@
+import { ButtonVariant, ColorVariant } from '@/types';
 import { IconButton as MuiIconButton } from '@mui/material';
-import { styled, ThemeOptions, useTheme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 import { IconButtonBaseProps } from '../interfaces';
 
 const IconButtonStyled = styled(MuiIconButton)<{
-  theme: ThemeOptions;
+  circle: string;
+  color: ColorVariant;
+  variant: ButtonVariant;
   cursor: string;
-}>(({ theme, cursor }) => ({
-  borderRadius: '50%',
-  border: `1px solid ${theme.palette.primary.main}`,
-  backgroundColor: theme.palette.primary.main,
-  cursor: cursor,
-}));
+}>(({ theme, circle, color, variant, cursor }) => {
+  const colorMap: Record<ColorVariant, string> = {
+    inherit: theme.palette.text.primary,
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    error: theme.palette.error.main,
+    warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
+    success: theme.palette.success.main,
+  };
 
-export const IconButton = ({ children, cursor = 'pointer', ...props }: IconButtonBaseProps) => {
-  const muiTheme = useTheme();
-  return <IconButtonStyled theme={muiTheme} cursor={cursor} {...props}>{children}</IconButtonStyled>;
+  return {
+    borderRadius: circle === 'true' ? 99 : 5,
+    border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
+    backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
+    cursor: cursor,
+
+    '&:hover': {
+      backgroundColor:
+        variant === 'contained'
+          ? theme.palette.action.hover
+          : variant === 'outlined'
+          ? theme.palette.action.hover
+          : 'none',
+    },
+  };
+});
+
+export const IconButton = ({ circle = false, children, ...props }: IconButtonBaseProps) => {
+  return (
+    <IconButtonStyled circle={`${circle}`} color="primary" variant="text" cursor="default" {...props}>
+      {children}
+    </IconButtonStyled>
+  );
 };

package/src/components/Icons.tsx

@@ -1,10 +1,10 @@
-import React, { FunctionComponent } from 'react';
+import styled from '@emotion/styled';
 import { SvgIconComponent } from '@mui/icons-material';
-import { iconsSVG } from './Svgs';
-import { IconColors, IconScale } from '../types';
+import { useTheme } from '@mui/material';
+import React, { FunctionComponent } from 'react';
 import { IconsProps, SvgProps } from '../interfaces/Icons';
-import styled from '@emotion/styled';
-import { palette } from '../helpers';
+import { IconScale } from '../types';
+import { iconsSVG } from './Svgs';
 
 export const Svg = styled.svg<SvgProps>(
   {
@@ -24,19 +24,6 @@ const scaleSize: Partial<Record<IconScale, number>> = {
   '3xlarge': 40,
 };
 
-const colors: Record<IconColors, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  info: palette.info,
-  success: palette.success,
-  warning: palette.warning,
-  white: palette.white,
-  black: palette.black,
-};
-
-
 export const Icons: FunctionComponent<IconsProps> = ({
   icon,
   scale,
@@ -44,6 +31,22 @@ export const Icons: FunctionComponent<IconsProps> = ({
   color = 'inherit',
   ...props
 }: IconsProps) => {
+
+  const theme = useTheme()
+
+  const colors: Record<string, string> = {
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    error: theme.palette.error.main,
+    info: theme.palette.info.main,
+    success: theme.palette.success.main,
+    warning: theme.palette.warning.main,
+    action: theme.palette.action.disabled,
+    inherit: theme.palette.text.primary,
+    white: '#ffffff',
+    black: '#000000',
+  };
+
   let width = 24;
   let height = 24;
   if (scale) {
@@ -83,4 +86,4 @@ export const Icons: FunctionComponent<IconsProps> = ({
       )}
     </Svg>
   );
-};
+};

package/src/components/NormaChatMessageBalloon/styles.ts

@@ -10,16 +10,14 @@ export const ChatMessageBalloonRowStyle: any = styled('div')<{ direction: string
   display: flex;
   margin-bottom: 8px;
   flex-direction: ${props => (props.direction === 'I' ? 'row-reverse' : 'row')};
-  justify-content: flex-start;
-  align-items: flex-start;
-  vertical-align: middle;
+
   &:last-child {
     margin-bottom: 0px;
   }
 `;
 
 export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>`
-  background-color: ${props => (props.direction === 'I' ? '#FFF' : '#E18B50')};
+  background-color: ${props => (props.direction === 'I' ? props.theme.palette.background.paper : props.theme.palette.primary.main)};
   border: 2px solid transparent;
   border-radius: ${props => (props.direction === 'I' ? '20px 20px 0px 20px' : '20px 20px 20px 0px')};
   box-sizing: border-box;
@@ -31,22 +29,21 @@ export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>
   transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 
   &.is-highlight {
-    border: 2px solid #8a8888;
+    border: 2px solid ${props => props.theme.palette.info.light};
   }
 
   &.is-interactive {
     cursor: pointer;
 
     &:hover {
-      border: 2px solid #8a8888;
+      border: 2px solid ${props => props.theme.palette.primary.light};
     }
   }
 `;
 
 export const ChatMessageDateStyle: any = styled(Typography)`
-  color: #43425d;
+  color: ${props => props.theme.palette.text.secondary};
   opacity: 0.5;
-  margin-top: 7px;
 `;
 
 export const ChatMessageChildrenStyle: any = styled('div')<{ direction: string }>`
@@ -56,4 +53,4 @@ export const ChatMessageChildrenStyle: any = styled('div')<{ direction: string }
   flex: 1;
   justify-content: ${props => (props.direction === 'I' ? 'end' : 'start')};
   padding: 8px;
-`;
+`;

package/src/components/RadioGroup.tsx

@@ -16,7 +16,7 @@ const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
 
 export const RadioGroup = ({ ...props }: RadioBaseProps) => {
   const { onChange } = props;
-  
+
   return (
     <FormControl disabled={props.disabled}>
       <FormLabel id={props.id}>{props.label}</FormLabel>

package/src/components/Table/components/pagination/styles.tsx

@@ -1,6 +1,6 @@
-import styled from "styled-components";
+import { styled } from "@mui/material/styles";
 
-export const Pagination = styled.div`
+export const Pagination = styled('div')`
   width: 100%;
   margin: 24px 0 0 0;
   display: flex;
@@ -9,21 +9,21 @@ export const Pagination = styled.div`
     display: flex;
     gap: 8px;
     .button {
-      border: 1px solid #E8E9EC;
-      background: #fff;
+      border: 1px solid ${props => props.theme.palette.divider};
+      background: ${props => props.theme.palette.background.paper};
       border-radius: 4px;
-      color: #4D4F5C;
+      color: ${props => props.theme.palette.text.primary};
       cursor: pointer;
       &:disabled {
         opacity: 0.4;
       }
     }
     .button-active {
-      border: 1px solid #FFDB9F;
-      background: #FFDB9F;
-      color: #B74616;
+      border: 1px solid ${props => props.theme.palette.primary.light};
+      background: ${props => props.theme.palette.primary.main};
+      color: ${props => props.theme.palette.primary.contrastText};
       border-radius: 4px;
       cursor: pointer;
     }
   }
-`
+`

package/src/components/Tabs.tsx

@@ -27,7 +27,7 @@ const TabStyled = styled((props: StyledTabProps) => <Tab disableRipple {...props
   fontWeight: theme.typography.fontWeightRegular,
   fontSize: theme.typography.pxToRem(15),
   marginRight: theme.spacing(1),
-  color: '#666666',
+  color: theme.palette.text.secondary,
   padding: '5px 15px',
   top: '5px',
   minWidth: '60px',

package/src/components/Tag.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
 import { Chip as MuiTag } from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
+import React from 'react';
 import { TagBaseProps } from '../interfaces';
-import { palette } from '../helpers';
-import { styled } from '@mui/material/styles';
-import { ColorVariant } from '@/types';
 
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
 
-const TagStyled = styled(MuiTag)({});
+const TagStyled = styled(MuiTag)({
+  color: '#FFFF',
+});
 
 export const Tag = ({ label, color = 'primary', outlined = false, ...props }: TagBaseProps) => {
+  const theme = useTheme()
 
+  const colorMap: Record<string, string> = {
+  primary: theme.palette.primary.main,
+  secondary: theme.palette.secondary.main,
+  error: theme.palette.error.main,
+  warning: theme.palette.warning.main,
+  info: theme.palette.info.main,
+  success: theme.palette.success.main,
+};
   return (
     <TagStyled
       label={label}

package/src/components/UncontrolledTable/components/pagination/pagination.styles.tsx

@@ -1,29 +1,30 @@
-import styled from "styled-components";
+import { styled } from "@mui/material/styles";
+import { olosPalette } from "../../../../helpers";
 
-export const Pagination = styled.div`
-  width: 100%;
-  margin: 24px 0 0 0;
-  display: flex;
-  justify-content: center;
-  .content {
-    display: flex;
-    gap: 8px;
-    .button {
-      border: 1px solid #E8E9EC;
-      background: #fff;
-      border-radius: 4px;
-      color: #4D4F5C;
-      cursor: pointer;
-      &:disabled {
-        opacity: 0.4;
-      }
-    }
-    .button-active {
-      border: 1px solid #FFDB9F;
-      background: #FFDB9F;
-      color: #B74616;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-  }
-`
+export const Pagination = styled('div')(({ theme }) => ({
+  width: '100%',
+  margin: '24px 0 0 0',
+  display: 'flex',
+  justifyContent: 'center',
+  '& .content': {
+    display: 'flex',
+    gap: '8px',
+    '& .button': {
+      border: `1px solid ${theme?.palette?.divider || '#E8E9EC'}`,
+      background: theme?.palette?.background?.paper || '#fff',
+      borderRadius: '4px',
+      color: theme?.palette?.text?.secondary || '#4D4F5C',
+      cursor: 'pointer',
+      '&:disabled': {
+        opacity: 0.4,
+      },
+    },
+    '& .button-active': {
+      border: `1px solid ${theme?.palette?.primary?.light || olosPalette.primary.main}`,
+      background: theme?.palette?.primary?.light || '#FFDB9F',
+      color: theme?.palette?.primary?.dark || '#B74616',
+      borderRadius: '4px',
+      cursor: 'pointer',
+    },
+  },
+}));

package/src/components/UncontrolledTable/components/pagination/pagination.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Pagination as MuiPagination, PaginationItem } from '@mui/material';
+import React from 'react';
 import * as S from './pagination.styles';
 
 interface PaginationProps {

package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx

@@ -27,7 +27,7 @@ export const NormaTab: React.ComponentType<StyledTabProps> = styled((props: Styl
   fontWeight: theme.typography.fontWeightRegular,
   fontSize: theme.typography.pxToRem(15),
   marginRight: theme.spacing(1),
-  color: '#666666',
+  color: theme.palette.text.secondary,
   padding: '5px 15px',
   top: '5px',
   minWidth: '60px',

package/src/helpers/colors.ts

@@ -225,6 +225,27 @@ export const newOlosPalette: PaletteOptions = {
   }
 };
 
+export const mockPalette: PaletteOptions = {
+  primary: {
+   main: '#fc92ee',
+  },
+  secondary: {
+    main: '#43bbf2',
+  },
+  error: {
+    main: '#d63643',
+  },
+  warning: {
+    main: '#ffc300',
+  },
+  info: {
+    main: '#71d5f7',
+  },
+  success: {
+    main: '#6bc235',
+  },
+};
+
 export const lightTheme = createTheme({
   palette: {
     mode: 'light',
@@ -250,6 +271,13 @@ export const darkTheme = createTheme({
   },
 });
 
+export const mockTheme = createTheme({
+  palette: {
+    mode: 'light',
+    ...mockPalette,
+  },
+});
+
 export const themes = {
   light: lightTheme,
   dark: darkTheme,

package/src/providers/NormaProvider.tsx

@@ -6,12 +6,17 @@ import { newOlosPalette } from '../helpers';
 export const NormaProvider = (props: ThemeProviderProps) => {
   const { theme, children } = props;
 
-  const newOlosTheme = createTheme({
-    palette: newOlosPalette,
-  })
+  const getTheme = () => {
+    if (theme) return theme;
+    return createTheme({
+      palette: newOlosPalette,
+    });
+  };
+
+  const appTheme = getTheme();
 
   return (
-    <ThemeProvider theme={theme ? theme : newOlosTheme}>
+    <ThemeProvider theme={appTheme}>
       {children}
     </ThemeProvider>
   );

package/src/stories/IconButton.stories.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
-import { IconButton, Icons } from '../components'
 import type { Meta, StoryObj } from '@storybook/react'
-import { ButtonVariant, SizeVariant, ColorVariant } from '../types'
+import { IconButton, Icons } from '../components'
+import { ButtonVariant, ColorVariant, SizeVariant } from '../types'
 
 const sizes: SizeVariant[] = ['small', 'medium', 'large']
 const variants: ButtonVariant[] = ['text', 'outlined', 'contained']
@@ -39,6 +38,7 @@ export const Playground: Story = {
     size: 'medium',
     color: 'primary',
     variant: 'text',
+    circle: true,
   },
 }
 

package/src/stories/RadioGroup.stories.tsx

@@ -1,7 +1,5 @@
-import React from 'react'
-import { RadioGroup } from '../components/RadioGroup'
 import type { Meta, StoryObj } from '@storybook/react'
-import { SizeVariant } from '../types'
+import { RadioGroup } from '../components/RadioGroup'
 
 const meta = {
   title: 'Form/RadioGroup',

package/src/stories/RangerSlider.stories.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
 import { RangerSlider } from '../components'
 import { ColorVariant, TextFieldSizeVariant } from '../types'
-import { TextField } from '@mui/material'
 
 const colors: ColorVariant[] = [
   'inherit',