feat: website release v2 (#616)

* feat: upgrade to svelte 5 & tailwind v4 + add navigation menu to ui package * feat: website navigation with nav menu from shadcn * chore: refactor navigation menu storybook * fix: responsiveness bug * chore: remove tailwind config file * chore: - remove carbon icons from repo - add Geist font family * refactor website --------- Co-authored-by: Rotimi Best <best@classroomio.com>
2025-12-20 12:44:59 +01:00
parent 690cf147ff
commit e6a3cf9332
108 changed files with 2425 additions and 2169 deletions
@@ -36,7 +36,7 @@
        class="ui:ring-offset-background ui:focus:ring-ring ui:rounded-xs ui:focus:outline-hidden ui:absolute ui:top-4 ui:opacity-70 ui:transition-opacity ui:hover:opacity-100 ui:focus:ring-2 ui:focus:ring-offset-2 ui:disabled:pointer-events-none ui:[&_svg:not([class*='size-'])]:size-4 ui:[&_svg]:pointer-events-none ui:[&_svg]:shrink-0 ui:end-4 ui:cursor-pointer"
      >
        <XIcon />
-        <span class="sr-only">Close</span>
+        <span class="ui:sr-only">Close</span>
      </DialogPrimitive.Close>
    {/if}
  </DialogPrimitive.Content>
@@ -0,0 +1,28 @@
+import Root from "./navigation-menu.svelte";
+import Content from "./navigation-menu-content.svelte";
+import Indicator from "./navigation-menu-indicator.svelte";
+import Item from "./navigation-menu-item.svelte";
+import Link from "./navigation-menu-link.svelte";
+import List from "./navigation-menu-list.svelte";
+import Trigger from "./navigation-menu-trigger.svelte";
+import Viewport from "./navigation-menu-viewport.svelte";
+
+export {
+	Root,
+	Content,
+	Indicator,
+	Item,
+	Link,
+	List,
+	Trigger,
+	Viewport,
+	//
+	Root as NavigationMenuRoot,
+	Content as NavigationMenuContent,
+	Indicator as NavigationMenuIndicator,
+	Item as NavigationMenuItem,
+	Link as NavigationMenuLink,
+	List as NavigationMenuList,
+	Trigger as NavigationMenuTrigger,
+	Viewport as NavigationMenuViewport,
+};
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+  import { cn } from '../../tools';
+
+  let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.ContentProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Content
+  bind:ref
+  data-slot="navigation-menu-content"
+  class={cn(
+    'ui:data-[motion^=from-]:animate-in ui:data-[motion^=to-]:animate-out ui:data-[motion^=from-]:fade-in ui:data-[motion^=to-]:fade-out ui:data-[motion=from-end]:slide-in-from-end-52 ui:data-[motion=from-start]:slide-in-from-start-52 ui:data-[motion=to-end]:slide-out-to-end-52 ui:data-[motion=to-start]:slide-out-to-start-52 ui:start-0 ui:top-0 ui:w-full md:ui:absolute md:ui:w-auto',
+    'ui:group-data-[viewport=false]/navigation-menu:bg-popover ui:group-data-[viewport=false]/navigation-menu:text-popover-foreground ui:group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in ui:group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out ui:group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 ui:group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 ui:group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 ui:group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 ui:**:data-[slot=navigation-menu-link]:focus:ring-0 ui:**:data-[slot=navigation-menu-link]:focus:outline-none ui:group-data-[viewport=false]/navigation-menu:top-full ui:group-data-[viewport=false]/navigation-menu:mt-1.5 ui:group-data-[viewport=false]/navigation-menu:overflow-hidden ui:group-data-[viewport=false]/navigation-menu:rounded-md ui:group-data-[viewport=false]/navigation-menu:border ui:group-data-[viewport=false]/navigation-menu:shadow ui:group-data-[viewport=false]/navigation-menu:duration-200',
+    className
+  )}
+  {...restProps}
+/>
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+  import { cn } from '../../tools';
+
+  let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.IndicatorProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Indicator
+  bind:ref
+  data-slot="navigation-menu-indicator"
+  class={cn(
+    'ui:data-[state=visible]:animate-in ui:data-[state=hidden]:animate-out ui:data-[state=hidden]:fade-out ui:data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+    className
+  )}
+  {...restProps}
+>
+  <div class="ui:bg-border ui:rounded-ts-sm ui:relative ui:top-[60%] ui:h-2 ui:w-2 ui:rotate-45 ui:shadow-md"></div>
+</NavigationMenuPrimitive.Indicator>
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+  import { cn } from '../../tools';
+
+  let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.ItemProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Item
+  bind:ref
+  data-slot="navigation-menu-item"
+  class={cn('ui:relative', className)}
+  {...restProps}
+/>
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+  import { cn } from '../../tools';
+
+  let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.LinkProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Link
+  bind:ref
+  data-slot="navigation-menu-link"
+  class={cn(
+    "ui:data-[active=true]:focus:bg-accent ui:data-[active=true]:hover:bg-accent ui:data-[active=true]:bg-accent/50 ui:data-[active=true]:text-accent-foreground ui:hover:bg-accent ui:hover:text-accent-foreground ui:focus:bg-accent ui:focus:text-accent-foreground ui:focus-visible:ring-ring/50 ui:[&_svg:not([class*='text-'])]:text-muted-foreground ui:flex ui:flex-col ui:gap-1 ui:rounded-sm ui:p-2 ui:text-sm ui:outline-none ui:transition-all ui:focus-visible:outline-1 ui:focus-visible:ring-[3px] ui:[&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...restProps}
+/>
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+  import { cn } from '../../tools';
+
+  let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.ListProps = $props();
+</script>
+
+<NavigationMenuPrimitive.List
+  bind:ref
+  data-slot="navigation-menu-list"
+  class={cn('ui:group ui:flex ui:flex-1 ui:list-none ui:items-center ui:justify-center ui:gap-1', className)}
+  {...restProps}
+/>
@@ -0,0 +1,34 @@
+<script lang="ts" module>
+  import { cn } from '../../tools';
+  import { tv } from 'tailwind-variants';
+
+  export const navigationMenuTriggerStyle = tv({
+    base: 'ui:bg-background ui:hover:bg-accent ui:hover:text-accent-foreground ui:focus:bg-accent ui:focus:text-accent-foreground ui:data-[state=open]:ui:hover:bg-accent ui:data-[state=open]:ui:text-accent-foreground ui:data-[state=open]:ui:focus:bg-accent ui:data-[state=open]:ui:bg-accent/50 ui:focus-visible:ring-ring/50 ui:group ui:inline-flex ui:h-9 ui:w-max ui:items-center ui:justify-center ui:rounded-md ui:px-4 ui:py-2 ui:text-sm ui:font-medium ui:outline-none ui:transition-[color,box-shadow] ui:focus-visible:outline-1 ui:focus-visible:ring-[3px] ui:disabled:pointer-events-none ui:disabled:opacity-50'
+  });
+</script>
+
+<script lang="ts">
+  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: NavigationMenuPrimitive.TriggerProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Trigger
+  bind:ref
+  data-slot="navigation-menu-trigger"
+  class={cn(navigationMenuTriggerStyle(), 'ui:group', className)}
+  {...restProps}
+>
+  {@render children?.()}
+
+  <ChevronDownIcon
+    class="ui:relative ui:top-px ui:ms-1 ui:size-3 ui:transition ui:duration-300 ui:group-data-[state=open]:ui:rotate-180"
+    aria-hidden="true"
+  />
+</NavigationMenuPrimitive.Trigger>
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+  import { cn } from '../../tools';
+
+  let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.ViewportProps = $props();
+</script>
+
+<div class={cn('ui:absolute ui:start-0 ui:top-full ui:isolate ui:z-50 ui:flex ui:justify-center')}>
+  <NavigationMenuPrimitive.Viewport
+    bind:ref
+    data-slot="navigation-menu-viewport"
+    class={cn(
+      'ui:origin-top-center ui:bg-popover ui:text-popover-foreground ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:zoom-out-95 ui:data-[state=open]:zoom-in-90 ui:relative ui:mt-1.5 ui:h-(--bits-navigation-menu-viewport-height) ui:w-full ui:overflow-hidden ui:rounded-md ui:border ui:shadow md:ui:w-[var(--bits-navigation-menu-viewport-width)]',
+      className
+    )}
+    {...restProps}
+  />
+</div>
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+  import { cn } from '../../tools';
+  import NavigationMenuViewport from './navigation-menu-viewport.svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    viewport = true,
+    children,
+    ...restProps
+  }: NavigationMenuPrimitive.RootProps & {
+    viewport?: boolean;
+  } = $props();
+</script>
+
+<NavigationMenuPrimitive.Root
+  bind:ref
+  data-slot="navigation-menu"
+  data-viewport={viewport}
+  class={cn(
+    'ui:group/navigation-menu ui:relative ui:flex ui:max-w-max ui:flex-1 ui:items-center ui:justify-center',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+
+  {#if viewport}
+    <NavigationMenuViewport />
+  {/if}
+</NavigationMenuPrimitive.Root>