feat: create Tailwind-based UI package (#1891)

apps/minifront/src/components/staking/account/use-staking-tokens-and-filter.ts

@@ -63,15 +63,15 @@ export const useStakingTokensAndFilter = (
     shouldReselect: (before, after) => before?.data !== after.data,
   });
 
-  const stakingTokensByAccount = useMemo(() => {
+  const stakingTokensByAccount = useMemo<Map<number, ValueView | undefined>>(() => {
     if (!stakingTokenMetadata || !balancesByAccount) {
       return new Map<number, ValueView | undefined>();
     }
 
     return balancesByAccount.reduce(
       (acc: Map<number, ValueView | undefined>, cur: BalancesByAccount) =>
         toStakingTokensByAccount(acc, cur, stakingTokenMetadata),
-      new Map(),
+      new Map<number, ValueView | undefined>(),
     );
   }, [stakingTokenMetadata, balancesByAccount]);
 

apps/minifront/tsconfig.json

@@ -4,7 +4,8 @@
     "exactOptionalPropertyTypes": false,
     "lib": ["ESNext", "DOM", "DOM.Iterable", "DOM.AsyncIterable"],
     "noEmit": true,
-    "target": "ESNext"
+    "target": "ESNext",
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
   },
   "extends": ["@tsconfig/strictest/tsconfig.json", "@tsconfig/vite-react/tsconfig.json"],
   "include": ["src", "tests-setup.ts", "__mocks__", "vite.config.ts", "vitest.config.ts"]

package.json

@@ -45,7 +45,7 @@
     "@eslint/js": "^9.6.0",
     "@microsoft/api-extractor": "^7.47.0",
     "@repo/tailwind-config": "workspace:*",
-    "@storybook/react-vite": "8.1.1",
+    "@storybook/react-vite": "^8.4.2",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@tsconfig/strictest": "^2.0.5",
@@ -55,7 +55,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "@vitest/browser": "^1.6.0",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.6.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",

packages/ui-tailwind/.storybook/main.ts

@@ -0,0 +1,35 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname } 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 config: StorybookConfig = {
+  stories: [
+    {
+      directory: '../src',
+      files: '**/@(*.stories.@(js|jsx|mjs|ts|tsx)|*.mdx)',
+      titlePrefix: 'UI library',
+    },
+  ],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/preview-api'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+export default config;

packages/ui-tailwind/.storybook/penumbra-theme.ts

@@ -0,0 +1,20 @@
+import { create } from '@storybook/theming/create';
+import logo from './public/logo.svg';
+
+const penumbraTheme = create({
+  appBg: 'black',
+  appContentBg: 'black',
+  appPreviewBg: 'black',
+  barBg: 'black',
+  base: 'dark',
+  brandImage: logo,
+  brandTitle: 'Penumbra UI library',
+  colorPrimary: '#8d5728',
+  colorSecondary: '#629994',
+  fontBase: 'Poppins',
+  fontCode: '"Iosevka Term",monospace',
+  textColor: 'white',
+  textMutedColor: '#e3e3e3',
+});
+
+export default penumbraTheme;

packages/ui-tailwind/.storybook/preview.tsx

@@ -0,0 +1,63 @@
+import type { Preview } from '@storybook/react';
+import penumbraTheme from './penumbra-theme';
+import { useState } from 'react';
+import { ConditionalWrap } from '../src/ConditionalWrap';
+import { Density } from '../src/Density';
+import { Tabs } from '../src/Tabs';
+
+import './tailwind.css';
+import '../src/theme/fonts.css';
+import '../src/theme/globals.css';
+
+/**
+ * Utility component to let users control the density, for components whose
+ * stories include the `density` tag.
+ */
+const DensityWrapper = ({ children, showDensityControl }) => {
+  const [density, setDensity] = useState('sparse');
+
+  return (
+    <ConditionalWrap
+      if={density === 'sparse'}
+      then={children => <Density sparse>{children}</Density>}
+      else={children => <Density compact>{children}</Density>}
+    >
+      <div className='flex flex-col gap-4'>
+        {showDensityControl && (
+          <Density sparse>
+            <Tabs
+              options={[
+                { label: 'Sparse', value: 'sparse' },
+                { label: 'Compact', value: 'compact' },
+              ]}
+              value={density}
+              onChange={setDensity}
+            />
+          </Density>
+        )}
+
+        {children}
+      </div>
+    </ConditionalWrap>
+  );
+};
+
+const preview: Preview = {
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      theme: penumbraTheme,
+    },
+  },
+  decorators: [
+    (Story, { title, tags }) => {
+      return (
+        <DensityWrapper showDensityControl={tags.includes('density')}>
+          <Story />
+        </DensityWrapper>
+      );
+    },
+  ],
+};
+
+export default preview;

packages/ui-tailwind/.storybook/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/ui-tailwind/.storybook/typings.d.ts

@@ -0,0 +1,14 @@
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}

packages/ui-tailwind/eslint.config.js

@@ -0,0 +1,20 @@
+// eslint-disable-next-line -- ignore
+import config from '../../eslint.config.js';
+import tailwindcss from 'eslint-plugin-tailwindcss';
+import { resolve } from 'node:path';
+
+config.push({
+  name: 'custom:tailwindcss-config',
+  plugins: { tailwindcss },
+  settings: {
+    tailwindcss: {
+      config: resolve('tailwind.config.ts'),
+    },
+  },
+  rules: {
+    ...tailwindcss.configs.recommended.rules,
+    'tailwindcss/no-custom-classname': ['error', { callees: ['cn', 'cva', 'clsx'] }],
+  },
+});
+
+export default config;

packages/ui-tailwind/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@penumbra-zone/ui-tailwind",
+  "version": "0.1.0",
+  "license": "(MIT OR Apache-2.0)",
+  "description": "UI components for Penumbra",
+  "type": "module",
+  "engine": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build-storybook": "storybook build",
+    "dev:pack": "VITE_WATCH=true vite build --watch",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "lint:strict": "tsc --noEmit && eslint src --max-warnings 0",
+    "storybook": "storybook dev -p 6006"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./*": "./src/*/index.tsx"
+  },
+  "publishConfig": {
+    "exports": {
+      "./style.css": {
+        "default": "./dist/style.css"
+      },
+      "./*": {
+        "types": "./dist/src/*/index.d.ts",
+        "default": "./dist/src/*/index.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@penumbra-zone/bech32m": "workspace:*",
+    "@penumbra-zone/getters": "workspace:*",
+    "@penumbra-zone/protobuf": "workspace:*",
+    "@penumbra-zone/types": "workspace:*",
+    "@radix-ui/react-dialog": "1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.378.0",
+    "murmurhash3js": "^3.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sonner": "1.4.3",
+    "tinycolor2": "^1.6.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/manager-api": "^8.1.11",
+    "@storybook/preview-api": "^8.1.1",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/test": "^8.4.2",
+    "@storybook/theming": "^8.1.11",
+    "@types/murmurhash3js": "^3.0.7",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@types/tinycolor2": "^1.4.6",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.38",
+    "storybook": "^8.4.2",
+    "tailwindcss": "^3.4.3",
+    "typescript": "5.5.3",
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^4.0.3"
+  }
+}

packages/ui-tailwind/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/ui-tailwind/src/AddressView/AddressIcon.tsx

@@ -0,0 +1,15 @@
+import { Address } from '@penumbra-zone/protobuf/penumbra/core/keys/v1/keys_pb';
+import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
+import { Identicon } from '../Identicon';
+
+export interface AddressIconProps {
+  address: Address;
+  size: number;
+}
+
+/**
+ * A simple component to display a consistently styled icon for a given address.
+ */
+export const AddressIcon = ({ address, size }: AddressIconProps) => (
+  <Identicon uniqueIdentifier={bech32mAddress(address)} size={size} type='gradient' />
+);

packages/ui-tailwind/src/AddressView/index.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AddressViewComponent } from '.';
+import { ADDRESS_VIEW_DECODED, ADDRESS_VIEW_OPAQUE } from '../utils/bufs';
+
+const meta: Meta<typeof AddressViewComponent> = {
+  component: AddressViewComponent,
+  tags: ['autodocs', '!dev'],
+  argTypes: {
+    addressView: {
+      options: ['Sample decoded address view', 'Sample opaque address view'],
+      mapping: {
+        'Sample decoded address view': ADDRESS_VIEW_DECODED,
+        'Sample opaque address view': ADDRESS_VIEW_OPAQUE,
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <div className='w-full overflow-hidden'>
+        <Story />
+      </div>
+    ),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof AddressViewComponent>;
+
+export const Basic: Story = {
+  args: {
+    addressView: ADDRESS_VIEW_DECODED,
+    copyable: true,
+  },
+};