From 329a307d8695534759aa936482de68e21f867437 Mon Sep 17 00:00:00 2001 From: isaacmaamouche Date: Thu, 13 Feb 2025 17:32:28 +0100 Subject: [PATCH 01/11] chore: add string union ts utils --- lib/src/utils/index.ts | 1 + lib/src/utils/ts-utils.ts | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 lib/src/utils/ts-utils.ts diff --git a/lib/src/utils/index.ts b/lib/src/utils/index.ts index 75614244b..6d3d3d2ab 100644 --- a/lib/src/utils/index.ts +++ b/lib/src/utils/index.ts @@ -7,3 +7,4 @@ export * from './use-copy-text' export * from './use-fork-ref' export * from './use-isomorphic-layout-effect' export * from './use-viewport' +export * from './ts-utils' diff --git a/lib/src/utils/ts-utils.ts b/lib/src/utils/ts-utils.ts new file mode 100644 index 000000000..e74b1cee1 --- /dev/null +++ b/lib/src/utils/ts-utils.ts @@ -0,0 +1,17 @@ +/** + * Preserve type intellisence and autocomplete on union like + * type test = 'some string' | string + * + * @example + * // The following type: + * type color = 'red' | 'blue' | 'green' | string + * // would be interpreted as + * type color = string + * + * // Using LiteralStringUnion + * type color = LiteralStringUnion<'red' | 'blue' | 'green'> + * // would be interpreted as + * type color = 'red' | 'blue' | 'green' + * // While still allowing any literal string + */ +export type LiteralStringUnion = T | (string & Record) From b0216832a2a62b8222e2896d285fab8615b8c856 Mon Sep 17 00:00:00 2001 From: isaacmaamouche Date: Thu, 13 Feb 2025 17:44:01 +0100 Subject: [PATCH 02/11] chore: move avatar types to theme --- lib/src/components/Avatar/index.tsx | 13 ++++++------- lib/src/components/Avatar/theme.ts | 9 ++++++--- lib/src/components/Avatar/utils.ts | 4 ++-- 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/lib/src/components/Avatar/index.tsx b/lib/src/components/Avatar/index.tsx index 40d770316..89a92e2ec 100644 --- a/lib/src/components/Avatar/index.tsx +++ b/lib/src/components/Avatar/index.tsx @@ -1,18 +1,17 @@ import React, { memo } from 'react' -import { Theme, useTheme } from '@xstyled/styled-components' +import { useTheme } from '@xstyled/styled-components' import { getInitials as defaultGetInitials, getColorByLength } from './utils' import * as S from './styles' +import type { AvatarColors, Size } from './theme' -import { ShapeOptions } from '@/Shape' -import { CreateWuiProps, forwardRef } from '@/System' +import type { ShapeOptions } from '@/Shape' +import type { CreateWuiProps } from '@/System' +import { forwardRef } from '@/System' import { Box } from '@/Box' -type SubColor = Theme['colors'] -type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' - export interface AvatarOptions { - color?: string | SubColor + color?: AvatarColors getInitials?: (name: string) => string name: string size?: Size diff --git a/lib/src/components/Avatar/theme.ts b/lib/src/components/Avatar/theme.ts index 13907297e..ebe83c9c9 100644 --- a/lib/src/components/Avatar/theme.ts +++ b/lib/src/components/Avatar/theme.ts @@ -1,8 +1,11 @@ -import { CSSObject } from '@xstyled/styled-components' +import type { CSSObject } from '@xstyled/styled-components' -import { ThemeValues } from '@/theme' +import type { ThemeValues } from '@/theme' +import type { LiteralStringUnion } from '@/utils' -type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' +export type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' +export type ThemeColorTokens = keyof ThemeValues['colors'] +export type AvatarColors = LiteralStringUnion export type ThemeAvatars = { sizes: Record diff --git a/lib/src/components/Avatar/utils.ts b/lib/src/components/Avatar/utils.ts index fcc006dac..7fc99f1c8 100644 --- a/lib/src/components/Avatar/utils.ts +++ b/lib/src/components/Avatar/utils.ts @@ -1,6 +1,6 @@ -import { Theme } from '@xstyled/styled-components' +import { ThemeColorTokens } from './theme' -export function getColorByLength(colors: Theme['colors'], text = ''): string { +export function getColorByLength(colors: ThemeColorTokens, text = ''): string { const colorKeys = Object.keys(colors).filter(color => color.startsWith('secondary-')) const subColorIndex = text.length % colorKeys.length From 4449bfcf4c5960e3563243e9f38f831143b2f15f Mon Sep 17 00:00:00 2001 From: isaacmaamouche Date: Fri, 14 Feb 2025 09:53:37 +0100 Subject: [PATCH 03/11] chore: use ThemeColorTokens for Breadcrumb type --- .../components/Avatar/docs/properties.json | 353 +++++++++++++++++- lib/src/components/Avatar/theme.ts | 3 +- .../Breadcrumb/docs/properties.json | 350 ++++++++++++++++- lib/src/components/Breadcrumb/index.tsx | 10 +- lib/src/components/Breadcrumb/styles.ts | 10 +- lib/src/theme/index.ts | 2 + 6 files changed, 713 insertions(+), 15 deletions(-) diff --git a/lib/src/components/Avatar/docs/properties.json b/lib/src/components/Avatar/docs/properties.json index 3cca10790..e1d140bea 100644 --- a/lib/src/components/Avatar/docs/properties.json +++ b/lib/src/components/Avatar/docs/properties.json @@ -17,7 +17,358 @@ ], "required": false, "type": { - "name": "any" + "name": "enum", + "raw": "AvatarColors", + "value": [ + { + "value": "string & Record" + }, + { + "value": "\"yellow-10\"" + }, + { + "value": "\"yellow-20\"" + }, + { + "value": "\"yellow-30\"" + }, + { + "value": "\"yellow-40\"" + }, + { + "value": "\"yellow-50\"" + }, + { + "value": "\"yellow-60\"" + }, + { + "value": "\"yellow-70\"" + }, + { + "value": "\"yellow-80\"" + }, + { + "value": "\"yellow-90\"" + }, + { + "value": "\"blue-40\"" + }, + { + "value": "\"green-30\"" + }, + { + "value": "\"red-orange-40\"" + }, + { + "value": "\"pink-40\"" + }, + { + "value": "\"teal-40\"" + }, + { + "value": "\"violet-40\"" + }, + { + "value": "\"primary-10\"" + }, + { + "value": "\"primary-20\"" + }, + { + "value": "\"primary-30\"" + }, + { + "value": "\"primary-40\"" + }, + { + "value": "\"primary-50\"" + }, + { + "value": "\"primary-60\"" + }, + { + "value": "\"primary-70\"" + }, + { + "value": "\"primary-80\"" + }, + { + "value": "\"primary-90\"" + }, + { + "value": "\"secondary-blue\"" + }, + { + "value": "\"secondary-green\"" + }, + { + "value": "\"secondary-orange\"" + }, + { + "value": "\"secondary-pink\"" + }, + { + "value": "\"secondary-teal\"" + }, + { + "value": "\"secondary-violet\"" + }, + { + "value": "\"overlay\"" + }, + { + "value": "\"beige-10\"" + }, + { + "value": "\"beige-20\"" + }, + { + "value": "\"beige-30\"" + }, + { + "value": "\"beige-40\"" + }, + { + "value": "\"beige-50\"" + }, + { + "value": "\"beige-60\"" + }, + { + "value": "\"beige-70\"" + }, + { + "value": "\"beige-80\"" + }, + { + "value": "\"beige-90\"" + }, + { + "value": "\"blue-10\"" + }, + { + "value": "\"blue-20\"" + }, + { + "value": "\"blue-30\"" + }, + { + "value": "\"blue-50\"" + }, + { + "value": "\"blue-60\"" + }, + { + "value": "\"blue-70\"" + }, + { + "value": "\"blue-80\"" + }, + { + "value": "\"blue-90\"" + }, + { + "value": "\"green-10\"" + }, + { + "value": "\"green-20\"" + }, + { + "value": "\"green-40\"" + }, + { + "value": "\"green-50\"" + }, + { + "value": "\"green-60\"" + }, + { + "value": "\"green-70\"" + }, + { + "value": "\"green-80\"" + }, + { + "value": "\"green-90\"" + }, + { + "value": "\"neutral-10\"" + }, + { + "value": "\"neutral-20\"" + }, + { + "value": "\"neutral-30\"" + }, + { + "value": "\"neutral-40\"" + }, + { + "value": "\"neutral-50\"" + }, + { + "value": "\"neutral-60\"" + }, + { + "value": "\"neutral-70\"" + }, + { + "value": "\"neutral-80\"" + }, + { + "value": "\"neutral-90\"" + }, + { + "value": "\"orange-10\"" + }, + { + "value": "\"orange-20\"" + }, + { + "value": "\"orange-30\"" + }, + { + "value": "\"orange-40\"" + }, + { + "value": "\"orange-50\"" + }, + { + "value": "\"orange-60\"" + }, + { + "value": "\"orange-70\"" + }, + { + "value": "\"orange-80\"" + }, + { + "value": "\"orange-90\"" + }, + { + "value": "\"pink-10\"" + }, + { + "value": "\"pink-20\"" + }, + { + "value": "\"pink-30\"" + }, + { + "value": "\"pink-50\"" + }, + { + "value": "\"pink-60\"" + }, + { + "value": "\"pink-70\"" + }, + { + "value": "\"pink-80\"" + }, + { + "value": "\"pink-90\"" + }, + { + "value": "\"red-10\"" + }, + { + "value": "\"red-20\"" + }, + { + "value": "\"red-30\"" + }, + { + "value": "\"red-40\"" + }, + { + "value": "\"red-50\"" + }, + { + "value": "\"red-60\"" + }, + { + "value": "\"red-70\"" + }, + { + "value": "\"red-80\"" + }, + { + "value": "\"red-90\"" + }, + { + "value": "\"red-orange-10\"" + }, + { + "value": "\"red-orange-20\"" + }, + { + "value": "\"red-orange-30\"" + }, + { + "value": "\"red-orange-50\"" + }, + { + "value": "\"red-orange-60\"" + }, + { + "value": "\"red-orange-70\"" + }, + { + "value": "\"red-orange-80\"" + }, + { + "value": "\"red-orange-90\"" + }, + { + "value": "\"teal-10\"" + }, + { + "value": "\"teal-20\"" + }, + { + "value": "\"teal-30\"" + }, + { + "value": "\"teal-50\"" + }, + { + "value": "\"teal-60\"" + }, + { + "value": "\"teal-70\"" + }, + { + "value": "\"teal-80\"" + }, + { + "value": "\"teal-90\"" + }, + { + "value": "\"violet-10\"" + }, + { + "value": "\"violet-20\"" + }, + { + "value": "\"violet-30\"" + }, + { + "value": "\"violet-50\"" + }, + { + "value": "\"violet-60\"" + }, + { + "value": "\"violet-70\"" + }, + { + "value": "\"violet-80\"" + }, + { + "value": "\"violet-90\"" + } + ] } }, "getInitials": { diff --git a/lib/src/components/Avatar/theme.ts b/lib/src/components/Avatar/theme.ts index ebe83c9c9..f1681b0c5 100644 --- a/lib/src/components/Avatar/theme.ts +++ b/lib/src/components/Avatar/theme.ts @@ -1,10 +1,9 @@ import type { CSSObject } from '@xstyled/styled-components' -import type { ThemeValues } from '@/theme' +import type { ThemeColorTokens, ThemeValues } from '@/theme' import type { LiteralStringUnion } from '@/utils' export type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' -export type ThemeColorTokens = keyof ThemeValues['colors'] export type AvatarColors = LiteralStringUnion export type ThemeAvatars = { diff --git a/lib/src/components/Breadcrumb/docs/properties.json b/lib/src/components/Breadcrumb/docs/properties.json index 60697808e..8e70c92f3 100644 --- a/lib/src/components/Breadcrumb/docs/properties.json +++ b/lib/src/components/Breadcrumb/docs/properties.json @@ -19,7 +19,355 @@ ], "required": false, "type": { - "name": "any" + "name": "enum", + "raw": "\"yellow-10\" | \"yellow-20\" | \"yellow-30\" | \"yellow-40\" | \"yellow-50\" | \"yellow-60\" | \"yellow-70\" | \"yellow-80\" | \"yellow-90\" | \"blue-40\" | \"green-30\" | \"red-orange-40\" | \"pink-40\" | ... 101 more ... | \"violet-90\"", + "value": [ + { + "value": "\"yellow-10\"" + }, + { + "value": "\"yellow-20\"" + }, + { + "value": "\"yellow-30\"" + }, + { + "value": "\"yellow-40\"" + }, + { + "value": "\"yellow-50\"" + }, + { + "value": "\"yellow-60\"" + }, + { + "value": "\"yellow-70\"" + }, + { + "value": "\"yellow-80\"" + }, + { + "value": "\"yellow-90\"" + }, + { + "value": "\"blue-40\"" + }, + { + "value": "\"green-30\"" + }, + { + "value": "\"red-orange-40\"" + }, + { + "value": "\"pink-40\"" + }, + { + "value": "\"teal-40\"" + }, + { + "value": "\"violet-40\"" + }, + { + "value": "\"primary-10\"" + }, + { + "value": "\"primary-20\"" + }, + { + "value": "\"primary-30\"" + }, + { + "value": "\"primary-40\"" + }, + { + "value": "\"primary-50\"" + }, + { + "value": "\"primary-60\"" + }, + { + "value": "\"primary-70\"" + }, + { + "value": "\"primary-80\"" + }, + { + "value": "\"primary-90\"" + }, + { + "value": "\"secondary-blue\"" + }, + { + "value": "\"secondary-green\"" + }, + { + "value": "\"secondary-orange\"" + }, + { + "value": "\"secondary-pink\"" + }, + { + "value": "\"secondary-teal\"" + }, + { + "value": "\"secondary-violet\"" + }, + { + "value": "\"overlay\"" + }, + { + "value": "\"beige-10\"" + }, + { + "value": "\"beige-20\"" + }, + { + "value": "\"beige-30\"" + }, + { + "value": "\"beige-40\"" + }, + { + "value": "\"beige-50\"" + }, + { + "value": "\"beige-60\"" + }, + { + "value": "\"beige-70\"" + }, + { + "value": "\"beige-80\"" + }, + { + "value": "\"beige-90\"" + }, + { + "value": "\"blue-10\"" + }, + { + "value": "\"blue-20\"" + }, + { + "value": "\"blue-30\"" + }, + { + "value": "\"blue-50\"" + }, + { + "value": "\"blue-60\"" + }, + { + "value": "\"blue-70\"" + }, + { + "value": "\"blue-80\"" + }, + { + "value": "\"blue-90\"" + }, + { + "value": "\"green-10\"" + }, + { + "value": "\"green-20\"" + }, + { + "value": "\"green-40\"" + }, + { + "value": "\"green-50\"" + }, + { + "value": "\"green-60\"" + }, + { + "value": "\"green-70\"" + }, + { + "value": "\"green-80\"" + }, + { + "value": "\"green-90\"" + }, + { + "value": "\"neutral-10\"" + }, + { + "value": "\"neutral-20\"" + }, + { + "value": "\"neutral-30\"" + }, + { + "value": "\"neutral-40\"" + }, + { + "value": "\"neutral-50\"" + }, + { + "value": "\"neutral-60\"" + }, + { + "value": "\"neutral-70\"" + }, + { + "value": "\"neutral-80\"" + }, + { + "value": "\"neutral-90\"" + }, + { + "value": "\"orange-10\"" + }, + { + "value": "\"orange-20\"" + }, + { + "value": "\"orange-30\"" + }, + { + "value": "\"orange-40\"" + }, + { + "value": "\"orange-50\"" + }, + { + "value": "\"orange-60\"" + }, + { + "value": "\"orange-70\"" + }, + { + "value": "\"orange-80\"" + }, + { + "value": "\"orange-90\"" + }, + { + "value": "\"pink-10\"" + }, + { + "value": "\"pink-20\"" + }, + { + "value": "\"pink-30\"" + }, + { + "value": "\"pink-50\"" + }, + { + "value": "\"pink-60\"" + }, + { + "value": "\"pink-70\"" + }, + { + "value": "\"pink-80\"" + }, + { + "value": "\"pink-90\"" + }, + { + "value": "\"red-10\"" + }, + { + "value": "\"red-20\"" + }, + { + "value": "\"red-30\"" + }, + { + "value": "\"red-40\"" + }, + { + "value": "\"red-50\"" + }, + { + "value": "\"red-60\"" + }, + { + "value": "\"red-70\"" + }, + { + "value": "\"red-80\"" + }, + { + "value": "\"red-90\"" + }, + { + "value": "\"red-orange-10\"" + }, + { + "value": "\"red-orange-20\"" + }, + { + "value": "\"red-orange-30\"" + }, + { + "value": "\"red-orange-50\"" + }, + { + "value": "\"red-orange-60\"" + }, + { + "value": "\"red-orange-70\"" + }, + { + "value": "\"red-orange-80\"" + }, + { + "value": "\"red-orange-90\"" + }, + { + "value": "\"teal-10\"" + }, + { + "value": "\"teal-20\"" + }, + { + "value": "\"teal-30\"" + }, + { + "value": "\"teal-50\"" + }, + { + "value": "\"teal-60\"" + }, + { + "value": "\"teal-70\"" + }, + { + "value": "\"teal-80\"" + }, + { + "value": "\"teal-90\"" + }, + { + "value": "\"violet-10\"" + }, + { + "value": "\"violet-20\"" + }, + { + "value": "\"violet-30\"" + }, + { + "value": "\"violet-50\"" + }, + { + "value": "\"violet-60\"" + }, + { + "value": "\"violet-70\"" + }, + { + "value": "\"violet-80\"" + }, + { + "value": "\"violet-90\"" + } + ] } }, "lastChildNotClickable": { diff --git a/lib/src/components/Breadcrumb/index.tsx b/lib/src/components/Breadcrumb/index.tsx index dfd6ed423..1621f1fb6 100644 --- a/lib/src/components/Breadcrumb/index.tsx +++ b/lib/src/components/Breadcrumb/index.tsx @@ -8,7 +8,6 @@ import React, { useState, } from 'react' import { ResizeObserver } from '@juggle/resize-observer' -import { Theme } from '@xstyled/styled-components' import { clamp } from '../../utils/clamp' import { throttle } from '../../utils/throttle' @@ -18,13 +17,12 @@ import * as S from './styles' import { CreateWuiProps, forwardRef } from '@/System' import { RightIcon } from '@/Icons' - -type Colors = Theme['colors'] +import { ThemeColorTokens } from '@/theme' export interface BreadcrumbOptions { children: React.ReactNode | React.ReactNode[] /** color from theme, add for scroll gradient on mobile */ - gradientBackground?: Colors + gradientBackground?: ThemeColorTokens /** set clickable or not the last child */ lastChildNotClickable?: boolean separator?: string | React.ReactNode @@ -127,13 +125,13 @@ export const BreadcrumbComponent = forwardRef<'div', BreadcrumbProps>( return ( {isOverflowing && ( - + )} {clones.reverse()} {isOverflowing && ( - + )} ) diff --git a/lib/src/components/Breadcrumb/styles.ts b/lib/src/components/Breadcrumb/styles.ts index 854f8732e..e60fd35a9 100644 --- a/lib/src/components/Breadcrumb/styles.ts +++ b/lib/src/components/Breadcrumb/styles.ts @@ -1,13 +1,13 @@ import styled, { css, th, Theme } from '@xstyled/styled-components' -import { hexToRGBA } from '../../utils/hex-to-rgba' - import { BreadcrumbOptions } from './index' +import { hexToRGBA } from '@/utils' + export const StartGradient = styled.spanBox>( ({ gradientBackground, theme }) => css` left: 0; - background-image: ${gradient(theme as Theme, gradientBackground)}; + background-image: ${gradient(theme, gradientBackground)}; transform-origin: left; ` ) @@ -15,7 +15,7 @@ export const StartGradient = styled.spanBox>( ({ gradientBackground, theme }) => css` right: 0; - background-image: ${gradient(theme as Theme, gradientBackground, 'left')}; + background-image: ${gradient(theme, gradientBackground, 'left')}; transform-origin: right; ` ) @@ -49,7 +49,7 @@ export const List = styled.olBox` const gradient = ( theme: Theme, - gradientBackground: Pick, + gradientBackground: BreadcrumbOptions['gradientBackground'], position = 'right' ) => { const gradientColor = th(`colors.${gradientBackground}`)({ theme }) as string diff --git a/lib/src/theme/index.ts b/lib/src/theme/index.ts index 17b223fe8..fd440bb6c 100644 --- a/lib/src/theme/index.ts +++ b/lib/src/theme/index.ts @@ -179,6 +179,8 @@ export type ThemeFontsUrl = | 'https://cdn.welcometothejungle.com/fonts' | string +export type ThemeColorTokens = keyof ThemeColors + export type ThemeProps = { [param: string]: unknown defaultFontFamily?: string From fb6f0af0eedf18b4d8a1ba3986bc24fa3e23b0c5 Mon Sep 17 00:00:00 2001 From: isaacmaamouche Date: Fri, 14 Feb 2025 10:10:57 +0100 Subject: [PATCH 04/11] chore: use move Icon Size type to theme --- .../components/Avatar/docs/properties.json | 6 ++--- lib/src/components/Avatar/theme.ts | 4 ++-- lib/src/components/Icon/docs/properties.json | 22 +++++++++++++++++-- lib/src/components/Icon/index.tsx | 3 +-- lib/src/components/Icon/theme.ts | 14 +++++------- lib/src/utils/ts-utils.ts | 6 ++--- 6 files changed, 35 insertions(+), 20 deletions(-) diff --git a/lib/src/components/Avatar/docs/properties.json b/lib/src/components/Avatar/docs/properties.json index e1d140bea..a397d80a0 100644 --- a/lib/src/components/Avatar/docs/properties.json +++ b/lib/src/components/Avatar/docs/properties.json @@ -20,9 +20,6 @@ "name": "enum", "raw": "AvatarColors", "value": [ - { - "value": "string & Record" - }, { "value": "\"yellow-10\"" }, @@ -367,6 +364,9 @@ }, { "value": "\"violet-90\"" + }, + { + "value": "string & Record" } ] } diff --git a/lib/src/components/Avatar/theme.ts b/lib/src/components/Avatar/theme.ts index f1681b0c5..311315e63 100644 --- a/lib/src/components/Avatar/theme.ts +++ b/lib/src/components/Avatar/theme.ts @@ -1,10 +1,10 @@ import type { CSSObject } from '@xstyled/styled-components' import type { ThemeColorTokens, ThemeValues } from '@/theme' -import type { LiteralStringUnion } from '@/utils' +import type { LiteralUnion } from '@/utils' export type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' -export type AvatarColors = LiteralStringUnion +export type AvatarColors = LiteralUnion export type ThemeAvatars = { sizes: Record diff --git a/lib/src/components/Icon/docs/properties.json b/lib/src/components/Icon/docs/properties.json index c0f90f3de..79eb3e7e5 100644 --- a/lib/src/components/Icon/docs/properties.json +++ b/lib/src/components/Icon/docs/properties.json @@ -80,10 +80,28 @@ "raw": "Size", "value": [ { - "value": "string" + "value": "\"xs\"" }, { - "value": "number" + "value": "\"sm\"" + }, + { + "value": "\"md\"" + }, + { + "value": "\"lg\"" + }, + { + "value": "\"xl\"" + }, + { + "value": "\"xxl\"" + }, + { + "value": "string & Record" + }, + { + "value": "number & Record" } ] } diff --git a/lib/src/components/Icon/index.tsx b/lib/src/components/Icon/index.tsx index 59d469fb2..cb2d8aeb0 100644 --- a/lib/src/components/Icon/index.tsx +++ b/lib/src/components/Icon/index.tsx @@ -1,6 +1,7 @@ import React from 'react' import * as S from './styles' +import { Size } from './theme' import { CreateWuiProps, forwardRef } from '@/System' @@ -13,8 +14,6 @@ type IconContent = { width?: number } -type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string - export interface IconOptions { content?: IconContent name?: string diff --git a/lib/src/components/Icon/theme.ts b/lib/src/components/Icon/theme.ts index 33321b584..3f753ed8e 100644 --- a/lib/src/components/Icon/theme.ts +++ b/lib/src/components/Icon/theme.ts @@ -1,13 +1,11 @@ import { ThemeValues } from '@/theme' +import { LiteralUnion } from '@/utils' -export type ThemeIcons = { - lg: string - md: string - sm: string - xl: string - xs: string - xxl: string -} +type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' + +export type Size = LiteralUnion + +export type ThemeIcons = Record export const getIcons = ({ toRem }: ThemeValues): ThemeIcons => ({ xs: toRem(12), diff --git a/lib/src/utils/ts-utils.ts b/lib/src/utils/ts-utils.ts index e74b1cee1..b587131fc 100644 --- a/lib/src/utils/ts-utils.ts +++ b/lib/src/utils/ts-utils.ts @@ -8,10 +8,10 @@ * // would be interpreted as * type color = string * - * // Using LiteralStringUnion - * type color = LiteralStringUnion<'red' | 'blue' | 'green'> + * // Using LiteralUnion + * type color = LiteralUnion<'red' | 'blue' | 'green'> * // would be interpreted as * type color = 'red' | 'blue' | 'green' * // While still allowing any literal string */ -export type LiteralStringUnion = T | (string & Record) +export type LiteralUnion = T | (U & Record) From 021430c95b133bef94ee7b1973a467a917587a3c Mon Sep 17 00:00:00 2001 From: isaacmaamouche Date: Fri, 14 Feb 2025 10:21:32 +0100 Subject: [PATCH 05/11] chore: use Literal union and move Loader Size type to theme --- lib/src/components/Loader/docs/properties.json | 16 ++++++++++++++-- lib/src/components/Loader/index.tsx | 5 ++--- lib/src/components/Loader/theme.ts | 11 +++++------ lib/src/components/System/index.tsx | 2 -- lib/src/utils/ts-utils.ts | 2 ++ 5 files changed, 23 insertions(+), 13 deletions(-) diff --git a/lib/src/components/Loader/docs/properties.json b/lib/src/components/Loader/docs/properties.json index a090f68e4..a4d7ee504 100644 --- a/lib/src/components/Loader/docs/properties.json +++ b/lib/src/components/Loader/docs/properties.json @@ -600,10 +600,22 @@ "raw": "Size", "value": [ { - "value": "string" + "value": "\"xs\"" }, { - "value": "number" + "value": "\"sm\"" + }, + { + "value": "\"md\"" + }, + { + "value": "\"lg\"" + }, + { + "value": "string & Record" + }, + { + "value": "number & Record" } ] } diff --git a/lib/src/components/Loader/index.tsx b/lib/src/components/Loader/index.tsx index 6cf125466..9c68f5cd8 100644 --- a/lib/src/components/Loader/index.tsx +++ b/lib/src/components/Loader/index.tsx @@ -2,11 +2,10 @@ import React from 'react' import { CSSObject } from '@xstyled/styled-components' import * as S from './styles' +import { Size } from './theme' import { Box } from '@/Box' -import { CreateWuiProps, ExtraSize, forwardRef } from '@/System' - -type Size = 'xs' | 'sm' | 'md' | 'lg' | ExtraSize +import { CreateWuiProps, forwardRef } from '@/System' export interface LoaderOptions { color?: CSSObject['color'] diff --git a/lib/src/components/Loader/theme.ts b/lib/src/components/Loader/theme.ts index 7cdc5b96f..350c0ac44 100644 --- a/lib/src/components/Loader/theme.ts +++ b/lib/src/components/Loader/theme.ts @@ -1,11 +1,10 @@ import { ThemeValues } from '@/theme' +import { LiteralUnion } from '@/utils' -export type ThemeLoaders = { - lg: string - md: string - sm: string - xs: string -} +type LoarderSize = 'xs' | 'sm' | 'md' | 'lg' +export type Size = LiteralUnion + +export type ThemeLoaders = Record export const getLoaders = ({ toRem }: ThemeValues): ThemeLoaders => ({ xs: toRem(8), diff --git a/lib/src/components/System/index.tsx b/lib/src/components/System/index.tsx index 45667b282..3b45b52fe 100644 --- a/lib/src/components/System/index.tsx +++ b/lib/src/components/System/index.tsx @@ -156,5 +156,3 @@ export const forwardRef = ( ): CreateWuiComponent => { return React.forwardRef(component) as unknown as CreateWuiComponent } - -export type ExtraSize = number | string diff --git a/lib/src/utils/ts-utils.ts b/lib/src/utils/ts-utils.ts index b587131fc..9edff1f84 100644 --- a/lib/src/utils/ts-utils.ts +++ b/lib/src/utils/ts-utils.ts @@ -13,5 +13,7 @@ * // would be interpreted as * type color = 'red' | 'blue' | 'green' * // While still allowing any literal string + * const bg: color = 'yellow' + * const bg: color = '#FFF' */ export type LiteralUnion = T | (U & Record) From 4eacd31e148b1c5166d14b844c4d497dc4b8ec00 Mon Sep 17 00:00:00 2001 From: isaacmaamouche Date: Fri, 14 Feb 2025 10:24:17 +0100 Subject: [PATCH 06/11] chore: move Modal Size type to theme --- lib/src/components/Modal/index.tsx | 3 +-- lib/src/components/Modal/theme.ts | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/lib/src/components/Modal/index.tsx b/lib/src/components/Modal/index.tsx index 01a84a6a9..00dfed941 100644 --- a/lib/src/components/Modal/index.tsx +++ b/lib/src/components/Modal/index.tsx @@ -7,13 +7,12 @@ import { Header } from './Header' import { Footer } from './Footer' import { Content } from './Content' import { Assets } from './Assets' +import { Size } from './theme' import { As, CreateWuiProps, forwardRef } from '@/System' import { BoxProps } from '@/Box' import { Shape, ShapeProps } from '@/Shape' -type Size = 'xs' | 'sm' | 'md' | 'lg' | 'auto' - export interface ModalOptions extends Omit, 'as'> { ariaLabel: string children: React.ReactElement diff --git a/lib/src/components/Modal/theme.ts b/lib/src/components/Modal/theme.ts index 1d481e01c..e73d8a1d7 100644 --- a/lib/src/components/Modal/theme.ts +++ b/lib/src/components/Modal/theme.ts @@ -2,7 +2,7 @@ import { CSSObject } from '@xstyled/styled-components' import { ThemeValues } from '@/theme' -type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'auto' +export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'auto' export type ThemeModals = { backdrop: CSSObject @@ -12,7 +12,7 @@ export type ThemeModals = { footer: CSSObject gutter: string header: CSSObject - sizes: Record + sizes: Record } export const getModals = (theme: ThemeValues): ThemeModals => { From 58077c28572a40e392e75f151becd2de63311238 Mon Sep 17 00:00:00 2001 From: isaacmaamouche Date: Fri, 14 Feb 2025 10:45:28 +0100 Subject: [PATCH 07/11] chore: move Taost Variant type to theme --- lib/src/components/Toast/Growl.tsx | 3 ++- lib/src/components/Toast/Snackbar.tsx | 4 ++-- lib/src/components/Toast/docs/properties.json | 2 +- lib/src/components/Toast/theme.ts | 2 ++ 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/lib/src/components/Toast/Growl.tsx b/lib/src/components/Toast/Growl.tsx index 818c2b447..43237c4f8 100644 --- a/lib/src/components/Toast/Growl.tsx +++ b/lib/src/components/Toast/Growl.tsx @@ -1,6 +1,7 @@ import React from 'react' import * as S from './styles' +import { ToastVariant } from './theme' import { CloseButton } from '@/CloseButton' import { CreateWuiProps, forwardRef } from '@/System' @@ -10,7 +11,7 @@ export interface GrowlOptions { hasCloseButton?: boolean icon?: JSX.Element | null onClose?: () => void - variant?: 'default' | 'info' | 'success' | 'danger' | 'warning' + variant?: ToastVariant } export type GrowlProps = CreateWuiProps<'div', GrowlOptions> diff --git a/lib/src/components/Toast/Snackbar.tsx b/lib/src/components/Toast/Snackbar.tsx index 590245115..b5f3fc5cb 100644 --- a/lib/src/components/Toast/Snackbar.tsx +++ b/lib/src/components/Toast/Snackbar.tsx @@ -1,6 +1,7 @@ import React from 'react' import * as S from './styles' +import { ToastVariant } from './theme' import { Box } from '@/Box' import { Button, ButtonProps } from '@/Button' @@ -15,11 +16,10 @@ export interface SnackbarOptions { hasCloseButton?: boolean icon?: JSX.Element | null onClose?: () => void - variant?: 'default' | 'info' | 'success' | 'danger' | 'warning' + variant?: ToastVariant } export type SnackbarProps = CreateWuiProps<'div', SnackbarOptions> - /** * @name Toast.Snackbar */ diff --git a/lib/src/components/Toast/docs/properties.json b/lib/src/components/Toast/docs/properties.json index bead09174..05cf48277 100644 --- a/lib/src/components/Toast/docs/properties.json +++ b/lib/src/components/Toast/docs/properties.json @@ -107,7 +107,7 @@ "required": false, "type": { "name": "enum", - "raw": "\"default\" | \"info\" | \"success\" | \"danger\" | \"warning\"", + "raw": "ToastVariant", "value": [ { "value": "\"default\"" diff --git a/lib/src/components/Toast/theme.ts b/lib/src/components/Toast/theme.ts index 208d72112..bcaa3981d 100644 --- a/lib/src/components/Toast/theme.ts +++ b/lib/src/components/Toast/theme.ts @@ -4,6 +4,8 @@ import { getTexts } from '../../theme/typography' import { ThemeValues } from '@/theme' +export type ToastVariant = 'default' | 'info' | 'success' | 'danger' | 'warning' + export type ThemeToasts = { bottom: CSSObject default: CSSObject From 638b7569eb4d7826e4633275897eb84ab5488b52 Mon Sep 17 00:00:00 2001 From: isaacmaamouche Date: Fri, 14 Feb 2025 11:05:00 +0100 Subject: [PATCH 08/11] chore: move Toggle Size type to theme --- lib/src/components/Toggle/index.tsx | 3 +-- lib/src/components/Toggle/styles.ts | 4 ++-- lib/src/components/Toggle/theme.ts | 1 + 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/src/components/Toggle/index.tsx b/lib/src/components/Toggle/index.tsx index 713687804..3be322cd2 100644 --- a/lib/src/components/Toggle/index.tsx +++ b/lib/src/components/Toggle/index.tsx @@ -1,12 +1,11 @@ import React from 'react' import * as S from './styles' +import { Size } from './theme' import { Checkbox, CheckboxProps } from '@/Checkbox' import { CreateWuiProps, forwardRef } from '@/System' -type Size = 'xs' | 'sm' | 'md' - export type ToggleOptions = Omit< CheckboxProps, 'Component' | 'iconPlacement' | 'indeterminate' | 'hasIcon' | 'transparent' | 'isClearable' diff --git a/lib/src/components/Toggle/styles.ts b/lib/src/components/Toggle/styles.ts index 0f6511d55..a19b105f7 100644 --- a/lib/src/components/Toggle/styles.ts +++ b/lib/src/components/Toggle/styles.ts @@ -1,12 +1,12 @@ import styled, { css, system, th } from '@xstyled/styled-components' import * as Ariakit from '@ariakit/react' +import { Size } from './theme' + import { ToggleOptions } from './index' import { shouldForwardProp } from '@/System' -type Size = 'xs' | 'sm' | 'md' - export const Toggle = styled(Ariakit.Checkbox).withConfig({ shouldForwardProp })( ({ order = '-1', size }) => css` ${th('toggles.item.default')}; diff --git a/lib/src/components/Toggle/theme.ts b/lib/src/components/Toggle/theme.ts index 5738a888e..6a232ba6d 100644 --- a/lib/src/components/Toggle/theme.ts +++ b/lib/src/components/Toggle/theme.ts @@ -6,6 +6,7 @@ import { ThemeValues } from '@/theme' const XS_LINE_HEIGHT_ADJUSTMENTS = '0.32rem !important' const SM_LINE_HEIGHT_ADJUSTMENTS = '0.12rem ! important' +export type Size = 'xs' | 'sm' | 'md' type State = 'default' | 'checked' | 'disabled' | 'sizes' export type ThemeToggles = { From d61f64e67bb16f73f237b6abcbc3e1ef2f606954 Mon Sep 17 00:00:00 2001 From: isaacmaamouche Date: Fri, 14 Feb 2025 11:23:37 +0100 Subject: [PATCH 09/11] chore: update ThemeColorTokens import path --- lib/src/components/Avatar/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/components/Avatar/utils.ts b/lib/src/components/Avatar/utils.ts index 7fc99f1c8..9163e1ca9 100644 --- a/lib/src/components/Avatar/utils.ts +++ b/lib/src/components/Avatar/utils.ts @@ -1,4 +1,4 @@ -import { ThemeColorTokens } from './theme' +import { ThemeColorTokens } from '@/theme' export function getColorByLength(colors: ThemeColorTokens, text = ''): string { const colorKeys = Object.keys(colors).filter(color => color.startsWith('secondary-')) From d4975243af4ce26f45635c2f85485c23eabea2e4 Mon Sep 17 00:00:00 2001 From: isaacmaamouche Date: Tue, 18 Feb 2025 09:43:10 +0100 Subject: [PATCH 10/11] chore: remove Loader name typo --- lib/src/components/Loader/theme.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/src/components/Loader/theme.ts b/lib/src/components/Loader/theme.ts index 350c0ac44..14227cf30 100644 --- a/lib/src/components/Loader/theme.ts +++ b/lib/src/components/Loader/theme.ts @@ -1,10 +1,10 @@ import { ThemeValues } from '@/theme' import { LiteralUnion } from '@/utils' -type LoarderSize = 'xs' | 'sm' | 'md' | 'lg' -export type Size = LiteralUnion +type LoaderSize = 'xs' | 'sm' | 'md' | 'lg' +export type Size = LiteralUnion -export type ThemeLoaders = Record +export type ThemeLoaders = Record export const getLoaders = ({ toRem }: ThemeValues): ThemeLoaders => ({ xs: toRem(8), From fa141a11ec0901a009050d20224e1faa23e70d55 Mon Sep 17 00:00:00 2001 From: isaacmaamouche Date: Tue, 18 Feb 2025 14:02:19 +0100 Subject: [PATCH 11/11] chore: split sizes from state type for toogle css --- lib/src/components/Toggle/theme.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/src/components/Toggle/theme.ts b/lib/src/components/Toggle/theme.ts index 6a232ba6d..374bc220e 100644 --- a/lib/src/components/Toggle/theme.ts +++ b/lib/src/components/Toggle/theme.ts @@ -7,12 +7,12 @@ const XS_LINE_HEIGHT_ADJUSTMENTS = '0.32rem !important' const SM_LINE_HEIGHT_ADJUSTMENTS = '0.12rem ! important' export type Size = 'xs' | 'sm' | 'md' -type State = 'default' | 'checked' | 'disabled' | 'sizes' +type State = 'default' | 'checked' | 'disabled' export type ThemeToggles = { - after: Record + after: Record icon: Record<'sizes' | 'position', CSSObject> - item: Record + item: Record } export const getToggles = (theme: ThemeValues): ThemeToggles => {