feat: add EmptyCard

packages/app/.storybook/main.ts

@@ -20,18 +20,21 @@ const config: StorybookConfig = {
     check: false,
     reactDocgen: 'react-docgen',
   },
-  webpack: (config) => {
-    let rules = config.module?.rules || [];
-    rules.push({
+  webpack: (config: any) => {
+    config.module.rules.push({
       test: /\.(graphql|gql)/,
       exclude: /node_modules/,
       loader: 'graphql-tag/loader',
     });
 
-    return {
-      ...config,
-      module: { ...config.module, rules },
-    };
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      resourceQuery: { not: /url/ }, // exclude if *.svg?url
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
   },
 };
 

packages/app/next.config.mjs

@@ -61,13 +61,39 @@ const config = {
       encoding: 'commonjs encoding',
       module: 'commonjs module',
     });
-
     config.module.rules.push({
       test: /\.(graphql|gql)/,
       exclude: /node_modules/,
       loader: 'graphql-tag/loader',
     });
 
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.('.svg'),
+    );
+    config.module.rules.push(
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: { not: /url/ }, // exclude if *.svg?url
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              exportType: 'named',
+            },
+          },
+        ],
+      },
+    );
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
     return config;
   },
 };

packages/app/package.json

@@ -54,6 +54,7 @@
     "@storybook/react": "^7.4.5",
     "@storybook/testing-library": "^0.2.1",
     "@storybook/types": "^7.4.5",
+    "@svgr/webpack": "8.1.0",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.3",
     "@types/node": "20.7.0",

packages/app/src/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+}

packages/app/src/systems/Core/components/EmptyCard/EmptyCard.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EmptyCard } from './EmptyCard';
+
+const meta: Meta<typeof EmptyCard> = {
+  title: 'Core/EmptyCard',
+  component: EmptyCard,
+};
+
+export default meta;
+type Story = StoryObj<typeof EmptyCard>;
+
+export const Usage: Story = {
+  render: () => (
+    <EmptyCard className="w-[800px]">
+      <EmptyCard.Title>Empty Card</EmptyCard.Title>
+      <EmptyCard.Description>
+        Use this card when there is no data to show.
+      </EmptyCard.Description>
+    </EmptyCard>
+  ),
+};
+
+export const JustTitle: Story = {
+  render: () => (
+    <EmptyCard className="w-[800px]">
+      <EmptyCard.Title>Empty Card</EmptyCard.Title>
+    </EmptyCard>
+  ),
+};
+
+export const JustDescription: Story = {
+  render: () => (
+    <EmptyCard className="w-[800px]">
+      <EmptyCard.Description>
+        Use this card when there is no data to show.
+      </EmptyCard.Description>
+    </EmptyCard>
+  ),
+};

packages/app/src/systems/Core/components/EmptyCard/EmptyCard.tsx

@@ -0,0 +1,65 @@
+import type { CardProps, HeadingProps, TextProps } from '@fuels/ui';
+import { Card, Heading, createComponent, Text, withNamespace } from '@fuels/ui';
+import { tv } from 'tailwind-variants';
+
+import { ReactComponent as EmptySvg } from './empty.svg';
+
+export type EmptyCardProps = CardProps;
+export type EmptyCardTitleProps = HeadingProps;
+export type EmptyCardDescriptionProps = TextProps;
+
+export const EmptyCardRoot = createComponent<EmptyCardProps, typeof Card>({
+  id: 'EmptyCard',
+  render: (_, { children, className, ...props }) => {
+    const classes = styles({ className });
+    return (
+      <Card {...props} className={classes.root({ className })}>
+        <EmptySvg
+          width={80}
+          height={80}
+          viewBox="0 0 682.66 682.66"
+          className={classes.image({
+            className: '[&_path]:stroke-[8] text-muted',
+          })}
+        />
+        {children}
+      </Card>
+    );
+  },
+});
+
+export const EmptyCardTitle = createComponent<
+  EmptyCardTitleProps,
+  typeof Card.Title
+>({
+  id: 'EmptyCardTitle',
+  render: (_, { className, ...props }) => {
+    const classes = styles({ className });
+    return <Heading {...props} as="h4" size="5" className={classes.title()} />;
+  },
+});
+
+export const EmptyCardDescription = createComponent<
+  EmptyCardDescriptionProps,
+  typeof Text
+>({
+  id: 'EmptyCardDescription',
+  render: (_, { className, ...props }) => {
+    const classes = styles({ className });
+    return <Text {...props} className={classes.description()} />;
+  },
+});
+
+export const EmptyCard = withNamespace(EmptyCardRoot, {
+  Title: EmptyCardTitle,
+  Description: EmptyCardDescription,
+});
+
+const styles = tv({
+  slots: {
+    root: 'p-6 text-center flex flex-col items-center gap-0',
+    image: 'mb-6',
+    title: 'font-semibold text-heading',
+    description: 'text-sm text-secondary mt-2',
+  },
+});