TypeScript

.storybook/config.js → .storybook/config.ts

@@ -1,8 +1,8 @@
 import { configure } from "@storybook/react";
 
 function loadStories() {
-	require("../packages/button/stories.jsx");
-	require("../packages/radio/stories.jsx");
+	require("../packages/button/stories.tsx");
+	require("../packages/radio/stories.tsx");
 }
 
 configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,17 @@
+module.exports = ({ config, mode }) => {
+	//Get TypeScript working via babel preset
+	config.module.rules.push({
+		test: /\.(ts|tsx)$/,
+		loader: require.resolve("babel-loader"),
+		options: {
+			presets: [
+				"@babel/preset-env",
+				"@babel/preset-typescript",
+				"@emotion/babel-preset-css-prop"
+			]
+		}
+	});
+	config.resolve.extensions.push(".ts", ".tsx");
+
+	return config;
+};

package.json

@@ -2,10 +2,11 @@
 	"name": "source-components",
 	"version": "0.0.1",
 	"scripts": {
-		"storybook": "yarn watch:foundations & start-storybook",
+		"storybook": "yarn watch:foundations & yarn watch:svgs & start-storybook",
 		"build:storybook": "build-storybook -o dist",
 		"build:foundations": "cd packages/foundations && yarn build",
 		"watch:foundations": "cd packages/foundations && yarn watch",
+		"watch:svgs": "cd packages/svgs && yarn watch",
 		"build:svgs": "cd packages/svgs && yarn build",
 		"build:button": "cd packages/button && yarn build",
 		"build:radio": "cd packages/radio && yarn build",
@@ -19,14 +20,16 @@
 	"devDependencies": {
 		"@babel/core": "^7.5.5",
 		"@babel/preset-env": "^7.5.5",
+		"@babel/preset-typescript": "^7.3.3",
 		"@emotion/babel-preset-css-prop": "^10.0.14",
 		"@emotion/core": "^10.0.14",
 		"@storybook/addon-backgrounds": "^5.1.10",
 		"@storybook/react": "^5.1.9",
+		"@types/react": "^16.9.2",
+		"@types/storybook__react": "^4.0.2",
 		"babel-loader": "^8.0.6",
 		"gh-pages": "^2.0.1",
 		"react": "^16.8.6",
 		"react-dom": "^16.8.6"
-	},
-	"dependencies": {}
+	}
 }

packages/button/.babelrc.js

@@ -1,6 +1,7 @@
 module.exports = {
 	presets: [
 		"@babel/preset-env",
+		"@babel/preset-typescript",
 		"@babel/preset-react",
 		["@emotion/babel-preset-css-prop", { sourceMap: false }]
 	]

packages/button/button.jsx → packages/button/button.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { SvgArrowRightStraight } from "@guardian/src-svgs/arrow-right-straight";
+import React, { ReactElement, ReactNode } from "react";
+import { SvgArrowRightStraight } from "@guardian/src-svgs";
 import {
 	button,
 	primary,
@@ -23,6 +23,11 @@ const Button = ({
 	iconSide,
 	children,
 	...props
+}: {
+	appearance: "primary" | "secondary";
+	icon: ReactElement;
+	iconSide: "left" | "right";
+	children: ReactNode;
 }) => {
 	return (
 		<button

packages/button/package.json

@@ -11,8 +11,8 @@
 		"@babel/core": "^7.5.5",
 		"@babel/preset-env": "^7.5.5",
 		"@babel/preset-react": "^7.0.0",
+		"@babel/preset-typescript": "^7.3.3",
 		"@emotion/babel-preset-css-prop": "^10.0.14",
-		"@guardian/src-svgs": "^0.0.1",
 		"rollup": "^1.17.0",
 		"rollup-plugin-babel": "^4.3.3",
 		"rollup-plugin-commonjs": "^10.0.2",
@@ -27,6 +27,8 @@
 		"react": "^16.8.6"
 	},
 	"dependencies": {
-		"@guardian/src-helpers": "^0.0.1"
+		"@guardian/src-foundations": "^0.0.5",
+		"@guardian/src-helpers": "^0.0.1",
+		"@guardian/src-svgs": "^0.0.2"
 	}
 }

packages/button/rollup.config.js

@@ -2,18 +2,20 @@ import babel from "rollup-plugin-babel";
 import resolve from "rollup-plugin-node-resolve";
 import commonjs from "rollup-plugin-commonjs";
 
+const extensions = [".ts", ".tsx"];
+
 module.exports = {
-	input: "button.jsx",
-	output: {
-		file: "dist/button.js",
-		format: "cjs"
-	},
+	input: "button.tsx",
+	output: [
+		{
+			file: "dist/button.js",
+			format: "cjs"
+		},
+		{
+			file: "dist/button.esm.js",
+			format: "esm"
+		}
+	],
 	external: ["react", "@emotion/core", "@emotion/css"],
-	plugins: [
-		babel(),
-		resolve({
-			extensions: [".js", ".jsx"]
-		}),
-		commonjs()
-	]
+	plugins: [babel({ extensions }), resolve({ extensions }), commonjs()]
 };

packages/foundations/.babelrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-	presets: ["@babel/preset-env"]
+	presets: ["@babel/preset-env", "@babel/preset-typescript"]
 };

packages/foundations/media-queries.js → packages/foundations/media-queries.ts

@@ -10,9 +10,9 @@ const mediaQueryMinimums = {
 	wide: breakpoints[3]
 };
 
-const minWidth = value => `@media (min-width: ${value}px)`;
-const maxWidth = value => `@media (max-width: ${value - 1}px)`;
-const minWidthMaxWidth = (from, until) =>
+const minWidth = (value: number) => `@media (min-width: ${value}px)`;
+const maxWidth = (value: number) => `@media (max-width: ${value - 1}px)`;
+const minWidthMaxWidth = (from: number, until: number) =>
 	`@media (min-width: ${`${from}px`}) and (max-width: ${`${until - 1}px`})`;
 
 const mq = ({ from, until }) => {

packages/foundations/package.json

@@ -2,26 +2,29 @@
 	"name": "@guardian/src-foundations",
 	"version": "0.0.5",
 	"main": "dist/foundations.js",
+	"module": "dist/foundations.esm.js",
 	"scripts": {
 		"build": "rollup --config",
 		"watch": "rollup --config --watch",
 		"clean": "rm -rf dist",
 		"prepublish": "yarn build"
 	},
 	"files": [
-		"animation.js",
-		"helpers.js",
-		"index.js",
-		"media-queries.js",
-		"palette.js",
-		"size.js",
-		"space.js",
-		"theme.js",
-		"typography.js"
+		"animation.ts",
+		"helpers.ts",
+		"index.ts",
+		"media-queries.ts",
+		"palette.ts",
+		"size.ts",
+		"space.ts",
+		"theme.ts",
+		"typography.ts"
 	],
-	"dependencies": {
+	"devDependencies": {
 		"@babel/preset-env": "^7.5.5",
+		"@babel/preset-typescript": "^7.3.3",
 		"rollup": "^1.19.4",
-		"rollup-plugin-babel": "^4.3.3"
+		"rollup-plugin-babel": "^4.3.3",
+		"rollup-plugin-node-resolve": "^5.2.0"
 	}
 }

packages/foundations/rollup.config.js

@@ -1,10 +1,19 @@
 import babel from "rollup-plugin-babel";
+import resolve from "rollup-plugin-node-resolve";
+
+const extensions = [".ts", ".tsx"];
 
 module.exports = {
-	input: "index.js",
-	output: {
-		file: "dist/foundations.js",
-		format: "cjs"
-	},
-	plugins: [babel()]
+	input: "index.ts",
+	output: [
+		{
+			file: "dist/foundations.js",
+			format: "cjs"
+		},
+		{
+			file: "dist/foundations.esm.js",
+			format: "esm"
+		}
+	],
+	plugins: [babel({ extensions }), resolve({ extensions })]
 };

packages/foundations/typography.js → packages/foundations/typography.ts

@@ -1,5 +1,9 @@
 import { fontSizes, fonts, lineHeights, fontWeights } from "./theme";
 
+type Category = "headline" | "body" | "textSans";
+type LineHeight = "tight" | "regular" | "loose";
+type FontWeight = "light" | "regular" | "medium" | "bold";
+
 const headlineSizes = {
 	1: fontSizes[2],
 	2: fontSizes[3],
@@ -29,25 +33,29 @@ const textSansSizes = {
 	10: fontSizes[9]
 };
 
-const fontSizeMapping = {
+const fontSizeMapping: { [cat in Category]: { [level in number]: number } } = {
 	headline: headlineSizes,
 	body: bodySizes,
 	textSans: textSansSizes
 };
 
-const fontMapping = {
+const fontMapping: { [cat in Category]: string } = {
 	headline: fonts.headlineSerif,
 	body: fonts.bodySerif,
 	textSans: fonts.bodySans
 };
 
-const lineHeightMapping = {
+const lineHeightMapping: { [lineHight in LineHeight]: string } = {
 	tight: lineHeights[0],
 	regular: lineHeights[1],
 	loose: lineHeights[2]
 };
 
-const fontWeightMapping = {
+const fontWeightMapping: {
+	[cat in Category]: {
+		[fontWeight in FontWeight]?: { fontWeight: number; hasItalic: boolean }
+	}
+} = {
 	headline: {
 		light: {
 			fontWeight: fontWeights[0],
@@ -84,7 +92,17 @@ const fontWeightMapping = {
 	}
 };
 
-const fs = ({ category, level, lineHeight, fontWeight }) => {
+const fs = ({
+	category,
+	level,
+	lineHeight,
+	fontWeight
+}: {
+	category: Category;
+	level: number;
+	lineHeight: LineHeight;
+	fontWeight: FontWeight;
+}) => {
 	// Gosh there's a lot of flaky logic here! We need to think about
 	// what happens if a value is not found. Maybe a big try / catch?
 	const fontFamilyValue = fontMapping[category];
@@ -100,13 +118,30 @@ const fs = ({ category, level, lineHeight, fontWeight }) => {
 	`;
 };
 
-const headline = ({ level, lineHeight = "tight", fontWeight = "medium" }) =>
+interface FontScaleArgs {
+	level: number;
+	lineHeight?: LineHeight;
+	fontWeight?: FontWeight;
+}
+
+const headline = ({
+	level,
+	lineHeight = "tight",
+	fontWeight = "medium"
+}: FontScaleArgs) =>
 	fs({ category: "headline", level, lineHeight, fontWeight });
 
-const body = ({ level, lineHeight = "loose", fontWeight = "regular" }) =>
-	fs({ category: "body", level, lineHeight, fontWeight });
+const body = ({
+	level,
+	lineHeight = "loose",
+	fontWeight = "regular"
+}: FontScaleArgs) => fs({ category: "body", level, lineHeight, fontWeight });
 
-const textSans = ({ level, lineHeight = "loose", fontWeight = "regular" }) =>
+const textSans = ({
+	level,
+	lineHeight = "loose",
+	fontWeight = "regular"
+}: FontScaleArgs) =>
 	fs({ category: "textSans", level, lineHeight, fontWeight });
 
 Object.freeze(headlineSizes);

packages/radio/.babelrc.js

@@ -2,6 +2,7 @@ module.exports = {
 	presets: [
 		"@babel/preset-env",
 		"@babel/preset-react",
+		"@babel/preset-typescript",
 		["@emotion/babel-preset-css-prop", { sourceMap: false }]
 	]
 };

packages/radio/package.json

@@ -2,6 +2,7 @@
 	"name": "@guardian/src-radio",
 	"version": "0.0.3",
 	"main": "dist/radio.js",
+	"module": "dist/radio.esm.js",
 	"scripts": {
 		"build": "rollup --config",
 		"clean": "rm -rf dist",
@@ -11,6 +12,7 @@
 		"@babel/core": "^7.5.5",
 		"@babel/preset-env": "^7.5.5",
 		"@babel/preset-react": "^7.0.0",
+		"@babel/preset-typescript": "^7.3.3",
 		"@emotion/babel-preset-css-prop": "^10.0.14",
 		"@guardian/src-helpers": "^0.0.1",
 		"rollup": "^1.17.0",
@@ -19,8 +21,8 @@
 		"rollup-plugin-node-resolve": "^5.2.0"
 	},
 	"files": [
-		"radio.jsx",
-		"styles.js"
+		"radio.tsx",
+		"styles.ts"
 	],
 	"peerDependencies": {
 		"@emotion/core": "^10.0.14",