From d52e83c4457b0314f811c007d00254bfab369fc1 Mon Sep 17 00:00:00 2001 From: Karine Brandelli Padilha Date: Fri, 5 Jan 2024 15:30:52 -0300 Subject: [PATCH 1/5] chore: remove nginformatica-styleguide dependency --- package.json | 3 +-- yarn.lock | 5 ----- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/package.json b/package.json index 85c88e7b..81ed73ac 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flipper-ui", - "version": "0.30.8", + "version": "0.30.9", "description": "", "main": "dist/index.js", "homepage": "https://flipper-ui.ngi.com.br/", @@ -47,7 +47,6 @@ "faker": "5.5.3", "material-table": "1.69.3", "material-ui-chip-input": "2.0.0-beta.2", - "nginformatica-styleguide": "1.0.2", "ramda": "0.25.0", "react-loading-skeleton": "3.3.1", "react-number-format": "4.4.1", diff --git a/yarn.lock b/yarn.lock index 3874811b..e11aac8f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8373,11 +8373,6 @@ neo-async@^2.5.0, neo-async@^2.6.2: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== -nginformatica-styleguide@1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/nginformatica-styleguide/-/nginformatica-styleguide-1.0.2.tgz#84aa46f1bdc95f87ea08942aa3de2918b02bc225" - integrity sha512-ZTEkmkuDeE0GiA0Gfx5frwzYsbwoqFyC6N04MSkkSg0E7qEVH86IA8Jo6Uke8heBiBNqgQTLN2fgqKwtXdWMoQ== - no-case@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d" From bfa3321a14544d0756a4a5b6c30db18b08a69cb9 Mon Sep 17 00:00:00 2001 From: Karine Brandelli Padilha Date: Fri, 5 Jan 2024 15:31:03 -0300 Subject: [PATCH 2/5] chore: add alias to theme --- .babelrc.js | 3 ++- tsconfig.json | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.babelrc.js b/.babelrc.js index 585f0fe0..c447b376 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -119,7 +119,8 @@ module.exports = { 'module-resolver', { alias: { - '@': './src' + '@': './src', + '@theme': './src/theme' } } ], diff --git a/tsconfig.json b/tsconfig.json index d1e4c19c..ea91cec6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -30,6 +30,7 @@ "@/*": [ "./src/*" ], + "@theme": ["./src/theme"] }, }, "include": [ From db6861ba7fc73322f13e254e619a7643848c4c47 Mon Sep 17 00:00:00 2001 From: Karine Brandelli Padilha Date: Fri, 5 Jan 2024 15:31:17 -0300 Subject: [PATCH 3/5] chore: replace nginformatica-styleguide import for @theme --- src/core/data-display/chapter/index.tsx | 4 ++-- src/core/surfaces/step-card/step-card-details.tsx | 6 +++--- src/core/surfaces/step-card/step-card-panel.tsx | 4 ++-- src/core/surfaces/step-card/styles.ts | 4 ++-- src/experimental/breadcrumbs/index.tsx | 4 ++-- src/experimental/dialog/dialog.tsx | 15 +++++++-------- src/experimental/sidebar/index.tsx | 6 +++--- src/stories/Theme.stories.mdx | 2 +- 8 files changed, 22 insertions(+), 23 deletions(-) diff --git a/src/core/data-display/chapter/index.tsx b/src/core/data-display/chapter/index.tsx index 99e153e1..e76edcc9 100644 --- a/src/core/data-display/chapter/index.tsx +++ b/src/core/data-display/chapter/index.tsx @@ -1,9 +1,9 @@ -import type { TypographyProps } from '@material-ui/core/Typography' import React, { CSSProperties } from 'react' import styled from 'styled-components' import { DefaultProps } from '../../types' import Typography from '@/core/data-display/typography' -import { theme } from 'nginformatica-styleguide' +import type { TypographyProps } from '@material-ui/core/Typography' +import { theme } from '@theme' const { grays } = theme.colors diff --git a/src/core/surfaces/step-card/step-card-details.tsx b/src/core/surfaces/step-card/step-card-details.tsx index a5c877e5..331d12ec 100644 --- a/src/core/surfaces/step-card/step-card-details.tsx +++ b/src/core/surfaces/step-card/step-card-details.tsx @@ -1,12 +1,12 @@ +import React from 'react' import { List } from '@material-ui/core' import MuiAccordionDetails from '@material-ui/core/AccordionDetails' -import { theme } from 'nginformatica-styleguide' -import React from 'react' -import { IStepCardProps } from '.' import { CheckCircle as CheckCircleIcon, Help as HelpIcon } from '@/icons' import IconButton from '@/core/inputs/icon-button' import Typography from '@/core/data-display/typography' +import { IStepCardProps } from '.' import { ListItemContainer, StepCardColumn } from './styles' +import { theme } from '@theme' const { feedback, grays } = theme.colors const DONE_COLOR = feedback.success diff --git a/src/core/surfaces/step-card/step-card-panel.tsx b/src/core/surfaces/step-card/step-card-panel.tsx index 6027deae..18e26021 100644 --- a/src/core/surfaces/step-card/step-card-panel.tsx +++ b/src/core/surfaces/step-card/step-card-panel.tsx @@ -1,7 +1,6 @@ +import React from 'react' import { LinearProgress } from '@material-ui/core' import MuiAccordionSummary from '@material-ui/core/AccordionSummary' -import { theme } from 'nginformatica-styleguide' -import React from 'react' import { sprintf } from 'sprintf-js' import { IStepCardProps } from '.' import { @@ -17,6 +16,7 @@ import { StepContainer, TitleContainer } from './styles' +import { theme } from '@theme' const { feedback, grays } = theme.colors const DONE_COLOR = feedback.success diff --git a/src/core/surfaces/step-card/styles.ts b/src/core/surfaces/step-card/styles.ts index 931d9693..de9b90c8 100644 --- a/src/core/surfaces/step-card/styles.ts +++ b/src/core/surfaces/step-card/styles.ts @@ -1,6 +1,6 @@ -import { Box } from '@material-ui/core' -import { theme } from 'nginformatica-styleguide' import styled from 'styled-components' +import { Box } from '@material-ui/core' +import { theme } from '@theme' interface IStepContainerProps { padding?: React.CSSProperties['padding'] diff --git a/src/experimental/breadcrumbs/index.tsx b/src/experimental/breadcrumbs/index.tsx index 2b5e715e..3ae73518 100644 --- a/src/experimental/breadcrumbs/index.tsx +++ b/src/experimental/breadcrumbs/index.tsx @@ -1,9 +1,9 @@ import React, { ReactNode } from 'react' +import styled from 'styled-components' import { addIndex, map } from 'ramda' import { ChevronRight as IconChevronRight } from '@/icons' -import { theme } from 'nginformatica-styleguide' -import styled from 'styled-components' import { Typography, Breadcrumb } from '@/index' +import { theme } from '@theme' const imap = addIndex(map) diff --git a/src/experimental/dialog/dialog.tsx b/src/experimental/dialog/dialog.tsx index 7f90facd..d0ab51a4 100644 --- a/src/experimental/dialog/dialog.tsx +++ b/src/experimental/dialog/dialog.tsx @@ -1,9 +1,8 @@ -import { Dialog as DialogFlipper, Button, ThemeProviderFlipper } from '@/index' import React, { MouseEvent, ReactNode } from 'react' -import { theme as Theme } from 'nginformatica-styleguide' +import { Dialog as DialogFlipper, Button, ThemeProviderFlipper } from '@/index' +import { theme } from '@theme' -const ACTION_REMOVE = Theme.colors.action.cancel -const PRIMARY_DARK = Theme.colors.primary.main +const { action, primary } = theme.colors export interface IProps { open: boolean @@ -24,13 +23,13 @@ export interface IProps { onClose?(): void } -const theme = { +const themeDialog = { palette: { primary: { - main: PRIMARY_DARK + main: primary.main }, secondary: { - main: ACTION_REMOVE + main: action.cancel }, typography: { useNextVariants: true @@ -62,7 +61,7 @@ export const DialogV2 = (props: IProps) => { const haveSecondaryButton = secondaryButtonText && secondaryButtonAction return ( - + ( From e6c0144b0615c3f39c40136e8b51a6c8003962fb Mon Sep 17 00:00:00 2001 From: Karine Brandelli Padilha Date: Fri, 5 Jan 2024 15:32:11 -0300 Subject: [PATCH 4/5] chore: adjust theme import --- .../feedback/validation-dialog/validaton-dialog.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/feedback/validation-dialog/validaton-dialog.stories.tsx b/src/core/feedback/validation-dialog/validaton-dialog.stories.tsx index 02d2b66a..5237de7f 100644 --- a/src/core/feedback/validation-dialog/validaton-dialog.stories.tsx +++ b/src/core/feedback/validation-dialog/validaton-dialog.stories.tsx @@ -1,12 +1,12 @@ import React, { useCallback, useState } from 'react' import type { Meta, StoryObj } from '@storybook/react' import { ThemeProvider } from 'styled-components' -import { muiThemeOptions, theme } from '../../../theme' import ThemeProviderFlipper from '../../context/theme-provider' import CircularProgress from '@mui/material/CircularProgress' import Button from '@/core/inputs/button' import ValidationDialog, { ValidationStatus } from '.' import { CheckCircleOutline, CancelOutlined } from '../../../icons' +import { muiThemeOptions, theme } from '@theme' const { action, secondary } = theme.colors From 37b8dd4de3d71d54b4ea1a9b530a39fe36df9190 Mon Sep 17 00:00:00 2001 From: Karine Brandelli Padilha Date: Fri, 5 Jan 2024 15:49:01 -0300 Subject: [PATCH 5/5] fix: theme import --- .babelrc.js | 3 +-- src/core/data-display/chapter/index.tsx | 2 +- .../feedback/validation-dialog/validaton-dialog.stories.tsx | 2 +- src/core/surfaces/step-card/step-card-details.tsx | 2 +- src/core/surfaces/step-card/step-card-panel.tsx | 2 +- src/core/surfaces/step-card/styles.ts | 2 +- src/experimental/breadcrumbs/index.tsx | 2 +- src/experimental/dialog/dialog.tsx | 2 +- src/experimental/sidebar/index.tsx | 2 +- src/stories/Theme.stories.mdx | 2 +- tsconfig.json | 3 +-- 11 files changed, 11 insertions(+), 13 deletions(-) diff --git a/.babelrc.js b/.babelrc.js index c447b376..585f0fe0 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -119,8 +119,7 @@ module.exports = { 'module-resolver', { alias: { - '@': './src', - '@theme': './src/theme' + '@': './src' } } ], diff --git a/src/core/data-display/chapter/index.tsx b/src/core/data-display/chapter/index.tsx index e76edcc9..1ea56b78 100644 --- a/src/core/data-display/chapter/index.tsx +++ b/src/core/data-display/chapter/index.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import { DefaultProps } from '../../types' import Typography from '@/core/data-display/typography' import type { TypographyProps } from '@material-ui/core/Typography' -import { theme } from '@theme' +import { theme } from '@/theme' const { grays } = theme.colors diff --git a/src/core/feedback/validation-dialog/validaton-dialog.stories.tsx b/src/core/feedback/validation-dialog/validaton-dialog.stories.tsx index 5237de7f..58861a88 100644 --- a/src/core/feedback/validation-dialog/validaton-dialog.stories.tsx +++ b/src/core/feedback/validation-dialog/validaton-dialog.stories.tsx @@ -6,7 +6,7 @@ import CircularProgress from '@mui/material/CircularProgress' import Button from '@/core/inputs/button' import ValidationDialog, { ValidationStatus } from '.' import { CheckCircleOutline, CancelOutlined } from '../../../icons' -import { muiThemeOptions, theme } from '@theme' +import { muiThemeOptions, theme } from '@/theme' const { action, secondary } = theme.colors diff --git a/src/core/surfaces/step-card/step-card-details.tsx b/src/core/surfaces/step-card/step-card-details.tsx index 331d12ec..89e017dd 100644 --- a/src/core/surfaces/step-card/step-card-details.tsx +++ b/src/core/surfaces/step-card/step-card-details.tsx @@ -6,7 +6,7 @@ import IconButton from '@/core/inputs/icon-button' import Typography from '@/core/data-display/typography' import { IStepCardProps } from '.' import { ListItemContainer, StepCardColumn } from './styles' -import { theme } from '@theme' +import { theme } from '@/theme' const { feedback, grays } = theme.colors const DONE_COLOR = feedback.success diff --git a/src/core/surfaces/step-card/step-card-panel.tsx b/src/core/surfaces/step-card/step-card-panel.tsx index 18e26021..1a38f1d9 100644 --- a/src/core/surfaces/step-card/step-card-panel.tsx +++ b/src/core/surfaces/step-card/step-card-panel.tsx @@ -16,7 +16,7 @@ import { StepContainer, TitleContainer } from './styles' -import { theme } from '@theme' +import { theme } from '@/theme' const { feedback, grays } = theme.colors const DONE_COLOR = feedback.success diff --git a/src/core/surfaces/step-card/styles.ts b/src/core/surfaces/step-card/styles.ts index de9b90c8..a8448e80 100644 --- a/src/core/surfaces/step-card/styles.ts +++ b/src/core/surfaces/step-card/styles.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' import { Box } from '@material-ui/core' -import { theme } from '@theme' +import { theme } from '@/theme' interface IStepContainerProps { padding?: React.CSSProperties['padding'] diff --git a/src/experimental/breadcrumbs/index.tsx b/src/experimental/breadcrumbs/index.tsx index 3ae73518..cfbdfe2f 100644 --- a/src/experimental/breadcrumbs/index.tsx +++ b/src/experimental/breadcrumbs/index.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import { addIndex, map } from 'ramda' import { ChevronRight as IconChevronRight } from '@/icons' import { Typography, Breadcrumb } from '@/index' -import { theme } from '@theme' +import { theme } from '@/theme' const imap = addIndex(map) diff --git a/src/experimental/dialog/dialog.tsx b/src/experimental/dialog/dialog.tsx index d0ab51a4..af98d47c 100644 --- a/src/experimental/dialog/dialog.tsx +++ b/src/experimental/dialog/dialog.tsx @@ -1,6 +1,6 @@ import React, { MouseEvent, ReactNode } from 'react' import { Dialog as DialogFlipper, Button, ThemeProviderFlipper } from '@/index' -import { theme } from '@theme' +import { theme } from '@/theme' const { action, primary } = theme.colors diff --git a/src/experimental/sidebar/index.tsx b/src/experimental/sidebar/index.tsx index dfc9730e..0c7280f2 100644 --- a/src/experimental/sidebar/index.tsx +++ b/src/experimental/sidebar/index.tsx @@ -3,7 +3,7 @@ import { Sidebar as FlipperSidebar, Tooltip, List, ListItem } from '@/index' import { times, map } from 'ramda' import styled from 'styled-components' import { Skeleton } from '@mui/material' -import { theme } from '@theme' +import { theme } from '@/theme' export interface ISidebarOption { icon: React.ReactElement diff --git a/src/stories/Theme.stories.mdx b/src/stories/Theme.stories.mdx index 8516221c..0aeee0f4 100644 --- a/src/stories/Theme.stories.mdx +++ b/src/stories/Theme.stories.mdx @@ -11,7 +11,7 @@ import React from 'react' import { Button } from 'flipper-ui' import { ThemeProviderFlipper } from 'flipper-ui' import { ThemeProvider } from 'styled-components' -import { muiThemeOptions, theme } from '@theme' +import { muiThemeOptions, theme } from '@/theme' const App = () => ( diff --git a/tsconfig.json b/tsconfig.json index ea91cec6..c8e13b7b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -29,8 +29,7 @@ "paths": { "@/*": [ "./src/*" - ], - "@theme": ["./src/theme"] + ] }, }, "include": [