norma-library 0.5.810 → 0.5.812

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

@@ -0,0 +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)};
+`

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

@@ -0,0 +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>
+  ) 
+}
+
+export default Text

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

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

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

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

package/src/components/Typography/index.tsx

@@ -0,0 +1,7 @@
+import Text from "./Text";
+import Title from "./Title"
+
+export {
+  Text,
+  Title
+}

package/src/components/index.ts

@@ -6,7 +6,6 @@ export * from './Card';
 export * from './ChatMessage';
 export * from './ChatMessageBalloon/ChatMessageBalloon';
 export * from './CheckBox';
-export * from './DataGrid';
 export * from './DatePicker';
 export * from './DropDown';
 export * from './IconButton';
@@ -19,6 +18,7 @@ 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/index.css

@@ -1,2 +0,0 @@
-@import "styles/globals.css";
-@import "styles/custom.css";

package/src/index.ts

@@ -14,9 +14,18 @@ import { Tabs } from './components/Tabs';
 import { Tag } from './components/Tag';
 import { TextField } from './components/TextField';
 import { DatePicker } from './components/DatePicker';
-import { DataGrid, ChatMessage, ChatMessageBalloon } from './components';
+import { ChatMessage, ChatMessageBalloon } from './components';
 import { NormaProvider } from './providers/NormaProvider';
 import { themes, getPalette } from './helpers';
+import DateInput from './components/DateInput';
+import Box from './components/Box'
+import Breadcrumb from './components/Breadcrumb';
+import SelectInput from './components/SelectInput';
+import MultiSelectInput from './components/MultiSelectInput';
+import { Title, Text } from './components/Typography'
+import TextInput from './components/TextInput';
+import Table from './components/Table';
+
 
 export {
   Accordion,
@@ -38,7 +47,15 @@ export {
   Tabs,
   Tag,
   TextField,
-  DataGrid,
   NormaProvider,
   themes,
+  DateInput,
+  Box,
+  Breadcrumb,
+  SelectInput,
+  MultiSelectInput,
+  Text,
+  Title,
+  TextInput,
+  Table
 };

package/src/interfaces/index.ts

@@ -5,7 +5,6 @@ export * from './Button';
 export * from './Card';
 export * from './ChatMessage';
 export * from './CheckBox';
-export * from './DataGrid';
 export * from './DatePicker';
 export * from './DropDown';
 export * from './IconButton';

package/src/sample-data.json

@@ -2,7 +2,6 @@
   {
     "columns": [
       {
-        "allowFiltering": true,
         "allowFiltering": true,
         "allowSorting": true,
         "field": "data",
@@ -68,8 +67,8 @@
       {
         "allowFiltering": true,
         "allowSorting": true,
-        "field": "origem",
-        "format": "number",
+        "field": "origin",
+        "format": "string",
         "headerText": "Origem",
         "textAlign": "left",
         "width": "100%"

package/src/stories/Box.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Box from '../components/Box';
+
+export default {
+  title: 'Layout/Box',
+  component: Box,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'gray',
+      values: [
+        { 
+          name: 'gray', 
+          value: '#f8f8f8' 
+        }
+      ],
+    },
+  },
+  argTypes: {
+    children: {
+      description: 'Adiciona um children.'
+    },
+    size: {
+      description: 'Definir o tamanho do componente.',
+      options: ['small', 'medium', 'large'],
+      control: { type: 'radio' }
+    },
+  },
+}
+
+export const Default = (args) => <Box {...args}><p>Conteudo</p></Box>
+
+Default.args = { 
+  size: 'medium'
+}

package/src/stories/Breadcrumb.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Breadcrumb from '../components/Breadcrumb';
+
+const routes = [
+  {
+    name: 'Pagina 1',
+    route: '/pagina-1'
+  },
+  {
+    name: 'Pagina 2',
+    route: '/pagina-2'
+  },
+  {
+    name: 'Pagina 3',
+    route: '/pagina-3'
+  }
+]
+
+export default {
+  title: 'Layout/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    links: {
+      description: 'Adicione as rotas que irão aparecer.',
+    },
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    onChange: {
+      description: 'Função para capturar o valor quando clicado.'
+    }
+  }
+}
+
+export const Default = (args) => <Breadcrumb {...args} />
+
+Default.args = {
+  links: routes,
+  className: '',
+  onChange: '',
+}

package/src/stories/DateInput.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import DateInput from '../components/DateInput';
+
+export default {
+  title: 'Form/DateInput',
+  component: DateInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: { 
+    dateFormat: {
+      description: "Adicione uma formato de data: 'dd/MM/yyyy' ou 'dd/MM/yyyy HH:mm'.",
+      options: ['dd/MM/yyyy', 'dd/MM/yyyy HH:mm']
+    },
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    label: {
+      description: 'Adicione uma label.'
+    },
+    dateSelected: {
+      description: 'Adicione uma data inicial.'
+    },
+    onChange: {
+      description: 'Função para capturar o valor quando alterado.'
+    },
+    showTimeSelect: {
+      description: 'Adiciona horario na seleção da data.'
+    },
+    timeFormat: {
+      description: "Adicione uma formato ao horario na seleção da data."
+    },
+    disabled: {
+      description: 'Habilita ou desabilita.'
+    }
+  }
+
+}
+
+export const Default = (args) => <DateInput {...args} />
+
+Default.args = {
+  dateFormat: "dd/MM/yyyy HH:mm",
+  className: '',
+  label: 'Data:',
+  dateSelected: new Date(),
+  onChange: '',
+  showTimeSelect: false,
+  timeFormat: 'HH:mm',
+  disabled: false
+}

package/src/stories/MultiSelectInput.stories.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import MultiSelectInput from '../components/MultiSelectInput';
+
+export default {
+  title: 'Form/MultiSelectInput',
+  component: MultiSelectInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: { 
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    label: {
+      description: 'Adicione uma label.'
+    },
+    onChange: {
+      description: 'Função para capturar o valor quando alterado.'
+    },
+    placeholder: {
+      description: 'Adicione um placeholder.'
+    },
+    options: {
+      description: 'Lista de valores a ser exibido.'
+    },
+    value: {
+      description: 'Valor selecionado.'
+    },
+    isSearchable: {
+      description: 'Habilita a função de buscar um valor.'
+    },
+    isClearable: {
+      description: 'Habilita a função de limpar o item selecionado.'
+    },
+    disabled: {
+      description: 'Habilita ou desabilita.'
+    }
+  }
+}
+
+export const Default = (args) => {
+  const options = [
+    {
+      label: 'options 1',
+      value: 'value 1'
+    },
+    {
+      label: 'options 2',
+      value: 'value 2'
+    },
+    {
+      label: 'options 3',
+      value: 'value 3'
+    },
+    {
+      label: 'options 4',
+      value: 'value 4'
+    },
+    {
+      label: 'options 5',
+      value: 'value 5'
+    },
+    {
+      label: 'options 6',
+      value: 'value 6'
+    }
+  ]
+  const [selectedValue, setSelectedValue] = useState<any>(options[0])
+  return (
+    <div style={{
+      width: 300
+    }}>
+      <MultiSelectInput 
+        options={options}
+        value={selectedValue}
+        onChange={(value) => setSelectedValue(value)} 
+        {...args} 
+      />
+    </div>
+  )
+}
+
+Default.args = { 
+  className: '',
+  label: 'Selecione:',
+  placeholder: 'Selecione uma opção',
+  disabled: false,
+  isSearchable: false,
+  isClearable: false,
+}

package/src/stories/SelectInput.stories.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import SelectInput from '../components/SelectInput';
+
+export default {
+  title: 'Form/SelectInput',
+  component: SelectInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: { 
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    label: {
+      description: 'Adicione uma label.'
+    },
+    onChange: {
+      description: 'Função para capturar o valor quando alterado.'
+    },
+    placeholder: {
+      description: 'Adicione um placeholder.'
+    },
+    options: {
+      description: 'Lista de valores a ser exibido.'
+    },
+    value: {
+      description: 'Valor selecionado.'
+    },
+    isSearchable: {
+      description: 'Habilita a função de buscar um valor.'
+    },
+    isClearable: {
+      description: 'Habilita a função de limpar o item selecionado.'
+    },
+    disabled: {
+      description: 'Habilita ou desabilita.'
+    }
+  }
+}
+
+export const Default = (args) => {
+  const options = [
+    {
+      label: 'options 1',
+      value: 'value 1'
+    },
+    {
+      label: 'options 2',
+      value: 'value 2'
+    },
+    {
+      label: 'options 3',
+      value: 'value 3'
+    }
+  ]
+  const [selectedValue, setSelectedValue] = useState<any>(options[0])
+  return (
+    <div style={{
+      width: 300
+    }}>
+      <SelectInput 
+        options={options}
+        value={selectedValue}
+        onChange={(value) => setSelectedValue(value)} 
+        {...args} 
+      />
+    </div>
+  )
+}
+
+Default.args = { 
+  className: '',
+  label: 'Selecione:',
+  placeholder: 'Selecione uma opção',
+  disabled: false,
+  isSearchable: false,
+  isClearable: false,
+}