From 2ca1f1c1543c655cf302597fbc976e9435cd884f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 9 Jul 2020 17:26:29 +0200 Subject: [PATCH] feat(deps): upgrade all dependencies (#635) * feat(components): upgrade all dependencies * chore: upgrade to Foundry v3 * refactor: apply import/order rule * refactor: apply trailing comma rule * refactor: apply quote props rule * refactor: apply arrow parens rule * feat: upgrade to latest @sumup/design-tokens * test(components): update snapshot --- .cz-config.js | 14 +- .eslintrc.js | 23 +- jest.config.js | 22 +- jest.mdxTransformer.js | 2 +- jest.setup.js | 10 +- lint-staged.config.js | 2 +- package.json | 4 +- prettier.config.js | 9 +- .../__fixtures__/functional-component.js | 2 +- .../__fixtures__/styled-component.js | 2 +- scripts/static-styles/cli.js | 17 +- scripts/static-styles/component-styles.js | 6 +- .../static-styles/component-styles.spec.js | 10 +- scripts/static-styles/config.js | 14 +- scripts/static-styles/custom-properties.js | 4 +- .../static-styles/custom-properties.spec.js | 20 +- scripts/static-styles/index.js | 7 +- scripts/static-styles/render.js | 2 +- scripts/static-styles/render.spec.js | 4 +- src/cli/index.ts | 10 +- .../input-styles-prop.input.js | 8 +- .../input-styles-prop.output.js | 8 +- src/cli/migrate/as-prop.ts | 6 +- src/cli/migrate/badge-variant-enum.ts | 2 +- src/cli/migrate/button-variant-enum.ts | 16 +- src/cli/migrate/component-names-v2.ts | 10 +- .../migrate/component-static-properties.ts | 58 +- src/cli/migrate/exit-animations.ts | 10 +- src/cli/migrate/index.ts | 13 +- src/cli/migrate/input-deepref-prop.ts | 4 +- src/cli/migrate/input-styles-prop.ts | 4 +- src/cli/migrate/list-variant-enum.ts | 10 +- src/cli/migrate/onchange-prop.ts | 4 +- src/cli/migrate/selector-props.ts | 2 +- src/cli/migrate/toggle-checked-prop.ts | 2 +- src/cli/migrate/utils/index.ts | 48 +- src/components/Anchor/Anchor.spec.tsx | 20 +- src/components/Anchor/Anchor.story.tsx | 7 +- src/components/Anchor/Anchor.tsx | 15 +- src/components/AspectRatio/AspectRatio.js | 11 +- .../AspectRatio/AspectRatio.spec.js | 4 +- .../AspectRatio/AspectRatio.story.js | 2 +- src/components/Badge/Badge.spec.tsx | 4 +- src/components/Badge/Badge.story.tsx | 6 +- src/components/Badge/Badge.tsx | 30 +- src/components/BaseStyles/BaseStyles.spec.tsx | 2 +- src/components/BaseStyles/BaseStyles.tsx | 2 +- src/components/Blockquote/Blockquote.spec.tsx | 2 +- .../Blockquote/Blockquote.story.tsx | 4 +- src/components/Blockquote/Blockquote.tsx | 2 +- src/components/Button/Button.spec.tsx | 20 +- src/components/Button/Button.story.tsx | 7 +- src/components/Button/Button.tsx | 32 +- .../ButtonGroup/ButtonGroup.spec.tsx | 10 +- .../ButtonGroup/ButtonGroup.story.tsx | 3 +- src/components/ButtonGroup/ButtonGroup.tsx | 8 +- src/components/Calendar/RangePicker.js | 2 +- src/components/Calendar/RangePicker.story.js | 4 +- .../Calendar/RangePickerController.js | 2 +- src/components/Calendar/SingleDayPicker.js | 3 +- .../Calendar/SingleDayPicker.story.js | 4 +- .../CalendarWrapper/CalendarWrapper.js | 3 +- src/components/CalendarTag/CalendarTag.js | 15 +- .../CalendarTag/CalendarTag.story.js | 2 +- .../CalendarTagTwoStep/CalendarTagTwoStep.js | 14 +- .../CalendarTagTwoStep.story.js | 2 +- src/components/Card/Card.js | 12 +- src/components/Card/Card.story.js | 16 +- .../Card/components/Footer/Footer.js | 4 +- .../Card/components/Header/Header.js | 4 +- src/components/CardList/CardList.story.js | 9 +- .../CardList/components/Item/Item.js | 14 +- .../CardList/components/Item/Item.spec.js | 6 +- src/components/Carousel/Carousel.js | 21 +- src/components/Carousel/Carousel.spec.js | 4 +- src/components/Carousel/Carousel.story.js | 8 +- src/components/Carousel/__fixtures__/index.js | 14 +- .../Carousel/components/Buttons/Buttons.js | 8 +- .../components/Buttons/Buttons.story.js | 2 +- .../Carousel/components/Slide/Slide.js | 14 +- .../Carousel/components/Slide/Slide.spec.js | 7 +- .../Carousel/components/Slide/Slide.story.js | 3 +- .../components/Slide/SlideService.spec.js | 24 +- .../components/SlideImage/SlideImage.js | 5 +- .../components/SlideImage/SlideImage.spec.js | 6 +- .../Carousel/components/Status/Status.js | 4 +- .../components/Status/Status.story.js | 2 +- src/components/Carousel/constants.js | 2 +- src/components/Carousel/index.js | 5 +- src/components/Checkbox/Checkbox.spec.tsx | 16 +- src/components/Checkbox/Checkbox.story.tsx | 6 +- src/components/Checkbox/Checkbox.tsx | 6 +- src/components/CloseButton/CloseButton.js | 4 +- .../CloseButton/CloseButton.story.js | 4 +- src/components/Col/Col.js | 8 +- src/components/Col/Col.spec.js | 2 +- src/components/Col/Col.story.js | 6 +- src/components/Col/utils.js | 12 +- src/components/Col/utils.spec.js | 11 +- .../ComponentsContext/components/Link/Link.js | 4 +- .../components/Link/Link.spec.js | 12 +- .../ComponentsContext/withComponents.js | 3 +- .../CurrencyInput/CurrencyInput.spec.tsx | 6 +- .../CurrencyInput/CurrencyInput.story.tsx | 4 +- .../CurrencyInput/CurrencyInput.tsx | 9 +- .../CurrencyInputService.spec.ts | 4 +- .../CurrencyInput/CurrencyInputService.ts | 8 +- src/components/Grid/Grid.story.js | 15 +- src/components/Hamburger/Hamburger.spec.tsx | 6 +- src/components/Hamburger/Hamburger.story.tsx | 6 +- src/components/Hamburger/Hamburger.tsx | 10 +- src/components/Header/Header.js | 5 +- src/components/Header/Header.spec.js | 4 +- src/components/Header/Header.story.js | 5 +- .../Header/components/Title/Title.js | 2 +- .../Header/components/Title/Title.spec.js | 2 +- src/components/Heading/Heading.spec.tsx | 10 +- src/components/Heading/Heading.story.tsx | 6 +- src/components/Heading/Heading.tsx | 4 +- src/components/Hr/Hr.story.tsx | 4 +- src/components/IconButton/IconButton.spec.tsx | 4 +- .../IconButton/IconButton.story.tsx | 5 +- src/components/IconButton/IconButton.tsx | 8 +- src/components/Image/Image.spec.tsx | 4 +- src/components/Image/Image.story.tsx | 4 +- .../InlineElements/InlineElements.js | 8 +- .../InlineElements/InlineElements.spec.js | 2 +- .../InlineElements/InlineElements.story.js | 4 +- src/components/InlineMessage/InlineMessage.js | 12 +- .../InlineMessage/InlineMessage.story.js | 9 +- .../__snapshots__/InlineMessage.spec.js.snap | 2 +- src/components/Input/Input.spec.tsx | 6 +- src/components/Input/Input.story.tsx | 4 +- src/components/Input/Input.tsx | 15 +- src/components/Label/Label.spec.tsx | 6 +- src/components/Label/Label.story.tsx | 4 +- src/components/Label/Label.tsx | 4 +- src/components/List/List.spec.tsx | 16 +- src/components/List/List.story.tsx | 8 +- src/components/List/List.tsx | 10 +- .../LoadingButton/LoadingButton.spec.tsx | 4 +- .../LoadingButton/LoadingButton.story.tsx | 7 +- .../LoadingButton/LoadingButton.tsx | 4 +- src/components/Modal/Modal.embed.story.tsx | 3 +- src/components/Modal/Modal.spec.tsx | 7 +- src/components/Modal/Modal.story.tsx | 22 +- src/components/Modal/Modal.tsx | 8 +- src/components/Modal/ModalContext.tsx | 8 +- .../components/ModalFooter/ModalFooter.tsx | 1 - .../components/ModalHeader/ModalHeader.tsx | 2 +- .../components/ModalWrapper/ModalWrapper.tsx | 2 +- src/components/Modal/index.ts | 4 +- src/components/Notification/Notification.js | 2 +- .../Notification/Notification.story.js | 14 +- .../Notification/components/Button/Button.js | 6 +- .../components/Button/Button.spec.js | 2 +- .../Notification/components/Icon/Icon.js | 8 +- .../Notification/components/Icon/Icon.spec.js | 2 +- src/components/Notification/index.js | 2 +- .../NotificationBanner/NotificationBanner.js | 4 +- .../NotificationBanner.spec.js | 2 +- .../NotificationBanner.story.js | 6 +- .../NotificationList/NotificationList.js | 4 +- .../NotificationList/NotificationList.spec.js | 2 +- .../NotificationList.story.js | 5 +- src/components/Pagination/Pagination.spec.tsx | 13 +- .../Pagination/Pagination.story.tsx | 8 +- src/components/Pagination/Pagination.tsx | 7 +- .../components/PageList/PageList.spec.tsx | 6 +- .../components/PageList/PageList.tsx | 2 +- .../components/PageSelect/PageSelect.spec.tsx | 10 +- .../components/PageSelect/PageSelect.tsx | 6 +- src/components/Popover/Popover.js | 19 +- src/components/Popover/Popover.spec.js | 16 +- src/components/Popover/Popover.story.js | 9 +- src/components/Popover/PopoverService.js | 2 +- src/components/Portal/Portal.js | 4 +- .../ProgressBar/ProgressBar.story.tsx | 8 +- src/components/ProgressBar/ProgressBar.tsx | 14 +- src/components/RadioButton/RadioButton.js | 16 +- .../RadioButton/RadioButton.spec.js | 8 +- .../RadioButton/RadioButton.story.js | 6 +- .../RadioButtonGroup/RadioButtonGroup.js | 9 +- .../RadioButtonGroup/RadioButtonGroup.spec.js | 12 +- .../RadioButtonGroup.story.js | 12 +- src/components/Row/Row.story.js | 11 +- .../SearchInput/SearchInput.spec.tsx | 6 +- .../SearchInput/SearchInput.story.tsx | 6 +- src/components/SearchInput/SearchInput.tsx | 7 +- src/components/Select/Select.spec.tsx | 14 +- src/components/Select/Select.story.tsx | 17 +- src/components/Select/Select.tsx | 19 +- src/components/Selector/Selector.spec.tsx | 20 +- src/components/Selector/Selector.story.tsx | 6 +- src/components/Selector/Selector.tsx | 4 +- .../SelectorGroup/SelectorGroup.spec.tsx | 16 +- .../SelectorGroup/SelectorGroup.story.tsx | 16 +- .../SelectorGroup/SelectorGroup.tsx | 1 - src/components/Sidebar/Sidebar.js | 9 +- src/components/Sidebar/Sidebar.spec.js | 9 +- src/components/Sidebar/Sidebar.story.js | 14 +- src/components/Sidebar/SidebarContext.js | 8 +- src/components/Sidebar/SidebarContext.spec.js | 7 +- .../components/Aggregator/Aggregator.js | 10 +- .../components/Aggregator/Aggregator.spec.js | 28 +- .../Sidebar/components/Backdrop/Backdrop.js | 2 +- .../components/CloseButton/CloseButton.js | 2 +- .../Sidebar/components/Footer/Footer.js | 2 +- .../Sidebar/components/Footer/Footer.spec.js | 2 +- .../Sidebar/components/Header/Header.js | 2 +- .../Sidebar/components/Header/Header.spec.js | 2 +- .../Sidebar/components/NavItem/NavItem.js | 9 +- .../components/NavItem/NavItem.spec.js | 13 +- .../Sidebar/components/NavItem/index.js | 1 + .../Sidebar/components/NavItem/utils.js | 4 +- .../Sidebar/components/NavItem/utils.spec.js | 14 +- .../Sidebar/components/NavLabel/NavLabel.js | 4 +- .../components/NavLabel/NavLabel.spec.js | 2 +- .../Sidebar/components/NavList/NavList.js | 2 +- .../components/NavList/NavList.spec.js | 2 +- .../components/SubNavList/SubNavList.js | 10 +- .../components/SubNavList/SubNavList.spec.js | 6 +- .../Sidebar/components/SubNavList/utils.js | 9 +- .../components/SubNavList/utils.spec.js | 8 +- src/components/Sidebar/index.js | 2 +- src/components/Spacing/Spacing.spec.tsx | 2 + src/components/Spacing/Spacing.story.tsx | 5 +- src/components/Spacing/Spacing.tsx | 3 +- src/components/Spinner/Spinner.story.tsx | 4 +- src/components/Step/Step.js | 6 +- src/components/Step/Step.spec.js | 4 +- src/components/Step/Step.story.js | 7 +- src/components/Step/StepService.js | 10 +- src/components/Step/StepService.spec.js | 46 +- .../Step/examples/CarouselSlider.js | 6 +- src/components/Step/examples/MultiStepForm.js | 4 +- src/components/Step/examples/YesOrNoSlider.js | 11 +- src/components/Step/hooks/use-step.js | 22 +- src/components/Step/hooks/use-step.spec.js | 50 +- src/components/SubHeading/SubHeading.spec.tsx | 8 +- .../SubHeading/SubHeading.story.tsx | 6 +- src/components/SubHeading/SubHeading.tsx | 2 +- src/components/Table/Table.js | 31 +- src/components/Table/Table.spec.js | 18 +- src/components/Table/Table.story.js | 48 +- .../Table/components/SortArrow/SortArrow.js | 2 +- .../components/SortArrow/SortArrow.spec.js | 5 +- .../Table/components/TableBody/TableBody.js | 14 +- .../components/TableBody/TableBody.spec.js | 10 +- .../Table/components/TableCell/TableCell.js | 8 +- .../components/TableCell/TableCell.story.js | 2 +- .../Table/components/TableHead/TableHead.js | 6 +- .../components/TableHead/TableHead.spec.js | 14 +- .../components/TableHeader/TableHeader.js | 22 +- .../TableHeader/TableHeader.spec.js | 13 +- .../TableHeader/TableHeader.story.js | 2 +- .../Table/components/TableRow/TableRow.js | 2 +- .../components/TableRow/TableRow.spec.js | 6 +- src/components/Table/utils.js | 19 +- src/components/Tabs/Tabs.js | 18 +- src/components/Tabs/Tabs.spec.js | 22 +- src/components/Tabs/Tabs.story.js | 9 +- src/components/Tabs/components/Tab/Tab.js | 6 +- .../Tabs/components/TabList/TabList.js | 8 +- src/components/Tag/Tag.js | 24 +- src/components/Tag/Tag.spec.js | 16 +- src/components/Tag/Tag.story.js | 6 +- src/components/Text/Text.spec.tsx | 4 +- src/components/Text/Text.story.tsx | 9 +- src/components/Text/Text.tsx | 6 +- src/components/TextArea/TextArea.spec.tsx | 4 +- src/components/TextArea/TextArea.story.tsx | 4 +- src/components/Toggle/Toggle.spec.tsx | 2 +- src/components/Toggle/Toggle.story.tsx | 6 +- src/components/Toggle/Toggle.tsx | 8 +- .../Toggle/components/Switch/Switch.spec.tsx | 4 +- .../Toggle/components/Switch/Switch.tsx | 6 +- src/components/Tooltip/Tooltip.js | 8 +- src/components/Tooltip/Tooltip.spec.js | 12 +- src/components/Tooltip/Tooltip.story.js | 6 +- .../ValidationHint/ValidationHint.spec.tsx | 4 +- .../ValidationHint/ValidationHint.tsx | 2 +- src/hooks/use-click-handler.spec.ts | 13 +- src/hooks/use-click-handler.tsx | 2 +- src/hooks/use-component-size.js | 6 +- src/hooks/use-component-size.spec.js | 18 +- src/index.js | 10 +- src/storyshots.spec.js | 4 +- src/styles/style-helpers.spec.ts | 4 +- src/styles/style-helpers.ts | 10 +- src/util/key-codes.js | 10 +- src/util/regex.js | 10 +- src/util/regex.spec.js | 4 +- src/util/shared-prop-types.js | 38 +- src/util/test-utils.tsx | 13 +- yarn.lock | 4753 +++++++++-------- 296 files changed, 3913 insertions(+), 3402 deletions(-) diff --git a/.cz-config.js b/.cz-config.js index b4f16fba4a..722aad1aef 100644 --- a/.cz-config.js +++ b/.cz-config.js @@ -6,25 +6,25 @@ module.exports = { { value: 'style', name: - 'style: Changes that do not affect the meaning of the code\n (white-space, formatting, missing semi-colons, etc)' + 'style: Changes that do not affect the meaning of the code\n (white-space, formatting, missing semi-colons, etc)', }, { value: 'refactor', name: - 'refactor: A code change that neither fixes a bug nor adds a feature' + 'refactor: A code change that neither fixes a bug nor adds a feature', }, { value: 'perf', - name: 'perf: A code change that improves performance' + name: 'perf: A code change that improves performance', }, { value: 'test', name: 'test: Adding missing tests' }, { value: 'chore', name: - 'chore: Changes to the build process or auxiliary tools\n and libraries such as documentation generation' + 'chore: Changes to the build process or auxiliary tools\n and libraries such as documentation generation', }, { value: 'revert', name: 'revert: Revert to a commit' }, - { value: 'WIP', name: 'WIP: Work in progress' } + { value: 'WIP', name: 'WIP: Work in progress' }, ], scopes: [ @@ -32,9 +32,9 @@ module.exports = { { name: 'utils' }, { name: 'docs' }, { name: 'cli' }, - { name: 'configs' } + { name: 'configs' }, ], allowCustomScopes: true, - allowBreakingChanges: ['feat', 'fix'] + allowBreakingChanges: ['feat', 'fix'], }; diff --git a/.eslintrc.js b/.eslintrc.js index d533b005ad..722993c580 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,36 +3,33 @@ module.exports = require('@sumup/foundry/eslint')( language: 'TypeScript', environments: ['Browser'], frameworks: ['React', 'Emotion', 'Jest'], - openSource: true + openSource: true, }, { - rules: { - 'arrow-parens': 'off' - }, parserOptions: { - project: ['./tsconfig.eslint.json'] + project: ['./tsconfig.eslint.json'], }, overrides: [ { files: [ 'src/cli/migrate/__testfixtures__/**/*.input.*', - 'src/cli/migrate/__testfixtures__/**/*.output.*' + 'src/cli/migrate/__testfixtures__/**/*.output.*', ], rules: { 'import/no-unresolved': 'off', 'notice/notice': 'off', '@typescript-eslint/no-unused-vars': 'off', - 'prettier/prettier': 'off' - } + 'prettier/prettier': 'off', + }, }, { files: ['src/cli/migrate/*.ts'], rules: { // jscodeshift expect no return value for files // that should not be transformed. - 'consistent-return': 'off' - } - } - ] - } + 'consistent-return': 'off', + }, + }, + ], + }, ); diff --git a/jest.config.js b/jest.config.js index b304b556c9..31594ba013 100644 --- a/jest.config.js +++ b/jest.config.js @@ -25,29 +25,29 @@ module.exports = { '!src/@(components|util|styles)/**/index.{ts,tsx,js,jsx}', '!src/@(components|util|styles)/**/*.story.{ts,tsx,js,jsx}', '!src/@(components|util|styles)/**/*.docs.mdx', - '!**/node_modules/**' + '!**/node_modules/**', ], moduleDirectories: ['node_modules', 'src'], // HACK: See https://github.com/storybookjs/storybook/pull/9292 moduleNameMapper: { 'react-syntax-highlighter/dist/esm/(.*)': - 'react-syntax-highlighter/dist/cjs/$1' + 'react-syntax-highlighter/dist/cjs/$1', }, transform: { '^.+\\.(js|jsx)$': 'babel-jest', '^.+\\.(ts|tsx)$': 'ts-jest', - '^.+\\.(md|mdx)$': '/jest.mdxTransformer.js' + '^.+\\.(md|mdx)$': '/jest.mdxTransformer.js', }, setupFilesAfterEnv: ['/jest.setup.js'], globals: { - STORYBOOK: false, - __DEV__: false, - __PRODUCTION__: false, - __TEST__: true, + 'STORYBOOK': false, + '__DEV__': false, + '__PRODUCTION__': false, + '__TEST__': true, 'ts-jest': { tsConfig: { - jsx: 'react' - } - } - } + jsx: 'react', + }, + }, + }, }; diff --git a/jest.mdxTransformer.js b/jest.mdxTransformer.js index 22213b2a56..e4f024f4c3 100644 --- a/jest.mdxTransformer.js +++ b/jest.mdxTransformer.js @@ -16,5 +16,5 @@ module.exports = { process() { return 'null'; - } + }, }; diff --git a/jest.setup.js b/jest.setup.js index 34870ce6ca..ea01a54c81 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -28,7 +28,7 @@ import { actHook, userEvent, wait, - axe + axe, } from './src/util/test-utils'; global.axe = axe; @@ -47,8 +47,8 @@ if (global.document) { setEnd: () => {}, commonAncestorContainer: { nodeName: 'BODY', - ownerDocument: document - } + ownerDocument: document, + }, }); } @@ -61,6 +61,6 @@ expect.addSnapshotSerializer( createSerializer({ classNameReplacer(className, index) { return `circuit-${index}`; - } - }) + }, + }), ); diff --git a/lint-staged.config.js b/lint-staged.config.js index 6ed8250fd0..24a251478f 100644 --- a/lint-staged.config.js +++ b/lint-staged.config.js @@ -14,5 +14,5 @@ */ module.exports = require('@sumup/foundry/lint-staged')({ - language: 'TypeScript' + language: 'TypeScript', }); diff --git a/package.json b/package.json index 621fa0f0fe..7ff234645e 100644 --- a/package.json +++ b/package.json @@ -97,8 +97,8 @@ "@storybook/preset-typescript": "^3.0.0", "@storybook/react": "^5.2.0", "@storybook/source-loader": "^5.2.4", - "@sumup/design-tokens": "^1.0.0-alpha.5", - "@sumup/foundry": "^2.1.0", + "@sumup/design-tokens": "^1.0.0", + "@sumup/foundry": "^3.0.0", "@sumup/icons": "^1.0.0", "@sumup/intl": "^1.0.0", "@svgr/webpack": "^4.3.3", diff --git a/prettier.config.js b/prettier.config.js index 39822dee7f..00459ae478 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -13,11 +13,4 @@ * limitations under the License. */ -module.exports = require('@sumup/foundry/prettier')( - {}, - { - trailingComma: 'none', - arrowParens: 'avoid', - quoteProps: 'as-needed' - } -); +module.exports = require('@sumup/foundry/prettier')(); diff --git a/scripts/static-styles/__fixtures__/functional-component.js b/scripts/static-styles/__fixtures__/functional-component.js index d72c737558..eb15de5578 100644 --- a/scripts/static-styles/__fixtures__/functional-component.js +++ b/scripts/static-styles/__fixtures__/functional-component.js @@ -45,7 +45,7 @@ function FunctionalComponent({ label, value }) { FunctionalComponent.propTypes = { label: PropTypes.string, - value: PropTypes.string + value: PropTypes.string, }; /** diff --git a/scripts/static-styles/__fixtures__/styled-component.js b/scripts/static-styles/__fixtures__/styled-component.js index 23a266210f..4c3661ff0b 100644 --- a/scripts/static-styles/__fixtures__/styled-component.js +++ b/scripts/static-styles/__fixtures__/styled-component.js @@ -34,7 +34,7 @@ const StyledComponent = styled.input(baseStyles, disabledStyles); StyledComponent.propTypes = { label: PropTypes.string, - disabled: PropTypes.bool + disabled: PropTypes.bool, }; /** diff --git a/scripts/static-styles/cli.js b/scripts/static-styles/cli.js index bfb476757c..f8a717c133 100644 --- a/scripts/static-styles/cli.js +++ b/scripts/static-styles/cli.js @@ -16,9 +16,10 @@ import yargs from 'yargs'; import { keys } from 'lodash/fp'; -import extractStaticStyles from '.'; import config from './config'; +import extractStaticStyles from '.'; + const themeOpts = keys(config.themes); const componentOpts = config.components.map(({ name }) => name); @@ -27,7 +28,7 @@ function main() { .option('theme', { desc: 'The name of the theme to use.', choices: themeOpts, - default: 'light' + default: 'light', }) .option('components', { desc: @@ -36,7 +37,7 @@ function main() { options: ['all', 'none', ...componentOpts], type: 'array', default: 'all', - coerce: val => { + coerce: (val) => { if (val.length === 1) { if (val[0] === 'all') { return componentOpts; @@ -49,29 +50,29 @@ function main() { } } return val; - } + }, }) .option('global', { desc: 'Whether to include global styles.', type: 'boolean', - default: false + default: false, }) .option('customProperties', { desc: 'Whether to use CSS custom properties (variables).', type: 'boolean', - default: false + default: false, }) .option('pretty', { desc: 'Whether the CSS should be formatted with prettier.', type: 'boolean', - default: false + default: false, }) .option('filePath', { desc: // eslint-disable-next-line max-len 'Path to the file where the stylesheet should be saved, relative to the current directory.', type: 'string', - normalize: true + normalize: true, }) .showHelpOnFail(true) .help() diff --git a/scripts/static-styles/component-styles.js b/scripts/static-styles/component-styles.js index 14547f86ae..1b56ae9b11 100644 --- a/scripts/static-styles/component-styles.js +++ b/scripts/static-styles/component-styles.js @@ -98,7 +98,7 @@ export default function componentStyles({ components, theme } = {}) { // Reset all props to `null`. const baseProps = entries(props).reduce( (acc, [prop]) => ({ ...acc, [prop]: null }), - requiredProps + requiredProps, ); // Render the plain base component. @@ -106,11 +106,11 @@ export default function componentStyles({ components, theme } = {}) { // Render each prop variation (not combination). entries(props).forEach(([key, variations]) => { - variations.forEach(value => { + variations.forEach((value) => { renderFn(Component, { ...baseProps, [key]: value }, name); }); }); - } + }, ); const styleSheet = entries(styleSheets) diff --git a/scripts/static-styles/component-styles.spec.js b/scripts/static-styles/component-styles.spec.js index 0da650eebb..2c431f7a13 100644 --- a/scripts/static-styles/component-styles.spec.js +++ b/scripts/static-styles/component-styles.spec.js @@ -24,7 +24,7 @@ describe('Component styles', () => { const { components } = config; const actual = componentStyles({ theme, - components + components, }); expect(typeof actual).toBe('string'); components.forEach(({ name }) => { @@ -39,13 +39,13 @@ describe('Component styles', () => { component: fixtures.StyledComponent, props: { value: PropTypes.string, - disabled: PropTypes.bool - } + disabled: PropTypes.bool, + }, }; const components = [component]; const actual = componentStyles({ theme, - components + components, }); expect(typeof actual).toBe('string'); expect(actual).toMatchSnapshot(); @@ -56,7 +56,7 @@ describe('Component styles', () => { const components = [component]; const actual = componentStyles({ theme, - components + components, }); expect(typeof actual).toBe('string'); expect(actual).toMatchSnapshot(); diff --git a/scripts/static-styles/config.js b/scripts/static-styles/config.js index 6c4206d6e1..2e52aaff4b 100644 --- a/scripts/static-styles/config.js +++ b/scripts/static-styles/config.js @@ -34,7 +34,7 @@ import { light } from '@sumup/design-tokens'; // Toggle // } from '../../src'; -const element = props =>
; +const element = (props) =>
; export const PropTypes = { string: ['string'], @@ -47,14 +47,14 @@ export const PropTypes = { return [element]; } return null; - } + }, }; const requiredPropTypes = { string: 'string', bool: true, func: () => {}, - element + element, }; function getVariations(name, prop, propOverrides) { @@ -77,8 +77,8 @@ function getProps(props, propOverrides) { console.warn( [ `No variations found for prop "${name}" of type "${type}"`, - 'Please provide a custom override.' - ].join(' ') + 'Please provide a custom override.', + ].join(' '), ); return acc; } @@ -103,7 +103,7 @@ export function getComponentInfo(component, propOverrides = {}) { component, name: kebabCase(displayName), props: getProps(props, propOverrides), - requiredProps: getRequiredProps(props) + requiredProps: getRequiredProps(props), }; } catch (error) { console.error(component); @@ -184,5 +184,5 @@ export default { // }), // getComponentInfo(TextArea), // getComponentInfo(Toggle) - ] + ], }; diff --git a/scripts/static-styles/custom-properties.js b/scripts/static-styles/custom-properties.js index 1ed7aced77..00d085c05d 100644 --- a/scripts/static-styles/custom-properties.js +++ b/scripts/static-styles/custom-properties.js @@ -16,7 +16,7 @@ import { entries, includes, isObject, isNil, set } from 'lodash'; const DEFAULT_OPTIONS = { - omit: ['__esModule', 'mq', 'grid'] + omit: ['__esModule', 'mq', 'grid'], }; export function createTheme(theme, options = {}) { @@ -35,7 +35,7 @@ export function createGlobalStyles(theme, options = {}) { traverse(theme, buildGlobalStyles(customProperties, opts.omit)); const rules = entries(customProperties).map( - ([name, value]) => `${name}: ${value};` + ([name, value]) => `${name}: ${value};`, ); return `:root { ${rules.join(' ')} }`; diff --git a/scripts/static-styles/custom-properties.spec.js b/scripts/static-styles/custom-properties.spec.js index 42e6155bf4..67c5a68844 100644 --- a/scripts/static-styles/custom-properties.spec.js +++ b/scripts/static-styles/custom-properties.spec.js @@ -22,14 +22,14 @@ describe('Custom properties', () => { n300: '#D8DDE1', n500: '#9DA7B1', n700: '#5C656F', - n900: '#212933' + n900: '#212933', }, spacings: { bit: '4px', byte: '8px', kilo: '12px', - mega: '16px' - } + mega: '16px', + }, }; const mq = { @@ -37,7 +37,7 @@ describe('Custom properties', () => { kilo: 480, kiloToMega: '(min-width: 480px) and (max-width: 767px)', mega: 768, - untilMega: '(max-width: 767px)' + untilMega: '(max-width: 767px)', }; describe('createTheme', () => { @@ -49,14 +49,14 @@ describe('Custom properties', () => { n300: 'var(--colors-n300)', n500: 'var(--colors-n500)', n700: 'var(--colors-n700)', - n900: 'var(--colors-n900)' + n900: 'var(--colors-n900)', }, spacings: { bit: 'var(--spacings-bit)', byte: 'var(--spacings-byte)', kilo: 'var(--spacings-kilo)', - mega: 'var(--spacings-mega)' - } + mega: 'var(--spacings-mega)', + }, }; expect(actual).toEqual(expected); }); @@ -69,15 +69,15 @@ describe('Custom properties', () => { n300: 'var(--colors-n300)', n500: 'var(--colors-n500)', n700: 'var(--colors-n700)', - n900: 'var(--colors-n900)' + n900: 'var(--colors-n900)', }, spacings: { bit: 'var(--spacings-bit)', byte: 'var(--spacings-byte)', kilo: 'var(--spacings-kilo)', - mega: 'var(--spacings-mega)' + mega: 'var(--spacings-mega)', }, - mq + mq, }; expect(actual).toEqual(expected); }); diff --git a/scripts/static-styles/index.js b/scripts/static-styles/index.js index 7c0624ae9c..adb1e568ec 100644 --- a/scripts/static-styles/index.js +++ b/scripts/static-styles/index.js @@ -15,6 +15,7 @@ import fs from 'fs'; import path from 'path'; + // eslint-disable-next-line import/no-extraneous-dependencies import prettier from 'prettier'; @@ -42,10 +43,10 @@ export default function extractStaticStyles(options) { const opts = { ...options, theme: options.customProperties ? createTheme(theme) : theme, - components: config.components.filter(component => - options.components.includes(component.name) + components: config.components.filter((component) => + options.components.includes(component.name), ), - filePath: options.filePath || getFilePath(options) + filePath: options.filePath || getFilePath(options), }; let styleSheet = ''; diff --git a/scripts/static-styles/render.js b/scripts/static-styles/render.js index 25387cf44a..55646a18e1 100644 --- a/scripts/static-styles/render.js +++ b/scripts/static-styles/render.js @@ -29,7 +29,7 @@ export default function render(theme, insertFactory) { - + , ); }; } diff --git a/scripts/static-styles/render.spec.js b/scripts/static-styles/render.spec.js index 3e4fb5c544..b34b12c687 100644 --- a/scripts/static-styles/render.spec.js +++ b/scripts/static-styles/render.spec.js @@ -55,10 +55,10 @@ describe('Render', () => { expect(insert).toHaveBeenCalledWith( expect.any(String), expect.objectContaining({ - styles: expect.any(String) + styles: expect.any(String), }), expect.any(Object), - expect.any(Boolean) + expect.any(Boolean), ); }); }); diff --git a/src/cli/index.ts b/src/cli/index.ts index 02d8bb5bf9..39f723bd75 100644 --- a/src/cli/index.ts +++ b/src/cli/index.ts @@ -26,30 +26,30 @@ yargs .command( 'migrate', "Automatically transforms your source code to Circuit UI's latest APIs", - yrgs => + (yrgs) => yrgs .option('transform', { alias: 't', desc: 'The transform to be applied to the source code', choices: listTransforms(), type: 'string', - required: true + required: true, }) .option('language', { alias: 'l', desc: 'The programming language of the files to be transformed', choices: ['TypeScript', 'JavaScript'], type: 'string', - required: true + required: true, }) .option('path', { alias: 'p', desc: 'A path to the folder that contains the files to be transformed', type: 'string', - default: '.' + default: '.', }), - args => execute('migrate', args) + (args) => execute('migrate', args), ) .showHelpOnFail(true) .demandCommand(1, '') diff --git a/src/cli/migrate/__testfixtures__/input-styles-prop.input.js b/src/cli/migrate/__testfixtures__/input-styles-prop.input.js index 063b232126..e24990d39e 100644 --- a/src/cli/migrate/__testfixtures__/input-styles-prop.input.js +++ b/src/cli/migrate/__testfixtures__/input-styles-prop.input.js @@ -6,12 +6,12 @@ import { Input, TextArea } from '@sumup/circuit-ui'; const Form = () => ( <> css` + wrapperStyles={(theme) => css` color: red; `} />