Skip to content

Commit c1f8486

Browse files
adamalstonadamalston
authored
feat: migrate @carbon/layout to TypeScript (#22002)
1 parent 78d4931 commit c1f8486

7 files changed

Lines changed: 60 additions & 40 deletions

File tree

‎packages/layout/package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"version": "11.51.0",
55
"license": "Apache-2.0",
66
"main": "lib/index.js",
7+
"types": "lib/index.d.ts",
78
"module": "es/index.js",
89
"sass": "index.scss",
910
"repository": {
@@ -26,7 +27,8 @@
2627
"provenance": true
2728
},
2829
"scripts": {
29-
"build": "yarn clean && carbon-cli bundle src/index.js --name CarbonLayout && node tasks/build.js",
30+
"build:types": "tsc -p tsconfig.types.json",
31+
"build": "yarn clean && carbon-cli bundle src/index.ts --name CarbonLayout && node tasks/build.js && yarn build:types",
3032
"clean": "rimraf es lib umd scss/generated",
3133
"postinstall": "ibmtelemetry --config=telemetry.yml"
3234
},
@@ -36,7 +38,9 @@
3638
"@carbon/scss-generator": "^10.20.0",
3739
"@carbon/test-utils": "^10.41.0",
3840
"core-js": "^3.16.0",
39-
"rimraf": "^6.0.1"
41+
"rimraf": "^6.0.1",
42+
"typescript": "^5.7.3",
43+
"typescript-config-carbon": "workspace:^0.9.0"
4044
},
4145
"dependencies": {
4246
"@ibm/telemetry-js": "^1.5.0"

packages/layout/src/index.js renamed to packages/layout/src/index.ts

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,47 @@
11
/**
2-
* Copyright IBM Corp. 2018, 2023
2+
* Copyright IBM Corp. 2018, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import { unstable_tokens } from './tokens.js';
8+
import { unstable_tokens } from './tokens';
99

1010
export { unstable_tokens };
1111

12+
export type BreakpointName = 'sm' | 'md' | 'lg' | 'xlg' | 'max';
13+
export type Breakpoint = {
14+
width: string;
15+
columns: number;
16+
margin: string;
17+
};
18+
export type SizeName =
19+
| 'XSmall'
20+
| 'Small'
21+
| 'Medium'
22+
| 'Large'
23+
| 'XLarge'
24+
| '2XLarge';
25+
1226
// Convert
1327
// Default, Use with em() and rem() functions
1428
export const baseFontSize = 16;
1529

16-
/**
17-
* Convert a given px unit to a rem unit
18-
* @param {number} px
19-
* @returns {string}
20-
*/
21-
export function rem(px) {
30+
export const rem = (px: number) => {
2231
return `${px / baseFontSize}rem`;
23-
}
32+
};
2433

25-
/**
26-
* Convert a given px unit to a em unit
27-
* @param {number} px
28-
* @returns {string}
29-
*/
30-
export function em(px) {
34+
export const em = (px: number) => {
3135
return `${px / baseFontSize}em`;
32-
}
36+
};
3337

34-
/**
35-
* Convert a given px unit to its string representation
36-
* @param {number} value - number of pixels
37-
* @returns {string}
38-
*/
39-
export function px(value) {
38+
export const px = (value: number) => {
4039
return `${value}px`;
41-
}
40+
};
4241

4342
// Breakpoint
4443
// Initial map of our breakpoints and their values
45-
export const breakpoints = {
44+
export const breakpoints: Record<BreakpointName, Breakpoint> = {
4645
sm: {
4746
width: rem(320),
4847
columns: 4,
@@ -70,24 +69,22 @@ export const breakpoints = {
7069
},
7170
};
7271

73-
export function breakpointUp(name) {
72+
export const breakpointUp = (name: BreakpointName) => {
7473
return `@media (min-width: ${breakpoints[name].width})`;
75-
}
74+
};
7675

77-
export function breakpointDown(name) {
76+
export const breakpointDown = (name: BreakpointName) => {
7877
return `@media (max-width: ${breakpoints[name].width})`;
79-
}
78+
};
8079

81-
export function breakpoint(...args) {
82-
return breakpointUp(...args);
83-
}
80+
export const breakpoint = breakpointUp;
8481

8582
// Mini-unit
8683
export const miniUnit = 8;
8784

88-
export function miniUnits(count) {
85+
export const miniUnits = (count: number) => {
8986
return rem(miniUnit * count);
90-
}
87+
};
9188

9289
// Spacing
9390
export const spacing01 = miniUnits(0.25);
@@ -169,7 +166,7 @@ export const sizeMedium = rem(40);
169166
export const sizeLarge = rem(48);
170167
export const sizeXLarge = rem(64);
171168
export const size2XLarge = rem(80);
172-
export const sizes = {
169+
export const sizes: Record<SizeName, string> = {
173170
XSmall: sizeXSmall,
174171
Small: sizeSmall,
175172
Medium: sizeMedium,

packages/layout/src/tokens.js renamed to packages/layout/src/tokens.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2018, 2023
2+
* Copyright IBM Corp. 2018, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -53,4 +53,4 @@ export const unstable_tokens = [
5353
'layout05',
5454
'layout06',
5555
'layout07',
56-
];
56+
] as const;

‎packages/layout/tasks/build.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2015, 2025
2+
* Copyright IBM Corp. 2015, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -20,7 +20,7 @@ import {
2020
fluidSpacing,
2121
sizes,
2222
layout,
23-
} from '../src/index.js';
23+
} from '../es/index.js';
2424

2525
const __filename = fileURLToPath(import.meta.url);
2626
const __dirname = path.dirname(__filename);

‎packages/layout/tsconfig.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "typescript-config-carbon/tsconfig.base.json",
3+
"compilerOptions": {
4+
"declaration": false,
5+
"emitDeclarationOnly": false
6+
},
7+
"include": ["src/**/*"]
8+
}

‎packages/layout/tsconfig.types.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"declaration": true,
5+
"emitDeclarationOnly": true,
6+
"declarationDir": "./lib"
7+
},
8+
"include": ["src/**/*"]
9+
}

‎yarn.lock‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1865,6 +1865,8 @@ __metadata:
18651865
"@ibm/telemetry-js": "npm:^1.5.0"
18661866
core-js: "npm:^3.16.0"
18671867
rimraf: "npm:^6.0.1"
1868+
typescript: "npm:^5.7.3"
1869+
typescript-config-carbon: "workspace:^0.9.0"
18681870
languageName: unknown
18691871
linkType: soft
18701872

0 commit comments

Comments
 (0)