norma-library 0.5.147 → 0.5.149

package/src/components/UncontrolledTable/styles.tsx

@@ -1,116 +1,123 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  background-color: #fff;
-`;
-
-export const Table = styled.table`
-  display: table;
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  min-width: 650px;
-  border: none;
-`;
-
-const StickyStyles = `
-  position: sticky;
-  top: 0;
-  z-index: 99;
-  background: #fff;
-`;
-
-export const Thead = styled.thead<{ $sticky?: boolean }>`
-  display: table-header-group;
-  ${props => props.$sticky && StickyStyles}
-`;
-
-export const TableRow = styled.tr`
-  color: inherit;
-  display: table-row;
-  vertical-align: middle;
-  outline: 0;
-`;
-
-export const Th = styled.th`
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  letter-spacing: 0.01071em;
-  display: table-cell;
-  vertical-align: inherit;
-  border-bottom: 1px solid rgba(224, 224, 224, 1);
-  text-align: left;
-  padding: 16px;
-  color: rgba(0, 0, 0, 0.87);
-  color: #666666;
-  font-size: 0.875rem;
-  font-weight: 700;
-`;
-
-export const ColumnContent = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 5px;
-`;
-
-export const TextColumn = styled.span``;
-
-export const IconFilterDialog = styled.div`
-  height: 20px;
-  width: 20px;
-`;
-
-export const FilterDialog = styled.div`
-  position: absolute;
-  padding: 10px 0;
-  margin: 6px 0px 0 0;
-  width: max-content;
-  background: #fff;
-  box-shadow: 0px 3px 6px #00000029;
-  border: 1px solid #e0e0e0;
-  z-index: 99;
-`;
-
-export const ListFilterDialog = styled.div`
-  display: flex;
-  flex-direction: column;
-  .label {
-    margin: 0 0 8px 0;
-    color: #666666;
-    font-size: 14px;
-    font-weight: 400;
-    text-align: left;
-  }
-  .select {
-    border: 1px solid #e0e0e0;
-    padding: 8px 12px;
-  }
-`;
-
-export const OptionFilterDialog = styled.div`
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  padding: 6px 15px;
-  cursor: pointer;
-  &:hover {
-    background: rgba(0, 0, 0, 0.04);
-  }
-  .icon {
-    color: #666;
-  }
-  .rotate {
-    rotate: 180deg;
-  }
-  div {
-    width: 20px;
-    height: 20px;
-  }
-  p {
-    margin: 0;
-    color: #666666;
-    font-size: 16px;
-    font-weight: 400;
-  }
-`;
+import { breakpoints } from '../../utils/styledBreakpoints';
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  background-color: #fff;
+`;
+
+export const Table = styled.table`
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  min-width: 650px;
+  border: none;
+`;
+
+const StickyStyles = `
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  background: #fff;
+`;
+
+export const Thead = styled.thead<{ $sticky?: boolean }>`
+  display: table-header-group;
+  ${props => props.$sticky && StickyStyles}
+`;
+
+export const TableRow = styled.tr`
+  color: inherit;
+  display: table-row;
+  vertical-align: middle;
+  outline: 0;
+`;
+
+export const Th = styled.th`
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  letter-spacing: 0.01071em;
+  display: table-cell;
+  vertical-align: inherit;
+  border-bottom: 1px solid rgba(224, 224, 224, 1);
+  text-align: left;
+  padding: 16px;
+  ${breakpoints({
+    cssProp: 'padding',
+    cssPropUnits: 'px',
+    values: [{ 1360: 8 }],
+    mediaQueryType: 'min-width',
+  })};
+  color: rgba(0, 0, 0, 0.87);
+  color: #666666;
+  font-size: 0.875rem;
+  font-weight: 700;
+`;
+
+export const ColumnContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+export const TextColumn = styled.span``;
+
+export const IconFilterDialog = styled.div`
+  height: 20px;
+  width: 20px;
+`;
+
+export const FilterDialog = styled.div`
+  position: absolute;
+  padding: 10px 0;
+  margin: 6px 0px 0 0;
+  width: max-content;
+  background: #fff;
+  box-shadow: 0px 3px 6px #00000029;
+  border: 1px solid #e0e0e0;
+  z-index: 99;
+`;
+
+export const ListFilterDialog = styled.div`
+  display: flex;
+  flex-direction: column;
+  .label {
+    margin: 0 0 8px 0;
+    color: #666666;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: left;
+  }
+  .select {
+    border: 1px solid #e0e0e0;
+    padding: 8px 12px;
+  }
+`;
+
+export const OptionFilterDialog = styled.div`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 6px 15px;
+  cursor: pointer;
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .icon {
+    color: #666;
+  }
+  .rotate {
+    rotate: 180deg;
+  }
+  div {
+    width: 20px;
+    height: 20px;
+  }
+  p {
+    margin: 0;
+    color: #666666;
+    font-size: 16px;
+    font-weight: 400;
+  }
+`;

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

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

@@ -1,68 +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;
+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/components/index.ts

@@ -1,24 +1,24 @@
-export * from './Accordion';
-export * from './Avatar';
-export * from './Badge';
-export * from './Button';
-export * from './Card';
-export * from './ChatMessage';
-export * from './ChatMessageBalloon/ChatMessageBalloon';
-export * from './CheckBox';
-export * from './DatePicker';
-export * from './DropDown';
-export * from './IconButton';
-export * from './Icons';
-export * from './Modal';
-export * from './Paper';
-export * from './ProgressBar';
-export * from './RadioGroup';
-export * from './RangerSlider';
-export * from './Select';
-export * from './Tabs';
-export * from './Tag';
-export * from './Table';
-export * from './TextField';
-export * from './TimeLine';
-export * from './TimePicker';
+export * from './Accordion';
+export * from './Avatar';
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './ChatMessage';
+export * from './ChatMessageBalloon/ChatMessageBalloon';
+export * from './CheckBox';
+export * from './DatePicker';
+export * from './DropDown';
+export * from './IconButton';
+export * from './Icons';
+export * from './Modal';
+export * from './Paper';
+export * from './ProgressBar';
+export * from './RadioGroup';
+export * from './RangerSlider';
+export * from './Select';
+export * from './Tabs';
+export * from './Tag';
+export * from './Table';
+export * from './TextField';
+export * from './TimeLine';
+export * from './TimePicker';

package/src/helpers/alignments.ts

@@ -1,14 +1,14 @@
-function getAlign(border: string) {
-  switch (border) {
-    case 'left':
-      return 'text-start justify-items-start';
-    case 'center':
-      return 'justify-items-center';
-    case 'right':
-      return 'text-end justify-items-end';
-    default:
-      return 'text-center inline-flex';
-  }
-}
-
-export { getAlign };
+function getAlign(border: string) {
+  switch (border) {
+    case 'left':
+      return 'text-start justify-items-start';
+    case 'center':
+      return 'justify-items-center';
+    case 'right':
+      return 'text-end justify-items-end';
+    default:
+      return 'text-center inline-flex';
+  }
+}
+
+export { getAlign };

package/src/helpers/borders.ts

@@ -1,18 +1,18 @@
-function getBorderSize(size: number) {
-  switch (size.toString()) {
-    case '0':
-      return 'border-0';
-    case '1':
-      return 'border border-[0.05rem]';
-    case '2':
-      return 'border border-2';
-    case '4':
-      return 'border border-4';
-    case '8':
-      return 'border border-8';
-    default:
-      return 'border border-2';
-  }
-}
-
-export { getBorderSize };
+function getBorderSize(size: number) {
+  switch (size.toString()) {
+    case '0':
+      return 'border-0';
+    case '1':
+      return 'border border-[0.05rem]';
+    case '2':
+      return 'border border-2';
+    case '4':
+      return 'border border-4';
+    case '8':
+      return 'border border-8';
+    default:
+      return 'border border-2';
+  }
+}
+
+export { getBorderSize };