diff --git a/.storybook/main.ts b/.storybook/main.ts index 135cb972..29da6303 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -10,7 +10,7 @@ const config: StorybookConfig = { features: { storyStoreV7: false }, - addons: ['@storybook/addon-essentials', '@storybook/addon-styling-webpack'], + addons: ['@storybook/addon-essentials'], docs: { autodocs: true }, diff --git a/package.json b/package.json index a18e7514..54737993 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flipper-ui", - "version": "0.34.6", + "version": "0.34.7", "description": "React UI based on the @mui/material toolkit for the web", "main": "dist/index.js", "author": "NG", @@ -10,9 +10,6 @@ "type": "git", "url": "https://github.com/nginformatica/flipper-ui.git" }, - "resolutions": { - "wrap-ansi": "7.0.0" - }, "scripts": { "start": "storybook dev -p 6006", "build": "yarn clean && yarn build:ts && yarn build:babel", @@ -35,50 +32,50 @@ "dependencies": { "@emotion/react": "11.13.3", "@emotion/styled": "11.13.0", - "@mui/icons-material": "6.0.2", - "@mui/material": "6.0.2", - "@mui/styles": "6.0.2", - "@mui/x-date-pickers": "7.15.0", + "@mui/icons-material": "6.1.2", + "@mui/material": "6.1.2", + "@mui/styles": "6.1.2", + "@mui/system": "6.1.2", + "@mui/x-date-pickers": "7.18.0", "date-fns": "2.30.0", "ramda": "0.30.1", - "react-loading-skeleton": "3.4.0", - "react-number-format": "5.4.1", + "react-loading-skeleton": "3.5.0", + "react-number-format": "5.4.2", "sprintf-js": "1.1.3", "uuid": "10.0.0" }, "devDependencies": { - "@babel/cli": "7.25.6", - "@babel/core": "7.25.2", - "@babel/plugin-transform-runtime": "7.25.4", - "@babel/preset-env": "7.25.4", - "@babel/preset-typescript": "7.24.7", - "@faker-js/faker": "8.4.1", + "@babel/cli": "7.25.7", + "@babel/core": "7.25.7", + "@babel/plugin-transform-runtime": "7.25.7", + "@babel/preset-env": "7.25.7", + "@babel/preset-typescript": "7.25.7", + "@faker-js/faker": "9.0.3", "@storybook/addon-essentials": "7.6.17", - "@storybook/addon-styling-webpack": "1.0.0", "@storybook/react": "7.6.17", "@storybook/react-webpack5": "7.6.17", - "@stylistic/eslint-plugin": "2.7.2", + "@stylistic/eslint-plugin": "2.8.0", "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.5.0", "@testing-library/react": "16.0.1", "@testing-library/user-event": "14.5.2", - "@types/jest": "29.5.12", - "@types/node": "22.5.3", + "@types/jest": "29.5.13", + "@types/node": "22.7.4", "@types/ramda": "0.30.2", - "@types/react": "18.3.5", + "@types/react": "18.3.11", "@types/sprintf-js": "1.1.4", "@types/uuid": "10.0.0", - "@typescript-eslint/eslint-plugin": "8.4.0", - "@typescript-eslint/parser": "8.4.0", - "babel-loader": "9.1.3", + "@typescript-eslint/eslint-plugin": "8.8.0", + "@typescript-eslint/parser": "8.8.0", + "babel-loader": "9.2.1", "babel-plugin-import": "1.13.8", "babel-plugin-module-resolver": "5.0.2", "eslint": "8.57.0", "eslint-config-prettier": "9.1.0", "eslint-import-resolver-typescript": "3.6.3", - "eslint-plugin-import": "2.30.0", + "eslint-plugin-import": "2.31.0", "eslint-plugin-prettier": "5.2.1", - "eslint-plugin-react": "7.35.2", + "eslint-plugin-react": "7.37.1", "eslint-plugin-react-hooks": "4.6.2", "fs-extra": "11.2.0", "identity-obj-proxy": "3.0.0", @@ -91,8 +88,8 @@ "styled-components": "6.1.13", "ts-jest": "29.2.5", "ts-loader": "9.5.1", - "typescript": "5.5.4", - "webpack": "5.94.0" + "typescript": "5.6.2", + "webpack": "5.95.0" }, "peerDependencies": { "react": "^17.0.0 || ^18.0.0", diff --git a/src/core/data-display/advertise/styles.ts b/src/core/data-display/advertise/styles.ts index 70a5f171..68491b4e 100644 --- a/src/core/data-display/advertise/styles.ts +++ b/src/core/data-display/advertise/styles.ts @@ -3,11 +3,11 @@ import Typography from '@/core/data-display/typography' import Paper from '@/core/surfaces/paper' import { theme } from '@/theme' -const { grays } = theme.colors +const { gray } = theme.colors export const AdvertiseTypography = styled(Typography)` && { - border-left: 1px solid ${grays.g5}; + border-left: 1px solid ${gray[400]}; } ` diff --git a/src/core/data-display/chapter/styles.ts b/src/core/data-display/chapter/styles.ts index 76015698..c9321e9b 100644 --- a/src/core/data-display/chapter/styles.ts +++ b/src/core/data-display/chapter/styles.ts @@ -2,7 +2,7 @@ import { default as styled } from 'styled-components' import type { LineProps } from '.' import { theme } from '@/theme' -const { grays } = theme.colors +const { gray } = theme.colors export const Line = styled.div` height: 1px; @@ -10,7 +10,7 @@ export const Line = styled.div` min-height: 0.75px; max-height: 3px; align-self: center; - background-color: ${props => (props.primary ? grays.g4 : grays.g6)}; + background-color: ${props => (props.primary ? gray[500] : gray[300])}; ` export const Container = styled.div` diff --git a/src/core/data-display/line/index.tsx b/src/core/data-display/line/index.tsx index fc0cc1e2..1c7f9755 100644 --- a/src/core/data-display/line/index.tsx +++ b/src/core/data-display/line/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import type { DefaultProps } from '../../types' import { theme } from '@/theme' -const { grays, secondary } = theme.colors +const { gray, secondary } = theme.colors export interface LineProps extends DefaultProps { primary?: boolean @@ -21,7 +21,7 @@ const Line = ({ flex: 1, padding, margin, - border: `1px solid ${primary ? secondary.light : grays.g6}`, + border: `1px solid ${primary ? secondary.light : gray[300]}`, ...style }} {...otherProps} diff --git a/src/core/data-display/line/line.spec.tsx b/src/core/data-display/line/line.spec.tsx index 99ab763a..6a14a761 100644 --- a/src/core/data-display/line/line.spec.tsx +++ b/src/core/data-display/line/line.spec.tsx @@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react' import Line from '.' import { theme } from '@/theme' -const { grays, secondary } = theme.colors +const { gray, secondary } = theme.colors describe('Line', () => { it('should render closed', () => { @@ -32,7 +32,7 @@ describe('Line', () => { expect(element).toHaveProperty('style.padding', '5px') expect(element).toHaveProperty( 'style.border', - `1px solid ${grays.g6.toLowerCase()}` + `1px solid ${gray[300].toLowerCase()}` ) }) diff --git a/src/core/data-display/list/index.tsx b/src/core/data-display/list/index.tsx index ea19b64c..78e488f7 100644 --- a/src/core/data-display/list/index.tsx +++ b/src/core/data-display/list/index.tsx @@ -5,7 +5,7 @@ import { createStyles, makeStyles } from '@mui/styles' import type { DefaultProps } from '../../types' import { theme } from '@/theme' -const { app } = theme.colors +const { neutral } = theme.colors export interface ListProps extends DefaultProps { title?: string @@ -16,7 +16,7 @@ export interface ListProps extends DefaultProps { const useStyles = makeStyles(() => createStyles({ default: { - backgroundColor: app.background.main + backgroundColor: neutral[100] }, inherit: { backgroundColor: 'inherit', diff --git a/src/core/data-display/table/index.tsx b/src/core/data-display/table/index.tsx index 242da630..edd40ab0 100644 --- a/src/core/data-display/table/index.tsx +++ b/src/core/data-display/table/index.tsx @@ -4,7 +4,7 @@ import type { DefaultProps } from '../../types' import type { TableProps } from '@mui/material/Table' import { theme } from '@/theme' -const { grays } = theme.colors +const { gray } = theme.colors export interface ITableProps extends DefaultProps, Omit { spacing?: 'normal' | 'checkbox' | 'none' @@ -22,7 +22,7 @@ const Table = ({ {...otherProps} padding={spacing} style={{ - border: `1px solid ${grays.g6}`, + border: `1px solid ${gray[300]}`, padding, margin, ...style diff --git a/src/core/data-display/table/table-footer.tsx b/src/core/data-display/table/table-footer.tsx index 8d16ffc1..713dd452 100644 --- a/src/core/data-display/table/table-footer.tsx +++ b/src/core/data-display/table/table-footer.tsx @@ -4,7 +4,7 @@ import type { DefaultProps } from '../../types' import type { TableFooterProps } from '@mui/material/TableFooter' import { theme } from '@/theme' -const { grays } = theme.colors +const { gray } = theme.colors export interface ITableFooterProps extends DefaultProps, TableFooterProps {} @@ -16,7 +16,7 @@ const TableFooter = ({ }: ITableFooterProps) => ( ( ) diff --git a/src/core/feedback/snackbar/index.tsx b/src/core/feedback/snackbar/index.tsx index e1572418..2f58571a 100644 --- a/src/core/feedback/snackbar/index.tsx +++ b/src/core/feedback/snackbar/index.tsx @@ -7,12 +7,14 @@ import { Info as IconInfo, Warning as IconWarning } from '@mui/icons-material' -import { amber, blue, green, red } from '@mui/material/colors' import MuiSnackbar from '@mui/material/Snackbar' import MuiSnackbarContent from '@mui/material/SnackbarContent' import type { DefaultProps } from '../../types' import type { TransitionProps } from '@mui/material/transitions' import IconButton from '@/core/inputs/icon-button' +import { theme } from '@/theme' + +const { blue, green, orange, red } = theme.colors export interface SnackBarProps extends DefaultProps { autoHide?: number @@ -39,19 +41,19 @@ export interface SnackBarProps extends DefaultProps { const variants = { error: { - color: red[700], + color: red[500], icon: IconError }, info: { - color: blue[500], + color: blue[600], icon: IconInfo }, success: { - color: green[700], + color: green[400], icon: IconCheck }, warning: { - color: amber[700], + color: orange[600], icon: IconWarning } } diff --git a/src/core/inputs/date-time/index.tsx b/src/core/inputs/date-time/index.tsx index 2b015d25..28bae5d3 100644 --- a/src/core/inputs/date-time/index.tsx +++ b/src/core/inputs/date-time/index.tsx @@ -33,7 +33,7 @@ import type { import { CustomWrapper } from './styles' import { theme } from '@/theme' -const { primary } = theme.colors +const { neutral, primary } = theme.colors export interface IProps { type?: 'date' | 'time' | 'datetime' @@ -62,10 +62,10 @@ const CustomDatePickerToolbar = (props: DatePickerToolbarProps) => { borderRadius: '4px 4px 0 0', padding: '16px', '.MuiTypography-root': { - color: `${primary.contrast}90` + color: `${neutral[50]}90` }, '.MuiDatePickerToolbar-title': { - color: primary.contrast + color: neutral[50] } }} /> @@ -81,13 +81,13 @@ const CustomTimePickerToolbar = (props: TimePickerToolbarProps) => { borderRadius: '4px 4px 0 0', padding: '16px', '.MuiTypography-root': { - color: `${primary.contrast}90` + color: `${neutral[50]}90` }, '.MuiPickersToolbarText-root': { - color: primary.contrast + color: neutral[50] }, '.MuiPickersToolbarText-root.Mui-selected': { - color: `${primary.contrast}90` + color: `${neutral[50]}90` } }} /> @@ -108,11 +108,11 @@ const CustomDateTimePickerToolbar = ( display: 'none' }, '.MuiPickersToolbarText-root': { - color: primary.contrast, + color: neutral[50], display: 'block' }, '.MuiPickersToolbarText-root.Mui-selected': { - color: `${primary.contrast}90`, + color: `${neutral[50]}90`, display: 'block' } }} diff --git a/src/core/inputs/slider/index.tsx b/src/core/inputs/slider/index.tsx index 11a337d1..a32b9c0e 100644 --- a/src/core/inputs/slider/index.tsx +++ b/src/core/inputs/slider/index.tsx @@ -5,6 +5,8 @@ import type { DefaultProps } from '../../types' import type { SliderProps } from '@mui/material/Slider' import { theme } from '@/theme' +const { feedback, primary, secondary } = theme.colors + export interface ISliderProps extends Omit, DefaultProps { @@ -17,12 +19,12 @@ type TProps = { } const labels = { - primary: theme.colors.primary.main, - secondary: theme.colors.secondary.main, - error: theme.colors.feedback.danger, - info: theme.colors.feedback.info, - success: theme.colors.feedback.success, - warning: theme.colors.feedback.warning + primary: primary.main, + secondary: secondary.main, + error: feedback.danger, + info: feedback.info, + success: feedback.success, + warning: feedback.warning } const useStyles = makeStyles(() => ({ diff --git a/src/core/inputs/text-field/styles.ts b/src/core/inputs/text-field/styles.ts index a97ddc17..88b17206 100644 --- a/src/core/inputs/text-field/styles.ts +++ b/src/core/inputs/text-field/styles.ts @@ -1,7 +1,7 @@ import { default as styled } from 'styled-components' import { theme } from '@/theme' -const { grays } = theme.colors +const { gray } = theme.colors export const Wrapper = styled.div`` @@ -31,7 +31,7 @@ export const StaticTextFieldWrapper = styled.div` ` export const CharactersCount = styled.span` - color: ${grays.g3}; + color: ${gray[600]}; font-size: 14px; font-family: Roboto, diff --git a/src/core/navigation/sidebar/index.tsx b/src/core/navigation/sidebar/index.tsx index ac6c9db0..9476f9a1 100644 --- a/src/core/navigation/sidebar/index.tsx +++ b/src/core/navigation/sidebar/index.tsx @@ -10,7 +10,7 @@ import type { IButtonProps } from '@/core/inputs/button' import { Action, AnchorButton } from './styles' import { theme } from '@/theme' -const { app } = theme.colors +const { neutral } = theme.colors export interface SidebarProps extends DefaultProps { open: boolean @@ -32,7 +32,7 @@ export interface SidebarProps extends DefaultProps { const useStyles = makeStyles(() => createStyles({ default: { - backgroundColor: app.background.main + backgroundColor: neutral[100] }, inherit: { backgroundColor: 'inherit', diff --git a/src/core/navigation/sidebar/styles.ts b/src/core/navigation/sidebar/styles.ts index 0287eebc..41cb4f11 100644 --- a/src/core/navigation/sidebar/styles.ts +++ b/src/core/navigation/sidebar/styles.ts @@ -2,7 +2,7 @@ import { default as styled } from 'styled-components' import Button from '@/core/inputs/button' import { theme } from '@/theme' -const { grays } = theme.colors +const { gray } = theme.colors interface IAction { anchor?: 'top' | 'left' | 'bottom' | 'right' @@ -31,7 +31,7 @@ export const AnchorButton = styled(Button)<{ minwidth: string | number }>` } &:hover { - background-color: ${grays.g6} !important; + background-color: ${gray[300]} !important; } ` diff --git a/src/core/surfaces/step-card/step-card-details.tsx b/src/core/surfaces/step-card/step-card-details.tsx index f65b5c57..f367b2ba 100644 --- a/src/core/surfaces/step-card/step-card-details.tsx +++ b/src/core/surfaces/step-card/step-card-details.tsx @@ -11,7 +11,7 @@ import IconButton from '@/core/inputs/icon-button' import { ListItemContainer, StepCardColumn } from './styles' import { theme } from '@/theme' -const { feedback, grays } = theme.colors +const { feedback, gray } = theme.colors interface IStepCardDetailsProps { steps: IStepCardProps['steps'] @@ -45,13 +45,13 @@ const StepsList = ({ {step.title} diff --git a/src/core/surfaces/step-card/step-card-panel.tsx b/src/core/surfaces/step-card/step-card-panel.tsx index aad3e5b1..5d6e73f8 100644 --- a/src/core/surfaces/step-card/step-card-panel.tsx +++ b/src/core/surfaces/step-card/step-card-panel.tsx @@ -19,7 +19,7 @@ import { } from './styles' import { theme } from '@/theme' -const { feedback, grays } = theme.colors +const { feedback, gray } = theme.colors interface IStepCardPanelProps { title: string @@ -72,7 +72,7 @@ export const StepCardPanel = (props: IStepCardPanelProps) => { color: percentage === 100 ? feedback.success - : grays.g3 + : gray[600] }} /> )} @@ -80,7 +80,7 @@ export const StepCardPanel = (props: IStepCardPanelProps) => { { @@ -127,7 +127,7 @@ export const StepCardPanel = (props: IStepCardPanelProps) => { width: '100%', height: '16px', borderRadius: 10, - backgroundColor: grays.g5 + backgroundColor: gray[400] }} {...summaryLinearProgressBarProps} /> @@ -144,7 +144,7 @@ export const StepCardPanel = (props: IStepCardPanelProps) => { style={{ height: '16px', width: '100%', - backgroundColor: grays.g5 + backgroundColor: gray[400] }} {...linearProgressBarProps} /> diff --git a/src/core/surfaces/step-card/step-card.spec.tsx b/src/core/surfaces/step-card/step-card.spec.tsx index 9c099453..a100fbe8 100644 --- a/src/core/surfaces/step-card/step-card.spec.tsx +++ b/src/core/surfaces/step-card/step-card.spec.tsx @@ -174,7 +174,7 @@ describe('StepCard', () => { const statusIcon = screen.getByTestId('step-card-title-icon') - expect(statusIcon.style.color).toBe('rgb(14, 144, 67)') + expect(statusIcon.style.color).toBe('rgb(40, 153, 57)') }) it('should expand without image', async () => { diff --git a/src/stories/Theme.stories.mdx b/src/stories/Theme.stories.mdx deleted file mode 100644 index 0aeee0f4..00000000 --- a/src/stories/Theme.stories.mdx +++ /dev/null @@ -1,181 +0,0 @@ -import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'; - - - -## Usage - -Here is a quick example to set the ThemeProvider: - -```tsx -import React from 'react' -import { Button } from 'flipper-ui' -import { ThemeProviderFlipper } from 'flipper-ui' -import { ThemeProvider } from 'styled-components' -import { muiThemeOptions, theme } from '@/theme' - -const App = () => ( - - -