norma-library 0.6.986 → 0.6.987

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.6.986",
+  "version": "0.6.987",
   "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/Card.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { ColorVariant } from '@/types';
 import { Card as MuiCard } from '@mui/material';
-import { CardBaseProps } from '../interfaces';
-import { palette } from '../helpers';
+import React from 'react';
 import styled from 'styled-components';
-import { ColorVariant } from '@/types';
+import { palette } from '../helpers';
+import { CardBaseProps } from '../interfaces';
 
 const colorMap: Record<ColorVariant, string> = {
   inherit: palette.inherit,

package/src/components/IconButton.tsx

@@ -1,37 +1,19 @@
-import React from 'react';
 import { IconButton as MuiIconButton } from '@mui/material';
+import { styled, ThemeOptions, useTheme } from '@mui/material/styles';
+import React from 'react';
 import { IconButtonBaseProps } from '../interfaces';
-import { palette } from '../helpers';
-import { styled } from '@mui/material/styles';
-import { ButtonVariant, 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 IconButtonStyled = styled(MuiIconButton)<{
-  circle: string;
-  color: ColorVariant;
-  variant: ButtonVariant;
+  theme: ThemeOptions;
   cursor: string;
-}>(({ circle, color, variant, cursor }) => ({
-  borderRadius: circle === 'true' ? 99 : 5,
-  border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
-  backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
+}>(({ theme, cursor }) => ({
+  borderRadius: '50%',
+  border: `1px solid ${theme.palette.primary.main}`,
+  backgroundColor: theme.palette.primary.main,
   cursor: cursor,
 }));
 
-export const IconButton = ({ circle = false, children, ...props }: IconButtonBaseProps) => {
-  
-  return (
-    <IconButtonStyled circle={`${circle}`} color="primary" variant="text" cursor="default" {...props}>
-      {children}
-    </IconButtonStyled>
-  );
+export const IconButton = ({ children, cursor = 'pointer', ...props }: IconButtonBaseProps) => {
+  const muiTheme = useTheme();
+  return <IconButtonStyled theme={muiTheme} cursor={cursor} {...props}>{children}</IconButtonStyled>;
 };

package/src/components/RangerSlider.tsx

@@ -1,23 +1,11 @@
 import React from 'react';
 import { Box, Slider as MuiSlider, Typography } from '@mui/material';
-import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
-import { ColorVariant } from '@/types';
 import { RangerSliderBaseProps } from '@/interfaces/RangerSlider';
 
-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 RangerSliderStyled = styled(MuiSlider)(() => ({
+const RangerSliderStyled = styled(MuiSlider)(({ theme }) => ({
   height: 8,
-  color: colorMap['primary'],
+    color: theme.palette.primary.main,
   '& .MuiSlider-track': {
     border: 'none',
   },
@@ -25,7 +13,7 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
     height: 18,
     width: 18,
     backgroundColor: '#FFF',
-    border: `2px solid ${colorMap['primary']}`,
+    border: `2px solid ${theme.palette.primary.main}`,
     '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
       boxShadow: 'inherit',
     },
@@ -34,7 +22,7 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
       height: '8px',
       position: 'absolute',
       display: 'block',
-      background: colorMap['primary'],
+      background: theme.palette.primary.main,
     },
   },
   '& .MuiSlider-valueLabel': {
@@ -43,7 +31,7 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
     top: 48,
     position: 'absolute',
     transition: 'none',
-    color: colorMap['primary'],
+    color: theme.palette.primary.main,
     '&:before': {
       bottom: 'inherit',
       top: '-8px',

package/src/components/Tabs.tsx

@@ -1,29 +1,17 @@
-import React from 'react';
 import { Box, Tabs as MuiTabs, Tab } from '@mui/material';
+import { styled, ThemeOptions, useTheme } from '@mui/material/styles';
+import React from 'react';
 import { TabPanelProps, TabsBaseProps } 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 TabsStyled = styled(MuiTabs)<{
-  color: ColorVariant;
-}>(({ color }) => ({
+  theme: ThemeOptions;
+}>(({ theme }) => ({
   borderBottom: '1px solid #e8e8e8',
   '& .Mui-selected': {
-    color: colorMap[color],
+    color: theme.palette.primary.main,
   },
   '& .MuiTabs-indicator': {
-    backgroundColor: colorMap[color],
+    backgroundColor: theme.palette.primary.main,
   },
   '& .MuiButtonBase-root': {
     textTransform: 'none',
@@ -32,10 +20,9 @@ const TabsStyled = styled(MuiTabs)<{
 
 interface StyledTabProps {
   label: string;
-  color: ColorVariant;
 }
 
-const TabStyled = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(({ theme, color }) => ({
+const TabStyled = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(({ theme }) => ({
   textTransform: 'none',
   fontWeight: theme.typography.fontWeightRegular,
   fontSize: theme.typography.pxToRem(15),
@@ -45,7 +32,7 @@ const TabStyled = styled((props: StyledTabProps) => <Tab disableRipple {...props
   top: '5px',
   minWidth: '60px',
   '&.Mui-selected': {
-    color: colorMap[color],
+    color: theme.palette.primary.main,
   },
   '&.Mui-focusVisible': {
     backgroundColor: 'rgba(100, 95, 228, 0.32)',
@@ -80,6 +67,7 @@ function a11yProps(index: number) {
 }
 
 export const Tabs = ({ data = [], color = 'primary', onChange, ...props }: TabsBaseProps) => {
+  const muiTheme = useTheme()
   const [value, setValue] = React.useState(0);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
@@ -90,8 +78,8 @@ export const Tabs = ({ data = [], color = 'primary', onChange, ...props }: TabsB
   return (
     <Box sx={{ width: '100%' }}>
       <Box>
-        <TabsStyled value={value} color={color} onChange={handleChange} aria-label="basic tabs example" {...props}>
-          {data && data.map((item, key) => <TabStyled label={item.label} color={color} {...a11yProps(key)} />)}
+        <TabsStyled value={value} onChange={handleChange} aria-label="basic tabs example" {...props} theme={muiTheme}>
+          {data && data.map((item, key) => <TabStyled label={item.label} {...a11yProps(key)} />)}
         </TabsStyled>
       </Box>
       {data &&

package/src/components/Tag.tsx

@@ -18,7 +18,7 @@ const colorMap: Record<ColorVariant, string> = {
 const TagStyled = styled(MuiTag)({});
 
 export const Tag = ({ label, color = 'primary', outlined = false, ...props }: TagBaseProps) => {
-  
+
   return (
     <TagStyled
       label={label}

package/src/components/TimeLine/TimeLine.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 
-import { Typography } from '@mui/material';
 import {
   Timeline,
-  TimelineItem,
-  TimelineSeparator,
   TimelineConnector,
   TimelineContent,
   TimelineDot,
+  TimelineItem,
   timelineItemClasses,
+  TimelineSeparator,
 } from '@mui/lab';
+import { Typography } from '@mui/material';
 
-import { palette } from '../../helpers';
-import { ColorVariant } from '@/types';
+import { ThemeOptions, useTheme } from '@mui/material/styles';
 import styled from 'styled-components';
 
 export interface TimeLineData {
@@ -23,23 +22,12 @@ export interface TimeLineData {
 
 interface TimeLineProps {
   data: TimeLineData[];
-  theme?: ColorVariant;
-  color?: string;
+  theme?: ThemeOptions;
 }
 
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  // primary: '#DB6619',
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
+  export const TimeLine: React.FC<TimeLineProps> = ({ data }) => {
 
-export const TimeLine: React.FC<TimeLineProps> = ({ data, theme = 'primary', color }) => {
-  const _mainColor = color || colorMap[theme];
+  const muiTheme = useTheme();
 
   const NormaTimeLine = styled(Timeline)`
     .${timelineItemClasses.root} {
@@ -56,7 +44,7 @@ export const TimeLine: React.FC<TimeLineProps> = ({ data, theme = 'primary', col
           content: '';
           width: 70%;
           height: 70%;
-          background: ${_mainColor};
+          background: ${muiTheme.palette.primary.main};
           position: absolute;
           border-radius: 50%;
           top: 50%;
@@ -73,7 +61,7 @@ export const TimeLine: React.FC<TimeLineProps> = ({ data, theme = 'primary', col
       boxShadow: 'none',
       padding: '6px',
       margin: '0',
-      border: `3px solid ${_mainColor}`,
+      border: `3px solid ${muiTheme.palette.primary.main}`,
     };
 
     const lastStyle = {
@@ -93,7 +81,7 @@ export const TimeLine: React.FC<TimeLineProps> = ({ data, theme = 'primary', col
           <TimelineItem key={key} sx={{ minHeight: 'auto' }}>
             <TimelineSeparator>
               <TimelineDot sx={_getDotStyle(!last)} />
-              {last && <TimelineConnector sx={{ bgcolor: _mainColor, width: '5px' }} />}
+              {last && <TimelineConnector sx={{ bgcolor: muiTheme.palette.primary.main, width: '5px' }} />}
             </TimelineSeparator>
             <TimelineContent sx={{ py: 0, pl: 2, pb: '35px' }}>
               <Typography sx={{ m: 'auto 0' }} className="TimelineContent__Date" variant="body1">

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

@@ -1,35 +1,19 @@
-import React from 'react';
 import { styled } from '@mui/material/styles';
-import { TabsProps } from '@mui/material/Tabs';
+import React from 'react';
 
 import { Tab, Tabs } from '@mui/material';
-import { ColorVariant } from '@/types';
-import { palette } from '../../helpers';
-
-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,
-};
 
 interface StyledTabProps {
   label: string;
-  color: ColorVariant;
 }
 
-export const NormaTabs: React.ComponentType<TabsProps & { color: ColorVariant }> = styled(Tabs)<{
-  color: ColorVariant;
-}>(({ color }) => ({
-  borderBottom: '1px solid #e8e8e8',
+export const NormaTabs = styled(Tabs)(({ theme }) => ({
+  borderBottom: `1px solid ${theme.palette.background.paper}`,
   '& .Mui-selected': {
-    color: colorMap[color],
+    color: theme.palette.primary.main,
   },
   '& .MuiTabs-indicator': {
-    backgroundColor: colorMap[color],
+    backgroundColor: theme.palette.primary.main,
   },
   '& .MuiButtonBase-root': {
     textTransform: 'none',
@@ -38,7 +22,7 @@ export const NormaTabs: React.ComponentType<TabsProps & { color: ColorVariant }>
 
 export const NormaTab: React.ComponentType<StyledTabProps> = styled((props: StyledTabProps) => (
   <Tab disableRipple {...props} />
-))(({ theme, color }) => ({
+))(({ theme }) => ({
   textTransform: 'none',
   fontWeight: theme.typography.fontWeightRegular,
   fontSize: theme.typography.pxToRem(15),
@@ -48,10 +32,10 @@ export const NormaTab: React.ComponentType<StyledTabProps> = styled((props: Styl
   top: '5px',
   minWidth: '60px',
   '&.Mui-selected': {
-    color: colorMap[color],
+    color: theme.palette.primary.main,
   },
   '&.Mui-focusVisible': {
-    backgroundColor: 'rgba(100, 95, 228, 0.32)',
+    backgroundColor: theme.palette.background.default,
   },
 }));
 

package/src/providers/NormaProvider.tsx

@@ -1,12 +1,17 @@
-import React from 'react';
-import { ThemeProvider } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material';
 import { ThemeProviderProps } from "@mui/material/styles/ThemeProvider";
+import React from 'react';
+import { newOlosPalette } from '../helpers';
 
-export const NormaProvider = (props:ThemeProviderProps) => {
+export const NormaProvider = (props: ThemeProviderProps) => {
   const { theme, children } = props;
-  
+
+  const newOlosTheme = createTheme({
+    palette: newOlosPalette,
+  })
+
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={theme ? theme : newOlosTheme}>
       {children}
     </ThemeProvider>
   );

package/src/stories/NormaProvider.stories.tsx

@@ -1,331 +0,0 @@
-import { Box, Grid, Stack, Typography } from '@mui/material'
-import { createTheme } from '@mui/material/styles'
-import type { Meta } from '@storybook/react'
-import { Accordion, Button, Card, Paper, ProgressBar, Tag } from '../components'
-import { themes } from '../helpers'
-import { NormaProvider } from '../providers/NormaProvider'
-
-const meta = {
-  title: 'Providers/NormaProvider',
-  component: NormaProvider,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ['light', 'dark', 'newLight'],
-    },
-  },
-} satisfies Meta<typeof NormaProvider>
-
-export default meta
-
-const ComponentShowcase = () => (
-  <Stack spacing={3} sx={{ width: '100%', maxWidth: 800, padding: 3 }}>
-    <Typography variant="h4" gutterBottom>
-      Norma Design System Components
-    </Typography>
-
-    <Paper elevation={2} sx={{ p: 3 }}>
-      <Typography variant="h6" gutterBottom>
-        Buttons
-      </Typography>
-      <Stack direction="row" spacing={2} flexWrap="wrap">
-        <Button variant="contained" color="primary">
-          Primary
-        </Button>
-        <Button variant="contained" color="secondary">
-          Secondary
-        </Button>
-        <Button variant="contained" color="error">
-          Error
-        </Button>
-        <Button variant="contained" color="success">
-          Success
-        </Button>
-        <Button variant="outlined" color="warning">
-          Warning
-        </Button>
-      </Stack>
-    </Paper>
-
-    <Paper elevation={2} sx={{ p: 3 }}>
-      <Typography variant="h6" gutterBottom>
-        Progress Bars
-      </Typography>
-      <Stack spacing={2}>
-        <ProgressBar value={25} />
-        <ProgressBar value={50} color="secondary" />
-        <ProgressBar value={75} color="success" />
-        <ProgressBar value={90} color="warning" />
-      </Stack>
-    </Paper>
-
-    <Paper elevation={2} sx={{ p: 3 }}>
-      <Typography variant="h6" gutterBottom>
-        Cards & Tags
-      </Typography>
-      <Grid container spacing={2}>
-        <Grid item xs={12} sm={6}>
-          <Card sx={{ p: 2 }}>
-            <Typography variant="h6" gutterBottom>
-              Sample Card
-            </Typography>
-            <Typography variant="body2">
-              Card content goes here with the current theme colors.
-            </Typography>
-          </Card>
-        </Grid>
-        <Grid item xs={12} sm={6}>
-          <Stack spacing={2}>
-            <Tag label="Primary Tag" color="primary" />
-            <Tag label="Secondary Tag" color="secondary" />
-            <Tag label="Success Tag" color="success" />
-            <Tag label="Error Tag" color="error" />
-          </Stack>
-        </Grid>
-      </Grid>
-    </Paper>
-
-    <Paper elevation={2} sx={{ p: 3 }}>
-      <Typography variant="h6" gutterBottom>
-        Accordion
-      </Typography>
-      <Accordion
-        label="Theme Configuration"
-        data={[
-          {
-            label: 'Theme Colors',
-            id: 'theme-colors',
-            children: <Typography>These components adapt to the current theme configuration.</Typography>,
-          },
-          {
-            label: 'Customization',
-            id: 'customization',
-            children: <Typography>You can customize colors by passing custom theme options to NormaProvider.</Typography>,
-          },
-        ]}
-      />
-    </Paper>
-  </Stack>
-)
-
-export const DefaultTheme = () => (
-  <NormaProvider theme={themes.light}>
-    <ComponentShowcase />
-  </NormaProvider>
-)
-
-DefaultTheme.storyName = 'Default Theme'
-
-export const DarkTheme = () => (
-  <NormaProvider theme={themes.dark}>
-    <Box sx={{ backgroundColor: 'background.default', minHeight: '100vh', p: 2 }}>
-      <ComponentShowcase />
-    </Box>
-  </NormaProvider>
-)
-
-DarkTheme.storyName = 'Dark Theme'
-
-export const CustomBlueTheme = () => {
-  const customTheme = createTheme({
-    palette: {
-      mode: 'light',
-      primary: {
-        main: '#1976d2',
-        light: '#42a5f5',
-        dark: '#1565c0',
-      },
-      secondary: {
-        main: '#dc004e',
-        light: '#ff5983',
-        dark: '#9a0036',
-      },
-      success: {
-        main: '#2e7d32',
-      },
-      warning: {
-        main: '#ed6c02',
-      },
-      error: {
-        main: '#d32f2f',
-      },
-    },
-  })
-
-  return (
-    <NormaProvider theme={customTheme}>
-      <ComponentShowcase />
-    </NormaProvider>
-  )
-}
-
-CustomBlueTheme.storyName = 'Custom Blue Theme'
-
-export const CustomGreenTheme = () => {
-  const customTheme = createTheme({
-    palette: {
-      mode: 'light',
-      primary: {
-        main: '#388e3c',
-        light: '#6abf69',
-        dark: '#00600f',
-      },
-      secondary: {
-        main: '#7b1fa2',
-        light: '#ae52d4',
-        dark: '#4a0072',
-      },
-      success: {
-        main: '#4caf50',
-      },
-      warning: {
-        main: '#ff9800',
-      },
-      error: {
-        main: '#f44336',
-      },
-    },
-  })
-
-  return (
-    <NormaProvider theme={customTheme}>
-      <ComponentShowcase />
-    </NormaProvider>
-  )
-}
-
-CustomGreenTheme.storyName = 'Custom Green Theme'
-
-export const CustomPurpleDarkTheme = () => {
-  const customTheme = createTheme({
-    palette: {
-      mode: 'dark',
-      primary: {
-        main: '#9c27b0',
-        light: '#d05ce3',
-        dark: '#6a0080',
-      },
-      secondary: {
-        main: '#ff6f00',
-        light: '#ffa040',
-        dark: '#c43e00',
-      },
-      background: {
-        default: '#121212',
-        paper: '#1e1e1e',
-      },
-      success: {
-        main: '#66bb6a',
-      },
-      warning: {
-        main: '#ffa726',
-      },
-      error: {
-        main: '#ef5350',
-      },
-    },
-  })
-
-  return (
-    <NormaProvider theme={customTheme}>
-      <Box sx={{ backgroundColor: 'background.default', minHeight: '100vh', p: 2 }}>
-        <ComponentShowcase />
-      </Box>
-    </NormaProvider>
-  )
-}
-
-CustomPurpleDarkTheme.storyName = 'Custom Purple Dark Theme'
-
-export const MinimalExample = () => (
-  <NormaProvider theme={themes.light}>
-    <Stack spacing={2} alignItems="center" sx={{ p: 4 }}>
-      <Typography variant="h5" color="primary">
-        Welcome to Norma Design System
-      </Typography>
-      <Button variant="contained" color="primary">
-        Get Started
-      </Button>
-      <Tag label="v1.0.0" color="secondary" />
-    </Stack>
-  </NormaProvider>
-)
-
-MinimalExample.storyName = 'Minimal Example'
-
-export const ThemeComparison = () => (
-  <Grid container spacing={4} sx={{ p: 2 }}>
-    <Grid item xs={12} md={4}>
-      <Typography variant="h6" gutterBottom align="center">
-        Default Light Theme
-      </Typography>
-      <NormaProvider theme={themes.light}>
-        <Paper sx={{ p: 2 }}>
-          <Stack spacing={2}>
-            <Button variant="contained" color="primary" fullWidth>
-              Primary Button
-            </Button>
-            <Button variant="contained" color="secondary" fullWidth>
-              Secondary Button
-            </Button>
-            <ProgressBar value={60} />
-            <Tag label="Sample Tag" color="primary" />
-          </Stack>
-        </Paper>
-      </NormaProvider>
-    </Grid>
-
-    <Grid item xs={12} md={4}>
-      <Typography variant="h6" gutterBottom align="center">
-        Dark Theme
-      </Typography>
-      <NormaProvider theme={themes.dark}>
-        <Paper sx={{ p: 2, backgroundColor: 'background.paper' }}>
-          <Stack spacing={2}>
-            <Button variant="contained" color="primary" fullWidth>
-              Primary Button
-            </Button>
-            <Button variant="contained" color="secondary" fullWidth>
-              Secondary Button
-            </Button>
-            <ProgressBar value={60} />
-            <Tag label="Sample Tag" color="primary" />
-          </Stack>
-        </Paper>
-      </NormaProvider>
-    </Grid>
-
-    <Grid item xs={12} md={4}>
-      <Typography variant="h6" gutterBottom align="center">
-        Custom Theme
-      </Typography>
-      <NormaProvider
-        theme={createTheme({
-          palette: {
-            primary: { main: '#e91e63' },
-            secondary: { main: '#00bcd4' },
-          }
-        })}
-      >
-        <Paper sx={{ p: 2 }}>
-          <Stack spacing={2}>
-            <Button variant="contained" color="primary" fullWidth>
-              Primary Button
-            </Button>
-            <Button variant="contained" color="secondary" fullWidth>
-              Secondary Button
-            </Button>
-            <ProgressBar value={60} />
-            <Tag label="Sample Tag" color="primary" />
-          </Stack>
-        </Paper>
-      </NormaProvider>
-    </Grid>
-  </Grid>
-)
-
-ThemeComparison.storyName = 'Theme Comparison'