add deprecation warnings to components

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

src/IconCell/IconCell.mdx

@@ -2,9 +2,7 @@ import { ArgTypes,  Canvas } from '@storybook/blocks';
 import IconCell from './IconCell';
 import * as ComponentStories from './IconCell.stories';
 
-# Icon Cell
-
-##
+# Icon Cell (Deprecated)
 
 <h4>
   An icon with a colored background used to draw more attention to surrounding elements.

src/IconCell/IconCell.stories.tsx

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

src/IconCell/IconCell.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { type IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { useDeprecationWarning } from 'src/utils';
+
 import './IconCell.scss';
 
 export type IconCellProps = {
@@ -12,6 +14,8 @@ export type IconCellProps = {
 function IconCell({
   icon,
 }: IconCellProps) {
+  useDeprecationWarning({ componentName: 'IconCell' });
+
   return (
     <div className="IconCell">
       <FontAwesomeIcon icon={icon} />

src/Main/Main.stories.tsx

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

src/utils/index.ts

@@ -0,0 +1 @@
+export * from './useDeprecationWarning';

src/utils/useDeprecationWarning.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+type useDeprecationWarningProps = {
+  componentName: string,
+  message?: string,
+}
+
+export function useDeprecationWarning({
+  componentName,
+  message = '',
+} : useDeprecationWarningProps) {
+  useEffect(() => {
+    const warningMessage = `Warning: ${componentName} is deprecated and will be removed in a future release.${
+      message ? ` ${message}` : ''}`;
+
+    if (process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
+      console.warn(warningMessage);
+    }
+  }, [componentName, message]);
+}