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

package/src/components/Prose.astro

@@ -1,168 +1,85 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Button from 'fulldev-ui/components/Button.astro'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Lead from 'fulldev-ui/components/Lead.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Toc from 'fulldev-ui/components/Toc.astro'
-import { crush } from 'radash'
-import type Sidebar from './Sidebar.astro'
 
 interface Props extends HTMLAttributes<'div'> {
-  as?: HTMLTag | undefined
-  render?: any
-  sidebar?: ComponentProps<typeof Sidebar> | undefined
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  toc?: boolean | ComponentProps<typeof Toc>['heading'] | undefined
-  tagline?: ComponentProps<typeof Tagline>['text'] | undefined
-  heading?: ComponentProps<typeof Heading>['text'] | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  lead?: ComponentProps<typeof Lead>['text'] | undefined
+  as?: HTMLTag
 }
 
-const {
-  toc = false,
-  slug,
-  sidebar,
-  render,
-  tagline,
-  heading,
-  lead,
-  image,
-  ...rest
-} = Astro.props
-
-const Content = render && (await render())?.Content
-
-const flatMenu = crush(sidebar?.menu ?? {})
-const slugs = Object.entries(flatMenu)
-  .map(([key, value]) => (key.endsWith('.slug') ? value : null))
-  .filter(Boolean)
-const slugIndex = slugs.findIndex((val) => val === slug)
-
-const prevSlug = slugs[slugIndex - 1]
-const nextSlug = slugs[slugIndex + 1]
+const { ...rest } = Astro.props
 ---
 
 <Element
   class:list="prose"
   {...rest}
 >
-  <Element class:list="prose-container">
-    <Element class:list="prose-content">
-      <Tagline text={tagline} />
-      <Heading
-        as="h1"
-        level={2}
-        text={heading}
-      />
-      <Lead text={lead} />
-      <Image {...image} />
-      {Content && <Content />}
-      <slot />
-      <Element class:list="prose-footer">
-        <Button
-          class:list="prose-prev"
-          icon={prevSlug && 'arrow-left'}
-          slug={prevSlug}
-          variant="secondary"
-        />
-        <Button
-          class:list="prose-next"
-          icon={nextSlug && 'arrow-right'}
-          slug={nextSlug}
-          variant="secondary"
-          reverse
-        />
-      </Element>
-    </Element>
-    <Toc
-      if={toc}
-      heading={typeof toc === 'string' ? toc : undefined}
-      {render}
-    />
-  </Element>
+  <slot />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .prose {
-      @apply relative items-start py-28 first:pt-14;
+      @apply relative w-full max-w-screen-md;
 
-      .prose-container {
-        @apply container flex h-full w-full flex-grow items-start justify-evenly gap-14 gap-x-gutter;
+      > * {
+        @apply mt-6;
       }
 
-      .prose-content {
-        @apply w-full max-w-screen-md;
-
-        > * {
-          @apply mt-6 first:mt-0;
-        }
-
-        p {
-          @apply mt-4 first:mt-0;
-        }
+      p {
+        @apply mt-4;
+      }
 
-        code:not(.astro-code code) {
-          @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-medium;
-        }
+      code:not(.astro-code code) {
+        @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-medium;
+      }
 
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-          @apply mt-8 scroll-m-20 font-semibold first:mt-0;
-
-          code {
-            font-size: inherit !important;
-          }
-        }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        @apply scroll-m-20 font-bold;
 
-        > h1 {
-          @apply text-4xl font-extrabold;
+        code {
+          font-size: inherit !important;
         }
+      }
 
-        > h2 {
-          @apply text-2xl;
-        }
+      > h1 {
+        @apply text-4xl;
+      }
 
-        > h3 {
-          @apply text-xl;
-        }
+      > h2 {
+        @apply mt-10 text-2xl;
+      }
 
-        > h4 {
-          @apply text-lg;
-        }
+      > h3 {
+        @apply mt-8 text-xl;
+      }
 
-        > h5 {
-          @apply text-base;
-        }
+      > h4 {
+        @apply text-lg;
+      }
 
-        > h6 {
-          @apply text-sm;
-        }
+      > h5 {
+        @apply text-base;
+      }
 
-        > aside {
-          @apply mt-6 rounded-md border border-destructive p-4 text-destructive first:mt-0;
-        }
+      > h6 {
+        @apply text-sm;
       }
 
-      .prose-footer {
-        @apply mt-14 flex items-center;
+      > aside {
+        @apply rounded-md border border-destructive p-4 text-destructive;
+      }
 
-        .prose-next {
-          @apply ml-auto;
-        }
+      img {
+        @apply my-12 rounded-lg;
       }
 
-      .toc {
-        @apply order-last;
+      > *:first-child {
+        @apply mt-0;
       }
     }
   }

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,20 +55,21 @@ 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">
         {
           entries.map(({ collection, slug, data }) => (
             <Element
               as="a"
-              href={getHref(collection, slug)}
+              href={getHref(slug)}
               class="search-item hide"
             >
               <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-20 first:pt-20 lg:py-32;
+    }
+  }
+</style>

package/src/components/Sidebar.astro

@@ -1,93 +1,42 @@
 ---
-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 Heading from './Heading.astro'
-import Toc from './Toc.astro'
+import type { SidebarSchema } from 'fulldev-ui/schemas/components/sidebar'
+import Menus from './Menus.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 { menus, ...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>
+  <Menus
+    size="sm"
+    menu={rest}
+    {menus}
+  />
 </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 h-full max-w-[75vw] flex-col items-start gap-8 overflow-y-auto border-r bg-background py-8 pr-8 lg:flex;
+      @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
-      --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));
+      height: calc(100vh - var(--headers));
 
       &,
       & ~ * {
-        --sidebar-width: 13rem;
-      }
-
-      .sidebar-header {
-        @apply sticky flex h-14 w-full items-center px-gutter py-6;
-      }
-
-      .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;
+        @media (min-width: 1024px) {
+          --sidebar-width: 14rem;
+        }
       }
     }
   }

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/Stack.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="stack"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .stack {
+      @apply relative grid w-full auto-cols-fr items-start gap-x-16 gap-y-8 lg:grid-flow-col;
+    }
+  }
+</style>

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="tagline"
   {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>