From 16f77eb375b2ae99e0be8030417133ee70f1d399 Mon Sep 17 00:00:00 2001
From: sirineJ <112706079+sirineJ@users.noreply.github.com>
Date: Wed, 9 Oct 2024 18:02:36 +0200
Subject: [PATCH] chore: mark the Calendar component as stable. Update the
eslint component-lifecycle-imports rule
---
.changeset/gold-worms-worry.md | 7 ++++
.../components/Calendar/Calendar.mdx | 2 +-
packages/circuit-ui/experimental.ts | 2 -
packages/circuit-ui/index.ts | 3 ++
.../component-lifecycle-imports/index.spec.ts | 40 ++++++++++++++++---
.../component-lifecycle-imports/index.ts | 5 +++
6 files changed, 51 insertions(+), 8 deletions(-)
create mode 100644 .changeset/gold-worms-worry.md
diff --git a/.changeset/gold-worms-worry.md b/.changeset/gold-worms-worry.md
new file mode 100644
index 0000000000..29eaf59e13
--- /dev/null
+++ b/.changeset/gold-worms-worry.md
@@ -0,0 +1,7 @@
+---
+"@sumup-oss/eslint-plugin-circuit-ui": minor
+"@sumup-oss/circuit-ui": minor
+---
+
+Marked the `Calendar` component as stable.
+Updated the `component-lifecycle-imports` eslint rule to flag relevant imports from @sumup-oss/circuit-ui/experimental"
diff --git a/packages/circuit-ui/components/Calendar/Calendar.mdx b/packages/circuit-ui/components/Calendar/Calendar.mdx
index 917b694f3d..854a0e4413 100644
--- a/packages/circuit-ui/components/Calendar/Calendar.mdx
+++ b/packages/circuit-ui/components/Calendar/Calendar.mdx
@@ -5,7 +5,7 @@ import * as Stories from './Calendar.stories';
# Calendar
-
+
The Calendar component displays a monthly date grid. This is a low-level component for advanced use cases; you likely want to use the [DateInput](Forms/Input/DateInput/Base) component instead.
diff --git a/packages/circuit-ui/experimental.ts b/packages/circuit-ui/experimental.ts
index f14e515f7c..b6d69b2e3d 100644
--- a/packages/circuit-ui/experimental.ts
+++ b/packages/circuit-ui/experimental.ts
@@ -22,7 +22,5 @@ export {
Toggletip,
type ToggletipProps,
} from './components/Toggletip/index.js';
-export { Calendar, type CalendarProps } from './components/Calendar/index.js';
-export { type PlainDateRange } from './util/date.js';
export { PhoneNumberInput } from './components/PhoneNumberInput/index.js';
export type { PhoneNumberInputProps } from './components/PhoneNumberInput/index.js';
diff --git a/packages/circuit-ui/index.ts b/packages/circuit-ui/index.ts
index be4c7a7e41..d212b2b28c 100644
--- a/packages/circuit-ui/index.ts
+++ b/packages/circuit-ui/index.ts
@@ -62,6 +62,9 @@ export { PercentageInput } from './components/PercentageInput/index.js';
export type { PercentageInputProps } from './components/PercentageInput/index.js';
export { ImageInput } from './components/ImageInput/index.js';
export type { ImageInputProps } from './components/ImageInput/index.js';
+export { Calendar } from './components/Calendar/index.js';
+export type { CalendarProps } from './components/Calendar/index.js';
+export type { PlainDateRange } from './util/date.js';
// Actions
export { Button } from './components/Button/index.js';
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 55b5f058e5..39ca1c900d 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
@@ -60,7 +60,7 @@ ruleTester.run('component-lifecycle-imports', componentLifecycleImports, {
],
invalid: [
{
- name: 'single import with single match',
+ name: '[Legacy] single import with single match',
code: `
import { RangePicker } from '@sumup-oss/circuit-ui';
`,
@@ -70,7 +70,7 @@ ruleTester.run('component-lifecycle-imports', componentLifecycleImports, {
errors: [{ messageId: 'refactor' }],
},
{
- name: 'single import with single match with local name',
+ name: '[Legacy] single import with single match with local name',
code: `
import { RangePicker as RangeInput } from '@sumup-oss/circuit-ui';
`,
@@ -80,7 +80,7 @@ ruleTester.run('component-lifecycle-imports', componentLifecycleImports, {
errors: [{ messageId: 'refactor' }],
},
{
- name: 'multiple imports with single match',
+ name: '[Legacy] multiple imports with single match',
code: `
import { RangePicker, Button } from '@sumup-oss/circuit-ui';
`,
@@ -90,7 +90,7 @@ ruleTester.run('component-lifecycle-imports', componentLifecycleImports, {
errors: [{ messageId: 'refactor' }],
},
{
- name: 'multiple imports with multiple matches',
+ name: '[Legacy] multiple imports with multiple matches',
code: `
import { RangePicker, RangePickerController } from '@sumup-oss/circuit-ui';
`,
@@ -101,7 +101,7 @@ ruleTester.run('component-lifecycle-imports', componentLifecycleImports, {
errors: [{ messageId: 'refactor' }, { messageId: 'refactor' }],
},
{
- name: 'single type import with single match',
+ name: '[Legacy] single type import with single match',
code: `
import type { RangePickerProps } from '@sumup-oss/circuit-ui';
`,
@@ -110,5 +110,35 @@ ruleTester.run('component-lifecycle-imports', componentLifecycleImports, {
`,
errors: [{ messageId: 'refactor' }],
},
+ {
+ name: '[Experimental] single import with single match',
+ code: `
+ import { Calendar } from '@sumup/circuit-ui/experimental';
+ `,
+ output: `
+ import { Calendar } from '@sumup/circuit-ui';
+ `,
+ errors: [{ messageId: 'refactor' }],
+ },
+ {
+ name: '[Experimental] single import with single match with local name',
+ code: `
+ import { Calendar as CuiCalendar } from '@sumup/circuit-ui/experimental';
+ `,
+ output: `
+ import { Calendar as CuiCalendar } from '@sumup/circuit-ui';
+ `,
+ errors: [{ messageId: 'refactor' }],
+ },
+ {
+ name: '[Experimental] single type import with single match',
+ code: `
+ import type { CalendarProps } from '@sumup/circuit-ui/experimental';
+ `,
+ output: `
+ import type { CalendarProps } from '@sumup/circuit-ui';
+ `,
+ 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 909f6f48e6..29aeb23dd3 100644
--- a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts
+++ b/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts
@@ -71,6 +71,11 @@ const mappings = [
'center',
],
},
+ {
+ from: '@sumup-oss/circuit-ui/experimental',
+ to: '@sumup-oss/circuit-ui',
+ specifiers: ['Calendar', 'CalendarProps', 'PlainDateRange'],
+ },
];
export const componentLifecycleImports = createRule({