Refactor files and add chakra UI

resolves #4
json-schema-org · May 9, 2024 · 9d42bad · 9d42bad
1 parent 11d9aac
commit 9d42bad
Show file tree

Hide file tree

Showing 8 changed files with 1,367 additions and 17 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,8 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 // import { Providers } from "./providers";
-import "./globals.css";
+import "./styles/globals.css";
+import { Providers } from "./providers";
 const font = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -17,9 +18,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={font.className}>
-        {/* <Providers> */}
-        <main>{children}</main>
-        {/* </Providers> */}
+        <Providers>
+          <main>{children}</main>
+        </Providers>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,6 @@
 "use client";
-import styles from "./page.module.css";
+import { Button } from "@chakra-ui/react";
+import styles from "./styles/page.module.css";
 import JsonIcon from "@/public/icons/json-schema-blue.png";
 
 export default function Home() {

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -0,0 +1,7 @@
+"use client";
+import { ChakraProvider } from "@chakra-ui/react";
+import { theme } from "./styles/theme";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
+}
diff --git a/app/globals.css → app/styles/globals.css b/app/globals.css → app/styles/globals.css
diff --git a/app/page.module.css → app/styles/page.module.css b/app/page.module.css → app/styles/page.module.css
diff --git a/app/styles/theme.ts b/app/styles/theme.ts
@@ -0,0 +1,42 @@
+"use client";
+import { theme as chakraTheme, extendTheme } from "@chakra-ui/react";
+
+const Button = {
+  variants: {
+    default: {
+      color: "white",
+      bg: "hsl(var(--primary))",
+      _hover: {
+        bg: "hsl(var(--primary) / 0.8)",
+      },
+      _active: {
+        bg: "hsl(var(--primary) / 0.6)",
+      },
+    },
+    success: {
+      color: "green",
+
+      borderColor: "green",
+      borderWidth: "1px",
+      _disabled: {
+        color: "green.700",
+      },
+      _hover: {
+        bg: "green.100",
+        _disabled: {
+          color: "green.700",
+        },
+      },
+      _active: {
+        bg: "green.200",
+      },
+    },
+  },
+};
+export const theme = extendTheme({
+  styles: {
+    global: {},
+  },
+  components: { Button },
+  fonts: {},
+});
diff --git a/package.json b/package.json
@@ -9,16 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/next-js": "^2.2.0",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "framer-motion": "^11.1.9",
+    "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "eslint-config-next": "14.2.3",
+    "typescript": "^5"
   }
 }