Merge pull request #9 from MrSquaare/7-framework-agnostic-package

.changeset/clever-tomatoes-hammer.md

@@ -0,0 +1,5 @@
+---
+"@sandwich-ui/core": minor
+---
+
+Init package, extract preset and recipes from @sandwich-ui/react

.changeset/great-birds-applaud.md

@@ -0,0 +1,8 @@
+---
+"@sandwich-ui/react-storybook": patch
+"@sandwich-ui/react": patch
+"@sandwich-ui/core": patch
+"@sandwich-ui/docs": patch
+---
+
+Bump deps

.changeset/metal-crabs-reply.md

@@ -0,0 +1,5 @@
+---
+"@sandwich-ui/react-storybook": minor
+---
+
+Use core package, use Panda CSS instead of static CSS

.changeset/wild-melons-nail.md

@@ -0,0 +1,5 @@
+---
+"@sandwich-ui/react": minor
+---
+
+Use core package, remove static CSS

docs/Dockerfile

@@ -1,42 +1,29 @@
-FROM node:20-alpine AS base
+FROM node:22-alpine AS base
 
 ENV PNPM_HOME="/pnpm"
-ENV APP_DIRECTORY="/usr/src/app"
 
 ENV PATH="${PATH}:${PNPM_HOME}"
-ENV PATH="${PATH}:${APP_DIRECTORY}/node_modules/.bin/"
-ENV PATH="${PATH}:${APP_DIRECTORY}/docs/node_modules/.bin/"
+ENV TURBO_TELEMETRY_DISABLED="1"
 ENV ASTRO_TELEMETRY_DISABLED="1"
 
-RUN corepack enable pnpm
-
-WORKDIR ${APP_DIRECTORY}
+WORKDIR "/usr/src/app"
 
 COPY ./package.json ./pnpm-lock.yaml ./pnpm-workspace.yaml ./
+RUN corepack enable pnpm
 COPY ./docs/package.json ./docs/
 
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
-
 
 FROM base AS build
 
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+
 COPY ./turbo.json ./turbo.json
 COPY ./docs ./docs
 RUN pnpm build
 
 
-FROM base
-
-COPY --from=build ${APP_DIRECTORY}/docs/dist/ ./docs/dist/
-
-ENV NODE_ENV="production"
-
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
-
-RUN apk add --no-cache dumb-init
-
-EXPOSE 4321
+FROM nginx:stable-alpine AS production
 
-ENTRYPOINT ["dumb-init", "--"]
+COPY --from=build /usr/src/app/docs/dist/ /usr/share/nginx/html
 
-CMD ["pnpm", "-F", "@sandwich-ui/docs", "preview", "--host"]
+EXPOSE 80

docs/package.json

@@ -21,7 +21,7 @@
     "typescript": "^5.7.2"
   },
   "devDependencies": {
-    "eslint": "^9.15.0",
+    "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-astro": "^1.3.1",

package.json

@@ -3,7 +3,7 @@
   "name": "@sandwich-ui/root",
   "scripts": {
     "dev": "turbo dev",
-    "build": "turbo build --continue",
+    "build": "turbo build",
     "preview": "turbo preview",
     "lint": "turbo lint --continue",
     "lint:fix": "turbo lint:fix --continue",
@@ -23,5 +23,5 @@
   "engines": {
     "node": ">=22"
   },
-  "packageManager": "[email protected].3"
+  "packageManager": "[email protected].4"
 }

packages/core/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+## Panda
+src/styled-system
+src/styled-system-studio

packages/core/eslint.config.js

@@ -0,0 +1,11 @@
+import rootConfig from "../../eslint.config.mjs";
+
+export default [
+  { ignores: ["dist", "src/styled-system"] },
+  ...rootConfig,
+  {
+    languageOptions: {
+      ecmaVersion: 2020,
+    },
+  },
+];

packages/core/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@sandwich-ui/core",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./css": {
+      "require": "./dist/styled-system/css/index.mjs",
+      "import": "./dist/styled-system/css/index.mjs",
+      "types": "./dist/styled-system/css/index.d.ts"
+    },
+    "./tokens": {
+      "require": "./dist/styled-system/tokens/index.mjs",
+      "import": "./dist/styled-system/tokens/index.mjs",
+      "types": "./dist/styled-system/tokens/index.d.ts"
+    },
+    "./types": {
+      "types": "./dist/styled-system/types/index.d.ts",
+      "require": "./dist/styled-system/types/index.mjs",
+      "import": "./dist/styled-system/types/index.mjs"
+    },
+    "./patterns": {
+      "require": "./dist/styled-system/patterns/index.mjs",
+      "import": "./dist/styled-system/patterns/index.mjs",
+      "types": "./dist/styled-system/patterns/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset/index.cjs",
+      "import": "./dist/preset/index.js",
+      "types": "./dist/preset/index.d.ts"
+    },
+    "./recipes": {
+      "require": "./dist/recipes/index.cjs",
+      "import": "./dist/recipes/index.js",
+      "types": "./dist/recipes/index.d.ts"
+    }
+  },
+  "scripts": {
+    "predev": "panda codegen",
+    "dev": "vite build --watch",
+    "prebuild": "rimraf dist/ && panda codegen",
+    "build": "tsc && vite build && panda ship -o dist/panda.buildinfo.json",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "clean": "rimraf dist/ src/styled-system/ node_modules/.cache/"
+  },
+  "devDependencies": {
+    "@pandacss/dev": "^0.48.0",
+    "eslint": "^9.16.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-import-x": "^4.4.3",
+    "eslint-plugin-prettier": "^5.2.1",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.16.0",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.3"
+  }
+}

packages/core/panda.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "@pandacss/dev";
+
+import sandwichUIPreset from "./src/preset";
+
+export default defineConfig({
+  preflight: true,
+  prefix: "sw",
+  presets: ["@pandacss/dev/presets", sandwichUIPreset],
+  include: ["./src/**/*.ts"],
+  importMap: "@sandwich-ui/core",
+  outdir: "src/styled-system",
+});

packages/core/src/recipes/avatar.ts

@@ -0,0 +1,31 @@
+import { RecipeVariant, cva } from "@sandwich-ui/core/css";
+
+export const AvatarRecipe = cva({
+  base: {
+    borderRadius: "full",
+    overflow: "hidden",
+  },
+  variants: {
+    size: {
+      sm: {
+        w: "10",
+        h: "10",
+      },
+      md: {
+        w: "16",
+        h: "16",
+      },
+      lg: {
+        w: "24",
+        h: "24",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+type AvatarRecipeVariant = RecipeVariant<typeof AvatarRecipe>;
+
+export type AvatarSize = AvatarRecipeVariant["size"];

packages/core/src/recipes/badge.ts

@@ -0,0 +1,47 @@
+import { RecipeVariant, cva } from "@sandwich-ui/core/css";
+
+export const BadgeRecipe = cva({
+  base: {
+    display: "inline-flex",
+    border: "1px solid transparent",
+    borderRadius: "full",
+  },
+  variants: {
+    size: {
+      sm: {
+        fontSize: "xs",
+        px: 1,
+        py: 0.25,
+      },
+      md: {
+        fontSize: "base",
+        px: 2,
+        py: 0.5,
+      },
+      lg: {
+        fontSize: "lg",
+        px: 3,
+        py: 1,
+      },
+    },
+    variant: {
+      filled: {
+        bg: { base: "black", _dark: "white" },
+        color: { base: "white", _dark: "black" },
+      },
+      outlined: {
+        bg: { base: "white", _dark: "black" },
+        color: { base: "black", _dark: "white" },
+        borderColor: { base: "neutral.200", _dark: "neutral.800" },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "filled",
+  },
+});
+
+export type BadgeRecipeVariant = RecipeVariant<typeof BadgeRecipe>;
+export type BadgeVariant = BadgeRecipeVariant["variant"];
+export type BadgeSize = BadgeRecipeVariant["size"];

packages/core/src/recipes/button.ts

@@ -0,0 +1,55 @@
+import { RecipeVariant, cva } from "@sandwich-ui/core/css";
+
+export const ButtonRecipe = cva({
+  base: {
+    display: "inline-flex",
+    border: "1px solid transparent",
+    borderRadius: "md",
+    cursor: "pointer",
+    transition: "colors",
+  },
+  variants: {
+    size: {
+      sm: {
+        fontSize: "xs",
+        px: 2,
+        py: 1,
+      },
+      md: {
+        fontSize: "base",
+        px: 4,
+        py: 2,
+      },
+      lg: {
+        fontSize: "lg",
+        px: 6,
+        py: 3,
+      },
+    },
+    variant: {
+      filled: {
+        bg: { base: "black", _dark: "white" },
+        color: { base: "white", _dark: "black" },
+        _hover: {
+          bg: { base: "neutral.800", _dark: "neutral.200" },
+        },
+      },
+      outlined: {
+        bg: { base: "white", _dark: "black" },
+        color: { base: "black", _dark: "white" },
+        borderColor: { base: "neutral.200", _dark: "neutral.800" },
+        _hover: {
+          bg: { base: "neutral.100", _dark: "neutral.900" },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "filled",
+  },
+});
+
+export type ButtonRecipeVariant = RecipeVariant<typeof ButtonRecipe>;
+export type ButtonSize = ButtonRecipeVariant["size"];
+export type ButtonVariant = ButtonRecipeVariant["variant"];