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;`