norma-library 0.5.132 → 0.5.133

package/dist/esm/components/Modal.js

@@ -5,8 +5,8 @@ import { styled } from '@mui/material/styles';
 import { IconButton } from './IconButton';
 import { Button } from './Button';
 var ModalStyled = styled(MuiModal)({});
-var ModalContentStyled = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 421px;\n  transform: translate(-50%, -50%);\n  background-color: #FFF;\n  box-shadow: 24px;\n"], ["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 421px;\n  transform: translate(-50%, -50%);\n  background-color: #FFF;\n  box-shadow: 24px;\n"])));
-var ModalHeaderStyled = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: left;\n  border-bottom: 1px solid #00000033;\n  box-sizing: border-box;\n  margin: 0;\n  position: relative;\n  padding: 22px 26px 15px 26px;\n  justify-content: space-between;\n  display: flex;\n\n  & h2 {\n    font: normal normal 600 18px/30px Source Sans Pro;\n    color: #292929;\n  }\n"], ["\n  text-align: left;\n  border-bottom: 1px solid #00000033;\n  box-sizing: border-box;\n  margin: 0;\n  position: relative;\n  padding: 22px 26px 15px 26px;\n  justify-content: space-between;\n  display: flex;\n\n  & h2 {\n    font: normal normal 600 18px/30px Source Sans Pro;\n    color: #292929;\n  }\n"])));
+var ModalContentStyled = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 421px;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  box-shadow: 24px;\n"], ["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 421px;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  box-shadow: 24px;\n"])));
+var ModalHeaderStyled = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: left;\n  border-bottom: 1px solid #00000033;\n  box-sizing: border-box;\n  margin: 0;\n  position: relative;\n  padding: 22px 26px 15px 26px;\n  justify-content: space-between;\n  display: flex;\n\n  & h2 {\n    color: #292929;\n  }\n"], ["\n  text-align: left;\n  border-bottom: 1px solid #00000033;\n  box-sizing: border-box;\n  margin: 0;\n  position: relative;\n  padding: 22px 26px 15px 26px;\n  justify-content: space-between;\n  display: flex;\n\n  & h2 {\n    color: #292929;\n  }\n"])));
 var ModalFooterStyled = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-top: 1px solid #00000033;\n  box-sizing: border-box;\n  position: relative;\n  padding: 24px;\n  display: flex;\n  justify-content: end;\n  gap: 24px;\n"], ["\n  border-top: 1px solid #00000033;\n  box-sizing: border-box;\n  position: relative;\n  padding: 24px;\n  display: flex;\n  justify-content: end;\n  gap: 24px;\n"])));
 var ModalContainerChildrenStyled = styled(Box)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding: 24px;\n"], ["\n  box-sizing: border-box;\n  padding: 24px;\n"])));
 export function Close() {
@@ -19,8 +19,8 @@ export var Modal = function (_a) {
     return (React.createElement(ModalStyled, __assign({ open: true }, props),
         React.createElement(ModalContentStyled, __assign({}, paperProps),
             props.title && (React.createElement(ModalHeaderStyled, null,
-                React.createElement(Typography, { variant: 'h2' }, props.title),
-                React.createElement(IconButton, { onClick: props.onClose, size: "small", color: "inherit", variant: "text", cursor: "pointer", sx: { padding: "0" } },
+                React.createElement(Typography, { variant: "h2" }, props.title),
+                React.createElement(IconButton, { onClick: props.onClose, size: "small", color: "inherit", variant: "text", cursor: "pointer", sx: { padding: '0' } },
                     React.createElement(Close, null)))),
             React.createElement(ModalContainerChildrenStyled, null, children),
             !!((_b = props.action) === null || _b === void 0 ? void 0 : _b.length) && (React.createElement(ModalFooterStyled, null, props.action.map(function (_a, key) {

package/dist/esm/components/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,IAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AAEzC,IAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,sRAAA,mNAUvC,IAAA,CAAC;AAEF,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,uXAAA,oTAcpC,IAAA,CAAC;AAEF,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,wOAAA,qKAQpC,IAAA,CAAC;AAEF,IAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,oHAAA,iDAG/C,IAAA,CAAC;AAEF,MAAM,UAAU,KAAK;IACnB,OAAO,CACL,6BACE,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI;QAEV,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+LAA+L,GACjM,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,IAAM,KAAK,GAAG,UAAC,EAAwD;;IAAtD,IAAA,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,UAAU,gBAAA,EAAK,KAAK,cAAtC,kCAAwC,CAAF;IAC1D,OAAO,CACL,oBAAC,WAAW,aAAC,IAAI,UAAK,KAAK;QACzB,oBAAC,kBAAkB,eAAK,UAAU;YAC/B,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,iBAAiB;gBAChB,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,IAAE,KAAK,CAAC,KAAK,CAAc;gBACnD,oBAAC,UAAU,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,MAAM,EACd,MAAM,EAAC,SAAS,EAChB,EAAE,EAAE,EAAC,OAAO,EAAE,GAAG,EAAC;oBAElB,oBAAC,KAAK,OAAG,CACE,CACK,CACrB;YACD,oBAAC,4BAA4B,QAC1B,QAAQ,CACoB;YAC9B,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAM,CAAA,IAAK,CAC1B,oBAAC,iBAAiB,QACf,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAC,EAA8C,EAAE,GAAG;gBAAlD,IAAA,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAK,IAAI,cAA7C,+CAA8C,CAAD;gBAAW,OAAA,CACzE,oBAAC,MAAM,aACL,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,IAAI,IACN,IAAI,GAEP,KAAK,CACC,CACV,CAAA;aAAA,CAAC,CACgB,CACrB,CACkB,CACT,CACf,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,IAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AAEzC,IAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,sRAAA,mNAUvC,IAAA,CAAC;AAEF,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,+TAAA,4PAapC,IAAA,CAAC;AAEF,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,wOAAA,qKAQpC,IAAA,CAAC;AAEF,IAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,oHAAA,iDAG/C,IAAA,CAAC;AAEF,MAAM,UAAU,KAAK;IACnB,OAAO,CACL,6BACE,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI;QAEV,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+LAA+L,GACjM,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,IAAM,KAAK,GAAG,UAAC,EAAwD;;IAAtD,IAAA,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,UAAU,gBAAA,EAAK,KAAK,cAAtC,kCAAwC,CAAF;IAC1D,OAAO,CACL,oBAAC,WAAW,aAAC,IAAI,UAAK,KAAK;QACzB,oBAAC,kBAAkB,eAAK,UAAU;YAC/B,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,iBAAiB;gBAChB,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,IAAE,KAAK,CAAC,KAAK,CAAc;gBACnD,oBAAC,UAAU,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,MAAM,EACd,MAAM,EAAC,SAAS,EAChB,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;oBAEpB,oBAAC,KAAK,OAAG,CACE,CACK,CACrB;YACD,oBAAC,4BAA4B,QAAE,QAAQ,CAAgC;YACtE,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAM,CAAA,IAAI,CACzB,oBAAC,iBAAiB,QACf,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAC,EAAgD,EAAE,GAAG;gBAAnD,IAAA,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAK,IAAI,cAA9C,+CAAgD,CAAF;gBAAY,OAAA,CAC3E,oBAAC,MAAM,aAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,IAAM,IAAI,GACpF,KAAK,CACC,CACV,CAAA;aAAA,CAAC,CACgB,CACrB,CACkB,CACT,CACf,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.5.132",
+  "version": "0.5.133",
   "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/Modal.tsx

@@ -15,7 +15,7 @@ const ModalContentStyled = styled(Paper)`
   left: 50%;
   width: 421px;
   transform: translate(-50%, -50%);
-  background-color: #FFF;
+  background-color: #fff;
   box-shadow: 24px;
 `;
 
@@ -30,7 +30,6 @@ const ModalHeaderStyled = styled(Box)`
   display: flex;
 
   & h2 {
-    font: normal normal 600 18px/30px Source Sans Pro;
     color: #292929;
   }
 `;
@@ -75,33 +74,24 @@ export const Modal = ({ open, children, paperProps, ...props }: ModalBaseProps)
       <ModalContentStyled {...paperProps}>
         {props.title && (
           <ModalHeaderStyled>
-            <Typography variant='h2'>{props.title}</Typography>
+            <Typography variant="h2">{props.title}</Typography>
             <IconButton
               onClick={props.onClose}
               size="small"
               color="inherit"
               variant="text"
               cursor="pointer"
-              sx={{padding: "0"}}
+              sx={{ padding: '0' }}
             >
               <Close />
             </IconButton>
           </ModalHeaderStyled>
         )}
-        <ModalContainerChildrenStyled>
-          {children}
-        </ModalContainerChildrenStyled>
-        {!!props.action?.length  && (
+        <ModalContainerChildrenStyled>{children}</ModalContainerChildrenStyled>
+        {!!props.action?.length && (
           <ModalFooterStyled>
-            {props.action.map(({color, variant, action, size, label, ...rest}, key) => (
-              <Button
-                color={color}
-                variant={variant}
-                key={key}
-                onClick={action}
-                size={size}
-                {...rest}
-              >
+            {props.action.map(({ color, variant, action, size, label, ...rest }, key) => (
+              <Button color={color} variant={variant} key={key} onClick={action} size={size} {...rest}>
                 {label}
               </Button>
             ))}

package/src/stories/RangerSlider.stories.tsx

@@ -1,58 +1,158 @@
 import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 import { RangerSlider } from '../components';
-import { ColorVariant, SizeVariant, TextFieldSizeVariant } from '../types';
+import { ColorVariant, TextFieldSizeVariant } from '../types';
 
 const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
-
 const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
 
-const meta = {
+const meta: Meta<typeof RangerSlider> = {
   title: 'Display/RangerSlider',
   component: RangerSlider,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof RangerSlider>;
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: colors,
+      description: 'Define a cor do slider.',
+    },
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+      description: 'Define o tamanho do slider.',
+    },
+    min: {
+      control: { type: 'number' },
+      defaultValue: 0,
+      description: 'Define o valor mínimo do slider.',
+    },
+    max: {
+      control: { type: 'number' },
+      defaultValue: 100,
+      description: 'Define o valor máximo do slider.',
+    },
+    step: {
+      control: { type: 'number' },
+      defaultValue: 1,
+      description: 'Define o passo do slider.',
+    },
+    valueLabelDisplay: {
+      control: { type: 'select' },
+      options: ['on', 'auto', 'off'],
+      defaultValue: 'auto',
+      description: 'Controla a exibição dos rótulos de valor.',
+    },
+    valueLabelFormat: {
+      control: { type: 'function' },
+      description: 'Função para formatar o rótulo do valor.',
+    },
+    defaultValue: {
+      control: { type: 'number' },
+      defaultValue: 50,
+      description: 'Define o valor padrão do slider.',
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Função callback que é disparada quando o valor do slider é alterado.',
+    },
+  },
+};
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = {
-  args: {
-    max: 90,
-    min: 10,
-    value: [20, 80],
-    color: 'primary',
-  },
-};
-
 function valuetext(value: number) {
   return `${value}°C`;
 }
 
-export const RangerSliderBasic = () => {
-  const [value, setValue] = React.useState<number[]>([20, 37]);
-
-  const handleChange = (event: Event, newValue: number | number[]) => {
-    setValue(newValue as number[]);
-  };
-
-  return (
-    <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
-      <RangerSlider
-        getAriaLabel={() => 'Temperature range'}
-        value={value}
-        onChange={handleChange}
-        valueLabelDisplay="on"
-        getAriaValueText={valuetext}
-      />
-    </div>
-  );
+export const RangerSliderBasic: Story = {
+  args: {
+    value: [20, 37],
+    valueLabelDisplay: 'on',
+    getAriaLabel: () => 'Faixa de temperatura',
+  },
+  argTypes: {
+    value: {
+      control: { type: 'array' },
+    },
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState<number[]>(args.value);
+
+    const handleChange = (event: Event, newValue: number | number[]) => {
+      setValue(newValue as number[]);
+      args.onChange?.(event, newValue, 0);  
+    };
+
+    return (
+      <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
+        <RangerSlider
+          {...args}
+          value={value}
+          onChange={handleChange}
+        />
+      </div>
+    );
+  },
+  name: 'RangerSlider Básico',
 };
 
-RangerSliderBasic.storyName = 'RangerSlider Basic';
+export const RangerSliderFormatter: Story = {
+  args: {
+    value: [0, 540],
+    valueLabelDisplay: 'on',
+    getAriaLabel: () => 'Faixa de tempo',
+    valueLabelFormat: (value: number) => {
+      if (value < 60) {
+        return `${value}s`;
+      } else if (value < 3600) {
+        const minutes = Math.floor(value / 60);
+        const seconds = value % 60;
+        return seconds === 0 ? `${minutes}min` : `${minutes}min ${seconds}s`;
+      } else {
+        const hours = Math.floor(value / 3600);
+        const minutes = Math.floor((value % 3600) / 60);
+        const seconds = value % 60;
+        if (minutes === 0 && seconds === 0) {
+          return `${hours}h`;
+        } else if (minutes === 0) {
+          return `${hours}h ${seconds}s`;
+        } else if (seconds === 0) {
+          return `${hours}h ${minutes}min`;
+        } else {
+          return `${hours}h ${minutes}min ${seconds}s`;
+        }
+      }
+    },
+    min: 0,
+    max: 1000,
+  },
+  argTypes: {
+    value: {
+      control: { type: 'array' },
+    },
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState<number[]>(args.value);
+
+    const handleChange = (event: Event, newValue: number | number[]) => {
+      setValue(newValue as number[]);
+      args.onChange?.(event, newValue, 0);  
+    };
+
+    return (
+      <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
+        <RangerSlider
+          {...args}
+          value={value}
+          onChange={handleChange}
+        />
+      </div>
+    );
+  },
+  name: 'RangerSlider com Formatter',
+};