Merge pull request #633 from maiieul/docs-ux

docs(UX/make-it-yours) improvements

Author: maiieul

apps/website/src/_state/app-state.type.ts

@@ -1,5 +1,6 @@
 export interface AppState {
   featureFlags?: {
     showStyled?: boolean;
+    showNeumorphic?: boolean;
   };
 }

apps/website/src/components/copy-css-config/copy-css-config.tsx

@@ -1,4 +1,4 @@
-import { $, component$, useSignal } from '@builder.io/qwik';
+import { component$, useSignal } from '@builder.io/qwik';
 import { Modal, ModalContent, ModalHeader } from '@qwik-ui/headless';
 import { Button } from '@qwik-ui/styled';
 import { extractThemeCSS } from '@qwik-ui/utils';
@@ -13,23 +13,17 @@ export default component$(() => {
 
   const { theme } = useTheme();
 
-  const generateCSSThemeOutput = $(async () => {
-    console.log('theme', theme);
-    const cssRules = extractThemeCSS(
-      theme === 'dark' || theme === 'light'
-        ? 'border-radius-0 simple primary-cyan-600 light base-slate'
-        : theme,
-      globalCSS,
-    );
-    cssThemeOutput.value = cssRules;
-  });
-
   return (
     <>
       <Button
         onClick$={() => {
           showSig.value = true;
-          generateCSSThemeOutput();
+          cssThemeOutput.value = extractThemeCSS(
+            theme === 'dark' || theme === 'light'
+              ? 'border-radius-0 simple primary-cyan-600 light base-slate'
+              : theme,
+            globalCSS,
+          );
         }}
       >
         Copy code

apps/website/src/components/header/header.tsx

@@ -1,4 +1,4 @@
-import { component$, useComputed$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { $, component$, useComputed$, useSignal, useStyles$ } from '@builder.io/qwik';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { version as headlessVersion } from '../../../../../packages/kit-headless/package.json';
 // eslint-disable-next-line @nx/enforce-module-boundaries
@@ -23,6 +23,7 @@ import { LuX } from '@qwikest/icons/lucide';
 import { DocsNavigation } from '../navigation-docs/navigation-docs';
 import { useKitMenuItems } from '~/routes/layout';
 import { cn } from '@qwik-ui/utils';
+import { DiscordIcon } from '../icons/discord';
 
 export interface HeaderProps {
   showVersion?: boolean;
@@ -128,21 +129,34 @@ export default component$(({ showVersion = false }: HeaderProps) => {
 
   const { theme, setTheme } = useTheme();
 
+  const switchLightDark = $((input: string | string[]): string | string[] | undefined => {
+    const switchWord = (word: string): string =>
+      word.includes('light')
+        ? word.replace('light', 'dark')
+        : word.replace('dark', 'light');
+    if (typeof input === 'string') {
+      return switchWord(input);
+    } else if (Array.isArray(input)) {
+      return input.map((item) => switchWord(item));
+    }
+  });
+
   return (
     <div
       class={cn(
         'bg-background sticky top-0 z-10 flex h-16 justify-center border-b',
         theme?.includes('brutalist') && 'border-b-2',
       )}
     >
-      <header class="xs:gap-8 flex w-full max-w-screen-2xl items-center gap-6">
-        <section class="mr-auto flex flex-col gap-1 md:flex-row md:gap-8">
-          <a href="/" aria-label="Qwik UI Logo" class="lg:ml-8">
+      <header class="flex w-full max-w-screen-2xl items-center justify-between">
+        <div class="block sm:hidden" />
+        <section class="xs:flex xs:items-center mr-auto hidden">
+          <a href="/" aria-label="Qwik UI Logo" class="ml-8">
             <LogoWithBorders />
           </a>
           {showVersion && (
             <div data-tip="Qwik-UI Version" class="mr-auto">
-              <div class="ml-2 flex flex-row gap-1 text-xs md:mt-1 md:flex-col md:text-sm">
+              <div class="ml-4 hidden text-xs sm:flex-col md:flex">
                 <span> {kitSignal.value?.name} Kit </span>
                 <span>
                   {' '}
@@ -153,84 +167,81 @@ export default component$(({ showVersion = false }: HeaderProps) => {
           )}
         </section>
 
-        <nav class="hidden gap-4 lg:flex">
-          <a class={isRouteActive('/about')} href="/about">
-            About
-          </a>
-          <a class={isDocsActive('/docs/headless/')} href="/docs/headless/introduction">
-            Headless Kit
-          </a>
-          {rootStore.featureFlags?.showStyled && (
-            <a class={isDocsActive('/docs/styled/')} href="/docs/styled/introduction">
-              Styled Kit
+        <div class="xs:space-x-8 mr-4 flex items-center space-x-6">
+          <nav class="hidden gap-4 lg:flex">
+            <a class={isDocsActive('/docs/headless/')} href="/docs/headless/introduction">
+              Headless Kit
             </a>
-          )}
+            {rootStore.featureFlags?.showStyled && (
+              <a class={isDocsActive('/docs/styled/')} href="/docs/styled/introduction">
+                Styled Kit
+              </a>
+            )}
+          </nav>
+          <MakeItYours />
           <a
             class={isRouteActive('https://discord.gg/PVWUUejrez')}
             href="https://discord.gg/PVWUUejrez"
             target="_blank"
           >
-            Community
+            <DiscordIcon />
           </a>
-          {/* <a href="/contact">Contact</a> */}
-        </nav>
-        <MakeItYours />
-        <button
-          type="button"
-          aria-label="Toggle dark mode"
-          onClick$={() => {
-            theme?.includes('light') ? setTheme('dark') : setTheme('light');
-          }}
-        >
-          <div class="hidden dark:block">
-            <MoonIcon />
-          </div>
-          <div class="block dark:hidden">
-            <SunIcon />
-          </div>
-        </button>
-        <a
-          target="_blank"
-          href="https://github.com/qwikifiers/qwik-ui"
-          aria-label="Qwik-UI GitHub repository"
-          class="sm:mr-8"
-        >
-          <GitHubIcon />
-        </a>
-        <button
-          type="button"
-          aria-label="Toggle navigation"
-          onClick$={() => {
-            isSidebarOpenedSig.value = !isSidebarOpenedSig.value;
-          }}
-          class="mr-4 block lg:hidden"
-        >
-          {isSidebarOpenedSig.value ? <CloseIcon /> : <MenuIcon />}
-        </button>
-        <Modal
-          bind:show={isSidebarOpenedSig}
-          class="sidebar-mobile bg-background text-foreground rounded-base ml-0 mr-auto h-screen max-w-lg border-0 p-8 shadow-md"
-        >
-          <ModalHeader>
-            <h2 class="text-lg font-bold">Copy config</h2>
-            <p>
-              Copy and paste the following code into your global.css file to apply the
-              styles.
-            </p>
-          </ModalHeader>
-          <ModalContent class="mb-2 pb-4 pt-2">
-            <DocsNavigation
-              linksGroups={menuItemsGroups}
-              class="bg-background  max-w-80 overflow-auto"
-            />
-          </ModalContent>
+          <a
+            target="_blank"
+            href="https://github.com/qwikifiers/qwik-ui"
+            aria-label="Qwik-UI GitHub repository"
+            class="sm:mr-8"
+          >
+            <GitHubIcon />
+          </a>
+          <button
+            type="button"
+            aria-label="Toggle dark mode"
+            onClick$={async () => setTheme(await switchLightDark(theme || 'light'))}
+          >
+            <div class="hidden dark:block">
+              <MoonIcon />
+            </div>
+            <div class="block dark:hidden">
+              <SunIcon />
+            </div>
+          </button>
+
           <button
-            onClick$={() => (isSidebarOpenedSig.value = false)}
-            class="absolute right-6 top-[26px]"
+            type="button"
+            aria-label="Toggle navigation"
+            onClick$={() => {
+              isSidebarOpenedSig.value = !isSidebarOpenedSig.value;
+            }}
+            class="mr-4 block lg:hidden"
           >
-            <LuX class="h-8 w-8" />
+            {isSidebarOpenedSig.value ? <CloseIcon /> : <MenuIcon />}
           </button>
-        </Modal>
+          <Modal
+            bind:show={isSidebarOpenedSig}
+            class="sidebar-mobile bg-background text-foreground rounded-base ml-0 mr-auto h-screen max-w-lg border-0 p-8 shadow-md"
+          >
+            <ModalHeader>
+              <h2 class="text-lg font-bold">Copy config</h2>
+              <p>
+                Copy and paste the following code into your global.css file to apply the
+                styles.
+              </p>
+            </ModalHeader>
+            <ModalContent class="mb-2 pb-4 pt-2">
+              <DocsNavigation
+                linksGroups={menuItemsGroups}
+                class="bg-background  max-w-80 overflow-auto"
+              />
+            </ModalContent>
+            <button
+              onClick$={() => (isSidebarOpenedSig.value = false)}
+              class="absolute right-6 top-[26px]"
+            >
+              <LuX class="h-8 w-8" />
+            </button>
+          </Modal>
+        </div>
       </header>
     </div>
   );

apps/website/src/components/make-it-yours/make-it-yours.tsx

@@ -6,6 +6,7 @@ import { LuSlidersHorizontal, LuX } from '@qwikest/icons/lucide';
 import { useTheme } from 'qwik-themes';
 import { baseOptions, borderRadiusOptions, primaryOptions } from '~/_state/make-it-yours';
 import CopyCssConfig from '../copy-css-config/copy-css-config';
+import { useAppState } from '~/_state/use-app-state';
 
 export default component$(() => {
   useStyles$(`
@@ -71,6 +72,7 @@ export default component$(() => {
     `);
 
   const showSig = useSignal(false);
+  const rootStore = useAppState();
 
   const { theme, setTheme } = useTheme();
 
@@ -93,17 +95,18 @@ export default component$(() => {
   });
   return (
     <section>
-      <button
+      <Button
+        look="outline"
         onClick$={() => {
           showSig.value = true;
         }}
         class="hover:bg-accent/80 rounded-base border px-3 py-2"
       >
         <div class="flex justify-center">
-          <LuSlidersHorizontal class="mr-3 h-6 w-6" />
+          <LuSlidersHorizontal class="h-6 w-6 sm:mr-3" />
           <span class="hidden sm:block">Make it yours</span>
         </div>
-      </button>
+      </Button>
       <Modal
         closeOnBackdropClick={false}
         bind:show={showSig}
@@ -135,7 +138,9 @@ export default component$(() => {
           >
             <option value={'simple'}>Simple</option>
             <option value={'brutalist'}>Brutalist</option>
-            <option value={'neumorphic'}>Neumorphic</option>
+            {rootStore.featureFlags?.showNeumorphic && (
+              <option value={'neumorphic'}>Neumorphic</option>
+            )}
           </select>
 
           <label class="mb-1 mt-8 block font-medium">Base</label>
@@ -465,7 +470,7 @@ export default component$(() => {
 
           <div>
             <label class="mb-1 mt-8 block font-medium">Radius</label>
-            <div class="flex flex-col space-y-2">
+            <div class="flex space-x-3">
               {borderRadiusOptions.map((borderRadius) => {
                 const isActive =
                   themeComputedObjectSig.value.borderRadius === borderRadius;
@@ -477,9 +482,13 @@ export default component$(() => {
                       themeComputedObjectSig.value.borderRadius = borderRadius;
                       setTheme(await themeStoreToThemeClasses$());
                     }}
-                    class={cn(isActive && 'border-ring mb-2')}
+                    class={cn('w-12', isActive && 'border-ring mb-2')}
                   >
-                    {borderRadius}
+                    {borderRadius === 'border-radius-0' && 0}
+                    {borderRadius === 'border-radius-dot-25' && '.25'}
+                    {borderRadius === 'border-radius-dot-50' && '.5'}
+                    {borderRadius === 'border-radius-dot-75' && '.75'}
+                    {borderRadius === 'border-radius-1' && 1}
                   </Button>
                 );
               })}
@@ -501,7 +510,13 @@ export default component$(() => {
           </div>
         </ModalContent>
 
-        <ModalFooter class=" flex w-full justify-end gap-4">
+        <ModalFooter class=" flex w-full justify-between gap-4">
+          <Button
+            look="ghost"
+            onClick$={() => setTheme(theme?.includes('dark') ? 'dark' : 'light')}
+          >
+            Reset
+          </Button>
           <CopyCssConfig />
         </ModalFooter>
         <button onClick$={() => (showSig.value = false)} class="absolute right-6 top-7">