add deprecation warnings to components (#1288)

Author: jasonbasuil

.storybook/preview.js

@@ -35,6 +35,7 @@ const preview = {
     },
     options: {
       storySort: {
+        method: 'alphabetical',
         order: ['Foundations', 'Components'],
       },
     },

src/CardStack/CardStack.stories.tsx

@@ -7,7 +7,7 @@ import CardStack from './CardStack';
 import mdx from './CardStack.mdx';
 
 export default {
-  title: 'Layouts/CardStack',
+  title: 'Components/CardStack',
   component: CardStack,
   parameters: {
     docs: {

src/Container/Col.tsx

@@ -4,6 +4,8 @@ import {
   type ColProps as ReactBootstrapColProps,
 } from 'react-bootstrap';
 
+import { useDeprecationWarning } from 'src/utils';
+
 export type ColProps = {
   /**
    You can use a custom element for this component
@@ -66,6 +68,8 @@ export function Col({
   bsPrefix = 'col',
   ...props
 }: ColProps) {
+  useDeprecationWarning({ componentName: 'Col', message: 'Please use FlexContainer instead.' });
+
   return (
     <ReactBootstrapCol
       as={as}

src/Container/Container.mdx

@@ -1,8 +1,10 @@
-import { ArgTypes,  Canvas } from '@storybook/blocks';
+import { Canvas } from '@storybook/blocks';
 import Container from './Container';
 import * as ComponentStories from './Container.stories';
 
-# Container
+# Container (Deprecated)
+
+<b>⚠️ Deprecated: please use <code>FlexContainer</code> instead</b>
 
 <h4>
   A high level grid system to help create responsive application layouts. 
@@ -25,8 +27,6 @@ There are six default breakpoints, sometimes referred to as grid tiers, for buil
 
 <Canvas of={ComponentStories.Default} />
 
-<ArgTypes of={Container} />
-
 ## Stories
 
 ### Default

src/Container/Container.stories.tsx

@@ -5,7 +5,7 @@ import { Col, Container, Row } from '.';
 import mdx from './Container.mdx';
 
 export default {
-  title: 'Layouts/Container',
+  title: 'Deprecated/Container',
   component: Container,
   parameters: {
     docs: {

src/Container/Container.tsx

@@ -4,6 +4,8 @@ import {
   type ContainerProps as ReactBootstrapContainerProps,
 } from 'react-bootstrap';
 
+import { useDeprecationWarning } from 'src/utils';
+
 export type ContainerProps = {
   /**
    You can use a custom element for this component
@@ -30,6 +32,8 @@ export function Container({
   bsPrefix = 'container',
   ...props
 }: ContainerProps) {
+  useDeprecationWarning({ componentName: 'Container', message: 'Please use FlexContainer instead.' });
+
   return (
     <ReactBootstrapContainer
       as={as}

src/Container/Row.tsx

@@ -4,6 +4,8 @@ import {
   type RowProps as ReactBootstrapRowProps,
 } from 'react-bootstrap';
 
+import { useDeprecationWarning } from 'src/utils';
+
 export type RowProps = {
   /**
    You can use a custom element for this component
@@ -66,6 +68,8 @@ export function Row({
   bsPrefix = 'row',
   ...props
 }: RowProps) {
+  useDeprecationWarning({ componentName: 'Row', message: 'Please use FlexContainer instead.' });
+
   return (
     <ReactBootstrapRow
       as={as}

src/Flex/Flex.mdx

@@ -1,10 +1,10 @@
-import { ArgTypes,  Canvas } from '@storybook/blocks';
+import { Canvas } from '@storybook/blocks';
 import Flex from './Flex';
 import * as ComponentStories from './Flex.stories';
 
-# Flex
+# Flex (Deprecated)
 
-##
+<b>⚠️ Deprecated: please use <code>FlexContainer</code> instead</b>
 
 <h4>
   Flex is a utility component for creating consistent spacing between items. Use this for quick alignment and spacing in your layouts.
@@ -19,21 +19,3 @@ Flexbox CSS properties in the following documentation:
 </ul>
 
 <Canvas of={ComponentStories.Default} />
-
-## Props
-
-<ArgTypes of={Flex} />
-
-## Stories
-
-### Default
-
-<Canvas of={ComponentStories.Default} />
-
-### Flex Container
-
-<Canvas of={ComponentStories.FlexContainer} />
-
-### Flex Item
-
-<Canvas of={ComponentStories.FlexItem} />

src/Flex/Flex.stories.tsx

@@ -4,16 +4,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Card from '../Card';
 import Flex from './Flex';
 
+import mdx from './Flex.mdx';
+
 const meta: Meta<typeof Flex> = {
   component: Flex,
   parameters: {
     docs: {
-      description: {
-        component: 'Flex is a utility component for creating consistent spacing between items. Use this for quick alignment and spacing in your layouts.',
-      },
+      page: mdx,
     },
   },
-  title: 'Layouts/Flex',
+  title: 'Deprecated/Flex',
 };
 
 export default meta;

src/Flex/Flex.tsx

@@ -1,6 +1,8 @@
 import { ReactNode, ElementType, createElement } from 'react';
 import classNames from 'classnames';
 
+import { useDeprecationWarning } from 'src/utils';
+
 import styles from './Flex.module.scss';
 
 export interface FlexProps {
@@ -63,6 +65,8 @@ function Flex({
   width,
   ...props
 }: FlexProps) {
+  useDeprecationWarning({ componentName: 'Flex', message: 'Please use FlexContainer instead.' });
+
   // Defined flex properties as strings
   const flexClasses = [
     container ? styles[`flex-container`] : styles.container,