refactor: pnpm and tsup (#285)

* refactor: use pnpm and tsup

* build: remove react from external rollup options

* build: add workaround

* ci: update pnpm

.github/workflows/build.yml

@@ -21,5 +21,8 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm ci
-      - run: npm run build:packages
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.2
+      - run: pnpm i
+      - run: pnpm build:packages

.github/workflows/libra.yml

@@ -21,5 +21,8 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm ci
-      - run: npm run build:libra
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.2
+      - run: pnpm i
+      - run: pnpm build:libra

.gitignore

@@ -2,4 +2,5 @@ node_modules
 dist
 .turbo
 *.tsbuildinfo
-styles
+styles
+.DS_Store

.npmrc

@@ -0,0 +1,2 @@
+# TODO figure out why Libra's Vite can't find deps of deps
+public-hoist-pattern[]=*

libra.config.js → libra.config.cjs

@@ -5,18 +5,18 @@ export default defineConfig({
   title: 'Sweatpants',
   port: 8080,
   inspect: true,
-  layout: './libra/DefaultLayout.tsx',
+  layout: './libra/default-layout.tsx',
   outDir: 'dist',
   viteConfig: () => {
     return {
       resolve: {
         alias: {
-          '@styles/css': resolve(__dirname, './styles/css')
-        }
+          '@styles/css': resolve(__dirname, './styles/css'),
+        },
       },
       optimizeDeps: {
-        exclude: ['@styles/css']
-      }
+        exclude: ['@styles/css'],
+      },
     };
-  }
+  },
 });

libra/components/Card.libra.tsx

@@ -1,10 +1,4 @@
-import {
-  Button,
-  ButtonGroup,
-  Card,
-  Stack,
-  Text,
-} from '../../packages/react/src';
+import { Button, ButtonGroup, Card, Stack, Text } from '../../packages/react/src';
 import { css } from '@styles/css';
 
 directory('Card', () => {

libra/components/Dialog.libra.tsx

@@ -1,10 +1,4 @@
-import {
-  Button,
-  Dialog,
-  Stack,
-  DateField,
-  Select,
-} from '../../packages/react/src';
+import { Button, Dialog, Stack, DateField, Select } from '../../packages/react/src';
 
 directory('Dialog', () => {
   add('Default', () => {

libra/components/Icons.libra.tsx

@@ -1,5 +1,5 @@
 import { css } from '@styles/css';
-import * as icons from '../../packages/react/src/icons/icons';
+import * as icons from '@sweatpants/react/';
 import { ElementType } from 'react';
 import { Stack, Text } from '../../packages/react/src';
 
@@ -10,7 +10,7 @@ directory('Icons', () => {
         className={css({
           display: 'grid',
           gridTemplateColumns: 'repeat(5, 1fr)',
-          gridGap: '8'
+          gridGap: '8',
         })}
       >
         {Object.keys(icons).map((name) => {

libra/components/Select.libra.tsx

@@ -46,7 +46,7 @@ directory('Select', () => {
           position: 'relative',
           display: 'flex',
           flexDirection: 'column',
-          gap: '0.5rem'
+          gap: '0.5rem',
         }}
       >
         <Select

libra/components/Stack.libra.tsx

@@ -6,7 +6,7 @@ const Item = () => (
     className={css({
       height: '2rem',
       width: '10rem',
-      bg: 'blue4'
+      bg: 'blue4',
     })}
   />
 );

libra/components/TextField.libra.tsx

@@ -13,7 +13,7 @@ directory('TextField', () => {
           display: 'flex',
           flexDir: 'column',
           gap: '4',
-          alignItems: 'flex-start'
+          alignItems: 'flex-start',
         })}
       >
         <TextField
@@ -36,7 +36,7 @@ directory('TextField', () => {
           display: 'flex',
           flexDir: 'column',
           gap: '4',
-          alignItems: 'flex-start'
+          alignItems: 'flex-start',
         })}
       >
         <TextField id="test2" label="Label" hasError />
@@ -51,7 +51,7 @@ directory('TextField', () => {
           display: 'flex',
           flexDir: 'column',
           gap: '4',
-          alignItems: 'flex-start'
+          alignItems: 'flex-start',
         })}
       >
         <TextField id="test2" size="sm" label="Label" prefix={'$'} />

libra/DefaultLayout.tsx → libra/default-layout.tsx

@@ -5,14 +5,14 @@ import {
   ColorSchemeProvider,
   Link,
   Stack,
-  Text
+  Text,
 } from '../packages/react/src';
 import type { LibraLayout } from '@sweatpants/libra';
 
 const styles = css({
   p: '8',
   bg: 'baseBg',
-  minH: '100vh'
+  minH: '100vh',
 });
 
 const Layout: LibraLayout = ({ children, scheme }) => {