feat: ✨ install PandaCSS and ArkUI

3 months ago · e03c6a1067
parent ab5cd05b55
commit e03c6a1067
8 changed files with 4514 additions and 948 deletions
--- a/.gitignore
+++ b/.gitignore
@ -41,3 +41,7 @@ next-env.d.ts
 .env

 /media
+
+## Panda
+styled-system
+styled-system-studio
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -5,6 +5,7 @@
  "license": "MIT",
  "type": "module",
  "scripts": {
+    "prepare": "panda codegen",
    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
    "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
@ -12,15 +13,18 @@
    "generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",
    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
-    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
+    "format": "prettier 'src/**/*.{js,jsx,ts,tsx}'"
  },
  "dependencies": {
+    "@ark-ui/react": "^3.9.0",
    "@payloadcms/db-mongodb": "beta",
    "@payloadcms/next": "beta",
    "@payloadcms/plugin-cloud": "beta",
    "@payloadcms/richtext-lexical": "beta",
    "cross-env": "^7.0.3",
    "graphql": "^16.8.1",
+    "localbites": "file:",
    "next": "15.0.0-canary.104",
    "payload": "beta",
    "react": "19.0.0-rc-06d0b89e-20240801",
@ -28,6 +32,7 @@
    "sharp": "0.32.6"
  },
  "devDependencies": {
+    "@pandacss/dev": "^0.45.1",
    "@types/node": "^20.14.9",
    "@types/react": "npm:types-react@19.0.0-rc.0",
    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
--- a/panda.config.ts
+++ b/panda.config.ts
@ -0,0 +1,20 @@
+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}", "./pages/**/*.{js,jsx,ts,tsx}"],
+
+  // Files to exclude
+  exclude: [],
+
+  // Useful for theme customization
+  theme: {
+    extend: {},
+  },
+
+  // The output directory for your css system
+  outdir: "styled-system",
+});
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@pandacss/dev/postcss': {},
+  },
+}
--- a/src/app/(frontend)/layout.tsx
+++ b/src/app/(frontend)/layout.tsx
@ -0,0 +1,18 @@
+import "./globals.css";
+
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;
--- a/yarn.lock
+++ b/yarn.lock
				`@ -0,0 +1 @@`
				`@layer reset, base, tokens, recipes, utilities;`