Consolidate ResourceCards and implement Storybook POC

apps/ecommerce/frontend/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    'storybook-addon-designs',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+};
+export default config;

apps/ecommerce/frontend/.storybook/mocks/common.ts

@@ -0,0 +1,53 @@
+import { ExternalResource, ExternalResourceLink } from '../../src/types';
+
+const externalResource: ExternalResource = {
+  title: 'Cheetos',
+  description: 'yummy styrofoam snack',
+  status: 'published',
+  id: '1234',
+  image:
+    'https://images.ctfassets.net/juh8bvgveao4/QoAO8rqn86a4jiH1yudiN/e518fd9263b67705c3ffb041bd217bda/imageService.webp',
+};
+
+const externalResources: ExternalResource[] = [
+  {
+    title: 'Charmin',
+    description: 'tissue paper',
+    status: 'published',
+    id: '2345',
+  },
+  {
+    title: 'Shout',
+    description: 'cleaner',
+    status: 'published',
+    id: '3456',
+  },
+  externalResource,
+];
+
+const externalResourceLink: ExternalResourceLink = {
+  sys: {
+    type: 'ResourceLink',
+    linkType: 'Shopify:Product',
+    urn: 'gid://shopify/Product/8191006998814',
+  },
+};
+
+const externalResourceLinks: ExternalResourceLink[] = [
+  {
+    sys: {
+      type: 'ResourceLink',
+      linkType: 'Shopify:Product',
+      urn: 'gid://shopify/Product/8191006998814',
+    },
+  },
+  {
+    sys: {
+      type: 'ResourceLink',
+      linkType: 'Shopify:Product',
+      urn: 'gid://shopify/Product/123498742354',
+    },
+  },
+];
+
+export { externalResource, externalResources, externalResourceLink, externalResourceLinks };

apps/ecommerce/frontend/.storybook/preview.ts

@@ -0,0 +1,32 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    backgrounds: {
+      default: 'white',
+      values: [
+        {
+          name: 'white',
+          value: '#FFFFFF',
+        },
+        {
+          name: 'dark',
+          value: '#333333',
+        },
+        {
+          name: 'lightblue',
+          value: '#F4FBFF',
+        },
+      ],
+    },
+  },
+};
+
+export default preview;