chore: add examples using npm versions of @pandabox/unplugin (#52)

* chore: pnpm create vite@latest --template=react-ts ./examples/unplugin

* chore(examples): add @pandacss/dev + @pandabox/unplugin with outfile

* chore: init pnpm create solid@latest

* chore(examples): add @pandacss/dev + @pandabox/unplugin

* chore(unplugin): change optimizeJs default value to "macro" + readmes update

* fix(unplugin/vite): hmr + initial CSS when using outfile

* fix: e2e test dir

Author: astahmer

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["sandbox-*", "website"]
+  "ignore": ["sandbox-*", "website", "example-*"]
 }

.changeset/five-camels-unite.md

@@ -0,0 +1,5 @@
+---
+"@pandabox/unplugin": patch
+---
+
+Change `optimizeJs` default value to `macro`

.npmrc

@@ -2,7 +2,7 @@ ignore-workspace-root-check=true
 strict-peer-dependencies=false
 auto-install-peers=true
 #
-link-workspace-packages=true
+link-workspace-packages=false
 prefer-workspace-packages=true
 #
 hoist-pattern[]=@arktype/attest

README.md

@@ -63,14 +63,35 @@ export default defineConfig({
 })
 ```
 
-# @pandabox/unplugin-panda-macro
+# @pandabox/unplugin
 
-Directly inline your `styled-system` functions and components results as class names (`atomic` or `grouped`)
+Alternative distribution entrypoint for Panda CSS (other than the [CLI](https://panda-css.com/docs/installation/cli) and
+[PostCSS plugin](https://panda-css.com/docs/installation/postcss)).
+
+Optionally inline your `styled-system` functions and components results as class names (`atomic` or `grouped`) (with
+`optimizeJs` option).
 
 ```bash
-pnpm i @pandabox/unplugin-panda-macro
+pnpm i @pandabox/unplugin
 ```
 
+## Usage
+
+```ts
+import { defineConfig } from 'vite'
+import { unplugin } from '@pandabox/unplugin'
+
+export default defineConfig({
+  plugins: [
+    unplugin.vite({
+      /* options */
+    }),
+  ],
+})
+```
+
+## `optimizeJs` option
+
 From:
 
 ```tsx
@@ -133,13 +154,12 @@ export const App = () => {
 
 # @pandabox/utils
 
-```bash
-pnpm i @pandabox/utils
-```
-
-- `assignInlineVars`
-- `cssVar`
-- `wrapValue`
+- `assignInlineVars` is like
+  [the one from vanilla-extract](https://vanilla-extract.style/documentation/packages/dynamic/#assigninlinevars) but
+  type-safe with typings using your own panda.config tokens
+- `cssVar` allows creating creating css vars as JS objects so you can reference them in your panda config or at runtime
+- `wrapValue` will wrap every objects inside the first argument with a { value: xxx }, mostly meant to easily migrate
+  from a chakra theme tokens object to a panda.config tokens object
 
 # @pandabox/postcss-plugins
 

examples/solid-start-unplugin/.gitignore

@@ -0,0 +1,33 @@
+
+dist
+.solid
+.output
+.vercel
+.netlify
+netlify
+.vinxi
+
+# Environment
+.env
+.env*.local
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+*.launch
+.settings/
+
+# Temp
+gitignore
+
+# System Files
+.DS_Store
+Thumbs.db
+
+## Panda
+styled-system
+styled-system-studio

examples/solid-start-unplugin/README.md

@@ -0,0 +1,32 @@
+# SolidStart
+
+Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
+
+## Creating a project
+
+```bash
+# create a new project in the current directory
+npm init solid@latest
+
+# create a new project in my-app
+npm init solid@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Solid apps are built with _presets_, which optimise your project for deployment to different environments.
+
+By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
+
+## This project was created with the [Solid CLI](https://solid-cli.netlify.app)

examples/solid-start-unplugin/app.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from '@solidjs/start/config'
+import pandabox from '@pandabox/unplugin'
+
+const isDev = process.env.NODE_ENV === 'development'
+
+export default defineConfig({
+  //   middleware: './src/middleware.ts',
+  //   server: {
+  //     preset: 'cloudflare-module',
+  //   },
+  vite: {
+    plugins: [
+      pandabox.vite({
+        optimizeCss: !isDev,
+      }),
+    ],
+  },
+})

examples/solid-start-unplugin/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "example-basic",
+  "type": "module",
+  "scripts": {
+    "dev": "vinxi dev",
+    "build": "vinxi build",
+    "start": "vinxi start",
+    "version": "vinxi version"
+  },
+  "dependencies": {
+    "@pandabox/unplugin": "0.1.2",
+    "@pandacss/dev": "^0.36.1",
+    "@solidjs/meta": "^0.29.2",
+    "@solidjs/router": "^0.13.1",
+    "@solidjs/start": "^1.0.0-rc.0",
+    "solid-js": "^1.8.16",
+    "vinxi": "^0.3.11"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

examples/solid-start-unplugin/panda.config.ts

@@ -0,0 +1,54 @@
+import { defineConfig } from '@pandacss/dev'
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+
+  // Where to look for your css declarations
+  include: ['./src/**/*.{js,jsx,ts,tsx}', './{App,main,minimal}*.{js,jsx,ts,tsx}'],
+
+  // Files to exclude
+  exclude: [],
+
+  // Useful for theme customization
+  theme: {
+    extend: {
+      recipes: {
+        button: {
+          className: 'button',
+          description: 'The styles for the Button component',
+          base: {
+            display: 'flex',
+            cursor: 'pointer',
+            fontWeight: 'bold',
+          },
+          variants: {
+            visual: {
+              funky: { bg: 'blue.200', color: 'slate.800' },
+              edgy: { border: '1px solid {colors.red.500}' },
+            },
+            size: {
+              sm: { padding: '4', fontSize: '12px' },
+              lg: { padding: '8', fontSize: '40px' },
+            },
+            shape: {
+              square: { borderRadius: '0' },
+              circle: { borderRadius: 'full' },
+            },
+          },
+          defaultVariants: {
+            visual: 'funky',
+            size: 'sm',
+            shape: 'circle',
+          },
+        },
+      },
+    },
+  },
+
+  // The output directory for your css system
+  outdir: 'styled-system',
+
+  // The JSX framework to use
+  jsxFramework: 'react',
+})

examples/solid-start-unplugin/public/favicon.ico

@@ -0,0 +1,39 @@
+body {
+  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+a {
+  margin-right: 1rem;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h1 {
+  color: #335d92;
+  text-transform: uppercase;
+  font-size: 4rem;
+  font-weight: 100;
+  line-height: 1.1;
+  margin: 4rem auto;
+  max-width: 14rem;
+}
+
+p {
+  max-width: 14rem;
+  margin: 2rem auto;
+  line-height: 1.35;
+}
+
+@media (min-width: 480px) {
+  h1 {
+    max-width: none;
+  }
+
+  p {
+    max-width: none;
+  }
+}

examples/solid-start-unplugin/src/app.css

@@ -0,0 +1,22 @@
+import { MetaProvider, Title } from "@solidjs/meta";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start/router";
+import { Suspense } from "solid-js";
+import "./app.css";
+
+export default function App() {
+  return (
+    <Router
+      root={props => (
+        <MetaProvider>
+          <Title>SolidStart - Basic</Title>
+          <a href="/">Index</a>
+          <a href="/about">About</a>
+          <Suspense>{props.children}</Suspense>
+        </MetaProvider>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  );
+}

examples/solid-start-unplugin/src/app.tsx

@@ -0,0 +1,59 @@
+import { css, cva } from '../../styled-system/css'
+import { center } from '../../styled-system/patterns'
+import { button } from '../../styled-system/recipes'
+import { Stack, styled } from '../../styled-system/jsx'
+// import 'virtual:panda.css'
+import './panda.css'
+
+const overrides = css.raw({
+  bg: 'purple.500',
+})
+
+const atomicRecipe = cva({
+  base: {
+    display: 'flex',
+  },
+  variants: {
+    visual: {
+      solid: { bg: 'red.200', color: 'white' },
+      outline: { borderWidth: '1px', borderColor: 'red.200' },
+    },
+    size: {
+      sm: { padding: '4', fontSize: '12px' },
+      lg: { padding: '8', fontSize: '24px' },
+    },
+  },
+})
+
+console.log(atomicRecipe({ visual: 'outline' }))
+
+export const App = () => {
+  return (
+    <div class={center({ h: 'full' })}>
+      <div
+        class={css(
+          {
+            textStyle: '4xl',
+            display: 'flex',
+            flexDirection: 'column',
+            color: 'green.300',
+            textAlign: 'center',
+            fontWeight: 'semibold',
+          },
+          {
+            color: 'red.500',
+            bg: 'yellow.200',
+          },
+          overrides,
+        )}
+      >
+        <Stack fontSize="2xl">
+          <styled.div border="2px solid token(colors.red.300)">🐼</styled.div>
+          <span>Hello from Panda</span>
+        </Stack>
+      </div>
+      <div class={button({ size: 'lg', visual: 'funky' })}>Button</div>
+      <div class={atomicRecipe({ visual: 'solid', size: 'sm' })}>Atomic Button</div>
+    </div>
+  )
+}

examples/solid-start-unplugin/src/components/App.tsx

@@ -0,0 +1,20 @@
+.increment {
+  font-family: inherit;
+  font-size: inherit;
+  padding: 1em 2em;
+  color: #335d92;
+  background-color: rgba(68, 107, 158, 0.1);
+  border-radius: 2em;
+  border: 2px solid rgba(68, 107, 158, 0);
+  outline: none;
+  width: 200px;
+  font-variant-numeric: tabular-nums;
+}
+
+.increment:focus {
+  border: 2px solid #335d92;
+}
+
+.increment:active {
+  background-color: rgba(68, 107, 158, 0.2);
+}