fulldev-ui 0.6.0-beta.2 → 0.6.0-beta.3

package/src/components/Rating.astro

@@ -2,30 +2,15 @@
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Avatars from './Avatars.astro'
+import type { RatingSchema } from 'fulldev-ui/schemas/components/rating'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  align?: 'start' | 'center' | 'end' | undefined
-  value?: number | undefined
-  text?: string | undefined
-  avatars?: any
-  avatar?: any
-}
+interface Props extends HTMLAttributes<'div'>, RatingSchema {}
 
-const {
-  size = 'md',
-  value,
-  text,
-  avatars,
-  avatar,
-  align,
-  ...rest
-} = Astro.props
+const { size = 'md', score, ...rest } = Astro.props
 
 const getIcon = (count: number) => {
-  if (!value) return
-  const difference = value - count
+  if (!score) return
+  const difference = score - count
   if (difference >= -0.25) return 'star-filled'
   if (difference >= -0.75) return 'star-half-filled'
   return 'star'
@@ -34,71 +19,35 @@ const getIcon = (count: number) => {
 
 <Element
   class:list="rating"
-  {size}
   {...rest}
 >
-  <Avatars
-    {size}
-    {avatars}
-    {avatar}
-  />
-  <Element class:list="rating-content">
-    <Element
-      class:list="rating-stars"
-      {...rest}
-    >
-      {
-        value &&
-          [1, 2, 3, 4, 5].map((_, i) => (
-            <Icon
-              {size}
-              name={getIcon(i + 1)}
-              class:list={'rating-icon-solid'}
-            />
-          ))
-      }
-    </Element>
-    <Fragment set:html={text} />
-    <slot />
-  </Element>
+  {
+    score &&
+      [1, 2, 3, 4, 5].map((count) => (
+        <Icon
+          name={getIcon(count)}
+          {size}
+        />
+      ))
+  }
 </Element>
 
 <style is:global>
   @layer fulldev {
     .rating {
-      @apply flex items-center gap-3;
-
-      .rating-content {
-        @apply flex flex-col gap-1 text-muted-foreground;
-      }
-
-      .rating-stars {
-        @apply flex gap-1 text-primary;
-      }
-
-      &.size-sm {
-        @apply gap-2;
-
-        .rating-content {
-          @apply text-xs leading-none;
-        }
-      }
-
-      &.size-md {
-        @apply gap-2.5;
+      @apply flex gap-1 text-primary;
+    }
 
-        .rating-content {
-          @apply text-sm leading-none;
-        }
-      }
+    &.size-sm {
+      @apply text-xs;
+    }
 
-      &.size-lg {
-        @apply gap-3;
+    &.size-md {
+      @apply text-sm;
+    }
 
-        .rating-content {
-          @apply text-base leading-none;
-        }
-      }
+    &.size-lg {
+      @apply text-base;
     }
   }
 </style>

package/src/components/Search.astro

@@ -40,7 +40,7 @@ const entries = [...pages, ...categories, ...products, ...posts, ...docs]
 
 <Button
   class:list="search-button"
-  variant="secondary"
+  variant={Astro.props.variant}
   size="sm"
   icon="search"
   onclick={`document.getElementById('search').showModal()`}
@@ -55,8 +55,8 @@ const entries = [...pages, ...categories, ...products, ...posts, ...docs]
     <Element class:list="search-content">
       <Input
         class:list="search-input"
-        icon="search"
         placeholder="Search"
+        icon="search"
       />
       <Element class:list="search-list">
         {
@@ -68,7 +68,8 @@ const entries = [...pages, ...categories, ...products, ...posts, ...docs]
             >
               <Heading
                 text={data.title}
-                level={6}
+                as="h6"
+                size="md"
               />
               <Paragraph
                 set:text={'description' in data ? data.description : undefined}

package/src/components/Section.astro

@@ -1,35 +1,26 @@
 ---
-import { getEntries } from 'astro:content'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
 
-interface Props {
-  component?: string
-  [key: string]: any
+interface Props extends HTMLAttributes<'section'> {
+  as?: HTMLTag
 }
 
-let { component, products, categories, ...rest } = Astro.props
-
-products = products && (await getEntries(products))
-categories = categories && (await getEntries(categories))
-
-const allComponents = {
-  ...import.meta.glob('/src/**/*.astro'),
-  ...import.meta.glob('../../**/*.astro'),
-}
-
-const componentPath = Object.keys(allComponents).find(
-  (path) => path.split('/').pop()?.split('.')[0] === component
-)
-
-const Component =
-  componentPath && (await (allComponents[componentPath] as any)()).default
+const { as = 'section', ...rest } = Astro.props
 ---
 
-{
-  Component && (
-    <Component
-      {products}
-      {categories}
-      {...rest}
-    />
-  )
-}
+<Element
+  class:list="section"
+  {as}
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .section {
+      @apply relative w-full bg-background py-16 first:py-8;
+    }
+  }
+</style>

package/src/components/Sidebar.astro

@@ -1,93 +1,73 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Logo from 'fulldev-ui/components/Logo.astro'
-import Menu from 'fulldev-ui/components/Menu.astro'
-import Themer from 'fulldev-ui/components/Themer.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import type { SidebarSchema } from 'fulldev-ui/schemas/components/sidebar'
+import Container from './Container.astro'
 import Heading from './Heading.astro'
-import Toc from './Toc.astro'
+import Link from './Link.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'aside'> {
-  menu?: ComponentProps<typeof Menu>['groups']
-  heading?: ComponentProps<typeof Heading>['text']
-  render?: ComponentProps<typeof Toc>['render']
-  logo?: ComponentProps<typeof Logo>
-  toc?: ComponentProps<typeof Toc>['heading']
-  company?: ComponentProps<typeof Logo>['company']
-  themer?: boolean | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-}
+interface Props extends HTMLAttributes<'aside'>, SidebarSchema {}
 
-const {
-  size = 'sm',
-  logo,
-  company,
-  render,
-  menu,
-  toc,
-  heading,
-  themer,
-  ...rest
-} = Astro.props
+const { company, logo, menus, links, heading, themer, ...rest } = Astro.props
 ---
 
 <Element
   class:list="sidebar"
   as="aside"
-  {size}
   {...rest}
 >
-  <Element
-    class:list="sidebar-header"
-    as="header"
-  >
-    <Logo
-      {company}
-      {size}
-      {...logo}
-    />
-    <Heading
-      level={4}
-      text={heading}
-    />
-    <slot name="header" />
-  </Element>
-  <Element class:list="sidebar-content">
-    <Menu
-      groups={menu}
-      {size}
-    />
-    <Themer
-      if={themer}
-      {size}
-    />
-    <slot />
-  </Element>
+  <Container>
+    {
+      menus?.map(({ heading, links }) => (
+        <Element class:list="sidebar-menu">
+          <Heading
+            text={heading}
+            size="sm"
+            as="h6"
+          />
+          <Element class:list="sidebar-links">
+            {links?.map((link) => (
+              <Link
+                size="sm"
+                variant="muted"
+                {...link}
+              />
+            ))}
+          </Element>
+        </Element>
+      ))
+    }
+  </Container>
 </Element>
 
 <style is:global>
   @layer fulldev {
     .sidebar {
-      @apply sticky bottom-0 z-10 hidden h-full flex-col items-start justify-start bg-background lg:flex;
+      @apply sticky bottom-0 left-0 hidden w-64 max-w-[75vw] border-r bg-background py-8 lg:flex;
 
-      --height: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
-      top: var(--height);
+      --headers: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
+      top: var(--headers);
       width: var(--sidebar-width);
-      max-height: calc(100vh - var(--height));
+      max-height: calc(100vh - var(--headers));
 
       &,
       & ~ * {
-        --sidebar-width: 13rem;
+        @media (min-width: 1024px) {
+          --sidebar-width: 16rem;
+        }
+      }
+
+      .container {
+        @apply flex h-full w-full grow flex-col items-start gap-8 overflow-y-auto;
+        /* @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover; */
       }
 
-      .sidebar-header {
-        @apply sticky flex h-14 w-full items-center px-gutter py-6;
+      .sidebar-menu {
+        @apply flex flex-col gap-3;
       }
 
-      .sidebar-content {
-        @apply flex w-full flex-1 flex-col items-start gap-7 overflow-y-auto px-gutter pb-14 pt-6 first:pt-14;
-        @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
+      .sidebar-links {
+        @apply flex flex-col gap-2;
       }
     }
   }

package/src/components/Social.astro

@@ -4,7 +4,13 @@ import Button from 'fulldev-ui/components/Button.astro'
 
 interface Props extends ComponentProps<typeof Button> {}
 
-const { variant = 'secondary', icon, href, ...rest } = Astro.props
+const {
+  variant = 'secondary',
+  target = '_blank',
+  icon,
+  href,
+  ...rest
+} = Astro.props
 
 const platform = () => {
   if (typeof href !== 'string') return
@@ -22,9 +28,10 @@ const platform = () => {
 ---
 
 <Button
-  class:list={'social'}
+  class:list="social"
   icon={icon ?? platform()}
   {variant}
   {href}
+  {target}
   {...rest}
 />

package/src/components/Tagline.astro

@@ -1,60 +1,50 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
-import Avatar from 'fulldev-ui/components/Avatar.astro'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Icon from 'fulldev-ui/components/Icon.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import type { TaglineSchema } from 'fulldev-ui/schemas/components/tagline'
 
-interface Props
-  extends GlobalProps,
-    HTMLAttributes<'span'>,
-    HTMLAttributes<'a'> {
+interface Props extends HTMLAttributes<'p'>, TaglineSchema {
   as?: HTMLTag
-  icon?: ComponentProps<typeof Icon>['name']
-  avatar?: ComponentProps<typeof Avatar>['src']
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-  text?: string | undefined
-  variant?: 'secondary' | 'outline' | 'link' | undefined
+  muted?: boolean | undefined
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined
 }
 
-const {
-  slug,
-  href = slug === 'index' ? '/' : slug ? `/${slug}/` : undefined,
-  text = slug ? (await getEntry('pages', slug)).data.title : undefined,
-  as = href ? 'a' : 'a',
-  target = href?.toString().startsWith('http') ? '_blank' : undefined,
-  icon,
-  ...rest
-} = Astro.props
+const { as = 'p', text, ...rest } = Astro.props
 ---
 
 <Element
-  class:list={'tagline'}
-  {href}
+  class:list="text"
   {as}
-  {target}
   {...rest}
 >
-  <slot />
-  <Icon name={icon} />
   <Fragment set:html={text} />
+  <slot />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .tagline {
-      @apply text-primary font-semibold;
+      @apply font-semibold leading-tight text-primary;
+
+      &.size-xs {
+        @apply text-xs;
+      }
 
       &.size-sm {
         @apply text-sm;
       }
 
+      &.size-md {
+        @apply text-base;
+      }
+
       &.size-lg {
         @apply text-lg;
       }
+
+      &.size-xl {
+        @apply text-xl;
+      }
     }
   }
 </style>

package/src/components/Toc.astro

@@ -45,11 +45,20 @@ const links = filteredHeadings?.map((button: any) => ({
 <style is:global>
   @layer fulldev {
     .toc {
-      @apply sticky bottom-0 z-10 -mt-14 hidden w-52 shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto py-14 md:flex;
+      @apply sticky bottom-0 z-10 hidden shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto py-8 md:flex;
       @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
-      top: var(--header-height, 0px);
-      max-height: calc(100vh - var(--header-height, 0px));
+      --headers: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
+      top: var(--headers);
+      width: var(--toc-width);
+      max-height: calc(100vh - var(--headers));
+
+      &,
+      & ~ * {
+        @media (min-width: 768px) {
+          --toc-width: 12rem;
+        }
+      }
 
       .depth-3 {
         @apply pl-3;

package/src/components/_Author.astro

@@ -0,0 +1,90 @@
+<!-- ---
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
+import type { RatingSchema } from 'fulldev-ui/schemas/components/rating'
+import Avatar from './Avatar.astro'
+
+interface Props extends HTMLAttributes<'div'>, RatingSchema {}
+
+const { size = 'md', score, text, avatars, avatar, ...rest } = Astro.props
+
+const getIcon = (count: number) => {
+  if (!score) return
+  const difference = score - count
+  if (difference >= -0.25) return 'star-filled'
+  if (difference >= -0.75) return 'star-half-filled'
+  return 'star'
+}
+---
+
+<Element
+  class:list="author"
+  {size}
+  {...rest}
+>
+  <Avatar {...avatar} />
+  {avatars?.map((avatar) => <Avatar {...avatar} />)}
+  <Element class:list="rating-content">
+    <Element
+      class:list="rating-stars"
+      {...rest}
+    >
+      {
+        score &&
+          [1, 2, 3, 4, 5].map((count) => (
+            <Icon
+              name={getIcon(count)}
+              {size}
+            />
+          ))
+      }
+    </Element>
+    <Fragment set:html={text} />
+    <slot />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .rating {
+      @apply flex items-center gap-3;
+
+      .avatar + .avatar {
+        @apply -ml-3;
+      }
+
+      .rating-content {
+        @apply flex flex-col gap-1 text-muted-foreground;
+      }
+
+      .rating-stars {
+        @apply flex gap-1 text-primary;
+      }
+
+      &.size-sm {
+        @apply gap-2;
+
+        .rating-content {
+          @apply text-xs leading-none;
+        }
+      }
+
+      &.size-md {
+        @apply gap-2.5;
+
+        .rating-content {
+          @apply text-sm leading-none;
+        }
+      }
+
+      &.size-lg {
+        @apply gap-3;
+
+        .rating-content {
+          @apply text-base leading-none;
+        }
+      }
+    }
+  }
+</style> -->