norma-library 0.6.2 → 0.6.4

package/src/components/TextInput/interface.ts

@@ -1,10 +1,10 @@
-export interface TextInputProps {
-  className?: string
-  label: string 
-  onChange: Function
-  disabled?: boolean
-  placeholder?: string
-  name?: string
-  type?: string
-  value: string
+export interface TextInputProps {
+  className?: string
+  label: string 
+  onChange: Function
+  disabled?: boolean
+  placeholder?: string
+  name?: string
+  type?: string
+  value: string
 }

package/src/components/TextInput/styles.tsx

@@ -1,24 +1,24 @@
-import styled from "styled-components"
-
-export const Container = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`
-
-export const Label = styled.label`
-  font-size: 14px;
-  margin: 0 0 4px 0;
-  color: #666;
-`
-
-export const Input = styled.input`
-  border: none;
-  color: #4D4F5C;
-  border-bottom: 1px solid #00000033;
-  outline: none;
-  font-size: 18px;
-  padding: 8px;
-  width: 100%;
-  font-size: 16px;
+import styled from "styled-components"
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`
+
+export const Label = styled.label`
+  font-size: 14px;
+  margin: 0 0 4px 0;
+  color: #666;
+`
+
+export const Input = styled.input`
+  border: none;
+  color: #4D4F5C;
+  border-bottom: 1px solid #00000033;
+  outline: none;
+  font-size: 18px;
+  padding: 8px;
+  width: 100%;
+  font-size: 16px;
 `

package/src/components/TimeLine.tsx

@@ -1,89 +1,89 @@
-import React from 'react';
-import { Typography } from '@mui/material';
-
-import {
-  Timeline as MuiTimeLine,
-  TimelineItem,
-  timelineItemClasses,
-  TimelineSeparator,
-  TimelineConnector,
-  TimelineContent,
-  TimelineDot,
-} from '@mui/lab';
-
-import { TimeLineBaseProps } from '@/interfaces/TimeLine';
-
-import { styled } from '@mui/material/styles';
-import { palette, lightenRGB } from '../helpers';
-import { ColorVariant, DataTimeLine } from '@/types';
-
-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,
-};
-
-const sampleData: Array<DataTimeLine> = [
-  {
-    title: 'imported register',
-    data: '01/04/2023 at 07h00',
-    by: 'By IEM',
-  },
-  {
-    title: '80% score applied on register',
-    data: '01/04/2023 at 07h05',
-    by: 'By IEM',
-  },
-  {
-    title: 'Registers transfered to campaign ID 10',
-    data: '',
-    by: '',
-  },
-];
-
-const TimeLineStyled = styled(MuiTimeLine)({
-  [`& .${timelineItemClasses.root}:before`]: {
-    flex: 0,
-    padding: 0,
-  },
-});
-
-export const TimeLine: React.FC<TimeLineBaseProps> = ({
-  data = sampleData,
-  color = 'primary',
-  position = 'left',
-  ...props
-}) => {
-  
-  const renderList = data.map((item, key) => (
-    <TimelineItem key={key}>
-      <TimelineSeparator>
-        <TimelineDot
-          sx={{
-            bgcolor: colorMap[color],
-            p: '6px',
-            border: `4px solid ${lightenRGB(colorMap[color], 50)}`,
-          }}
-        />
-        {key !== data.length - 1 && <TimelineConnector sx={{ bgcolor: colorMap[color], pt: '55px', pl: '3px' }} />}
-      </TimelineSeparator>
-      <TimelineContent>
-        {item.title}
-        <Typography sx={{ m: 'auto 0' }} variant="body2" color="text.secondary">
-          {item.data}
-        </Typography>
-        <Typography sx={{ m: 'auto 0', color: colorMap[color] }} variant="body2">
-          {item.by}
-        </Typography>
-      </TimelineContent>
-    </TimelineItem>
-  ));
-
-  return (
-    <TimeLineStyled {...props}>{renderList}</TimeLineStyled>
-  );
-};
+import React from 'react';
+import { Typography } from '@mui/material';
+
+import {
+  Timeline as MuiTimeLine,
+  TimelineItem,
+  timelineItemClasses,
+  TimelineSeparator,
+  TimelineConnector,
+  TimelineContent,
+  TimelineDot,
+} from '@mui/lab';
+
+import { TimeLineBaseProps } from '@/interfaces/TimeLine';
+
+import { styled } from '@mui/material/styles';
+import { palette, lightenRGB } from '../helpers';
+import { ColorVariant, DataTimeLine } from '@/types';
+
+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,
+};
+
+const sampleData: Array<DataTimeLine> = [
+  {
+    title: 'imported register',
+    data: '01/04/2023 at 07h00',
+    by: 'By IEM',
+  },
+  {
+    title: '80% score applied on register',
+    data: '01/04/2023 at 07h05',
+    by: 'By IEM',
+  },
+  {
+    title: 'Registers transfered to campaign ID 10',
+    data: '',
+    by: '',
+  },
+];
+
+const TimeLineStyled = styled(MuiTimeLine)({
+  [`& .${timelineItemClasses.root}:before`]: {
+    flex: 0,
+    padding: 0,
+  },
+});
+
+export const TimeLine: React.FC<TimeLineBaseProps> = ({
+  data = sampleData,
+  color = 'primary',
+  position = 'left',
+  ...props
+}) => {
+  
+  const renderList = data.map((item, key) => (
+    <TimelineItem key={key}>
+      <TimelineSeparator>
+        <TimelineDot
+          sx={{
+            bgcolor: colorMap[color],
+            p: '6px',
+            border: `4px solid ${lightenRGB(colorMap[color], 50)}`,
+          }}
+        />
+        {key !== data.length - 1 && <TimelineConnector sx={{ bgcolor: colorMap[color], pt: '55px', pl: '3px' }} />}
+      </TimelineSeparator>
+      <TimelineContent>
+        {item.title}
+        <Typography sx={{ m: 'auto 0' }} variant="body2" color="text.secondary">
+          {item.data}
+        </Typography>
+        <Typography sx={{ m: 'auto 0', color: colorMap[color] }} variant="body2">
+          {item.by}
+        </Typography>
+      </TimelineContent>
+    </TimelineItem>
+  ));
+
+  return (
+    <TimeLineStyled {...props}>{renderList}</TimeLineStyled>
+  );
+};

package/src/components/TimePicker.tsx

@@ -1,78 +1,78 @@
-import React from 'react';
-import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { TimePicker as MuiTimePicker } from '@mui/x-date-pickers/TimePicker';
-import { MobileTimePicker as MuiMobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
-import { DesktopTimePicker as MuiDesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
-import { styled } from '@mui/material/styles';
-
-import 'dayjs/locale/pt-br';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
-
-import 'dayjs/locale/pt-br';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-import { TimePickerBaseProps } from '@/interfaces/TimePicker';
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-const MuiTimePickerStyled = styled(MuiTimePicker)({
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-    borderRadius: 0,
-    borderBottom: '1px solid #666666',
-  },
-  '& .MuiFormLabel-root': {
-    backgroundColor: '#fff',
-    padding: '0 5px',
-  },
-});
-
-const MuiMobileTimePickerStyled = styled(MuiMobileTimePicker)({
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-    borderRadius: 0,
-    borderBottom: '1px solid #666666',
-  },
-  '& .MuiFormLabel-root': {
-    backgroundColor: '#fff',
-    padding: '0 5px',
-  },
-});
-
-const MuiDesktopTimePickerStyled = styled(MuiDesktopTimePicker)({
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-    borderRadius: 0,
-    borderBottom: '1px solid #666666',
-  },
-  '& .MuiFormLabel-root': {
-    backgroundColor: '#fff',
-    padding: '0 5px',
-  },
-});
-
-export const TimePicker = ({
-  label,
-  timezone = 'America/Sao_Paulo',
-  language = 'pt-br',
-  variant = 'desktop',
-}: TimePickerBaseProps) => {
-
-  return (
-    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
-      <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
-        {variant === 'responsive' && <MuiTimePickerStyled label={label} timezone={timezone} />}
-        {variant === 'mobile' && <MuiMobileTimePickerStyled label={label} timezone={timezone} />}
-        {variant === 'desktop' && <MuiDesktopTimePickerStyled label={label} timezone={timezone} />}
-      </DemoContainer>
-    </LocalizationProvider>
-  );
-};
+import React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimePicker as MuiTimePicker } from '@mui/x-date-pickers/TimePicker';
+import { MobileTimePicker as MuiMobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
+import { DesktopTimePicker as MuiDesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
+import { styled } from '@mui/material/styles';
+
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+import { TimePickerBaseProps } from '@/interfaces/TimePicker';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const MuiTimePickerStyled = styled(MuiTimePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+const MuiMobileTimePickerStyled = styled(MuiMobileTimePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+const MuiDesktopTimePickerStyled = styled(MuiDesktopTimePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+export const TimePicker = ({
+  label,
+  timezone = 'America/Sao_Paulo',
+  language = 'pt-br',
+  variant = 'desktop',
+}: TimePickerBaseProps) => {
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
+      <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
+        {variant === 'responsive' && <MuiTimePickerStyled label={label} timezone={timezone} />}
+        {variant === 'mobile' && <MuiMobileTimePickerStyled label={label} timezone={timezone} />}
+        {variant === 'desktop' && <MuiDesktopTimePickerStyled label={label} timezone={timezone} />}
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+};

package/src/components/Typography/Text/index.tsx

@@ -1,21 +1,21 @@
-import React from "react"
-import { TextProps } from "./interfaces"
-import * as S from "./styles"
-
-const Text:React.FC<TextProps> = ({ 
-  children,
-  className,
-  size,
-  type
-}) => {
-  return (
-    <S.Container 
-      className={className} 
-      size={size} 
-      type={type}>
-      { children }
-    </S.Container>
-  ) 
-}
-
+import React from "react"
+import { TextProps } from "./interfaces"
+import * as S from "./styles"
+
+const Text:React.FC<TextProps> = ({ 
+  children,
+  className,
+  size,
+  type
+}) => {
+  return (
+    <S.Container 
+      className={className} 
+      size={size} 
+      type={type}>
+      { children }
+    </S.Container>
+  ) 
+}
+
 export default Text

package/src/components/Typography/Text/interfaces.ts

@@ -1,6 +1,6 @@
-export interface TextProps {
-  children: JSX.Element[] | JSX.Element | string
-  className?: string
-  size: string
-  type: string
+export interface TextProps {
+  children: JSX.Element[] | JSX.Element | string
+  className?: string
+  size: string
+  type: string
 }

package/src/components/Typography/Text/styles.tsx

@@ -1,41 +1,41 @@
-import styled from "styled-components";
-import { TextProps } from "./interfaces";
-
-const setSize = (size: string) => {
-  switch (size) {
-    case "small":
-      return "12px";
-    case "medium":
-      return "14px";
-    case "large":
-      return "16px"
-    default:
-      return "14px";
-  }
-} 
-
-const setColor = (size: string) => {
-  switch (size) {
-    case "default":
-      return "var(--primary-project, var(--secondary, pink));";
-    case "secondary":
-      return "#808495";
-    case "success":
-      return "#6BC235"
-    case "warning":
-      return "#FF7F11"
-    case "danger":
-      return "#D63643"
-    case "info":
-      return "#43BBF2"
-    default:
-      return "#666";
-  }
-} 
-
-export const Container = styled.p<TextProps>`
-  margin: 0;
-  padding: 0;
-  color: ${props => setColor(props.type)};
-  font-size: ${props => setSize(props.size)};
+import styled from "styled-components";
+import { TextProps } from "./interfaces";
+
+const setSize = (size: string) => {
+  switch (size) {
+    case "small":
+      return "12px";
+    case "medium":
+      return "14px";
+    case "large":
+      return "16px"
+    default:
+      return "14px";
+  }
+} 
+
+const setColor = (size: string) => {
+  switch (size) {
+    case "default":
+      return "var(--primary-project, var(--secondary, pink));";
+    case "secondary":
+      return "#808495";
+    case "success":
+      return "#6BC235"
+    case "warning":
+      return "#FF7F11"
+    case "danger":
+      return "#D63643"
+    case "info":
+      return "#43BBF2"
+    default:
+      return "#666";
+  }
+} 
+
+export const Container = styled.p<TextProps>`
+  margin: 0;
+  padding: 0;
+  color: ${props => setColor(props.type)};
+  font-size: ${props => setSize(props.size)};
 `

package/src/components/Typography/Title/index.tsx

@@ -1,23 +1,23 @@
-import React from "react"
-import { TextProps } from "./interfaces"
-import * as S from "./styles"
-
-const Text:React.FC<TextProps> = ({ 
-  children,
-  className,
-  size,
-  type,
-  as
-}) => {
-  return (
-    <S.Container 
-      as={as}
-      className={className} 
-      size={size} 
-      type={type}>
-      { children }
-    </S.Container>
-  ) 
-}
-
+import React from "react"
+import { TextProps } from "./interfaces"
+import * as S from "./styles"
+
+const Text:React.FC<TextProps> = ({ 
+  children,
+  className,
+  size,
+  type,
+  as
+}) => {
+  return (
+    <S.Container 
+      as={as}
+      className={className} 
+      size={size} 
+      type={type}>
+      { children }
+    </S.Container>
+  ) 
+}
+
 export default Text

package/src/components/Typography/Title/interfaces.ts

@@ -1,7 +1,7 @@
-export interface TextProps {
-  children: JSX.Element[] | JSX.Element | string
-  className?: string
-  size: string
-  type: string
-  as?: string
+export interface TextProps {
+  children: JSX.Element[] | JSX.Element | string
+  className?: string
+  size: string
+  type: string
+  as?: string
 }