chore: deprecate packages (#1527)

* chore: update story titles

* chore: deprecate packages

* chore: remove legacy code

Author: Niznikr

.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

.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}}>;

.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;

.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,

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: {

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,

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: {

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: {

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>,

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: {