chore: deprecate packages (#1527)

* chore: update story titles * chore: deprecate packages * chore: remove legacy code
launchdarkly · Jan 21, 2025 · e2b9bad · e2b9bad
1 parent 8b65bec
commit e2b9bad
Show file tree

Hide file tree

Showing 111 changed files with 128 additions and 453 deletions.
diff --git a/.changeset/lovely-shirts-glow.md b/.changeset/lovely-shirts-glow.md
@@ -0,0 +1,14 @@
+---
+"@launchpad-ui/progress-bubbles": patch
+"@launchpad-ui/collapsible": patch
+"@launchpad-ui/navigation": patch
+"@launchpad-ui/pagination": patch
+"@launchpad-ui/markdown": patch
+"@launchpad-ui/columns": patch
+"@launchpad-ui/avatar": patch
+"@launchpad-ui/inline": patch
+"@launchpad-ui/stack": patch
+"@launchpad-ui/core": patch
+---
+
+Deprecate packages
diff --git a/.plop/templates/component/story.tsx.hbs b/.plop/templates/component/story.tsx.hbs
@@ -6,11 +6,6 @@ export default {
   component: {{pascalCase name}},
   title: 'Components/{{pascalCase name}}',
   description: '{{description}}',
-  parameters: {
-    status: {
-      type: import.meta.env.STORYBOOK_PACKAGE_STATUS__{{constantCase name}},
-    },
-  },
 };
 
 type Story = StoryObj<typeof {{pascalCase name}}>;

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,10 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
-import fs from 'fs';
-import path from 'path';
-
-import tsconfig from '../tsconfig.json';
-
 const config: StorybookConfig = {
 	stories: [
 		'../docs/stories/**/*.mdx',
@@ -29,11 +24,6 @@ const config: StorybookConfig = {
 		disableTelemetry: true,
 	},
 	staticDirs: ['.', { from: '../packages/card/src/img', to: '/static' }],
-	env: (config) => {
-		const packageStatuses = getPackageStatusEnvVars();
-
-		return { ...config, ...packageStatuses };
-	},
 	async viteFinal(config) {
 		return config;
 	},
@@ -57,22 +47,4 @@ const config: StorybookConfig = {
 	},
 };
 
-const getPackageStatusEnvVars = () => {
-	const paths = tsconfig.compilerOptions.paths;
-	const statuses: Record<string, string> = {};
-
-	for (const key of Object.keys(paths)) {
-		const filepath = path.resolve(
-			__dirname,
-			`.${paths[key as keyof typeof paths][0]}/../package.json`,
-		);
-		const contents = fs.readFileSync(filepath);
-		const { status } = JSON.parse(contents.toString());
-		const statusKey = key.replace('@launchpad-ui/', '').replace(/-/g, '_').toUpperCase();
-		statuses[`STORYBOOK_PACKAGE_STATUS__${statusKey}`] = status;
-	}
-
-	return statuses;
-};
-
 export default config;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -87,27 +87,6 @@ export const parameters: Parameters = {
 			dark: allModes.dark,
 		},
 	},
-	status: {
-		statuses: {
-			alpha: {
-				background: 'hsl(275.4, 48%, 50.2%)',
-				color: '#ffffff',
-				description:
-					'This component is very unstable and will likely break when upgrading versions.',
-			},
-			beta: {
-				background: 'hsl(45.4, 58.3%, 50.2%)',
-				color: '#ffffff',
-				description:
-					'This component is still relatively unstable and may break when upgrading versions.',
-			},
-			stable: {
-				background: 'hsl(154.1, 100%, 36.3%)',
-				color: '#ffffff',
-				description: 'This component is stable for production use.',
-			},
-		},
-	},
 	docs: {
 		source: {
 			excludeDecorators: true,

diff --git a/packages/alert/stories/Alert.stories.tsx b/packages/alert/stories/Alert.stories.tsx
@@ -7,12 +7,9 @@ import { Alert } from '../src';
 
 export default {
 	component: Alert,
-	title: 'Legacy/Deprecated/Alert',
+	title: 'Legacy/Alert',
 	description: 'Actions trigger alerts based on user interaction.',
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__ALERT,
-		},
 		chromatic: { disableSnapshot: true },
 	},
 	argTypes: {

diff --git a/packages/avatar/src/Avatar.tsx b/packages/avatar/src/Avatar.tsx
@@ -24,6 +24,11 @@ const DIMENSIONS = {
 	large: '40',
 };
 
+/**
+ * @deprecated use `Avatar` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-content-avatar--docs
+ */
 const Avatar = ({
 	alt = '',
 	url,

diff --git a/packages/avatar/stories/Avatar.stories.tsx b/packages/avatar/stories/Avatar.stories.tsx
@@ -6,12 +6,10 @@ import { Avatar } from '../src';
 
 export default {
 	component: Avatar,
-	title: 'Legacy/Sunset/Avatar',
+	title: 'Legacy/Avatar',
 	description: 'An element that represents a user visually.',
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__AVATAR,
-		},
+		chromatic: { disableSnapshot: true },
 	},
 	argTypes: {
 		size: {

diff --git a/packages/banner/stories/Banner.stories.tsx b/packages/banner/stories/Banner.stories.tsx
@@ -4,12 +4,9 @@ import { Banner } from '../src';
 
 export default {
 	component: Banner,
-	title: 'Legacy/Deprecated/Banner',
+	title: 'Legacy/Banner',
 	description: 'Banners contain a system-wide message or status.',
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__BANNER,
-		},
 		chromatic: { disableSnapshot: true },
 	},
 	argTypes: {

diff --git a/packages/box/stories/Box.stories.tsx b/packages/box/stories/Box.stories.tsx
@@ -8,11 +8,6 @@ export default {
 	component: Box,
 	title: 'Legacy/Experimental/Box',
 	description: '',
-	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__BOX,
-		},
-	},
 };
 
 type Story = StoryObj<typeof Box>;
@@ -30,7 +25,7 @@ export const Example: Story = {
 export const Composition: Story = {
 	args: {
 		background: '$yellow-cyan',
-		borderColor: '$cyan.500',
+		borderColor: '$brand.cyan.base',
 		color: '$black.900',
 		asChild: true,
 		children: <Button>Button</Button>,

diff --git a/packages/button/stories/Button.stories.tsx b/packages/button/stories/Button.stories.tsx
@@ -45,13 +45,10 @@ const buttonTemplateWithStates: Decorator = (storyComponent, context) => {
 
 export default {
 	component: Button,
-	title: 'Legacy/Deprecated/Button',
+	title: 'Legacy/Button',
 	description: 'Buttons trigger actions based on user interaction.',
 	decorators: [buttonTemplateWithStates],
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__BUTTON,
-		},
 		chromatic: { disableSnapshot: true },
 	},
 	argTypes: {

diff --git a/packages/button/stories/ButtonGroup.stories.tsx b/packages/button/stories/ButtonGroup.stories.tsx
@@ -49,13 +49,10 @@ const buttonTemplateWithStates: Decorator = (storyComponent, context) => {
 
 export default {
 	component: ButtonGroup,
-	title: 'Legacy/Deprecated/Button/ButtonGroup',
+	title: 'Legacy/Button/ButtonGroup',
 	description: 'ButtonGroups group related actions and trigger them based on user interaction.',
 	decorators: [buttonTemplateWithStates],
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__BUTTON,
-		},
 		chromatic: { disableSnapshot: true },
 	},
 	argTypes: {

diff --git a/packages/button/stories/IconButton.stories.tsx b/packages/button/stories/IconButton.stories.tsx
@@ -47,13 +47,10 @@ const buttonTemplateWithStates: Decorator = (storyComponent, context) => {
 
 export default {
 	component: IconButton,
-	title: 'Legacy/Deprecated/Button/IconButton',
+	title: 'Legacy/Button/IconButton',
 	description: 'Buttons trigger actions based on user interaction.',
 	decorators: [buttonTemplateWithStates],
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__BUTTON,
-		},
 		chromatic: { disableSnapshot: true },
 	},
 	argTypes: {

diff --git a/packages/button/stories/UploadButton.stories.tsx b/packages/button/stories/UploadButton.stories.tsx
@@ -4,12 +4,9 @@ import { UploadButton } from '../src';
 
 export default {
 	component: UploadButton,
-	title: 'Legacy/Deprecated/Button/UploadButton',
+	title: 'Legacy/Button/UploadButton',
 	description: 'UploadButtons trigger a native file upload experience.',
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__BUTTON,
-		},
 		chromatic: { disableSnapshot: true },
 	},
 	argTypes: {

diff --git a/packages/card/stories/RadioCard.stories.tsx b/packages/card/stories/RadioCard.stories.tsx
@@ -4,7 +4,7 @@ import { RadioCard } from '../src/RadioCard';
 
 export default {
 	component: RadioCard,
-	title: 'Legacy/Deprecated/Card/RadioCard',
+	title: 'Legacy/Card/RadioCard',
 	description: 'A radio button with a label and optional image and subtext.',
 	decorators: [
 		(Story) => (
@@ -14,9 +14,6 @@ export default {
 		),
 	],
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__RADIOCARD,
-		},
 		chromatic: { disableSnapshot: true },
 	},
 } as Meta<typeof RadioCard>;

diff --git a/packages/chip/stories/Chip.stories.tsx b/packages/chip/stories/Chip.stories.tsx
@@ -6,12 +6,9 @@ import { Chip } from '../src';
 
 export default {
 	component: Chip,
-	title: 'Legacy/Deprecated/Chip',
+	title: 'Legacy/Chip',
 	description: 'Chips can be used as visual indicators for tags.',
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__CHIP,
-		},
 		chromatic: { disableSnapshot: true },
 	},
 	argTypes: {

diff --git a/packages/clipboard/src/CopyToClipboard.tsx b/packages/clipboard/src/CopyToClipboard.tsx
@@ -38,7 +38,7 @@ const CopyConfirmation = () => (
 /**
  * @deprecated follow the recipe from `@launchpad-ui/components` instead
  *
- * https://launchpad.launchdarkly.com/?path=/docs/recipes-composition--docs#copy%20to%20clipboard
+ * https://launchpad.launchdarkly.com/?path=/docs/recipes-copytoclipboard--docs
  */
 const CopyToClipboard = forwardRef<CopyToClipboardHandleRef, CopyToClipboardProps>(
 	(

diff --git a/packages/clipboard/stories/CopyToClipboard.stories.tsx b/packages/clipboard/stories/CopyToClipboard.stories.tsx
@@ -8,12 +8,9 @@ import { CopyToClipboard } from '../src';
 
 export default {
 	component: CopyToClipboard,
-	title: 'Legacy/Deprecated/CopyToClipboard',
+	title: 'Legacy/CopyToClipboard',
 	description: 'Clipboards copy text to the clipboard.',
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__CLIPBOARD,
-		},
 		chromatic: { disableSnapshot: true },
 	},
 	argTypes: {

diff --git a/packages/collapsible/src/Collapsible.tsx b/packages/collapsible/src/Collapsible.tsx
@@ -18,6 +18,11 @@ type CollapsibleProps = Omit<ComponentProps<'div'>, 'className'> & {
 	'data-test-id'?: string;
 };
 
+/**
+ * @deprecated use `Disclosure` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-navigation-disclosure--docs
+ */
 const Collapsible = (props: CollapsibleProps) => {
 	const {
 		children,

diff --git a/packages/collapsible/stories/Collapsible.stories.tsx b/packages/collapsible/stories/Collapsible.stories.tsx
@@ -4,13 +4,11 @@ import { Collapsible } from '../src';
 
 export default {
 	component: Collapsible,
-	title: 'Legacy/Sunset/Collapsible',
+	title: 'Legacy/Collapsible',
 	description:
 		'A progressive disclosure component that allows the user to to click a trigger to show more content',
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__COLLAPSIBLE,
-		},
+		chromatic: { disableSnapshot: true },
 	},
 };
 

diff --git a/packages/columns/src/Column.tsx b/packages/columns/src/Column.tsx
@@ -17,6 +17,11 @@ type ColumnProps = ComponentProps<'div'> & {
 	children: ReactNode;
 };
 
+/**
+ * @deprecated use `Box` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/legacy-experimental-box--docs
+ */
 const Column = ({ children, className, 'data-test-id': testId = 'column', size }: ColumnProps) => {
 	return (
 		<div

diff --git a/packages/columns/src/Columns.tsx b/packages/columns/src/Columns.tsx
@@ -12,6 +12,11 @@ type ColumnsProps = ComponentProps<'div'> & {
 	children?: ReactNode;
 };
 
+/**
+ * @deprecated use `Box` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/legacy-experimental-box--docs
+ */
 const Columns = ({
 	children,
 	className,

diff --git a/packages/columns/stories/Columns.stories.tsx b/packages/columns/stories/Columns.stories.tsx
@@ -5,12 +5,10 @@ import { Column, Columns } from '../src';
 
 export default {
 	component: Columns,
-	title: 'Legacy/Sunset/Columns',
+	title: 'Legacy/Columns',
 	description: 'Elements used to lay out content horizontally with consistent spacing.',
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__COLUMNS,
-		},
+		chromatic: { disableSnapshot: true },
 	},
 };
 

diff --git a/packages/components/stories/Alert.stories.tsx b/packages/components/stories/Alert.stories.tsx
@@ -5,11 +5,6 @@ import { Alert, Button, ButtonGroup, Heading, Text } from '../src';
 const meta: Meta<typeof Alert> = {
 	component: Alert,
 	title: 'Components/Status/Alert',
-	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__COMPONENTS,
-		},
-	},
 };
 
 export default meta;

diff --git a/packages/components/stories/Breadcrumbs.stories.tsx b/packages/components/stories/Breadcrumbs.stories.tsx
@@ -7,11 +7,6 @@ const meta: Meta<typeof Breadcrumbs> = {
 	component: Breadcrumbs,
 	subcomponents: { Breadcrumb } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Navigation/Breadcrumbs',
-	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__COMPONENTS,
-		},
-	},
 };
 
 export default meta;

diff --git a/packages/components/stories/Button.stories.tsx b/packages/components/stories/Button.stories.tsx
@@ -12,9 +12,6 @@ const meta: Meta<typeof Button> = {
 	component: Button,
 	title: 'Components/Buttons/Button',
 	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__COMPONENTS,
-		},
 		test: {
 			dangerouslyIgnoreUnhandledErrors: true,
 		},