feat: react + tailwind and react + chakra added (#2558)

codesandbox · May 30, 2024 · f6fa309 · f6fa309
1 parent 146b331
commit f6fa309
Show file tree

Hide file tree

Showing 35 changed files with 6,989 additions and 0 deletions.
diff --git a/react-chakra/.codesandbox/icon.png b/react-chakra/.codesandbox/icon.png
diff --git a/react-chakra/.codesandbox/tasks.json b/react-chakra/.codesandbox/tasks.json
@@ -0,0 +1,36 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "name": "Install Dependencies",
+      "command": "pnpm install --force"
+    }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "dev": {
+      "name": "dev",
+      "command": "pnpm dev",
+      "runAtStart": true,
+      "preview": {
+        "port": 5173
+      }
+    },
+    "build": {
+      "name": "build",
+      "command": "pnpm build",
+      "runAtStart": false
+    },
+    "preview": {
+      "name": "preview",
+      "command": "pnpm preview",
+      "runAtStart": false
+    },
+    "install": {
+      "name": "install dependencies",
+      "command": "pnpm install"
+    }
+  }
+}
+
diff --git a/react-chakra/.codesandbox/template.json b/react-chakra/.codesandbox/template.json
@@ -0,0 +1,8 @@
+{
+  "title": "React + Chakra",
+  "description": "React running on Vite with the Chakra component system integrated for styling",
+  "iconUrl": "https://raw.githubusercontent.com/codesandbox/sandbox-templates/main/react-chakra/.codesandbox/icon.png",
+  "tags": ["frontend", "react", "vite", "chakra"],
+  "published": true
+}
+
diff --git a/react-chakra/.devcontainer/devcontainer.json b/react-chakra/.devcontainer/devcontainer.json
@@ -0,0 +1,5 @@
+{
+  "name": "Devcontainer",
+  "image": "ghcr.io/codesandbox/devcontainers/typescript-node:latest"
+}
+
diff --git a/react-chakra/README.md b/react-chakra/README.md
@@ -0,0 +1,9 @@
+# React + Charkra UI
+
+This template provides a minimal setup to get React working in Vite with HMR and [Charkra UI](https://v2.chakra-ui.com/) integrated for component styling.
+
+Learn more about:
+
+- [Vite setup for React](https://vitejs.dev/guide/).
+- [Chakra UI Components](https://v2.chakra-ui.com/docs/components).
+
diff --git a/react-chakra/index.html b/react-chakra/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/chakra.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + Chakra</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/react-chakra/package.json b/react-chakra/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "react-vite-ts",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "2.8.2",
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.5",
+    "framer-motion": "11.2.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.65",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6"
+  }
+}