Configure color mode

cartridge-gg · Aug 7, 2024 · 84b1e48 · 84b1e48
1 parent 9ffa7a2
commit 84b1e48
Show file tree

Hide file tree

Showing 19 changed files with 342 additions and 100 deletions.
diff --git a/examples/starknet-react-next/package.json b/examples/starknet-react-next/package.json
@@ -14,7 +14,8 @@
     "@cartridge/ui-next": "workspace:^",
     "@starknet-react/chains": "^0.1.3",
     "@starknet-react/core": "^2.1.5",
-    "next": "^13.4.19",
+    "next": "^14.2.5",
+    "next-themes": "^0.3.0",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/examples/starknet-react-next/src/globals.css → ...s/starknet-react-next/src/app/globals.css b/examples/starknet-react-next/src/globals.css → ...s/starknet-react-next/src/app/globals.css
diff --git a/examples/starknet-react-next/src/app/layout.tsx b/examples/starknet-react-next/src/app/layout.tsx
@@ -0,0 +1,19 @@
+import { Providers } from "components/providers";
+import { Metadata } from "next";
+import { PropsWithChildren } from "react";
+
+import "./globals.css";
+
+export default function RootLayout({ children }: PropsWithChildren) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="bg-background text-foreground">
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
+
+export const metadata: Metadata = {
+  title: "StarkNet ❤️ React",
+};
diff --git a/...s/starknet-react-next/src/pages/index.tsx → ...ples/starknet-react-next/src/app/page.tsx b/...s/starknet-react-next/src/pages/index.tsx → ...ples/starknet-react-next/src/app/page.tsx
@@ -4,13 +4,17 @@ import { InvalidTxn } from "components/InvalidTxn";
 import { SignMessage } from "components/SignMessage";
 import { DojoSpawnAndMove } from "components/DojoSpawnAndMove";
 import { DelegateAccount } from "components/DelegateAccount";
+import { ColorModeToggle } from "components/ColorModeToggle";
 
 export default function Home() {
   return (
     <div className="flex flex-col p-4 gap-4">
-      <h2 className="text-3xl font-bold underline text-primary">
-        Controller Example
-      </h2>
+      <div className="flex justify-between">
+        <h2 className="text-3xl font-bold underline text-primary">
+          Controller Example
+        </h2>
+        <ColorModeToggle />
+      </div>
       <ConnectWallet />
       <DojoSpawnAndMove />
       <TransferEth />

diff --git a/...s/starknet-react-next/src/pages/token.tsx → ...tarknet-react-next/src/app/token/page.tsx b/...s/starknet-react-next/src/pages/token.tsx → ...tarknet-react-next/src/app/token/page.tsx
diff --git a/examples/starknet-react-next/src/components/ColorModeToggle.tsx b/examples/starknet-react-next/src/components/ColorModeToggle.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import { useTheme } from "next-themes";
+
+import {
+  Button,
+  DesktopIcon,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  MoonIcon,
+  SunIcon,
+} from "@cartridge/ui-next";
+
+export function ColorModeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon" className="text-foreground">
+          {theme === "system" ? (
+            <DesktopIcon className="fill-foreground" />
+          ) : theme === "light" ? (
+            <SunIcon variant="line" className="fill-foreground" />
+          ) : (
+            <MoonIcon variant="line" className="fill-foreground" />
+          )}
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/examples/starknet-react-next/src/components/ConnectWallet.tsx b/examples/starknet-react-next/src/components/ConnectWallet.tsx
@@ -1,6 +1,8 @@
+"use client";
+
 import { useAccount, useConnect, useDisconnect } from "@starknet-react/core";
 import CartridgeConnector from "@cartridge/connector";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Button } from "@cartridge/ui-next";
 
 export function ConnectWallet() {

diff --git a/examples/starknet-react-next/src/components/DelegateAccount.tsx b/examples/starknet-react-next/src/components/DelegateAccount.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useAccount } from "@starknet-react/core";
 import { useCallback, useEffect, useState } from "react";
 import { constants } from "starknet";

diff --git a/examples/starknet-react-next/src/components/DojoSpawnAndMove.tsx b/examples/starknet-react-next/src/components/DojoSpawnAndMove.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Button } from "@cartridge/ui-next";
 import {
   useAccount,

diff --git a/examples/starknet-react-next/src/components/InvalidTxn.tsx b/examples/starknet-react-next/src/components/InvalidTxn.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Button } from "@cartridge/ui-next";
 import { useAccount, useContractWrite } from "@starknet-react/core";
 

diff --git a/examples/starknet-react-next/src/components/SignMessage.tsx b/examples/starknet-react-next/src/components/SignMessage.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Button, Textarea } from "@cartridge/ui-next";
 import { useAccount, useSignTypedData } from "@starknet-react/core";
 import { useCallback, useState } from "react";

diff --git a/examples/starknet-react-next/src/components/TransferEth.tsx b/examples/starknet-react-next/src/components/TransferEth.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Button } from "@cartridge/ui-next";
 import { useAccount, useExplorer } from "@starknet-react/core";
 import { useCallback, useState } from "react";

diff --git a/...-next/src/components/StarknetProvider.tsx → ...components/providers/StarknetProvider.tsx b/...-next/src/components/StarknetProvider.tsx → ...components/providers/StarknetProvider.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Chain, mainnet, sepolia } from "@starknet-react/chains";
 import { Connector, StarknetConfig, starkscan } from "@starknet-react/core";
 import { PropsWithChildren } from "react";

diff --git a/examples/starknet-react-next/src/components/providers/ThemeProvider.tsx b/examples/starknet-react-next/src/components/providers/ThemeProvider.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/examples/starknet-react-next/src/components/providers/index.tsx b/examples/starknet-react-next/src/components/providers/index.tsx
@@ -0,0 +1,16 @@
+import { PropsWithChildren } from "react";
+import { ThemeProvider } from "./ThemeProvider";
+import { StarknetProvider } from "./StarknetProvider";
+
+export function Providers({ children }: PropsWithChildren) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <StarknetProvider>{children}</StarknetProvider>
+    </ThemeProvider>
+  );
+}
diff --git a/examples/starknet-react-next/src/pages/_app.tsx b/examples/starknet-react-next/src/pages/_app.tsx
diff --git a/examples/starknet-react-next/tsconfig.json b/examples/starknet-react-next/tsconfig.json
@@ -3,8 +3,13 @@
   "extends": "@cartridge/tsconfig/react.json",
   "compilerOptions": {
     "baseUrl": "./src",
-    "noEmit": true
+    "noEmit": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/ui-next/src/components/primitives/index.ts b/packages/ui-next/src/components/primitives/index.ts
@@ -1,5 +1,15 @@
 export * from "./alert-dialog";
+export * from "./alert";
+export * from "./aspect-ratio";
+export * from "./badge";
+export * from "./breadcrumb";
 export * from "./button";
+export * from "./card";
+export * from "./checkbox";
+export * from "./command";
+export * from "./dialog";
+export * from "./drawer";
+export * from "./dropdown-menu";
 export * from "./input";
 export * from "./label";
 export * from "./menubar";