@mw-kit/mw-ui 0.3.4 → 1.0.3

package/src/components/Modal/templates/Audit/interfaces.ts

@@ -0,0 +1,17 @@
+import { ModalProps } from '../../interfaces'
+
+export interface AuditProps
+  extends Omit<
+    ModalProps,
+    | 'size'
+    | 'customSize'
+    | 'color'
+    | 'inverted'
+    | 'loading'
+    | 'footer'
+    | 'footerMessage'
+    | 'title'
+  > {
+  cancelAction: React.MouseEventHandler<HTMLButtonElement>
+  confirmAction: React.MouseEventHandler<HTMLButtonElement>
+}

package/src/components/Modal/templates/Audit/styles.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const Content = styled.div`
+  padding: ${({ theme }) => `${theme.spacings.s5} ${theme.spacings.s4}`};
+`

package/src/components/Modal/templates/ConfirmDelete/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import Modal from '../../component'
+
+import { ConfirmDeleteProps } from './interfaces'
+import * as S from './styles'
+
+const ConfirmDelete = (props: ConfirmDeleteProps) => {
+  const {
+    cancelAction,
+    confirmAction,
+    openState,
+    content,
+    children,
+    title,
+    closeOnClickOutside,
+    closeOnEsc,
+  } = props
+
+  return (
+    <Modal
+      title={'Deletar ' + title}
+      closeOnClickOutside={closeOnClickOutside}
+      closeOnEsc={closeOnEsc}
+      openState={openState}
+      size='custom'
+      customSize={{ width: '500px' }}
+      color='greyishBlue'
+      inverted
+      footer={[
+        {
+          appearance: 'bordeless',
+          content: 'Cancelar',
+          onClick: cancelAction,
+        },
+        {
+          color: 'pink',
+          content: 'Deletar',
+          onClick: confirmAction,
+        },
+      ]}
+    >
+      <S.Content>{children || content}</S.Content>
+    </Modal>
+  )
+}
+
+export default ConfirmDelete

package/src/components/Modal/templates/ConfirmDelete/interfaces.ts

@@ -0,0 +1,16 @@
+import { ModalProps } from '../../interfaces'
+
+export interface ConfirmDeleteProps
+  extends Omit<
+    ModalProps,
+    | 'size'
+    | 'customSize'
+    | 'color'
+    | 'inverted'
+    | 'loading'
+    | 'footer'
+    | 'footerMessage'
+  > {
+  cancelAction: React.MouseEventHandler<HTMLButtonElement>
+  confirmAction: React.MouseEventHandler<HTMLButtonElement>
+}

package/src/components/Modal/templates/ConfirmDelete/styles.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const Content = styled.div`
+  padding: ${({ theme }) => `${theme.spacings.s5} ${theme.spacings.s4}`};
+`

package/src/components/Modal/templates/ConfirmEdit/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import Modal from '../../component'
+
+import { ConfirmSuccessProps } from './interfaces'
+import * as S from './styles'
+
+const ConfirmSuccess = (props: ConfirmSuccessProps) => {
+  const {
+    homeAction,
+    cancelAction,
+    confirmAction,
+    openState,
+    content,
+    children,
+    closeOnClickOutside,
+    closeOnEsc,
+  } = props
+
+  return (
+    <Modal
+      title='Confirmação!'
+      closeOnClickOutside={closeOnClickOutside}
+      closeOnEsc={closeOnEsc}
+      openState={openState}
+      size='custom'
+      customSize={{ width: '630px' }}
+      color='greyishBlue'
+      inverted
+      footer={[
+        {
+          appearance: 'bordered',
+          content: 'Ir para Home',
+          onClick: homeAction,
+        },
+        {
+          appearance: 'bordered',
+          content: 'Continuar edição',
+          onClick: cancelAction,
+        },
+        {
+          content: 'Novo Cadastro',
+          onClick: confirmAction,
+        },
+      ]}
+    >
+      <S.Content>{children || content}</S.Content>
+    </Modal>
+  )
+}
+
+export default ConfirmSuccess

package/src/components/Modal/templates/ConfirmEdit/interfaces.ts

@@ -0,0 +1,18 @@
+import { ModalProps } from '../../interfaces'
+
+export interface ConfirmSuccessProps
+  extends Omit<
+    ModalProps,
+    | 'size'
+    | 'customSize'
+    | 'color'
+    | 'inverted'
+    | 'loading'
+    | 'footer'
+    | 'footerMessage'
+    | 'title'
+  > {
+  homeAction: React.MouseEventHandler<HTMLButtonElement>
+  cancelAction: React.MouseEventHandler<HTMLButtonElement>
+  confirmAction: React.MouseEventHandler<HTMLButtonElement>
+}

package/src/components/Modal/templates/ConfirmEdit/styles.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const Content = styled.div`
+  padding: ${({ theme }) => `${theme.spacings.s5} ${theme.spacings.s4}`};
+`

package/src/components/Modal/templates/index.ts

@@ -0,0 +1,3 @@
+export { default as ConfirmDelete } from './ConfirmDelete'
+export { default as ConfirmEdit } from './ConfirmEdit'
+export { default as Audit } from './Audit'

package/src/components/Placeholder/components/Template1/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { PlaceholderProps } from '../../interfaces'
+import * as S from './styles'
+
+const Template1 = (props: PlaceholderProps) => {
+  if (!props.loading) return <React.Fragment />
+  return (
+    <S.Container>
+      <S.Header>
+        <S.HeaderImage />
+        <S.HeaderContent>
+          <S.HeaderLine size='medium' height='9px' color='#E6E6E6' />
+          <S.HeaderLine size='small' height='9px' color='#E6E6E6' />
+        </S.HeaderContent>
+      </S.Header>
+      <S.MainContent>
+        <S.MainLine size='medium' height='9px' color='#E6E6E6' />
+        <S.MainLine size='small' height='9px' color='#E6E6E6' />
+        <S.MainLine size='mini' height='9px' color='#E6E6E6' />
+        <S.MainLine size='medium' height='9px' color='#E6E6E6' />
+        <S.MainLine size='small' height='9px' color='#E6E6E6' />
+      </S.MainContent>
+    </S.Container>
+  )
+}
+
+export default Template1

package/src/components/Placeholder/components/Template1/styles.ts

@@ -0,0 +1,68 @@
+import styled, { css } from 'styled-components'
+import { HeaderLineProps } from '../../interfaces'
+
+export const Container = styled.div`
+  width: 100%;
+  height: 300px;
+  position: absolute;
+  padding: 14px;
+`
+
+export const Header = styled.div`
+  display: flex;
+`
+
+export const HeaderImage = styled.div`
+  width: 43px;
+  height: 44px;
+  background-color: #ebebeb;
+`
+
+export const HeaderContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+`
+
+export const MainContent = styled.div`
+  margin-top: 8px;
+`
+
+export const HeaderLine = styled.div<HeaderLineProps>`
+  height: ${(props) => props.height};
+  background-color: #ebebeb;
+  margin-left: 7px;
+
+  & + div {
+    margin-top: 14px;
+  }
+
+  ${(props) =>
+    props.size === 'mini' &&
+    css`
+      width: 15%;
+    `}
+  ${(props) =>
+    props.size === 'small' &&
+    css`
+      width: 25%;
+    `}
+
+    ${(props) =>
+    props.size === 'medium' &&
+    css`
+      width: 45%;
+    `}
+
+    ${(props) =>
+    props.size === 'large' &&
+    css`
+      width: 75%;
+    `}
+`
+
+export const MainLine = styled(HeaderLine)<HeaderLineProps>`
+  margin-bottom: 14px;
+  margin-left: 0;
+`

package/src/components/Placeholder/components/Template10/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { PlaceholderProps } from '../../interfaces'
+import * as S from './styles'
+
+const Template10 = (props: PlaceholderProps) => {
+  if (!props.loading) return <React.Fragment />
+  return (
+    <S.Container>
+      <S.Header>
+        <S.CustomLine width='89px' height='10px' color='#EBEBEB' size='large' />
+        <S.CustomLine width='50px' height='10px' color='#EBEBEB' size='large' />
+      </S.Header>
+      <S.Main>
+        <S.GraphLine width='27px' height='56px' color='#EBEBEB' size='large' />
+        <S.GraphLine width='27px' height='73px' color='#EBEBEB' size='large' />
+        <S.GraphLine width='27px' height='61px' color='#EBEBEB' size='large' />
+        <S.GraphLine width='27px' height='56px' color='#EBEBEB' size='large' />
+        <S.GraphLine width='27px' height='73px' color='#EBEBEB' size='large' />
+        <S.GraphLine width='27px' height='61px' color='#EBEBEB' size='large' />
+        <S.GraphLine width='27px' height='27px' color='#EBEBEB' size='large' />
+        <S.GraphLine width='27px' height='90px' color='#EBEBEB' size='large' />
+        <S.GraphLine width='27px' height='56px' color='#EBEBEB' size='large' />
+        <S.GraphLine width='27px' height='56px' color='#EBEBEB' size='large' />
+      </S.Main>
+    </S.Container>
+  )
+}
+
+export default Template10

package/src/components/Placeholder/components/Template10/styles.ts

@@ -0,0 +1,79 @@
+import styled, { css } from 'styled-components'
+import { HeaderLineProps } from '../../interfaces'
+export const Container = styled.div`
+  width: 395px;
+  height: 245px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #f5f5f5 0% 0% no-repeat padding-box;
+`
+
+export const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 14px;
+  width: 100%;
+`
+
+export const HeaderLine = styled.div<HeaderLineProps>`
+  height: ${(props) => props.height};
+  background-color: #ebebeb;
+  margin-left: 7px;
+
+  & + div {
+    margin-top: 7px;
+  }
+
+  ${(props) =>
+    props.size === 'mini' &&
+    css`
+      width: 15%;
+    `}
+  ${(props) =>
+    props.size === 'small' &&
+    css`
+      width: 25%;
+    `}
+
+    ${(props) =>
+    props.size === 'medium' &&
+    css`
+      width: 45%;
+    `}
+
+    ${(props) =>
+    props.size === 'large' &&
+    css`
+      width: 75%;
+    `}
+`
+
+export const CustomLine = styled(HeaderLine)`
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  background-color: ${(props) => props.color};
+  border: 1px solid #dedede5e;
+`
+
+export const GraphLine = styled(CustomLine)`
+  margin: 0 7px;
+`
+
+export const Main = styled.div`
+  flex: 1;
+  padding: 0 7px 72px 7px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+`
+
+export const Circle = styled.div`
+  width: 128px;
+  height: 128px;
+  background-color: #ebebeb;
+  border-radius: 50%;
+`

package/src/components/Placeholder/components/Template2/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import * as S from './styles'
+
+import { PlaceholderProps } from '../../interfaces'
+
+const Template2 = (props: PlaceholderProps) => {
+  if (!props.loading) return <React.Fragment />
+  return (
+    <S.Template2Container>
+      <S.Header>
+        <S.HeaderImage />
+        <S.HeaderContent>
+          <S.HeaderLine size='mini' height='9px' color='#E6E6E6' />
+          <S.HeaderLine size='mini' height='9px' color='#E6E6E6' />
+        </S.HeaderContent>
+      </S.Header>
+      <S.MainContent>
+        <S.MainLine size='mini' height='9px' color='#E6E6E6' />
+        <S.MainLine size='mini' height='9px' color='#E6E6E6' />
+      </S.MainContent>
+    </S.Template2Container>
+  )
+}
+
+export default Template2

package/src/components/Placeholder/components/Template2/styles.ts

@@ -0,0 +1,43 @@
+import styled from 'styled-components'
+import { HeaderLineProps } from '../../interfaces'
+import { HeaderLine as HeaderLineStyle } from '../../styles'
+
+export const Container = styled.div`
+  width: 100%;
+  max-height: 100%;
+  position: absolute;
+  padding: 14px;
+`
+
+export const Template2Container = styled(Container)`
+  background: #fff;
+  border: 2px solid #ebebeb;
+`
+
+export const Header = styled.div`
+  display: flex;
+`
+
+export const HeaderImage = styled.div`
+  width: 43px;
+  height: 44px;
+  background-color: #ebebeb;
+`
+
+export const HeaderContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+`
+
+export const MainContent = styled.div`
+  margin-top: 8px;
+`
+
+export const MainLine = styled(HeaderLineStyle)<HeaderLineProps>`
+  margin-bottom: 14px;
+  margin-left: 0;
+`
+
+export const HeaderLine = styled(HeaderLineStyle)``

package/src/components/Placeholder/components/Template3/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { PlaceholderProps } from '../../interfaces'
+import * as S from './styles'
+
+const Template3 = (props: PlaceholderProps) => {
+  if (!props.loading) return <React.Fragment />
+  return (
+    <S.Template3Container>
+      <S.Template3Line size='large' height='7px' color='#DADADA' />
+      <S.Template3Line size='small' height='7px' color='#DADADA' />
+      <S.Template3Line size='medium' height='7px' color='#DADADA' />
+      <S.Template3Line size='small' height='7px' color='#DADADA' />
+      <S.Template3Line size='mini' height='7px' color='#DADADA' />
+    </S.Template3Container>
+  )
+}
+
+export default Template3

package/src/components/Placeholder/components/Template3/styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+import { HeaderLine } from '../../styles'
+
+export const Container = styled.div`
+  width: 100%;
+  max-height: 100%;
+  position: absolute;
+  padding: 14px;
+`
+
+export const Template3Container = styled(Container)``
+export const Template3Line = styled(HeaderLine)`
+  background-color: #dadada;
+  height: ${(props) => props.height};
+`

package/src/components/Placeholder/components/Template4/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { PlaceholderProps } from '../../interfaces'
+import * as S from './styles'
+const Template4 = (props: PlaceholderProps) => {
+  if (!props.loading) return <React.Fragment />
+  return (
+    <S.Template4Container>
+      <S.CustomLine size='large' height='12px' color='#DDDEDF' width='594px' />
+      <S.CustomLine size='large' height='12px' color='#DDDEDF' width='572px' />
+      <S.CustomLine size='large' height='12px' color='#DDDEDF' width='624px' />
+      <S.CustomLine size='large' height='12px' color='#DDDEDF' width='544px' />
+      <S.CustomLine size='large' height='12px' color='#DDDEDF' width=' 607px' />
+      <S.CustomLine size='large' height='12px' color='#DDDEDF' width='581px' />
+      <S.CustomLine size='large' height='12px' color='#DDDEDF' width='601px' />
+      <S.CustomLine size='large' height='12px' color='#DDDEDF' width='251px' />
+    </S.Template4Container>
+  )
+}
+
+export default Template4

package/src/components/Placeholder/components/Template4/styles.ts

@@ -0,0 +1,50 @@
+import styled, { css } from 'styled-components'
+import { HeaderLineProps } from '../../interfaces'
+
+export const Container = styled.div`
+  width: 100%;
+  max-height: 100%;
+  position: absolute;
+  padding: 14px;
+`
+export const HeaderLine = styled.div<HeaderLineProps>`
+  height: ${(props) => props.height};
+  background-color: #ebebeb;
+  margin-left: 7px;
+
+  & + div {
+    margin-top: 14px;
+  }
+
+  ${(props) =>
+    props.size === 'mini' &&
+    css`
+      width: 15%;
+    `}
+  ${(props) =>
+    props.size === 'small' &&
+    css`
+      width: 25%;
+    `}
+
+    ${(props) =>
+    props.size === 'medium' &&
+    css`
+      width: 45%;
+    `}
+
+    ${(props) =>
+    props.size === 'large' &&
+    css`
+      width: 75%;
+    `}
+`
+export const Template4Container = styled(Container)`
+  border: 1px solid #e6e6e7;
+  border-radius: 4px;
+`
+export const CustomLine = styled(HeaderLine)`
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  background-color: ${(props) => props.color};
+`

package/src/components/Placeholder/components/Template5/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { PlaceholderProps } from '../../interfaces'
+import * as S from './styles'
+
+const Template5 = (props: PlaceholderProps) => {
+  if (!props.loading) return <React.Fragment />
+  return (
+    <S.Container>
+      <S.Circle />
+      <S.MainContent>
+        <S.CustomLine
+          width='406px'
+          height='16px'
+          color='#DDDEDF'
+          size='large'
+        />
+        <S.CustomLine
+          width='387px'
+          height='16px'
+          color='#DDDEDF'
+          size='large'
+        />
+        <S.CustomLine
+          width='426px'
+          height='16px'
+          color='#DDDEDF'
+          size='large'
+        />
+        <S.CustomLine
+          width='189px'
+          height='16px'
+          color='#DDDEDF'
+          size='large'
+        />
+      </S.MainContent>
+    </S.Container>
+  )
+}
+
+export default Template5

package/src/components/Placeholder/components/Template5/styles.ts

@@ -0,0 +1,64 @@
+import styled, { css } from 'styled-components'
+import { HeaderLineProps } from '../../interfaces'
+export const Container = styled.div`
+  position: absolute;
+  width: 746px;
+  height: 169px;
+  border: 1px solid #e6e6e7;
+  border-radius: 4px;
+  padding: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const Circle = styled.div`
+  width: 141px;
+  height: 141px;
+  background-color: #dddedf;
+  border-radius: 50%;
+`
+
+export const HeaderLine = styled.div<HeaderLineProps>`
+  height: ${(props) => props.height};
+  background-color: #ebebeb;
+  margin-left: 7px;
+
+  & + div {
+    margin-top: 14px;
+  }
+
+  ${(props) =>
+    props.size === 'mini' &&
+    css`
+      width: 15%;
+    `}
+  ${(props) =>
+    props.size === 'small' &&
+    css`
+      width: 25%;
+    `}
+
+    ${(props) =>
+    props.size === 'medium' &&
+    css`
+      width: 45%;
+    `}
+
+    ${(props) =>
+    props.size === 'large' &&
+    css`
+      width: 75%;
+    `}
+`
+
+export const CustomLine = styled(HeaderLine)`
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  background-color: ${(props) => props.color};
+`
+
+export const MainContent = styled.div`
+  flex: 1;
+  margin-left: 35px;
+`