From 0dd8429e0a688b894f76f1d35aafa2a731fe9fd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micka=C3=ABl=20Le=20Ralec?= Date: Tue, 27 Aug 2024 14:50:38 +0200 Subject: [PATCH] fix: upgrade on website folder --- packages/Avatar/src/index.tsx | 4 ++-- packages/Avatar/src/utils.ts | 6 ++--- packages/Breadcrumb/src/index.tsx | 4 ++-- packages/Breadcrumb/src/styles.ts | 9 ++++---- packages/Icon/src/styles.ts | 14 +++++------ packages/Loader/src/styles.ts | 4 ++-- .../examples/allow-unselect-from-list.tsx | 2 +- packages/Select/docs/examples/icon.tsx | 2 +- packages/Toast/src/Growl.tsx | 2 +- packages/Toast/src/Snackbar.tsx | 4 ++-- packages/Toast/src/styles.ts | 23 ++++++++----------- tsconfig.json | 2 ++ types/styled.d.ts | 6 ----- website/build-app/components/Theme/index.tsx | 2 +- website/build-app/registry.tsx | 4 ++-- website/types/styled.d.ts | 7 ++++++ 16 files changed, 48 insertions(+), 47 deletions(-) create mode 100644 website/types/styled.d.ts diff --git a/packages/Avatar/src/index.tsx b/packages/Avatar/src/index.tsx index bb6885dae8..1e24672ccd 100644 --- a/packages/Avatar/src/index.tsx +++ b/packages/Avatar/src/index.tsx @@ -1,13 +1,13 @@ import React, { memo } from 'react' import { Box } from '@welcome-ui/box' import { ShapeOptions } from '@welcome-ui/shape' -import { Theme, useTheme } from '@xstyled/styled-components' +import { useTheme } from '@xstyled/styled-components' import { CreateWuiProps, forwardRef } from '@welcome-ui/system' import { getInitials as defaultGetInitials, getSeededColor } from './utils' import * as S from './styles' -type SubColor = Theme['colors'] +type SubColor = ReturnType['colors'] type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' export interface AvatarOptions { diff --git a/packages/Avatar/src/utils.ts b/packages/Avatar/src/utils.ts index b7ac399ee9..4973bb57d7 100644 --- a/packages/Avatar/src/utils.ts +++ b/packages/Avatar/src/utils.ts @@ -1,9 +1,9 @@ -import { Theme } from '@xstyled/styled-components' +import { type DefaultTheme } from 'styled-components' -export function getSeededColor(colors: Theme['colors'], seed = ''): string { +export function getSeededColor(colors: DefaultTheme['colors'], seed = ''): string { const colorKeys = Object.keys(colors).filter(color => color.startsWith('sub-')) const subColorNumber = (seed.length % colorKeys.length) + 1 - const colorsIndex = `sub-${subColorNumber}` as keyof Theme['colors'] + const colorsIndex = `sub-${subColorNumber}` as keyof DefaultTheme['colors'] return colors[colorsIndex] } diff --git a/packages/Breadcrumb/src/index.tsx b/packages/Breadcrumb/src/index.tsx index 1537dc067a..8d0e38837c 100644 --- a/packages/Breadcrumb/src/index.tsx +++ b/packages/Breadcrumb/src/index.tsx @@ -7,16 +7,16 @@ import React, { useRef, useState, } from 'react' +import { type DefaultTheme } from 'styled-components' import { clamp, throttle } from '@welcome-ui/utils' import { ResizeObserver } from '@juggle/resize-observer' import { RightIcon } from '@welcome-ui/icons' import { CreateWuiProps, forwardRef } from '@welcome-ui/system' -import { Theme } from '@xstyled/styled-components' import { Item } from './Item' import * as S from './styles' -export type Colors = Theme['colors'] +export type Colors = DefaultTheme['colors'] export interface BreadcrumbOptions { children: React.ReactNode | React.ReactNode[] diff --git a/packages/Breadcrumb/src/styles.ts b/packages/Breadcrumb/src/styles.ts index d580eadd83..1102022461 100644 --- a/packages/Breadcrumb/src/styles.ts +++ b/packages/Breadcrumb/src/styles.ts @@ -1,4 +1,5 @@ -import styled, { css, th, Theme } from '@xstyled/styled-components' +import styled, { css, th } from '@xstyled/styled-components' +import { type DefaultTheme } from 'styled-components' import { Box } from '@welcome-ui/box' import { hexToRGBA } from '@welcome-ui/utils' @@ -11,7 +12,7 @@ interface GradientProps { export const StartGradient = styled.span( ({ gradientBackground, theme }) => css` left: 0; - background-image: ${gradient(theme as Theme, gradientBackground)}; + background-image: ${gradient(theme, gradientBackground)}; transform-origin: left; ` ) @@ -19,7 +20,7 @@ export const StartGradient = styled.span( export const EndGradient = styled.span( ({ gradientBackground, theme }) => css` right: 0; - background-image: ${gradient(theme as Theme, gradientBackground, 'left')}; + background-image: ${gradient(theme, gradientBackground, 'left')}; transform-origin: right; ` ) @@ -51,7 +52,7 @@ export const List = styled.ol` white-space: nowrap; ` -const gradient = (theme: Theme, gradientBackground: Colors, position = 'right') => { +const gradient = (theme: DefaultTheme, gradientBackground: Colors, position = 'right') => { const gradientColor = th(`colors.${gradientBackground}`)({ theme }) as string const transparent = hexToRGBA(gradientColor, 0) return `linear-gradient(to ${position}, ${gradientColor}, ${transparent} 100%)` diff --git a/packages/Icon/src/styles.ts b/packages/Icon/src/styles.ts index 71be37bc16..a497a8fc1b 100644 --- a/packages/Icon/src/styles.ts +++ b/packages/Icon/src/styles.ts @@ -1,5 +1,4 @@ -import styled, { css, Theme } from '@xstyled/styled-components' -import { WuiProps } from '@welcome-ui/system' +import styled, { css } from '@xstyled/styled-components' import { IconOptions } from './index' @@ -18,13 +17,14 @@ const iconSvgFilledStyles = css` } ` -type StyledIconProps = Pick & - Pick & - WuiProps & - Partial<{ alt: string; title: string }> +type StyledIconProps = Partial< + Pick & + Pick & + Partial<{ alt: string; title: string }> +> export const Icon = styled.svgBox(({ isFlag, size = 'md', stroked, theme }) => { - const formattedSize = theme.icons[size as keyof Theme['icons']] || size + const formattedSize = theme.icons[size as keyof typeof theme.icons] || size return css` ${!isFlag && (stroked ? iconSvgStrokedStyles : iconSvgFilledStyles)}; width: ${formattedSize}; diff --git a/packages/Loader/src/styles.ts b/packages/Loader/src/styles.ts index f1a5bc793b..17606099b5 100644 --- a/packages/Loader/src/styles.ts +++ b/packages/Loader/src/styles.ts @@ -1,4 +1,4 @@ -import styled, { css, keyframes, Theme } from '@xstyled/styled-components' +import styled, { css, keyframes } from '@xstyled/styled-components' import { Shape } from '@welcome-ui/shape' import { Size } from '.' @@ -23,7 +23,7 @@ export interface LoadingDotOptions { } export const LoadingDot = styled.box.attrs({ as: Shape })(({ size, theme }) => { - const sizeValue = theme.loaders?.[size as keyof Theme['loaders']] || size + const sizeValue = theme.loaders?.[size as keyof typeof theme.loaders] || size const formattedSize = typeof sizeValue === 'number' ? theme.toRem(sizeValue) : sizeValue return css` width: ${formattedSize}; diff --git a/packages/Select/docs/examples/allow-unselect-from-list.tsx b/packages/Select/docs/examples/allow-unselect-from-list.tsx index 444077fa2b..1519121734 100644 --- a/packages/Select/docs/examples/allow-unselect-from-list.tsx +++ b/packages/Select/docs/examples/allow-unselect-from-list.tsx @@ -22,7 +22,7 @@ const Example = () => { } + icon={} name="welcome" onChange={handleChange} options={ITEMS} diff --git a/packages/Toast/src/Growl.tsx b/packages/Toast/src/Growl.tsx index 5527e2a752..6e4dcc45cf 100644 --- a/packages/Toast/src/Growl.tsx +++ b/packages/Toast/src/Growl.tsx @@ -11,7 +11,7 @@ export interface GrowlOptions { variant?: Variant onClose?: () => void hasCloseButton?: boolean - icon?: JSX.Element + icon?: string | JSX.Element } export type GrowlProps = CreateWuiProps<'div', GrowlOptions> diff --git a/packages/Toast/src/Snackbar.tsx b/packages/Toast/src/Snackbar.tsx index b203c932fb..852c9fa76b 100644 --- a/packages/Toast/src/Snackbar.tsx +++ b/packages/Toast/src/Snackbar.tsx @@ -9,9 +9,9 @@ import { Variant } from './index' export interface SnackbarOptions { variant?: Variant - onClose: () => void + onClose?: () => void hasCloseButton?: boolean - icon?: JSX.Element + icon?: string | JSX.Element } export type SnackbarProps = CreateWuiProps<'div', SnackbarOptions> diff --git a/packages/Toast/src/styles.ts b/packages/Toast/src/styles.ts index 5762b9c045..c4d1901be7 100644 --- a/packages/Toast/src/styles.ts +++ b/packages/Toast/src/styles.ts @@ -1,11 +1,10 @@ import styled, { css, th } from '@xstyled/styled-components' -import { Box } from '@welcome-ui/box' import { Alert } from '@welcome-ui/alert' import { GrowlOptions } from './Growl' import { SnackbarOptions } from './Snackbar' -export const ToastWrapper = styled(Box)<{ isBottom: boolean }>( +export const ToastWrapper = styled.box<{ isBottom: boolean }>( ({ isBottom }) => css` ${th('toasts.default')} ${isBottom ? th('toasts.bottom') : th('toasts.top')} @@ -33,18 +32,16 @@ export const Growl = styled(Alert)( ` ) -export const Title = styled(Box)( - () => css` - display: flex; - align-items: center; - padding-bottom: xs; - ${th('toasts.growls.title')}; +export const Title = styled.box` + display: flex; + align-items: center; + padding-bottom: xs; + ${th('toasts.growls.title')}; - & > *:first-child { - flex-shrink: 0; - } - ` -) + & > *:first-child { + flex-shrink: 0; + } +` export const Snackbar = styled(Alert)( ({ hasCloseButton }) => css` diff --git a/tsconfig.json b/tsconfig.json index 4230a906a4..e1d2ed02d3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,6 +10,8 @@ "include": [ "packages/**/src/*.ts", "packages/**/src/*.tsx", + "packages/**/docs/examples/*.ts", + "packages/**/docs/examples/*.tsx", "packages/**/tests/*.ts", "packages/**/tests/*.tsx", "types" diff --git a/types/styled.d.ts b/types/styled.d.ts index 441315b317..53a5237928 100644 --- a/types/styled.d.ts +++ b/types/styled.d.ts @@ -1,13 +1,7 @@ /* eslint-disable @typescript-eslint/no-empty-interface */ import 'styled-components' -import '@xstyled/styled-components' - import { WuiTheme } from '@welcome-ui/core' -declare module '@xstyled/styled-components' { - export interface Theme extends WuiTheme {} -} - declare module 'styled-components' { export interface DefaultTheme extends WuiTheme {} } diff --git a/website/build-app/components/Theme/index.tsx b/website/build-app/components/Theme/index.tsx index 718dbebc80..57e384b76c 100644 --- a/website/build-app/components/Theme/index.tsx +++ b/website/build-app/components/Theme/index.tsx @@ -36,7 +36,7 @@ export const Theme = ({ entry }: ColorsProps) => { {typeof value === 'number' && 'px'} {typeof value === 'string' && (value.endsWith('rem') || value === '0') && ( - ({theme.toPx(value.replace('rem', ''))}) + ({theme.toPx(Number(value.replace('rem', '')))}) )} ))} diff --git a/website/build-app/registry.tsx b/website/build-app/registry.tsx index eecb5a1c69..96f2745941 100644 --- a/website/build-app/registry.tsx +++ b/website/build-app/registry.tsx @@ -4,10 +4,10 @@ import * as React from 'react' import { useServerInsertedHTML } from 'next/navigation' -import { ServerStyleSheet, StyleSheetManager, StyleSheetManagerProps } from 'styled-components' +import { type IStyleSheetManager, ServerStyleSheet, StyleSheetManager } from 'styled-components' interface StyledComponentsRegistryProps { - children: StyleSheetManagerProps['children'] + children: IStyleSheetManager['children'] } const StyledComponentsRegistry = ({ children }: StyledComponentsRegistryProps) => { diff --git a/website/types/styled.d.ts b/website/types/styled.d.ts new file mode 100644 index 0000000000..53a5237928 --- /dev/null +++ b/website/types/styled.d.ts @@ -0,0 +1,7 @@ +/* eslint-disable @typescript-eslint/no-empty-interface */ +import 'styled-components' +import { WuiTheme } from '@welcome-ui/core' + +declare module 'styled-components' { + export interface DefaultTheme extends WuiTheme {} +}