From 84aa8d9293c19eaea9e38f8e4a592df2d27f0bf6 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Wed, 2 Oct 2024 12:10:34 +0200 Subject: [PATCH 1/8] fix(ts): disallow invalid cols per breakpoint --- packages/react/src/Grid/Grid.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx index f0b8227dee..59f30a9b3e 100644 --- a/packages/react/src/Grid/Grid.tsx +++ b/packages/react/src/Grid/Grid.tsx @@ -9,8 +9,14 @@ import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' import { GridCell } from './GridCell' import { paddingClasses } from './paddingClasses' -export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 -export type GridColumnNumbers = { narrow: GridColumnNumber; medium: GridColumnNumber; wide: GridColumnNumber } +export type GridNarrowColumnNumber = 1 | 2 | 3 | 4 +export type GridMediumColumnNumber = GridNarrowColumnNumber | 5 | 6 | 7 | 8 +export type GridColumnNumber = GridMediumColumnNumber | 9 | 10 | 11 | 12 +export type GridColumnNumbers = { + narrow: GridNarrowColumnNumber + medium: GridMediumColumnNumber + wide: GridColumnNumber +} export type GridPaddingSize = 'small' | 'medium' | 'large' type GridPaddingVerticalProp = { From ffab7f515ce2b3da21ce908f054ae816449a57e7 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Fri, 4 Oct 2024 16:37:03 +0200 Subject: [PATCH 2/8] refactor(ts): grid col number types --- packages/react/src/Breakout/BreakoutCell.tsx | 11 ++++++++--- packages/react/src/Grid/Grid.tsx | 4 ++-- packages/react/src/Grid/GridCell.tsx | 6 +++--- packages/react/src/Grid/gridCellClasses.ts | 3 ++- packages/react/src/Grid/index.ts | 2 +- 5 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/react/src/Breakout/BreakoutCell.tsx b/packages/react/src/Breakout/BreakoutCell.tsx index 76855d267b..9b4bfb9ec6 100644 --- a/packages/react/src/Breakout/BreakoutCell.tsx +++ b/packages/react/src/Breakout/BreakoutCell.tsx @@ -7,7 +7,12 @@ import { forwardRef } from 'react' import type { HTMLAttributes, PropsWithChildren } from 'react' import type { BreakoutRowNumber, BreakoutRowNumbers } from './Breakout' import { breakoutCellClasses } from './breakoutCellClasses' -import type { GridColumnNumber, GridColumnNumbers } from '../Grid/Grid' +import type { + GridColumnNumbers, + GridMediumColumnNumber, + GridNarrowColumnNumber, + GridWideColumnNumber, +} from '../Grid/Grid' type BreakoutCellSpanAllProp = { /** Lets the cell span the full width of all grid variants. */ @@ -21,9 +26,9 @@ type BreakoutCellSpanAllProp = { type BreakoutCellSpanAndStartProps = { /** The amount of grid columns the cell spans. */ - colSpan?: 'all' | GridColumnNumber | GridColumnNumbers + colSpan?: 'all' | GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers /** The index of the grid column the cell starts at. */ - colStart?: GridColumnNumber | GridColumnNumbers + colStart?: GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers has?: 'figure' } diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx index 59f30a9b3e..1944db92fa 100644 --- a/packages/react/src/Grid/Grid.tsx +++ b/packages/react/src/Grid/Grid.tsx @@ -11,11 +11,11 @@ import { paddingClasses } from './paddingClasses' export type GridNarrowColumnNumber = 1 | 2 | 3 | 4 export type GridMediumColumnNumber = GridNarrowColumnNumber | 5 | 6 | 7 | 8 -export type GridColumnNumber = GridMediumColumnNumber | 9 | 10 | 11 | 12 +export type GridWideColumnNumber = GridMediumColumnNumber | 9 | 10 | 11 | 12 export type GridColumnNumbers = { narrow: GridNarrowColumnNumber medium: GridMediumColumnNumber - wide: GridColumnNumber + wide: GridWideColumnNumber } export type GridPaddingSize = 'small' | 'medium' | 'large' diff --git a/packages/react/src/Grid/GridCell.tsx b/packages/react/src/Grid/GridCell.tsx index 88ce51ade1..626cba8f22 100644 --- a/packages/react/src/Grid/GridCell.tsx +++ b/packages/react/src/Grid/GridCell.tsx @@ -5,7 +5,7 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { HTMLAttributes, PropsWithChildren } from 'react' -import type { GridColumnNumber, GridColumnNumbers } from './Grid' +import type { GridColumnNumbers, GridMediumColumnNumber, GridNarrowColumnNumber, GridWideColumnNumber } from './Grid' import { gridCellClasses } from './gridCellClasses' type GridCellSpanAllProp = { @@ -16,9 +16,9 @@ type GridCellSpanAllProp = { type GridCellSpanAndStartProps = { /** The amount of grid columns the cell spans. */ - span?: GridColumnNumber | GridColumnNumbers + span?: GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers /** The index of the grid column the cell starts at. */ - start?: GridColumnNumber | GridColumnNumbers + start?: GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers } export type GridCellProps = { diff --git a/packages/react/src/Grid/gridCellClasses.ts b/packages/react/src/Grid/gridCellClasses.ts index 43dbe55c15..53e36cbe2c 100644 --- a/packages/react/src/Grid/gridCellClasses.ts +++ b/packages/react/src/Grid/gridCellClasses.ts @@ -3,11 +3,12 @@ * Copyright Gemeente Amsterdam */ +import type { GridColumnNumbers, GridMediumColumnNumber, GridNarrowColumnNumber, GridWideColumnNumber } from './Grid' import type { GridCellProps } from './GridCell' export const addGridClass = ( prefix: string, - value?: number | { narrow: number; medium: number; wide: number } | 'all', + value?: GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers | 'all', ): string[] => { if (value === 'all' || typeof value === 'number') { return [`${prefix}${value}`] diff --git a/packages/react/src/Grid/index.ts b/packages/react/src/Grid/index.ts index 0d8979c3b0..72a262ebf0 100644 --- a/packages/react/src/Grid/index.ts +++ b/packages/react/src/Grid/index.ts @@ -1,3 +1,3 @@ export { Grid } from './Grid' -export type { GridProps, GridColumnNumber, GridColumnNumbers } from './Grid' +export type { GridProps, GridWideColumnNumber as GridColumnNumber, GridColumnNumbers } from './Grid' export type { GridCellProps } from './GridCell' From fc2b6b91d3c0ce489acd26e936e4adcd4986eb87 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Fri, 4 Oct 2024 16:37:03 +0200 Subject: [PATCH 3/8] refactor(ts): grid col number types --- packages/react/src/Breakout/BreakoutCell.tsx | 11 ++++++++--- packages/react/src/Grid/Grid.tsx | 4 ++-- packages/react/src/Grid/GridCell.tsx | 6 +++--- packages/react/src/Grid/gridCellClasses.ts | 3 ++- packages/react/src/Grid/index.ts | 8 +++++++- 5 files changed, 22 insertions(+), 10 deletions(-) diff --git a/packages/react/src/Breakout/BreakoutCell.tsx b/packages/react/src/Breakout/BreakoutCell.tsx index 76855d267b..9b4bfb9ec6 100644 --- a/packages/react/src/Breakout/BreakoutCell.tsx +++ b/packages/react/src/Breakout/BreakoutCell.tsx @@ -7,7 +7,12 @@ import { forwardRef } from 'react' import type { HTMLAttributes, PropsWithChildren } from 'react' import type { BreakoutRowNumber, BreakoutRowNumbers } from './Breakout' import { breakoutCellClasses } from './breakoutCellClasses' -import type { GridColumnNumber, GridColumnNumbers } from '../Grid/Grid' +import type { + GridColumnNumbers, + GridMediumColumnNumber, + GridNarrowColumnNumber, + GridWideColumnNumber, +} from '../Grid/Grid' type BreakoutCellSpanAllProp = { /** Lets the cell span the full width of all grid variants. */ @@ -21,9 +26,9 @@ type BreakoutCellSpanAllProp = { type BreakoutCellSpanAndStartProps = { /** The amount of grid columns the cell spans. */ - colSpan?: 'all' | GridColumnNumber | GridColumnNumbers + colSpan?: 'all' | GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers /** The index of the grid column the cell starts at. */ - colStart?: GridColumnNumber | GridColumnNumbers + colStart?: GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers has?: 'figure' } diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx index 59f30a9b3e..1944db92fa 100644 --- a/packages/react/src/Grid/Grid.tsx +++ b/packages/react/src/Grid/Grid.tsx @@ -11,11 +11,11 @@ import { paddingClasses } from './paddingClasses' export type GridNarrowColumnNumber = 1 | 2 | 3 | 4 export type GridMediumColumnNumber = GridNarrowColumnNumber | 5 | 6 | 7 | 8 -export type GridColumnNumber = GridMediumColumnNumber | 9 | 10 | 11 | 12 +export type GridWideColumnNumber = GridMediumColumnNumber | 9 | 10 | 11 | 12 export type GridColumnNumbers = { narrow: GridNarrowColumnNumber medium: GridMediumColumnNumber - wide: GridColumnNumber + wide: GridWideColumnNumber } export type GridPaddingSize = 'small' | 'medium' | 'large' diff --git a/packages/react/src/Grid/GridCell.tsx b/packages/react/src/Grid/GridCell.tsx index 88ce51ade1..626cba8f22 100644 --- a/packages/react/src/Grid/GridCell.tsx +++ b/packages/react/src/Grid/GridCell.tsx @@ -5,7 +5,7 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { HTMLAttributes, PropsWithChildren } from 'react' -import type { GridColumnNumber, GridColumnNumbers } from './Grid' +import type { GridColumnNumbers, GridMediumColumnNumber, GridNarrowColumnNumber, GridWideColumnNumber } from './Grid' import { gridCellClasses } from './gridCellClasses' type GridCellSpanAllProp = { @@ -16,9 +16,9 @@ type GridCellSpanAllProp = { type GridCellSpanAndStartProps = { /** The amount of grid columns the cell spans. */ - span?: GridColumnNumber | GridColumnNumbers + span?: GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers /** The index of the grid column the cell starts at. */ - start?: GridColumnNumber | GridColumnNumbers + start?: GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers } export type GridCellProps = { diff --git a/packages/react/src/Grid/gridCellClasses.ts b/packages/react/src/Grid/gridCellClasses.ts index 43dbe55c15..53e36cbe2c 100644 --- a/packages/react/src/Grid/gridCellClasses.ts +++ b/packages/react/src/Grid/gridCellClasses.ts @@ -3,11 +3,12 @@ * Copyright Gemeente Amsterdam */ +import type { GridColumnNumbers, GridMediumColumnNumber, GridNarrowColumnNumber, GridWideColumnNumber } from './Grid' import type { GridCellProps } from './GridCell' export const addGridClass = ( prefix: string, - value?: number | { narrow: number; medium: number; wide: number } | 'all', + value?: GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers | 'all', ): string[] => { if (value === 'all' || typeof value === 'number') { return [`${prefix}${value}`] diff --git a/packages/react/src/Grid/index.ts b/packages/react/src/Grid/index.ts index 0d8979c3b0..d9647b3786 100644 --- a/packages/react/src/Grid/index.ts +++ b/packages/react/src/Grid/index.ts @@ -1,3 +1,9 @@ export { Grid } from './Grid' -export type { GridProps, GridColumnNumber, GridColumnNumbers } from './Grid' +export type { + GridColumnNumbers, + GridMediumColumnNumber, + GridNarrowColumnNumber, + GridProps, + GridWideColumnNumber, +} from './Grid' export type { GridCellProps } from './GridCell' From aa62efb45485687b02e048096becb6acbc22a6f5 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Wed, 16 Oct 2024 15:45:18 +0200 Subject: [PATCH 4/8] refactor(ts): enumerate and exclusive range --- packages/react/src/Breakout/BreakoutCell.tsx | 11 +++-------- .../react/src/Breakout/breakoutCellClasses.ts | 2 +- packages/react/src/Grid/Grid.tsx | 16 ++++++++++------ packages/react/src/Grid/GridCell.tsx | 6 +++--- packages/react/src/Grid/gridCellClasses.ts | 7 ++----- packages/react/src/Grid/index.ts | 8 +------- 6 files changed, 20 insertions(+), 30 deletions(-) diff --git a/packages/react/src/Breakout/BreakoutCell.tsx b/packages/react/src/Breakout/BreakoutCell.tsx index 9b4bfb9ec6..76855d267b 100644 --- a/packages/react/src/Breakout/BreakoutCell.tsx +++ b/packages/react/src/Breakout/BreakoutCell.tsx @@ -7,12 +7,7 @@ import { forwardRef } from 'react' import type { HTMLAttributes, PropsWithChildren } from 'react' import type { BreakoutRowNumber, BreakoutRowNumbers } from './Breakout' import { breakoutCellClasses } from './breakoutCellClasses' -import type { - GridColumnNumbers, - GridMediumColumnNumber, - GridNarrowColumnNumber, - GridWideColumnNumber, -} from '../Grid/Grid' +import type { GridColumnNumber, GridColumnNumbers } from '../Grid/Grid' type BreakoutCellSpanAllProp = { /** Lets the cell span the full width of all grid variants. */ @@ -26,9 +21,9 @@ type BreakoutCellSpanAllProp = { type BreakoutCellSpanAndStartProps = { /** The amount of grid columns the cell spans. */ - colSpan?: 'all' | GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers + colSpan?: 'all' | GridColumnNumber | GridColumnNumbers /** The index of the grid column the cell starts at. */ - colStart?: GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers + colStart?: GridColumnNumber | GridColumnNumbers has?: 'figure' } diff --git a/packages/react/src/Breakout/breakoutCellClasses.ts b/packages/react/src/Breakout/breakoutCellClasses.ts index 75bb0e92ed..b0aa50f687 100644 --- a/packages/react/src/Breakout/breakoutCellClasses.ts +++ b/packages/react/src/Breakout/breakoutCellClasses.ts @@ -9,7 +9,7 @@ import { addGridClass } from '../Grid/gridCellClasses' export const breakoutCellClasses = ( colSpan?: BreakoutCellProps['colSpan'], colStart?: BreakoutCellProps['colStart'], - rowSpan?: BreakoutCellProps['rowSpan'], + rowSpan?: BreakoutCellProps['rowSpan'] | 'all', rowStart?: BreakoutCellProps['rowStart'], ): string[] => [ ...addGridClass('ams-breakout__cell--col-span-', colSpan), diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx index 1944db92fa..566cda6619 100644 --- a/packages/react/src/Grid/Grid.tsx +++ b/packages/react/src/Grid/Grid.tsx @@ -9,13 +9,17 @@ import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' import { GridCell } from './GridCell' import { paddingClasses } from './paddingClasses' -export type GridNarrowColumnNumber = 1 | 2 | 3 | 4 -export type GridMediumColumnNumber = GridNarrowColumnNumber | 5 | 6 | 7 | 8 -export type GridWideColumnNumber = GridMediumColumnNumber | 9 | 10 | 11 | 12 +type Enumerate = Acc['length'] extends N + ? Acc[number] + : Enumerate + +type Range = Exclude, Enumerate> + +export type GridColumnNumber = Range<1, 13> export type GridColumnNumbers = { - narrow: GridNarrowColumnNumber - medium: GridMediumColumnNumber - wide: GridWideColumnNumber + narrow: Range<1, 5> + medium: Range<1, 9> + wide: Range<1, 13> } export type GridPaddingSize = 'small' | 'medium' | 'large' diff --git a/packages/react/src/Grid/GridCell.tsx b/packages/react/src/Grid/GridCell.tsx index 626cba8f22..88ce51ade1 100644 --- a/packages/react/src/Grid/GridCell.tsx +++ b/packages/react/src/Grid/GridCell.tsx @@ -5,7 +5,7 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { HTMLAttributes, PropsWithChildren } from 'react' -import type { GridColumnNumbers, GridMediumColumnNumber, GridNarrowColumnNumber, GridWideColumnNumber } from './Grid' +import type { GridColumnNumber, GridColumnNumbers } from './Grid' import { gridCellClasses } from './gridCellClasses' type GridCellSpanAllProp = { @@ -16,9 +16,9 @@ type GridCellSpanAllProp = { type GridCellSpanAndStartProps = { /** The amount of grid columns the cell spans. */ - span?: GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers + span?: GridColumnNumber | GridColumnNumbers /** The index of the grid column the cell starts at. */ - start?: GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers + start?: GridColumnNumber | GridColumnNumbers } export type GridCellProps = { diff --git a/packages/react/src/Grid/gridCellClasses.ts b/packages/react/src/Grid/gridCellClasses.ts index 53e36cbe2c..056d132b83 100644 --- a/packages/react/src/Grid/gridCellClasses.ts +++ b/packages/react/src/Grid/gridCellClasses.ts @@ -3,13 +3,10 @@ * Copyright Gemeente Amsterdam */ -import type { GridColumnNumbers, GridMediumColumnNumber, GridNarrowColumnNumber, GridWideColumnNumber } from './Grid' +import type { GridColumnNumber, GridColumnNumbers } from './Grid' import type { GridCellProps } from './GridCell' -export const addGridClass = ( - prefix: string, - value?: GridNarrowColumnNumber | GridMediumColumnNumber | GridWideColumnNumber | GridColumnNumbers | 'all', -): string[] => { +export const addGridClass = (prefix: string, value?: GridColumnNumber | GridColumnNumbers | 'all'): string[] => { if (value === 'all' || typeof value === 'number') { return [`${prefix}${value}`] } else if (value) { diff --git a/packages/react/src/Grid/index.ts b/packages/react/src/Grid/index.ts index d9647b3786..4cd42ca193 100644 --- a/packages/react/src/Grid/index.ts +++ b/packages/react/src/Grid/index.ts @@ -1,9 +1,3 @@ export { Grid } from './Grid' -export type { - GridColumnNumbers, - GridMediumColumnNumber, - GridNarrowColumnNumber, - GridProps, - GridWideColumnNumber, -} from './Grid' +export type { GridColumnNumber, GridColumnNumbers, GridProps } from './Grid' export type { GridCellProps } from './GridCell' From 2bcc58e0e80c43dc7339c2b589096e4940c64c98 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Wed, 16 Oct 2024 17:16:52 +0200 Subject: [PATCH 5/8] =?UTF-8?q?chore(ts):=20=F0=9F=97=91=EF=B8=8F=20remove?= =?UTF-8?q?=20unneeded=20type?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react/src/Breakout/breakoutCellClasses.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Breakout/breakoutCellClasses.ts b/packages/react/src/Breakout/breakoutCellClasses.ts index b0aa50f687..75bb0e92ed 100644 --- a/packages/react/src/Breakout/breakoutCellClasses.ts +++ b/packages/react/src/Breakout/breakoutCellClasses.ts @@ -9,7 +9,7 @@ import { addGridClass } from '../Grid/gridCellClasses' export const breakoutCellClasses = ( colSpan?: BreakoutCellProps['colSpan'], colStart?: BreakoutCellProps['colStart'], - rowSpan?: BreakoutCellProps['rowSpan'] | 'all', + rowSpan?: BreakoutCellProps['rowSpan'], rowStart?: BreakoutCellProps['rowStart'], ): string[] => [ ...addGridClass('ams-breakout__cell--col-span-', colSpan), From c95e2d70bc07c41ed398ffba3ef5db84ab4decfa Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Wed, 16 Oct 2024 17:22:44 +0200 Subject: [PATCH 6/8] refactor(ts): use Range in Breakout --- packages/react/src/Breakout/Breakout.tsx | 4 ++-- packages/react/src/Grid/Grid.tsx | 2 +- packages/react/src/Grid/index.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/Breakout/Breakout.tsx b/packages/react/src/Breakout/Breakout.tsx index cf670797dd..d9db90b523 100644 --- a/packages/react/src/Breakout/Breakout.tsx +++ b/packages/react/src/Breakout/Breakout.tsx @@ -7,10 +7,10 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { ForwardedRef } from 'react' import { BreakoutCell } from './BreakoutCell' -import type { GridProps } from '../Grid' +import type { GridProps, Range } from '../Grid' import { paddingClasses } from '../Grid/paddingClasses' -export type BreakoutRowNumber = 1 | 2 | 3 | 4 +export type BreakoutRowNumber = Range<1, 5> export type BreakoutRowNumbers = { narrow: BreakoutRowNumber; medium: BreakoutRowNumber; wide: BreakoutRowNumber } export type BreakoutProps = GridProps diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx index 566cda6619..04942904cb 100644 --- a/packages/react/src/Grid/Grid.tsx +++ b/packages/react/src/Grid/Grid.tsx @@ -13,7 +13,7 @@ type Enumerate = Acc['length'] exte ? Acc[number] : Enumerate -type Range = Exclude, Enumerate> +export type Range = Exclude, Enumerate> export type GridColumnNumber = Range<1, 13> export type GridColumnNumbers = { diff --git a/packages/react/src/Grid/index.ts b/packages/react/src/Grid/index.ts index 4cd42ca193..79f17818db 100644 --- a/packages/react/src/Grid/index.ts +++ b/packages/react/src/Grid/index.ts @@ -1,3 +1,3 @@ export { Grid } from './Grid' -export type { GridColumnNumber, GridColumnNumbers, GridProps } from './Grid' +export type { GridColumnNumber, GridColumnNumbers, GridProps, Range } from './Grid' export type { GridCellProps } from './GridCell' From d5bcbeaea82401197c017027bb9f7112f894fdb3 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Thu, 17 Oct 2024 09:49:04 +0200 Subject: [PATCH 7/8] refactor(ts): KISS --- packages/react/src/Grid/Grid.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx index 04942904cb..1bd23eb7c5 100644 --- a/packages/react/src/Grid/Grid.tsx +++ b/packages/react/src/Grid/Grid.tsx @@ -9,17 +9,11 @@ import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' import { GridCell } from './GridCell' import { paddingClasses } from './paddingClasses' -type Enumerate = Acc['length'] extends N - ? Acc[number] - : Enumerate - -export type Range = Exclude, Enumerate> - -export type GridColumnNumber = Range<1, 13> +export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 export type GridColumnNumbers = { - narrow: Range<1, 5> - medium: Range<1, 9> - wide: Range<1, 13> + narrow: 1 | 2 | 3 | 4 + medium: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 + wide: GridColumnNumber } export type GridPaddingSize = 'small' | 'medium' | 'large' From 77b7a4f3190a9ec67533b454d98745f5ff1af898 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Thu, 17 Oct 2024 09:49:04 +0200 Subject: [PATCH 8/8] refactor(ts): KISS --- packages/react/src/Breakout/Breakout.tsx | 4 ++-- packages/react/src/Grid/Grid.tsx | 14 ++++---------- packages/react/src/Grid/index.ts | 2 +- 3 files changed, 7 insertions(+), 13 deletions(-) diff --git a/packages/react/src/Breakout/Breakout.tsx b/packages/react/src/Breakout/Breakout.tsx index d9db90b523..cf670797dd 100644 --- a/packages/react/src/Breakout/Breakout.tsx +++ b/packages/react/src/Breakout/Breakout.tsx @@ -7,10 +7,10 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { ForwardedRef } from 'react' import { BreakoutCell } from './BreakoutCell' -import type { GridProps, Range } from '../Grid' +import type { GridProps } from '../Grid' import { paddingClasses } from '../Grid/paddingClasses' -export type BreakoutRowNumber = Range<1, 5> +export type BreakoutRowNumber = 1 | 2 | 3 | 4 export type BreakoutRowNumbers = { narrow: BreakoutRowNumber; medium: BreakoutRowNumber; wide: BreakoutRowNumber } export type BreakoutProps = GridProps diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx index 04942904cb..1bd23eb7c5 100644 --- a/packages/react/src/Grid/Grid.tsx +++ b/packages/react/src/Grid/Grid.tsx @@ -9,17 +9,11 @@ import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' import { GridCell } from './GridCell' import { paddingClasses } from './paddingClasses' -type Enumerate = Acc['length'] extends N - ? Acc[number] - : Enumerate - -export type Range = Exclude, Enumerate> - -export type GridColumnNumber = Range<1, 13> +export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 export type GridColumnNumbers = { - narrow: Range<1, 5> - medium: Range<1, 9> - wide: Range<1, 13> + narrow: 1 | 2 | 3 | 4 + medium: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 + wide: GridColumnNumber } export type GridPaddingSize = 'small' | 'medium' | 'large' diff --git a/packages/react/src/Grid/index.ts b/packages/react/src/Grid/index.ts index 79f17818db..4cd42ca193 100644 --- a/packages/react/src/Grid/index.ts +++ b/packages/react/src/Grid/index.ts @@ -1,3 +1,3 @@ export { Grid } from './Grid' -export type { GridColumnNumber, GridColumnNumbers, GridProps, Range } from './Grid' +export type { GridColumnNumber, GridColumnNumbers, GridProps } from './Grid' export type { GridCellProps } from './GridCell'