feat: implement logout

MarufZak · MarufZak · commit e3eb10208520 · 2024-07-06T11:50:52.000+05:00
diff --git a/apps/dashboard/rollup.config.js b/apps/dashboard/rollup.config.js
@@ -17,10 +17,7 @@ export default {
     babel({ babelHelpers: "bundled" }),
     typescript(),
     postcss({
-      plugins: [
-        tailwindcss({ config: "../../packages/strapi-ui/tailwind.config.js" }),
-        autoprefixer(),
-      ],
+      plugins: [tailwindcss(), autoprefixer()],
       extract: false,
     }),
     serve({
diff --git a/apps/dashboard/src/App.tsx b/apps/dashboard/src/App.tsx
@@ -28,8 +28,10 @@ const App = () => {
     const theme = localStorage.getItem("theme");
     if (theme === "dark") {
       document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
     }
-  }, []);
+  }, [activePath]);
 
   const handleLogin = (username: string, password: string) => {
     const newUser = {
@@ -45,6 +47,12 @@ const App = () => {
     setActivePath(newPath);
   };
 
+  const handleLogout = () => {
+    setUser(null);
+    document.body.classList.remove("dark");
+    setActivePath("Welcome");
+  };
+
   // current patching algorithm requires
   // this to make full rerender
   return user ? (
@@ -86,7 +94,7 @@ const App = () => {
         activePath={activePath}
         user={user}
       >
-        <Settings />
+        <Settings onLogout={handleLogout} />
       </DashboardLayout>
     ) : (
       <DashboardLayout
diff --git a/apps/dashboard/src/components/page.tsx b/apps/dashboard/src/components/page.tsx
@@ -0,0 +1,39 @@
+import React from "@marufzak/react";
+import { cn } from "@marufzak/strapi-ui/utils";
+
+interface Props extends React.ComponentProps<"header"> {
+  action?: React.ReactNode;
+  title: string;
+  description?: string;
+}
+
+const Page = ({
+  className,
+  title,
+  children,
+  description,
+  action,
+  ...props
+}: Props) => {
+  return (
+    <section experimental__patching={true}>
+      <header
+        experimental__patching={true}
+        className={cn(
+          "flex items-center justify-between mb-14 text-neutral-800",
+          className,
+        )}
+        {...props}
+      >
+        <div>
+          <h2 className="text-[32px] leading-10 font-bold">{title}</h2>
+          <p className="text-neutral-600">{description}</p>
+        </div>
+        {action}
+      </header>
+      {children}
+    </section>
+  );
+};
+
+export default Page;
diff --git a/apps/dashboard/src/components/sidebar.tsx b/apps/dashboard/src/components/sidebar.tsx
@@ -8,14 +8,9 @@ import {
 import { StrapiIcon } from "@marufzak/strapi-ui/icons/logos";
 import { cn } from "@marufzak/strapi-ui/utils";
 import type { User } from "../App";
-import {
-  generalPages,
-  pluginsPages,
-  type GeneralPageType,
-  type PluginPageType,
-} from "../lib/constants";
+import { generalPages, type GeneralPageType } from "../lib/constants";
 
-export type PathType = GeneralPageType | PluginPageType | "Welcome";
+export type PathType = GeneralPageType | "Welcome";
 interface SidebarProps {
   isCollapsed: boolean;
   handleCollapseChange: () => void;
@@ -74,23 +69,7 @@ const Sidebar = ({
           key="divider-2"
           className={isCollapsed ? "block my-4" : "hidden"}
         />
-        <ListTitle key="title-1" className={isCollapsed ? "hidden" : ""}>
-          plugins
-        </ListTitle>
-        {pluginsPages.map((plugin) => {
-          return (
-            <ListItem
-              onClick={() => onPathChange(plugin.title)}
-              isActive={activePath === plugin.title}
-              key={plugin.id}
-              isCollapsed={isCollapsed}
-              icon={plugin.icon}
-              href={plugin.href}
-            >
-              {plugin.title}
-            </ListItem>
-          );
-        })}
+
         <ListTitle key="title-2" className={isCollapsed ? "hidden" : ""}>
           general
         </ListTitle>
diff --git a/apps/dashboard/src/globals.css b/apps/dashboard/src/globals.css
@@ -4,61 +4,8 @@
 @tailwind components;
 @tailwind utilities;
 
+/* TODO: properly extend dark tokens */
 @layer base {
-  :root {
-    --neutral-1000: #181826;
-    --neutral-900: #212134;
-    --neutral-800: #32324d;
-    --neutral-700: #4a4a6a;
-    --neutral-600: #666687;
-    --neutral-500: #8e8ea9;
-    --neutral-400: #a5a5ba;
-    --neutral-300: #c0c0cf;
-    --neutral-200: #dcdce4;
-    --neutral-150: #eaeaef;
-    --neutral-100: #f6f6f9;
-    --neutral-0: #ffffff;
-
-    --primary-700: #271fe0;
-    --primary-600: #4945ff;
-    --primary-500: #7b79ff;
-    --primary-200: #d9d8ff;
-    --primary-100: #f0f0ff;
-
-    --secondary-700: #006096;
-    --secondary-600: #0c75af;
-    --secondary-500: #66b7f1;
-    --secondary-200: #b8e1ff;
-    --secondary-100: #eaf5ff;
-
-    --success-700: #2f6846;
-    --success-600: #328048;
-    --success-500: #5cb176;
-    --success-200: #c6f0c2;
-    --success-100: #eafbe7;
-
-    --danger-700: #b72b1a;
-    --danger-600: #d02b20;
-    --danger-500: #ee5e52;
-    --danger-200: #f5c0b8;
-    --danger-100: #fcecea;
-
-    --alternative-700: #8312d1;
-    --alternative-600: #9736e8;
-    --alternative-500: #ac73e6;
-    --alternative-200: #e0c1f4;
-    --alternative-100: #f6ecfc;
-
-    --warning-700: #be5d01;
-    --warning-600: #d9822f;
-    --warning-500: #f29d41;
-    --warning-200: #fae7b9;
-    --warning-100: #fdf4dc;
-
-    --shadow-sm: 0px 1px 4px 0px #2121341a;
-    --shadow-lg: 0px 2px 15px 0px #2121341a;
-  }
-
   .dark {
     --neutral-1000: #ffffff;
     --neutral-900: #ffffff;
@@ -110,27 +57,3 @@
     --warning-100: #181826;
   }
 }
-
-@layer utilities {
-  .icon-check-white {
-    content: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55323 0.323243C8.63135 0.242625 8.76051 0.242081 8.83931 0.322038L9.86256 1.36034C9.93893 1.43784 9.93935 1.56217 9.86349 1.64016L4.06401 7.60351C3.9859 7.68382 3.85707 7.68432 3.77834 7.60461L0.13866 3.9196C0.0617798 3.84176 0.0617102 3.71659 0.138504 3.63867L1.16213 2.59999C1.24038 2.52059 1.36843 2.52049 1.4468 2.59975L3.92174 5.10274L8.55323 0.323243Z' fill='white'/%3E%3C/svg%3E");
-    top: -2px;
-  }
-
-  .icon-check-gray {
-    content: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55323 0.323243C8.63135 0.242625 8.76051 0.242081 8.83931 0.322038L9.86256 1.36034C9.93893 1.43784 9.93935 1.56217 9.86349 1.64016L4.06401 7.60351C3.9859 7.68382 3.85707 7.68432 3.77834 7.60461L0.13866 3.9196C0.0617798 3.84176 0.0617102 3.71659 0.138504 3.63867L1.16213 2.59999C1.24038 2.52059 1.36843 2.52049 1.4468 2.59975L3.92174 5.10274L8.55323 0.323243Z' fill='rgb(102, 102, 135)'/%3E%3C/svg%3E");
-    top: -2px;
-  }
-}
-
-input {
-  border: 1px solid var(--neutral-300);
-}
-
-/* https://stackoverflow.com/questions/18856246/input-type-search-hide-the-icons */
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
diff --git a/apps/dashboard/src/lib/constants.tsx b/apps/dashboard/src/lib/constants.tsx
@@ -5,16 +5,13 @@ import {
   GearIcon,
 } from "@marufzak/strapi-ui/icons";
 
-export const pluginsPages = [
+export const generalPages = [
   {
     id: Math.random(),
     title: "Media Library",
     icon: LandscapeIcon,
     href: "media",
   },
-] as const;
-
-export const generalPages = [
   {
     id: Math.random(),
     title: "Marketplace",
@@ -124,4 +121,3 @@ export const marketplaceItems = [
 ] as const;
 
 export type GeneralPageType = (typeof generalPages)[number]["title"];
-export type PluginPageType = (typeof pluginsPages)[number]["title"];
diff --git a/apps/dashboard/src/pages/dashboard/marketplace.tsx b/apps/dashboard/src/pages/dashboard/marketplace.tsx
@@ -37,7 +37,9 @@ const Marketplace = () => {
     <div experimental__patching={true}>
       <header className="flex items-center justify-between mb-12">
         <div>
-          <h2 className="text-[32px] leading-10 font-bold">Strapi Market</h2>
+          <h2 className="text-[32px] leading-10 font-bold text-neutral-800">
+            Strapi Market
+          </h2>
           <p className="text-neutral-600">Get more out of Strapi</p>
         </div>
         <Button
@@ -161,11 +163,15 @@ const Card = ({
       >
         <StrapiPatternIcon width={64} height={64} />
         <div className="flex items-center gap-1 text-xs text-neutral-800">
-          <GithubIcon width={12} height={12} />
+          <GithubIcon className="dark:fill-neutral-50" width={12} height={12} />
           <StarIcon width={12} height={12} className="fill-warning-500" />
           <span>{formatNumber(githubStars)}</span>
           <Divider className="w-[1px] h-3 mx-3" />
-          <DownloadIcon width={10} height={10} className="text-neutral-600" />
+          <DownloadIcon
+            width={10}
+            height={10}
+            className="dark:fill-neutral-50"
+          />
           <span>{formatNumber(forks)}</span>
         </div>
       </header>
@@ -187,7 +193,7 @@ const Card = ({
             variant="tertiary"
             theme="default"
             size="sm"
-            className="flex gap-2 items-center"
+            className="flex gap-2 items-center text-neutral-800"
             experimental__patching={true}
           >
             <ExternalLinkIcon
diff --git a/apps/dashboard/src/pages/dashboard/media.tsx b/apps/dashboard/src/pages/dashboard/media.tsx
@@ -185,6 +185,7 @@ const MediaCreateModal = ({
           variant="tertiary"
           theme="default"
           size="md"
+          onClick={onModalClose}
         >
           Cancel
         </Button>
diff --git a/apps/dashboard/src/pages/dashboard/settings.tsx b/apps/dashboard/src/pages/dashboard/settings.tsx
@@ -1,7 +1,11 @@
 import React from "@marufzak/react";
-import { ToggleInput } from "@marufzak/strapi-ui";
+import { Button, ToggleInput } from "@marufzak/strapi-ui";
 
-const Settings = () => {
+interface Props {
+  onLogout?: () => void;
+}
+
+const Settings = ({ onLogout }: Props) => {
   const [isDark, setIsDark] = React.useState(() => {
     return localStorage.getItem("theme") === "dark";
   });
@@ -21,15 +25,36 @@ const Settings = () => {
     setIsDark(newValue);
   };
 
+  const handleLogout = () => {
+    localStorage.clear();
+    onLogout?.();
+  };
+
   return (
-    <ToggleInput
-      hint="Both of them look great!"
-      label="Dark mode"
-      offLabel="False"
-      onLabel="True"
-      checked={isDark}
-      onChange={handleToggle}
-    />
+    <section>
+      <header className="flex items-center justify-between mb-14">
+        <h2 className="text-[32px] leading-10 font-bold text-neutral-800">
+          Settings
+        </h2>
+        <Button
+          onClick={handleLogout}
+          type="submit"
+          size="md"
+          theme="danger"
+          variant="primary"
+        >
+          Logout
+        </Button>
+      </header>
+      <ToggleInput
+        hint="Both of them look great!"
+        label="Dark mode"
+        offLabel="False"
+        onLabel="True"
+        checked={isDark}
+        onChange={handleToggle}
+      />
+    </section>
   );
 };
 
diff --git a/apps/dashboard/src/pages/login.tsx b/apps/dashboard/src/pages/login.tsx
@@ -73,7 +73,10 @@ const Login = ({ onLogin }: Props) => {
           name="password"
           required={true}
         />
-        <label className="flex items-center text-sm text-neutral-800 gap-2 my-6">
+        <label
+          experimental__patching={true}
+          className="flex items-center text-sm text-neutral-800 gap-2 my-6"
+        >
           <Checkbox />
           Remember me
         </label>
diff --git a/packages/strapi-ui/src/components/button.tsx b/packages/strapi-ui/src/components/button.tsx
@@ -8,7 +8,7 @@ const themes = {
     secondary:
       "text-primary-600 bg-primary-100 hover:bg-neutral-0 border border-primary-200 active:border-primary-700",
     tertiary:
-      "text-primary-800 bg-neutral-0 hover:bg-neutral-100 border border-neutral-200 active:bg-neutral-150",
+      "text-primary-800 dark:text-neutral-800 bg-neutral-0 hover:bg-neutral-100 border border-neutral-200 active:bg-neutral-150",
   },
   success: {
     primary:
diff --git a/packages/strapi-ui/src/components/checkbox.tsx b/packages/strapi-ui/src/components/checkbox.tsx
@@ -11,6 +11,7 @@ const Checkbox = ({ className, ...props }: Props) => {
         `relative appearance-none overflow-hidden border border-neutral-300 checked:border-primary-600 disabled:checked:border-neutral-300 w-5 h-5 rounded-[4px] disabled:bg-neutral-200 outline-none focus-visible:ring-2 ring-offset-2 ring-primary-600 before:absolute before:inset-0 before:scale-0 checked:before:scale-100 checked:before:bg-primary-600 disabled:checked:before:bg-neutral-200 after:flex after:absolute after:inset-0 after:items-center after:justify-center checked:after:icon-check-white disabled:checked:after:icon-check-gray`,
         className,
       )}
+      experimental__patching={true}
       {...props}
     />
   );
diff --git a/packages/strapi-ui/src/components/input.tsx b/packages/strapi-ui/src/components/input.tsx
@@ -65,7 +65,7 @@ export const PasswordInput = ({
         <input
           experimental__patching={true}
           type={showPassword ? "text" : "password"}
-          className="w-full border border-neutral-200 rounded-[4px] bg-neutral-0 text-sm placeholder:text-neutral-600 text-neutral-800 h-10 focus-visible:border-2 focus-visible:border-primary-600 focus-visible:pl-[15px] outline-none px-4 disabled:bg-neutral-150 disabled:text-neutral-600"
+          className="w-full border border-neutral-200 rounded-[4px] bg-neutral-0 text-sm placeholder:text-neutral-600/80 text-neutral-800 h-10 focus-visible:border-2 focus-visible:border-primary-600 focus-visible:pl-[15px] outline-none px-4 disabled:bg-neutral-150 disabled:text-neutral-600"
           id={id}
           disabled={disabled}
           {...props}

Original file line number	Diff line number	Diff line change
`@@ -185,6 +185,7 @@ const MediaCreateModal = ({`
`185`	`185`	`variant="tertiary"`
`186`	`186`	`theme="default"`
`187`	`187`	`size="md"`
	`188`	`+ onClick={onModalClose}`
`188`	`189`	`>`
`189`	`190`	`Cancel`
`190`	`191`	`</Button>`