From f9581a0da9dafb61f181d067eb2afa2a96d46cd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Wed, 14 Aug 2024 09:32:05 +0200 Subject: [PATCH 01/48] Enter prerelease mode --- .changeset/pre.json | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 .changeset/pre.json diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000000..9114d01fce --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,16 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@sumup/astro-template-circuit-ui": "2.1.0", + "@sumup/circuit-ui": "8.12.1", + "@sumup/cna-template": "5.1.0", + "next-app": "1.1.0", + "@sumup/design-tokens": "7.3.1", + "@sumup/eslint-plugin-circuit-ui": "4.1.0", + "@sumup/icons": "4.0.0", + "@sumup/remix-template-circuit-ui": "3.1.0", + "@sumup/stylelint-plugin-circuit-ui": "2.0.0" + }, + "changesets": [] +} From f583d05d3af6c2ba68268ffb47b4099cecd89796 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Wed, 14 Aug 2024 20:22:59 +0200 Subject: [PATCH 02/48] Rename package scope to @sumup-oss (#2648) --- .changeset/chilly-dodos-end.md | 5 + .changeset/great-kiwis-compare.md | 5 + .changeset/old-sloths-speak.md | 12 + .changeset/pre.json | 16 +- .changeset/seven-bees-train.md | 12 + .changeset/slimy-pots-lie.md | 18 ++ .changeset/tall-sheep-provide.md | 14 + .changeset/wise-emus-count.md | 12 + .eslintrc.js | 8 +- .storybook/components/Icons.tsx | 6 +- .storybook/components/Preview.tsx | 2 +- .storybook/components/Theme.tsx | 4 +- .storybook/decorators/withThemeProvider.tsx | 2 +- .storybook/preview.tsx | 2 +- README.md | 12 +- docs/contributing/4-release-process.mdx | 2 +- docs/features/1-theme.mdx | 4 +- docs/features/2-icons.mdx | 2 +- docs/features/3-components.mdx | 4 +- docs/introduction/1-welcome.mdx | 2 +- docs/introduction/2-getting-started.mdx | 22 +- docs/introduction/3-component-lifecycle.mdx | 10 +- package-lock.json | 295 +++++++++--------- package.json | 4 +- packages/astro-template/CHANGELOG.md | 2 +- packages/astro-template/README.md | 2 +- packages/astro-template/package.json | 14 +- .../src/components/DocCard.astro | 4 +- .../astro-template/src/layouts/Root.astro | 6 +- packages/astro-template/src/pages/index.astro | 2 +- packages/circuit-ui/CHANGELOG.md | 2 +- packages/circuit-ui/README.md | 14 +- .../circuit-ui/components/Avatar/Avatar.tsx | 2 +- .../components/Button/Button.stories.tsx | 2 +- .../circuit-ui/components/Button/Button.tsx | 2 +- .../components/Button/IconButton.spec.tsx | 4 +- .../components/Button/IconButton.stories.tsx | 2 +- .../components/Button/IconButton.tsx | 2 +- .../circuit-ui/components/Button/base.tsx | 2 +- .../components/Calendar/Calendar.mdx | 2 +- .../components/Calendar/Calendar.tsx | 2 +- .../Carousel/components/Buttons/Buttons.tsx | 2 +- .../components/Checkbox/Checkbox.mdx | 4 +- .../components/Checkbox/Checkbox.tsx | 2 +- .../CheckboxGroup/CheckboxGroup.mdx | 4 +- .../components/CloseButton/CloseButton.tsx | 2 +- .../CurrencyInput/CurrencyInput.spec.tsx | 2 +- .../CurrencyInput/CurrencyInput.tsx | 2 +- .../CurrencyInput/CurrencyInputService.ts | 2 +- .../circuit-ui/components/Field/Field.tsx | 2 +- .../components/Headline/Headline.mdx | 2 +- .../components/ImageInput/ImageInput.tsx | 2 +- .../components/ListItem/ListItem.spec.tsx | 2 +- .../components/ListItem/ListItem.stories.tsx | 2 +- .../components/ListItem/ListItem.tsx | 4 +- .../ListItemGroup/ListItemGroup.stories.tsx | 2 +- .../circuit-ui/components/Modal/Modal.mdx | 4 +- .../components/Notification/constants.ts | 2 +- .../NotificationFullscreen.spec.tsx | 2 +- .../NotificationModal.spec.tsx | 2 +- .../NotificationToast/NotificationToast.mdx | 4 +- .../components/Pagination/Pagination.tsx | 2 +- .../PercentageInput/PercentageInput.tsx | 2 +- .../PercentageInput/PercentageInputService.ts | 2 +- .../PhoneNumberInput.stories.tsx | 2 +- .../components/Popover/Popover.spec.tsx | 2 +- .../components/Popover/Popover.stories.tsx | 2 +- .../circuit-ui/components/Popover/Popover.tsx | 4 +- .../RadioButtonGroup/RadioButtonGroup.mdx | 4 +- .../components/SearchInput/SearchInput.tsx | 2 +- .../components/Select/Select.stories.tsx | 7 +- .../circuit-ui/components/Select/Select.tsx | 2 +- .../SelectorGroup/SelectorGroup.mdx | 4 +- .../SelectorGroup/SelectorGroup.stories.tsx | 2 +- .../SideNavigation/SideNavigation.spec.tsx | 2 +- .../SideNavigation/SideNavigation.stories.tsx | 2 +- .../DesktopNavigation.spec.tsx | 2 +- .../MobileNavigation.spec.tsx | 2 +- .../MobileNavigation/MobileNavigation.tsx | 2 +- .../PrimaryLink/PrimaryLink.spec.tsx | 2 +- .../components/PrimaryLink/PrimaryLink.tsx | 2 +- .../components/SideNavigation/types.ts | 2 +- .../components/SidePanel/SidePanel.mdx | 2 +- .../SidePanel/components/Header/Header.tsx | 2 +- .../Table/components/SortArrow/SortArrow.tsx | 2 +- .../components/Tabs/Tabs.stories.tsx | 5 +- .../circuit-ui/components/Tag/Tag.stories.tsx | 2 +- packages/circuit-ui/components/Tag/Tag.tsx | 2 +- .../Toggletip/Toggletip.stories.tsx | 2 +- .../components/Tooltip/Tooltip.stories.tsx | 2 +- .../TopNavigation/TopNavigation.spec.tsx | 2 +- .../TopNavigation/TopNavigation.stories.tsx | 2 +- .../components/ProfileMenu/ProfileMenu.tsx | 2 +- .../UtilityLinks/UtilityLinks.spec.tsx | 2 +- .../components/UtilityLinks/UtilityLinks.tsx | 2 +- .../components/legacy/Calendar/Calendar.mdx | 4 +- .../legacy/Calendar/RangePicker.tsx | 2 +- .../legacy/Calendar/RangePickerController.tsx | 2 +- .../legacy/Calendar/SingleDayPicker.tsx | 2 +- .../CalendarWrapper/CalendarWrapper.tsx | 2 +- .../components/legacy/Grid/Col/Col.ts | 2 +- .../components/legacy/Grid/Grid.mdx | 4 +- .../components/legacy/Grid/Grid/Grid.ts | 2 +- .../components/legacy/Grid/Row/Row.ts | 2 +- .../components/legacy/Grid/types.ts | 2 +- .../components/legacy/Grid/utils.spec.ts | 2 +- .../components/legacy/Grid/utils.ts | 2 +- .../components/legacy/Tooltip/Tooltip.mdx | 22 +- .../legacy/Tooltip/Tooltip.stories.tsx | 2 +- packages/circuit-ui/package.json | 14 +- packages/circuit-ui/styles/style-mixins.mdx | 4 +- .../circuit-ui/styles/style-mixins.spec.tsx | 2 +- packages/circuit-ui/styles/style-mixins.ts | 2 +- packages/circuit-ui/styles/styled.ts | 2 +- packages/circuit-ui/types/global.d.ts | 2 +- packages/circuit-ui/util/test-utils.tsx | 2 +- packages/cna-template/CHANGELOG.md | 2 +- packages/cna-template/README.md | 2 +- packages/cna-template/package.json | 2 +- packages/cna-template/template/CHANGELOG.md | 2 +- packages/cna-template/template/app/layout.tsx | 4 +- packages/cna-template/template/app/page.tsx | 4 +- .../template/components/DocCard/DocCard.tsx | 2 +- packages/cna-template/template/jest.config.js | 4 +- packages/cna-template/template/next.config.js | 2 +- packages/cna-template/template/package.json | 12 +- packages/design-tokens/CHANGELOG.md | 2 +- packages/design-tokens/README.md | 24 +- packages/design-tokens/index.ts | 2 +- packages/design-tokens/package.json | 2 +- packages/design-tokens/types/index.ts | 2 +- .../design-tokens/utils/theme-prop-type.ts | 2 +- .../eslint-plugin-circuit-ui/CHANGELOG.md | 2 +- packages/eslint-plugin-circuit-ui/README.md | 13 +- .../component-lifecycle-imports/README.md | 8 +- .../component-lifecycle-imports/index.spec.ts | 28 +- .../component-lifecycle-imports/index.ts | 4 +- packages/eslint-plugin-circuit-ui/index.ts | 2 + .../no-deprecated-components/README.md | 6 +- .../no-deprecated-components/index.spec.ts | 6 +- .../no-deprecated-components/index.ts | 2 +- .../no-deprecated-props/index.spec.ts | 2 +- .../no-invalid-custom-properties/README.md | 2 +- .../index.spec.ts | 2 +- .../no-invalid-custom-properties/index.ts | 2 +- .../no-renamed-props/index.spec.ts | 2 +- .../eslint-plugin-circuit-ui/package.json | 8 +- .../prefer-custom-properties/index.spec.ts | 2 +- .../prefer-custom-properties/index.ts | 2 +- .../renamed-package-scope/README.md | 35 +++ .../renamed-package-scope/index.spec.ts | 81 +++++ .../renamed-package-scope/index.ts | 88 ++++++ packages/icons/CHANGELOG.md | 2 +- packages/icons/CONTRIBUTING.md | 8 +- packages/icons/README.md | 16 +- packages/icons/package.json | 2 +- packages/remix-template/CHANGELOG.md | 2 +- packages/remix-template/README.md | 2 +- .../app/components/DocCard/DocCard.tsx | 2 +- packages/remix-template/app/root.tsx | 6 +- .../app/routes/_index/route.tsx | 2 +- packages/remix-template/package.json | 14 +- packages/remix-template/remix.config.js | 2 +- .../stylelint-plugin-circuit-ui/CHANGELOG.md | 2 +- .../stylelint-plugin-circuit-ui/README.md | 10 +- .../no-invalid-custom-properties/README.md | 2 +- .../index.spec.ts | 2 +- .../no-invalid-custom-properties/index.ts | 2 +- .../stylelint-plugin-circuit-ui/package.json | 6 +- 169 files changed, 749 insertions(+), 453 deletions(-) create mode 100644 .changeset/chilly-dodos-end.md create mode 100644 .changeset/great-kiwis-compare.md create mode 100644 .changeset/old-sloths-speak.md create mode 100644 .changeset/seven-bees-train.md create mode 100644 .changeset/slimy-pots-lie.md create mode 100644 .changeset/tall-sheep-provide.md create mode 100644 .changeset/wise-emus-count.md create mode 100644 packages/eslint-plugin-circuit-ui/renamed-package-scope/README.md create mode 100644 packages/eslint-plugin-circuit-ui/renamed-package-scope/index.spec.ts create mode 100644 packages/eslint-plugin-circuit-ui/renamed-package-scope/index.ts diff --git a/.changeset/chilly-dodos-end.md b/.changeset/chilly-dodos-end.md new file mode 100644 index 0000000000..3852fafc24 --- /dev/null +++ b/.changeset/chilly-dodos-end.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": major +--- + +Upgraded to `@sumup-oss/intl` v2. If your app also depends on `@sumup-oss/intl` (previously called `@sumup/intl`), you need to upgrade it as well. diff --git a/.changeset/great-kiwis-compare.md b/.changeset/great-kiwis-compare.md new file mode 100644 index 0000000000..d6c2afa23f --- /dev/null +++ b/.changeset/great-kiwis-compare.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/eslint-plugin-circuit-ui': minor +--- + +Added `circuit-ui/renamed-package-scope` rule to update imports for design system packages that have moved from the `@sumup` to the `@sumup-oss` scope. diff --git a/.changeset/old-sloths-speak.md b/.changeset/old-sloths-speak.md new file mode 100644 index 0000000000..15c899a8ab --- /dev/null +++ b/.changeset/old-sloths-speak.md @@ -0,0 +1,12 @@ +--- +'@sumup-oss/icons': major +--- + +Renamed the package scope from `@sumup` to `@sumup-oss`. Replace `@sumup/icons` with `@sumup-oss/icons` in your `package.json` file, then update all imports: + +```diff +-import { Search } from '@sumup/icons'; ++import { Search } from '@sumup-oss/icons'; +``` + +[Circuit UI's ESLint plugin](https://circuit.sumup.com/?path=/docs/packages-eslint-plugin-circuit-ui--docs) offers the `renamed-package-scope` rule to automate updating the package imports. diff --git a/.changeset/pre.json b/.changeset/pre.json index 9114d01fce..6f535ecfe1 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -2,15 +2,15 @@ "mode": "pre", "tag": "next", "initialVersions": { - "@sumup/astro-template-circuit-ui": "2.1.0", - "@sumup/circuit-ui": "8.12.1", - "@sumup/cna-template": "5.1.0", + "@sumup-oss/astro-template-circuit-ui": "2.1.0", + "@sumup-oss/circuit-ui": "8.12.1", + "@sumup-oss/cna-template": "5.1.0", "next-app": "1.1.0", - "@sumup/design-tokens": "7.3.1", - "@sumup/eslint-plugin-circuit-ui": "4.1.0", - "@sumup/icons": "4.0.0", - "@sumup/remix-template-circuit-ui": "3.1.0", - "@sumup/stylelint-plugin-circuit-ui": "2.0.0" + "@sumup-oss/design-tokens": "7.3.1", + "@sumup-oss/eslint-plugin-circuit-ui": "4.1.0", + "@sumup-oss/icons": "4.0.0", + "@sumup-oss/remix-template-circuit-ui": "3.1.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "2.0.0" }, "changesets": [] } diff --git a/.changeset/seven-bees-train.md b/.changeset/seven-bees-train.md new file mode 100644 index 0000000000..28c7ee014a --- /dev/null +++ b/.changeset/seven-bees-train.md @@ -0,0 +1,12 @@ +--- +'@sumup-oss/circuit-ui': major +--- + +Renamed the package scope from `@sumup` to `@sumup-oss`. Replace `@sumup/circuit-ui` with `@sumup-oss/circuit-ui` in your `package.json` file, then update all imports: + +```diff +-import { Button } from '@sumup/circuit-ui'; ++import { Button } from '@sumup-oss/circuit-ui'; +``` + +[Circuit UI's ESLint plugin](https://circuit.sumup.com/?path=/docs/packages-eslint-plugin-circuit-ui--docs) offers the `renamed-package-scope` rule to automate updating the package imports. diff --git a/.changeset/slimy-pots-lie.md b/.changeset/slimy-pots-lie.md new file mode 100644 index 0000000000..e5830f2f97 --- /dev/null +++ b/.changeset/slimy-pots-lie.md @@ -0,0 +1,18 @@ +--- +'@sumup-oss/eslint-plugin-circuit-ui': major +--- + +Renamed the package scope from `@sumup` to `@sumup-oss`. Replace `@sumup/eslint-plugin-circuit-ui` with `@sumup-oss/eslint-plugin-circuit-ui` in your `package.json` file, then update the plugin and rule names in your ESLint config: + +```diff +// .eslintrc.js + +module.exports = { +- plugins: ['@sumup/circuit-ui'], ++ plugins: ['@sumup-oss/circuit-ui'], + rules: { +- '@sumup/circuit-ui/component-lifecycle-imports': 'error', ++ '@sumup-oss/circuit-ui/component-lifecycle-imports': 'error', + }, +}; +``` diff --git a/.changeset/tall-sheep-provide.md b/.changeset/tall-sheep-provide.md new file mode 100644 index 0000000000..93a72e3679 --- /dev/null +++ b/.changeset/tall-sheep-provide.md @@ -0,0 +1,14 @@ +--- +'@sumup-oss/stylelint-plugin-circuit-ui': major +--- + +Renamed the package scope from `@sumup` to `@sumup-oss`. Replace `@sumup/stylelint-plugin-circuit-ui` with `@sumup-oss/stylelint-plugin-circuit-ui` in your `package.json` file, then update the plugin name in your Stylelint config: + +```diff +// .stylelintrc.js + +module.exports = { +- plugins: ['@sumup/stylelint-plugin-circuit-ui'], ++ plugins: ['@sumup-oss/stylelint-plugin-circuit-ui'], +}; +``` diff --git a/.changeset/wise-emus-count.md b/.changeset/wise-emus-count.md new file mode 100644 index 0000000000..d114ee715d --- /dev/null +++ b/.changeset/wise-emus-count.md @@ -0,0 +1,12 @@ +--- +'@sumup-oss/design-tokens': major +--- + +Renamed the package scope from `@sumup` to `@sumup-oss`. Replace `@sumup/design-tokens` with `@sumup-oss/design-tokens` in your `package.json` file, then update all imports: + +```diff +-import '@sumup/design-tokens/light.css'; ++import '@sumup-oss/design-tokens/light.css'; +``` + +[Circuit UI's ESLint plugin](https://circuit.sumup.com/?path=/docs/packages-eslint-plugin-circuit-ui--docs) offers the `renamed-package-scope` rule to automate updating the package imports. diff --git a/.eslintrc.js b/.eslintrc.js index 98c271bad8..0bfba46326 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,7 +3,7 @@ module.exports = require('@sumup-oss/foundry/eslint')({ 'plugin:storybook/recommended', 'plugin:react-server-components/recommended', ], - plugins: ['@sumup/circuit-ui'], + plugins: ['@sumup-oss/circuit-ui'], settings: { 'import/parsers': { '@typescript-eslint/parser': ['.ts', '.tsx'], @@ -16,8 +16,8 @@ module.exports = require('@sumup-oss/foundry/eslint')({ }, }, rules: { - '@sumup/circuit-ui/no-invalid-custom-properties': 'error', - '@sumup/circuit-ui/prefer-custom-properties': 'warn', + '@sumup-oss/circuit-ui/no-invalid-custom-properties': 'error', + '@sumup-oss/circuit-ui/prefer-custom-properties': 'warn', 'react/no-unknown-property': ['error', { ignore: ['css'] }], }, parserOptions: { @@ -55,7 +55,7 @@ module.exports = require('@sumup-oss/foundry/eslint')({ { files: ['packages/circuit-ui/components/legacy/**/*'], rules: { - '@sumup/circuit-ui/prefer-custom-properties': 'off', + '@sumup-oss/circuit-ui/prefer-custom-properties': 'off', }, }, { diff --git a/.storybook/components/Icons.tsx b/.storybook/components/Icons.tsx index ad31105685..68d7d9d749 100644 --- a/.storybook/components/Icons.tsx +++ b/.storybook/components/Icons.tsx @@ -20,9 +20,9 @@ import { type ChangeEvent, } from 'react'; import { Unstyled } from '@storybook/addon-docs'; -import * as iconComponents from '@sumup/icons'; -import type { IconsManifest } from '@sumup/icons'; -import iconsManifest from '@sumup/icons/manifest.json'; +import * as iconComponents from '@sumup-oss/icons'; +import type { IconsManifest } from '@sumup-oss/icons'; +import iconsManifest from '@sumup-oss/icons/manifest.json'; import { Headline, Body, diff --git a/.storybook/components/Preview.tsx b/.storybook/components/Preview.tsx index b08eec6e79..8e55072a17 100644 --- a/.storybook/components/Preview.tsx +++ b/.storybook/components/Preview.tsx @@ -15,7 +15,7 @@ import type { PropsWithChildren } from 'react'; import { ThemeProvider } from '@emotion/react'; -import { light } from '@sumup/design-tokens'; +import { light } from '@sumup-oss/design-tokens'; export function Preview({ children }: PropsWithChildren) { return {children}; diff --git a/.storybook/components/Theme.tsx b/.storybook/components/Theme.tsx index cc80e25f5e..83ddce233a 100644 --- a/.storybook/components/Theme.tsx +++ b/.storybook/components/Theme.tsx @@ -16,8 +16,8 @@ import { useEffect, useState, type ComponentType } from 'react'; import { ThemeProvider, useTheme } from '@emotion/react'; import { Unstyled } from '@storybook/addon-docs'; -import { light, schema } from '@sumup/design-tokens'; -import { SumUpLogomark } from '@sumup/icons'; +import { light, schema } from '@sumup-oss/design-tokens'; +import { SumUpLogomark } from '@sumup-oss/icons'; import { Anchor, Table, diff --git a/.storybook/decorators/withThemeProvider.tsx b/.storybook/decorators/withThemeProvider.tsx index 6d37e6d7b4..69b6fd10ab 100644 --- a/.storybook/decorators/withThemeProvider.tsx +++ b/.storybook/decorators/withThemeProvider.tsx @@ -1,7 +1,7 @@ import { useEffect } from 'react'; import { ThemeProvider } from '@emotion/react'; import type { Decorator } from '@storybook/react'; -import { light } from '@sumup/design-tokens'; +import { light } from '@sumup-oss/design-tokens'; function setColorScheme(colorScheme: 'light' | 'dark') { document.documentElement.dataset.colorScheme = colorScheme; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 1348f98fcd..601cf3dc6a 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,4 +1,4 @@ -import '@sumup/design-tokens/dynamic.css'; +import '@sumup-oss/design-tokens/dynamic.css'; import '../packages/circuit-ui/styles/base.css'; import { light, components } from './themes'; diff --git a/README.md b/README.md index 06bcc2751a..fe6b256ff1 100644 --- a/README.md +++ b/README.md @@ -22,12 +22,12 @@ Here are a few helpful links for getting started with Circuit UI: ## Packages -- **[@sumup/circuit-ui](./packages/circuit-ui)** — the core React component library -- **[@sumup/design-tokens](./packages/design-tokens)** — visual primitives such as typography, color, and spacing -- **[@sumup/icons](./packages/icons)** — a collection of SVG icons -- **[@sumup/cna-template](./packages/cna-template)** — bootstrap a fresh [Next.js](https://nextjs.org/) app with Circuit UI and [Foundry](https://github.com/sumup-oss/foundry) -- **[@sumup/eslint-plugin-circuit-ui](./packages/eslint-plugin-circuit-ui)** — ESLint rules to help users follow best practices when using Circuit UI -- **[@sumup/stylelint-plugin-circuit-ui](./packages/stylelint-plugin-circuit-ui)** — Stylelint rules to help users follow best practices when using Circuit UI +- **[@sumup-oss/circuit-ui](./packages/circuit-ui)** — the core React component library +- **[@sumup-oss/design-tokens](./packages/design-tokens)** — visual primitives such as typography, color, and spacing +- **[@sumup-oss/icons](./packages/icons)** — a collection of SVG icons +- **[@sumup-oss/cna-template](./packages/cna-template)** — bootstrap a fresh [Next.js](https://nextjs.org/) app with Circuit UI and [Foundry](https://github.com/sumup-oss/foundry) +- **[@sumup-oss/eslint-plugin-circuit-ui](./packages/eslint-plugin-circuit-ui)** — ESLint rules to help users follow best practices when using Circuit UI +- **[@sumup-oss/stylelint-plugin-circuit-ui](./packages/stylelint-plugin-circuit-ui)** — Stylelint rules to help users follow best practices when using Circuit UI ## Code of conduct diff --git a/docs/contributing/4-release-process.mdx b/docs/contributing/4-release-process.mdx index de02990152..c019e0150e 100644 --- a/docs/contributing/4-release-process.mdx +++ b/docs/contributing/4-release-process.mdx @@ -27,7 +27,7 @@ We have a couple of special branches that are used for stable releases and prere To install the most recent version from a release channel in your project, run: ```bash -npm install @sumup/circuit-ui@ +npm install @sumup-oss/circuit-ui@ ``` ### Prereleases diff --git a/docs/features/1-theme.mdx b/docs/features/1-theme.mdx index a8bd6a0291..bf30171a85 100644 --- a/docs/features/1-theme.mdx +++ b/docs/features/1-theme.mdx @@ -13,7 +13,7 @@ import { FontWeight, Transition, } from '../../.storybook/components'; -import { Headline, SubHeadline, Body } from '@sumup/circuit-ui'; +import { Headline, SubHeadline, Body } from '@sumup-oss/circuit-ui'; @@ -21,7 +21,7 @@ import { Headline, SubHeadline, Body } from '@sumup/circuit-ui'; -The theme used throughout Circuit UI comes from SumUp's design token library, [`@sumup/design-tokens`](Packages/design-tokens/Docs), which is a required peer dependency of `@sumup/circuit-ui`. Refer to its [documentation](Packages/design-tokens/Docs) for installation and usage instructions. +The theme used throughout Circuit UI comes from SumUp's design token library, [`@sumup-oss/design-tokens`](Packages/design-tokens/Docs), which is a required peer dependency of `@sumup-oss/circuit-ui`. Refer to its [documentation](Packages/design-tokens/Docs) for installation and usage instructions. diff --git a/docs/features/2-icons.mdx b/docs/features/2-icons.mdx index 3635c7e04d..dd43db5abb 100644 --- a/docs/features/2-icons.mdx +++ b/docs/features/2-icons.mdx @@ -6,7 +6,7 @@ import { Intro, Meta, Icons } from '../../.storybook/components'; -The icons used throughout Circuit UI come from SumUp's icon library, [`@sumup/icons`](Packages/icons/Docs), which is a required peer dependency of `@sumup/circuit-ui`. Refer to its [documentation](Packages/icons/Docs) for usage instructions and the [contribution guidelines](Contributing/Contributing-Icons/Docs) to contribute new icons. +The icons used throughout Circuit UI come from SumUp's icon library, [`@sumup-oss/icons`](Packages/icons/Docs), which is a required peer dependency of `@sumup-oss/circuit-ui`. Refer to its [documentation](Packages/icons/Docs) for usage instructions and the [contribution guidelines](Contributing/Contributing-Icons/Docs) to contribute new icons. diff --git a/docs/features/3-components.mdx b/docs/features/3-components.mdx index b5452d4462..e42d637bec 100644 --- a/docs/features/3-components.mdx +++ b/docs/features/3-components.mdx @@ -12,7 +12,7 @@ import { Meta, Intro } from '../../.storybook/components'; ```javascript import { Link } from 'react-router-dom'; -import { ComponentsContext, Button } from '@sumup/circuit-ui'; +import { ComponentsContext, Button } from '@sumup-oss/circuit-ui'; const CustomLink = ({ to, ...props }) => ; @@ -30,7 +30,7 @@ Using the context provider and specifying custom components is fully optional, C In order to access the base components in your own application you can use the `useComponents` hook: ```javascript -import { useComponents } from '@sumup/circuit-ui'; +import { useComponents } from '@sumup-oss/circuit-ui'; const Navigation = ({ links }) => { const { Link } = useComponents(); diff --git a/docs/introduction/1-welcome.mdx b/docs/introduction/1-welcome.mdx index 7decf9b193..0d0ef8ac01 100644 --- a/docs/introduction/1-welcome.mdx +++ b/docs/introduction/1-welcome.mdx @@ -18,7 +18,7 @@ import { Meta, Image, Intro, Teaser } from '../../.storybook/components'; user experience to our users. -[![Version](https://img.shields.io/npm/v/@sumup/circuit-ui)](https://www.npmjs.com/package/@sumup/circuit-ui) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/LICENSE) [![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) +[![Version](https://img.shields.io/npm/v/@sumup-oss/circuit-ui)](https://www.npmjs.com/package/@sumup-oss/circuit-ui) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/LICENSE) [![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) diff --git a/docs/introduction/2-getting-started.mdx b/docs/introduction/2-getting-started.mdx index aca3614ac4..b93829ae44 100644 --- a/docs/introduction/2-getting-started.mdx +++ b/docs/introduction/2-getting-started.mdx @@ -24,35 +24,35 @@ Already have a project? You can install Circuit UI via `npm` or `yarn`. In your ```sh # With npm: -npm install @sumup/circuit-ui +npm install @sumup-oss/circuit-ui # With yarn v1 -yarn add @sumup/circuit-ui +yarn add @sumup-oss/circuit-ui ``` -Circuit UI relies on some mandatory peer dependencies, namely [@sumup/design-tokens](https://www.npmjs.com/package/@sumup/design-tokens), [@sumup/icons](https://www.npmjs.com/package/@sumup/icons), [@sumup/intl](https://www.npmjs.com/package/@sumup/intl), and [React](https://reactjs.org/). You should install them with the following command: +Circuit UI relies on some mandatory peer dependencies, namely [@sumup-oss/design-tokens](https://www.npmjs.com/package/@sumup-oss/design-tokens), [@sumup-oss/icons](https://www.npmjs.com/package/@sumup-oss/icons), [@sumup-oss/intl](https://www.npmjs.com/package/@sumup-oss/intl), and [React](https://reactjs.org/). You should install them with the following command: ```sh # With npm: -npm install --save @sumup/design-tokens @sumup/icons @sumup/intl react react-dom +npm install --save @sumup-oss/design-tokens @sumup-oss/icons @sumup-oss/intl react react-dom # With yarn v1 -yarn add @sumup/design-tokens @sumup/icons @sumup/intl react react-dom +yarn add @sumup-oss/design-tokens @sumup-oss/icons @sumup-oss/intl react react-dom ``` -We also recommend installing and configuring [`@sumup/eslint-plugin-circuit-ui`](Packages/eslint-plugin-circuit-ui/Docs) and [`@sumup/stylelint-plugin-circuit-ui`](Packages/stylelint-plugin-circuit-ui/Docs). The plugins will lint [Circuit UI custom properties](Features/Theme/Docs) and include codemods for Circuit UI breaking changes. +We also recommend installing and configuring [`@sumup-oss/eslint-plugin-circuit-ui`](Packages/eslint-plugin-circuit-ui/Docs) and [`@sumup-oss/stylelint-plugin-circuit-ui`](Packages/stylelint-plugin-circuit-ui/Docs). The plugins will lint [Circuit UI custom properties](Features/Theme/Docs) and include codemods for Circuit UI breaking changes. ### Importing the styles ### Configuring the theme -SumUp's default theme is part of the [@sumup/design-tokens](https://www.npmjs.com/package/@sumup/design-tokens) package. Refer to the [Theme documentation](Features/Theme/Docs) to learn how to use and customize the theme. +SumUp's default theme is part of the [@sumup-oss/design-tokens](https://www.npmjs.com/package/@sumup-oss/design-tokens) package. Refer to the [Theme documentation](Features/Theme/Docs) to learn how to use and customize the theme. To make the theme available to Circuit UI, import the theme styles _before_ the component styles: ```tsx // /app/layout.tsx or /pages/_app.tsx for Next.js -import '@sumup/design-tokens/light.css'; -import '@sumup/circuit-ui/styles.css'; +import '@sumup-oss/design-tokens/light.css'; +import '@sumup-oss/circuit-ui/styles.css'; ``` ### Configuring the viewport @@ -61,8 +61,8 @@ Finally, make sure that the viewport meta tag includes `viewport-fit=cover`, and ```tsx // /app/layout.tsx or /pages/_app.tsx for Next.js -import '@sumup/design-tokens/light.css'; -import '@sumup/circuit-ui/styles.css'; +import '@sumup-oss/design-tokens/light.css'; +import '@sumup-oss/circuit-ui/styles.css'; import Head from 'next/head'; const Layout = css` diff --git a/docs/introduction/3-component-lifecycle.mdx b/docs/introduction/3-component-lifecycle.mdx index 58d265c6b2..2b3b3ddd2d 100644 --- a/docs/introduction/3-component-lifecycle.mdx +++ b/docs/introduction/3-component-lifecycle.mdx @@ -32,10 +32,10 @@ Experimental components are under active development. They might not meet our qu This is a good time to provide feedback. [Open an issue](https://github.com/sumup-oss/circuit-ui/issues/new?template=amend-existing-component.md) to suggest improvements. -Experimental components are exported separately from stable components. Import them from `@sumup/circuit-ui/experimental`: +Experimental components are exported separately from stable components. Import them from `@sumup-oss/circuit-ui/experimental`: ```tsx -import { Component } from '@sumup/circuit-ui/experimental'; +import { Component } from '@sumup-oss/circuit-ui/experimental'; ``` ## Legacy @@ -44,10 +44,10 @@ import { Component } from '@sumup/circuit-ui/experimental'; Legacy components are going to be phased out eventually, but don't have a stable replacement yet. You can continue to use them in existing code until a stable alternative becomes available. We don't recommend adopting legacy components in new code. Legacy components won't receive any updates apart from bugfixes. -Legacy components are exported separately from stable components. Import them from `@sumup/circuit-ui/legacy`: +Legacy components are exported separately from stable components. Import them from `@sumup-oss/circuit-ui/legacy`: ```tsx -import { Component } from '@sumup/circuit-ui/legacy'; +import { Component } from '@sumup-oss/circuit-ui/legacy'; ``` Some legacy components require third-party dependencies which aren't bundled with Circuit UI. Refer to each component's documentation for a list of dependencies that need to be installed manually. @@ -58,4 +58,4 @@ Some legacy components require third-party dependencies which aren't bundled wit Deprecated components are going to be removed in the next major release. When used, they log a deprecation warning during local development. Replace them with the alternative that's suggested in the components' documentation. Deprecated components won't receive any updates or bugfixes. -Deprecated components can be exported from `@sumup/circuit-ui` or `@sumup/circuit-ui/legacy`, depending on their previous status. +Deprecated components can be exported from `@sumup-oss/circuit-ui` or `@sumup-oss/circuit-ui/legacy`, depending on their previous status. diff --git a/package-lock.json b/package-lock.json index 489901042f..749323f8f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,9 +32,9 @@ "@storybook/source-loader": "^8.2.4", "@storybook/test": "^8.2.4", "@storybook/theming": "^8.2.4", + "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", "@sumup-oss/foundry": "^8.1.1", - "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", "@types/node": "^18.19.39", "@vitest/coverage-v8": "^2.0.5", "audit-ci": "^7.1.0", @@ -10433,6 +10433,26 @@ "storybook": "^8.2.4" } }, + "node_modules/@sumup-oss/astro-template-circuit-ui": { + "resolved": "packages/astro-template", + "link": true + }, + "node_modules/@sumup-oss/circuit-ui": { + "resolved": "packages/circuit-ui", + "link": true + }, + "node_modules/@sumup-oss/cna-template": { + "resolved": "packages/cna-template", + "link": true + }, + "node_modules/@sumup-oss/design-tokens": { + "resolved": "packages/design-tokens", + "link": true + }, + "node_modules/@sumup-oss/eslint-plugin-circuit-ui": { + "resolved": "packages/eslint-plugin-circuit-ui", + "link": true + }, "node_modules/@sumup-oss/foundry": { "version": "8.1.1", "resolved": "https://registry.npmjs.org/@sumup-oss/foundry/-/foundry-8.1.1.tgz", @@ -10483,46 +10503,29 @@ "node": "^18.18 || ^20.9 || >=22" } }, - "node_modules/@sumup/astro-template-circuit-ui": { - "resolved": "packages/astro-template", - "link": true - }, - "node_modules/@sumup/circuit-ui": { - "resolved": "packages/circuit-ui", - "link": true - }, - "node_modules/@sumup/cna-template": { - "resolved": "packages/cna-template", - "link": true - }, - "node_modules/@sumup/design-tokens": { - "resolved": "packages/design-tokens", - "link": true - }, - "node_modules/@sumup/eslint-plugin-circuit-ui": { - "resolved": "packages/eslint-plugin-circuit-ui", - "link": true - }, - "node_modules/@sumup/icons": { + "node_modules/@sumup-oss/icons": { "resolved": "packages/icons", "link": true }, - "node_modules/@sumup/intl": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@sumup/intl/-/intl-1.6.0.tgz", - "integrity": "sha512-oJyGNBv/lgga57uTPZtvLxG+K71tEo0wN54CpeUi/3HrfcAdr6YkAayhmcRT+J3SjNWcSa7vNbynLGfV6j0ESQ==", + "node_modules/@sumup-oss/intl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@sumup-oss/intl/-/intl-2.0.0.tgz", + "integrity": "sha512-aAbIZFNUs64ePHUEXfIRnOtzZ+N8TyTmypThxfjApvtioPIHCeoSzlp1TvT7KelImXI3Uxy8duuHNEP/S9yU9w==", "dependencies": { "intl-format-cache": "^4.2.27" }, "engines": { "node": ">=10" + }, + "peerDependencies": { + "temporal-polyfill": "0.2.x" } }, - "node_modules/@sumup/remix-template-circuit-ui": { + "node_modules/@sumup-oss/remix-template-circuit-ui": { "resolved": "packages/remix-template", "link": true }, - "node_modules/@sumup/stylelint-plugin-circuit-ui": { + "node_modules/@sumup-oss/stylelint-plugin-circuit-ui": { "resolved": "packages/stylelint-plugin-circuit-ui", "link": true }, @@ -42452,14 +42455,14 @@ "license": "MIT" }, "packages/astro-template": { - "name": "@sumup/astro-template-circuit-ui", + "name": "@sumup-oss/astro-template-circuit-ui", "version": "2.1.0", "dependencies": { "@astrojs/react": "^3.6.1", - "@sumup/circuit-ui": "^8.0.0", - "@sumup/design-tokens": "^7.0.0", - "@sumup/icons": "^4.0.0", - "@sumup/intl": "^1.6.0", + "@sumup-oss/circuit-ui": "^8.0.0", + "@sumup-oss/design-tokens": "^7.0.0", + "@sumup-oss/icons": "^4.0.0", + "@sumup-oss/intl": "^2.0.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "astro": "^4.13.0", @@ -42467,16 +42470,16 @@ "react-dom": "^18.3.1" }, "devDependencies": { + "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", "@sumup-oss/foundry": "^8.1.1", - "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", "prettier-plugin-astro": "^0.14.1", "typescript": "^5.5.4" } }, "packages/circuit-ui": { - "name": "@sumup/circuit-ui", - "version": "8.12.0", + "name": "@sumup-oss/circuit-ui", + "version": "8.12.1", "license": "Apache-2.0", "dependencies": { "@floating-ui/react-dom": "^2.1.1", @@ -42491,9 +42494,9 @@ "@emotion/jest": "^11.13.0", "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", - "@sumup/design-tokens": "^7.0.0", - "@sumup/icons": "^4.0.0", - "@sumup/intl": "^1.5.0", + "@sumup-oss/design-tokens": "^7.0.0", + "@sumup-oss/icons": "^4.0.0", + "@sumup-oss/intl": "^2.0.0", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.8", "@testing-library/react": "^16.0.0", @@ -42526,15 +42529,15 @@ "@emotion/is-prop-valid": "^1.2.1", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", - "@sumup/design-tokens": ">=6.0.0", - "@sumup/icons": ">=3.0.0", - "@sumup/intl": "1.x", + "@sumup-oss/design-tokens": ">=6.0.0", + "@sumup-oss/icons": ">=3.0.0", + "@sumup-oss/intl": "2.x", "react": ">=18.0.0 <19.0.0", "react-dom": ">=18.0.0 <19.0.0" } }, "packages/cna-template": { - "name": "@sumup/cna-template", + "name": "@sumup-oss/cna-template", "version": "5.1.0", "license": "Apache-2.0" }, @@ -42543,18 +42546,18 @@ "version": "1.1.0", "dependencies": { "@next/bundle-analyzer": "^14.2.5", - "@sumup/circuit-ui": "^8.0.0", - "@sumup/design-tokens": "^7.0.0", - "@sumup/icons": "^4.0.0", - "@sumup/intl": "^1.5.0", + "@sumup-oss/circuit-ui": "^8.0.0", + "@sumup-oss/design-tokens": "^7.0.0", + "@sumup-oss/icons": "^4.0.0", + "@sumup-oss/intl": "^2.0.0", "next": "^14.2.5", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { + "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", "@sumup-oss/foundry": "^8.1.1", - "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", @@ -42574,7 +42577,7 @@ } }, "packages/design-tokens": { - "name": "@sumup/design-tokens", + "name": "@sumup-oss/design-tokens", "version": "7.3.1", "license": "Apache-2.0", "dependencies": { @@ -42590,25 +42593,25 @@ } }, "packages/eslint-plugin-circuit-ui": { - "name": "@sumup/eslint-plugin-circuit-ui", + "name": "@sumup-oss/eslint-plugin-circuit-ui", "version": "4.1.0", "license": "Apache-2.0", "dependencies": { "@typescript-eslint/utils": "^7.16.1" }, "devDependencies": { - "@sumup/design-tokens": "^7.0.0", + "@sumup-oss/design-tokens": "^7.0.0", "@tsconfig/node18": "^18.2.4", "@typescript-eslint/rule-tester": "^7.16.1", "typescript": "^5.5.4" }, "peerDependencies": { - "@sumup/circuit-ui": ">=7.5.0", - "@sumup/design-tokens": ">=6.0.0" + "@sumup-oss/circuit-ui": ">=7.5.0", + "@sumup-oss/design-tokens": ">=6.0.0" } }, "packages/icons": { - "name": "@sumup/icons", + "name": "@sumup-oss/icons", "version": "4.0.0", "license": "Apache-2.0", "devDependencies": { @@ -42629,26 +42632,26 @@ } }, "packages/remix-template": { - "name": "@sumup/remix-template-circuit-ui", + "name": "@sumup-oss/remix-template-circuit-ui", "version": "3.1.0", "dependencies": { "@remix-run/css-bundle": "^2.10.3", "@remix-run/node": "^2.10.3", "@remix-run/react": "^2.10.3", "@remix-run/serve": "^2.10.3", - "@sumup/circuit-ui": "^8.0.0", - "@sumup/design-tokens": "^7.0.0", - "@sumup/icons": "^4.0.0", - "@sumup/intl": "^1.6.0", + "@sumup-oss/circuit-ui": "^8.0.0", + "@sumup-oss/design-tokens": "^7.0.0", + "@sumup-oss/icons": "^4.0.0", + "@sumup-oss/intl": "^2.0.0", "isbot": "^5.1.13", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@remix-run/dev": "^2.10.3", + "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", "@sumup-oss/foundry": "^8.1.1", - "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "eslint-plugin-prettier": "^5.2.1", @@ -42660,17 +42663,17 @@ } }, "packages/stylelint-plugin-circuit-ui": { - "name": "@sumup/stylelint-plugin-circuit-ui", + "name": "@sumup-oss/stylelint-plugin-circuit-ui", "version": "2.0.0", "license": "Apache-2.0", "devDependencies": { - "@sumup/design-tokens": "^7.0.0", + "@sumup-oss/design-tokens": "^7.0.0", "@tsconfig/node18": "^18.2.4", "jest-preset-stylelint": "^7.1.0", "typescript": "^5.5.4" }, "peerDependencies": { - "@sumup/design-tokens": ">=5.3.0", + "@sumup-oss/design-tokens": ">=5.3.0", "stylelint": "^16.7.0" } } @@ -49575,61 +49578,17 @@ "dev": true, "requires": {} }, - "@sumup-oss/foundry": { - "version": "8.1.1", - "resolved": "https://registry.npmjs.org/@sumup-oss/foundry/-/foundry-8.1.1.tgz", - "integrity": "sha512-yIu7kmMnfVGfgVrAHpGNUhs9Gx/WFDkiyVvEuEgibYA10Zd4kzPJYuZtSzk4irX80SBWLOj1s+y4h2wXgvlMoA==", - "dev": true, - "requires": { - "@babel/core": "^7.24.6", - "@babel/eslint-parser": "^7.24.6", - "@typescript-eslint/eslint-plugin": "^7.11.0", - "@typescript-eslint/parser": "^7.8.0", - "chalk": "^4.1.2", - "cross-spawn": "^7.0.3", - "dedent": "^0.7.0", - "eslint": "^8.57.0", - "eslint-config-airbnb-base": "^15.0.0", - "eslint-config-airbnb-typescript": "^18.0.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-compat": "^4.2.0", - "eslint-plugin-import": "^2.29.1", - "eslint-plugin-json": "^4.0.0", - "eslint-plugin-jsx-a11y": "^6.9.0", - "eslint-plugin-node": "^11.1.0", - "eslint-plugin-notice": "^0.9.10", - "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-react": "^7.34.1", - "eslint-plugin-react-hooks": "^4.6.2", - "eslint-plugin-security": "^3.0.0", - "husky": "^4.3.8", - "inquirer": "^8.2.6", - "is-ci": "^3.0.1", - "lint-staged": "15.2.7", - "listr": "^0.14.3", - "listr-inquirer": "^0.1.0", - "lodash": "^4.17.21", - "prettier": "^3.2.5", - "read-pkg-up": "^7.0.1", - "semver": "^7.6.1", - "stylelint": "^16.6.1", - "stylelint-config-recess-order": "^5.0.1", - "stylelint-config-standard": "^36.0.0", - "stylelint-no-unsupported-browser-features": "^8.0.1", - "yargs": "^17.7.2" - } - }, - "@sumup/astro-template-circuit-ui": { + "@sumup-oss/astro-template-circuit-ui": { "version": "file:packages/astro-template", "requires": { "@astrojs/react": "^3.6.1", + "@sumup-oss/circuit-ui": "^8.0.0", + "@sumup-oss/design-tokens": "^7.0.0", + "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", "@sumup-oss/foundry": "^8.1.1", - "@sumup/circuit-ui": "^8.0.0", - "@sumup/design-tokens": "^7.0.0", - "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/icons": "^4.0.0", - "@sumup/intl": "^1.6.0", - "@sumup/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/icons": "^4.0.0", + "@sumup-oss/intl": "^2.0.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "astro": "^4.13.0", @@ -49639,7 +49598,7 @@ "typescript": "^5.5.4" } }, - "@sumup/circuit-ui": { + "@sumup-oss/circuit-ui": { "version": "file:packages/circuit-ui", "requires": { "@emotion/is-prop-valid": "^1.3.0", @@ -49648,9 +49607,9 @@ "@emotion/styled": "^11.13.0", "@floating-ui/react-dom": "^2.1.1", "@nanostores/react": "^0.7.2", - "@sumup/design-tokens": "^7.0.0", - "@sumup/icons": "^4.0.0", - "@sumup/intl": "^1.5.0", + "@sumup-oss/design-tokens": "^7.0.0", + "@sumup-oss/icons": "^4.0.0", + "@sumup-oss/intl": "^2.0.0", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.8", "@testing-library/react": "^16.0.0", @@ -49677,10 +49636,10 @@ "vite": "^5.3.5" } }, - "@sumup/cna-template": { + "@sumup-oss/cna-template": { "version": "file:packages/cna-template" }, - "@sumup/design-tokens": { + "@sumup-oss/design-tokens": { "version": "file:packages/design-tokens", "requires": { "@types/node": "^18.19.39", @@ -49692,17 +49651,61 @@ "typescript": "^5.5.4" } }, - "@sumup/eslint-plugin-circuit-ui": { + "@sumup-oss/eslint-plugin-circuit-ui": { "version": "file:packages/eslint-plugin-circuit-ui", "requires": { - "@sumup/design-tokens": "^7.0.0", + "@sumup-oss/design-tokens": "^7.0.0", "@tsconfig/node18": "^18.2.4", "@typescript-eslint/rule-tester": "^7.16.1", "@typescript-eslint/utils": "^7.16.1", "typescript": "^5.5.4" } }, - "@sumup/icons": { + "@sumup-oss/foundry": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/@sumup-oss/foundry/-/foundry-8.1.1.tgz", + "integrity": "sha512-yIu7kmMnfVGfgVrAHpGNUhs9Gx/WFDkiyVvEuEgibYA10Zd4kzPJYuZtSzk4irX80SBWLOj1s+y4h2wXgvlMoA==", + "dev": true, + "requires": { + "@babel/core": "^7.24.6", + "@babel/eslint-parser": "^7.24.6", + "@typescript-eslint/eslint-plugin": "^7.11.0", + "@typescript-eslint/parser": "^7.8.0", + "chalk": "^4.1.2", + "cross-spawn": "^7.0.3", + "dedent": "^0.7.0", + "eslint": "^8.57.0", + "eslint-config-airbnb-base": "^15.0.0", + "eslint-config-airbnb-typescript": "^18.0.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-compat": "^4.2.0", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-json": "^4.0.0", + "eslint-plugin-jsx-a11y": "^6.9.0", + "eslint-plugin-node": "^11.1.0", + "eslint-plugin-notice": "^0.9.10", + "eslint-plugin-prettier": "^5.1.3", + "eslint-plugin-react": "^7.34.1", + "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-security": "^3.0.0", + "husky": "^4.3.8", + "inquirer": "^8.2.6", + "is-ci": "^3.0.1", + "lint-staged": "15.2.7", + "listr": "^0.14.3", + "listr-inquirer": "^0.1.0", + "lodash": "^4.17.21", + "prettier": "^3.2.5", + "read-pkg-up": "^7.0.1", + "semver": "^7.6.1", + "stylelint": "^16.6.1", + "stylelint-config-recess-order": "^5.0.1", + "stylelint-config-standard": "^36.0.0", + "stylelint-no-unsupported-browser-features": "^8.0.1", + "yargs": "^17.7.2" + } + }, + "@sumup-oss/icons": { "version": "file:packages/icons", "requires": { "@babel/core": "^7.25.2", @@ -49715,15 +49718,15 @@ "typescript": "^5.5.4" } }, - "@sumup/intl": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@sumup/intl/-/intl-1.6.0.tgz", - "integrity": "sha512-oJyGNBv/lgga57uTPZtvLxG+K71tEo0wN54CpeUi/3HrfcAdr6YkAayhmcRT+J3SjNWcSa7vNbynLGfV6j0ESQ==", + "@sumup-oss/intl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@sumup-oss/intl/-/intl-2.0.0.tgz", + "integrity": "sha512-aAbIZFNUs64ePHUEXfIRnOtzZ+N8TyTmypThxfjApvtioPIHCeoSzlp1TvT7KelImXI3Uxy8duuHNEP/S9yU9w==", "requires": { "intl-format-cache": "^4.2.27" } }, - "@sumup/remix-template-circuit-ui": { + "@sumup-oss/remix-template-circuit-ui": { "version": "file:packages/remix-template", "requires": { "@remix-run/css-bundle": "^2.10.3", @@ -49731,13 +49734,13 @@ "@remix-run/node": "^2.10.3", "@remix-run/react": "^2.10.3", "@remix-run/serve": "^2.10.3", + "@sumup-oss/circuit-ui": "^8.0.0", + "@sumup-oss/design-tokens": "^7.0.0", + "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", "@sumup-oss/foundry": "^8.1.1", - "@sumup/circuit-ui": "^8.0.0", - "@sumup/design-tokens": "^7.0.0", - "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/icons": "^4.0.0", - "@sumup/intl": "^1.6.0", - "@sumup/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/icons": "^4.0.0", + "@sumup-oss/intl": "^2.0.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "eslint-plugin-prettier": "^5.2.1", @@ -49748,10 +49751,10 @@ "typescript-plugin-css-modules": "^5.1.0" } }, - "@sumup/stylelint-plugin-circuit-ui": { + "@sumup-oss/stylelint-plugin-circuit-ui": { "version": "file:packages/stylelint-plugin-circuit-ui", "requires": { - "@sumup/design-tokens": "^7.0.0", + "@sumup-oss/design-tokens": "^7.0.0", "@tsconfig/node18": "^18.2.4", "jest-preset-stylelint": "^7.1.0", "typescript": "^5.5.4" @@ -64279,13 +64282,13 @@ "version": "file:packages/cna-template/template", "requires": { "@next/bundle-analyzer": "^14.2.5", + "@sumup-oss/circuit-ui": "^8.0.0", + "@sumup-oss/design-tokens": "^7.0.0", + "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", "@sumup-oss/foundry": "^8.1.1", - "@sumup/circuit-ui": "^8.0.0", - "@sumup/design-tokens": "^7.0.0", - "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/icons": "^4.0.0", - "@sumup/intl": "^1.5.0", - "@sumup/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/icons": "^4.0.0", + "@sumup-oss/intl": "^2.0.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", diff --git a/package.json b/package.json index 2748c8d826..487ea8abe5 100644 --- a/package.json +++ b/package.json @@ -62,8 +62,8 @@ "@storybook/test": "^8.2.4", "@storybook/theming": "^8.2.4", "@sumup-oss/foundry": "^8.1.1", - "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", "@types/node": "^18.19.39", "@vitest/coverage-v8": "^2.0.5", "audit-ci": "^7.1.0", diff --git a/packages/astro-template/CHANGELOG.md b/packages/astro-template/CHANGELOG.md index ddfe20bc24..2e398e31f0 100644 --- a/packages/astro-template/CHANGELOG.md +++ b/packages/astro-template/CHANGELOG.md @@ -1,4 +1,4 @@ -# @sumup/astro-template-circuit-ui +# @sumup-oss/astro-template-circuit-ui ## 2.1.0 diff --git a/packages/astro-template/README.md b/packages/astro-template/README.md index 3974f60685..ea8a1d3ccd 100644 --- a/packages/astro-template/README.md +++ b/packages/astro-template/README.md @@ -4,7 +4,7 @@ A template for Circuit UI + Astro apps with SumUp's frontend stack. -[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup/circuit-ui)](https://www.npmjs.com/package/@sumup/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/circuit-ui/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md) +[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup-oss/circuit-ui)](https://www.npmjs.com/package/@sumup-oss/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/circuit-ui/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md) diff --git a/packages/astro-template/package.json b/packages/astro-template/package.json index 9e7a464822..870604dd9a 100644 --- a/packages/astro-template/package.json +++ b/packages/astro-template/package.json @@ -1,5 +1,5 @@ { - "name": "@sumup/astro-template-circuit-ui", + "name": "@sumup-oss/astro-template-circuit-ui", "type": "module", "version": "2.1.0", "private": true, @@ -16,10 +16,10 @@ }, "dependencies": { "@astrojs/react": "^3.6.1", - "@sumup/circuit-ui": "^8.0.0", - "@sumup/design-tokens": "^7.0.0", - "@sumup/icons": "^4.0.0", - "@sumup/intl": "^1.6.0", + "@sumup-oss/circuit-ui": "^8.0.0", + "@sumup-oss/design-tokens": "^7.0.0", + "@sumup-oss/icons": "^4.0.0", + "@sumup-oss/intl": "^2.0.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "astro": "^4.13.0", @@ -28,8 +28,8 @@ }, "devDependencies": { "@sumup-oss/foundry": "^8.1.1", - "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", "prettier-plugin-astro": "^0.14.1", "typescript": "^5.5.4" } diff --git a/packages/astro-template/src/components/DocCard.astro b/packages/astro-template/src/components/DocCard.astro index 3301cb41ba..61fb16dca4 100644 --- a/packages/astro-template/src/components/DocCard.astro +++ b/packages/astro-template/src/components/DocCard.astro @@ -1,6 +1,6 @@ --- -import { Body, Card, Headline } from '@sumup/circuit-ui'; -import { uniqueId } from '@sumup/circuit-ui/legacy'; +import { Body, Card, Headline } from '@sumup-oss/circuit-ui'; +import { uniqueId } from '@sumup-oss/circuit-ui/legacy'; interface Props { title: string; diff --git a/packages/astro-template/src/layouts/Root.astro b/packages/astro-template/src/layouts/Root.astro index d444dbcec7..b041244ba1 100644 --- a/packages/astro-template/src/layouts/Root.astro +++ b/packages/astro-template/src/layouts/Root.astro @@ -1,8 +1,8 @@ --- -import '@sumup/design-tokens/light.css'; -import '@sumup/circuit-ui/styles.css'; +import '@sumup-oss/design-tokens/light.css'; +import '@sumup-oss/circuit-ui/styles.css'; -import { SumUpLogo } from '@sumup/icons'; +import { SumUpLogo } from '@sumup-oss/icons'; interface Props { title: string; diff --git a/packages/astro-template/src/pages/index.astro b/packages/astro-template/src/pages/index.astro index 5ef4ae577c..30fd0d931c 100644 --- a/packages/astro-template/src/pages/index.astro +++ b/packages/astro-template/src/pages/index.astro @@ -1,5 +1,5 @@ --- -import { Title, BodyLarge } from '@sumup/circuit-ui'; +import { Title, BodyLarge } from '@sumup-oss/circuit-ui'; import Root from '../layouts/Root.astro'; import DocCard from '../components/DocCard.astro'; diff --git a/packages/circuit-ui/CHANGELOG.md b/packages/circuit-ui/CHANGELOG.md index 88a28d1d44..e86b3ce4ef 100644 --- a/packages/circuit-ui/CHANGELOG.md +++ b/packages/circuit-ui/CHANGELOG.md @@ -1,4 +1,4 @@ -# @sumup/circuit-ui +# @sumup-oss/circuit-ui ## 8.12.1 diff --git a/packages/circuit-ui/README.md b/packages/circuit-ui/README.md index 52d31d46cd..da0f573b39 100644 --- a/packages/circuit-ui/README.md +++ b/packages/circuit-ui/README.md @@ -1,8 +1,8 @@
-# @sumup/circuit-ui +# @sumup-oss/circuit-ui -[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup/circuit-ui)](https://www.npmjs.com/package/@sumup/circuit-ui) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/circuit-ui/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md) +[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup-oss/circuit-ui)](https://www.npmjs.com/package/@sumup-oss/circuit-ui) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/circuit-ui/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md) A React component library designed to help developers build inclusive, performant, and trusted user interfaces. @@ -14,18 +14,18 @@ Depending on your preference, run one of the following in your terminal: ```sh # With npm -npm install --save @sumup/circuit-ui +npm install --save @sumup-oss/circuit-ui # With yarn v1 -yarn add @sumup/circuit-ui +yarn add @sumup-oss/circuit-ui ``` -`@sumup/circuit-ui` has a number of required peer dependencies. If your project doesn't have them already, you can install them by running: +`@sumup-oss/circuit-ui` has a number of required peer dependencies. If your project doesn't have them already, you can install them by running: ```sh # With npm -npm install --save react react-dom @emotion/react @emotion/styled @sumup/design-tokens @sumup/icons @sumup/intl @sumup/collector +npm install --save react react-dom @sumup-oss/design-tokens @sumup-oss/icons @sumup-oss/intl # With yarn v1 -yarn add react react-dom @emotion/react @emotion/styled @sumup/design-tokens @sumup/icons @sumup/intl @sumup/collector +yarn add react react-dom @sumup-oss/design-tokens @sumup-oss/icons @sumup-oss/intl ``` ## Usage diff --git a/packages/circuit-ui/components/Avatar/Avatar.tsx b/packages/circuit-ui/components/Avatar/Avatar.tsx index 38374942ca..a3a9d85112 100644 --- a/packages/circuit-ui/components/Avatar/Avatar.tsx +++ b/packages/circuit-ui/components/Avatar/Avatar.tsx @@ -14,7 +14,7 @@ */ import type { ImgHTMLAttributes } from 'react'; -import { Profile, Image as ImageIcon } from '@sumup/icons'; +import { Profile, Image as ImageIcon } from '@sumup-oss/icons'; import { CircuitError } from '../../util/errors.js'; import { clsx } from '../../styles/clsx.js'; diff --git a/packages/circuit-ui/components/Button/Button.stories.tsx b/packages/circuit-ui/components/Button/Button.stories.tsx index 43e004dafd..a37f22e8ab 100644 --- a/packages/circuit-ui/components/Button/Button.stories.tsx +++ b/packages/circuit-ui/components/Button/Button.stories.tsx @@ -14,7 +14,7 @@ */ import { useEffect, useState } from 'react'; -import { ArrowSlanted, Plus } from '@sumup/icons'; +import { ArrowSlanted, Plus } from '@sumup-oss/icons'; import { Stack } from '../../../../.storybook/components/index.js'; import { ButtonGroup } from '../ButtonGroup/index.js'; diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx index 5f69f1205e..75e08a8103 100644 --- a/packages/circuit-ui/components/Button/Button.tsx +++ b/packages/circuit-ui/components/Button/Button.tsx @@ -19,7 +19,7 @@ import type { ReactNode, RefAttributes, } from 'react'; -import type { IconComponentType } from '@sumup/icons'; +import type { IconComponentType } from '@sumup-oss/icons'; import { CircuitError } from '../../util/errors.js'; import { clsx } from '../../styles/clsx.js'; diff --git a/packages/circuit-ui/components/Button/IconButton.spec.tsx b/packages/circuit-ui/components/Button/IconButton.spec.tsx index 7b4d1a1d1c..aeeede1489 100644 --- a/packages/circuit-ui/components/Button/IconButton.spec.tsx +++ b/packages/circuit-ui/components/Button/IconButton.spec.tsx @@ -14,7 +14,7 @@ */ import { describe, expect, it } from 'vitest'; -import { Close } from '@sumup/icons'; +import { Close } from '@sumup-oss/icons'; import { render, screen } from '../../util/test-utils.js'; @@ -36,7 +36,7 @@ describe('IconButton', () => { */ it('should render an icon passed as children', () => { render( - // eslint-disable-next-line @sumup/circuit-ui/no-renamed-props + // eslint-disable-next-line @sumup-oss/circuit-ui/no-renamed-props , diff --git a/packages/circuit-ui/components/Button/IconButton.stories.tsx b/packages/circuit-ui/components/Button/IconButton.stories.tsx index e980aa2bd5..f4a55c6f2b 100644 --- a/packages/circuit-ui/components/Button/IconButton.stories.tsx +++ b/packages/circuit-ui/components/Button/IconButton.stories.tsx @@ -14,7 +14,7 @@ */ import { useEffect, useState } from 'react'; -import { Plus } from '@sumup/icons'; +import { Plus } from '@sumup-oss/icons'; import { Stack } from '../../../../.storybook/components/index.js'; diff --git a/packages/circuit-ui/components/Button/IconButton.tsx b/packages/circuit-ui/components/Button/IconButton.tsx index ca92e2009b..049237a30e 100644 --- a/packages/circuit-ui/components/Button/IconButton.tsx +++ b/packages/circuit-ui/components/Button/IconButton.tsx @@ -21,7 +21,7 @@ import { type ReactElement, type RefAttributes, } from 'react'; -import type { IconComponentType, IconProps } from '@sumup/icons'; +import type { IconComponentType, IconProps } from '@sumup-oss/icons'; import { clsx } from '../../styles/clsx.js'; import { CircuitError } from '../../util/errors.js'; diff --git a/packages/circuit-ui/components/Button/base.tsx b/packages/circuit-ui/components/Button/base.tsx index f0cba98af8..8c372368c8 100644 --- a/packages/circuit-ui/components/Button/base.tsx +++ b/packages/circuit-ui/components/Button/base.tsx @@ -21,7 +21,7 @@ import { type AnchorHTMLAttributes, type ReactNode, } from 'react'; -import type { IconComponentType } from '@sumup/icons'; +import type { IconComponentType } from '@sumup-oss/icons'; import type { ClickEvent } from '../../types/events.js'; import type { AsPropType } from '../../types/prop-types.js'; diff --git a/packages/circuit-ui/components/Calendar/Calendar.mdx b/packages/circuit-ui/components/Calendar/Calendar.mdx index d36b92485d..917b694f3d 100644 --- a/packages/circuit-ui/components/Calendar/Calendar.mdx +++ b/packages/circuit-ui/components/Calendar/Calendar.mdx @@ -53,7 +53,7 @@ Use the `onMonthChange` prop to lazy-load modifiers for the currently visible mo ```tsx import { useState } from 'react'; -import { Calendar, type CalendarProps } from '@sumup/circuit-ui/experimental'; +import { Calendar, type CalendarProps } from '@sumup-oss/circuit-ui/experimental'; import { Temporal } from 'temporal-polyfill'; function App() { diff --git a/packages/circuit-ui/components/Calendar/Calendar.tsx b/packages/circuit-ui/components/Calendar/Calendar.tsx index 4ed36bf9a0..18c3a6facd 100644 --- a/packages/circuit-ui/components/Calendar/Calendar.tsx +++ b/packages/circuit-ui/components/Calendar/Calendar.tsx @@ -28,7 +28,7 @@ import { type MouseEvent, } from 'react'; import { Temporal } from 'temporal-polyfill'; -import { ArrowLeft, ArrowRight } from '@sumup/icons'; +import { ArrowLeft, ArrowRight } from '@sumup-oss/icons'; import { utilClasses } from '../../styles/utility.js'; import { getBrowserLocale, type Locale } from '../../util/i18n.js'; diff --git a/packages/circuit-ui/components/Carousel/components/Buttons/Buttons.tsx b/packages/circuit-ui/components/Carousel/components/Buttons/Buttons.tsx index 453c485d10..dd23371b21 100644 --- a/packages/circuit-ui/components/Carousel/components/Buttons/Buttons.tsx +++ b/packages/circuit-ui/components/Carousel/components/Buttons/Buttons.tsx @@ -14,7 +14,7 @@ */ import type { HTMLAttributes } from 'react'; -import { ChevronLeft, ChevronRight, Pause, Play } from '@sumup/icons'; +import { ChevronLeft, ChevronRight, Pause, Play } from '@sumup-oss/icons'; import { IconButton, type IconButtonProps } from '../../../Button/index.js'; import { clsx } from '../../../../styles/clsx.js'; diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.mdx b/packages/circuit-ui/components/Checkbox/Checkbox.mdx index 6fdda7c7e8..0ea8745dff 100644 --- a/packages/circuit-ui/components/Checkbox/Checkbox.mdx +++ b/packages/circuit-ui/components/Checkbox/Checkbox.mdx @@ -61,7 +61,7 @@ The Checkbox can be used as a controlled or uncontrolled component. ```tsx import { useState } from 'react'; -import { Checkbox } from '@sumup/circuit-ui'; +import { Checkbox } from '@sumup-oss/circuit-ui'; function Controlled() { const [checked, setChecked] = useState(false); @@ -85,7 +85,7 @@ function Controlled() { ```tsx import { useRef } from 'react'; -import { Checkbox } from '@sumup/circuit-ui'; +import { Checkbox } from '@sumup-oss/circuit-ui'; function Uncontrolled() { const checkboxRef = useRef(null); diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.tsx b/packages/circuit-ui/components/Checkbox/Checkbox.tsx index 0103265340..689c776298 100644 --- a/packages/circuit-ui/components/Checkbox/Checkbox.tsx +++ b/packages/circuit-ui/components/Checkbox/Checkbox.tsx @@ -22,7 +22,7 @@ import { useRef, type InputHTMLAttributes, } from 'react'; -import { Checkmark } from '@sumup/icons'; +import { Checkmark } from '@sumup-oss/icons'; import { FieldValidationHint, FieldWrapper } from '../Field/index.js'; import { diff --git a/packages/circuit-ui/components/CheckboxGroup/CheckboxGroup.mdx b/packages/circuit-ui/components/CheckboxGroup/CheckboxGroup.mdx index b6ae209d95..521ff3b675 100644 --- a/packages/circuit-ui/components/CheckboxGroup/CheckboxGroup.mdx +++ b/packages/circuit-ui/components/CheckboxGroup/CheckboxGroup.mdx @@ -50,7 +50,7 @@ The CheckboxGroup can be used as a controlled or uncontrolled component. ```tsx import { useState, type ChangeEvent } from 'react'; -import { CheckboxGroup, type CheckboxProps } from '@sumup/circuit-ui'; +import { CheckboxGroup, type CheckboxProps } from '@sumup-oss/circuit-ui'; function Controlled() { const [value, setValue] = useState([]); @@ -84,7 +84,7 @@ function Controlled() { ```tsx import { useRef } from 'react'; -import { CheckboxGroup } from '@sumup/circuit-ui'; +import { CheckboxGroup } from '@sumup-oss/circuit-ui'; function Uncontrolled() { const checkboxRefs = useRef({}); diff --git a/packages/circuit-ui/components/CloseButton/CloseButton.tsx b/packages/circuit-ui/components/CloseButton/CloseButton.tsx index 3f4b15a353..1c7fbfa6c5 100644 --- a/packages/circuit-ui/components/CloseButton/CloseButton.tsx +++ b/packages/circuit-ui/components/CloseButton/CloseButton.tsx @@ -14,7 +14,7 @@ */ import { forwardRef } from 'react'; -import { Close } from '@sumup/icons'; +import { Close } from '@sumup-oss/icons'; import { IconButton, type IconButtonProps } from '../Button/IconButton.js'; diff --git a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx index d20a690f67..709c3b9402 100644 --- a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx +++ b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx @@ -87,7 +87,7 @@ describe('CurrencyInput', () => { }); describe('Labeling', () => { - const EUR_CURRENCY_SYMBOL = '€'; // formatted by `@sumup/intl` + const EUR_CURRENCY_SYMBOL = '€'; // formatted by `@sumup-oss/intl` /** * Note: further labeling logic is covered by the underlying `Input` component. */ diff --git a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx index bd263702b8..c5e75954ef 100644 --- a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx +++ b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx @@ -16,7 +16,7 @@ 'use client'; import { forwardRef, useId } from 'react'; -import { resolveCurrencyFormat } from '@sumup/intl'; +import { resolveCurrencyFormat } from '@sumup-oss/intl'; import { NumericFormat, type NumericFormatProps } from 'react-number-format'; import { clsx } from '../../styles/clsx.js'; diff --git a/packages/circuit-ui/components/CurrencyInput/CurrencyInputService.ts b/packages/circuit-ui/components/CurrencyInput/CurrencyInputService.ts index ce0e3041a5..f9c243d155 100644 --- a/packages/circuit-ui/components/CurrencyInput/CurrencyInputService.ts +++ b/packages/circuit-ui/components/CurrencyInput/CurrencyInputService.ts @@ -13,7 +13,7 @@ * limitations under the License. */ -import { formatNumber } from '@sumup/intl'; +import { formatNumber } from '@sumup-oss/intl'; export function formatPlaceholder( placeholder?: string | number, diff --git a/packages/circuit-ui/components/Field/Field.tsx b/packages/circuit-ui/components/Field/Field.tsx index 9d3d243c0b..02b769c980 100644 --- a/packages/circuit-ui/components/Field/Field.tsx +++ b/packages/circuit-ui/components/Field/Field.tsx @@ -19,7 +19,7 @@ import { type HTMLAttributes, type LabelHTMLAttributes, } from 'react'; -import { Confirm, Notify, Alert } from '@sumup/icons'; +import { Confirm, Notify, Alert } from '@sumup-oss/icons'; import { clsx } from '../../styles/clsx.js'; import { utilClasses } from '../../styles/utility.js'; diff --git a/packages/circuit-ui/components/Headline/Headline.mdx b/packages/circuit-ui/components/Headline/Headline.mdx index adf8b41100..5a4679db2a 100644 --- a/packages/circuit-ui/components/Headline/Headline.mdx +++ b/packages/circuit-ui/components/Headline/Headline.mdx @@ -62,7 +62,7 @@ Consider adding a heading to make the section's purpose clearer. You can also add visually hidden headings using the [`hideVisually()` style mixin](Features/Style-Mixins/Hide-Visually): ```tsx -import { Headline, hideVisually } from '@sumup/circuit-ui'; +import { Headline, hideVisually } from '@sumup-oss/circuit-ui'; function HiddenHeadline() { return ( diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.tsx index 20d3be2dfc..57d951ac47 100644 --- a/packages/circuit-ui/components/ImageInput/ImageInput.tsx +++ b/packages/circuit-ui/components/ImageInput/ImageInput.tsx @@ -25,7 +25,7 @@ import { type DragEvent, type ComponentType, } from 'react'; -import { Delete, Plus } from '@sumup/icons'; +import { Delete, Plus } from '@sumup-oss/icons'; import type { ClickEvent } from '../../types/events.js'; import { utilClasses } from '../../styles/utility.js'; diff --git a/packages/circuit-ui/components/ListItem/ListItem.spec.tsx b/packages/circuit-ui/components/ListItem/ListItem.spec.tsx index cc265da297..3d664ba9b3 100644 --- a/packages/circuit-ui/components/ListItem/ListItem.spec.tsx +++ b/packages/circuit-ui/components/ListItem/ListItem.spec.tsx @@ -15,7 +15,7 @@ import { describe, expect, it, vi } from 'vitest'; import { createRef, type FC } from 'react'; -import { SumUpCard, type IconProps } from '@sumup/icons'; +import { SumUpCard, type IconProps } from '@sumup-oss/icons'; import { render, diff --git a/packages/circuit-ui/components/ListItem/ListItem.stories.tsx b/packages/circuit-ui/components/ListItem/ListItem.stories.tsx index 46eb61566d..4c31994afc 100644 --- a/packages/circuit-ui/components/ListItem/ListItem.stories.tsx +++ b/packages/circuit-ui/components/ListItem/ListItem.stories.tsx @@ -14,7 +14,7 @@ */ import { action } from '@storybook/addon-actions'; -import { SumUpCard, Confirm } from '@sumup/icons'; +import { SumUpCard, Confirm } from '@sumup-oss/icons'; import { Stack } from '../../../../.storybook/components/index.js'; import { Body } from '../Body/index.js'; diff --git a/packages/circuit-ui/components/ListItem/ListItem.tsx b/packages/circuit-ui/components/ListItem/ListItem.tsx index 1c380f3d7f..893ce5dc25 100644 --- a/packages/circuit-ui/components/ListItem/ListItem.tsx +++ b/packages/circuit-ui/components/ListItem/ListItem.tsx @@ -22,7 +22,7 @@ import { type AnchorHTMLAttributes, type HTMLAttributes, } from 'react'; -import { ChevronRight, type IconComponentType } from '@sumup/icons'; +import { ChevronRight, type IconComponentType } from '@sumup-oss/icons'; import type { ClickEvent } from '../../types/events.js'; import type { AsPropType } from '../../types/prop-types.js'; @@ -44,7 +44,7 @@ export interface BaseProps { variant?: Variant; /** * Display a leading component. - * Pass an icon from `@sumup/icons` or a custom component. + * Pass an icon from `@sumup-oss/icons` or a custom component. */ leadingComponent?: IconComponentType | ReactNode; /** diff --git a/packages/circuit-ui/components/ListItemGroup/ListItemGroup.stories.tsx b/packages/circuit-ui/components/ListItemGroup/ListItemGroup.stories.tsx index d532f2e1db..9db829a8f3 100644 --- a/packages/circuit-ui/components/ListItemGroup/ListItemGroup.stories.tsx +++ b/packages/circuit-ui/components/ListItemGroup/ListItemGroup.stories.tsx @@ -14,7 +14,7 @@ */ import { useState } from 'react'; -import { SumUpCard, Confirm, Alert } from '@sumup/icons'; +import { SumUpCard, Confirm, Alert } from '@sumup-oss/icons'; import { Stack } from '../../../../.storybook/components/index.js'; import { Body } from '../Body/index.js'; diff --git a/packages/circuit-ui/components/Modal/Modal.mdx b/packages/circuit-ui/components/Modal/Modal.mdx index 6c3c2e4ee7..d6c384849e 100644 --- a/packages/circuit-ui/components/Modal/Modal.mdx +++ b/packages/circuit-ui/components/Modal/Modal.mdx @@ -34,7 +34,7 @@ First, wrap your application in the `ModalProvider` which keeps track of the ope ```tsx // _app.tsx for Next.js or App.js for CRA -import { ModalProvider } from '@sumup/circuit-ui'; +import { ModalProvider } from '@sumup-oss/circuit-ui'; export default function App() { return {/* Your content here... */}; @@ -44,7 +44,7 @@ export default function App() { Then, use the `useModal` hook to open a modal from a component: ```tsx -import { useModal, Button, Body } from '@sumup/circuit-ui'; +import { useModal, Button, Body } from '@sumup-oss/circuit-ui'; export function SayHello({ name }) { const { setModal } = useModal(); diff --git a/packages/circuit-ui/components/Notification/constants.ts b/packages/circuit-ui/components/Notification/constants.ts index 0bddfd8aa9..eec15583a5 100644 --- a/packages/circuit-ui/components/Notification/constants.ts +++ b/packages/circuit-ui/components/Notification/constants.ts @@ -19,7 +19,7 @@ import { Info, Notify, type IconComponentType, -} from '@sumup/icons'; +} from '@sumup-oss/icons'; export type NotificationVariant = 'info' | 'success' | 'warning' | 'danger'; diff --git a/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.spec.tsx b/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.spec.tsx index 80a6b31794..2653509284 100644 --- a/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.spec.tsx +++ b/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.spec.tsx @@ -14,7 +14,7 @@ */ import { describe, expect, it, vi } from 'vitest'; -import { Plus } from '@sumup/icons'; +import { Plus } from '@sumup-oss/icons'; import { createRef } from 'react'; import { render, axe, screen } from '../../util/test-utils.js'; diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.spec.tsx b/packages/circuit-ui/components/NotificationModal/NotificationModal.spec.tsx index 3369dac7b2..19c2c86300 100644 --- a/packages/circuit-ui/components/NotificationModal/NotificationModal.spec.tsx +++ b/packages/circuit-ui/components/NotificationModal/NotificationModal.spec.tsx @@ -14,7 +14,7 @@ */ import { describe, expect, it, vi } from 'vitest'; -import { Plus } from '@sumup/icons'; +import { Plus } from '@sumup-oss/icons'; import { axe, render, userEvent, screen } from '../../util/test-utils.js'; diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx b/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx index b1f1b915a7..9d7b4f9e0b 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx @@ -33,7 +33,7 @@ First, wrap your application in the `ToastProvider` which keeps track of the ope ```tsx // _app.tsx for Next.js or App.js for CRA -import { ToastProvider } from '@sumup/circuit-ui'; +import { ToastProvider } from '@sumup-oss/circuit-ui'; export default function App() { return {/* Your content goes here... */}; @@ -43,7 +43,7 @@ export default function App() { Then, use the `useNotificationToast` hook to open a toast from a component: ```tsx -import { useNotificationToast, Button } from '@sumup/circuit-ui'; +import { useNotificationToast, Button } from '@sumup-oss/circuit-ui'; export function App({}) { const { setToast } = useNotificationToast(); diff --git a/packages/circuit-ui/components/Pagination/Pagination.tsx b/packages/circuit-ui/components/Pagination/Pagination.tsx index 218c1350ab..492fe24fd9 100644 --- a/packages/circuit-ui/components/Pagination/Pagination.tsx +++ b/packages/circuit-ui/components/Pagination/Pagination.tsx @@ -16,7 +16,7 @@ 'use client'; import type { HTMLAttributes, ReactElement } from 'react'; -import { ChevronLeft, ChevronRight } from '@sumup/icons'; +import { ChevronLeft, ChevronRight } from '@sumup-oss/icons'; import { IconButton } from '../Button/index.js'; import { diff --git a/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx b/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx index c43d0f3332..617cab8fc6 100644 --- a/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx +++ b/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx @@ -16,7 +16,7 @@ 'use client'; import { forwardRef, useId } from 'react'; -import { resolveNumberFormat } from '@sumup/intl'; +import { resolveNumberFormat } from '@sumup-oss/intl'; import { NumericFormat, type NumericFormatProps } from 'react-number-format'; import { clsx } from '../../styles/clsx.js'; diff --git a/packages/circuit-ui/components/PercentageInput/PercentageInputService.ts b/packages/circuit-ui/components/PercentageInput/PercentageInputService.ts index 864bd3e856..4eb51bfefb 100644 --- a/packages/circuit-ui/components/PercentageInput/PercentageInputService.ts +++ b/packages/circuit-ui/components/PercentageInput/PercentageInputService.ts @@ -13,7 +13,7 @@ * limitations under the License. */ -import { formatNumber } from '@sumup/intl'; +import { formatNumber } from '@sumup-oss/intl'; export function formatPlaceholder( placeholder?: string | number, diff --git a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.stories.tsx b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.stories.tsx index 966dcc8088..51730125a7 100644 --- a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.stories.tsx +++ b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.stories.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import { FlagDe, FlagUs, type IconComponentType } from '@sumup/icons'; +import { FlagDe, FlagUs, type IconComponentType } from '@sumup-oss/icons'; import { useState } from 'react'; import { action } from '@storybook/addon-actions'; diff --git a/packages/circuit-ui/components/Popover/Popover.spec.tsx b/packages/circuit-ui/components/Popover/Popover.spec.tsx index 3ddf068f9b..3106d3ecf6 100644 --- a/packages/circuit-ui/components/Popover/Popover.spec.tsx +++ b/packages/circuit-ui/components/Popover/Popover.spec.tsx @@ -15,7 +15,7 @@ import type { FC } from 'react'; import { afterEach, describe, expect, it, vi } from 'vitest'; -import { Delete, Add, Download, type IconProps } from '@sumup/icons'; +import { Delete, Add, Download, type IconProps } from '@sumup-oss/icons'; import { act, diff --git a/packages/circuit-ui/components/Popover/Popover.stories.tsx b/packages/circuit-ui/components/Popover/Popover.stories.tsx index 4c92d5e7af..07300572fe 100644 --- a/packages/circuit-ui/components/Popover/Popover.stories.tsx +++ b/packages/circuit-ui/components/Popover/Popover.stories.tsx @@ -14,7 +14,7 @@ */ import { action } from '@storybook/addon-actions'; -import { Add, Edit, Delete } from '@sumup/icons'; +import { Add, Edit, Delete } from '@sumup-oss/icons'; import { useState, type ReactNode } from 'react'; import { Button } from '../Button/index.js'; diff --git a/packages/circuit-ui/components/Popover/Popover.tsx b/packages/circuit-ui/components/Popover/Popover.tsx index 03496a170b..143d4f7abc 100644 --- a/packages/circuit-ui/components/Popover/Popover.tsx +++ b/packages/circuit-ui/components/Popover/Popover.tsx @@ -34,7 +34,7 @@ import { type Placement, type SizeOptions, } from '@floating-ui/react-dom'; -import type { IconComponentType } from '@sumup/icons'; +import type { IconComponentType } from '@sumup-oss/icons'; import type { ClickEvent } from '../../types/events.js'; import type { EmotionAsPropType } from '../../types/prop-types.js'; @@ -64,7 +64,7 @@ export interface BaseProps { */ onClick?: (event: ClickEvent) => void; /** - * Display an icon in addition to the label. Designed for 24px icons from `@sumup/icons`. + * Display an icon in addition to the label. Designed for 24px icons from `@sumup-oss/icons`. */ icon?: IconComponentType; /** diff --git a/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.mdx b/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.mdx index f3dd96ba42..e32ce75f64 100644 --- a/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.mdx +++ b/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.mdx @@ -45,7 +45,7 @@ The RadioButtonGroup can be used as a controlled or uncontrolled component. ```tsx import { useState, type ChangeEvent } from 'react'; -import { RadioButtonGroup, type RadioButtonProps } from '@sumup/circuit-ui'; +import { RadioButtonGroup, type RadioButtonProps } from '@sumup-oss/circuit-ui'; function Controlled() { const [value, setValue] = useState(); @@ -73,7 +73,7 @@ function Controlled() { ```tsx import { useRef } from 'react'; -import { RadioButtonGroup } from '@sumup/circuit-ui'; +import { RadioButtonGroup } from '@sumup-oss/circuit-ui'; function Uncontrolled() { const radioButtonRefs = useRef({}); diff --git a/packages/circuit-ui/components/SearchInput/SearchInput.tsx b/packages/circuit-ui/components/SearchInput/SearchInput.tsx index 1a03791873..3446570515 100644 --- a/packages/circuit-ui/components/SearchInput/SearchInput.tsx +++ b/packages/circuit-ui/components/SearchInput/SearchInput.tsx @@ -16,7 +16,7 @@ 'use client'; import { forwardRef, useRef } from 'react'; -import { Search } from '@sumup/icons'; +import { Search } from '@sumup-oss/icons'; import { Input, type InputElement, type InputProps } from '../Input/index.js'; import { CloseButton } from '../CloseButton/index.js'; diff --git a/packages/circuit-ui/components/Select/Select.stories.tsx b/packages/circuit-ui/components/Select/Select.stories.tsx index 87a8b73657..a17fc5e7d3 100644 --- a/packages/circuit-ui/components/Select/Select.stories.tsx +++ b/packages/circuit-ui/components/Select/Select.stories.tsx @@ -14,7 +14,12 @@ */ import { useState } from 'react'; -import { FlagDe, FlagUs, FlagFr, type IconComponentType } from '@sumup/icons'; +import { + FlagDe, + FlagUs, + FlagFr, + type IconComponentType, +} from '@sumup-oss/icons'; import { Select, type SelectProps } from './Select.js'; diff --git a/packages/circuit-ui/components/Select/Select.tsx b/packages/circuit-ui/components/Select/Select.tsx index a2f7b1fd9d..efe213c35e 100644 --- a/packages/circuit-ui/components/Select/Select.tsx +++ b/packages/circuit-ui/components/Select/Select.tsx @@ -20,7 +20,7 @@ import { type ReactNode, type SelectHTMLAttributes, } from 'react'; -import { ChevronDown } from '@sumup/icons'; +import { ChevronDown } from '@sumup-oss/icons'; import type { ReturnType } from '../../types/return-type.js'; import { diff --git a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.mdx b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.mdx index 6b41b95a0d..fe8ef6563b 100644 --- a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.mdx +++ b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.mdx @@ -70,7 +70,7 @@ The SelectorGroup can be used as a controlled or uncontrolled component. ```tsx import { useState, type ChangeEvent } from 'react'; -import { SelectorGroup, type SelectorProps } from '@sumup/circuit-ui'; +import { SelectorGroup, type SelectorProps } from '@sumup-oss/circuit-ui'; function Controlled() { const [value, setValue] = useState(); @@ -98,7 +98,7 @@ function Controlled() { ```tsx import { useRef } from 'react'; -import { SelectorGroup } from '@sumup/circuit-ui'; +import { SelectorGroup } from '@sumup-oss/circuit-ui'; function Uncontrolled() { const checkboxRefs = useRef({}); diff --git a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.stories.tsx b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.stories.tsx index f872799e1a..1595cbd9dc 100644 --- a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.stories.tsx +++ b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.stories.tsx @@ -15,7 +15,7 @@ import { useState, type ChangeEvent, type FocusEvent } from 'react'; import { action } from '@storybook/addon-actions'; -import { CardReaderAir, CardReaderSolo, MobilePhone } from '@sumup/icons'; +import { CardReaderAir, CardReaderSolo, MobilePhone } from '@sumup-oss/icons'; import { Stack } from '../../../../.storybook/components/index.js'; import { Selector, type SelectorProps } from '../Selector/Selector.js'; diff --git a/packages/circuit-ui/components/SideNavigation/SideNavigation.spec.tsx b/packages/circuit-ui/components/SideNavigation/SideNavigation.spec.tsx index fd1e9f3c6d..3c5ff23c5d 100644 --- a/packages/circuit-ui/components/SideNavigation/SideNavigation.spec.tsx +++ b/packages/circuit-ui/components/SideNavigation/SideNavigation.spec.tsx @@ -15,7 +15,7 @@ /* eslint-disable react/display-name */ import { beforeAll, describe, expect, it, vi } from 'vitest'; -import { Shop } from '@sumup/icons'; +import { Shop } from '@sumup-oss/icons'; import { render, diff --git a/packages/circuit-ui/components/SideNavigation/SideNavigation.stories.tsx b/packages/circuit-ui/components/SideNavigation/SideNavigation.stories.tsx index af11662d9d..bc65fafd37 100644 --- a/packages/circuit-ui/components/SideNavigation/SideNavigation.stories.tsx +++ b/packages/circuit-ui/components/SideNavigation/SideNavigation.stories.tsx @@ -14,7 +14,7 @@ */ import { action } from '@storybook/addon-actions'; -import { Like, Home, LiveChat, Package, Shop } from '@sumup/icons'; +import { Like, Home, LiveChat, Package, Shop } from '@sumup-oss/icons'; import { modes } from '../../../../.storybook/modes.js'; import { ModalProvider } from '../ModalContext/index.js'; diff --git a/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.spec.tsx b/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.spec.tsx index eb8134dfa1..303215cc68 100644 --- a/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.spec.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.spec.tsx @@ -15,7 +15,7 @@ /* eslint-disable react/display-name */ import { describe, expect, it, vi } from 'vitest'; -import { Home, Shop } from '@sumup/icons'; +import { Home, Shop } from '@sumup-oss/icons'; import { render, diff --git a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.spec.tsx b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.spec.tsx index 6410d28060..20e7728660 100644 --- a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.spec.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.spec.tsx @@ -14,7 +14,7 @@ */ import { afterEach, describe, expect, it, vi } from 'vitest'; -import { Home, Shop } from '@sumup/icons'; +import { Home, Shop } from '@sumup-oss/icons'; import type { ClickEvent } from '../../../../types/events.js'; import { diff --git a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx index 496b63e53a..3d2816ff8d 100644 --- a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx @@ -17,7 +17,7 @@ import { Fragment } from 'react'; import ReactModal from 'react-modal'; -import { ChevronDown } from '@sumup/icons'; +import { ChevronDown } from '@sumup-oss/icons'; import { createUseModal, diff --git a/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.spec.tsx b/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.spec.tsx index 40f0827a92..1a700fcb92 100644 --- a/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.spec.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.spec.tsx @@ -15,7 +15,7 @@ import { describe, expect, it, vi } from 'vitest'; import type { FC } from 'react'; -import { Plus, type IconProps } from '@sumup/icons'; +import { Plus, type IconProps } from '@sumup-oss/icons'; import type { ClickEvent } from '../../../../types/events.js'; import { diff --git a/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.tsx b/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.tsx index 1ae4e1941c..bdb63ee05b 100644 --- a/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.tsx @@ -15,7 +15,7 @@ 'use client'; -import { ArrowRight } from '@sumup/icons'; +import { ArrowRight } from '@sumup-oss/icons'; import type { ComponentType } from 'react'; import type { AsPropType } from '../../../../types/prop-types.js'; diff --git a/packages/circuit-ui/components/SideNavigation/types.ts b/packages/circuit-ui/components/SideNavigation/types.ts index 33d09b2709..13c5f4d161 100644 --- a/packages/circuit-ui/components/SideNavigation/types.ts +++ b/packages/circuit-ui/components/SideNavigation/types.ts @@ -14,7 +14,7 @@ */ import type { MouseEvent, KeyboardEvent, AnchorHTMLAttributes } from 'react'; -import type { IconComponentType } from '@sumup/icons'; +import type { IconComponentType } from '@sumup-oss/icons'; import type { BadgeProps } from '../Badge/index.js'; diff --git a/packages/circuit-ui/components/SidePanel/SidePanel.mdx b/packages/circuit-ui/components/SidePanel/SidePanel.mdx index 8cecafd37b..b398f548f8 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanel.mdx +++ b/packages/circuit-ui/components/SidePanel/SidePanel.mdx @@ -50,7 +50,7 @@ In the most straightforward case, simply use the `setSidePanel` function, passin - `headline` - the title of the side panel ```tsx -import { useSidePanel, Button, Body } from '@sumup/circuit-ui'; +import { useSidePanel, Button, Body } from '@sumup-oss/circuit-ui'; export function ShowMore() { const { setSidePanel } = useSidePanel(); diff --git a/packages/circuit-ui/components/SidePanel/components/Header/Header.tsx b/packages/circuit-ui/components/SidePanel/components/Header/Header.tsx index 47f87f71b7..b12f8b2752 100644 --- a/packages/circuit-ui/components/SidePanel/components/Header/Header.tsx +++ b/packages/circuit-ui/components/SidePanel/components/Header/Header.tsx @@ -16,7 +16,7 @@ 'use client'; import type { HTMLAttributes } from 'react'; -import { ArrowLeft } from '@sumup/icons'; +import { ArrowLeft } from '@sumup-oss/icons'; import { clsx } from '../../../../styles/clsx.js'; import { IconButton } from '../../../Button/index.js'; diff --git a/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.tsx b/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.tsx index 6eeea34896..59d92df7c5 100644 --- a/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.tsx +++ b/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.tsx @@ -16,7 +16,7 @@ 'use client'; import type { HTMLAttributes } from 'react'; -import { ChevronUp, ChevronDown } from '@sumup/icons'; +import { ChevronUp, ChevronDown } from '@sumup-oss/icons'; import type { Direction } from '../../types.js'; import { clsx } from '../../../../styles/clsx.js'; diff --git a/packages/circuit-ui/components/Tabs/Tabs.stories.tsx b/packages/circuit-ui/components/Tabs/Tabs.stories.tsx index e7cd8a9f97..fc033fc0f1 100644 --- a/packages/circuit-ui/components/Tabs/Tabs.stories.tsx +++ b/packages/circuit-ui/components/Tabs/Tabs.stories.tsx @@ -48,7 +48,10 @@ export const Links = () => ( GitHub - + NPM diff --git a/packages/circuit-ui/components/Tag/Tag.stories.tsx b/packages/circuit-ui/components/Tag/Tag.stories.tsx index 2e00b7949d..bcdd9a1eee 100644 --- a/packages/circuit-ui/components/Tag/Tag.stories.tsx +++ b/packages/circuit-ui/components/Tag/Tag.stories.tsx @@ -14,7 +14,7 @@ */ import { action } from '@storybook/addon-actions'; -import { Checkmark } from '@sumup/icons'; +import { Checkmark } from '@sumup-oss/icons'; import { Tag, type TagProps } from './Tag.js'; diff --git a/packages/circuit-ui/components/Tag/Tag.tsx b/packages/circuit-ui/components/Tag/Tag.tsx index 7768f39569..46cdcdfe94 100644 --- a/packages/circuit-ui/components/Tag/Tag.tsx +++ b/packages/circuit-ui/components/Tag/Tag.tsx @@ -21,7 +21,7 @@ import { type ButtonHTMLAttributes, type AnchorHTMLAttributes, } from 'react'; -import type { IconComponentType } from '@sumup/icons'; +import type { IconComponentType } from '@sumup-oss/icons'; import type { ClickEvent } from '../../types/events.js'; import type { AsPropType } from '../../types/prop-types.js'; diff --git a/packages/circuit-ui/components/Toggletip/Toggletip.stories.tsx b/packages/circuit-ui/components/Toggletip/Toggletip.stories.tsx index 4ee8bc6d1f..8e975e07e4 100644 --- a/packages/circuit-ui/components/Toggletip/Toggletip.stories.tsx +++ b/packages/circuit-ui/components/Toggletip/Toggletip.stories.tsx @@ -14,7 +14,7 @@ */ import { userEvent, within } from '@storybook/test'; -import { ArrowSlanted, Info } from '@sumup/icons'; +import { ArrowSlanted, Info } from '@sumup-oss/icons'; import { Stack } from '../../../../.storybook/components/index.js'; import { IconButton } from '../Button/index.js'; diff --git a/packages/circuit-ui/components/Tooltip/Tooltip.stories.tsx b/packages/circuit-ui/components/Tooltip/Tooltip.stories.tsx index 33426551fa..8acbb6a5f1 100644 --- a/packages/circuit-ui/components/Tooltip/Tooltip.stories.tsx +++ b/packages/circuit-ui/components/Tooltip/Tooltip.stories.tsx @@ -14,7 +14,7 @@ */ import { userEvent } from '@storybook/test'; -import { TransferOut, UploadCloud } from '@sumup/icons'; +import { TransferOut, UploadCloud } from '@sumup-oss/icons'; import { Stack } from '../../../../.storybook/components/index.js'; import { Button, IconButton } from '../Button/index.js'; diff --git a/packages/circuit-ui/components/TopNavigation/TopNavigation.spec.tsx b/packages/circuit-ui/components/TopNavigation/TopNavigation.spec.tsx index 7ca945b84a..1ef1eaecf0 100644 --- a/packages/circuit-ui/components/TopNavigation/TopNavigation.spec.tsx +++ b/packages/circuit-ui/components/TopNavigation/TopNavigation.spec.tsx @@ -14,7 +14,7 @@ */ import { describe, expect, it, vi } from 'vitest'; -import { Shop, SumUpLogo } from '@sumup/icons'; +import { Shop, SumUpLogo } from '@sumup-oss/icons'; import { axe, render } from '../../util/test-utils.js'; import type { PopoverProps } from '../Popover/index.js'; diff --git a/packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx b/packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx index 8e6b6aecdf..96a372c3df 100644 --- a/packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx +++ b/packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx @@ -15,7 +15,7 @@ import { useState } from 'react'; import { action } from '@storybook/addon-actions'; -import { Shop, SumUpLogo } from '@sumup/icons'; +import { Shop, SumUpLogo } from '@sumup-oss/icons'; import { modes } from '../../../../.storybook/modes.js'; import { SideNavigation } from '../SideNavigation/index.js'; diff --git a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx b/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx index 39bc9623ac..98e9e40ff4 100644 --- a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx +++ b/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx @@ -16,7 +16,7 @@ 'use client'; import { useState, useEffect, type ButtonHTMLAttributes } from 'react'; -import { ChevronDown, Profile as ProfileIcon } from '@sumup/icons'; +import { ChevronDown, Profile as ProfileIcon } from '@sumup-oss/icons'; import { Avatar } from '../../../Avatar/index.js'; import { Body } from '../../../Body/index.js'; diff --git a/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.spec.tsx b/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.spec.tsx index e4afaae407..102678674a 100644 --- a/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.spec.tsx +++ b/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.spec.tsx @@ -15,7 +15,7 @@ import type { KeyboardEvent, MouseEvent, FC } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { More, type IconProps } from '@sumup/icons'; +import { More, type IconProps } from '@sumup-oss/icons'; import { axe, render, userEvent, screen } from '../../../../util/test-utils.js'; diff --git a/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.tsx b/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.tsx index 55dc2990e7..22afb04b0b 100644 --- a/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.tsx +++ b/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.tsx @@ -21,7 +21,7 @@ import type { AnchorHTMLAttributes, ReactNode, } from 'react'; -import type { IconComponentType } from '@sumup/icons'; +import type { IconComponentType } from '@sumup-oss/icons'; import type { AsPropType } from '../../../../types/prop-types.js'; import { Body } from '../../../Body/index.js'; diff --git a/packages/circuit-ui/components/legacy/Calendar/Calendar.mdx b/packages/circuit-ui/components/legacy/Calendar/Calendar.mdx index f3654fdfb5..ff3db3854c 100644 --- a/packages/circuit-ui/components/legacy/Calendar/Calendar.mdx +++ b/packages/circuit-ui/components/legacy/Calendar/Calendar.mdx @@ -31,8 +31,8 @@ The calendar components depend on the legacy JSON theme. Wrap the component or y ```tsx import { ThemeProvider } from '@emotion/react'; -import { light } from '@sumup/design-tokens'; -import { SingleDayPicker } from '@sumup/circuit-ui/legacy'; +import { light } from '@sumup-oss/design-tokens'; +import { SingleDayPicker } from '@sumup-oss/circuit-ui/legacy'; export default function App() { return ( diff --git a/packages/circuit-ui/components/legacy/Calendar/RangePicker.tsx b/packages/circuit-ui/components/legacy/Calendar/RangePicker.tsx index 7124212952..02bd86b9da 100644 --- a/packages/circuit-ui/components/legacy/Calendar/RangePicker.tsx +++ b/packages/circuit-ui/components/legacy/Calendar/RangePicker.tsx @@ -16,7 +16,7 @@ /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; -import { ArrowRight, ArrowLeft, Close } from '@sumup/icons'; +import { ArrowRight, ArrowLeft, Close } from '@sumup-oss/icons'; // eslint-disable-next-line import/no-extraneous-dependencies import { DateRangePicker } from 'react-dates'; import type { DateRangePickerShape } from 'react-dates'; diff --git a/packages/circuit-ui/components/legacy/Calendar/RangePickerController.tsx b/packages/circuit-ui/components/legacy/Calendar/RangePickerController.tsx index f466ba65f9..c086169b3c 100644 --- a/packages/circuit-ui/components/legacy/Calendar/RangePickerController.tsx +++ b/packages/circuit-ui/components/legacy/Calendar/RangePickerController.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import { ArrowRight, ArrowLeft } from '@sumup/icons'; +import { ArrowRight, ArrowLeft } from '@sumup-oss/icons'; // eslint-disable-next-line import/no-extraneous-dependencies import { DayPickerRangeController } from 'react-dates'; import type { DayPickerRangeControllerShape } from 'react-dates'; diff --git a/packages/circuit-ui/components/legacy/Calendar/SingleDayPicker.tsx b/packages/circuit-ui/components/legacy/Calendar/SingleDayPicker.tsx index 6fdf0ce2d7..4973b30ea0 100644 --- a/packages/circuit-ui/components/legacy/Calendar/SingleDayPicker.tsx +++ b/packages/circuit-ui/components/legacy/Calendar/SingleDayPicker.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import { ArrowRight, ArrowLeft, Close } from '@sumup/icons'; +import { ArrowRight, ArrowLeft, Close } from '@sumup-oss/icons'; // eslint-disable-next-line import/no-extraneous-dependencies import { SingleDatePicker } from 'react-dates'; import type { SingleDatePickerShape } from 'react-dates'; diff --git a/packages/circuit-ui/components/legacy/Calendar/components/CalendarWrapper/CalendarWrapper.tsx b/packages/circuit-ui/components/legacy/Calendar/components/CalendarWrapper/CalendarWrapper.tsx index 2bcdb522a4..fefda6729f 100644 --- a/packages/circuit-ui/components/legacy/Calendar/components/CalendarWrapper/CalendarWrapper.tsx +++ b/packages/circuit-ui/components/legacy/Calendar/components/CalendarWrapper/CalendarWrapper.tsx @@ -16,7 +16,7 @@ /** @jsxImportSource @emotion/react */ import type { ReactNode } from 'react'; -import type { Theme } from '@sumup/design-tokens'; +import type { Theme } from '@sumup-oss/design-tokens'; import { css, Global } from '@emotion/react'; import { diff --git a/packages/circuit-ui/components/legacy/Grid/Col/Col.ts b/packages/circuit-ui/components/legacy/Grid/Col/Col.ts index 89deb8d581..123ae6cd10 100644 --- a/packages/circuit-ui/components/legacy/Grid/Col/Col.ts +++ b/packages/circuit-ui/components/legacy/Grid/Col/Col.ts @@ -16,7 +16,7 @@ /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; -import type { Theme } from '@sumup/design-tokens'; +import type { Theme } from '@sumup-oss/design-tokens'; import isPropValid from '../../../../styles/is-prop-valid.js'; import styled, { type StyleProps } from '../../../../styles/styled.js'; diff --git a/packages/circuit-ui/components/legacy/Grid/Grid.mdx b/packages/circuit-ui/components/legacy/Grid/Grid.mdx index a538f18fac..bb90237e27 100644 --- a/packages/circuit-ui/components/legacy/Grid/Grid.mdx +++ b/packages/circuit-ui/components/legacy/Grid/Grid.mdx @@ -26,8 +26,8 @@ The grid components depend on the legacy JSON theme. Wrap the components or your ```tsx import { ThemeProvider } from '@emotion/react'; -import { light } from '@sumup/design-tokens'; -import { Grid, Row, Column } from '@sumup/circuit-ui/legacy'; +import { light } from '@sumup-oss/design-tokens'; +import { Grid, Row, Column } from '@sumup-oss/circuit-ui/legacy'; export default function App() { return ( diff --git a/packages/circuit-ui/components/legacy/Grid/Grid/Grid.ts b/packages/circuit-ui/components/legacy/Grid/Grid/Grid.ts index a9f29e2db5..422373def9 100644 --- a/packages/circuit-ui/components/legacy/Grid/Grid/Grid.ts +++ b/packages/circuit-ui/components/legacy/Grid/Grid/Grid.ts @@ -16,7 +16,7 @@ /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; -import type { Theme } from '@sumup/design-tokens'; +import type { Theme } from '@sumup-oss/design-tokens'; import styled, { type NoTheme, diff --git a/packages/circuit-ui/components/legacy/Grid/Row/Row.ts b/packages/circuit-ui/components/legacy/Grid/Row/Row.ts index a4614d2f8f..afb479f696 100644 --- a/packages/circuit-ui/components/legacy/Grid/Row/Row.ts +++ b/packages/circuit-ui/components/legacy/Grid/Row/Row.ts @@ -16,7 +16,7 @@ /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; -import type { Theme } from '@sumup/design-tokens'; +import type { Theme } from '@sumup-oss/design-tokens'; import { clearfix } from '../../../../styles/style-mixins.js'; import styled, { diff --git a/packages/circuit-ui/components/legacy/Grid/types.ts b/packages/circuit-ui/components/legacy/Grid/types.ts index 15c203e942..3c7c35a3c8 100644 --- a/packages/circuit-ui/components/legacy/Grid/types.ts +++ b/packages/circuit-ui/components/legacy/Grid/types.ts @@ -13,7 +13,7 @@ * limitations under the License. */ -import type { Theme } from '@sumup/design-tokens'; +import type { Theme } from '@sumup-oss/design-tokens'; export type GridKey = keyof Theme['grid']; export type GridValue = Theme['grid'][GridKey]; diff --git a/packages/circuit-ui/components/legacy/Grid/utils.spec.ts b/packages/circuit-ui/components/legacy/Grid/utils.spec.ts index 07e12914c5..567d562fdc 100644 --- a/packages/circuit-ui/components/legacy/Grid/utils.spec.ts +++ b/packages/circuit-ui/components/legacy/Grid/utils.spec.ts @@ -14,7 +14,7 @@ */ import { describe, expect, it, vi } from 'vitest'; -import { light as theme } from '@sumup/design-tokens'; +import { light as theme } from '@sumup-oss/design-tokens'; import { composeBreakpoints, normalizeToNumber, wrapStyles } from './utils.js'; diff --git a/packages/circuit-ui/components/legacy/Grid/utils.ts b/packages/circuit-ui/components/legacy/Grid/utils.ts index ef657121fe..90cc5fe3b3 100644 --- a/packages/circuit-ui/components/legacy/Grid/utils.ts +++ b/packages/circuit-ui/components/legacy/Grid/utils.ts @@ -16,7 +16,7 @@ /** @jsxImportSource @emotion/react */ -import type { Theme } from '@sumup/design-tokens'; +import type { Theme } from '@sumup-oss/design-tokens'; import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; diff --git a/packages/circuit-ui/components/legacy/Tooltip/Tooltip.mdx b/packages/circuit-ui/components/legacy/Tooltip/Tooltip.mdx index 22c7842cbb..2268454e29 100644 --- a/packages/circuit-ui/components/legacy/Tooltip/Tooltip.mdx +++ b/packages/circuit-ui/components/legacy/Tooltip/Tooltip.mdx @@ -29,8 +29,8 @@ The Tooltip component depends on the legacy JSON theme. Wrap the the component o ```tsx import { ThemeProvider } from '@emotion/react'; -import { light } from '@sumup/design-tokens'; -import { Tooltip } from '@sumup/circuit-ui'; +import { light } from '@sumup-oss/design-tokens'; +import { Tooltip } from '@sumup-oss/circuit-ui'; export default function App() { return ( @@ -60,8 +60,8 @@ Here's an example: ```tsx // Before import { useState } from "react"; -import { Badge } from "@sumup/circuit-ui"; -import { Tooltip } from "@sumup/circuit-ui/legacy"; +import { Badge } from "@sumup-oss/circuit-ui"; +import { Tooltip } from "@sumup-oss/circuit-ui/legacy"; function Component() { const [isVisible, setVisible] = useState(false); @@ -87,8 +87,8 @@ function Component() { ```tsx // After -import { Badge } from "@sumup/circuit-ui"; -import { Tooltip } from "@sumup/circuit-ui/experimental"; +import { Badge } from "@sumup-oss/circuit-ui"; +import { Tooltip } from "@sumup-oss/circuit-ui/experimental"; function Component() { return ( @@ -115,8 +115,8 @@ Here's an example: ```tsx // Before import { useState } from "react"; -import { Tooltip } from "@sumup/circuit-ui/legacy"; -import { Info } from "@sumup/icons"; +import { Tooltip } from "@sumup-oss/circuit-ui/legacy"; +import { Info } from "@sumup-oss/icons"; function Component() { const [isVisible, setVisible] = useState(false); @@ -141,9 +141,9 @@ function Component() { ```tsx // After -import { Toggletip } from "@sumup/circuit-ui/experimental"; -import { IconButton } from "@sumup/circuit-ui"; -import { Info } from "@sumup/icons"; +import { Toggletip } from "@sumup-oss/circuit-ui/experimental"; +import { IconButton } from "@sumup-oss/circuit-ui"; +import { Info } from "@sumup-oss/icons"; function Component() { return ( diff --git a/packages/circuit-ui/components/legacy/Tooltip/Tooltip.stories.tsx b/packages/circuit-ui/components/legacy/Tooltip/Tooltip.stories.tsx index 8ba6ee07e8..a420f0e142 100644 --- a/packages/circuit-ui/components/legacy/Tooltip/Tooltip.stories.tsx +++ b/packages/circuit-ui/components/legacy/Tooltip/Tooltip.stories.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import { Info } from '@sumup/icons'; +import { Info } from '@sumup-oss/icons'; import { Stack } from '../../../../../.storybook/components/index.js'; import styled from '../../../styles/styled.js'; diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index b33ad4dab2..fa78b1695f 100644 --- a/packages/circuit-ui/package.json +++ b/packages/circuit-ui/package.json @@ -1,5 +1,5 @@ { - "name": "@sumup/circuit-ui", + "name": "@sumup-oss/circuit-ui", "version": "8.12.1", "description": "SumUp's React UI component library", "type": "module", @@ -63,9 +63,9 @@ "@emotion/jest": "^11.13.0", "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", - "@sumup/design-tokens": "^7.0.0", - "@sumup/icons": "^4.0.0", - "@sumup/intl": "^1.5.0", + "@sumup-oss/design-tokens": "^7.0.0", + "@sumup-oss/icons": "^4.0.0", + "@sumup-oss/intl": "^2.0.0", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.8", "@testing-library/react": "^16.0.0", @@ -91,9 +91,9 @@ "@emotion/is-prop-valid": "^1.2.1", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", - "@sumup/design-tokens": ">=6.0.0", - "@sumup/icons": ">=3.0.0", - "@sumup/intl": "1.x", + "@sumup-oss/design-tokens": ">=6.0.0", + "@sumup-oss/icons": ">=3.0.0", + "@sumup-oss/intl": "2.x", "react": ">=18.0.0 <19.0.0", "react-dom": ">=18.0.0 <19.0.0" }, diff --git a/packages/circuit-ui/styles/style-mixins.mdx b/packages/circuit-ui/styles/style-mixins.mdx index 98acae71c5..b78b10ed59 100644 --- a/packages/circuit-ui/styles/style-mixins.mdx +++ b/packages/circuit-ui/styles/style-mixins.mdx @@ -23,7 +23,7 @@ import * as Stories from './style-mixins.stories'; ## Usage ```tsx -import { clearfix, spacing } from '@sumup/circuit-ui'; +import { clearfix, spacing } from '@sumup-oss/circuit-ui'; import styled from '@emotion/styled'; import { css } from '@emotion/react'; @@ -49,7 +49,7 @@ const StyledComponent = styled.div(someStyles, clearfix); Combines multiple style mixins and calls each one with the `theme`. Modeled after the [`classNames`](https://github.com/JedWatson/classnames) package and [Emotion's (removed) `cx` helper](https://5bb1495273f2cf57a2cf39cc--emotion.netlify.app/docs/cx). ```tsx -import { cx, clearfix, spacing, disableVisually } from '@sumup/circuit-ui'; +import { cx, clearfix, spacing, disableVisually } from '@sumup-oss/circuit-ui'; // The `cx` helper accepts any number of style mixins. const Multiple = () =>
; diff --git a/packages/circuit-ui/styles/style-mixins.spec.tsx b/packages/circuit-ui/styles/style-mixins.spec.tsx index 41e5d6d8d8..be511d8114 100644 --- a/packages/circuit-ui/styles/style-mixins.spec.tsx +++ b/packages/circuit-ui/styles/style-mixins.spec.tsx @@ -17,7 +17,7 @@ import { describe, expect, it } from 'vitest'; import { css } from '@emotion/react'; -import { light } from '@sumup/design-tokens'; +import { light } from '@sumup-oss/design-tokens'; import { render } from '../util/test-utils.js'; diff --git a/packages/circuit-ui/styles/style-mixins.ts b/packages/circuit-ui/styles/style-mixins.ts index 830bfe3e34..b04b7b3112 100644 --- a/packages/circuit-ui/styles/style-mixins.ts +++ b/packages/circuit-ui/styles/style-mixins.ts @@ -16,7 +16,7 @@ /** @jsxImportSource @emotion/react */ import { css, type SerializedStyles } from '@emotion/react'; -import type { Theme } from '@sumup/design-tokens'; +import type { Theme } from '@sumup-oss/design-tokens'; import { warn } from '../util/logger.js'; import { isFunction } from '../util/type-check.js'; diff --git a/packages/circuit-ui/styles/styled.ts b/packages/circuit-ui/styles/styled.ts index 2f4426a51f..9e414c5bd0 100644 --- a/packages/circuit-ui/styles/styled.ts +++ b/packages/circuit-ui/styles/styled.ts @@ -14,7 +14,7 @@ */ import styled from '@emotion/styled'; -import type { Theme } from '@sumup/design-tokens'; +import type { Theme } from '@sumup-oss/design-tokens'; // biome-ignore lint/style/noDefaultExport: Mirroring Emotion's exports export default styled; diff --git a/packages/circuit-ui/types/global.d.ts b/packages/circuit-ui/types/global.d.ts index 6d08c8e382..d057a4069e 100644 --- a/packages/circuit-ui/types/global.d.ts +++ b/packages/circuit-ui/types/global.d.ts @@ -13,7 +13,7 @@ * limitations under the License. */ -import type { Theme as CircuitTheme } from '@sumup/design-tokens'; +import type { Theme as CircuitTheme } from '@sumup-oss/design-tokens'; import 'react'; diff --git a/packages/circuit-ui/util/test-utils.tsx b/packages/circuit-ui/util/test-utils.tsx index ce48c5ec87..9417926ab7 100644 --- a/packages/circuit-ui/util/test-utils.tsx +++ b/packages/circuit-ui/util/test-utils.tsx @@ -24,7 +24,7 @@ import { } from '@testing-library/react'; import { userEvent } from '@testing-library/user-event'; import { ThemeProvider } from '@emotion/react'; -import { light } from '@sumup/design-tokens'; +import { light } from '@sumup-oss/design-tokens'; import { ComponentsContext, diff --git a/packages/cna-template/CHANGELOG.md b/packages/cna-template/CHANGELOG.md index f44e7e262f..7a9212f3b7 100644 --- a/packages/cna-template/CHANGELOG.md +++ b/packages/cna-template/CHANGELOG.md @@ -1,4 +1,4 @@ -# @sumup/cna-template +# @sumup-oss/cna-template ## 5.1.0 diff --git a/packages/cna-template/README.md b/packages/cna-template/README.md index e6cc1a58ba..5b61648aae 100644 --- a/packages/cna-template/README.md +++ b/packages/cna-template/README.md @@ -4,7 +4,7 @@ A [create-next-app template](https://nextjs.org/docs/api-reference/create-next-app) for TypeScript Next.js apps with SumUp's frontend stack. -[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup/circuit-ui)](https://www.npmjs.com/package/@sumup/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/circuit-ui/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md) +[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup-oss/circuit-ui)](https://www.npmjs.com/package/@sumup-oss/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/circuit-ui/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md)
diff --git a/packages/cna-template/package.json b/packages/cna-template/package.json index c4af0a6560..9b6c9dc4d7 100644 --- a/packages/cna-template/package.json +++ b/packages/cna-template/package.json @@ -1,5 +1,5 @@ { - "name": "@sumup/cna-template", + "name": "@sumup-oss/cna-template", "version": "5.1.0", "description": "Create a fresh Next.js application preconfigured with SumUp's Circuit UI and Foundry", "private": true, diff --git a/packages/cna-template/template/CHANGELOG.md b/packages/cna-template/template/CHANGELOG.md index 93d7638609..eb896240e4 100644 --- a/packages/cna-template/template/CHANGELOG.md +++ b/packages/cna-template/template/CHANGELOG.md @@ -1,4 +1,4 @@ -# next-app +# @sumup-oss/cna-template ## 1.1.0 diff --git a/packages/cna-template/template/app/layout.tsx b/packages/cna-template/template/app/layout.tsx index 188fd6fe8e..c1a51ba2e4 100644 --- a/packages/cna-template/template/app/layout.tsx +++ b/packages/cna-template/template/app/layout.tsx @@ -1,7 +1,7 @@ import type { Metadata, Viewport } from 'next'; -import '@sumup/design-tokens/light.css'; -import '@sumup/circuit-ui/styles.css'; +import '@sumup-oss/design-tokens/light.css'; +import '@sumup-oss/circuit-ui/styles.css'; import { PreloadResources } from './preload-resources'; diff --git a/packages/cna-template/template/app/page.tsx b/packages/cna-template/template/app/page.tsx index 3b0a760d02..2654164ef6 100644 --- a/packages/cna-template/template/app/page.tsx +++ b/packages/cna-template/template/app/page.tsx @@ -1,6 +1,6 @@ import type { Metadata } from 'next'; -import { Title, BodyLarge } from '@sumup/circuit-ui'; -import { SumUpLogo } from '@sumup/icons'; +import { Title, BodyLarge } from '@sumup-oss/circuit-ui'; +import { SumUpLogo } from '@sumup-oss/icons'; import { DocCard } from '../components/DocCard'; diff --git a/packages/cna-template/template/components/DocCard/DocCard.tsx b/packages/cna-template/template/components/DocCard/DocCard.tsx index 7f6566b6bb..23581f70c0 100644 --- a/packages/cna-template/template/components/DocCard/DocCard.tsx +++ b/packages/cna-template/template/components/DocCard/DocCard.tsx @@ -1,5 +1,5 @@ import { useId } from 'react'; -import { Body, Card, Headline } from '@sumup/circuit-ui'; +import { Body, Card, Headline } from '@sumup-oss/circuit-ui'; import styles from './DocCard.module.css'; diff --git a/packages/cna-template/template/jest.config.js b/packages/cna-template/template/jest.config.js index de735f19ac..2dc1854256 100644 --- a/packages/cna-template/template/jest.config.js +++ b/packages/cna-template/template/jest.config.js @@ -1,8 +1,8 @@ const nextJest = require('next/jest'); const esModules = [ - '@sumup/circuit-ui', - '@sumup/icons', + '@sumup-oss/circuit-ui', + '@sumup-oss/icons', '@nanostores/react', 'nanostores', ].join('|'); diff --git a/packages/cna-template/template/next.config.js b/packages/cna-template/template/next.config.js index e0a1770055..3c3a289612 100644 --- a/packages/cna-template/template/next.config.js +++ b/packages/cna-template/template/next.config.js @@ -2,7 +2,7 @@ const nextConfig = { reactStrictMode: true, experimental: { - optimizePackageImports: ['@sumup/circuit-ui'], + optimizePackageImports: ['@sumup-oss/circuit-ui'], }, }; diff --git a/packages/cna-template/template/package.json b/packages/cna-template/template/package.json index 9948ff6f4f..03484101c3 100644 --- a/packages/cna-template/template/package.json +++ b/packages/cna-template/template/package.json @@ -14,18 +14,18 @@ }, "dependencies": { "@next/bundle-analyzer": "^14.2.5", - "@sumup/circuit-ui": "^8.0.0", - "@sumup/design-tokens": "^7.0.0", - "@sumup/icons": "^4.0.0", - "@sumup/intl": "^1.5.0", + "@sumup-oss/circuit-ui": "^8.0.0", + "@sumup-oss/design-tokens": "^7.0.0", + "@sumup-oss/icons": "^4.0.0", + "@sumup-oss/intl": "^2.0.0", "next": "^14.2.5", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { - "@sumup/eslint-plugin-circuit-ui": "^4.0.0", + "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", "@sumup-oss/foundry": "^8.1.1", - "@sumup/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 8be7a78da6..ed75311e89 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -1,4 +1,4 @@ -# @sumup/design-tokens +# @sumup-oss/design-tokens ## 7.3.1 diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md index 599b2ed329..daae0601d3 100644 --- a/packages/design-tokens/README.md +++ b/packages/design-tokens/README.md @@ -1,10 +1,10 @@
-# @sumup/design-tokens +# @sumup-oss/design-tokens Visual primitives such as typography, color, and spacing for [Circuit UI Web](https://github.com/sumup-oss/circuit-ui/tree/main/packages/circuit-ui). -[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup/design-tokens)](https://www.npmjs.com/package/@sumup/design-tokens) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/badge/license--lightgrey.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/design-tokens/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md) +[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup-oss/design-tokens)](https://www.npmjs.com/package/@sumup-oss/design-tokens) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/badge/license--lightgrey.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/design-tokens/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md)
@@ -14,10 +14,10 @@ Depending on your preference, run one of the following in your terminal: ```sh # With npm -npm install @sumup/design-tokens +npm install @sumup-oss/design-tokens # With yarn v1 -yarn add @sumup/design-tokens +yarn add @sumup-oss/design-tokens ``` ## Usage @@ -26,7 +26,7 @@ The design tokens are exported as [CSS custom properties](https://developer.mozi ```tsx // app/layout.tsx -import '@sumup/design-tokens/light.css'; +import '@sumup-oss/design-tokens/light.css'; function App({ Component, pageProps }) { return ; @@ -41,27 +41,27 @@ Refer to the [theme documentation](https://circuit.sumup.com/?path=/docs/feature #### Single color scheme -For applications that support a single color scheme, import the `@sumup/design-tokens/light.css` or `@sumup/design-tokens/dark.css` themes. They contain the complete set of design tokens, in light and dark mode respectively. The tokens are defined globally on the `:root` element. The themes can be used independently or with a [scoped theme](#scoped-color-scheme). +For applications that support a single color scheme, import the `@sumup-oss/design-tokens/light.css` or `@sumup-oss/design-tokens/dark.css` themes. They contain the complete set of design tokens, in light and dark mode respectively. The tokens are defined globally on the `:root` element. The themes can be used independently or with a [scoped theme](#scoped-color-scheme). #### Scoped color scheme -To apply a different color scheme to a subset of an application, import the `@sumup/design-tokens/light-scoped.css` or `@sumup/design-tokens/dark-scoped.css` themes. They contain only color tokens which are scoped to the `data-color-scheme="light"` and `data-color-scheme="dark"` selectors respectively. The themes must be used alongside a [full theme](#single-color-scheme) to ensure that all design tokens are defined. +To apply a different color scheme to a subset of an application, import the `@sumup-oss/design-tokens/light-scoped.css` or `@sumup-oss/design-tokens/dark-scoped.css` themes. They contain only color tokens which are scoped to the `data-color-scheme="light"` and `data-color-scheme="dark"` selectors respectively. The themes must be used alongside a [full theme](#single-color-scheme) to ensure that all design tokens are defined. #### Multiple color schemes -For applications that support switching between light and dark color schemes, import the `@sumup/design-tokens/dynamic.css` theme. It contains all tokens defined globally on the `:root` element, the dark color tokens scoped to the `prefers-color-scheme: dark` media query, and the [scoped themes](#scoped-color-scheme). By default, the color scheme follows the system settings. Add the `data-color-scheme` attribute on the document root to set a specific color scheme. +For applications that support switching between light and dark color schemes, import the `@sumup-oss/design-tokens/dynamic.css` theme. It contains all tokens defined globally on the `:root` element, the dark color tokens scoped to the `prefers-color-scheme: dark` media query, and the [scoped themes](#scoped-color-scheme). By default, the color scheme follows the system settings. Add the `data-color-scheme` attribute on the document root to set a specific color scheme. Ensure that users have full control over their preferred color mode: dark, light, or match system. Their choice should be persisted between devices and sessions. There should be no [Flash of inAccurate coloR Theme (FART)](https://css-tricks.com/flash-of-inaccurate-color-theme-fart/), regardless of whether the app is client-side or server-side rendered. ### Legacy JavaScript theme > [!WARNING] -> The JavaScript theme is being replaced by [CSS custom properties](#usage) (aka CSS variables) to improve performance and compatibility with other frameworks. We recommend installing the [`@sumup/eslint-plugin-circuit-ui`](https://circuit.sumup.com/?path=/docs/packages-eslint-plugin-circuit-ui--docs) ESLint plugin and turning on the `prefer-custom-properties` and `no-invalid-custom-properties` rules to help with the migration. +> The JavaScript theme is being replaced by [CSS custom properties](#usage) (aka CSS variables) to improve performance and compatibility with other frameworks. We recommend installing the [`@sumup-oss/eslint-plugin-circuit-ui`](https://circuit.sumup.com/?path=/docs/packages-eslint-plugin-circuit-ui--docs) ESLint plugin and turning on the `prefer-custom-properties` and `no-invalid-custom-properties` rules to help with the migration. The `light` theme is meant to be used with Emotion.js' [`ThemeProvider`](https://emotion.sh/docs/theming): ```tsx -import { light } from '@sumup/design-tokens'; +import { light } from '@sumup-oss/design-tokens'; import { ThemeProvider } from '@emotion/react'; import styled from '@emotion/styled'; @@ -87,7 +87,7 @@ The package exports a `themePropType` which can be used to check the `theme` pro ```tsx import PropTypes from 'prop-types'; import { withTheme } from '@emotion/react'; -import { themePropType } from '@sumup/design-tokens'; +import { themePropType } from '@sumup-oss/design-tokens'; function ComponentWithInlineStyles({ theme, label }) { return
{label}
; @@ -107,7 +107,7 @@ The package exports a `Theme` interface that can be used to augment Emotion.js' ```ts import '@emotion/react'; -import type { Theme as CircuitUITheme } from '@sumup/design-tokens'; +import type { Theme as CircuitUITheme } from '@sumup-oss/design-tokens'; declare module '@emotion/react' { export interface Theme extends CircuitUITheme {} diff --git a/packages/design-tokens/index.ts b/packages/design-tokens/index.ts index 42e6cefbfb..01765db93e 100644 --- a/packages/design-tokens/index.ts +++ b/packages/design-tokens/index.ts @@ -23,7 +23,7 @@ export { themePropType } from './utils/theme-prop-type.js'; /** * @deprecated * - * Use the CSS custom properties from `@sumup/design-tokens` instead. + * Use the CSS custom properties from `@sumup-oss/design-tokens` instead. * Use the [`circuit-ui/prefer-custom-properties`](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/prefer-custom-properties) * ESLint rule to automatically migrate your code. */ diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 037e28c8d1..f4d4629655 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,5 +1,5 @@ { - "name": "@sumup/design-tokens", + "name": "@sumup-oss/design-tokens", "version": "7.3.1", "description": "Visual primitives such as typography, color, and spacing that are shared across platforms.", "main": "dist/cjs/index.js", diff --git a/packages/design-tokens/types/index.ts b/packages/design-tokens/types/index.ts index 2a94c39d67..860d6a4339 100644 --- a/packages/design-tokens/types/index.ts +++ b/packages/design-tokens/types/index.ts @@ -121,7 +121,7 @@ export type ZIndex = { /** * @deprecated * - * Use the CSS custom properties from `@sumup/design-tokens` instead. + * Use the CSS custom properties from `@sumup-oss/design-tokens` instead. * Use the [`circuit-ui/prefer-custom-properties`](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/prefer-custom-properties) * ESLint rule to automatically migrate your code. */ diff --git a/packages/design-tokens/utils/theme-prop-type.ts b/packages/design-tokens/utils/theme-prop-type.ts index 9f57582b29..f7f21d2bdb 100644 --- a/packages/design-tokens/utils/theme-prop-type.ts +++ b/packages/design-tokens/utils/theme-prop-type.ts @@ -54,7 +54,7 @@ const gridPropType = PropTypes.shape({ /** * @deprecated * - * Use the CSS custom properties from `@sumup/design-tokens` instead. + * Use the CSS custom properties from `@sumup-oss/design-tokens` instead. * Use the [`circuit-ui/prefer-custom-properties`](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/prefer-custom-properties) * ESLint rule to automatically migrate your code. */ diff --git a/packages/eslint-plugin-circuit-ui/CHANGELOG.md b/packages/eslint-plugin-circuit-ui/CHANGELOG.md index 245896263c..86bad09cd4 100644 --- a/packages/eslint-plugin-circuit-ui/CHANGELOG.md +++ b/packages/eslint-plugin-circuit-ui/CHANGELOG.md @@ -1,4 +1,4 @@ -# @sumup/eslint-plugin-circuit-ui +# @sumup-oss/eslint-plugin-circuit-ui ## 4.1.0 diff --git a/packages/eslint-plugin-circuit-ui/README.md b/packages/eslint-plugin-circuit-ui/README.md index 02f1ec4068..9931ee2c8d 100644 --- a/packages/eslint-plugin-circuit-ui/README.md +++ b/packages/eslint-plugin-circuit-ui/README.md @@ -1,10 +1,10 @@
-# @sumup/eslint-plugin-circuit-ui +# @sumup-oss/eslint-plugin-circuit-ui ESLint rules to help users follow best practices when using Circuit UI. -[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup/eslint-plugin-circuit-ui)](https://www.npmjs.com/package/@sumup/eslint-plugin-circuit-ui) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/badge/license--lightgrey.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md) +[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup-oss/eslint-plugin-circuit-ui)](https://www.npmjs.com/package/@sumup-oss/eslint-plugin-circuit-ui) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/badge/license--lightgrey.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md)
@@ -14,10 +14,10 @@ Depending on your preference, run one of the following in your terminal: ```sh # With npm -npm install --save-dev @sumup/eslint-plugin-circuit-ui +npm install --save-dev @sumup-oss/eslint-plugin-circuit-ui # With yarn v1 -yarn add --dev @sumup/eslint-plugin-circuit-ui +yarn add --dev @sumup-oss/eslint-plugin-circuit-ui ``` ## Usage @@ -26,7 +26,7 @@ Add the plugin to your [ESLint configuration file](https://eslint.org/docs/lates ```json { - "plugins": ["@sumup/circuit-ui"] + "plugins": ["@sumup-oss/circuit-ui"] } ``` @@ -35,7 +35,7 @@ Rules are configured under the rules section: ```json { "rules": { - "@sumup/circuit-ui/": "error" + "@sumup-oss/circuit-ui/": "error" } } ``` @@ -48,3 +48,4 @@ Rules are configured under the rules section: - [`no-deprecated-props`](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/no-deprecated-props) - [`no-renamed-props`](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/no-renamed-props) - [`prefer-custom-properties`](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/prefer-custom-properties) +- [`renamed-organization-imports`](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/renamed-organization-imports) diff --git a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/README.md b/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/README.md index a33c30e710..7f7107b5c9 100644 --- a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/README.md +++ b/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/README.md @@ -9,15 +9,15 @@ This rule flags components that have moved to a different stage and can automati Examples of **incorrect** code for this rule: ```tsx -import { RangePicker } from '@sumup/circuit-ui'; -import type { RangePickerProps } from '@sumup/circuit-ui'; +import { RangePicker } from '@sumup-oss/circuit-ui'; +import type { RangePickerProps } from '@sumup-oss/circuit-ui'; ``` Examples of **correct** code for this rule: ```tsx -import { RangePicker } from '@sumup/circuit-ui/legacy'; -import type { RangePickerProps } from '@sumup/circuit-ui/legacy'; +import { RangePicker } from '@sumup-oss/circuit-ui/legacy'; +import type { RangePickerProps } from '@sumup-oss/circuit-ui/legacy'; ``` ### Options diff --git a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.spec.ts b/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.spec.ts index 604d3702d0..55b5f058e5 100644 --- a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.spec.ts +++ b/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.spec.ts @@ -14,7 +14,7 @@ */ // We disable the rule in this file because we explicitly test invalid cases -/* eslint-disable @sumup/circuit-ui/no-invalid-custom-properties */ +/* eslint-disable @sumup-oss/circuit-ui/no-invalid-custom-properties */ import { RuleTester } from '@typescript-eslint/rule-tester'; @@ -42,19 +42,19 @@ ruleTester.run('component-lifecycle-imports', componentLifecycleImports, { { name: 'matching import from correct package', code: ` - import { RangePicker } from '@sumup/circuit-ui/legacy'; + import { RangePicker } from '@sumup-oss/circuit-ui/legacy'; `, }, { name: 'unrelated import from matching package', code: ` - import { Button } from '@sumup/circuit-ui'; + import { Button } from '@sumup-oss/circuit-ui'; `, }, { name: 'unrelated import with matching local name', code: ` - import { Button as RangePicker } from '@sumup/circuit-ui'; + import { Button as RangePicker } from '@sumup-oss/circuit-ui'; `, }, ], @@ -62,51 +62,51 @@ ruleTester.run('component-lifecycle-imports', componentLifecycleImports, { { name: 'single import with single match', code: ` - import { RangePicker } from '@sumup/circuit-ui'; + import { RangePicker } from '@sumup-oss/circuit-ui'; `, output: ` - import { RangePicker } from '@sumup/circuit-ui/legacy'; + import { RangePicker } from '@sumup-oss/circuit-ui/legacy'; `, errors: [{ messageId: 'refactor' }], }, { name: 'single import with single match with local name', code: ` - import { RangePicker as RangeInput } from '@sumup/circuit-ui'; + import { RangePicker as RangeInput } from '@sumup-oss/circuit-ui'; `, output: ` - import { RangePicker as RangeInput } from '@sumup/circuit-ui/legacy'; + import { RangePicker as RangeInput } from '@sumup-oss/circuit-ui/legacy'; `, errors: [{ messageId: 'refactor' }], }, { name: 'multiple imports with single match', code: ` - import { RangePicker, Button } from '@sumup/circuit-ui'; + import { RangePicker, Button } from '@sumup-oss/circuit-ui'; `, output: ` - import { Button } from '@sumup/circuit-ui';import { RangePicker } from '@sumup/circuit-ui/legacy'; + import { Button } from '@sumup-oss/circuit-ui';import { RangePicker } from '@sumup-oss/circuit-ui/legacy'; `, errors: [{ messageId: 'refactor' }], }, { name: 'multiple imports with multiple matches', code: ` - import { RangePicker, RangePickerController } from '@sumup/circuit-ui'; + import { RangePicker, RangePickerController } from '@sumup-oss/circuit-ui'; `, // The other component will be migrated on the second pass. output: ` - import { RangePickerController } from '@sumup/circuit-ui';import { RangePicker } from '@sumup/circuit-ui/legacy'; + import { RangePickerController } from '@sumup-oss/circuit-ui';import { RangePicker } from '@sumup-oss/circuit-ui/legacy'; `, errors: [{ messageId: 'refactor' }, { messageId: 'refactor' }], }, { name: 'single type import with single match', code: ` - import type { RangePickerProps } from '@sumup/circuit-ui'; + import type { RangePickerProps } from '@sumup-oss/circuit-ui'; `, output: ` - import type { RangePickerProps } from '@sumup/circuit-ui/legacy'; + import type { RangePickerProps } from '@sumup-oss/circuit-ui/legacy'; `, errors: [{ messageId: 'refactor' }], }, diff --git a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts b/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts index 7eb5a7e2b5..3d5fec786f 100644 --- a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts +++ b/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts @@ -24,8 +24,8 @@ const createRule = ESLintUtils.RuleCreator( const mappings = [ { - from: '@sumup/circuit-ui', - to: '@sumup/circuit-ui/legacy', + from: '@sumup-oss/circuit-ui', + to: '@sumup-oss/circuit-ui/legacy', specifiers: [ 'RadioButton', 'RadioButtonProps', diff --git a/packages/eslint-plugin-circuit-ui/index.ts b/packages/eslint-plugin-circuit-ui/index.ts index fa0453715c..9afd975cd3 100644 --- a/packages/eslint-plugin-circuit-ui/index.ts +++ b/packages/eslint-plugin-circuit-ui/index.ts @@ -19,6 +19,7 @@ import { noDeprecatedComponents } from './no-deprecated-components'; import { noDeprecatedProps } from './no-deprecated-props'; import { noRenamedProps } from './no-renamed-props'; import { preferCustomProperties } from './prefer-custom-properties'; +import { renamedPackageScope } from './renamed-package-scope'; /* eslint-disable */ @@ -29,4 +30,5 @@ export const rules = { 'no-deprecated-props': noDeprecatedProps, 'no-renamed-props': noRenamedProps, 'prefer-custom-properties': preferCustomProperties, + 'renamed-package-scope': renamedPackageScope, }; diff --git a/packages/eslint-plugin-circuit-ui/no-deprecated-components/README.md b/packages/eslint-plugin-circuit-ui/no-deprecated-components/README.md index e2709c19b2..9eb724850c 100644 --- a/packages/eslint-plugin-circuit-ui/no-deprecated-components/README.md +++ b/packages/eslint-plugin-circuit-ui/no-deprecated-components/README.md @@ -1,6 +1,6 @@ # Remove deprecated components (`no-deprecated-components`) -Occasionally, components are removed from Circuit UI. This rule flags uses of deprecated components. +Occasionally, components are removed from Circuit UI. This rule flags usages of deprecated components. ## Rule Details @@ -15,14 +15,14 @@ Examples of **incorrect** code for this rule: ```tsx // Since Circuit UI v6.4 -import { RadioButton, Selector } from '@sumup/circuit-ui'; +import { RadioButton, Selector } from '@sumup-oss/circuit-ui'; ``` Examples of **correct** code for this rule: ```tsx // Since Circuit UI v6.4 -import { RadioButtonGroup, SelectorGroup } from '@sumup/circuit-ui'; +import { RadioButtonGroup, SelectorGroup } from '@sumup-oss/circuit-ui'; ``` ### Options diff --git a/packages/eslint-plugin-circuit-ui/no-deprecated-components/index.spec.ts b/packages/eslint-plugin-circuit-ui/no-deprecated-components/index.spec.ts index 3f339f5cab..c2f16b6cbe 100644 --- a/packages/eslint-plugin-circuit-ui/no-deprecated-components/index.spec.ts +++ b/packages/eslint-plugin-circuit-ui/no-deprecated-components/index.spec.ts @@ -14,7 +14,7 @@ */ // We disable the rule in this file because we explicitly test invalid cases -/* eslint-disable @sumup/circuit-ui/no-invalid-custom-properties */ +/* eslint-disable @sumup-oss/circuit-ui/no-invalid-custom-properties */ import { RuleTester } from '@typescript-eslint/rule-tester'; @@ -36,7 +36,7 @@ ruleTester.run('no-deprecated-components', noDeprecatedComponents, { { name: 'similar component from Circuit UI', code: ` - import { RadioButtonGroup } from '@sumup/circuit-ui'; + import { RadioButtonGroup } from '@sumup-oss/circuit-ui'; `, }, { @@ -50,7 +50,7 @@ ruleTester.run('no-deprecated-components', noDeprecatedComponents, { { name: 'matched component from Circuit UI', code: ` - import { RadioButton } from '@sumup/circuit-ui'; + import { RadioButton } from '@sumup-oss/circuit-ui'; `, errors: [{ messageId: 'deprecated' }], }, diff --git a/packages/eslint-plugin-circuit-ui/no-deprecated-components/index.ts b/packages/eslint-plugin-circuit-ui/no-deprecated-components/index.ts index c478039b44..1fb4c815f1 100644 --- a/packages/eslint-plugin-circuit-ui/no-deprecated-components/index.ts +++ b/packages/eslint-plugin-circuit-ui/no-deprecated-components/index.ts @@ -49,7 +49,7 @@ export const noDeprecatedComponents = createRule({ defaultOptions: [], create(context) { return { - 'ImportDeclaration:has(Literal[value="@sumup/circuit-ui"])': ( + 'ImportDeclaration:has(Literal[value="@sumup-oss/circuit-ui"])': ( node: TSESTree.ImportDeclaration, ) => { node.specifiers.forEach((specifier) => { diff --git a/packages/eslint-plugin-circuit-ui/no-deprecated-props/index.spec.ts b/packages/eslint-plugin-circuit-ui/no-deprecated-props/index.spec.ts index 719b384cb2..d346a78873 100644 --- a/packages/eslint-plugin-circuit-ui/no-deprecated-props/index.spec.ts +++ b/packages/eslint-plugin-circuit-ui/no-deprecated-props/index.spec.ts @@ -14,7 +14,7 @@ */ // We disable the rule in this file because we explicitly test invalid cases -/* eslint-disable @sumup/circuit-ui/no-invalid-custom-properties */ +/* eslint-disable @sumup-oss/circuit-ui/no-invalid-custom-properties */ import { RuleTester } from '@typescript-eslint/rule-tester'; diff --git a/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/README.md b/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/README.md index 80442be87e..46a4e979aa 100644 --- a/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/README.md +++ b/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/README.md @@ -4,7 +4,7 @@ Circuit UI exports a number of CSS custom properties (a.k.a. CSS variables) pref ## Rule Details -This rule aims to prevent issues when using custom properties. In contrast to the legacy JSON theme in `@sumup/design-tokens`, IDEs and CIs will _not_ warn or error by default if using an invalid property. Setting its error level to `error` (or `2`) is recommended. +This rule aims to prevent issues when using custom properties. In contrast to the legacy JSON theme in `@sumup-oss/design-tokens`, IDEs and CIs will _not_ warn or error by default if using an invalid property. Setting its error level to `error` (or `2`) is recommended. Examples of **incorrect** code for this rule: diff --git a/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/index.spec.ts b/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/index.spec.ts index df8b8218cc..51aa64ecc5 100644 --- a/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/index.spec.ts +++ b/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/index.spec.ts @@ -14,7 +14,7 @@ */ // We disable the rule in this file because we explicitly test invalid cases -/* eslint-disable @sumup/circuit-ui/no-invalid-custom-properties */ +/* eslint-disable @sumup-oss/circuit-ui/no-invalid-custom-properties */ import { RuleTester } from '@typescript-eslint/rule-tester'; diff --git a/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/index.ts b/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/index.ts index 7539587584..dcf2b0465f 100644 --- a/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/index.ts +++ b/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/index.ts @@ -14,7 +14,7 @@ */ import { ESLintUtils } from '@typescript-eslint/utils'; -import { schema } from '@sumup/design-tokens'; +import { schema } from '@sumup-oss/design-tokens'; const PREFIX = '--cui-'; const VALID_CUSTOM_PROPERTIES_WITHOUT_PREFIX = schema.map(({ name }) => diff --git a/packages/eslint-plugin-circuit-ui/no-renamed-props/index.spec.ts b/packages/eslint-plugin-circuit-ui/no-renamed-props/index.spec.ts index 7f53d70a44..6e28b59127 100644 --- a/packages/eslint-plugin-circuit-ui/no-renamed-props/index.spec.ts +++ b/packages/eslint-plugin-circuit-ui/no-renamed-props/index.spec.ts @@ -14,7 +14,7 @@ */ // We disable the rule in this file because we explicitly test invalid cases -/* eslint-disable @sumup/circuit-ui/no-invalid-custom-properties */ +/* eslint-disable @sumup-oss/circuit-ui/no-invalid-custom-properties */ import { RuleTester } from '@typescript-eslint/rule-tester'; diff --git a/packages/eslint-plugin-circuit-ui/package.json b/packages/eslint-plugin-circuit-ui/package.json index 9cc9c98528..115f93cac7 100644 --- a/packages/eslint-plugin-circuit-ui/package.json +++ b/packages/eslint-plugin-circuit-ui/package.json @@ -1,5 +1,5 @@ { - "name": "@sumup/eslint-plugin-circuit-ui", + "name": "@sumup-oss/eslint-plugin-circuit-ui", "version": "4.1.0", "description": "ESLint rules to lint Circuit UI.", "keywords": [ @@ -30,13 +30,13 @@ "@typescript-eslint/utils": "^7.16.1" }, "devDependencies": { - "@sumup/design-tokens": "^7.0.0", + "@sumup-oss/design-tokens": "^7.0.0", "@tsconfig/node18": "^18.2.4", "@typescript-eslint/rule-tester": "^7.16.1", "typescript": "^5.5.4" }, "peerDependencies": { - "@sumup/circuit-ui": ">=7.5.0", - "@sumup/design-tokens": ">=6.0.0" + "@sumup-oss/circuit-ui": ">=7.5.0", + "@sumup-oss/design-tokens": ">=6.0.0" } } diff --git a/packages/eslint-plugin-circuit-ui/prefer-custom-properties/index.spec.ts b/packages/eslint-plugin-circuit-ui/prefer-custom-properties/index.spec.ts index 7ef2480aea..b898285705 100644 --- a/packages/eslint-plugin-circuit-ui/prefer-custom-properties/index.spec.ts +++ b/packages/eslint-plugin-circuit-ui/prefer-custom-properties/index.spec.ts @@ -14,7 +14,7 @@ */ // We disable the rule in this file because we explicitly test invalid cases -/* eslint-disable @sumup/circuit-ui/no-invalid-custom-properties */ +/* eslint-disable @sumup-oss/circuit-ui/no-invalid-custom-properties */ import { RuleTester } from '@typescript-eslint/rule-tester'; diff --git a/packages/eslint-plugin-circuit-ui/prefer-custom-properties/index.ts b/packages/eslint-plugin-circuit-ui/prefer-custom-properties/index.ts index 1ea6b95e90..116d5f6267 100644 --- a/packages/eslint-plugin-circuit-ui/prefer-custom-properties/index.ts +++ b/packages/eslint-plugin-circuit-ui/prefer-custom-properties/index.ts @@ -14,7 +14,7 @@ */ import { ESLintUtils, type TSESTree } from '@typescript-eslint/utils'; -import { schema } from '@sumup/design-tokens'; +import { schema } from '@sumup-oss/design-tokens'; /* eslint-disable */ diff --git a/packages/eslint-plugin-circuit-ui/renamed-package-scope/README.md b/packages/eslint-plugin-circuit-ui/renamed-package-scope/README.md new file mode 100644 index 0000000000..a40e439c6f --- /dev/null +++ b/packages/eslint-plugin-circuit-ui/renamed-package-scope/README.md @@ -0,0 +1,35 @@ +# Import from the renamed package scope (`renamed-package-scope`) + +Circuit UI packages have moved from the `@sumup` to the `@sumup-oss` scope. + +## Rule Details + +This rule flags imports that use the old package scope (`@sumup`) and can automatically update them to the new one (`@sumup-oss`). Setting the rule's error level to `error` (or `2`) is recommended. + +Examples of **incorrect** code for this rule: + +```tsx +import { Input } from '@sumup/circuit-ui'; +import { Search } from '@sumup/icons'; +import '@sumup/design-tokens/light.css'; +``` + +Examples of **correct** code for this rule: + +```tsx +import { Input } from '@sumup-oss/circuit-ui'; +import { Search } from '@sumup-oss/icons'; +import '@sumup-oss/design-tokens/light.css'; +``` + +### Options + +n/a + +## When Not To Use It + +n/a + +## Further Reading + +- [Migration guide](https://github.com/sumup-oss/circuit-ui/blob/main/MIGRATION.md) diff --git a/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.spec.ts b/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.spec.ts new file mode 100644 index 0000000000..a2b4ba62c2 --- /dev/null +++ b/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.spec.ts @@ -0,0 +1,81 @@ +/** + * Copyright 2023, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// We disable the rule in this file because we explicitly test invalid cases +/* eslint-disable @sumup-oss/circuit-ui/no-invalid-custom-properties */ + +import { RuleTester } from '@typescript-eslint/rule-tester'; + +import { renamedPackageScope } from '.'; + +// eslint-disable-next-line @typescript-eslint/no-unsafe-call +const ruleTester = new RuleTester({ + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + }, +}); + +// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access +ruleTester.run('renamed-package-scope', renamedPackageScope, { + valid: [ + { + name: 'import from an unaffected @sumup package', + code: ` + import { OIDCClient } from '@sumup/nanoauth'; + `, + }, + { + name: 'import from the new package scope', + code: ` + import { Input } from '@sumup-oss/circuit-ui/legacy'; + `, + }, + ], + invalid: [ + { + name: 'import from the old package scope', + code: ` + import { Input } from '@sumup/circuit-ui'; + `, + output: ` + import { Input } from '@sumup-oss/circuit-ui'; + `, + errors: [{ messageId: 'refactor' }], + }, + { + name: 'subpath import from the old package scope', + code: ` + import { Input } from '@sumup/circuit-ui/legacy'; + `, + output: ` + import { Input } from '@sumup-oss/circuit-ui/legacy'; + `, + errors: [{ messageId: 'refactor' }], + }, + { + name: 'file import from the old package scope', + code: ` + import '@sumup/design-tokens/light.css'; + `, + output: ` + import '@sumup-oss/design-tokens/light.css'; + `, + errors: [{ messageId: 'refactor' }], + }, + ], +}); diff --git a/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.ts b/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.ts new file mode 100644 index 0000000000..02d9c24892 --- /dev/null +++ b/packages/eslint-plugin-circuit-ui/renamed-package-scope/index.ts @@ -0,0 +1,88 @@ +/** + * Copyright 2023, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ESLintUtils, type TSESTree } from '@typescript-eslint/utils'; + +/* eslint-disable */ + +const createRule = ESLintUtils.RuleCreator( + (name) => + `https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/${name}`, +); + +const mappings = [ + { + from: '@sumup/circuit-ui', + to: '@sumup-oss/circuit-ui', + }, + { + from: '@sumup/design-tokens', + to: '@sumup-oss/design-tokens', + }, + { + from: '@sumup/icons', + to: '@sumup-oss/icons', + }, + { + from: '@sumup/intl', + to: '@sumup-oss/intl', + }, +]; + +export const renamedPackageScope = createRule({ + name: 'renamed-organization-imports', + meta: { + type: 'suggestion', + schema: [], + fixable: 'code', + docs: { + description: + 'Imports from Circuit UI packages should use the new `@sumup-oss` scope.', + recommended: 'recommended', + }, + messages: { + refactor: + '`{{from}}` has been renamed to `{{to}}`. Update the import to use `{{to}}` instead.', + }, + }, + defaultOptions: [], + create(context) { + return mappings.reduce((visitors, { from, to }) => { + // Due to a bug in esquery, regular expressions that contain a + // forward-slash character aren’t properly parsed. As a workaround, the + // `/` character can be replaced with its unicode counterpart. + // See https://eslint.org/docs/latest/extend/selectors#known-issues + const escapedFrom = from.replace('/', '\\u002F'); + + return Object.assign(visitors, { + [`ImportDeclaration:has(Literal[value=/${escapedFrom}.*/])`]: ( + node: TSESTree.ImportDeclaration, + ) => { + context.report({ + node, + messageId: 'refactor', + data: { from, to }, + fix(fixer) { + return fixer.replaceText( + node, + context.sourceCode.getText(node).replace(from, to), + ); + }, + }); + }, + }); + }, {}); + }, +}); diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index a417a0630d..5453740cc9 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,4 +1,4 @@ -# @sumup/icons +# @sumup-oss/icons ## 4.0.0 diff --git a/packages/icons/CONTRIBUTING.md b/packages/icons/CONTRIBUTING.md index 20c066874e..456be13922 100644 --- a/packages/icons/CONTRIBUTING.md +++ b/packages/icons/CONTRIBUTING.md @@ -1,8 +1,8 @@ # Contributing Icons -This page outlines the process of contributing an icon to the `@sumup/icons` package. +This page outlines the process of contributing an icon to the `@sumup-oss/icons` package. -> Note that icons should be added by internal contributors with access to the SumUp [Figma icons library](https://www.figma.com/file/vnFVuPNlqF45rkw1u9toBC/SumUp-Iconography) (internal link). If you don't have access but would like to see an icon added to `@sumup/icons`, please [open an issue](https://github.com/sumup-oss/circuit-ui/issues/new). +> Note that icons should be added by internal contributors with access to the SumUp [Figma icons library](https://www.figma.com/file/vnFVuPNlqF45rkw1u9toBC/SumUp-Iconography) (internal link). If you don't have access but would like to see an icon added to `@sumup-oss/icons`, please [open an issue](https://github.com/sumup-oss/circuit-ui/issues/new). ## Adding a new icon @@ -12,7 +12,7 @@ This page outlines the process of contributing an icon to the `@sumup/icons` pac 3. Paste the SVG into your file and verify the code — refer to the ["Caveats"](#caveats) section below. 4. Commit the icons, they will automatically be optimized in the precommit hook using `svgo`. 5. Add an icon object to the icons manifest file at [`packages/icons/manifest.json`](https://github.com/sumup-oss/circuit-ui/blob/9146e47a21dcd6880f437d1a47a0c54d5a164bfd/packages/icons/manifest.json). The icons are ordered alphabetically by icon category, then name (should match the file name), and finally by size (descending). You can sort the file for example using [jq](https://github.com/jqlang/jq) - `jq '.icons|=sort_by(.category,.name,-(.size|tonumber))' packages/icons/manifest.json > tmp.json && mv tmp.json packages/icons/manifest.json` -6. Build the icons package (`npx lerna run build --scope=@sumup/icons`) and run the Storybook (`npm run docs`). Verify that your icon renders correctly on the [Icons page](http://localhost:6006/?path=/docs/features-icons--docs) (local link). +6. Build the icons package (`npx lerna run build --scope=@sumup-oss/icons`) and run the Storybook (`npm run docs`). Verify that your icon renders correctly on the [Icons page](http://localhost:6006/?path=/docs/features-icons--docs) (local link). ### Caveats @@ -92,4 +92,4 @@ To fix this, copy the icon and paste it on a draft Figma file. Make sure that it ## Deprecating an icon 1. Use the `deprecation` field in the icons manifest file at [`packages/icons/manifest.json`](https://github.com/sumup-oss/circuit-ui/blob/9146e47a21dcd6880f437d1a47a0c54d5a164bfd/packages/icons/manifest.json) to add a deprecation notice for the icon. Ideally, the notice should include a reason and recommend an alternative. The field supports markdown syntax. Add a [changeset](https://circuit.sumup.com/?path=/docs/contributing-release-process--docs#changesets) to release the change in a minor version. -2. In the next major version of `@sumup/icons`, remove the icon from the manifest and delete the SVG. +2. In the next major version of `@sumup-oss/icons`, remove the icon from the manifest and delete the SVG. diff --git a/packages/icons/README.md b/packages/icons/README.md index 0b58082a0c..9d03c4fc9c 100644 --- a/packages/icons/README.md +++ b/packages/icons/README.md @@ -1,10 +1,10 @@
-# @sumup/icons +# @sumup-oss/icons A collection of icons for the web, part of the SumUp Circuit Design System. -[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup/icons)](https://www.npmjs.com/package/@sumup/icons) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/icons/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md) +[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup-oss/icons)](https://www.npmjs.com/package/@sumup-oss/icons) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/icons/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md)
@@ -14,10 +14,10 @@ Depending on your preference, run one of the following in your terminal: ```sh # With npm -npm install @sumup/icons +npm install @sumup-oss/icons # With yarn v1 -yarn add @sumup/icons +yarn add @sumup-oss/icons ``` ## Usage @@ -27,7 +27,7 @@ yarn add @sumup/icons The easiest way to use an icon in [React](https://reactjs.org/) is to import it as a component. This approach works out of the box (no special loaders needed), is tree-shaking enabled, and comes with TypeScript typings included. ```jsx -import { Check } from '@sumup/icons'; +import { Check } from '@sumup-oss/icons'; const SuccessMessage = ({ description }) => (
@@ -40,7 +40,7 @@ const SuccessMessage = ({ description }) => ( Some icons have multiple sizes. They default to size '24', if supported, or to the smallest available size. Use the `size` prop to show one of the other sizes ('16' or '32') instead: ```jsx -import { CircleCheckmark } from '@sumup/icons'; +import { CircleCheckmark } from '@sumup-oss/icons'; const SuccessMessage = ({ description }) => (
@@ -54,7 +54,7 @@ To change the color of an icon, set the `color` property in CSS. The color will ```jsx import styled from '@emotion/styled'; -import { Check } from '@sumup/icons'; +import { Check } from '@sumup-oss/icons'; const GreenCheck = styled(Check)` color: green; @@ -73,7 +73,7 @@ const SuccessMessage = ({ description }) => ( Alternatively, it's possible to import the raw SVG files. Most bundlers require a special loader to make this work. For Webpack, we recommend the [file-loader](https://github.com/webpack-contrib/file-loader) which turns the import into a URL to the SVG. ```jsx -import checkIcon from '@sumup/icons/check_small.svg'; +import checkIcon from '@sumup-oss/icons/check_small.svg'; const SuccessMessage = ({ description }) => (
diff --git a/packages/icons/package.json b/packages/icons/package.json index db9eab6db6..a30b28718d 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,5 +1,5 @@ { - "name": "@sumup/icons", + "name": "@sumup-oss/icons", "version": "4.0.0", "description": "A collection of icons by SumUp", "type": "module", diff --git a/packages/remix-template/CHANGELOG.md b/packages/remix-template/CHANGELOG.md index b2726760b7..f52e66094c 100644 --- a/packages/remix-template/CHANGELOG.md +++ b/packages/remix-template/CHANGELOG.md @@ -1,4 +1,4 @@ -# @sumup/remix-template-circuit-ui +# @sumup-oss/remix-template-circuit-ui ## 3.1.0 diff --git a/packages/remix-template/README.md b/packages/remix-template/README.md index 3df446a444..592947b984 100644 --- a/packages/remix-template/README.md +++ b/packages/remix-template/README.md @@ -4,7 +4,7 @@ A template for Circuit UI + Remix apps with SumUp's frontend stack. -[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup/circuit-ui)](https://www.npmjs.com/package/@sumup/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/circuit-ui/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md) +[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup-oss/circuit-ui)](https://www.npmjs.com/package/@sumup-oss/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/circuit-ui/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md)
diff --git a/packages/remix-template/app/components/DocCard/DocCard.tsx b/packages/remix-template/app/components/DocCard/DocCard.tsx index 0cb5f6c9d3..69286abae1 100644 --- a/packages/remix-template/app/components/DocCard/DocCard.tsx +++ b/packages/remix-template/app/components/DocCard/DocCard.tsx @@ -1,5 +1,5 @@ import { useId } from 'react'; -import { Body, Card, Headline } from '@sumup/circuit-ui'; +import { Body, Card, Headline } from '@sumup-oss/circuit-ui'; import styles from './DocCard.module.css'; diff --git a/packages/remix-template/app/root.tsx b/packages/remix-template/app/root.tsx index f67aa026a7..916f4e8a9f 100644 --- a/packages/remix-template/app/root.tsx +++ b/packages/remix-template/app/root.tsx @@ -8,10 +8,10 @@ import { Scripts, ScrollRestoration, } from '@remix-run/react'; -import { SumUpLogo } from '@sumup/icons'; +import { SumUpLogo } from '@sumup-oss/icons'; -import '@sumup/design-tokens/light.css'; -import '@sumup/circuit-ui/styles.css'; +import '@sumup-oss/design-tokens/light.css'; +import '@sumup-oss/circuit-ui/styles.css'; import styles from './root.module.css'; diff --git a/packages/remix-template/app/routes/_index/route.tsx b/packages/remix-template/app/routes/_index/route.tsx index 576cffd843..6eb181a587 100644 --- a/packages/remix-template/app/routes/_index/route.tsx +++ b/packages/remix-template/app/routes/_index/route.tsx @@ -1,5 +1,5 @@ import type { MetaFunction } from '@remix-run/node'; -import { Title, BodyLarge } from '@sumup/circuit-ui'; +import { Title, BodyLarge } from '@sumup-oss/circuit-ui'; import { DocCard } from '../../components/DocCard/index.js'; diff --git a/packages/remix-template/package.json b/packages/remix-template/package.json index 90a50599e6..5162c96c27 100644 --- a/packages/remix-template/package.json +++ b/packages/remix-template/package.json @@ -1,5 +1,5 @@ { - "name": "@sumup/remix-template-circuit-ui", + "name": "@sumup-oss/remix-template-circuit-ui", "version": "3.1.0", "private": true, "sideEffects": false, @@ -18,19 +18,19 @@ "@remix-run/node": "^2.10.3", "@remix-run/react": "^2.10.3", "@remix-run/serve": "^2.10.3", - "@sumup/circuit-ui": "^8.0.0", - "@sumup/design-tokens": "^7.0.0", - "@sumup/icons": "^4.0.0", - "@sumup/intl": "^1.6.0", + "@sumup-oss/circuit-ui": "^8.0.0", + "@sumup-oss/design-tokens": "^7.0.0", + "@sumup-oss/icons": "^4.0.0", + "@sumup-oss/intl": "^2.0.0", "isbot": "^5.1.13", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@remix-run/dev": "^2.10.3", - "@sumup/eslint-plugin-circuit-ui": "^4.0.0", + "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", "@sumup-oss/foundry": "^8.1.1", - "@sumup/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "eslint-plugin-prettier": "^5.2.1", diff --git a/packages/remix-template/remix.config.js b/packages/remix-template/remix.config.js index f5df38c129..29afd50689 100644 --- a/packages/remix-template/remix.config.js +++ b/packages/remix-template/remix.config.js @@ -5,5 +5,5 @@ export default { // assetsBuildDirectory: "public/build", // publicPath: "/build/", // serverBuildPath: "build/index.js", - serverDependenciesToBundle: ['@sumup/circuit-ui', '@sumup/icons'], + serverDependenciesToBundle: ['@sumup-oss/circuit-ui', '@sumup-oss/icons'], }; diff --git a/packages/stylelint-plugin-circuit-ui/CHANGELOG.md b/packages/stylelint-plugin-circuit-ui/CHANGELOG.md index 98facc8770..e921a0db73 100644 --- a/packages/stylelint-plugin-circuit-ui/CHANGELOG.md +++ b/packages/stylelint-plugin-circuit-ui/CHANGELOG.md @@ -1,4 +1,4 @@ -# @sumup/stylelint-plugin-circuit-ui +# @sumup-oss/stylelint-plugin-circuit-ui ## 2.0.0 diff --git a/packages/stylelint-plugin-circuit-ui/README.md b/packages/stylelint-plugin-circuit-ui/README.md index a8e40ee548..1f5c787895 100644 --- a/packages/stylelint-plugin-circuit-ui/README.md +++ b/packages/stylelint-plugin-circuit-ui/README.md @@ -1,10 +1,10 @@
-# @sumup/stylelint-plugin-circuit-ui +# @sumup-oss/stylelint-plugin-circuit-ui Stylelint rules to help users follow best practices when using Circuit UI. -[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup/stylelint-plugin-circuit-ui)](https://www.npmjs.com/package/@sumup/stylelint-plugin-circuit-ui) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/badge/license--lightgrey.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/stylelint-plugin-circuit-ui/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md) +[![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/) [![Version](https://img.shields.io/npm/v/@sumup-oss/stylelint-plugin-circuit-ui)](https://www.npmjs.com/package/@sumup-oss/stylelint-plugin-circuit-ui) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/badge/license--lightgrey.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/packages/stylelint-plugin-circuit-ui/LICENSE) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.1%20adopted-ff69b4.svg)](https://github.com/sumup-oss/circuit-ui/tree/main/CODE_OF_CONDUCT.md)
@@ -14,10 +14,10 @@ Depending on your preference, run one of the following in your terminal: ```sh # With npm -npm install --save-dev @sumup/stylelint-plugin-circuit-ui +npm install --save-dev @sumup-oss/stylelint-plugin-circuit-ui # With yarn v1 -yarn add --dev @sumup/stylelint-plugin-circuit-ui +yarn add --dev @sumup-oss/stylelint-plugin-circuit-ui ``` ## Usage @@ -26,7 +26,7 @@ Add the plugin to your [Stylelint configuration file](https://stylelint.io/user- ```json { - "plugins": ["@sumup/stylelint-plugin-circuit-ui"] + "plugins": ["@sumup-oss/stylelint-plugin-circuit-ui"] } ``` diff --git a/packages/stylelint-plugin-circuit-ui/no-invalid-custom-properties/README.md b/packages/stylelint-plugin-circuit-ui/no-invalid-custom-properties/README.md index 184378cf73..e3ca157f75 100644 --- a/packages/stylelint-plugin-circuit-ui/no-invalid-custom-properties/README.md +++ b/packages/stylelint-plugin-circuit-ui/no-invalid-custom-properties/README.md @@ -4,7 +4,7 @@ Circuit UI exports a number of CSS custom properties (a.k.a. CSS variables) pref ## Rule Details -This rule aims to prevent issues when using custom properties. In contrast to the legacy JSON theme in `@sumup/design-tokens`, IDEs and CIs will _not_ warn or error by default if using an invalid property. +This rule aims to prevent issues when using custom properties. In contrast to the legacy JSON theme in `@sumup-oss/design-tokens`, IDEs and CIs will _not_ warn or error by default if using an invalid property. Examples of **incorrect** code for this rule: diff --git a/packages/stylelint-plugin-circuit-ui/no-invalid-custom-properties/index.spec.ts b/packages/stylelint-plugin-circuit-ui/no-invalid-custom-properties/index.spec.ts index e00dc18c35..e1ccbc937d 100644 --- a/packages/stylelint-plugin-circuit-ui/no-invalid-custom-properties/index.spec.ts +++ b/packages/stylelint-plugin-circuit-ui/no-invalid-custom-properties/index.spec.ts @@ -14,7 +14,7 @@ */ // We disable the rule in this file because we explicitly test invalid cases -/* eslint-disable @sumup/circuit-ui/no-invalid-custom-properties */ +/* eslint-disable @sumup-oss/circuit-ui/no-invalid-custom-properties */ import { testRule } from '../setupTests.js'; diff --git a/packages/stylelint-plugin-circuit-ui/no-invalid-custom-properties/index.ts b/packages/stylelint-plugin-circuit-ui/no-invalid-custom-properties/index.ts index 547a5fab8c..b837949fd5 100644 --- a/packages/stylelint-plugin-circuit-ui/no-invalid-custom-properties/index.ts +++ b/packages/stylelint-plugin-circuit-ui/no-invalid-custom-properties/index.ts @@ -14,7 +14,7 @@ */ import stylelint, { type Rule } from 'stylelint'; -import { schema } from '@sumup/design-tokens'; +import { schema } from '@sumup-oss/design-tokens'; const PREFIX = '--cui-'; const VALID_CUSTOM_PROPERTIES_WITHOUT_PREFIX = schema.map(({ name }) => diff --git a/packages/stylelint-plugin-circuit-ui/package.json b/packages/stylelint-plugin-circuit-ui/package.json index 05ecbf4ae7..d89e7ca2e4 100644 --- a/packages/stylelint-plugin-circuit-ui/package.json +++ b/packages/stylelint-plugin-circuit-ui/package.json @@ -1,5 +1,5 @@ { - "name": "@sumup/stylelint-plugin-circuit-ui", + "name": "@sumup-oss/stylelint-plugin-circuit-ui", "version": "2.0.0", "description": "Stylelint rules to lint Circuit UI.", "exports": "./dist/index.js", @@ -29,13 +29,13 @@ "test": "vitest" }, "devDependencies": { - "@sumup/design-tokens": "^7.0.0", + "@sumup-oss/design-tokens": "^7.0.0", "@tsconfig/node18": "^18.2.4", "jest-preset-stylelint": "^7.1.0", "typescript": "^5.5.4" }, "peerDependencies": { - "@sumup/design-tokens": ">=5.3.0", + "@sumup-oss/design-tokens": ">=5.3.0", "stylelint": "^16.7.0" } } From 8be7f3b36e22135f6f312ea2aa4b582c252eb161 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Wed, 14 Aug 2024 20:55:39 +0200 Subject: [PATCH 03/48] Simplify the Input element type (#2306) --- .changeset/flat-steaks-itch.md | 5 +++ .../CurrencyInput/CurrencyInput.spec.tsx | 3 +- .../CurrencyInput/CurrencyInput.tsx | 4 +-- .../components/DateInput/DateInput.spec.tsx | 3 +- .../components/DateInput/DateInput.tsx | 4 +-- .../components/Input/Input.spec.tsx | 6 ++-- .../circuit-ui/components/Input/Input.tsx | 32 +++++++++++------ packages/circuit-ui/components/Input/index.ts | 2 +- .../PercentageInput/PercentageInput.spec.tsx | 3 +- .../PercentageInput/PercentageInput.tsx | 7 ++-- .../PhoneNumberInput.spec.tsx | 3 +- .../PhoneNumberInput/PhoneNumberInput.tsx | 16 ++++----- .../SearchInput/SearchInput.spec.tsx | 3 +- .../SearchInput/SearchInput.stories.tsx | 4 +-- .../components/SearchInput/SearchInput.tsx | 6 ++-- .../components/TextArea/TextArea.tsx | 34 ++++++++++--------- .../circuit-ui/components/TextArea/types.ts | 29 ---------------- .../TextArea/useAutoExpand.spec.tsx | 5 ++- .../components/TextArea/useAutoExpand.ts | 5 ++- 19 files changed, 79 insertions(+), 95 deletions(-) create mode 100644 .changeset/flat-steaks-itch.md delete mode 100644 packages/circuit-ui/components/TextArea/types.ts diff --git a/.changeset/flat-steaks-itch.md b/.changeset/flat-steaks-itch.md new file mode 100644 index 0000000000..60d85ef200 --- /dev/null +++ b/.changeset/flat-steaks-itch.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': major +--- + +Deprecated the `InputElement` interface and narrowed the Input's element type to `HTMLInputElement` and the TextArea's element type to `HTMLTextAreaElement`. This affects `ref`s and event handlers. diff --git a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx index 709c3b9402..ebadbf14fd 100644 --- a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx +++ b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx @@ -17,7 +17,6 @@ import { describe, expect, it } from 'vitest'; import { createRef, useState, type ChangeEvent } from 'react'; import { render, userEvent, axe, screen } from '../../util/test-utils.js'; -import type { InputElement } from '../Input/index.js'; import { CurrencyInput, type CurrencyInputProps } from './CurrencyInput.js'; @@ -30,7 +29,7 @@ const defaultProps = { describe('CurrencyInput', () => { it('should forward a ref', () => { - const ref = createRef(); + const ref = createRef(); render(); const input: HTMLInputElement = screen.getByRole('textbox'); expect(ref.current).toBe(input); diff --git a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx index c5e75954ef..3b4d040334 100644 --- a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx +++ b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx @@ -20,7 +20,7 @@ import { resolveCurrencyFormat } from '@sumup-oss/intl'; import { NumericFormat, type NumericFormatProps } from 'react-number-format'; import { clsx } from '../../styles/clsx.js'; -import { Input, type InputElement, type InputProps } from '../Input/index.js'; +import { Input, type InputProps } from '../Input/index.js'; import { formatPlaceholder } from './CurrencyInputService.js'; import classes from './CurrencyInput.module.css'; @@ -73,7 +73,7 @@ const DUMMY_DELIMITER = '?'; * the symbol according to the locale. The corresponding service exports a * parser for formatting values automatically. */ -export const CurrencyInput = forwardRef( +export const CurrencyInput = forwardRef( ( { locale, diff --git a/packages/circuit-ui/components/DateInput/DateInput.spec.tsx b/packages/circuit-ui/components/DateInput/DateInput.spec.tsx index 267bd4f751..aad82917a0 100644 --- a/packages/circuit-ui/components/DateInput/DateInput.spec.tsx +++ b/packages/circuit-ui/components/DateInput/DateInput.spec.tsx @@ -17,7 +17,6 @@ import { describe, expect, it } from 'vitest'; import { createRef } from 'react'; import { render, axe } from '../../util/test-utils.js'; -import type { InputElement } from '../Input/index.js'; import { DateInput } from './DateInput.js'; @@ -25,7 +24,7 @@ describe('DateInput', () => { const baseProps = { label: 'Date' }; it('should forward a ref', () => { - const ref = createRef(); + const ref = createRef(); const { container } = render(); const input = container.querySelector('input'); expect(ref.current).toBe(input); diff --git a/packages/circuit-ui/components/DateInput/DateInput.tsx b/packages/circuit-ui/components/DateInput/DateInput.tsx index a20a3343c6..e116066719 100644 --- a/packages/circuit-ui/components/DateInput/DateInput.tsx +++ b/packages/circuit-ui/components/DateInput/DateInput.tsx @@ -18,7 +18,7 @@ import { forwardRef, useState, useEffect } from 'react'; import { PatternFormat } from 'react-number-format'; -import { Input, type InputElement, type InputProps } from '../Input/index.js'; +import { Input, type InputProps } from '../Input/index.js'; import { clsx } from '../../styles/clsx.js'; import classes from './DateInput.module.css'; @@ -42,7 +42,7 @@ export interface DateInputProps * DateInput component for forms. * The input value is always a string in the format `YYYY-MM-DD`. */ -export const DateInput = forwardRef( +export const DateInput = forwardRef( ({ inputClassName, ...props }, ref) => { // When server-side rendering, we assume that the user's browser supports // the native date input. diff --git a/packages/circuit-ui/components/Input/Input.spec.tsx b/packages/circuit-ui/components/Input/Input.spec.tsx index 7bad82ff23..f90978596e 100644 --- a/packages/circuit-ui/components/Input/Input.spec.tsx +++ b/packages/circuit-ui/components/Input/Input.spec.tsx @@ -18,7 +18,7 @@ import { createRef } from 'react'; import { render, axe, screen } from '../../util/test-utils.js'; -import { Input, type InputElement } from './Input.js'; +import { Input } from './Input.js'; const defaultProps = { label: 'Label', @@ -35,14 +35,14 @@ describe('Input', () => { }); it('should forward a ref to the input', () => { - const ref = createRef(); + const ref = createRef(); const { container } = render(); const input = container.querySelector('input'); expect(ref.current).toBe(input); }); it('should forward a ref to the textarea', () => { - const ref = createRef(); + const ref = createRef(); const { container } = render( , ); diff --git a/packages/circuit-ui/components/Input/Input.tsx b/packages/circuit-ui/components/Input/Input.tsx index 4d411287b2..b84be9128c 100644 --- a/packages/circuit-ui/components/Input/Input.tsx +++ b/packages/circuit-ui/components/Input/Input.tsx @@ -20,7 +20,6 @@ import { useId, type ComponentType, type InputHTMLAttributes, - type TextareaHTMLAttributes, } from 'react'; import { @@ -38,19 +37,18 @@ import { clsx } from '../../styles/clsx.js'; import classes from './Input.module.css'; -export type InputElement = HTMLInputElement & HTMLTextAreaElement; -type CircuitInputHTMLAttributes = InputHTMLAttributes & - TextareaHTMLAttributes; +/** + * @deprecated + * + * Use the `HTMLInputElement` or `HTMLTextAreaElement` interfaces instead. + */ +export type InputElement = HTMLInputElement; -export interface InputProps extends CircuitInputHTMLAttributes { +export interface BaseInputProps { /** * A clear and concise description of the input purpose. */ label: string; - /** - * The HTML input element to render. - */ - as?: 'input' | 'textarea'; /** * A unique identifier for the input field. If not defined, a randomly * generated id is used. @@ -106,10 +104,21 @@ export interface InputProps extends CircuitInputHTMLAttributes { inputClassName?: string; } +export interface InputProps + extends BaseInputProps, + InputHTMLAttributes { + /** + * @private + * + * Use the {@link TextArea} component. + */ + as?: 'input' | 'textarea'; +} + /** * Input component for forms. Takes optional prefix and suffix as render props. */ -export const Input = forwardRef( +export const Input = forwardRef( ( { value, @@ -175,6 +184,9 @@ export const Input = forwardRef( { it('should forward a ref', () => { - const ref = createRef(); + const ref = createRef(); render(); const input = screen.getByRole('textbox'); expect(ref.current).toBe(input); diff --git a/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx b/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx index 617cab8fc6..ea40ee9001 100644 --- a/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx +++ b/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx @@ -20,7 +20,7 @@ import { resolveNumberFormat } from '@sumup-oss/intl'; import { NumericFormat, type NumericFormatProps } from 'react-number-format'; import { clsx } from '../../styles/clsx.js'; -import { Input, type InputElement, type InputProps } from '../Input/index.js'; +import { Input, type InputProps } from '../Input/index.js'; import { formatPlaceholder } from './PercentageInputService.js'; import classes from './PercentageInput.module.css'; @@ -62,7 +62,10 @@ const DEFAULT_FORMAT = { /** * PercentageInput component for fractional values */ -export const PercentageInput = forwardRef( +export const PercentageInput = forwardRef< + HTMLInputElement, + PercentageInputProps +>( ( { locale, diff --git a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.spec.tsx b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.spec.tsx index 4fa77700bf..ba0b2a9dee 100644 --- a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.spec.tsx +++ b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.spec.tsx @@ -17,7 +17,6 @@ import { describe, it, vi, expect } from 'vitest'; import { createRef } from 'react'; import { axe, render, screen, userEvent } from '../../util/test-utils.js'; -import type { InputElement } from '../Input/Input.js'; import { PhoneNumberInput, @@ -67,7 +66,7 @@ describe('PhoneNumberInput', () => { }); it('should forward a ref to the subscriber number input', () => { - const ref = createRef(); + const ref = createRef(); const props = { ...defaultProps, subscriberNumber: { ...defaultProps.subscriberNumber, ref }, diff --git a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx index 3aa8bcc1c6..f3d8ef9f21 100644 --- a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx +++ b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx @@ -29,7 +29,7 @@ import { } from 'react'; import { Select, type SelectProps } from '../Select/index.js'; -import { Input, type InputElement, type InputProps } from '../Input/index.js'; +import { Input, type InputProps } from '../Input/index.js'; import { FieldLabelText, FieldLegend, @@ -144,7 +144,7 @@ export interface PhoneNumberInputProps /** * The ref to the country code selector HTML DOM element. */ - ref?: ForwardedRef; + ref?: ForwardedRef; /** * Render prop that should render a left-aligned overlay icon or element. * Receives a className prop. @@ -185,7 +185,7 @@ export interface PhoneNumberInputProps /** * The ref to the subscriber number input HTML DOM element. */ - ref?: ForwardedRef; + ref?: ForwardedRef; }; } @@ -218,8 +218,8 @@ export const PhoneNumberInput = forwardRef< }, ref, ) => { - const countryCodeRef = useRef(null); - const subscriberNumberRef = useRef(null); + const countryCodeRef = useRef(null); + const subscriberNumberRef = useRef(null); const validationHintId = useId(); @@ -361,8 +361,8 @@ export const PhoneNumberInput = forwardRef< readOnly={true} onChange={() => {}} ref={applyMultipleRefs( - countryCodeRef as RefObject, - countryCode.ref as ForwardedRef, + countryCodeRef as RefObject, + countryCode.ref as ForwardedRef, )} renderPrefix={countryCode.renderPrefix} /> @@ -401,7 +401,7 @@ export const PhoneNumberInput = forwardRef< {...subscriberNumber} invalid={invalid || subscriberNumber.invalid} readOnly={readOnly || subscriberNumber.readonly} - onChange={eachFn<[ChangeEvent]>([ + onChange={eachFn<[ChangeEvent]>([ subscriberNumber.onChange, handleChange, ])} diff --git a/packages/circuit-ui/components/SearchInput/SearchInput.spec.tsx b/packages/circuit-ui/components/SearchInput/SearchInput.spec.tsx index 71a9b63b31..f987235fb0 100644 --- a/packages/circuit-ui/components/SearchInput/SearchInput.spec.tsx +++ b/packages/circuit-ui/components/SearchInput/SearchInput.spec.tsx @@ -17,7 +17,6 @@ import { describe, expect, it, vi } from 'vitest'; import { createRef } from 'react'; import { render, axe, screen } from '../../util/test-utils.js'; -import type { InputElement } from '../Input/index.js'; import { SearchInput } from './SearchInput.js'; @@ -45,7 +44,7 @@ describe('SearchInput', () => { }); it('should forward a ref', () => { - const ref = createRef(); + const ref = createRef(); const { container } = render(); const input = container.querySelector('input'); expect(ref.current).toBe(input); diff --git a/packages/circuit-ui/components/SearchInput/SearchInput.stories.tsx b/packages/circuit-ui/components/SearchInput/SearchInput.stories.tsx index abaafde30c..576b0ba68a 100644 --- a/packages/circuit-ui/components/SearchInput/SearchInput.stories.tsx +++ b/packages/circuit-ui/components/SearchInput/SearchInput.stories.tsx @@ -15,8 +15,6 @@ import { useState, type ChangeEvent } from 'react'; -import type { InputElement } from '../Input/index.js'; - import { SearchInput, type SearchInputProps } from './SearchInput.js'; export default { @@ -32,7 +30,7 @@ export const Base = (args: SearchInputProps) => { const handleChange = ({ target: { value: inputValue }, - }: ChangeEvent) => { + }: ChangeEvent) => { setValue(inputValue); }; diff --git a/packages/circuit-ui/components/SearchInput/SearchInput.tsx b/packages/circuit-ui/components/SearchInput/SearchInput.tsx index 3446570515..1ade2ca9eb 100644 --- a/packages/circuit-ui/components/SearchInput/SearchInput.tsx +++ b/packages/circuit-ui/components/SearchInput/SearchInput.tsx @@ -18,7 +18,7 @@ import { forwardRef, useRef } from 'react'; import { Search } from '@sumup-oss/icons'; -import { Input, type InputElement, type InputProps } from '../Input/index.js'; +import { Input, type InputProps } from '../Input/index.js'; import { CloseButton } from '../CloseButton/index.js'; import { AccessibilityError, @@ -49,9 +49,9 @@ export type SearchInputProps = InputProps & ClearProps; /** * SearchInput component for forms. */ -export const SearchInput = forwardRef( +export const SearchInput = forwardRef( ({ value, onClear, clearLabel, inputClassName, ...props }, ref) => { - const localRef = useRef(null); + const localRef = useRef(null); if ( process.env.NODE_ENV !== 'production' && diff --git a/packages/circuit-ui/components/TextArea/TextArea.tsx b/packages/circuit-ui/components/TextArea/TextArea.tsx index c06db133f4..4e20029711 100644 --- a/packages/circuit-ui/components/TextArea/TextArea.tsx +++ b/packages/circuit-ui/components/TextArea/TextArea.tsx @@ -15,34 +15,35 @@ 'use client'; -import { forwardRef, useRef } from 'react'; +import { forwardRef, useRef, type TextareaHTMLAttributes } from 'react'; -import { Input, type InputElement, type InputProps } from '../Input/index.js'; +import { Input, type BaseInputProps } from '../Input/index.js'; import { applyMultipleRefs } from '../../util/refs.js'; import { clsx } from '../../styles/clsx.js'; import { useAutoExpand } from './useAutoExpand.js'; import classes from './TextArea.module.css'; -export type TextAreaProps = Omit & { - /** - * The number of visible text lines for the control. - * If set to `auto`, the control will auto-expand vertically to show the whole value. - */ - rows?: InputProps['rows'] | 'auto'; - /** - * Define the minimum number of visible text lines for the control. - * Works only when `rows` is set to `auto`. - */ - minRows?: InputProps['rows']; -}; +export type TextAreaProps = BaseInputProps & + Omit, 'rows'> & { + /** + * The number of visible text lines for the control. + * If set to `auto`, the control will auto-expand vertically to show the whole value. + */ + rows?: number | 'auto'; + /** + * Define the minimum number of visible text lines for the control. + * Works only when `rows` is set to `auto`. + */ + minRows?: number; + }; /** * TextArea component for forms. */ -export const TextArea = forwardRef( +export const TextArea = forwardRef( ({ inputClassName, ...props }, ref) => { - const localRef = useRef(null); + const localRef = useRef(null); const modifiedProps = useAutoExpand(localRef, props); return ( @@ -50,6 +51,7 @@ export const TextArea = forwardRef( {...modifiedProps} inputClassName={clsx(classes.base, inputClassName)} as="textarea" + // @ts-expect-error The input is rendered as a `textarea` element above. ref={applyMultipleRefs(localRef, ref)} /> ); diff --git a/packages/circuit-ui/components/TextArea/types.ts b/packages/circuit-ui/components/TextArea/types.ts deleted file mode 100644 index 0dcf4fd793..0000000000 --- a/packages/circuit-ui/components/TextArea/types.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Copyright 2023, SumUp Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import type { InputProps } from '../Input/index.js'; - -export type TextAreaProps = Omit & { - /** - * The number of visible text lines for the control. - * If set to `auto`, the control will auto-expand vertically to show the whole value. - */ - rows?: InputProps['rows'] | 'auto'; - /** - * Define the minimum number of visible text lines for the control. - * Works only when `rows` is set to `auto`. - */ - minRows?: InputProps['rows']; -}; diff --git a/packages/circuit-ui/components/TextArea/useAutoExpand.spec.tsx b/packages/circuit-ui/components/TextArea/useAutoExpand.spec.tsx index cd5bc77be3..f8b9eaf097 100644 --- a/packages/circuit-ui/components/TextArea/useAutoExpand.spec.tsx +++ b/packages/circuit-ui/components/TextArea/useAutoExpand.spec.tsx @@ -22,7 +22,6 @@ import { render, screen, } from '../../util/test-utils.js'; -import type { InputElement } from '../Input/Input.js'; import { TextArea, type TextAreaProps } from './TextArea.js'; import { useAutoExpand } from './useAutoExpand.js'; @@ -35,7 +34,7 @@ const createTextAreaRef = (props = {}) => { render(