norma-library 0.6.3 → 0.6.5

package/src/stories/UncontrolledTabs.stories.tsx

@@ -1,63 +1,74 @@
-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';
+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';
+
+export const UncontrolledTabsInfo = () => {
+  const [tab, setTab] = useState(0);
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <UncontrolledTabs info={<div>Informação dentro da tab</div>} tab={tab} tabs={data} onTabChange={(evt, tab) => setTab(tab)} />
+    </div>
+  );
+};
+
+UncontrolledTabsInfo.storyName = 'Uncontrolled Tabs With  Info';

package/src/styles/globals.scss

@@ -1,18 +1,18 @@
-
-:root {
-  --transparent: transparent;
-  --current: currentColor;
-  --primary: #fe761c;
-  --secondary: #43bbf2;
-  --error: #d63643;
-  --warning: #ffc300;
-  --info: #71d5f7;
-  --success: #6bc235;
-  --helper: #5a2a79;
-}
-
-.appearance-none {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+
+:root {
+  --transparent: transparent;
+  --current: currentColor;
+  --primary: #fe761c;
+  --secondary: #43bbf2;
+  --error: #d63643;
+  --warning: #ffc300;
+  --info: #71d5f7;
+  --success: #6bc235;
+  --helper: #5a2a79;
+}
+
+.appearance-none {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }

package/src/types/index.ts

@@ -1,207 +1,207 @@
-import {
-  AvatarProps as MuiAvatarProps,
-  ButtonProps as MuiButtonProps,
-  BadgeProps as MuiBadgeProps,
-  IconButtonProps as MuiIconButtonProps,
-  TextFieldProps as MuiTextFieldProps,
-  CheckboxProps as MuiCheckBoxProps,
-  MenuProps as MuiDropDownProps,
-  ChipProps as MuiChipProps,
-  LinearProgressProps as MuiLinearProgressProps,
-  SliderProps as MuiSliderProps,
-  AccordionProps as MuiAccordionProps,
-  TabsProps as MuiTabsProps,
-  SelectProps as MuiSelectProps,
-  PaperProps as MuiPaperProps,
-  SvgIconProps,
-  ModalProps,
-  CardProps as MuiCardProps,
-  TableProps as MuiTableProps,
-} from '@mui/material';
-
-import { TimelineProps as MuiTimeLineProps } from '@mui/lab';
-
-import { SwitchBaseProps as MuiSwitchBaseProps } from '@mui/material/internal/SwitchBase';
-
-import { iconsSVG } from '../components/Svgs';
-
-export type ColorVariant = 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
-
-export type DisabledVariant = 'true' | 'false';
-
-export type TextFieldColorVariant = 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
-
-export type CheckBoxColorVariant = 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default';
-
-export type SizeVariant = 'small' | 'medium' | 'large';
-export type ButtonVariant = 'text' | 'outlined' | 'contained';
-export type DropVariant = 'menu' | 'selectedMenu';
-export type TagVariant = 'outlined' | 'contained';
-export type TabsVariant = 'standard' | 'scrollable' | 'fullWidth';
-export type DatePickVariant = 'responsive' | 'desktop' | 'mobile';
-export type ProgressVariant = 'determinate' | 'indeterminate' | 'buffer' | 'query';
-
-export type MuiButtonBaseProps = Omit<MuiButtonProps, 'sx' | 'color' | 'size' | 'variant'>;
-
-export type MuiIconButtonBaseProps = Omit<MuiIconButtonProps, 'sx' | 'color' | 'size' | 'variant'>;
-
-export type TextFieldValue = string | number;
-export type TextFieldVariant = 'standard' | 'outlined' | 'filled';
-export type TextFieldSizeVariant = 'small' | 'medium';
-export type DirectionVariant = 'vertical' | 'horizontal';
-export type PaperVariant = 'elevation' | 'outlined';
-export type PositionVariant = 'left' | 'right' | 'alternate' | 'alternate-reverse';
-
-export type MuiTextFieldBaseProps = Omit<
-  MuiTextFieldProps,
-  | 'onChange'
-  | 'onBlur'
-  | 'onFocus'
-  | 'defaultValue'
-  | 'size'
-  | 'value'
-  | 'id'
-  | 'fullWidth'
-  | 'helperText'
-  | 'type'
-  | 'InputProps'
-  | 'InputLabelProps'
-  | 'autoComplete'
-  | 'label'
-  | 'helperText'
-  | 'InputLabelProps'
-  | 'margin'
-  | 'maxRows'
-  | 'minRows'
-  | 'multiline'
-  | 'name'
-  | 'placeholder'
-  | 'rows'
-  | 'select'
-  | 'SelectProps'
-  | 'sx'
-  | 'autoFocus'
-  | 'error'
-  | 'classes'
-  | 'children'
-  | 'color'
-  | 'variant'
->;
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface CheckboxPropsSizeOverrides {}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface CheckboxPropsColorOverrides {}
-
-export type MuiCheckBoxBaseProps = Omit<MuiCheckBoxProps, 'sx'>;
-export type MuiModalBaseProps = Omit<ModalProps, 'sx'>;
-export type MuiCardBaseProps = Omit<MuiCardProps, 'sx'>;
-export type MuiDropDownBaseProps = Omit<MuiDropDownProps, 'sx' | 'variant'>;
-export type MuiTagBaseProps = Omit<MuiChipProps, 'sx' | 'color'>;
-export type MuiRangerSliderBaseProps = Omit<MuiSliderProps, 'sx' | 'color'>;
-export type MuiProgressBarBaseProps = Omit<MuiLinearProgressProps, 'sx' | 'ref'>;
-export type MuiTabsBaseProps = Omit<MuiTabsProps, 'sx' | 'children' | 'onChange' | 'variant' | 'value'>;
-export type MuiAccordionBaseProps = Omit<MuiAccordionProps, 'sx' | 'children' | 'defaultExpanded' | 'onChange'>;
-export type MuiSelectBaseProps = Omit<MuiSelectProps, 'sx' | 'value' | 'onClose' | 'onOpen' | 'input' | 'label'>;
-
-export type MuiPaperBaseProps = Omit<MuiPaperProps, 'sx'>;
-
-export type MuiDatePickerBaseProps = Omit<MuiTextFieldProps, 'sx'>;
-
-export type MuiDataGridBaseProps = Omit<MuiTableProps, 'sx'>;
-
-export type MuiAvatarBaseProps = Omit<MuiAvatarProps, 'sx' | 'src' | 'children' | 'variant' | 'sizes'>;
-
-export type MuiTimeLineBaseProps = Omit<MuiTimeLineProps, 'sx' | 'position' | 'children' | 'ref'>;
-
-export type MuiBadgeBaseProps = Omit<
-  MuiBadgeProps,
-  'sx' | 'color' | 'children' | 'invisible' | 'variant' | 'className' | 'badgeContent'
->;
-
-export type IconScale = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | '3xlarge';
-
-export type IconColors =
-  | 'inherit'
-  | 'primary'
-  | 'secondary'
-  | 'error'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'white'
-  | 'black';
-
-export const scaleSize: Record<IconScale, number> = {
-  xsmall: 14,
-  small: 20,
-  medium: 24,
-  large: 28,
-  xlarge: 32,
-  '2xlarge': 36,
-  '3xlarge': 40,
-};
-
-export type SVGIconProps = {
-  icon: React.ReactNode;
-} & SvgIconProps;
-
-export type IconType = keyof typeof iconsSVG;
-export type IconKey = keyof typeof iconsSVG;
-
-export type MuiRadioBaseProps = Omit<
-  MuiSwitchBaseProps,
-  'checkedIcon' | 'color' | 'icon' | 'type' | 'checked' | 'size'
->;
-
-export type OptionsRadios = {
-  label: string | React.ReactNode;
-  value: string;
-  size?: TextFieldSizeVariant;
-};
-
-export type OnAction = {
-  label: string;
-  action: React.ReactEventHandler<{}>;
-  color?: ColorVariant;
-  size?: SizeVariant;
-  variant?: ButtonVariant;
-  disabled?: boolean;
-};
-
-export type DataAccordion = {
-  label: string;
-  id: string;
-  children: NonNullable<React.ReactNode>;
-};
-
-export type DataTabs = {
-  label: string;
-  id: string;
-  children: NonNullable<React.ReactNode>;
-  tabPanel?: {
-    props?: React.HTMLAttributes<HTMLDivElement>
-  };
-};
-
-export type DataSelect = {
-  label: string;
-  value: string | number;
-};
-
-export type DataTimeLine = {
-  id?: string;
-  title: string;
-  data: string;
-  by: string;
-};
-
-export type RenderProps<E extends HTMLElement = HTMLElement> = {
-  focusRef?: React.MutableRefObject<E | null>;
-  id?: string;
-};
-
-export type StyledProgressBarProps = {
-  colorCustom?: string;
-};
+import {
+  AvatarProps as MuiAvatarProps,
+  ButtonProps as MuiButtonProps,
+  BadgeProps as MuiBadgeProps,
+  IconButtonProps as MuiIconButtonProps,
+  TextFieldProps as MuiTextFieldProps,
+  CheckboxProps as MuiCheckBoxProps,
+  MenuProps as MuiDropDownProps,
+  ChipProps as MuiChipProps,
+  LinearProgressProps as MuiLinearProgressProps,
+  SliderProps as MuiSliderProps,
+  AccordionProps as MuiAccordionProps,
+  TabsProps as MuiTabsProps,
+  SelectProps as MuiSelectProps,
+  PaperProps as MuiPaperProps,
+  SvgIconProps,
+  ModalProps,
+  CardProps as MuiCardProps,
+  TableProps as MuiTableProps,
+} from '@mui/material';
+
+import { TimelineProps as MuiTimeLineProps } from '@mui/lab';
+
+import { SwitchBaseProps as MuiSwitchBaseProps } from '@mui/material/internal/SwitchBase';
+
+import { iconsSVG } from '../components/Svgs';
+
+export type ColorVariant = 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+
+export type DisabledVariant = 'true' | 'false';
+
+export type TextFieldColorVariant = 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+
+export type CheckBoxColorVariant = 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default';
+
+export type SizeVariant = 'small' | 'medium' | 'large';
+export type ButtonVariant = 'text' | 'outlined' | 'contained';
+export type DropVariant = 'menu' | 'selectedMenu';
+export type TagVariant = 'outlined' | 'contained';
+export type TabsVariant = 'standard' | 'scrollable' | 'fullWidth';
+export type DatePickVariant = 'responsive' | 'desktop' | 'mobile';
+export type ProgressVariant = 'determinate' | 'indeterminate' | 'buffer' | 'query';
+
+export type MuiButtonBaseProps = Omit<MuiButtonProps, 'sx' | 'color' | 'size' | 'variant'>;
+
+export type MuiIconButtonBaseProps = Omit<MuiIconButtonProps, 'sx' | 'color' | 'size' | 'variant'>;
+
+export type TextFieldValue = string | number;
+export type TextFieldVariant = 'standard' | 'outlined' | 'filled';
+export type TextFieldSizeVariant = 'small' | 'medium';
+export type DirectionVariant = 'vertical' | 'horizontal';
+export type PaperVariant = 'elevation' | 'outlined';
+export type PositionVariant = 'left' | 'right' | 'alternate' | 'alternate-reverse';
+
+export type MuiTextFieldBaseProps = Omit<
+  MuiTextFieldProps,
+  | 'onChange'
+  | 'onBlur'
+  | 'onFocus'
+  | 'defaultValue'
+  | 'size'
+  | 'value'
+  | 'id'
+  | 'fullWidth'
+  | 'helperText'
+  | 'type'
+  | 'InputProps'
+  | 'InputLabelProps'
+  | 'autoComplete'
+  | 'label'
+  | 'helperText'
+  | 'InputLabelProps'
+  | 'margin'
+  | 'maxRows'
+  | 'minRows'
+  | 'multiline'
+  | 'name'
+  | 'placeholder'
+  | 'rows'
+  | 'select'
+  | 'SelectProps'
+  | 'sx'
+  | 'autoFocus'
+  | 'error'
+  | 'classes'
+  | 'children'
+  | 'color'
+  | 'variant'
+>;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface CheckboxPropsSizeOverrides {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface CheckboxPropsColorOverrides {}
+
+export type MuiCheckBoxBaseProps = Omit<MuiCheckBoxProps, 'sx'>;
+export type MuiModalBaseProps = Omit<ModalProps, 'sx'>;
+export type MuiCardBaseProps = Omit<MuiCardProps, 'sx'>;
+export type MuiDropDownBaseProps = Omit<MuiDropDownProps, 'sx' | 'variant'>;
+export type MuiTagBaseProps = Omit<MuiChipProps, 'sx' | 'color'>;
+export type MuiRangerSliderBaseProps = Omit<MuiSliderProps, 'sx' | 'color'>;
+export type MuiProgressBarBaseProps = Omit<MuiLinearProgressProps, 'sx' | 'ref'>;
+export type MuiTabsBaseProps = Omit<MuiTabsProps, 'sx' | 'children' | 'onChange' | 'variant' | 'value'>;
+export type MuiAccordionBaseProps = Omit<MuiAccordionProps, 'sx' | 'children' | 'defaultExpanded' | 'onChange'>;
+export type MuiSelectBaseProps = Omit<MuiSelectProps, 'sx' | 'value' | 'onClose' | 'onOpen' | 'input' | 'label'>;
+
+export type MuiPaperBaseProps = Omit<MuiPaperProps, 'sx'>;
+
+export type MuiDatePickerBaseProps = Omit<MuiTextFieldProps, 'sx'>;
+
+export type MuiDataGridBaseProps = Omit<MuiTableProps, 'sx'>;
+
+export type MuiAvatarBaseProps = Omit<MuiAvatarProps, 'sx' | 'src' | 'children' | 'variant' | 'sizes'>;
+
+export type MuiTimeLineBaseProps = Omit<MuiTimeLineProps, 'sx' | 'position' | 'children' | 'ref'>;
+
+export type MuiBadgeBaseProps = Omit<
+  MuiBadgeProps,
+  'sx' | 'color' | 'children' | 'invisible' | 'variant' | 'className' | 'badgeContent'
+>;
+
+export type IconScale = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | '3xlarge';
+
+export type IconColors =
+  | 'inherit'
+  | 'primary'
+  | 'secondary'
+  | 'error'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'white'
+  | 'black';
+
+export const scaleSize: Record<IconScale, number> = {
+  xsmall: 14,
+  small: 20,
+  medium: 24,
+  large: 28,
+  xlarge: 32,
+  '2xlarge': 36,
+  '3xlarge': 40,
+};
+
+export type SVGIconProps = {
+  icon: React.ReactNode;
+} & SvgIconProps;
+
+export type IconType = keyof typeof iconsSVG;
+export type IconKey = keyof typeof iconsSVG;
+
+export type MuiRadioBaseProps = Omit<
+  MuiSwitchBaseProps,
+  'checkedIcon' | 'color' | 'icon' | 'type' | 'checked' | 'size'
+>;
+
+export type OptionsRadios = {
+  label: string | React.ReactNode;
+  value: string;
+  size?: TextFieldSizeVariant;
+};
+
+export type OnAction = {
+  label: string;
+  action: React.ReactEventHandler<{}>;
+  color?: ColorVariant;
+  size?: SizeVariant;
+  variant?: ButtonVariant;
+  disabled?: boolean;
+};
+
+export type DataAccordion = {
+  label: string;
+  id: string;
+  children: NonNullable<React.ReactNode>;
+};
+
+export type DataTabs = {
+  label: string;
+  id: string;
+  children: NonNullable<React.ReactNode>;
+  tabPanel?: {
+    props?: React.HTMLAttributes<HTMLDivElement>
+  };
+};
+
+export type DataSelect = {
+  label: string;
+  value: string | number;
+};
+
+export type DataTimeLine = {
+  id?: string;
+  title: string;
+  data: string;
+  by: string;
+};
+
+export type RenderProps<E extends HTMLElement = HTMLElement> = {
+  focusRef?: React.MutableRefObject<E | null>;
+  id?: string;
+};
+
+export type StyledProgressBarProps = {
+  colorCustom?: string;
+};

package/src/utils/styledBreakpoints.ts

@@ -1,25 +1,25 @@
-import { css } from 'styled-components';
-
-type Breakpoint = {
-  cssProp: string;
-  cssPropUnits: string;
-  values: { [key: number]: number }[];
-  mediaQueryType: 'max-width' | 'min-width' | 'max-height' | 'min-height';
-};
-
-export const breakpoints = (breakpoints: Breakpoint) => {
-  const { cssProp, cssPropUnits, values, mediaQueryType } = breakpoints;
-  
-  const breakpointProps = values.reduce((mediaQueries, value) => {
-    const [screenBreakpoint, cssPropBreakpoint] = [Object.keys(value)[0], Object.values(value)[0]];
-    return (mediaQueries += `
-    @media screen and (${mediaQueryType}: ${screenBreakpoint}px) {
-      ${cssProp}: ${cssPropBreakpoint}${cssPropUnits};
-    }
-    `);
-  }, '');
-
-  return css`
-    ${breakpointProps}
-  `;
-};
+import { css } from 'styled-components';
+
+type Breakpoint = {
+  cssProp: string;
+  cssPropUnits: string;
+  values: { [key: number]: number }[];
+  mediaQueryType: 'max-width' | 'min-width' | 'max-height' | 'min-height';
+};
+
+export const breakpoints = (breakpoints: Breakpoint) => {
+  const { cssProp, cssPropUnits, values, mediaQueryType } = breakpoints;
+  
+  const breakpointProps = values.reduce((mediaQueries, value) => {
+    const [screenBreakpoint, cssPropBreakpoint] = [Object.keys(value)[0], Object.values(value)[0]];
+    return (mediaQueries += `
+    @media screen and (${mediaQueryType}: ${screenBreakpoint}px) {
+      ${cssProp}: ${cssPropBreakpoint}${cssPropUnits};
+    }
+    `);
+  }, '');
+
+  return css`
+    ${breakpointProps}
+  `;
+};

package/vite.config.ts

@@ -1,15 +1,15 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  base: './',
-  plugins: [react()],
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@import "@/styles/global.scss";`
-      },
-    },
-  },
-})
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './',
+  plugins: [react()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/styles/global.scss";`
+      },
+    },
+  },
+})