feat: add EntityItem component

jest.config.ts

@@ -0,0 +1,3 @@
+export default {
+  projects: ['<rootDir>/packages/*'],
+};

package.json

@@ -21,7 +21,7 @@
   ],
   "scripts": {
     "build": "pnpm turbo:run build --filter=!custom-theme",
-    "build:preview": "pnpm --filter=app build:preview",
+    "build:preview": "pnpm turbo:run build:preview --filter=app",
     "build:storybook": "pnpm turbo:run build:storybook --filter=!custom-theme",
     "clean:indexer": "pnpm --filter=indexer clean",
     "deploy:indexer": "pnpm --filter=indexer run deploy",
@@ -58,6 +58,9 @@
     "lint-staged": "14.0.1"
   },
   "devDependencies": {
+    "@swc/core": "1.3.80",
+    "@swc/jest": "0.2.29",
+    "@types/jest": "29.5.4",
     "eslint": "^8.48.0",
     "husky": "^8.0.3",
     "npm-run-all": "^4.1.5",

packages/app/.eslintrc

@@ -1,4 +1,4 @@
 {
   "root": true,
-  "extends": ["plugin:@fuels/next"]
+  "extends": ["plugin:@fuels/typescript", "plugin:@fuels/next"]
 }

packages/app/.storybook/main.ts

@@ -1,11 +1,7 @@
-import tsconfigpath from 'vite-tsconfig-paths';
-import { mergeConfig } from 'vite';
-import type { StorybookConfig } from '@storybook/react-vite';
-import { viteStaticCopy } from 'vite-plugin-static-copy';
-import { join } from 'path';
+import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
-  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.tsx'],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.tsx'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -17,29 +13,9 @@ const config: StorybookConfig = {
   staticDirs: ['../public'],
   core: {},
   framework: {
-    name: '@storybook/react-vite',
+    name: '@storybook/nextjs',
     options: {},
   },
-  async viteFinal(config: any) {
-    console.log(config.base);
-    return mergeConfig(config, {
-      base: process.env.NODE_ENV === 'development' ? config.base : '/storybook',
-      plugins: [
-        tsconfigpath(),
-        viteStaticCopy({
-          targets: [
-            {
-              src: config.build.outDir,
-              dest: join(__dirname, '../public'),
-              rename: 'storybook',
-            },
-          ],
-        }),
-      ],
-      define: {
-        __STORYBOOK_FUEL_UI__: '"true"',
-      },
-    });
-  },
 };
+
 export default config;

packages/app/.storybook/preview.tsx

@@ -1,7 +1,12 @@
 import React, { useEffect } from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
 import { themes } from '@storybook/theming';
-import { darkTheme, lightTheme } from '@fuel-ui/react';
+import {
+  darkTheme,
+  lightTheme,
+  loadIcons,
+  setFuelThemes,
+} from '@fuel-ui/react';
 
 import { ThemeProvider, useFuelTheme } from '@fuel-ui/react';
 import theme from './theme';
@@ -38,6 +43,14 @@ export const parameters = {
   },
 };
 
+loadIcons('/icons/sprite.svg');
+setFuelThemes({
+  themes: {
+    dark: darkTheme,
+    light: lightTheme,
+  },
+});
+
 function ThemeWrapper(props: any) {
   const isDark = useDarkMode();
   const { setTheme } = useFuelTheme();

packages/app/jest.config.ts

@@ -0,0 +1,14 @@
+import type { Config } from '@fuels/jest/config';
+import { config as baseConfig } from '@fuels/jest/config';
+
+import pkg from './package.json';
+
+const config: Config = {
+  ...baseConfig,
+  rootDir: __dirname,
+  displayName: pkg.name,
+  roots: ['<rootDir>'],
+  setupFilesAfterEnv: [require.resolve('@fuels/jest/setup')],
+};
+
+export default config;

packages/app/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

packages/app/package.json

@@ -4,24 +4,23 @@
   "private": true,
   "scripts": {
     "build": "next build",
-    "build:storybook": "pnpm ts:check && storybook build",
+    "build:storybook": "./scripts/build-storybook.sh",
     "build:preview": "run-s build:storybook build",
     "dev": "next dev",
+    "dev:storybook": "storybook dev -p 6006",
     "lint": "next lint",
     "start": "next start",
-    "storybook": "storybook dev -p 6006",
     "test": "jest --verbose",
     "ts:check": "tsc --noEmit"
   },
   "dependencies": {
-    "@fuel-ui/css": "0.19.0",
-    "@fuel-ui/icons": "0.19.0",
-    "@fuel-ui/react": "0.19.0",
+    "@fuel-ui/css": "0.19.1",
+    "@fuel-ui/icons": "0.19.1",
+    "@fuel-ui/react": "0.19.1",
     "csstype": "3.1.2",
     "next": "13.4.19",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "vite-plugin-static-copy": "0.17.0",
     "zod": "3.22.2",
     "zod-validation-error": "1.5.0"
   },
@@ -37,8 +36,8 @@
     "@storybook/api": "^7.4.0",
     "@storybook/components": "^7.4.0",
     "@storybook/core-events": "^7.4.0",
+    "@storybook/nextjs": "7.4.0",
     "@storybook/react": "^7.4.0",
-    "@storybook/react-vite": "^7.4.0",
     "@storybook/testing-library": "^0.2.0",
     "@storybook/theming": "^7.4.0",
     "@storybook/types": "^7.4.0",

packages/app/scripts/build-storybook.sh

@@ -0,0 +1,4 @@
+pnpm ts:check
+pnpm storybook build -o storybook
+rm -rf ./public/storybook
+mv ./storybook ./public

packages/app/src/app/globals.css

@@ -3,9 +3,9 @@
 }
 
 * {
-  box-sizing: border-box;
   padding: 0;
   margin: 0;
+  box-sizing: border-box;
 }
 
 html,

packages/app/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import './globals.css';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
-import StylesRegistry from '~/systems/Core/components/StylesRegistry';
+import { StylesRegistry } from '~/systems/Core/components/StylesRegistry';
 
 const inter = Inter({
   subsets: ['latin'],

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

@@ -0,0 +1,59 @@
+import { Box, Icon, Tag } from '@fuel-ui/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Image from 'next/image';
+
+import { EntityItem } from './EntityItem';
+
+const meta: Meta<typeof EntityItem> = {
+  title: 'Core/EntityItem',
+  component: EntityItem,
+};
+
+export default meta;
+type Story = StoryObj<typeof EntityItem>;
+
+const DEFAULT_ARGS = {
+  id: '0x0000000000000000000000000000000000000000000000000000000000000000',
+  title: 'Ethereum',
+  icon: (
+    <Image width={30} height={30} alt="Ethereum Logo" src="/assets/eth.svg" />
+  ),
+};
+
+export const Default: Story = {
+  args: DEFAULT_ARGS,
+};
+
+export const Variations: Story = {
+  render: () => (
+    <Box.Stack gap="$4">
+      <EntityItem
+        icon={
+          <Tag intent="base" variant="ghost">
+            <Icon
+              icon="Code"
+              css={{
+                is: ['centered'],
+                bg: '$intentsBase4',
+                borderRadius: '$full',
+              }}
+            />
+          </Tag>
+        }
+        title="Contract"
+        id={DEFAULT_ARGS.id}
+      />
+      <EntityItem {...DEFAULT_ARGS} />
+    </Box.Stack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <Box.Stack gap="$4">
+      <EntityItem {...DEFAULT_ARGS} size="sm" />
+      <EntityItem {...DEFAULT_ARGS} size="md" />
+      <EntityItem {...DEFAULT_ARGS} size="lg" />
+    </Box.Stack>
+  ),
+};

packages/app/src/systems/Core/components/EntityItem/EntityItem.test.tsx

@@ -0,0 +1,34 @@
+import { testA11y, screen, render, click } from '@fuels/jest';
+import { composeStory } from '@storybook/react';
+
+import Meta, {
+  Default,
+  Variations as VariationsStory,
+} from './EntityItem.stories';
+
+const Variations = composeStory(VariationsStory, Meta);
+
+describe('Entityitem', () => {
+  it('a11y', async () => {
+    await testA11y(<Variations />);
+  });
+
+  it('should render two items', () => {
+    render(<Variations />);
+    expect(
+      screen.getByRole('heading', { name: 'Ethereum' }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: 'Contract' }),
+    ).toBeInTheDocument();
+  });
+
+  it('should copy address', async () => {
+    render(<Variations />);
+    const btn = screen.getAllByLabelText('Copy to clipboard')[0];
+    expect(btn).toBeInTheDocument();
+
+    await click(btn);
+    expect(await navigator.clipboard.readText()).toBe(Default.args?.id);
+  });
+});

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

@@ -0,0 +1,83 @@
+import { css, cssObj } from '@fuel-ui/css';
+import { Box, Copyable, Heading } from '@fuel-ui/react';
+import type { ReactNode } from 'react';
+
+import { shortAddress } from '../../utils/address';
+
+type EntityItemProps = {
+  icon: ReactNode;
+  title: ReactNode;
+  id: string;
+  size?: 'sm' | 'md' | 'lg';
+};
+
+export function EntityItem({ icon, title, id, size = 'md' }: EntityItemProps) {
+  return (
+    <Box className={styles.root({ size })}>
+      <Box className="icon">{icon}</Box>
+      <Box>
+        <Heading as="h6">{title}</Heading>
+        <Copyable value={id} css={styles.assetId}>
+          {shortAddress(id)}
+        </Copyable>
+      </Box>
+    </Box>
+  );
+}
+
+const styles = {
+  root: css({
+    display: 'flex',
+    gap: '$3',
+
+    h6: {
+      margin: 0,
+      lineHeight: '1',
+    },
+
+    '.icon > *': {
+      width: '$full',
+      height: '$full',
+    },
+
+    '.fuel_Tag': {
+      px: '$0',
+    },
+
+    variants: {
+      size: {
+        sm: {
+          '.icon': {
+            height: '$6',
+            width: '$6',
+          },
+          '.fuel_Copyable': {
+            fontSize: '$xs',
+            width: '$5',
+            height: '$5',
+          },
+          h6: {
+            fontSize: '$sm',
+            lineHeight: '0.8',
+          },
+        },
+        md: {
+          '.icon': {
+            height: '$8',
+            width: '$8',
+          },
+        },
+        lg: {
+          '.icon': {
+            height: '$9',
+            width: '$9',
+          },
+        },
+      },
+    },
+  }),
+  assetId: cssObj({
+    fontSize: '$sm',
+    lineHeight: '$tighter',
+  }),
+};

packages/app/src/systems/Core/components/EntityItem/index.tsx

@@ -0,0 +1 @@
+export { EntityItem } from './EntityItem';

packages/app/src/systems/Core/components/Provider.tsx → packages/app/src/systems/Core/components/Provider/Provider.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+/** TODO: add ToastProvider from fuel-ui here */
 export function Provider({ children }: { children: React.ReactNode }) {
   return <>{children}</>;
 }

packages/app/src/systems/Core/components/Provider/index.tsx

@@ -0,0 +1 @@
+export { Provider } from './Provider';