feat: update typography color setting rules (#172)

* feat: update typography color setting rules * fix: small fixes --------- Co-authored-by: scotch <[email protected]>
chirpwireless · Jan 21, 2025 · 7dce950 · 7dce950
1 parent ebdfbb8
commit 7dce950
Show file tree

Hide file tree

Showing 15 changed files with 376 additions and 367 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
         "@emotion/react": "^11.14.0",
         "@emotion/server": "^11.11.0",
         "@emotion/styled": "^11.14.0",
-        "@mapbox/mapbox-gl-draw": "^1.4.3",
+        "@mapbox/mapbox-gl-draw": "^1.5.0",
         "@mapbox/mapbox-gl-geocoder": "^5.0.3",
         "@mui/base": "5.0.0-beta.68",
         "@mui/icons-material": "^5.16.14",
@@ -47,7 +47,7 @@
         "@turf/distance": "^7.1.0",
         "echarts": "^5.5.1",
         "echarts-for-react": "^3.0.2",
-        "mapbox-gl": "^3.6.0",
+        "mapbox-gl": "^3.9.3",
         "mapbox-gl-draw-geodesic": "^2.3.1",
         "moment": "^2.30.1",
         "react": "^19.0.0",
@@ -91,7 +91,7 @@
         "lint-staged": "^15.2.0",
         "prettier": "^3.1.1",
         "sass": "^1.77.8",
-        "storybook": "8.4.7",
+        "storybook": "^8.4.7",
         "stylelint": "^16.0.2",
         "typescript": "^5.7.3",
         "vite": "^5.0.10",

diff --git a/src/lib/autocomplete/index.ts b/src/lib/autocomplete/index.ts
@@ -1,6 +1,6 @@
 import { Autocomplete as MuiAutocomplete, styled } from '@mui/material';
 
-export const Autocomplete = styled(MuiAutocomplete)(({ theme }) => ({
+export const Autocomplete = styled(MuiAutocomplete)(() => ({
     borderRadius: '8px',
     border: 'none',
 

diff --git a/src/lib/cards/card-with-image/index.tsx b/src/lib/cards/card-with-image/index.tsx
@@ -3,6 +3,7 @@ import * as S from './styles';
 import { BaseCard } from '../base-card';
 import { Stack } from '@mui/material';
 import { ImagePreview } from '../../image-preview';
+import { Typography } from '../../typogrpahy';
 
 interface ICardWithImageProps {
     containerSx?: SxProps;
@@ -39,9 +40,9 @@ export const CardWithImage: React.FC<ICardWithImageProps> = ({
                     />
                     <Stack sx={{ overflow: 'hidden', whiteSpace: 'nowrap', width: '100%' }}>
                         <S.TitleTypography variant="title16">{title}</S.TitleTypography>
-                        <S.SubtitleTypography variant="title12" sx={{ color: 'text.text8' }}>
+                        <Typography variant="title12" color="text.text8">
                             {subTitle}
-                        </S.SubtitleTypography>
+                        </Typography>
                     </Stack>
                 </Stack>
             }

diff --git a/src/lib/cards/card-with-image/styles.ts b/src/lib/cards/card-with-image/styles.ts
@@ -9,10 +9,6 @@ export const TitleTypography = styled(Typography)(({ theme }) => ({
     textOverflow: 'ellipsis',
 }));
 
-export const SubtitleTypography = styled(Typography)(({ theme }) => ({
-    color: theme.palette.text.text8,
-}));
-
 export const CustomTooltip = styled(Tooltip)(() => ({
     width: '77px',
     overflow: 'hidden',

diff --git a/src/lib/charts/vertical-bar-chart/vertical-bar-line-chart.tsx b/src/lib/charts/vertical-bar-chart/vertical-bar-line-chart.tsx
@@ -37,11 +37,7 @@ const VerticalBarChart: FC<IVerticalBarsChartProps> = memo(({ data, style, color
                 formatter: `{value} ${unit}`,
             },
             axisLine: {
-                show: true,
-                lineStyle: {
-                    color: theme.palette.border.border3,
-                    type: 'solid',
-                },
+                show: false,
             },
         },
         xAxis: {

diff --git a/src/lib/empty-fallback/index.tsx b/src/lib/empty-fallback/index.tsx
@@ -1,4 +1,4 @@
-import { Stack, useTheme } from '@mui/material';
+import { Stack } from '@mui/material';
 import { FC } from 'react';
 import { Typography } from '../typogrpahy';
 import emptyFallbackCoverIcon from '@chirp/ui/assets/fleet-icons/empty-fallback-cover.svg';
@@ -10,8 +10,6 @@ interface IEmptyFallbackProps {
 }
 
 export const EmptyFallback: FC<IEmptyFallbackProps> = ({ title, subTitle, withBackground = true }) => {
-    const theme = useTheme();
-
     return (
         <Stack
             gap="8px"
@@ -25,12 +23,12 @@ export const EmptyFallback: FC<IEmptyFallbackProps> = ({ title, subTitle, withBa
             }}
         >
             {title && (
-                <Typography variant="text13" sx={{ color: theme.palette.text.text4 }}>
+                <Typography variant="text13" color="text.text4">
                     {title}
                 </Typography>
             )}
             {subTitle && (
-                <Typography variant="caption12" sx={{ color: theme.palette.text.text8 }}>
+                <Typography variant="caption12" color="text.text8">
                     {subTitle}
                 </Typography>
             )}

diff --git a/src/lib/list-item/list-item.stories.tsx b/src/lib/list-item/list-item.stories.tsx
@@ -181,7 +181,7 @@ export const AccordionListItemVisible: Story = {
                                 height: '100%',
                             }}
                         >
-                            <Stack direction={'row'} sx={{ color: 'red' }}>
+                            <Stack direction="row" sx={{ color: 'red' }}>
                                 <IconButton size="small" variant="gray" aria-label="comment">
                                     <PenIcon />
                                 </IconButton>

diff --git a/src/lib/map/base-map.tsx b/src/lib/map/base-map.tsx
@@ -47,6 +47,7 @@ export const BaseMap: FC<PropsWithChildren<IBaseMapProps>> = ({
         // Для обновления цветов в HelpControl
         if (mapRef.current && mapRef.current._controls) {
             const helpControl = mapRef.current._controls.find((control) => control instanceof HelpControl);
+             // @ts-ignore
             helpControl && helpControl.updatePalette(palette);
         }
     }, [palette.mode]);
@@ -119,6 +120,7 @@ export const BaseMap: FC<PropsWithChildren<IBaseMapProps>> = ({
         const mapControls = mapRef.current._controls;
         const geocoderControl = mapControls.find((control) => control instanceof MapboxGeocoder);
         if (geocoderControl) {
+            // @ts-ignore
             geocoderControl.setPlaceholder('Search');
         }
 

diff --git a/src/lib/map/trip-map/index.tsx b/src/lib/map/trip-map/index.tsx
@@ -73,6 +73,7 @@ export const TripMap: React.FC<IFeatureMapProps> = ({
         });
 
         drawRef.current = draw;
+        // https://github.com/mapbox/mapbox-gl-draw/issues/1257
         map.current.addControl(draw);
 
         addDataToMap(localData);

diff --git a/src/lib/radio/style.ts b/src/lib/radio/style.ts
@@ -1,7 +1,7 @@
 import { styled } from '@mui/system';
-import { Radio as MuiRadio, RadioProps } from '@mui/material';
+import { Radio as MuiRadio } from '@mui/material';
 
-export const StyledRadio = styled(MuiRadio)<RadioProps>(({ theme }) => ({
+export const StyledRadio = styled(MuiRadio)(({ theme }) => ({
     color: theme.palette.text.text8,
 
     '&:hover': {
@@ -11,4 +11,4 @@ export const StyledRadio = styled(MuiRadio)<RadioProps>(({ theme }) => ({
     '&.Mui-checked': {
         color: theme.palette.base.color6,
     },
-}));
+})) as typeof MuiRadio;
diff --git a/src/lib/widgets/common/color-list-item/list-item.tsx b/src/lib/widgets/common/color-list-item/list-item.tsx
@@ -30,12 +30,12 @@ export const ColorListItem: FC<IColorListItemProps> = ({ color, name, value, onC
         >
             <Stack direction="row" gap={1} alignItems="center">
                 <S.Marker sx={{ backgroundColor: color }} />
-                <Typography variant="caption12" sx={{ color: 'text.text1' }}>
+                <Typography variant="caption12" color="text.text1">
                     {name}
                 </Typography>
             </Stack>
             {value === null ? null : (
-                <Typography variant="caption12" sx={{ color: 'text.text1' }}>
+                <Typography variant="caption12" color="text.text1">
                     {value}
                 </Typography>
             )}

diff --git a/src/lib/widgets/vertical-bars-widget/index.tsx b/src/lib/widgets/vertical-bars-widget/index.tsx
@@ -41,11 +41,11 @@ export const VerticalBarsChartWidget = <T,>(props: PropsWithChildren<IVerticalBa
             <Box>
                 <Stack direction="row" gap={4} justifyContent="space-between">
                     <Stack gap={1}>
-                        <Typography sx={{ color: 'text.text8' }} variant="overline">
+                        <Typography color="text.text8" variant="overline">
                             {listLabel}
                         </Typography>
                         {listData.map((elem) => (
-                            <Typography sx={{ color: 'text.text1' }} key={elem} variant="caption12">
+                            <Typography color="text.text1" key={elem} variant="caption12">
                                 {elem}
                             </Typography>
                         ))}

diff --git a/src/lib/widgets/vertical-bars-widget/styles.ts b/src/lib/widgets/vertical-bars-widget/styles.ts
@@ -10,7 +10,7 @@ export const ListWrapper = styled('div')(() => ({
     overflow: 'auto',
 }));
 
-export const HeaderWrapper = styled('div')(({ theme }) => ({
+export const HeaderWrapper = styled('div')(() => ({
     position: 'sticky',
     top: 0,
     whiteSpace: 'nowrap',

diff --git a/src/lib/widgets/vertical-bars-widget/vertical-bars-widget.stories.tsx b/src/lib/widgets/vertical-bars-widget/vertical-bars-widget.stories.tsx
@@ -35,7 +35,7 @@ export const Default: Story = {
                     isFavorite={favoriteState}
                     onFavoriteClick={() => setFavoriteState(!favoriteState)}
                     onDeleteClick={() => setDeleteState(!deleteState)}
-                    collection={mockBarsData}
+                    collection={[mockBarsData[0]]}
                     listLabel="Units"
                     valueKey="total"
                     nameKey="name"