From 4e595db5a4661390665fb67fcb36e771ed07b3ad Mon Sep 17 00:00:00 2001 From: literat Date: Wed, 4 Dec 2024 14:05:24 +0100 Subject: [PATCH 1/4] Feat(web-react): Introduce expandable space and breakpoint token types refs #DS-1557 --- packages/web-react/src/types/shared/style.ts | 8 ++++---- packages/web-react/src/types/shared/tokens.ts | 13 ++++++++++++- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/web-react/src/types/shared/style.ts b/packages/web-react/src/types/shared/style.ts index 3bf1577dd0..16ca030d6a 100644 --- a/packages/web-react/src/types/shared/style.ts +++ b/packages/web-react/src/types/shared/style.ts @@ -1,19 +1,19 @@ import { CSSProperties } from 'react'; import { SpacingStyleProp } from '../../constants'; -import { BreakpointToken, SpaceToken } from './tokens'; +import { ExpandableBreakpointToken, ExpandableSpaceToken } from './tokens'; export const STYLE_SPACING_AUTO = 'auto' as const; export type StyleSpacingAuto = typeof STYLE_SPACING_AUTO; export type SpacingProps = { [key in keyof typeof SpacingStyleProp]?: - | SpaceToken + | ExpandableSpaceToken | StyleSpacingAuto - | Partial>; + | Partial>; }; export interface SpacingProp { - spacing?: SpaceToken | Partial>; + spacing?: ExpandableSpaceToken | Partial>; } export interface SpacingCSSProperties extends CSSProperties { diff --git a/packages/web-react/src/types/shared/tokens.ts b/packages/web-react/src/types/shared/tokens.ts index b48edd8365..ad8bdf4303 100644 --- a/packages/web-react/src/types/shared/tokens.ts +++ b/packages/web-react/src/types/shared/tokens.ts @@ -3,4 +3,15 @@ import { breakpoints, spaces } from '@lmc-eu/spirit-design-tokens'; export const BREAKPOINT_MOBILE = 'mobile'; export type BreakpointToken = keyof typeof breakpoints | string; -export type SpaceToken = `${'space-'}${Extract}` | `${'space-'}${number}`; +export type SpaceToken = `${'space-'}${Extract}`; + +// Extendable token types +declare global { + interface ExpandableTokens { + spaces?: Record; + breakpoints?: Record; + } +} + +export type ExpandableSpaceToken = SpaceToken | `${'space-'}${Extract}`; +export type ExpandableBreakpointToken = BreakpointToken | keyof ExpandableTokens['breakpoints'] | string; From 46213dceaf8605b5ddb1c0fd7b3200548bb2c746 Mon Sep 17 00:00:00 2001 From: literat Date: Wed, 4 Dec 2024 14:06:27 +0100 Subject: [PATCH 2/4] Test(examples): Try to test expandable tokens --- examples/next-with-app-router/custom-tokens.d.ts | 12 ++++++++++++ examples/next-with-app-router/src/app/page.tsx | 13 +++++++++---- 2 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 examples/next-with-app-router/custom-tokens.d.ts diff --git a/examples/next-with-app-router/custom-tokens.d.ts b/examples/next-with-app-router/custom-tokens.d.ts new file mode 100644 index 0000000000..c3354f78eb --- /dev/null +++ b/examples/next-with-app-router/custom-tokens.d.ts @@ -0,0 +1,12 @@ +// custom-tokens.d.ts +declare global { + interface ExpandableTokens { + spaces: { + 150: '10px'; + 123: '5px'; + }; + breakpoints: { + tablet: '768px'; + }; + } +} diff --git a/examples/next-with-app-router/src/app/page.tsx b/examples/next-with-app-router/src/app/page.tsx index fc86cc74ca..32d205a47b 100644 --- a/examples/next-with-app-router/src/app/page.tsx +++ b/examples/next-with-app-router/src/app/page.tsx @@ -1,10 +1,15 @@ -import { Heading } from '@lmc-eu/spirit-web-react'; +import { Button, Heading } from '@lmc-eu/spirit-web-react'; import { NextPage } from 'next'; const Home: NextPage = () => ( - - Spirit App Router - + <> + + Spirit App Router + + + ); export default Home; From 0663e2f84f8add9d3bd4f643ac8d24a4ee13c351 Mon Sep 17 00:00:00 2001 From: literat Date: Wed, 4 Dec 2024 14:07:22 +0100 Subject: [PATCH 3/4] Chore(examples): Add missing `sass` dependencies --- examples/next-with-app-router/package.json | 2 + yarn.lock | 242 ++++++++++++++++++++- 2 files changed, 242 insertions(+), 2 deletions(-) diff --git a/examples/next-with-app-router/package.json b/examples/next-with-app-router/package.json index 1ea0d0c4c8..00100e1ce1 100644 --- a/examples/next-with-app-router/package.json +++ b/examples/next-with-app-router/package.json @@ -24,6 +24,8 @@ "@types/react-dom": "18.3.1", "eslint": "8.57.1", "eslint-config-next": "14.2.18", + "sass": "^1.82.0", + "sass-embedded": "^1.82.0", "typescript": "5.6.3" } } diff --git a/yarn.lock b/yarn.lock index 0b63cfa300..789391b4bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -40,6 +40,8 @@ __metadata: next: "npm:14.2.18" react: "npm:^18" react-dom: "npm:^18" + sass: "npm:^1.82.0" + sass-embedded: "npm:^1.82.0" typescript: "npm:5.6.3" languageName: unknown linkType: soft @@ -12143,7 +12145,7 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:^4.0.1": +"chokidar@npm:^4.0.0, chokidar@npm:^4.0.1": version: 4.0.1 resolution: "chokidar@npm:4.0.1" dependencies: @@ -27541,6 +27543,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-android-arm64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-android-arm64@npm:1.82.0" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + "sass-embedded-android-arm@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-android-arm@npm:1.81.0" @@ -27548,6 +27557,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-android-arm@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-android-arm@npm:1.82.0" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + "sass-embedded-android-ia32@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-android-ia32@npm:1.81.0" @@ -27555,6 +27571,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-android-ia32@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-android-ia32@npm:1.82.0" + conditions: os=android & cpu=ia32 + languageName: node + linkType: hard + "sass-embedded-android-riscv64@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-android-riscv64@npm:1.81.0" @@ -27562,6 +27585,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-android-riscv64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-android-riscv64@npm:1.82.0" + conditions: os=android & cpu=riscv64 + languageName: node + linkType: hard + "sass-embedded-android-x64@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-android-x64@npm:1.81.0" @@ -27569,6 +27599,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-android-x64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-android-x64@npm:1.82.0" + conditions: os=android & cpu=x64 + languageName: node + linkType: hard + "sass-embedded-darwin-arm64@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-darwin-arm64@npm:1.81.0" @@ -27576,6 +27613,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-darwin-arm64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-darwin-arm64@npm:1.82.0" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "sass-embedded-darwin-x64@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-darwin-x64@npm:1.81.0" @@ -27583,6 +27627,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-darwin-x64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-darwin-x64@npm:1.82.0" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "sass-embedded-linux-arm64@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-linux-arm64@npm:1.81.0" @@ -27590,6 +27641,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-linux-arm64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-linux-arm64@npm:1.82.0" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + "sass-embedded-linux-arm@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-linux-arm@npm:1.81.0" @@ -27597,6 +27655,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-linux-arm@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-linux-arm@npm:1.82.0" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + "sass-embedded-linux-ia32@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-linux-ia32@npm:1.81.0" @@ -27604,6 +27669,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-linux-ia32@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-linux-ia32@npm:1.82.0" + conditions: os=linux & cpu=ia32 + languageName: node + linkType: hard + "sass-embedded-linux-musl-arm64@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-linux-musl-arm64@npm:1.81.0" @@ -27611,6 +27683,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-linux-musl-arm64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-linux-musl-arm64@npm:1.82.0" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + "sass-embedded-linux-musl-arm@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-linux-musl-arm@npm:1.81.0" @@ -27618,6 +27697,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-linux-musl-arm@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-linux-musl-arm@npm:1.82.0" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + "sass-embedded-linux-musl-ia32@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-linux-musl-ia32@npm:1.81.0" @@ -27625,6 +27711,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-linux-musl-ia32@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-linux-musl-ia32@npm:1.82.0" + conditions: os=linux & cpu=ia32 + languageName: node + linkType: hard + "sass-embedded-linux-musl-riscv64@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-linux-musl-riscv64@npm:1.81.0" @@ -27632,6 +27725,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-linux-musl-riscv64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-linux-musl-riscv64@npm:1.82.0" + conditions: os=linux & cpu=riscv64 + languageName: node + linkType: hard + "sass-embedded-linux-musl-x64@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-linux-musl-x64@npm:1.81.0" @@ -27639,6 +27739,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-linux-musl-x64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-linux-musl-x64@npm:1.82.0" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + "sass-embedded-linux-riscv64@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-linux-riscv64@npm:1.81.0" @@ -27646,6 +27753,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-linux-riscv64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-linux-riscv64@npm:1.82.0" + conditions: os=linux & cpu=riscv64 + languageName: node + linkType: hard + "sass-embedded-linux-x64@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-linux-x64@npm:1.81.0" @@ -27653,6 +27767,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-linux-x64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-linux-x64@npm:1.82.0" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + "sass-embedded-win32-arm64@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-win32-arm64@npm:1.81.0" @@ -27660,6 +27781,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-win32-arm64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-win32-arm64@npm:1.82.0" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "sass-embedded-win32-ia32@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-win32-ia32@npm:1.81.0" @@ -27667,6 +27795,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-win32-ia32@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-win32-ia32@npm:1.82.0" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + "sass-embedded-win32-x64@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded-win32-x64@npm:1.81.0" @@ -27674,6 +27809,13 @@ __metadata: languageName: node linkType: hard +"sass-embedded-win32-x64@npm:1.82.0": + version: 1.82.0 + resolution: "sass-embedded-win32-x64@npm:1.82.0" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "sass-embedded@npm:1.81.0": version: 1.81.0 resolution: "sass-embedded@npm:1.81.0" @@ -27753,6 +27895,85 @@ __metadata: languageName: node linkType: hard +"sass-embedded@npm:^1.82.0": + version: 1.82.0 + resolution: "sass-embedded@npm:1.82.0" + dependencies: + "@bufbuild/protobuf": "npm:^2.0.0" + buffer-builder: "npm:^0.2.0" + colorjs.io: "npm:^0.5.0" + immutable: "npm:^5.0.2" + rxjs: "npm:^7.4.0" + sass-embedded-android-arm: "npm:1.82.0" + sass-embedded-android-arm64: "npm:1.82.0" + sass-embedded-android-ia32: "npm:1.82.0" + sass-embedded-android-riscv64: "npm:1.82.0" + sass-embedded-android-x64: "npm:1.82.0" + sass-embedded-darwin-arm64: "npm:1.82.0" + sass-embedded-darwin-x64: "npm:1.82.0" + sass-embedded-linux-arm: "npm:1.82.0" + sass-embedded-linux-arm64: "npm:1.82.0" + sass-embedded-linux-ia32: "npm:1.82.0" + sass-embedded-linux-musl-arm: "npm:1.82.0" + sass-embedded-linux-musl-arm64: "npm:1.82.0" + sass-embedded-linux-musl-ia32: "npm:1.82.0" + sass-embedded-linux-musl-riscv64: "npm:1.82.0" + sass-embedded-linux-musl-x64: "npm:1.82.0" + sass-embedded-linux-riscv64: "npm:1.82.0" + sass-embedded-linux-x64: "npm:1.82.0" + sass-embedded-win32-arm64: "npm:1.82.0" + sass-embedded-win32-ia32: "npm:1.82.0" + sass-embedded-win32-x64: "npm:1.82.0" + supports-color: "npm:^8.1.1" + sync-child-process: "npm:^1.0.2" + varint: "npm:^6.0.0" + dependenciesMeta: + sass-embedded-android-arm: + optional: true + sass-embedded-android-arm64: + optional: true + sass-embedded-android-ia32: + optional: true + sass-embedded-android-riscv64: + optional: true + sass-embedded-android-x64: + optional: true + sass-embedded-darwin-arm64: + optional: true + sass-embedded-darwin-x64: + optional: true + sass-embedded-linux-arm: + optional: true + sass-embedded-linux-arm64: + optional: true + sass-embedded-linux-ia32: + optional: true + sass-embedded-linux-musl-arm: + optional: true + sass-embedded-linux-musl-arm64: + optional: true + sass-embedded-linux-musl-ia32: + optional: true + sass-embedded-linux-musl-riscv64: + optional: true + sass-embedded-linux-musl-x64: + optional: true + sass-embedded-linux-riscv64: + optional: true + sass-embedded-linux-x64: + optional: true + sass-embedded-win32-arm64: + optional: true + sass-embedded-win32-ia32: + optional: true + sass-embedded-win32-x64: + optional: true + bin: + sass: dist/bin/sass.js + checksum: 10/e8d4c2f218c7f4704ccd6db1826111c20ed6e50e9e15aff206aa68cdd184c3d022015af295b8bc47727d904a6a603091c4a2f17e2d3da3dd2de19ff008fb7a20 + languageName: node + linkType: hard + "sass-loader@npm:14.2.1": version: 14.2.1 resolution: "sass-loader@npm:14.2.1" @@ -27798,6 +28019,23 @@ __metadata: languageName: node linkType: hard +"sass@npm:^1.82.0": + version: 1.82.0 + resolution: "sass@npm:1.82.0" + dependencies: + "@parcel/watcher": "npm:^2.4.1" + chokidar: "npm:^4.0.0" + immutable: "npm:^5.0.2" + source-map-js: "npm:>=0.6.2 <2.0.0" + dependenciesMeta: + "@parcel/watcher": + optional: true + bin: + sass: sass.js + checksum: 10/35fca01aef652e8cb1fede83fe4214e3c2ba10c9af3d7f101eec7c3c3d1064001f9c7d09a7fdb9548062b60fee62e5f1f931d90aecac02f6bc8deaa4b7516c5f + languageName: node + linkType: hard + "sax@npm:~1.2.4": version: 1.2.4 resolution: "sax@npm:1.2.4" @@ -28341,7 +28579,7 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1": +"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1": version: 1.2.1 resolution: "source-map-js@npm:1.2.1" checksum: 10/ff9d8c8bf096d534a5b7707e0382ef827b4dd360a577d3f34d2b9f48e12c9d230b5747974ee7c607f0df65113732711bb701fe9ece3c7edbd43cb2294d707df3 From cf57960b3fe373052d9bad8b082d32766e558fb5 Mon Sep 17 00:00:00 2001 From: literat Date: Wed, 4 Dec 2024 14:17:49 +0100 Subject: [PATCH 4/4] fixup! Feat(web-react): Introduce expandable space and breakpoint token types --- packages/web-react/src/hooks/useStyleUtilities.ts | 6 +++--- packages/web-react/src/types/flex.ts | 10 +++++----- packages/web-react/src/types/grid.ts | 10 +++++----- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/web-react/src/hooks/useStyleUtilities.ts b/packages/web-react/src/hooks/useStyleUtilities.ts index c369e8b34d..7583ae8246 100644 --- a/packages/web-react/src/hooks/useStyleUtilities.ts +++ b/packages/web-react/src/hooks/useStyleUtilities.ts @@ -1,9 +1,9 @@ import { SpacingStyleProp } from '../constants'; import { BREAKPOINT_MOBILE, - BreakpointToken, + ExpandableBreakpointToken, + ExpandableSpaceToken, STYLE_SPACING_AUTO, - SpaceToken, StyleProps, StyleSpacingAuto, } from '../types'; @@ -22,7 +22,7 @@ const normalizeSpacingValue = (value: string): string => const processBreakpointProperties = ( utilityName: string, - propValue: Partial>, + propValue: Partial>, prefix: string | null | undefined, accumulatedUtilities: string[] = [], ) => diff --git a/packages/web-react/src/types/flex.ts b/packages/web-react/src/types/flex.ts index ef66b1f77a..ff38dbf205 100644 --- a/packages/web-react/src/types/flex.ts +++ b/packages/web-react/src/types/flex.ts @@ -2,9 +2,9 @@ import { ElementType, JSXElementConstructor } from 'react'; import { AlignmentXExtendedDictionaryType, AlignmentYExtendedDictionaryType, - BreakpointToken, ChildrenProps, - SpaceToken, + ExpandableBreakpointToken, + ExpandableSpaceToken, StyleProps, TransferProps, } from './shared'; @@ -34,11 +34,11 @@ export interface FlexCustomLayoutProps { direction?: FlexDirectionType; isWrapping?: FlexWrapType; /** Custom spacing between items */ - spacing?: SpaceToken | Partial>; + spacing?: ExpandableSpaceToken | Partial>; /** Custom horizontal spacing between items */ - spacingX?: SpaceToken | Partial>; + spacingX?: ExpandableSpaceToken | Partial>; /** Custom vertical spacing between items */ - spacingY?: SpaceToken | Partial>; + spacingY?: ExpandableSpaceToken | Partial>; } export interface FlexProps extends FlexElementTypeProps, FlexCustomLayoutProps {} diff --git a/packages/web-react/src/types/grid.ts b/packages/web-react/src/types/grid.ts index 21cae801fa..3524e222bb 100644 --- a/packages/web-react/src/types/grid.ts +++ b/packages/web-react/src/types/grid.ts @@ -2,9 +2,9 @@ import { ElementType, JSXElementConstructor } from 'react'; import { AlignmentXExtendedDictionaryType, AlignmentYExtendedDictionaryType, - BreakpointToken, ChildrenProps, - SpaceToken, + ExpandableBreakpointToken, + ExpandableSpaceToken, StyleProps, TransferProps, } from './shared'; @@ -53,11 +53,11 @@ export interface GridCustomLayoutProps { alignmentY?: GridAlignmentYType; cols?: GridColumns | GridColsBreakpoints; /** Custom spacing between items */ - spacing?: SpaceToken | Partial>; + spacing?: ExpandableSpaceToken | Partial>; /** Custom horizontal spacing between items */ - spacingX?: SpaceToken | Partial>; + spacingX?: ExpandableSpaceToken | Partial>; /** Custom vertical spacing between items */ - spacingY?: SpaceToken | Partial>; + spacingY?: ExpandableSpaceToken | Partial>; } export interface GridItemCustomLayoutProps {