Create storybook welcome page

shared/aries-core/.storybook/main.mjs

@@ -16,7 +16,7 @@ function getAbsolutePath(value) {
 
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../src/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
     getAbsolutePath('@storybook/addon-links'),

shared/aries-core/.storybook/manager.js

@@ -1,5 +1,8 @@
 import { addons } from 'storybook/manager-api';
 
 addons.setConfig({
+  sidebar: {
+    collapsedRoots: ['components', 'patterns'],
+  },
   panelPosition: 'right',
 });

shared/aries-core/.storybook/preview.mjs

@@ -41,20 +41,9 @@ export default {
     options: {
       storySort: {
         order: [
+          'Welcome',
           'Components',
-          [
-            'Accordion',
-            'Anchor',
-            'Avatar',
-            'Box',
-            'Button',
-            'Card',
-            'CheckBox',
-            'CheckBoxGroup',
-            'Data',
-            'DateInput',
-            '*',
-          ],
+          'Patterns',
         ],
       },
     },

shared/aries-core/package.json

@@ -29,7 +29,6 @@
     "@storybook/addon-links": "^10.0.8",
     "@storybook/addon-onboarding": "^10.0.8",
     "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
-    "@storybook/react": "^10.0.8",
     "@storybook/react-webpack5": "^10.0.8",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",

shared/aries-core/src/Welcome.mdx

@@ -0,0 +1,49 @@
+import {
+  Box,
+  Heading,
+  Button,
+  Paragraph,
+  Anchor,
+  Grommet,
+  Text,
+} from 'grommet';
+import { hpe } from 'grommet-theme-hpe';
+import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
+
+<Meta title="Welcome" />
+
+<Unstyled>
+    <Grommet theme={hpe}>
+        <Box gap="medium" width="large">
+            <Heading level={1} margin={{ bottom: 'small' }}>Welcome to the HPE Design System Storybook</Heading>
+
+            <Paragraph size="large">
+                This Storybook showcases the components and patterns within the HPE Design System.
+                Explore interactive examples, view component variations, and learn how to implement
+                consistent, accessible user experiences.
+            </Paragraph>
+
+            <Box direction="row" gap="medium">
+                <Button
+                    as="a"
+                    label="Browse components"
+                    href="/?path=/story/components"
+                    primary
+                />
+                <Button
+                    as="a"
+                    label="Explore patterns"
+                    href="/?path=/story/patterns"
+                    secondary
+                />
+            </Box>
+
+            <Box margin={{ top: 'large' }} gap="small">
+                <Text>
+                    {`View more details and guidance on the `} <Anchor rel="noopener noreferrer" href="https://design-system.hpe.design" target="_blank">HPE Design System Website</Anchor>
+                </Text>
+            </Box>
+        </Box>
+    </Grommet>
+
+</Unstyled>

shared/aries-core/src/stories/components/Accordion.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Accordion, AccordionPanel, Box } from 'grommet';
-import { spacingSizes, alignArg, widthArg } from '../utils/commonArgs';
+import { spacingSizes, widthArg } from '../utils/commonArgs';
 
 // Fix for Storybook displaying <React.ForwardRef> instead of component name
 Accordion.displayName = 'Accordion';

shared/aries-core/src/stories/components/Anchor.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-webpack5';
 import { Anchor, AnchorType } from 'grommet';
 import {
   disabledArg,

shared/aries-core/src/stories/components/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Avatar } from 'grommet';
 import { a11yTitleArg, labelArg } from '../utils/commonArgs';
 

shared/aries-core/src/stories/components/Box.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-webpack5';
 import { Box, Text, BoxTypes } from 'grommet';
 import { boxArgs } from '../utils/commonArgs';
 

shared/aries-core/src/stories/components/Button.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Button } from 'grommet';
 import {
   a11yTitleArg,

shared/aries-core/src/stories/components/Card.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-webpack5';
 import {
   Card,
   CardBody,