Feat(web-react): Introduce expandable space and breakpoint token types

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';
+    };
+  }
+}

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"
   }
 }

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 = () => (
-  <Heading elementType="h2" size="large">
-    Spirit App Router
-  </Heading>
+  <>
+    <Heading elementType="h2" size="large">
+      Spirit App Router
+    </Heading>
+    <Button color="primary" size="large" marginBottom="space-123">
+      Hello, World!
+    </Button>
+  </>
 );
 
 export default Home;

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<Record<BreakpointToken, SpaceToken | StyleSpacingAuto>>,
+  propValue: Partial<Record<ExpandableBreakpointToken, ExpandableSpaceToken | StyleSpacingAuto>>,
   prefix: string | null | undefined,
   accumulatedUtilities: string[] = [],
 ) =>

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<Record<BreakpointToken, SpaceToken>>;
+  spacing?: ExpandableSpaceToken | Partial<Record<ExpandableBreakpointToken, ExpandableSpaceToken>>;
   /** Custom horizontal spacing between items */
-  spacingX?: SpaceToken | Partial<Record<BreakpointToken, SpaceToken>>;
+  spacingX?: ExpandableSpaceToken | Partial<Record<ExpandableBreakpointToken, ExpandableSpaceToken>>;
   /** Custom vertical spacing between items */
-  spacingY?: SpaceToken | Partial<Record<BreakpointToken, SpaceToken>>;
+  spacingY?: ExpandableSpaceToken | Partial<Record<ExpandableBreakpointToken, ExpandableSpaceToken>>;
 }
 
 export interface FlexProps<T extends ElementType = 'div'> extends FlexElementTypeProps<T>, FlexCustomLayoutProps {}

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<Record<BreakpointToken, SpaceToken>>;
+  spacing?: ExpandableSpaceToken | Partial<Record<ExpandableBreakpointToken, ExpandableSpaceToken>>;
   /** Custom horizontal spacing between items */
-  spacingX?: SpaceToken | Partial<Record<BreakpointToken, SpaceToken>>;
+  spacingX?: ExpandableSpaceToken | Partial<Record<ExpandableBreakpointToken, ExpandableSpaceToken>>;
   /** Custom vertical spacing between items */
-  spacingY?: SpaceToken | Partial<Record<BreakpointToken, SpaceToken>>;
+  spacingY?: ExpandableSpaceToken | Partial<Record<ExpandableBreakpointToken, ExpandableSpaceToken>>;
 }
 
 export interface GridItemCustomLayoutProps {

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<Record<BreakpointToken, SpaceToken | StyleSpacingAuto>>;
+    | Partial<Record<ExpandableBreakpointToken, ExpandableSpaceToken | StyleSpacingAuto>>;
 };
 
 export interface SpacingProp {
-  spacing?: SpaceToken | Partial<Record<BreakpointToken, SpaceToken>>;
+  spacing?: ExpandableSpaceToken | Partial<Record<ExpandableBreakpointToken, ExpandableSpaceToken>>;
 }
 
 export interface SpacingCSSProperties extends CSSProperties {

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<keyof typeof spaces, string>}` | `${'space-'}${number}`;
+export type SpaceToken = `${'space-'}${Extract<keyof typeof spaces, string>}`;
+
+// Extendable token types
+declare global {
+  interface ExpandableTokens {
+    spaces?: Record<string, string | number>;
+    breakpoints?: Record<string, string>;
+  }
+}
+
+export type ExpandableSpaceToken = SpaceToken | `${'space-'}${Extract<keyof ExpandableTokens['spaces'], string>}`;
+export type ExpandableBreakpointToken = BreakpointToken | keyof ExpandableTokens['breakpoints'] | string;