diff --git a/.eslintrc.json b/.eslintrc.json index 34303b552..46acff939 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -12,7 +12,8 @@ "prettier/prettier": "error", "@typescript-eslint/explicit-module-boundary-types": "off", "@typescript-eslint/no-unused-vars": "off", - "jsx-a11y/label-has-for": "off" + "jsx-a11y/label-has-for": "off", + "react/react-in-jsx-scope": "off" }, "parserOptions": { "ecmaFeatures": { diff --git a/package.json b/package.json index 57a662c67..ef99f7c99 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "workspaces": [ "src/core/*", "src/core/components/*", - "src/editorial/web/*", + "src/editorial/web", "src/editorial/web/components/*" ], "scripts": { @@ -23,9 +23,9 @@ "release:major:all": "yarn build:all && yarn validate && yarn verbump:major:all && yarn publish:release", "release:minor:all": "yarn build:all && yarn validate && yarn verbump:minor:all && yarn publish:release", "release:patch:all": "yarn build:all && yarn validate && yarn verbump:patch:all && yarn publish:release", - "release:prerelease-bump:all": "yarn build:all && yarn validate && yarn verbump:prerelease:all && yarn publish:release", - "release:prerelease:all": "yarn build:all && yarn validate && yarn publish:release", - "storybook": "yarn watch:foundations & yarn watch:icons & start-storybook", + "release:prerelease-bump:all": "yarn validate && yarn verbump:prerelease:all && yarn publish:release", + "release:prerelease:all": "yarn validate && yarn publish:release", + "storybook": "start-storybook", "tag:beta:all": "ts-node ./scripts/tag-beta-all", "test": "jest", "tsc": "tsc", diff --git a/scripts/build-all.ts b/scripts/build-all.ts index 0934de1ce..086f7f4b4 100644 --- a/scripts/build-all.ts +++ b/scripts/build-all.ts @@ -1,8 +1,12 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ + import execa, { ExecaReturnValue } from 'execa'; import { paths, getComponentPaths } from './paths'; const build = (dir: string) => { - return execa('yarn', ['--cwd', `${dir}`, 'run', 'build'], { + console.log(`\nBuilding ${require(`${dir}/package.json`).name}`); + + return execa('yarn', ['--cwd', dir, 'run', 'build'], { stdio: 'inherit', }); }; diff --git a/src/core/brand/.babelrc.js b/src/core/brand/.babelrc.js deleted file mode 100644 index a063f10e5..000000000 --- a/src/core/brand/.babelrc.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - presets: [ - '@babel/preset-env', - '@babel/preset-typescript', - '@babel/preset-react', - ], -}; diff --git a/src/core/brand/.gitignore b/src/core/brand/.gitignore deleted file mode 100644 index cac77c749..000000000 --- a/src/core/brand/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -# Ignore built files -*.d.ts diff --git a/src/core/brand/guardian-live-logo.tsx b/src/core/brand/guardian-live-logo.tsx index b03bd391f..24ce42643 100644 --- a/src/core/brand/guardian-live-logo.tsx +++ b/src/core/brand/guardian-live-logo.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - export const SvgGuardianLiveLogo = () => { return ( diff --git a/src/core/brand/guardian-logo.tsx b/src/core/brand/guardian-logo.tsx index 6d8bbf06b..82f939ef0 100644 --- a/src/core/brand/guardian-logo.tsx +++ b/src/core/brand/guardian-logo.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - export const SvgGuardianLogo = () => { return ( diff --git a/src/core/brand/package.json b/src/core/brand/package.json index 9b05b895b..1628d35c5 100644 --- a/src/core/brand/package.json +++ b/src/core/brand/package.json @@ -6,22 +6,20 @@ "url": "https://github.com/guardian/source.git" }, "license": "Apache-2.0", - "main": "dist/index.js", - "module": "dist/index.esm.js", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/types/index.d.ts", "files": [ - "guardian-logo.tsx", - "guardian-live-logo.tsx", - "roundel.tsx", - "roundel-brand.tsx", - "roundel-brand-inverse.tsx", - "roundel-default.tsx", - "roundel-inverse.tsx", - "*.d.ts", - "dist/*.js" + "dist/esm", + "dist/cjs", + "dist/types" ], "scripts": { - "build": "yarn clean && tsc && rollup --config", - "clean": "rm -rf dist *.d.ts", + "build": "npm-run-all clean --parallel build:*", + "build:cjs": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/cjs --module commonjs", + "build:esm": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/esm --module ES6", + "build:types": "tsc -b", + "clean": "rm -rf dist", "prepublish": "yarn build", "publish:public": "yarn publish --access public", "verbump:major": "yarn version --major --no-git-tag-version", @@ -33,19 +31,11 @@ "watch": "rollup --config --watch" }, "devDependencies": { - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/preset-typescript": "^7.9.0", - "@emotion/react": "^11.1.2", - "@guardian/src-foundations": "^3.3.0-rc.0", - "@guardian/src-helpers": "^3.3.0-rc.0", - "rollup": "^1.17.0", - "rollup-plugin-babel": "^4.3.3", - "rollup-plugin-node-resolve": "^5.2.0", + "npm-run-all": "^4.1.5", "typescript": "^4.1.3" }, "peerDependencies": { + "@emotion/react": "^11.1.2", "@guardian/src-foundations": "^3.3.0-rc.0", "react": "^17.0.1" } diff --git a/src/core/brand/rollup.config.js b/src/core/brand/rollup.config.js deleted file mode 100644 index 4fb7adf98..000000000 --- a/src/core/brand/rollup.config.js +++ /dev/null @@ -1,26 +0,0 @@ -import babel from 'rollup-plugin-babel'; -import resolve from 'rollup-plugin-node-resolve'; - -const extensions = ['.ts', '.tsx']; - -module.exports = { - input: 'index.ts', - output: [ - { - file: 'dist/index.js', - format: 'cjs', - globals: { - react: 'React', - }, - }, - { - file: 'dist/index.esm.js', - format: 'esm', - globals: { - react: 'React', - }, - }, - ], - external: ['react'], - plugins: [babel({ extensions }), resolve({ extensions })], -}; diff --git a/src/core/brand/roundel-brand-inverse.tsx b/src/core/brand/roundel-brand-inverse.tsx index 1533a24d6..a1a883e73 100644 --- a/src/core/brand/roundel-brand-inverse.tsx +++ b/src/core/brand/roundel-brand-inverse.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { SvgRoundelFilled } from './roundel-filled'; import { brand } from '@guardian/src-foundations/palette'; diff --git a/src/core/brand/roundel-brand.tsx b/src/core/brand/roundel-brand.tsx index 519c49eb8..d6075f248 100644 --- a/src/core/brand/roundel-brand.tsx +++ b/src/core/brand/roundel-brand.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { SvgRoundelFilled } from './roundel-filled'; import { brand } from '@guardian/src-foundations/palette'; diff --git a/src/core/brand/roundel-default.tsx b/src/core/brand/roundel-default.tsx index e62d211b9..1cd9e6bfc 100644 --- a/src/core/brand/roundel-default.tsx +++ b/src/core/brand/roundel-default.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { SvgRoundelFilled } from './roundel-filled'; import { neutral } from '@guardian/src-foundations/palette'; diff --git a/src/core/brand/roundel-filled.tsx b/src/core/brand/roundel-filled.tsx index d4486a7dd..1295b9d00 100644 --- a/src/core/brand/roundel-filled.tsx +++ b/src/core/brand/roundel-filled.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - export const SvgRoundelFilled = ({ background, text, diff --git a/src/core/brand/roundel-inverse.tsx b/src/core/brand/roundel-inverse.tsx index 3e3ff54b6..ae8420731 100644 --- a/src/core/brand/roundel-inverse.tsx +++ b/src/core/brand/roundel-inverse.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { SvgRoundelFilled } from './roundel-filled'; import { neutral } from '@guardian/src-foundations/palette'; diff --git a/src/core/brand/roundel.tsx b/src/core/brand/roundel.tsx index ab4b774f7..d4326ea90 100644 --- a/src/core/brand/roundel.tsx +++ b/src/core/brand/roundel.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - // TODO: Deprecated. Please only use filled versions export const SvgRoundel = () => { return ( diff --git a/src/core/brand/tsconfig.json b/src/core/brand/tsconfig.json index 1699fdafd..a99425cae 100644 --- a/src/core/brand/tsconfig.json +++ b/src/core/brand/tsconfig.json @@ -1,12 +1,15 @@ { + "extends": "../../../tsconfig.json", "compilerOptions": { - "outDir": ".", + "outDir": "dist/types", "declaration": true, - "emitDeclarationOnly": true, - "jsx": "preserve", - "esModuleInterop": true, - "lib": ["es5", "es6", "es7", "es2017", "es2019", "dom"], - "types": ["@emotion/react/types/css-prop"] + "emitDeclarationOnly": true }, - "exclude": ["node_modules"] + "include": ["."], + "exclude": ["dist", "stories.tsx", "stories"], + "references": [ + { + "path": "../foundations" + } + ] } diff --git a/src/core/components/accordion/.babelrc.js b/src/core/components/accordion/.babelrc.js deleted file mode 100644 index 3ca6b812c..000000000 --- a/src/core/components/accordion/.babelrc.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - presets: [ - '@babel/preset-env', - '@babel/preset-typescript', - '@babel/preset-react', - '@emotion/babel-preset-css-prop', - ], -}; diff --git a/src/core/components/accordion/index.tsx b/src/core/components/accordion/index.tsx index cfbca7051..f801cc48d 100644 --- a/src/core/components/accordion/index.tsx +++ b/src/core/components/accordion/index.tsx @@ -1,4 +1,3 @@ -/// import React, { useState, useEffect, ReactElement, ReactNode } from 'react'; import { accordion, diff --git a/src/core/components/accordion/package.json b/src/core/components/accordion/package.json index 22931eecd..c8035b5ae 100644 --- a/src/core/components/accordion/package.json +++ b/src/core/components/accordion/package.json @@ -6,16 +6,19 @@ "url": "https://github.com/guardian/source.git" }, "license": "Apache-2.0", - "main": "dist/accordion.js", - "module": "dist/accordion.esm.js", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/types/index.d.ts", "files": [ - "dist/*.js", - "index.tsx", - "styles.ts", - "emotion.d.ts" + "dist/esm", + "dist/cjs", + "dist/types" ], "scripts": { - "build": "yarn clean && rollup --config", + "build": "npm-run-all clean --parallel build:*", + "build:cjs": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/cjs --module commonjs", + "build:esm": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/esm --module ES6", + "build:types": "tsc -b", "clean": "rm -rf dist", "prepublish": "yarn build", "publish:public": "yarn publish --access public", @@ -30,21 +33,13 @@ "@guardian/src-helpers": "^3.3.0-rc.0" }, "devDependencies": { - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/preset-typescript": "^7.9.0", - "@emotion/babel-preset-css-prop": "^11.0.0", - "@guardian/src-foundations": "^3.3.0-rc.0", - "@guardian/src-link": "^3.3.0-rc.0", - "rollup": "^1.17.0", - "rollup-plugin-babel": "^4.3.3", - "rollup-plugin-commonjs": "^10.0.2", - "rollup-plugin-node-resolve": "^5.2.0" + "npm-run-all": "^4.1.5", + "typescript": "^4.1.3" }, "peerDependencies": { "@emotion/react": "^11.1.2", "@guardian/src-foundations": "^3.3.0-rc.0", + "@guardian/src-icons": "^3.3.0-rc.0", "react": "^17.0.1" } } diff --git a/src/core/components/accordion/rollup.config.js b/src/core/components/accordion/rollup.config.js deleted file mode 100644 index af2a21442..000000000 --- a/src/core/components/accordion/rollup.config.js +++ /dev/null @@ -1,32 +0,0 @@ -import babel from 'rollup-plugin-babel'; -import resolve from 'rollup-plugin-node-resolve'; -import commonjs from 'rollup-plugin-commonjs'; -import { - cjsPaths, - submodulePaths, -} from '../../../../scripts/foundations-submodules'; - -const extensions = ['.ts', '.tsx']; - -module.exports = { - input: 'index.tsx', - output: [ - { - file: 'dist/accordion.js', - format: 'cjs', - paths: cjsPaths, - }, - { - file: 'dist/accordion.esm.js', - format: 'esm', - }, - ], - external: [ - 'react', - '@emotion/react', - '@emotion/css', - '@guardian/src-foundations', - ...submodulePaths, - ], - plugins: [babel({ extensions }), resolve({ extensions }), commonjs()], -}; diff --git a/src/core/components/accordion/tsconfig.json b/src/core/components/accordion/tsconfig.json new file mode 100644 index 000000000..4afe94507 --- /dev/null +++ b/src/core/components/accordion/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist/types", + "declaration": true, + "emitDeclarationOnly": true + }, + "include": [".", "../../foundations/types/themes.d.ts"], + "exclude": ["dist", "stories.tsx", "stories/**/*"], + "references": [ + { + "path": "../../foundations" + }, + { + "path": "../../icons" + } + ] +} diff --git a/src/core/components/button/.babelrc.js b/src/core/components/button/.babelrc.js deleted file mode 100644 index 3ca6b812c..000000000 --- a/src/core/components/button/.babelrc.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - presets: [ - '@babel/preset-env', - '@babel/preset-typescript', - '@babel/preset-react', - '@emotion/babel-preset-css-prop', - ], -}; diff --git a/src/core/components/button/index.tsx b/src/core/components/button/index.tsx index ada3c3485..b32b004b6 100644 --- a/src/core/components/button/index.tsx +++ b/src/core/components/button/index.tsx @@ -1,4 +1,3 @@ -/// import React, { ReactElement, ReactNode, @@ -46,11 +45,11 @@ type IconSide = 'left' | 'right'; type Size = 'default' | 'small' | 'xsmall'; interface SharedButtonProps extends Props { - priority: ButtonPriority; - size: Size; - iconSide: IconSide; + priority?: ButtonPriority; + size?: Size; + iconSide?: IconSide; icon?: ReactElement; - hideLabel: boolean; + hideLabel?: boolean; nudgeIcon?: boolean; } @@ -101,7 +100,7 @@ const buttonContents = ({ iconSvg, children, }: { - hideLabel: boolean; + hideLabel?: boolean; iconSvg?: ReactElement; children: ReactNode; }) => { @@ -132,11 +131,11 @@ const buttonContents = ({ }; const buttonStyles = ({ - priority, - size, + priority = 'primary', + size = 'default', icon: iconSvg, hideLabel, - iconSide, + iconSide = 'left', nudgeIcon, cssOverrides, }: SharedButtonProps) => @@ -155,11 +154,11 @@ const buttonStyles = ({ interface ButtonProps extends SharedButtonProps, ButtonHTMLAttributes { - priority: ButtonPriority; - size: Size; + priority?: ButtonPriority; + size?: Size; icon?: ReactElement; - iconSide: IconSide; - hideLabel: boolean; + iconSide?: IconSide; + hideLabel?: boolean; nudgeIcon?: boolean; children: ReactNode; cssOverrides?: SerializedStyles | SerializedStyles[]; @@ -171,6 +170,7 @@ const Button = ({ iconSide, hideLabel, nudgeIcon, + type = 'button', cssOverrides, children, ...props @@ -185,6 +185,7 @@ const Button = ({ nudgeIcon, cssOverrides, })} + type={type} {...props} > {buttonContents({ @@ -198,12 +199,12 @@ const Button = ({ interface LinkButtonProps extends SharedButtonProps, AnchorHTMLAttributes { - priority: ButtonPriority; - size: Size; - iconSide: IconSide; + priority?: ButtonPriority; + size?: Size; + iconSide?: IconSide; icon?: ReactElement; nudgeIcon?: boolean; - hideLabel: boolean; + hideLabel?: boolean; children: ReactNode; cssOverrides?: SerializedStyles | SerializedStyles[]; } @@ -239,22 +240,4 @@ const LinkButton = ({ ); -const defaultButtonProps = { - type: 'button', - priority: 'primary', - size: 'default', - iconSide: 'left', - hideLabel: false, -}; - -const defaultLinkButtonProps = { - priority: 'primary', - size: 'default', - iconSide: 'left', - hideLabel: false, -}; - -Button.defaultProps = { ...defaultButtonProps }; -LinkButton.defaultProps = { ...defaultLinkButtonProps }; - export { Button, LinkButton }; diff --git a/src/core/components/button/package.json b/src/core/components/button/package.json index d2324fa5c..83a3c4579 100644 --- a/src/core/components/button/package.json +++ b/src/core/components/button/package.json @@ -6,16 +6,19 @@ "url": "https://github.com/guardian/source.git" }, "license": "Apache-2.0", - "main": "dist/button.js", - "module": "dist/button.esm.js", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/types/index.d.ts", "files": [ - "dist/*.js", - "index.tsx", - "styles.ts", - "themes.ts" + "dist/esm", + "dist/cjs", + "dist/types" ], "scripts": { - "build": "yarn clean && rollup --config", + "build": "npm-run-all clean --parallel build:*", + "build:cjs": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/cjs --module commonjs", + "build:esm": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/esm --module ES6", + "build:types": "tsc -b", "clean": "rm -rf dist", "prepublish": "yarn build", "publish:public": "yarn publish --access public", @@ -30,17 +33,8 @@ "@guardian/src-helpers": "^3.3.0-rc.0" }, "devDependencies": { - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/preset-typescript": "^7.9.0", - "@emotion/babel-preset-css-prop": "^11.0.0", - "@guardian/src-foundations": "^3.3.0-rc.0", - "@guardian/src-icons": "^3.3.0-rc.0", - "rollup": "^1.17.0", - "rollup-plugin-babel": "^4.3.3", - "rollup-plugin-commonjs": "^10.0.2", - "rollup-plugin-node-resolve": "^5.2.0" + "npm-run-all": "^4.1.5", + "typescript": "^4.1.3" }, "peerDependencies": { "@emotion/react": "^11.1.2", diff --git a/src/core/components/button/rollup.config.js b/src/core/components/button/rollup.config.js deleted file mode 100644 index 39d85a6b4..000000000 --- a/src/core/components/button/rollup.config.js +++ /dev/null @@ -1,32 +0,0 @@ -import babel from 'rollup-plugin-babel'; -import resolve from 'rollup-plugin-node-resolve'; -import commonjs from 'rollup-plugin-commonjs'; -import { - cjsPaths, - submodulePaths, -} from '../../../../scripts/foundations-submodules'; - -const extensions = ['.ts', '.tsx']; - -module.exports = { - input: 'index.tsx', - output: [ - { - file: 'dist/button.js', - format: 'cjs', - paths: cjsPaths, - }, - { - file: 'dist/button.esm.js', - format: 'esm', - }, - ], - external: [ - 'react', - '@emotion/react', - '@emotion/css', - '@guardian/src-foundations', - ...submodulePaths, - ], - plugins: [babel({ extensions }), resolve({ extensions }), commonjs()], -}; diff --git a/src/core/components/button/tsconfig.json b/src/core/components/button/tsconfig.json new file mode 100644 index 000000000..a67c489db --- /dev/null +++ b/src/core/components/button/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist/types", + "declaration": true, + "emitDeclarationOnly": true + }, + "include": [".", "../../foundations/types/themes.d.ts"], + "exclude": ["dist", "stories", "stories.tsx"], + "references": [ + { + "path": "../../foundations" + }, + { + "path": "../../icons" + } + ] +} diff --git a/src/core/components/checkbox/.babelrc.js b/src/core/components/checkbox/.babelrc.js deleted file mode 100644 index 669d5ba81..000000000 --- a/src/core/components/checkbox/.babelrc.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - presets: [ - '@babel/preset-env', - '@babel/preset-react', - '@babel/preset-typescript', - '@emotion/babel-preset-css-prop', - ], -}; diff --git a/src/core/components/checkbox/index.tsx b/src/core/components/checkbox/index.tsx index 2625c061b..41ff77f85 100644 --- a/src/core/components/checkbox/index.tsx +++ b/src/core/components/checkbox/index.tsx @@ -1,4 +1,3 @@ -/// import React, { ReactNode, InputHTMLAttributes } from 'react'; import { SerializedStyles } from '@emotion/react'; import { InlineError } from '@guardian/src-user-feedback'; @@ -31,7 +30,7 @@ interface CheckboxGroupProps extends Props { id?: string; name: string; label?: string; - hideLabel: boolean; + hideLabel?: boolean; supporting?: string; error?: string; children: JSX.Element | JSX.Element[]; @@ -120,8 +119,8 @@ interface CheckboxProps extends InputHTMLAttributes, Props { defaultChecked?: boolean; label?: ReactNode; supporting?: ReactNode; - indeterminate: boolean; - error: boolean; + indeterminate?: boolean; + error?: boolean; cssOverrides?: SerializedStyles | SerializedStyles[]; } @@ -157,7 +156,7 @@ const Checkbox = ({ }; const setIndeterminate = (el: HTMLInputElement | null): void => { if (el) { - el.indeterminate = indeterminate; + el.indeterminate = !!indeterminate; } }; @@ -171,7 +170,7 @@ const Checkbox = ({ cssOverrides, ]} value={value} - aria-invalid={error} + aria-invalid={!!error} aria-checked={ariaChecked()} ref={setIndeterminate} defaultChecked={ @@ -214,17 +213,4 @@ const Checkbox = ({ return <>{labelContent || supportingText ? labelledBox : box}; }; -const checkboxDefaultProps = { - disabled: false, - indeterminate: false, - error: false, -}; - -const checkboxGroupDefaultProps = { - hideLabel: false, -}; - -Checkbox.defaultProps = { ...checkboxDefaultProps }; -CheckboxGroup.defaultProps = { ...checkboxGroupDefaultProps }; - export { CheckboxGroup, Checkbox }; diff --git a/src/core/components/checkbox/package.json b/src/core/components/checkbox/package.json index ec7f13c8f..063bc5bcb 100644 --- a/src/core/components/checkbox/package.json +++ b/src/core/components/checkbox/package.json @@ -6,15 +6,19 @@ "url": "https://github.com/guardian/source.git" }, "license": "Apache-2.0", - "main": "dist/checkbox.js", - "module": "dist/checkbox.esm.js", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/types/index.d.ts", "files": [ - "dist/*.js", - "index.tsx", - "styles.ts" + "dist/esm", + "dist/cjs", + "dist/types" ], "scripts": { - "build": "yarn clean && rollup --config", + "build": "npm-run-all clean --parallel build:*", + "build:cjs": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/cjs --module commonjs", + "build:esm": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/esm --module ES6", + "build:types": "tsc -b", "clean": "rm -rf dist", "prepublish": "yarn build", "publish:public": "yarn publish --access public", @@ -31,16 +35,8 @@ "@guardian/src-user-feedback": "^3.3.0-rc.0" }, "devDependencies": { - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/preset-typescript": "^7.9.0", - "@emotion/babel-preset-css-prop": "^11.0.0", - "@guardian/src-foundations": "^3.3.0-rc.0", - "rollup": "^1.17.0", - "rollup-plugin-babel": "^4.3.3", - "rollup-plugin-commonjs": "^10.0.2", - "rollup-plugin-node-resolve": "^5.2.0" + "npm-run-all": "^4.1.5", + "typescript": "^4.1.3" }, "peerDependencies": { "@emotion/react": "^11.1.2", diff --git a/src/core/components/checkbox/rollup.config.js b/src/core/components/checkbox/rollup.config.js deleted file mode 100644 index e53925abb..000000000 --- a/src/core/components/checkbox/rollup.config.js +++ /dev/null @@ -1,32 +0,0 @@ -import babel from 'rollup-plugin-babel'; -import resolve from 'rollup-plugin-node-resolve'; -import commonjs from 'rollup-plugin-commonjs'; -import { - cjsPaths, - submodulePaths, -} from '../../../../scripts/foundations-submodules'; - -const extensions = ['.ts', '.tsx']; - -module.exports = { - input: 'index.tsx', - output: [ - { - file: 'dist/checkbox.js', - format: 'cjs', - paths: cjsPaths, - }, - { - file: 'dist/checkbox.esm.js', - format: 'esm', - }, - ], - external: [ - 'react', - '@emotion/react', - '@emotion/css', - '@guardian/src-foundations', - ...submodulePaths, - ], - plugins: [babel({ extensions }), resolve({ extensions }), commonjs()], -}; diff --git a/src/core/components/checkbox/tsconfig.json b/src/core/components/checkbox/tsconfig.json new file mode 100644 index 000000000..d62deb3e9 --- /dev/null +++ b/src/core/components/checkbox/tsconfig.json @@ -0,0 +1,24 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist/types", + "declaration": true, + "emitDeclarationOnly": true + }, + "include": [".", "../../foundations/types/themes.d.ts"], + "exclude": ["dist", "stories", "*.stories.tsx"], + "references": [ + { + "path": "../../foundations" + }, + { + "path": "../../helpers" + }, + { + "path": "../user-feedback" + }, + { + "path": "../label" + } + ] +} diff --git a/src/core/components/choice-card/.babelrc.js b/src/core/components/choice-card/.babelrc.js deleted file mode 100644 index 669d5ba81..000000000 --- a/src/core/components/choice-card/.babelrc.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - presets: [ - '@babel/preset-env', - '@babel/preset-react', - '@babel/preset-typescript', - '@emotion/babel-preset-css-prop', - ], -}; diff --git a/src/core/components/choice-card/index.tsx b/src/core/components/choice-card/index.tsx index 9f476035f..528093378 100644 --- a/src/core/components/choice-card/index.tsx +++ b/src/core/components/choice-card/index.tsx @@ -1,4 +1,3 @@ -/// import React, { ReactNode, ReactElement, @@ -105,7 +104,7 @@ interface ChoiceCardProps extends InputHTMLAttributes, Props { checked?: boolean; defaultChecked?: boolean; onChange?: ChangeEventHandler; - error: boolean; + error?: boolean; cssOverrides?: SerializedStyles | SerializedStyles[]; } @@ -119,6 +118,7 @@ const ChoiceCard = ({ cssOverrides, error, onChange, + type = 'radio', ...props }: ChoiceCardProps) => { const isChecked = (): boolean => { @@ -142,7 +142,7 @@ const ChoiceCard = ({ ]} id={id} value={value} - aria-invalid={error} + aria-invalid={!!error} aria-checked={isChecked()} defaultChecked={ defaultChecked != null ? defaultChecked : undefined @@ -154,6 +154,7 @@ const ChoiceCard = ({ } setUserChanged(true); }} + type={type} {...props} /> import React, { HTMLAttributes, ReactNode } from 'react'; import { SerializedStyles } from '@emotion/react'; import { @@ -17,7 +16,7 @@ import { SvgChevronUpSingle } from '@guardian/src-icons'; export { footerBrand } from '@guardian/src-foundations/themes'; interface FooterProps extends HTMLAttributes, Props { - showBackToTop: boolean; + showBackToTop?: boolean; children?: ReactNode; cssOverrides?: SerializedStyles | SerializedStyles[]; } @@ -65,8 +64,4 @@ const Footer = ({ ); }; -const defaultProps = { showBackToTop: false }; - -Footer.defaultProps = { ...defaultProps }; - export { Footer }; diff --git a/src/core/components/footer/package.json b/src/core/components/footer/package.json index b032650dd..ab9641a10 100644 --- a/src/core/components/footer/package.json +++ b/src/core/components/footer/package.json @@ -6,15 +6,19 @@ "url": "https://github.com/guardian/source.git" }, "license": "Apache-2.0", - "main": "dist/footer.js", - "module": "dist/footer.esm.js", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/types/index.d.ts", "files": [ - "dist/*.js", - "index.tsx", - "styles.ts" + "dist/esm", + "dist/cjs", + "dist/types" ], "scripts": { - "build": "yarn clean && rollup --config", + "build": "npm-run-all clean --parallel build:*", + "build:cjs": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/cjs --module commonjs", + "build:esm": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/esm --module ES6", + "build:types": "tsc -b", "clean": "rm -rf dist", "prepublish": "yarn build", "publish:public": "yarn publish --access public", @@ -29,16 +33,8 @@ "@guardian/src-helpers": "^3.3.0-rc.0" }, "devDependencies": { - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/preset-typescript": "^7.9.0", - "@emotion/babel-preset-css-prop": "^11.0.0", - "@guardian/src-foundations": "^3.3.0-rc.0", - "rollup": "^1.17.0", - "rollup-plugin-babel": "^4.3.3", - "rollup-plugin-commonjs": "^10.0.2", - "rollup-plugin-node-resolve": "^5.2.0" + "npm-run-all": "^4.1.5", + "typescript": "^4.1.3" }, "peerDependencies": { "@emotion/react": "^11.1.2", diff --git a/src/core/components/footer/rollup.config.js b/src/core/components/footer/rollup.config.js deleted file mode 100644 index f27ae50df..000000000 --- a/src/core/components/footer/rollup.config.js +++ /dev/null @@ -1,32 +0,0 @@ -import babel from 'rollup-plugin-babel'; -import resolve from 'rollup-plugin-node-resolve'; -import commonjs from 'rollup-plugin-commonjs'; -import { - cjsPaths, - submodulePaths, -} from '../../../../scripts/foundations-submodules'; - -const extensions = ['.ts', '.tsx']; - -module.exports = { - input: 'index.tsx', - output: [ - { - file: 'dist/footer.js', - format: 'cjs', - paths: cjsPaths, - }, - { - file: 'dist/footer.esm.js', - format: 'esm', - }, - ], - external: [ - 'react', - '@emotion/react', - '@emotion/css', - '@guardian/src-foundations', - ...submodulePaths, - ], - plugins: [babel({ extensions }), resolve({ extensions }), commonjs()], -}; diff --git a/src/core/components/footer/stories.tsx b/src/core/components/footer/stories.tsx index ea85f7392..28eb2b6c1 100644 --- a/src/core/components/footer/stories.tsx +++ b/src/core/components/footer/stories.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { Footer } from './index'; import { css } from '@emotion/react'; diff --git a/src/core/components/footer/tsconfig.json b/src/core/components/footer/tsconfig.json new file mode 100644 index 000000000..c5f574432 --- /dev/null +++ b/src/core/components/footer/tsconfig.json @@ -0,0 +1,21 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist/types", + "declaration": true, + "emitDeclarationOnly": true + }, + "include": [".", "../../foundations/types/themes.d.ts"], + "exclude": ["dist", "stories", "stories.tsx"], + "references": [ + { + "path": "../../foundations" + }, + { + "path": "../../icons" + }, + { + "path": "../../helpers" + } + ] +} diff --git a/src/core/components/label/.babelrc.js b/src/core/components/label/.babelrc.js deleted file mode 100644 index 3ca6b812c..000000000 --- a/src/core/components/label/.babelrc.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - presets: [ - '@babel/preset-env', - '@babel/preset-typescript', - '@babel/preset-react', - '@emotion/babel-preset-css-prop', - ], -}; diff --git a/src/core/components/label/index.tsx b/src/core/components/label/index.tsx index b79e3041a..dd8c4a692 100644 --- a/src/core/components/label/index.tsx +++ b/src/core/components/label/index.tsx @@ -1,4 +1,3 @@ -/// import React, { ReactNode, LabelHTMLAttributes, HTMLAttributes } from 'react'; import { SerializedStyles, css } from '@emotion/react'; import { legend, labelText, optionalText, supportingText } from './styles'; @@ -13,7 +12,7 @@ const visuallyHidden = css` interface LabelProps extends LabelHTMLAttributes, Props { text: string; supporting?: string; - optional: boolean; + optional?: boolean; hideLabel?: boolean; cssOverrides?: SerializedStyles | SerializedStyles[]; children?: ReactNode; @@ -21,7 +20,7 @@ interface LabelProps extends LabelHTMLAttributes, Props { interface LegendProps extends HTMLAttributes, Props { text: string; supporting?: string; - optional: boolean; + optional?: boolean; hideLabel?: boolean; cssOverrides?: SerializedStyles | SerializedStyles[]; } @@ -111,9 +110,4 @@ const Label = ({ ); }; -const defaultProps = { optional: false }; - -Label.defaultProps = { ...defaultProps }; -Legend.defaultProps = { ...defaultProps }; - export { Label, Legend }; diff --git a/src/core/components/label/package.json b/src/core/components/label/package.json index a54459879..0e143cb9b 100644 --- a/src/core/components/label/package.json +++ b/src/core/components/label/package.json @@ -6,15 +6,19 @@ "url": "https://github.com/guardian/source.git" }, "license": "Apache-2.0", - "main": "dist/label.js", - "module": "dist/label.esm.js", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/types/index.d.ts", "files": [ - "dist/*.js", - "index.tsx", - "styles.ts" + "dist/esm", + "dist/cjs", + "dist/types" ], "scripts": { - "build": "yarn clean && rollup --config", + "build": "npm-run-all clean --parallel build:*", + "build:cjs": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/cjs --module commonjs", + "build:esm": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/esm --module ES6", + "build:types": "tsc -b", "clean": "rm -rf dist", "prepublish": "yarn build", "publish:public": "yarn publish --access public", @@ -29,16 +33,8 @@ "@guardian/src-helpers": "^3.3.0-rc.0" }, "devDependencies": { - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/preset-typescript": "^7.9.0", - "@emotion/babel-preset-css-prop": "^11.0.0", - "@guardian/src-foundations": "^3.3.0-rc.0", - "rollup": "^1.17.0", - "rollup-plugin-babel": "^4.3.3", - "rollup-plugin-commonjs": "^10.0.2", - "rollup-plugin-node-resolve": "^5.2.0" + "npm-run-all": "^4.1.5", + "typescript": "^4.1.3" }, "peerDependencies": { "@emotion/react": "^11.1.2", diff --git a/src/core/components/label/rollup.config.js b/src/core/components/label/rollup.config.js deleted file mode 100644 index 9485fabe9..000000000 --- a/src/core/components/label/rollup.config.js +++ /dev/null @@ -1,32 +0,0 @@ -import babel from 'rollup-plugin-babel'; -import resolve from 'rollup-plugin-node-resolve'; -import commonjs from 'rollup-plugin-commonjs'; -import { - cjsPaths, - submodulePaths, -} from '../../../../scripts/foundations-submodules'; - -const extensions = ['.ts', '.tsx']; - -module.exports = { - input: 'index.tsx', - output: [ - { - file: 'dist/label.js', - format: 'cjs', - paths: cjsPaths, - }, - { - file: 'dist/label.esm.js', - format: 'esm', - }, - ], - external: [ - 'react', - '@emotion/react', - '@emotion/css', - '@guardian/src-foundations', - ...submodulePaths, - ], - plugins: [babel({ extensions }), resolve({ extensions }), commonjs()], -}; diff --git a/src/core/components/label/tsconfig.json b/src/core/components/label/tsconfig.json new file mode 100644 index 000000000..a9462c8cd --- /dev/null +++ b/src/core/components/label/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist/types", + "declaration": true, + "emitDeclarationOnly": true, + "composite": true + }, + "include": [".", "../../foundations/types/themes.d.ts"], + "exclude": ["dist", "stories", "*.stories.tsx"], + "references": [ + { + "path": "../../helpers" + }, + { + "path": "../../foundations" + } + ] +} diff --git a/src/core/components/layout/.babelrc.js b/src/core/components/layout/.babelrc.js deleted file mode 100644 index 3ca6b812c..000000000 --- a/src/core/components/layout/.babelrc.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - presets: [ - '@babel/preset-env', - '@babel/preset-typescript', - '@babel/preset-react', - '@emotion/babel-preset-css-prop', - ], -}; diff --git a/src/core/components/layout/components/columns/columns.tsx b/src/core/components/layout/components/columns/columns.tsx index e181d8755..a666fb9f6 100644 --- a/src/core/components/layout/components/columns/columns.tsx +++ b/src/core/components/layout/components/columns/columns.tsx @@ -1,4 +1,4 @@ -import React, { HTMLAttributes, ReactNode } from 'react'; +import { HTMLAttributes, ReactNode } from 'react'; import { SerializedStyles } from '@emotion/react'; import { columns, diff --git a/src/core/components/layout/components/container/container.tsx b/src/core/components/layout/components/container/container.tsx index 425b7d2b4..1d5457073 100644 --- a/src/core/components/layout/components/container/container.tsx +++ b/src/core/components/layout/components/container/container.tsx @@ -1,4 +1,4 @@ -import React, { HTMLAttributes, ReactNode } from 'react'; +import { HTMLAttributes, ReactNode } from 'react'; import { SerializedStyles } from '@emotion/react'; import { container, containerBorder } from './styles'; import { Props } from '@guardian/src-helpers'; diff --git a/src/core/components/layout/components/hide/hide.tsx b/src/core/components/layout/components/hide/hide.tsx index 9069967d2..1deb98ee6 100644 --- a/src/core/components/layout/components/hide/hide.tsx +++ b/src/core/components/layout/components/hide/hide.tsx @@ -1,4 +1,4 @@ -import React, { HTMLAttributes, ReactNode } from 'react'; +import { HTMLAttributes, ReactNode } from 'react'; import { css } from '@emotion/react'; import { Breakpoint } from '@guardian/src-foundations'; import { from, until } from '@guardian/src-foundations/mq'; diff --git a/src/core/components/layout/components/inline/inline.tsx b/src/core/components/layout/components/inline/inline.tsx index 41b1906a2..cef4824f5 100644 --- a/src/core/components/layout/components/inline/inline.tsx +++ b/src/core/components/layout/components/inline/inline.tsx @@ -1,4 +1,4 @@ -import React, { HTMLAttributes, ReactNode } from 'react'; +import { HTMLAttributes, ReactNode } from 'react'; import { SerializedStyles } from '@emotion/react'; import { inline, inlineSpace } from './styles'; import { Props } from '@guardian/src-helpers'; diff --git a/src/core/components/layout/components/stack/stack.tsx b/src/core/components/layout/components/stack/stack.tsx index 71f7ad1cb..ced3fecab 100644 --- a/src/core/components/layout/components/stack/stack.tsx +++ b/src/core/components/layout/components/stack/stack.tsx @@ -1,4 +1,4 @@ -import React, { HTMLAttributes, ReactNode } from 'react'; +import { HTMLAttributes, ReactNode } from 'react'; import { SerializedStyles } from '@emotion/react'; import { stack, stackSpace } from './styles'; import { Props } from '@guardian/src-helpers'; diff --git a/src/core/components/layout/components/tiles/tiles.tsx b/src/core/components/layout/components/tiles/tiles.tsx index b5bec4112..135d8c1ed 100644 --- a/src/core/components/layout/components/tiles/tiles.tsx +++ b/src/core/components/layout/components/tiles/tiles.tsx @@ -1,4 +1,4 @@ -import React, { HTMLAttributes, ReactNode } from 'react'; +import { HTMLAttributes, ReactNode } from 'react'; import { SerializedStyles } from '@emotion/react'; import { Props } from '@guardian/src-helpers'; import { tileGridColumns, tilesGridContainer } from './styles'; diff --git a/src/core/components/layout/index.tsx b/src/core/components/layout/index.tsx index e3326513d..868b84fbe 100644 --- a/src/core/components/layout/index.tsx +++ b/src/core/components/layout/index.tsx @@ -1,4 +1,3 @@ -/// export { Columns, Column } from './components/columns/columns'; export { Container } from './components/container/container'; export { Hide } from './components/hide/hide'; diff --git a/src/core/components/layout/package.json b/src/core/components/layout/package.json index 40a477c95..66d65f64d 100644 --- a/src/core/components/layout/package.json +++ b/src/core/components/layout/package.json @@ -6,15 +6,19 @@ "url": "https://github.com/guardian/source.git" }, "license": "Apache-2.0", - "main": "dist/layout.js", - "module": "dist/layout.esm.js", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/types/index.d.ts", "files": [ - "dist/*.js", - "index.tsx", - "components/**/*" + "dist/esm", + "dist/cjs", + "dist/types" ], "scripts": { - "build": "yarn clean && rollup --config", + "build": "npm-run-all clean --parallel build:*", + "build:cjs": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/cjs --module commonjs", + "build:esm": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/esm --module ES6", + "build:types": "tsc -b", "clean": "rm -rf dist", "prepublish": "yarn build", "publish:public": "yarn publish --access public", @@ -29,16 +33,8 @@ "@guardian/src-helpers": "^3.3.0-rc.0" }, "devDependencies": { - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/preset-typescript": "^7.9.0", - "@emotion/babel-preset-css-prop": "^11.0.0", - "@guardian/src-foundations": "^3.3.0-rc.0", - "rollup": "^1.17.0", - "rollup-plugin-babel": "^4.3.3", - "rollup-plugin-commonjs": "^10.0.2", - "rollup-plugin-node-resolve": "^5.2.0" + "npm-run-all": "^4.1.5", + "typescript": "^4.1.3" }, "peerDependencies": { "@emotion/react": "^11.1.2", diff --git a/src/core/components/layout/rollup.config.js b/src/core/components/layout/rollup.config.js deleted file mode 100644 index a1e780f40..000000000 --- a/src/core/components/layout/rollup.config.js +++ /dev/null @@ -1,32 +0,0 @@ -import babel from 'rollup-plugin-babel'; -import resolve from 'rollup-plugin-node-resolve'; -import commonjs from 'rollup-plugin-commonjs'; -import { - cjsPaths, - submodulePaths, -} from '../../../../scripts/foundations-submodules'; - -const extensions = ['.ts', '.tsx']; - -module.exports = { - input: 'index.tsx', - output: [ - { - file: 'dist/layout.js', - format: 'cjs', - paths: cjsPaths, - }, - { - file: 'dist/layout.esm.js', - format: 'esm', - }, - ], - external: [ - 'react', - '@emotion/react', - '@emotion/css', - '@guardian/src-foundations', - ...submodulePaths, - ], - plugins: [babel({ extensions }), resolve({ extensions }), commonjs()], -}; diff --git a/src/core/components/layout/tsconfig.json b/src/core/components/layout/tsconfig.json new file mode 100644 index 000000000..af1de533d --- /dev/null +++ b/src/core/components/layout/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist/types", + "declaration": true, + "emitDeclarationOnly": true + }, + "include": [".", "../../foundations/types/themes.d.ts"], + "exclude": ["dist", "stories", "*.stories.tsx"], + "references": [ + { + "path": "../../helpers" + }, + { + "path": "../../foundations" + } + ] +} diff --git a/src/core/components/link/.babelrc.js b/src/core/components/link/.babelrc.js deleted file mode 100644 index 3ca6b812c..000000000 --- a/src/core/components/link/.babelrc.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - presets: [ - '@babel/preset-env', - '@babel/preset-typescript', - '@babel/preset-react', - '@emotion/babel-preset-css-prop', - ], -}; diff --git a/src/core/components/link/index.tsx b/src/core/components/link/index.tsx index 751e81375..f0c90c06b 100644 --- a/src/core/components/link/index.tsx +++ b/src/core/components/link/index.tsx @@ -1,4 +1,3 @@ -/// import React, { ReactElement, ReactNode, @@ -78,14 +77,14 @@ const linkStyles = ({ priority, isSubdued, iconSvg, - iconSide, + iconSide = 'left', cssOverrides, }: { isButton?: boolean; priority: LinkPriority; - isSubdued: boolean; + isSubdued?: boolean; iconSvg?: ReactElement; - iconSide: IconSide; + iconSide?: IconSide; cssOverrides?: SerializedStyles | SerializedStyles[]; }) => { /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ @@ -101,10 +100,10 @@ const linkStyles = ({ }; interface SharedLinkProps extends Props { - priority: LinkPriority; - subdued: boolean; + priority?: LinkPriority; + subdued?: boolean; icon?: ReactElement; - iconSide: IconSide; + iconSide?: IconSide; children?: ReactNode; cssOverrides?: SerializedStyles | SerializedStyles[]; } @@ -112,19 +111,19 @@ interface SharedLinkProps extends Props { interface LinkProps extends AnchorHTMLAttributes, SharedLinkProps { - priority: LinkPriority; - subdued: boolean; + priority?: LinkPriority; + subdued?: boolean; icon?: ReactElement; - iconSide: IconSide; + iconSide?: IconSide; children?: ReactNode; cssOverrides?: SerializedStyles | SerializedStyles[]; } const Link = ({ - priority, + priority = 'primary', subdued: isSubdued, icon: iconSvg, - iconSide, + iconSide = 'left', cssOverrides, children, ...props @@ -148,19 +147,19 @@ const Link = ({ interface ButtonLinkProps extends ButtonHTMLAttributes, SharedLinkProps { - priority: LinkPriority; - subdued: boolean; + priority?: LinkPriority; + subdued?: boolean; icon?: ReactElement; - iconSide: IconSide; + iconSide?: IconSide; children?: ReactNode; cssOverrides?: SerializedStyles | SerializedStyles[]; } const ButtonLink = ({ - priority, + priority = 'primary', subdued: isSubdued, icon: iconSvg, - iconSide, + iconSide = 'left', cssOverrides, children, ...props @@ -182,13 +181,4 @@ const ButtonLink = ({ ); }; -const defaultLinkProps = { - priority: 'primary', - subdued: false, - iconSide: 'left', -}; - -Link.defaultProps = { ...defaultLinkProps }; -ButtonLink.defaultProps = { ...defaultLinkProps }; - export { Link, ButtonLink }; diff --git a/src/core/components/link/package.json b/src/core/components/link/package.json index ac793ab42..3c611eeca 100644 --- a/src/core/components/link/package.json +++ b/src/core/components/link/package.json @@ -6,15 +6,19 @@ "url": "https://github.com/guardian/source.git" }, "license": "Apache-2.0", - "main": "dist/link.js", - "module": "dist/link.esm.js", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/types/index.d.ts", "files": [ - "dist/*.js", - "index.tsx", - "styles.ts" + "dist/esm", + "dist/cjs", + "dist/types" ], "scripts": { - "build": "yarn clean && rollup --config", + "build": "npm-run-all clean --parallel build:*", + "build:cjs": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/cjs --module commonjs", + "build:esm": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/esm --module ES6", + "build:types": "tsc -b", "clean": "rm -rf dist", "prepublish": "yarn build", "publish:public": "yarn publish --access public", @@ -29,17 +33,8 @@ "@guardian/src-helpers": "^3.3.0-rc.0" }, "devDependencies": { - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/preset-typescript": "^7.9.0", - "@emotion/babel-preset-css-prop": "^11.0.0", - "@guardian/src-foundations": "^3.3.0-rc.0", - "@guardian/src-icons": "^3.3.0-rc.0", - "rollup": "^1.17.0", - "rollup-plugin-babel": "^4.3.3", - "rollup-plugin-commonjs": "^10.0.2", - "rollup-plugin-node-resolve": "^5.2.0" + "npm-run-all": "^4.1.5", + "typescript": "^4.1.3" }, "peerDependencies": { "@emotion/react": "^11.1.2", diff --git a/src/core/components/link/rollup.config.js b/src/core/components/link/rollup.config.js deleted file mode 100644 index 95f546759..000000000 --- a/src/core/components/link/rollup.config.js +++ /dev/null @@ -1,32 +0,0 @@ -import babel from 'rollup-plugin-babel'; -import resolve from 'rollup-plugin-node-resolve'; -import commonjs from 'rollup-plugin-commonjs'; -import { - cjsPaths, - submodulePaths, -} from '../../../../scripts/foundations-submodules'; - -const extensions = ['.ts', '.tsx']; - -module.exports = { - input: 'index.tsx', - output: [ - { - file: 'dist/link.js', - format: 'cjs', - paths: cjsPaths, - }, - { - file: 'dist/link.esm.js', - format: 'esm', - }, - ], - external: [ - 'react', - '@emotion/react', - '@emotion/css', - '@guardian/src-foundations', - ...submodulePaths, - ], - plugins: [babel({ extensions }), resolve({ extensions }), commonjs()], -}; diff --git a/src/core/components/link/tsconfig.json b/src/core/components/link/tsconfig.json new file mode 100644 index 000000000..6d47df6e6 --- /dev/null +++ b/src/core/components/link/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist/types", + "declaration": true, + "emitDeclarationOnly": true + }, + "include": [".", "../../foundations/types/themes.d.ts"], + "exclude": ["dist", "stories", "stories.tsx"], + "references": [ + { + "path": "../../helpers" + }, + { + "path": "../../foundations" + } + ] +} diff --git a/src/core/components/radio/.babelrc.js b/src/core/components/radio/.babelrc.js deleted file mode 100644 index 669d5ba81..000000000 --- a/src/core/components/radio/.babelrc.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - presets: [ - '@babel/preset-env', - '@babel/preset-react', - '@babel/preset-typescript', - '@emotion/babel-preset-css-prop', - ], -}; diff --git a/src/core/components/radio/index.tsx b/src/core/components/radio/index.tsx index 90d68e064..05f004664 100644 --- a/src/core/components/radio/index.tsx +++ b/src/core/components/radio/index.tsx @@ -1,4 +1,3 @@ -/// import React, { ReactNode, InputHTMLAttributes } from 'react'; import { SerializedStyles } from '@emotion/react'; import { Legend } from '@guardian/src-label'; @@ -33,9 +32,9 @@ interface RadioGroupProps extends Props { id?: string; name: string; label?: string; - hideLabel: boolean; + hideLabel?: boolean; supporting?: string; - orientation: Orientation; + orientation?: Orientation; error?: string; children: JSX.Element | JSX.Element[]; cssOverrides?: SerializedStyles | SerializedStyles[]; @@ -47,7 +46,7 @@ const RadioGroup = ({ label, hideLabel, supporting, - orientation, + orientation = 'vertical', error, cssOverrides, children, @@ -186,16 +185,4 @@ const Radio = ({ ); }; -const radioGroupDefaultProps = { - orientation: 'vertical', - hideLabel: false, -}; - -const radioDefaultProps = { - disabled: false, -}; - -Radio.defaultProps = { ...radioDefaultProps }; -RadioGroup.defaultProps = { ...radioGroupDefaultProps }; - export { RadioGroup, Radio }; diff --git a/src/core/components/radio/package.json b/src/core/components/radio/package.json index 5d4b5bcfa..5102ceb06 100644 --- a/src/core/components/radio/package.json +++ b/src/core/components/radio/package.json @@ -6,15 +6,19 @@ "url": "https://github.com/guardian/source.git" }, "license": "Apache-2.0", - "main": "dist/radio.js", - "module": "dist/radio.esm.js", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/types/index.d.ts", "files": [ - "dist/*.js", - "index.tsx", - "styles.ts" + "dist/esm", + "dist/cjs", + "dist/types" ], "scripts": { - "build": "yarn clean && rollup --config", + "build": "npm-run-all clean --parallel build:*", + "build:cjs": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/cjs --module commonjs", + "build:esm": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/esm --module ES6", + "build:types": "tsc -b", "clean": "rm -rf dist", "prepublish": "yarn build", "publish:public": "yarn publish --access public", @@ -31,16 +35,8 @@ "@guardian/src-user-feedback": "^3.3.0-rc.0" }, "devDependencies": { - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.10.0", - "@babel/preset-react": "^7.10.0", - "@babel/preset-typescript": "^7.9.0", - "@emotion/babel-preset-css-prop": "^11.0.0", - "@guardian/src-foundations": "^3.3.0-rc.0", - "rollup": "^1.17.0", - "rollup-plugin-babel": "^4.3.3", - "rollup-plugin-commonjs": "^10.0.2", - "rollup-plugin-node-resolve": "^5.2.0" + "npm-run-all": "^4.1.5", + "typescript": "^4.1.3" }, "peerDependencies": { "@emotion/react": "^11.1.2", diff --git a/src/core/components/radio/rollup.config.js b/src/core/components/radio/rollup.config.js deleted file mode 100644 index e5f54696f..000000000 --- a/src/core/components/radio/rollup.config.js +++ /dev/null @@ -1,32 +0,0 @@ -import babel from 'rollup-plugin-babel'; -import resolve from 'rollup-plugin-node-resolve'; -import commonjs from 'rollup-plugin-commonjs'; -import { - cjsPaths, - submodulePaths, -} from '../../../../scripts/foundations-submodules'; - -const extensions = ['.ts', '.tsx']; - -module.exports = { - input: 'index.tsx', - output: [ - { - file: 'dist/radio.js', - format: 'cjs', - paths: cjsPaths, - }, - { - file: 'dist/radio.esm.js', - format: 'esm', - }, - ], - external: [ - 'react', - '@emotion/react', - '@emotion/css', - '@guardian/src-foundations', - ...submodulePaths, - ], - plugins: [babel({ extensions }), resolve({ extensions }), commonjs()], -}; diff --git a/src/core/components/radio/tsconfig.json b/src/core/components/radio/tsconfig.json new file mode 100644 index 000000000..276eb85f2 --- /dev/null +++ b/src/core/components/radio/tsconfig.json @@ -0,0 +1,24 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist/types", + "declaration": true, + "emitDeclarationOnly": true + }, + "include": [".", "../../foundations/types/themes.d.ts"], + "exclude": ["dist", "stories", "*.stories.tsx"], + "references": [ + { + "path": "../../helpers" + }, + { + "path": "../../foundations" + }, + { + "path": "../label" + }, + { + "path": "../user-feedback" + } + ] +} diff --git a/src/core/components/select/.babelrc.js b/src/core/components/select/.babelrc.js deleted file mode 100644 index 3ca6b812c..000000000 --- a/src/core/components/select/.babelrc.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - presets: [ - '@babel/preset-env', - '@babel/preset-typescript', - '@babel/preset-react', - '@emotion/babel-preset-css-prop', - ], -}; diff --git a/src/core/components/select/index.tsx b/src/core/components/select/index.tsx index 664cebe84..07ef8473b 100644 --- a/src/core/components/select/index.tsx +++ b/src/core/components/select/index.tsx @@ -1,4 +1,3 @@ -/// import React, { SelectHTMLAttributes, OptionHTMLAttributes } from 'react'; import { SerializedStyles } from '@emotion/react'; import { InlineError, InlineSuccess } from '@guardian/src-user-feedback'; @@ -24,8 +23,8 @@ export { selectDefault } from '@guardian/src-foundations/themes'; interface SelectProps extends SelectHTMLAttributes, Props { id?: string; label: string; - optional: boolean; - hideLabel: boolean; + optional?: boolean; + hideLabel?: boolean; supporting?: string; error?: string; success?: string; @@ -49,7 +48,7 @@ const Select = ({ return (