norma-library 0.5.122 → 0.5.123

package/dist/esm/components/UncontrolledTabs/UncontrolledTabs.d.ts

@@ -0,0 +1,14 @@
+import React, { SyntheticEvent } from 'react';
+import { SxProps } from '@mui/material';
+import { ColorVariant, DataTabs, MuiTabsBaseProps, TabsVariant } from '@/types';
+import { Theme } from '@emotion/react';
+interface Props extends MuiTabsBaseProps {
+    sx?: SxProps<Theme>;
+    tabs: DataTabs[];
+    tab: number;
+    onTabChange: (event: SyntheticEvent, tab: number) => void;
+    color?: ColorVariant;
+    variant?: TabsVariant;
+}
+declare const UncontrolledTabs: ({ tabs, tab, color, onTabChange, ...props }: Props) => React.JSX.Element;
+export default UncontrolledTabs;

package/dist/esm/components/UncontrolledTabs/UncontrolledTabs.js

@@ -0,0 +1,26 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { Box } from '@mui/material';
+import { NormaTab, NormaTabs } from './UncontrolledTabs.style';
+function TabPanel(props) {
+    var children = props.children, value = props.value, index = props.index, other = __rest(props, ["children", "value", "index"]);
+    return (React.createElement("div", __assign({ role: "tabpanel", hidden: value !== index, id: "simple-tabpanel-".concat(index), "aria-labelledby": "simple-tab-".concat(index) }, other), value === index && React.createElement(Box, { sx: { p: 3 } }, children)));
+}
+function a11yProps(index) {
+    return {
+        id: "simple-tab-".concat(index),
+        'aria-controls': "simple-tabpanel-".concat(index),
+    };
+}
+var UncontrolledTabs = function (_a) {
+    var tabs = _a.tabs, tab = _a.tab, _b = _a.color, color = _b === void 0 ? 'primary' : _b, onTabChange = _a.onTabChange, props = __rest(_a, ["tabs", "tab", "color", "onTabChange"]);
+    var handleChange = function (event, newValue) {
+        onTabChange(event, newValue);
+    };
+    return (React.createElement(Box, { sx: { width: '100%' } },
+        React.createElement(Box, null,
+            React.createElement(NormaTabs, __assign({ value: tab, color: color, onChange: handleChange, "aria-label": "tabs" }, props), tabs.map(function (item, key) { return (React.createElement(NormaTab, __assign({ label: item.label, color: color }, a11yProps(key)))); }))),
+        tabs.map(function (item, key) { return (React.createElement(TabPanel, { key: key, value: tab, index: key }, item.children)); })));
+};
+export default UncontrolledTabs;
+//# sourceMappingURL=UncontrolledTabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UncontrolledTabs.js","sourceRoot":"","sources":["../../../../src/components/UncontrolledTabs/UncontrolledTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAW,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAkB/D,SAAS,QAAQ,CAAC,KAAoB;IAC5B,IAAA,QAAQ,GAA6B,KAAK,SAAlC,EAAE,KAAK,GAAsB,KAAK,MAA3B,EAAE,KAAK,GAAe,KAAK,MAApB,EAAK,KAAK,UAAK,KAAK,EAA5C,8BAAoC,CAAF,CAAW;IAEnD,OAAO,CACL,sCACE,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,KAAK,KAAK,KAAK,EACvB,EAAE,EAAE,0BAAmB,KAAK,CAAE,qBACb,qBAAc,KAAK,CAAE,IAClC,KAAK,GAER,KAAK,KAAK,KAAK,IAAI,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,IAAG,QAAQ,CAAO,CACnD,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAAa;IAC9B,OAAO;QACL,EAAE,EAAE,qBAAc,KAAK,CAAE;QACzB,eAAe,EAAE,0BAAmB,KAAK,CAAE;KAC5C,CAAC;AACJ,CAAC;AAED,IAAM,gBAAgB,GAAG,UAAC,EAA8D;IAA5D,IAAA,IAAI,UAAA,EAAE,GAAG,SAAA,EAAE,aAAiB,EAAjB,KAAK,mBAAG,SAAS,KAAA,EAAE,WAAW,iBAAA,EAAK,KAAK,cAArD,uCAAuD,CAAF;IAC7E,IAAM,YAAY,GAAG,UAAC,KAAqB,EAAE,QAAgB;QAC3D,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QACxB,oBAAC,GAAG;YACF,oBAAC,SAAS,aAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,gBAAa,MAAM,IAAK,KAAK,GACrF,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CACvB,oBAAC,QAAQ,aAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAM,SAAS,CAAC,GAAG,CAAC,EAAI,CAClE,EAFwB,CAExB,CAAC,CACQ,CACR;QACL,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CACvB,oBAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IACvC,IAAI,CAAC,QAAQ,CACL,CACZ,EAJwB,CAIxB,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/esm/components/UncontrolledTabs/UncontrolledTabs.style.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ColorVariant } from '@/types';
+interface StyledTabProps {
+    label: string;
+    color: ColorVariant;
+}
+export declare const NormaTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "classes" | "action" | "children" | "sx" | "variant" | "value" | "aria-label" | "aria-labelledby" | "onChange" | "slots" | "slotProps" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    color: ColorVariant;
+}, {}, {}>;
+export declare const NormaTab: import("@emotion/styled").StyledComponent<StyledTabProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export {};

package/dist/esm/components/UncontrolledTabs/UncontrolledTabs.style.js

@@ -0,0 +1,50 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { Tab, Tabs } from '@mui/material';
+import { palette } from '../../helpers';
+var colorMap = {
+    inherit: palette.inherit,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    error: palette.error,
+    warning: palette.warning,
+    info: palette.info,
+    success: palette.success,
+};
+export var NormaTabs = styled(Tabs)(function (_a) {
+    var color = _a.color;
+    return ({
+        borderBottom: '1px solid #e8e8e8',
+        '& .Mui-selected': {
+            color: colorMap[color],
+        },
+        '& .MuiTabs-indicator': {
+            backgroundColor: colorMap[color],
+        },
+        '& .MuiButtonBase-root': {
+            textTransform: 'none',
+        },
+    });
+});
+export var NormaTab = styled(function (props) { return React.createElement(Tab, __assign({ disableRipple: true }, props)); })(function (_a) {
+    var theme = _a.theme, color = _a.color;
+    return ({
+        textTransform: 'none',
+        fontWeight: theme.typography.fontWeightRegular,
+        fontSize: theme.typography.pxToRem(15),
+        marginRight: theme.spacing(1),
+        font: 'normal normal normal 15px/25px Source Sans Pro',
+        color: '#666666',
+        padding: '5px 15px',
+        top: '5px',
+        minWidth: '60px',
+        '&.Mui-selected': {
+            color: colorMap[color],
+        },
+        '&.Mui-focusVisible': {
+            backgroundColor: 'rgba(100, 95, 228, 0.32)',
+        },
+    });
+});
+//# sourceMappingURL=UncontrolledTabs.style.js.map

package/dist/esm/components/UncontrolledTabs/UncontrolledTabs.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UncontrolledTabs.style.js","sourceRoot":"","sources":["../../../../src/components/UncontrolledTabs/UncontrolledTabs.style.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,IAAM,QAAQ,GAAiC;IAC7C,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,SAAS,EAAE,OAAO,CAAC,SAAS;IAC5B,KAAK,EAAE,OAAO,CAAC,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,IAAI,EAAE,OAAO,CAAC,IAAI;IAClB,OAAO,EAAE,OAAO,CAAC,OAAO;CACzB,CAAC;AAOF,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAA0B,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,CAAC;QAC7E,YAAY,EAAE,mBAAmB;QACjC,iBAAiB,EAAE;YACjB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;SACvB;QACD,sBAAsB,EAAE;YACtB,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC;SACjC;QACD,uBAAuB,EAAE;YACvB,aAAa,EAAE,MAAM;SACtB;KACF,CAAC;AAX4E,CAW5E,CAAC,CAAC;AAEJ,MAAM,CAAC,IAAM,QAAQ,GAAG,MAAM,CAAC,UAAC,KAAqB,IAAK,OAAA,oBAAC,GAAG,aAAC,aAAa,UAAK,KAAK,EAAI,EAAhC,CAAgC,CAAC,CAAC,UAAC,EAAgB;QAAd,KAAK,WAAA,EAAE,KAAK,WAAA;IAAO,OAAA,CAAC;QACjH,aAAa,EAAE,MAAM;QACrB,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB;QAC9C,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;QACtC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7B,IAAI,EAAE,gDAAgD;QACtD,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,UAAU;QACnB,GAAG,EAAE,KAAK;QACV,QAAQ,EAAE,MAAM;QAChB,gBAAgB,EAAE;YAChB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;SACvB;QACD,oBAAoB,EAAE;YACpB,eAAe,EAAE,0BAA0B;SAC5C;KACF,CAAC;AAhBgH,CAgBhH,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.5.122",
+  "version": "0.5.123",
   "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/UncontrolledTabs/UncontrolledTabs.style.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+
+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 = styled(Tabs)<{ color: ColorVariant }>(({ color }) => ({
+  borderBottom: '1px solid #e8e8e8',
+  '& .Mui-selected': {
+    color: colorMap[color],
+  },
+  '& .MuiTabs-indicator': {
+    backgroundColor: colorMap[color],
+  },
+  '& .MuiButtonBase-root': {
+    textTransform: 'none',
+  },
+}));
+
+export const NormaTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(({ theme, color }) => ({
+  textTransform: 'none',
+  fontWeight: theme.typography.fontWeightRegular,
+  fontSize: theme.typography.pxToRem(15),
+  marginRight: theme.spacing(1),
+  font: 'normal normal normal 15px/25px Source Sans Pro',
+  color: '#666666',
+  padding: '5px 15px',
+  top: '5px',
+  minWidth: '60px',
+  '&.Mui-selected': {
+    color: colorMap[color],
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: 'rgba(100, 95, 228, 0.32)',
+  },
+}));

package/src/components/UncontrolledTabs/UncontrolledTabs.tsx

@@ -0,0 +1,68 @@
+import React, { SyntheticEvent } from 'react';
+import { Box, SxProps } from '@mui/material';
+import { ColorVariant, DataTabs, MuiTabsBaseProps, TabsVariant } from '@/types';
+import { NormaTab, NormaTabs } from './UncontrolledTabs.style';
+import { Theme } from '@emotion/react';
+
+interface Props extends MuiTabsBaseProps {
+  sx?: SxProps<Theme>;
+  tabs: DataTabs[];
+  tab: number;
+  onTabChange: (event: SyntheticEvent, tab: number) => void;
+  color?: ColorVariant;
+  variant?: TabsVariant;
+}
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+const UncontrolledTabs = ({ tabs, tab, color = 'primary', onTabChange, ...props }: Props) => {
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
+    onTabChange(event, newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box>
+        <NormaTabs value={tab} color={color} onChange={handleChange} aria-label="tabs" {...props}>
+          {tabs.map((item, key) => (
+            <NormaTab label={item.label} color={color} {...a11yProps(key)} />
+          ))}
+        </NormaTabs>
+      </Box>
+      {tabs.map((item, key) => (
+        <TabPanel key={key} value={tab} index={key}>
+          {item.children}
+        </TabPanel>
+      ))}
+    </Box>
+  );
+};
+
+export default UncontrolledTabs;

package/src/stories/Tabs.stories.tsx

@@ -46,7 +46,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
   args: {
-    textColor: 'primary',
     data: data,
   },
 };

package/src/stories/UncontrolledTable.stories.tsx

@@ -8,7 +8,7 @@ const Template = args => {
 };
 
 export default {
-  title: 'Table/UncontrolledTable',
+  title: 'Uncontrolled/Table',
   component: Template,
   tags: ['autodocs'],
   parameters: {

package/src/stories/UncontrolledTabs.stories.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import UncontrolledTabs from '../components/UncontrolledTabs/UncontrolledTabs';
+import { DataTabs } from '../types';
+import { Typography } from '@mui/material';
+
+const data: DataTabs[] = [
+  {
+    label: 'Tab 1',
+    id: 'panel-1',
+    children: (
+      <Typography>
+        Tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
+        blandit leo lobortis eget.
+      </Typography>
+    ),
+  },
+  {
+    label: 'Tab 2',
+    id: 'panel-2',
+    children: (
+      <Typography>
+        Tab 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
+        blandit leo lobortis eget.
+      </Typography>
+    ),
+  },
+];
+
+const meta = {
+  title: 'Uncontrolled/Tabs',
+  component: UncontrolledTabs,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    tabs: data,
+  },
+} satisfies Meta<typeof UncontrolledTabs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    tab: 0,
+    tabs: data,
+  },
+};
+
+export const UncontrolledTabsBasic = () => {
+  const [tab, setTab] = useState(0);
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <UncontrolledTabs tab={tab} tabs={data} onTabChange={(evt, tab) => setTab(tab)} />
+    </div>
+  );
+};
+
+UncontrolledTabsBasic.storyName = 'Uncontrolled Tabs';