norma-library 0.5.132 → 0.5.133

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/esm/components/Modal.js +4 -4
  2. package/dist/esm/components/Modal.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/components/Modal.tsx +7 -17
  5. package/src/stories/RangerSlider.stories.tsx +134 -34
package/dist/esm/components/Modal.js CHANGED
@@ -5,8 +5,8 @@ import { styled } from '@mui/material/styles';
5
5
  import { IconButton } from './IconButton';
6
6
  import { Button } from './Button';
7
7
  var ModalStyled = styled(MuiModal)({});
8
- 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"])));
9
- 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"])));
8
+ 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"])));
9
+ 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"])));
10
10
  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"])));
11
11
  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"])));
12
12
  export function Close() {
@@ -19,8 +19,8 @@ export var Modal = function (_a) {
19
19
  return (React.createElement(ModalStyled, __assign({ open: true }, props),
20
20
  React.createElement(ModalContentStyled, __assign({}, paperProps),
21
21
  props.title && (React.createElement(ModalHeaderStyled, null,
22
- React.createElement(Typography, { variant: 'h2' }, props.title),
23
- React.createElement(IconButton, { onClick: props.onClose, size: "small", color: "inherit", variant: "text", cursor: "pointer", sx: { padding: "0" } },
22
+ React.createElement(Typography, { variant: "h2" }, props.title),
23
+ React.createElement(IconButton, { onClick: props.onClose, size: "small", color: "inherit", variant: "text", cursor: "pointer", sx: { padding: '0' } },
24
24
  React.createElement(Close, null)))),
25
25
  React.createElement(ModalContainerChildrenStyled, null, children),
26
26
  !!((_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 CHANGED
@@ -1 +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"}
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,+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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "norma-library",
3
- "version": "0.5.132",
3
+ "version": "0.5.133",
4
4
  "private": false,
5
5
  "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.",
6
6
  "scripts": {
package/src/components/Modal.tsx CHANGED
@@ -15,7 +15,7 @@ const ModalContentStyled = styled(Paper)`
15
15
  left: 50%;
16
16
  width: 421px;
17
17
  transform: translate(-50%, -50%);
18
- background-color: #FFF;
18
+ background-color: #fff;
19
19
  box-shadow: 24px;
20
20
  `;
21
21
 
@@ -30,7 +30,6 @@ const ModalHeaderStyled = styled(Box)`
30
30
  display: flex;
31
31
 
32
32
  & h2 {
33
- font: normal normal 600 18px/30px Source Sans Pro;
34
33
  color: #292929;
35
34
  }
36
35
  `;
@@ -75,33 +74,24 @@ export const Modal = ({ open, children, paperProps, ...props }: ModalBaseProps)
75
74
  <ModalContentStyled {...paperProps}>
76
75
  {props.title && (
77
76
  <ModalHeaderStyled>
78
- <Typography variant='h2'>{props.title}</Typography>
77
+ <Typography variant="h2">{props.title}</Typography>
79
78
  <IconButton
80
79
  onClick={props.onClose}
81
80
  size="small"
82
81
  color="inherit"
83
82
  variant="text"
84
83
  cursor="pointer"
85
- sx={{padding: "0"}}
84
+ sx={{ padding: '0' }}
86
85
  >
87
86
  <Close />
88
87
  </IconButton>
89
88
  </ModalHeaderStyled>
90
89
  )}
91
- <ModalContainerChildrenStyled>
92
- {children}
93
- </ModalContainerChildrenStyled>
94
- {!!props.action?.length && (
90
+ <ModalContainerChildrenStyled>{children}</ModalContainerChildrenStyled>
91
+ {!!props.action?.length && (
95
92
  <ModalFooterStyled>
96
- {props.action.map(({color, variant, action, size, label, ...rest}, key) => (
97
- <Button
98
- color={color}
99
- variant={variant}
100
- key={key}
101
- onClick={action}
102
- size={size}
103
- {...rest}
104
- >
93
+ {props.action.map(({ color, variant, action, size, label, ...rest }, key) => (
94
+ <Button color={color} variant={variant} key={key} onClick={action} size={size} {...rest}>
105
95
  {label}
106
96
  </Button>
107
97
  ))}
package/src/stories/RangerSlider.stories.tsx CHANGED
@@ -1,58 +1,158 @@
1
1
  import React from 'react';
2
-
3
2
  import type { Meta, StoryObj } from '@storybook/react';
4
3
  import { RangerSlider } from '../components';
5
- import { ColorVariant, SizeVariant, TextFieldSizeVariant } from '../types';
4
+ import { ColorVariant, TextFieldSizeVariant } from '../types';
6
5
 
7
6
  const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
8
-
9
7
  const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
10
8
 
11
- const meta = {
9
+ const meta: Meta<typeof RangerSlider> = {
12
10
  title: 'Display/RangerSlider',
13
11
  component: RangerSlider,
14
12
  parameters: {
15
13
  layout: 'centered',
16
14
  },
17
15
  tags: ['autodocs'],
18
- argTypes: {},
19
- } satisfies Meta<typeof RangerSlider>;
16
+ argTypes: {
17
+ color: {
18
+ control: { type: 'select' },
19
+ options: colors,
20
+ description: 'Define a cor do slider.',
21
+ },
22
+ size: {
23
+ control: { type: 'select' },
24
+ options: sizes,
25
+ description: 'Define o tamanho do slider.',
26
+ },
27
+ min: {
28
+ control: { type: 'number' },
29
+ defaultValue: 0,
30
+ description: 'Define o valor mínimo do slider.',
31
+ },
32
+ max: {
33
+ control: { type: 'number' },
34
+ defaultValue: 100,
35
+ description: 'Define o valor máximo do slider.',
36
+ },
37
+ step: {
38
+ control: { type: 'number' },
39
+ defaultValue: 1,
40
+ description: 'Define o passo do slider.',
41
+ },
42
+ valueLabelDisplay: {
43
+ control: { type: 'select' },
44
+ options: ['on', 'auto', 'off'],
45
+ defaultValue: 'auto',
46
+ description: 'Controla a exibição dos rótulos de valor.',
47
+ },
48
+ valueLabelFormat: {
49
+ control: { type: 'function' },
50
+ description: 'Função para formatar o rótulo do valor.',
51
+ },
52
+ defaultValue: {
53
+ control: { type: 'number' },
54
+ defaultValue: 50,
55
+ description: 'Define o valor padrão do slider.',
56
+ },
57
+ onChange: {
58
+ action: 'changed',
59
+ description: 'Função callback que é disparada quando o valor do slider é alterado.',
60
+ },
61
+ },
62
+ };
20
63
 
21
64
  export default meta;
22
65
 
23
66
  type Story = StoryObj<typeof meta>;
24
67
 
25
- export const Playground: Story = {
26
- args: {
27
- max: 90,
28
- min: 10,
29
- value: [20, 80],
30
- color: 'primary',
31
- },
32
- };
33
-
34
68
  function valuetext(value: number) {
35
69
  return `${value}°C`;
36
70
  }
37
71
 
38
- export const RangerSliderBasic = () => {
39
- const [value, setValue] = React.useState<number[]>([20, 37]);
40
-
41
- const handleChange = (event: Event, newValue: number | number[]) => {
42
- setValue(newValue as number[]);
43
- };
44
-
45
- return (
46
- <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
47
- <RangerSlider
48
- getAriaLabel={() => 'Temperature range'}
49
- value={value}
50
- onChange={handleChange}
51
- valueLabelDisplay="on"
52
- getAriaValueText={valuetext}
53
- />
54
- </div>
55
- );
72
+ export const RangerSliderBasic: Story = {
73
+ args: {
74
+ value: [20, 37],
75
+ valueLabelDisplay: 'on',
76
+ getAriaLabel: () => 'Faixa de temperatura',
77
+ },
78
+ argTypes: {
79
+ value: {
80
+ control: { type: 'array' },
81
+ },
82
+ },
83
+ render: (args) => {
84
+ const [value, setValue] = React.useState<number[]>(args.value);
85
+
86
+ const handleChange = (event: Event, newValue: number | number[]) => {
87
+ setValue(newValue as number[]);
88
+ args.onChange?.(event, newValue, 0);
89
+ };
90
+
91
+ return (
92
+ <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
93
+ <RangerSlider
94
+ {...args}
95
+ value={value}
96
+ onChange={handleChange}
97
+ />
98
+ </div>
99
+ );
100
+ },
101
+ name: 'RangerSlider Básico',
56
102
  };
57
103
 
58
- RangerSliderBasic.storyName = 'RangerSlider Basic';
104
+ export const RangerSliderFormatter: Story = {
105
+ args: {
106
+ value: [0, 540],
107
+ valueLabelDisplay: 'on',
108
+ getAriaLabel: () => 'Faixa de tempo',
109
+ valueLabelFormat: (value: number) => {
110
+ if (value < 60) {
111
+ return `${value}s`;
112
+ } else if (value < 3600) {
113
+ const minutes = Math.floor(value / 60);
114
+ const seconds = value % 60;
115
+ return seconds === 0 ? `${minutes}min` : `${minutes}min ${seconds}s`;
116
+ } else {
117
+ const hours = Math.floor(value / 3600);
118
+ const minutes = Math.floor((value % 3600) / 60);
119
+ const seconds = value % 60;
120
+ if (minutes === 0 && seconds === 0) {
121
+ return `${hours}h`;
122
+ } else if (minutes === 0) {
123
+ return `${hours}h ${seconds}s`;
124
+ } else if (seconds === 0) {
125
+ return `${hours}h ${minutes}min`;
126
+ } else {
127
+ return `${hours}h ${minutes}min ${seconds}s`;
128
+ }
129
+ }
130
+ },
131
+ min: 0,
132
+ max: 1000,
133
+ },
134
+ argTypes: {
135
+ value: {
136
+ control: { type: 'array' },
137
+ },
138
+ },
139
+ render: (args) => {
140
+ const [value, setValue] = React.useState<number[]>(args.value);
141
+
142
+ const handleChange = (event: Event, newValue: number | number[]) => {
143
+ setValue(newValue as number[]);
144
+ args.onChange?.(event, newValue, 0);
145
+ };
146
+
147
+ return (
148
+ <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
149
+ <RangerSlider
150
+ {...args}
151
+ value={value}
152
+ onChange={handleChange}
153
+ />
154
+ </div>
155
+ );
156
+ },
157
+ name: 'RangerSlider com Formatter',
158
+ };