Storybook

apps/staking/.storybook/main.ts

@@ -0,0 +1,5 @@
+import { createStorybookConfigFromDefault } from '@session/storybook/lib/utils';
+
+const config = createStorybookConfigFromDefault();
+
+export default config;

apps/staking/.storybook/preview.tsx

@@ -0,0 +1,102 @@
+import {
+  createStorybookDecoratorsFromDefault,
+  createStorybookPreviewFromDefault,
+} from '@session/storybook/lib/utils';
+import '@session/ui/styles';
+import { NextIntlClientProvider } from 'next-intl';
+
+const messages = {
+  navigation: {
+    home: 'Home',
+    stake: 'Stake Now',
+    myStakes: 'My Stakes',
+    docs: 'Docs',
+    support: 'Support',
+  },
+  wallet: {
+    connect: 'Connect Wallet',
+    connecting: 'Connecting Wallet...',
+    reconnecting: 'Reconnecting Wallet...',
+    disconnect: 'Disconnect Wallet',
+    balance: 'Balance',
+    address: 'Address',
+  },
+  notFound: {
+    description: "Sorry! We couldn't find the page you were looking for.",
+    homeButton: 'Return Home',
+  },
+  home: {
+    title: 'Stake <bold>{token}</bold> Earn Rewards',
+    buttons: {
+      primary: 'STAKE NOW',
+      secondary: 'HOW TO RUN A SESSION NODE',
+    },
+  },
+  myStakes: {
+    title: 'My Stakes',
+  },
+  modules: {
+    buttons: {
+      refetch: 'Refetch',
+    },
+    balance: {
+      title: 'Total $SENT:',
+      description: 'Total $SENT in your wallet.',
+      error: 'Failed to fetch balance.',
+      refetching: 'Refetching balance...',
+      refetchSuccess: 'Successfully refetched balance',
+    },
+    dailyRewards: {
+      title: 'Daily Node Rewards:',
+      description: 'Current daily rewards per node.',
+      error: 'Failed to fetch daily rewards.',
+      refetching: 'Refetching daily rewards...',
+      refetchSuccess: 'Successfully refetched daily rewards',
+    },
+    totalRewards: {
+      title: 'Total Rewards Earned:',
+      description: 'Total rewards earned from staking.',
+      error: 'Failed to fetch total rewards.',
+      refetching: 'Refetching total rewards...',
+      refetchSuccess: 'Successfully refetched total rewards',
+    },
+    unclaimedTokens: {
+      title: 'Unclaimed Tokens:',
+      description: 'Total rewards that have not been claimed.',
+      error: 'Failed to fetch unclaimed tokens.',
+      refetching: 'Refetching unclaimed tokens...',
+      refetchSuccess: 'Successfully refetched unclaimed tokens',
+    },
+    claim: {
+      title: 'Claim',
+      description: 'Claim your rewards from staking.',
+      error: 'Failed to claim rewards.',
+    },
+    price: {
+      title: 'Price:',
+      description: 'Current price of $SENT.',
+    },
+  },
+  nodeCard: {
+    pubKey: {
+      copyPubkeyToClipboard: 'Copy to Clipboard',
+      copyPubkeyToClipboardSuccessToast: 'Copied Session Node Pubkey to clipboard!',
+    },
+  },
+};
+
+export const decorators = createStorybookDecoratorsFromDefault();
+
+const preview = createStorybookPreviewFromDefault({
+  decorators: [
+    (Story) => {
+      return (
+        <NextIntlClientProvider messages={messages} locale={'en'}>
+          <Story />
+        </NextIntlClientProvider>
+      );
+    },
+  ],
+});
+
+export default preview;

apps/staking/components/StakedNodeCard.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@session/storybook/lib/react';
+
+import { NODE_STATE } from '@session/sent-staking-js';
+import { NODE_STATE_VALUES, StakedNodeCard } from './StakedNodeCard';
+
+const meta = {
+  title: 'Staking/Staked Node Card',
+  component: StakedNodeCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    node: {
+      pubKey: {
+        control: {
+          type: 'text',
+        },
+      },
+      state: {
+        options: NODE_STATE_VALUES,
+        control: {
+          type: 'radio',
+        },
+      },
+      contributors: {
+        control: {
+          type: 'object',
+        },
+      },
+      lastRewardHeight: {
+        control: {
+          type: 'number',
+        },
+      },
+      lastUptime: {
+        control: {
+          type: 'date',
+        },
+      },
+      balance: {
+        control: {
+          type: 'number',
+        },
+      },
+      operatorFee: {
+        control: {
+          type: 'number',
+        },
+      },
+      operator_address: {
+        control: {
+          type: 'text',
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof StakedNodeCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    node: {
+      state: NODE_STATE.RUNNING,
+      contributors: [
+        {
+          address: '0x1234567891',
+          amount: 100,
+        },
+        {
+          address: '0x1234567892',
+          amount: 500,
+        },
+        {
+          address: '0x1234567893',
+          amount: 1000,
+        },
+      ],
+      lastRewardHeight: 1000,
+      lastUptime: new Date(),
+      pubKey: '0x1234567890',
+      balance: 1000,
+      operatorFee: 10,
+      operator_address: '0x1234567890',
+    },
+  },
+};

apps/storybook/.eslintrc.js

@@ -0,0 +1,10 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@session/eslint-config/library.js'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};

apps/storybook/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+*storybook.log

apps/storybook/.storybook/main.ts

@@ -0,0 +1,20 @@
+import { createStorybookConfigFromDefault } from '../lib/utils';
+
+const config = createStorybookConfigFromDefault({
+  refs: {
+    ui: {
+      title: 'UI',
+      url: process.env.NODE_ENV === 'development' ? 'http://192.168.1.166:6011/' : 'ui/',
+    },
+    staking: {
+      title: 'Staking',
+      url: process.env.NODE_ENV === 'development' ? 'http://192.168.1.166:6012/' : 'staking/',
+    },
+    wallet: {
+      title: 'Wallet',
+      url: process.env.NODE_ENV === 'development' ? 'http://192.168.1.166:6013/' : 'wallet/',
+    },
+  },
+});
+
+export default config;

apps/storybook/.storybook/preview.ts

@@ -0,0 +1,9 @@
+import {
+  createStorybookDecoratorsFromDefault,
+  createStorybookPreviewFromDefault,
+} from '../lib/utils';
+
+export const decorators = createStorybookDecoratorsFromDefault();
+const preview = createStorybookPreviewFromDefault();
+
+export default preview;

apps/storybook/README.mdx

@@ -0,0 +1 @@
+Hi

apps/storybook/lib/addon-themes.ts

@@ -0,0 +1 @@
+export * from '@storybook/addon-themes';

apps/storybook/lib/nextjs.ts

@@ -0,0 +1 @@
+export * from '@storybook/nextjs';

apps/storybook/lib/react.ts

@@ -0,0 +1 @@
+export * from '@storybook/react';

apps/storybook/lib/utils.ts

@@ -0,0 +1,81 @@
+import { withThemeByClassName } from '@storybook/addon-themes';
+import type { StorybookConfig } from '@storybook/nextjs';
+import type { Preview } from '@storybook/react';
+import { dirname, join } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const defaultStorybookConfig = () => {
+  return {
+    stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+      getAbsolutePath('@storybook/addon-onboarding'),
+      getAbsolutePath('@storybook/addon-links'),
+      getAbsolutePath('@storybook/addon-essentials'),
+      getAbsolutePath('@chromatic-com/storybook'),
+      getAbsolutePath('@storybook/addon-interactions'),
+    ],
+    framework: {
+      name: getAbsolutePath('@storybook/nextjs'),
+      options: {},
+    },
+  };
+};
+
+export const createStorybookConfigFromDefault = (
+  config?: Omit<StorybookConfig, 'framework' | 'addons' | 'stories'>
+): StorybookConfig => {
+  return {
+    ...defaultStorybookConfig(),
+    ...config,
+  };
+};
+
+const defaultStorybookPreview = () => {
+  return {
+    parameters: {
+      backgrounds: {
+        default: 'dark',
+        values: [
+          {
+            name: 'dark',
+            value: '#000000',
+          },
+        ],
+      },
+      controls: {
+        matchers: {
+          color: /(background|color)$/i,
+          date: /Date$/i,
+        },
+      },
+    },
+  };
+};
+
+export const createStorybookPreviewFromDefault = (preview?: Preview): Preview => {
+  return {
+    ...defaultStorybookPreview(),
+    ...preview,
+  };
+};
+
+export const defaultStorybookDecorators = (): Array<any> => [
+  withThemeByClassName({
+    themes: {
+      light: 'light',
+      dark: 'dark',
+    },
+    defaultTheme: 'dark',
+  }),
+];
+
+export const createStorybookDecoratorsFromDefault = (decorators?: Array<any>): Array<any> => {
+  return [...defaultStorybookDecorators(), ...(decorators ?? [])];
+};

apps/storybook/next.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ['@session/ui'],
+};
+
+export default nextConfig;