refactor(ui): ui package bundling, closes leather-io/issues#351

.github/actions/provision/action.yml

@@ -6,7 +6,7 @@ runs:
     - name: Install pnpm
       uses: pnpm/action-setup@v4
       with:
-        version: '9.6.0'
+        version: '9.11.0'
 
     - name: Set up node
       uses: actions/setup-node@v3

packages/ui/README.md

@@ -2,21 +2,30 @@
 
 This package contains Leather Wallet's UI library for our web + React Native applications.
 
+## Architecture
+
+This package colocates Web and React Native code, such that commonalities such as shared logic and types are shared. **The naming convention must be followed.**
+
+- `*.web.ts` — bundled only for Web
+- `*.native.ts` — bundled only for React Native
+- `*.shared.ts` — bundled for all platforms
+
 ## Web Setup
 
 Our web apps use [panda css](https://panda-css.com/). To setup in your application you need to:
 
-- install panda-css
-- setup panda css and configure it to acknowledge the library code
-- configure webpack to load the files correctly
+- Install `@pandacss/dev`
+- Setup panda css and configure it to acknowledge the library code
+- Configure Webpack to load the files correctly
+- Import the library styles from `@leather.io/ui/styles`
 
 ### Panda configuration
 
 Specify the library as part of the `panda.config` `include`:
 
 ```js
   include: [
-    './node_modules/@leather.io/ui/dist-web/src/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@leather.io/ui/dist-web/**/*.{js,jsx,ts,tsx}',
     './src/**/*.{js,jsx,ts,tsx}',
   ],
 ```

packages/ui/package.json

@@ -8,7 +8,7 @@
     "build-storybook:web": "storybook build -c ./src/.storybook-web",
     "build:native": "tsup --config tsup.config.native.ts",
     "build:watch": "concurrently  \"pnpm panda:watch\"  \"pnpm build:native --watch --preserveWatchOutput\"  \"pnpm build:web --watch\" ",
-    "build:web": "tsup --config tsup.config.web.ts",
+    "build:web": "panda && tsup --config tsup.config.web.ts",
     "format": "prettier . --write \"src/**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
     "format:check": "prettier . --check \"src/**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
     "lint": "eslint . --ignore-path ../../.eslintignore",
@@ -20,7 +20,8 @@
     "typecheck": "tsc --noEmit --project ./tsconfig.json"
   },
   "exports": {
-    ".": "./dist-web/web.js",
+    ".": "./dist-web/exports.web.js",
+    "./styles": "./dist-web/styles.css",
     "./native": "./dist-native/native.js"
   },
   "dependencies": {

packages/ui/panda.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
 
   exclude: [],
 
-  prefix: 'ui',
+  prefix: 'leather',
 
   presets: ['@leather.io/panda-preset'],
 

packages/ui/src/components/address-displayer/address-displayer.web.tsx

@@ -3,7 +3,7 @@ import type { HTMLStyledProps } from 'leather-styles/types';
 import { isEven } from '@leather.io/utils';
 
 import { AddressDisplayerLayout } from './address-displayer.layout.web';
-import { groupByFour } from './address-displayer.utils';
+import { groupByFour } from './address-displayer.utils.shared';
 
 interface AddressDisplayerProps extends HTMLStyledProps<'span'> {
   address: string;

packages/ui/src/components/animate-height/animate-height.web.tsx

@@ -2,7 +2,7 @@ import { useRef, useState } from 'react';
 
 import { motion } from 'framer-motion';
 
-import { HasChildren } from '../../utils/has-children';
+import { HasChildren } from '../../utils/has-children.shared';
 import { useElementHeightListener } from '../../utils/use-element-height-listener.web';
 
 // https://github.com/framer/motion/discussions/1884#discussioncomment-5861808

packages/ui/src/components/approver/animations/approver-animation.web.tsx

@@ -1,8 +1,8 @@
 import { motion, stagger, useAnimate } from 'framer-motion';
 import { css } from 'leather-styles/css';
 
-import { HasChildren } from '../../../utils/has-children';
-import { useOnMount } from '../../../utils/use-on-mount';
+import { HasChildren } from '../../../utils/has-children.shared';
+import { useOnMount } from '../../../utils/use-on-mount.shared';
 
 const animationSelector = '& > *:not(.skip-animation)';
 

packages/ui/src/components/approver/approver-context.shared.ts

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
 
-import { useOnMount } from '../../utils/use-on-mount';
-import { ChildRegister, useRegisterChildren } from '../../utils/use-register-children';
+import { useOnMount } from '../../utils/use-on-mount.shared';
+import { ChildRegister, useRegisterChildren } from '../../utils/use-register-children.shared';
 
 type ApproverChildren = 'header' | 'actions' | 'advanced' | 'section' | 'subheader';
 

packages/ui/src/components/approver/components/approver-actions.web.tsx

@@ -1,7 +1,7 @@
 import { css } from 'leather-styles/css';
 import { Flex, styled } from 'leather-styles/jsx';
 
-import type { HasChildren } from '../../../utils/has-children';
+import type { HasChildren } from '../../../utils/has-children.shared';
 import {
   ApproverActionAnimation,
   ApproverActionsAnimationContainer,

packages/ui/src/components/approver/components/approver-advanced.web.tsx

@@ -9,7 +9,7 @@ import { AnimateChangeInHeight } from '../../../components/animate-height/animat
 import { Button } from '../../../components/button/button.web';
 import { Flag } from '../../../components/flag/flag.web';
 import { ChevronDownIcon } from '../../../icons/chevron-down-icon.web';
-import { HasChildren } from '../../../utils/has-children';
+import { HasChildren } from '../../../utils/has-children.shared';
 import { getScrollParent } from '../../../utils/utils.web';
 import { useApproverContext, useRegisterApproverChild } from '../approver-context.shared';
 

packages/ui/src/components/approver/components/approver-section.web.tsx

@@ -1,6 +1,6 @@
 import { styled } from 'leather-styles/jsx';
 
-import { HasChildren } from '../../../utils/has-children';
+import { HasChildren } from '../../../utils/has-children.shared';
 import { useRegisterApproverChild } from '../approver-context.shared';
 
 export function ApproverSection(props: HasChildren) {

packages/ui/src/components/approver/stories/approver-demo.web.tsx

@@ -1,7 +1,7 @@
 import { TooltipProvider } from '@radix-ui/react-tooltip';
 import { Box, Circle, styled } from 'leather-styles/jsx';
-import { InfoCircleIcon } from 'src/icons/index.web';
 
+import { InfoCircleIcon } from '../../../icons/index.web';
 import { Button } from '../../button/button.web';
 import { Callout } from '../../callout/callout.web';
 import { Flag } from '../../flag/flag.web';

packages/ui/src/components/input/input.web.tsx

@@ -16,7 +16,7 @@ import { SystemStyleObject } from 'leather-styles/types';
 import { propIfDefined } from '@leather.io/utils';
 
 import { createStyleContext } from '../../utils/style-context.web';
-import { useOnMount } from '../../utils/use-on-mount';
+import { useOnMount } from '../../utils/use-on-mount.shared';
 
 const hackyDelayOneMs = 1;
 

packages/ui/src/components/toast/toast.layout.web.tsx

@@ -1,6 +1,6 @@
 import { Box, HStack, styled } from 'leather-styles/jsx';
 
-import { getIconVariant } from './toast.utils';
+import { getIconVariant } from './toast.utils.shared';
 import { type ToastProps } from './toast.web';
 
 export function ToastLayout({ message, variant }: ToastProps) {

packages/ui/src/exports.web.ts

@@ -0,0 +1,32 @@
+export { Accordion } from './components/accordion/accordion.web';
+export { AddressDisplayer } from './components/address-displayer/address-displayer.web';
+export * from './components/avatar';
+export { BulletSeparator } from './components/bullet-separator/bullet-separator.web';
+export { Button, type ButtonProps } from './components/button/button.web';
+export { Callout } from './components/callout/callout.web';
+export * from './components/sheet';
+export { DropdownMenu } from './components/dropdown-menu/dropdown-menu.web';
+export { Flag, type FlagProps } from './components/flag/flag.web';
+export { IconButton } from './components/icon-button/icon-button.web';
+export { Input } from './components/input/input.web';
+export { ItemLayout } from './components/item-layout/item-layout.web';
+export { ItemLayoutWithButtons } from './components/item-layout/item-layout-with-buttons.web';
+export { Link } from './components/link/link.web';
+export { NetworkModeBadge } from './components/network-mode-badge/network-mode-badge.web';
+export * from './components/pressable/pressable.web';
+export * from './components/select';
+export { Tabs } from './components/tabs/tabs.web';
+export * from './components/toast';
+export * from './components/tooltip';
+export { Tag, type TagProps, type TagVariants } from './components/tag/tag.web';
+export * from './components/typography/index.web';
+export { DynamicColorCircle } from './components/dynamic-color-circle.web';
+export { Hr, DashedHr, type HrProps } from './components/hr.web';
+export { Logo } from './components/logo.web';
+export { Spinner } from './components/spinner.web';
+export { shimmerStyles } from './components/skeleton-loader/shimmer.styles.web';
+export { SkeletonLoader } from './components/skeleton-loader/skeleton-loader.web';
+export { Icon } from './icons/icon/icon.web';
+export * from './icons/index.web';
+export * from './components/approver/approver.web';
+export * from './components/favicon/favicon.web';

packages/ui/tsconfig.web.json

@@ -3,17 +3,16 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "lib": ["ESNext", "DOM"],
-    "baseUrl": ".",
-    "rootDir": ".",
+    "baseUrl": "./src",
     "outDir": "./dist-web",
     "paths": {
-      "leather-styles/*": ["leather-styles/*"]
+      "leather-styles/*": ["../leather-styles/*"]
     }
   },
   "include": [
-    "**/*.web.{ts,tsx}",
-    "**/*.web.{ts,tsx}",
-    "web.ts",
+    "**/*.web.ts",
+    "**/*.web.tsx",
+    "web.exports.ts",
     "**/*.shared.tsx",
     "global.d.ts",
     "leather-styles"

packages/ui/tsup.config.native.ts

@@ -24,7 +24,7 @@ export default defineConfig({
   inject: ['./react-shim.js'],
   format: ['esm'],
   tsconfig: 'tsconfig.native.json',
-  outDir: 'dist-native/',
+  outDir: 'dist-native',
   experimentalDts: true,
   clean: false,
   minify: true,

packages/ui/tsup.config.web.ts

@@ -3,29 +3,30 @@ import svgrPlugin from 'esbuild-plugin-svgr';
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
-  entry: ['web.ts'],
+  entry: ['./src/**/*.{web,shared}.{ts,tsx}', './src/**/index.ts'],
+  bundle: false,
   esbuildPlugins: [
     svgrPlugin({ typescript: true }),
     copy({
+      copyOnStart: true,
+      watch: true,
       assets: [
         {
           from: ['./src/assets/**/*'],
-          to: ['./src/assets'],
+          to: ['./assets'],
         },
         {
           from: ['./src/assets-web/**/*'],
-          to: ['./src/assets-web'],
+          to: ['./assets-web'],
         },
       ],
-      copyOnStart: true,
-      watch: true,
     }),
   ],
-  onSuccess: 'tsc --build tsconfig.json',
+  onSuccess: 'panda cssgen --outfile dist-web/styles.css',
   format: ['esm'],
   tsconfig: 'tsconfig.web.json',
-  outDir: 'dist-web/',
-  clean: false,
+  outDir: 'dist-web',
+  clean: true,
   minify: true,
   minifyIdentifiers: true,
   minifySyntax: true,