fix: rework ui-header to not use external css modules

pubkeyapp · Dec 3, 2023 · e2c5816 · e2c5816
1 parent 9287a7e
commit e2c5816
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 277 deletions.
diff --git a/packages/core/src/lib/ui-header/ui-header.module.css b/packages/core/src/lib/ui-header/ui-header.module.css
diff --git a/packages/core/src/lib/ui-header/ui-header.tsx b/packages/core/src/lib/ui-header/ui-header.tsx
@@ -1,10 +1,8 @@
-import { Anchor, Burger, Group } from '@mantine/core'
+import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core'
 import { ReactNode } from 'react'
-import cx from 'clsx'
 import { Link, useLocation } from 'react-router-dom'
 import { UiLogo, UiLogoType } from '../ui-logo'
-
-import classes from './ui-header.module.css'
+import { useUiColorScheme } from '../ui-theme'
 
 export interface UiHeaderProps {
   base?: string
@@ -21,23 +19,41 @@ export interface UiHeaderLink {
 }
 
 export function UiHeader({ base, links = [], logo, logoSmall, opened, profile, toggle }: UiHeaderProps) {
+  const { colorScheme } = useUiColorScheme()
+  const isDark = colorScheme === 'dark'
   const { pathname } = useLocation()
-  const items = links.map((link) => (
-    <Anchor
-      component={Link}
-      key={link.label}
-      to={link.link}
-      className={cx(classes.link, { [classes.linkActive]: pathname.startsWith(link.link) })}
-    >
-      {link.label}
-    </Anchor>
-  ))
+  const items = links.map((link) => {
+    const active = pathname.startsWith(link.link)
+    const linkColor = isDark ? 'gray.4' : 'dark.8'
+    const activeLinkColor = isDark ? 'brand.6' : 'brand.4'
+
+    return (
+      <Anchor
+        component={Link}
+        key={link.label}
+        to={link.link}
+        display="block"
+        bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}
+        c={active ? activeLinkColor : linkColor}
+        fw={500}
+        fz={rem(14)}
+        lh={1}
+        p={`${rem(8)} ${rem(12)}`}
+        style={{
+          borderRadius: rem(4),
+          textDecoration: 'none',
+        }}
+      >
+        {link.label}
+      </Anchor>
+    )
+  })
 
   const burger = toggle ? <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" /> : null
 
   return (
-    <header className={classes.header}>
-      <div className={classes.inner}>
+    <Box component="header" px="md" h={rem(56)} bg={isDark ? 'dark.9' : 'white'}>
+      <Flex justify="space-between" align="center" style={{ height: rem(56) }}>
         <Group>
           <Group>
             {burger}
@@ -46,13 +62,13 @@ export function UiHeader({ base, links = [], logo, logoSmall, opened, profile, t
               <Group visibleFrom="md">{logo ?? <UiLogoType height={28} />}</Group>
             </Anchor>
           </Group>
-          <Group gap={5} className={classes.links} visibleFrom="md">
+          <Group gap={5} visibleFrom="md">
             {items}
           </Group>
         </Group>
 
         <Group>{profile}</Group>
-      </div>
-    </header>
+      </Flex>
+    </Box>
   )
 }
diff --git a/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap b/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap
@@ -1328,58 +1328,13 @@ exports[`component generator should create files for header 1`] = `
         "isBinary": false,
         "path": "./test/index.ts",
       },
-      "ui-header.module.css": {
-        "content": [
-          ".header {",
-          "height: rem(56px);",
-          "background-color: light-dark(",
-          "var(--mantine-color-white),",
-          "var(--mantine-color-dark-9)",
-          ");",
-          "padding-left: var(--mantine-spacing-md);",
-          "padding-right: var(--mantine-spacing-md);",
-          "}",
-          ".inner {",
-          "height: rem(56px);",
-          "display: flex;",
-          "justify-content: space-between;",
-          "align-items: center;",
-          "}",
-          ".link {",
-          "display: block;",
-          "line-height: 1;",
-          "padding: rem(8px) rem(12px);",
-          "border-radius: var(--mantine-radius-sm);",
-          "text-decoration: none;",
-          "color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));",
-          "font-size: var(--mantine-font-size-sm);",
-          "font-weight: 500;",
-          "@mixin hover {",
-          "background-color: light-dark(",
-          "var(--mantine-color-gray-0),",
-          "var(--mantine-color-dark-6)",
-          ");",
-          "}",
-          "}",
-          ".linkActive {",
-          "background-color: light-dark(",
-          "var(--mantine-color-gray-0),",
-          "var(--mantine-color-dark-6)",
-          ");",
-          "color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));",
-          "}",
-        ],
-        "isBinary": false,
-        "path": "./test/ui-header.module.css",
-      },
       "ui-header.tsx": {
         "content": [
-          "import { Anchor, Burger, Group } from '@mantine/core';",
+          "import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core';",
           "import { ReactNode } from 'react';",
-          "import cx from 'clsx';",
           "import { Link, useLocation } from 'react-router-dom';",
-          "import { UiLogo, UiLogoType } from '../ui-logo';",
-          "import classes from './ui-header.module.css';",
+          "import { UiLogo, UiLogoType } from '../-logo';",
+          "import { useUiColorScheme } from '../-theme';",
           "export interface UiHeaderProps {",
           "base?: string;",
           "logo?: ReactNode;",
@@ -1402,25 +1357,45 @@ exports[`component generator should create files for header 1`] = `
           "profile,",
           "toggle,",
           "}: UiHeaderProps) {",
+          "const { colorScheme } = useUiColorScheme();",
+          "const isDark = colorScheme === 'dark';",
           "const { pathname } = useLocation();",
-          "const items = links.map((link) => (",
+          "const items = links.map((link) => {",
+          "const active = pathname.startsWith(link.link);",
+          "const linkColor = isDark ? 'gray.4' : 'dark.8';",
+          "const activeLinkColor = isDark ? 'brand.6' : 'brand.4';",
+          "return (",
           "<Anchor",
           "component={Link}",
           "key={link.label}",
           "to={link.link}",
-          "className={cx(classes.link, {",
-          "[classes.linkActive]: pathname.startsWith(link.link),",
-          "})}",
+          "display="block"",
+          "bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}",
+          "c={active ? activeLinkColor : linkColor}",
+          "fw={500}",
+          "fz={rem(14)}",
+          "lh={1}",
+          "p={\`\${rem(8)} \${rem(12)}\`}",
+          "style={{",
+          "borderRadius: rem(4),",
+          "textDecoration: 'none',",
+          "}}",
           ">",
           "{link.label}",
           "</Anchor>",
-          "));",
+          ");",
+          "});",
           "const burger = toggle ? (",
           "<Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" />",
           ") : null;",
           "return (",
-          "<header className={classes.header}>",
-          "<div className={classes.inner}>",
+          "<Box",
+          "component="header"",
+          "px="md"",
+          "h={rem(56)}",
+          "bg={isDark ? 'dark.9' : 'white'}",
+          ">",
+          "<Flex justify="space-between" align="center" style={{ height: rem(56) }}>",
           "<Group>",
           "<Group>",
           "{burger}",
@@ -1433,13 +1408,13 @@ exports[`component generator should create files for header 1`] = `
           "</Group>",
           "</Anchor>",
           "</Group>",
-          "<Group gap={5} className={classes.links} visibleFrom="md">",
+          "<Group gap={5} visibleFrom="md">",
           "{items}",
           "</Group>",
           "</Group>",
           "<Group>{profile}</Group>",
-          "</div>",
-          "</header>",
+          "</Flex>",
+          "</Box>",
           ");",
           "}",
         ],

diff --git a/...ators/src/generators/component/files/header/__prefixFileName__-header.module.css.template b/...ators/src/generators/component/files/header/__prefixFileName__-header.module.css.template
diff --git a/...s/generators/src/generators/component/files/header/__prefixFileName__-header.tsx.template b/...s/generators/src/generators/component/files/header/__prefixFileName__-header.tsx.template
@@ -1,10 +1,8 @@
-import { Anchor, Burger, Group } from '@mantine/core'
+import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core'
 import { ReactNode } from 'react'
-import cx from 'clsx'
 import { Link, useLocation } from 'react-router-dom'
-import { <%= prefix.className %>Logo, <%= prefix.className %>LogoType } from '../<%= prefix.fileName %>-logo'
-
-import classes from './<%= prefix.fileName %>-header.module.css'
+import { <%= prefix.className %>Logo, <%= prefix.className %>LogoType } from '../<%= prefix.filenameName %>-logo'
+import { use<%= prefix.className %>ColorScheme } from '../<%= prefix.filenameName %>-theme'
 
 export interface <%= prefix.className %>HeaderProps {
   base?: string
@@ -21,23 +19,41 @@ export interface <%= prefix.className %>HeaderLink {
 }
 
 export function <%= prefix.className %>Header({ base, links = [], logo, logoSmall, opened, profile, toggle }: <%= prefix.className %>HeaderProps) {
+  const { colorScheme } = use<%= prefix.className %>ColorScheme()
+  const isDark = colorScheme === 'dark'
   const { pathname } = useLocation()
-  const items = links.map((link) => (
-    <Anchor
-      component={Link}
-      key={link.label}
-      to={link.link}
-      className={cx(classes.link, { [classes.linkActive]: pathname.startsWith(link.link) })}
-    >
-      {link.label}
-    </Anchor>
-  ))
+  const items = links.map((link) => {
+    const active = pathname.startsWith(link.link)
+    const linkColor = isDark ? 'gray.4' : 'dark.8'
+    const activeLinkColor = isDark ? 'brand.6' : 'brand.4'
+
+    return (
+      <Anchor
+        component={Link}
+        key={link.label}
+        to={link.link}
+        display="block"
+        bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}
+        c={active ? activeLinkColor : linkColor}
+        fw={500}
+        fz={rem(14)}
+        lh={1}
+        p={`${rem(8)} ${rem(12)}`}
+        style={{
+          borderRadius: rem(4),
+          textDecoration: 'none',
+        }}
+      >
+        {link.label}
+      </Anchor>
+    )
+  })
 
   const burger = toggle ? <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" /> : null
 
   return (
-    <header className={classes.header}>
-      <div className={classes.inner}>
+    <Box component="header" px="md" h={rem(56)} bg={isDark ? 'dark.9' : 'white'}>
+      <Flex justify="space-between" align="center" style={{ height: rem(56) }}>
         <Group>
           <Group>
             {burger}
@@ -46,13 +62,13 @@ export function <%= prefix.className %>Header({ base, links = [], logo, logoSmal
               <Group visibleFrom="md">{logo ?? <<%= prefix.className %>LogoType height={28} />}</Group>
             </Anchor>
           </Group>
-          <Group gap={5} className={classes.links} visibleFrom="md">
+          <Group gap={5} visibleFrom="md">
             {items}
           </Group>
         </Group>
 
         <Group>{profile}</Group>
-      </div>
-    </header>
+      </Flex>
+    </Box>
   )
 }