FuelLabs · pedronauck · Sep 28, 2023 · Sep 27, 2023 · Sep 27, 2023 · Sep 27, 2023
@@ -20,6 +20,22 @@ const config: StorybookConfig = {
     check: false,
     reactDocgen: 'react-docgen',
   },
+  webpack: (config: any) => {
+    config.module.rules.push({
+      test: /\.(graphql|gql)/,
+      exclude: /node_modules/,
+      loader: 'graphql-tag/loader',
+    });
+
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      resourceQuery: { not: /url/ }, // exclude if *.svg?url
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
 };
 
 export default config;
@@ -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;
   },
 };

@@ -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",
@@ -73,5 +74,10 @@
     "typescript": "5.2.2",
     "vite": "^4.4.9",
     "vite-tsconfig-paths": "^4.2.1"
+  },
+  "browser": {
+    "fs": false,
+    "path": false,
+    "module": false
   }
 }
@@ -4,27 +4,38 @@ import './globals.css';
 
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import { cookies } from 'next/headers';
 import { Provider } from '~/systems/Core/components/Provider';
+import { cx } from '~/systems/Core/utils/cx';
 
 const inter = Inter({
   subsets: ['latin'],
   variable: '--font-inter',
 });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Fuel Explorer',
+  description: 'Explorer of the Fastest execution layer',
 };
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const { value: theme } = cookies().get('fuel-theme') ?? { value: 'dark' };
   return (
-    <html suppressHydrationWarning className={`${inter.variable}`} lang="en">
+    <html
+      suppressHydrationWarning
+      lang="en"
+      className={cx(`${inter.variable}`, theme)}
+      style={{ 'color-scheme': theme } as React.CSSProperties}
+    >
+      <head>
+        <link rel="icon" href="/favicon.svg" />
+      </head>
       <body>
-        <Provider>{children}</Provider>
+        <Provider theme={theme}>{children}</Provider>
       </body>
     </html>
   );

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+}
@@ -0,0 +1,13 @@
+'use server';
+
+import { cookies } from 'next/headers';
+import { z } from 'zod';
+import { act } from '~/systems/Core/utils/act-server';
+
+const schema = z.object({
+  theme: z.string(),
+});
+
+export const setTheme = act(schema, async (input) => {
+  cookies().set('fuel-theme', input.theme, { path: '/' });
+});
@@ -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>
+  ),
+};
@@ -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',
+  },
+});