Merge pull request #365 from nginformatica/feat/design-system-typography

Feat/design system typography
nginformatica · Dec 30, 2024 · 9b2ff96 · 9b2ff96
2 parents 33637f7 + 509f8e0
commit 9b2ff96
Show file tree

Hide file tree

Showing 19 changed files with 623 additions and 579 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.35.2",
+    "version": "0.35.3",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -32,13 +32,13 @@
     "dependencies": {
         "@emotion/react": "11.14.0",
         "@emotion/styled": "11.14.0",
-        "@mui/icons-material": "6.2.0",
-        "@mui/material": "6.2.0",
-        "@mui/system": "6.2.0",
-        "@mui/x-date-pickers": "7.23.2",
+        "@mui/icons-material": "6.3.0",
+        "@mui/material": "6.3.0",
+        "@mui/system": "6.3.0",
+        "@mui/x-date-pickers": "7.23.3",
         "ramda": "0.30.1",
         "react-loading-skeleton": "3.5.0",
-        "react-number-format": "5.4.2"
+        "react-number-format": "5.4.3"
     },
     "devDependencies": {
         "@babel/cli": "7.26.4",
@@ -49,7 +49,7 @@
         "@babel/preset-typescript": "7.26.0",
         "@faker-js/faker": "9.3.0",
         "@storybook/addon-essentials": "8.4.7",
-        "@storybook/addon-webpack5-compiler-babel": "3.0.3",
+        "@storybook/addon-webpack5-compiler-babel": "3.0.5",
         "@storybook/blocks": "8.4.7",
         "@storybook/react": "8.4.7",
         "@storybook/react-webpack5": "8.4.7",
@@ -63,8 +63,8 @@
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
         "@types/uuid": "10.0.0",
-        "@typescript-eslint/eslint-plugin": "8.18.0",
-        "@typescript-eslint/parser": "8.18.0",
+        "@typescript-eslint/eslint-plugin": "8.19.0",
+        "@typescript-eslint/parser": "8.19.0",
         "babel-loader": "9.2.1",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
@@ -74,7 +74,7 @@
         "eslint-import-resolver-typescript": "3.7.0",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-prettier": "5.2.1",
-        "eslint-plugin-react": "7.37.2",
+        "eslint-plugin-react": "7.37.3",
         "eslint-plugin-react-hooks": "5.1.0",
         "fs-extra": "11.2.0",
         "identity-obj-proxy": "3.0.0",
@@ -88,7 +88,7 @@
         "ts-jest": "29.2.5",
         "ts-loader": "9.5.1",
         "typescript": "5.7.2",
-        "typescript-eslint": "8.18.0",
+        "typescript-eslint": "8.19.0",
         "uuid": "11.0.3",
         "webpack": "5.97.1"
     },

diff --git a/src/core/data-display/data-table/data-table-query-paginated.stories.tsx b/src/core/data-display/data-table/data-table-query-paginated.stories.tsx
@@ -8,7 +8,6 @@ import type {
 import MuiSkeleton from '@mui/material/Skeleton'
 import MuiTableCell from '@mui/material/TableCell'
 import MuiTableRow from '@mui/material/TableRow'
-import MuiTypography from '@mui/material/Typography'
 import { format } from 'date-fns'
 import type { ColumnSpec, DataTableController, Identifier } from './types'
 import type { Meta } from '@storybook/react'
@@ -20,6 +19,7 @@ import {
     IconEdit,
     IconSave
 } from '@/icons/mui'
+import Typography from '../typography'
 import { DataTableAction } from './data-table-action'
 import { DataTableQueryPaginated } from './data-table-query-paginated'
 import { RowMode } from './types'
@@ -282,7 +282,7 @@ export const Empty = () => {
                     boxSizing: 'border-box'
                 }}>
                 <div>
-                    <MuiTypography>Empty DataTable</MuiTypography>
+                    <Typography>Empty DataTable</Typography>
                 </div>
             </td>
         </tr>
@@ -453,9 +453,7 @@ export const Crud = () => {
                         padding: '16px',
                         justifyContent: 'space-between'
                     }}>
-                    <MuiTypography>
-                        Confirm Delete "{data.product}"?
-                    </MuiTypography>
+                    <Typography>Confirm Delete "{data.product}"?</Typography>
                     <div style={{ display: 'flex' }}>
                         <DataTableAction
                             label='CheckIcon'

diff --git a/src/core/data-display/list-item/index.tsx b/src/core/data-display/list-item/index.tsx
@@ -42,8 +42,14 @@ const ListItem = (props: ListItemProps) => {
                     <MuiListItemText
                         primary={props.title}
                         secondary={props.subtitle}
-                        primaryTypographyProps={{ color: 'inherit' }}
-                        secondaryTypographyProps={{ color: 'inherit' }}
+                        slotProps={{
+                            primary: {
+                                color: 'inherit'
+                            },
+                            secondary: {
+                                color: 'inherit'
+                            }
+                        }}
                         data-testid={`list-item-${props.subtitle}`}
                     />
                 )}

diff --git a/src/core/data-display/typography/typography.stories.tsx b/src/core/data-display/typography/typography.stories.tsx
@@ -1,6 +1,9 @@
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import Typography from '.'
+import { theme } from '@/theme'
+
+const { primary } = theme.colors
 
 const meta: Meta<typeof Typography> = {
     title: 'DataDisplay/Typography',
@@ -22,13 +25,16 @@ const meta: Meta<typeof Typography> = {
                 'subtitle2',
                 'body1',
                 'body2',
-                'inherit'
+                'caption',
+                'button',
+                'overline'
             ],
             control: { type: 'radio' },
             description:
                 'The variants based on the HTML tags. Must be ' +
-                '`h1 | h2 | h3 | h4 | h5 | h6 | subtitle1 | subtitle2 | body1 | body2 | inherit`. ' +
-                'If not set, the default is "body1"'
+                '`h1 | h2 | h3 | h4 | h5 | h6 | subtitle1 | subtitle2 | body1 |` ' +
+                '` body2 | caption | button | overline`. ' +
+                'If not set, the default is `body2`.'
         },
         color: {
             options: [
@@ -37,13 +43,23 @@ const meta: Meta<typeof Typography> = {
                 'secondary',
                 'error',
                 'textPrimary',
-                'textSecondary'
+                'textSecondary',
+                'textDisabled'
             ],
             control: { type: 'radio' },
             description:
                 'The text color. Must be ' +
-                '`default | primary | secondary | error | textPrimary | textSecondary `. ' +
-                'If not set, the default is "default"'
+                '`default | primary | secondary | error |` ' +
+                '`textPrimary | textSecondary | textDisabled.` ' +
+                'If not set, the default is `default`.'
+        },
+        align: {
+            options: ['inherit', 'center', 'right', 'left', 'justify'],
+            control: { type: 'radio' },
+            description:
+                'The text alignment. Must be ' +
+                '`inherit | center | right | left | justify.` ' +
+                'If not set, the default is `left`.'
         },
         margin: {
             control: 'text',
@@ -66,12 +82,37 @@ type Story = StoryObj<typeof Typography>
 
 export const typography: Story = {
     render: ({ ...args }) => {
-        return <Typography {...args} />
+        return (
+            <>
+                <Typography
+                    variant='subtitle2'
+                    color='primary'
+                    align='center'
+                    width='70%'
+                    margin='0 auto 48px'>
+                    Como um utilitário CSS, o componente Typography também
+                    suporta todas as propriedades{' '}
+                    <a
+                        target='_blank'
+                        href='https://mui.com/system/properties/'
+                        style={{
+                            color: primary.light,
+                            textDecoration: 'none'
+                        }}>
+                        system
+                    </a>
+                    . Você pode usá-las como props diretamente no componente.
+                </Typography>
+
+                <Typography {...args} />
+            </>
+        )
     },
     args: {
-        children: 'This is a text!',
+        children: 'This is Typography component text!',
         variant: 'body1',
         color: 'default',
+        align: 'left',
         margin: '0px',
         padding: '0px',
         style: {}

diff --git a/src/core/feedback/nothing-found/index.tsx b/src/core/feedback/nothing-found/index.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
-import type { TypographyProps } from '@mui/material/Typography'
-import { TextTypography } from './styles'
+import Typography from '@/core/data-display/typography'
 
-export interface IProps extends TypographyProps {
+export interface IProps {
     searchText?: string
     customText?: string
     buttonLabel?: string
@@ -21,16 +20,17 @@ const NothingFound = (props: IProps) => {
     const { customText = message, searchText = '', show, ...otherProps } = rest
 
     return show ? (
-        <TextTypography
-            align='center'
+        <Typography
+            flex={1}
             variant='h5'
+            align='center'
             color='textSecondary'
             padding='48px 0'
             {...otherProps}>
             {searchText !== ''
                 ? `Sua pesquisa "${searchText}" não retornou nenhum resultado.`
                 : customText}
-        </TextTypography>
+        </Typography>
     ) : null
 }
 

diff --git a/src/core/feedback/nothing-found/styles.ts b/src/core/feedback/nothing-found/styles.ts
diff --git a/src/core/feedback/validation-dialog/index.tsx b/src/core/feedback/validation-dialog/index.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import type { ReactNode } from 'react'
 import Actions from '@/core/data-display/actions'
+import Typography from '@/core/data-display/typography'
 import Button from '@/core/inputs/button'
-import { DialogTypography, MuiDialog, ValidationWrapper } from './styles'
+import { MuiDialog, ValidationWrapper } from './styles'
 
 export interface IValidateProps {
     open: boolean
@@ -100,14 +101,16 @@ const ValidationDialog = ({
         }
     ) => {
         if (status === 'Success') {
-            return <DialogTypography>{description.success}</DialogTypography>
+            return (
+                <Typography variant='body1'>{description.success}</Typography>
+            )
         }
 
         if (status === 'Error') {
-            return <DialogTypography>{description.error}</DialogTypography>
+            return <Typography variant='body1'>{description.error}</Typography>
         }
 
-        return <DialogTypography>{description.loading}</DialogTypography>
+        return <Typography variant='body1'>{description.loading}</Typography>
     }
 
     const renderContent = (

diff --git a/src/core/feedback/validation-dialog/styles.ts b/src/core/feedback/validation-dialog/styles.ts
@@ -1,5 +1,4 @@
 import { default as styled } from 'styled-components'
-import Typography from '@/core/data-display/typography'
 import Dialog from '../dialog'
 
 export const MuiDialog = styled(Dialog)`
@@ -8,12 +7,6 @@ export const MuiDialog = styled(Dialog)`
     }
 `
 
-export const DialogTypography = styled(Typography)`
-    && {
-        font-size: 16px;
-    }
-`
-
 export const ValidationWrapper = styled.div`
     display: flex;
     align-items: center;

diff --git a/src/core/navigation/breadcrumbs/index.tsx b/src/core/navigation/breadcrumbs/index.tsx
@@ -2,8 +2,9 @@ import React from 'react'
 import type { ReactNode } from 'react'
 import MuiBreadcrumbs from '@mui/material/Breadcrumbs'
 import { addIndex, map } from 'ramda'
+import Typography from '@/core/data-display/typography'
 import { IconNavigateNext } from '@/icons/mui'
-import { BreadcrumbLink, TextTypography } from './styles'
+import { BreadcrumbLink } from './styles'
 
 const imap = addIndex(map)
 
@@ -43,9 +44,9 @@ const Breadcrumbs = ({
         const link = '/' + allChunks.slice(1, chunkIndex + 1).join('/')
 
         const text = (
-            <TextTypography key={link} color='inherit'>
+            <Typography key={link} color='inherit'>
                 {validChunkWord}
-            </TextTypography>
+            </Typography>
         )
 
         const isLastChunk = chunkIndex === lastChunkIndex

diff --git a/src/core/navigation/breadcrumbs/styles.ts b/src/core/navigation/breadcrumbs/styles.ts
@@ -1,5 +1,4 @@
 import { default as styled } from 'styled-components'
-import { default as Typography } from '@/core/data-display/typography'
 import { theme } from '@/theme'
 
 const { primary } = theme.colors
@@ -12,9 +11,3 @@ export const BreadcrumbLink = styled.a`
         text-decoration: underline;
     }
 `
-
-export const TextTypography = styled(Typography)`
-    && {
-        display: flex;
-    }
-`
diff --git a/src/core/surfaces/card/index.tsx b/src/core/surfaces/card/index.tsx
@@ -3,10 +3,11 @@ import type { ReactNode } from 'react'
 import type { IButtonProps } from '@/core/inputs/button'
 import type { IconButtonProps } from '@/core/inputs/icon-button'
 import Line from '@/core/data-display/line'
+import Typography from '@/core/data-display/typography'
 import AddButton from '@/core/inputs/add-button'
 import Paper from '@/core/surfaces/paper'
 import { IconClose, IconEdit, IconDelete } from '@/icons/mui'
-import { CardButton, Header, Title } from './styles'
+import { CardButton, Header } from './styles'
 import { theme } from '@/theme'
 
 const { feedback } = theme.colors
@@ -66,12 +67,13 @@ const Card = (props: IProps) => {
                 <>
                     <Header>
                         {title && (
-                            <Title
+                            <Typography
                                 name={name + '-title'}
+                                flex={1}
                                 variant='h6'
                                 color='primary'>
                                 {title}
-                            </Title>
+                            </Typography>
                         )}
 
                         {action}

diff --git a/src/core/surfaces/card/styles.ts b/src/core/surfaces/card/styles.ts
@@ -1,5 +1,4 @@
 import { default as styled } from 'styled-components'
-import Typography from '@/core/data-display/typography'
 import IconButton from '@/core/inputs/icon-button'
 
 export const Header = styled.div`
@@ -10,10 +9,6 @@ export const CardWrapper = styled.div`
     width: 100%;
 `
 
-export const Title = styled(Typography)`
-    flex: 1;
-`
-
 export const CardButton = styled(IconButton)`
     && {
         width: 36px;