fulldev-ui 0.5.0-beta.8 → 0.6.0-beta.0

package/src/components/Links.astro

@@ -0,0 +1,42 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Link from './Link.astro'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  variant?: ComponentProps<typeof Link>['variant']
+  links?: ComponentProps<typeof Link>[] | undefined
+  direction?: 'row' | 'column' | undefined
+}
+
+const { variant = 'muted', links, size, ...rest } = Astro.props
+---
+
+<Element
+  class:list="links"
+  {...rest}
+>
+  {
+    links?.map((link) => (
+      <Link
+        {variant}
+        {size}
+        {...link}
+      />
+    ))
+  }
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .links {
+      @apply flex items-center justify-stretch gap-x-6 gap-y-2;
+
+      &.direction-column {
+        @apply flex-col items-start;
+      }
+    }
+  }
+</style>

package/src/components/List.astro

@@ -7,8 +7,8 @@ interface Props
   extends GlobalProps,
     HTMLAttributes<'ul'>,
     HTMLAttributes<'ol'> {
+  as?: 'ul' | 'ol' | undefined
   items?: string[] | undefined
-  as?: 'ul' | 'ol'
 }
 
 const { as = 'ul', items, ...rest } = Astro.props
@@ -19,26 +19,51 @@ const { as = 'ul', items, ...rest } = Astro.props
   {as}
   {...rest}
 >
-  {items?.map((item) => <li set:html={item} />)}
+  {
+    items?.map((item) => (
+      <Element
+        as="li"
+        set:html={item}
+      />
+    ))
+  }
+  <slot />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
-    .list {
-      display: flex;
-      flex-direction: column;
-      padding-left: var(--space-5);
-      color: var(--color-11);
-      font-size: var(--text-2);
-      line-height: 1.625;
-      list-style-type: disc;
+    .list,
+    .prose :is(ul, ol) {
+      @apply ml-6;
+
+      &:is(ul) {
+        @apply list-disc;
+      }
+
+      ul {
+        @apply ml-6 mt-2 list-disc;
+      }
+
+      &:is(ol) {
+        @apply list-decimal;
+      }
+
+      ol {
+        @apply ml-6 mt-2 list-decimal;
+      }
 
       li {
-        align-items: center;
-        max-width: calc(var(--space-4) * 44);
-        color: var(--color-11);
-        font-size: var(--text-2);
-        line-height: 1.625;
+        @apply mt-2 first:mt-0;
+      }
+
+      &.size-sm,
+      &:where(.size-sm &) {
+        @apply text-sm;
+      }
+
+      &.size-lg,
+      &:where(.size-lg &) {
+        @apply text-lg;
       }
     }
   }

package/src/components/LocaleSwitcher.astro

@@ -13,7 +13,7 @@ import Select from 'fulldev-ui/components/Select.astro'
   )
 }
 
-<script>
+<!-- <script>
   const select = document.querySelector('.theme-switcher select')
   select?.addEventListener('change', (event) => {
     const target = event.target as HTMLSelectElement
@@ -22,4 +22,4 @@ import Select from 'fulldev-ui/components/Select.astro'
     currentUrl.pathname = '/' + selectedLocale + currentUrl.pathname
     window.location.href = currentUrl.toString()
   })
-</script>
+</script> -->

package/src/components/Logo.astro

@@ -0,0 +1,45 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+
+interface Props extends ComponentProps<typeof Image> {
+  company?: string | undefined
+}
+
+const { size = 'md', company, ...rest } = Astro.props as Props
+---
+
+<Element
+  class:list="logo"
+  as="a"
+  href="/"
+  {size}
+>
+  <Image {...rest} />
+  <Fragment set:html={company} />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .logo {
+      @apply inline-flex grow-0 items-center justify-start font-semibold;
+
+      .image {
+        @apply block h-full w-auto object-contain;
+      }
+
+      &.size-sm {
+        @apply h-6 gap-2 text-base;
+      }
+
+      &.size-md {
+        @apply h-7 gap-2.5 text-lg;
+      }
+
+      &.size-lg {
+        @apply h-8 gap-3 text-xl;
+      }
+    }
+  }
+</style>

package/src/components/Menu.astro

@@ -1,55 +1,59 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import type Link from './Link.astro'
+import Links from './Links.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  direction?: 'row' | 'column'
   groups?:
     | {
         heading?: ComponentProps<typeof Heading>['text']
-        buttons?: ComponentProps<typeof Button>[]
+        links?: ComponentProps<typeof Link>[]
       }[]
     | undefined
 }
 
-const { groups, ...rest } = Astro.props
+const { direction = 'column', groups, size = 'md', ...rest } = Astro.props
 ---
 
 <Element
   class:list="menu"
+  {direction}
+  {size}
   {...rest}
 >
   {
-    groups?.map(({ heading, buttons }) => (
+    groups?.map(({ heading, links }) => (
       <Element class:list="menu-group">
         <Heading
           level={6}
           text={heading}
+          {size}
+        />
+        <Links
+          direction="column"
+          {links}
+          {size}
         />
-        {buttons?.map((button) => (
-          <Button
-            variant="link"
-            {...button}
-          />
-        ))}
       </Element>
     ))
   }
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .menu {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-5);
+      @apply flex flex-col gap-6;
 
       .menu-group {
-        display: flex;
-        flex-direction: column;
-        gap: var(--space-4);
+        @apply flex flex-col gap-3;
+      }
+
+      &.direction-row {
+        @apply flex-row flex-wrap gap-12;
       }
     }
   }

package/src/components/Paragraph.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'p'> {
+  as?: HTMLTag
+  text?: string | undefined
+}
+
+const { as = 'p', text, ...rest } = Astro.props
+---
+
+<Element
+  class:list="paragraph"
+  {as}
+  {...rest}
+>
+  <slot />
+  <Fragment set:html={text} />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .paragraph,
+    .prose-content p {
+      @apply leading-7 text-foreground;
+
+      &.size-sm {
+        @apply text-sm;
+      }
+
+      &.size-lg {
+        @apply text-lg;
+      }
+    }
+  }
+</style>

package/src/components/Price.astro

@@ -21,7 +21,7 @@ const { value, ...rest } = Astro.props
   {value && <Fragment set:html={formatPrice(value)} />}
 </Element>
 
-<style is:global lang="scss">
+<style is:global >
   @layer fulldev {
     .price {
       margin: 0;

package/src/components/Prose.astro

@@ -0,0 +1,169 @@
+---
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Button from 'fulldev-ui/components/Button.astro'
+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: CollectionEntry<'pages'>['render']
+  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
+}
+
+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]
+---
+
+<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>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .prose {
+      @apply relative items-start py-28 first:pt-14;
+
+      .prose-container {
+        @apply container flex h-full w-full flex-grow items-start justify-evenly gap-14 gap-x-gutter;
+      }
+
+      .prose-content {
+        @apply w-full max-w-screen-md;
+
+        > * {
+          @apply mt-6 first:mt-0;
+        }
+
+        p {
+          @apply mt-4 first:mt-0;
+        }
+
+        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 {
+          @apply text-4xl font-extrabold;
+        }
+
+        > h2 {
+          @apply text-2xl;
+        }
+
+        > h3 {
+          @apply text-xl;
+        }
+
+        > h4 {
+          @apply text-lg;
+        }
+
+        > h5 {
+          @apply text-base;
+        }
+
+        > h6 {
+          @apply text-sm;
+        }
+
+        > aside {
+          @apply mt-6 rounded-md border border-destructive p-4 text-destructive first:mt-0;
+        }
+      }
+
+      .prose-footer {
+        @apply mt-14 flex items-center;
+
+        .prose-next {
+          @apply ml-auto;
+        }
+      }
+
+      .toc {
+        @apply order-last;
+      }
+    }
+  }
+</style>

package/src/components/Rating.astro

@@ -1,20 +1,27 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
-import Avatar from 'fulldev-ui/components/Avatar.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import Label from 'fulldev-ui/components/Label.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Avatars from './Avatars.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
   align?: 'start' | 'center' | 'end' | undefined
   value?: number | undefined
-  label?: string | undefined
-  avatars?: string[] | undefined
-  avatar?: string | undefined
+  text?: string | undefined
+  avatars?: any
+  avatar?: any
 }
 
-const { value, label, avatars, avatar, align, ...rest } = Astro.props
+const {
+  size = 'md',
+  value,
+  text,
+  avatars,
+  avatar,
+  align,
+  ...rest
+} = Astro.props
 
 const getIcon = (count: number) => {
   if (!value) return
@@ -23,69 +30,74 @@ const getIcon = (count: number) => {
   if (difference >= -0.75) return 'star-half-filled'
   return 'star'
 }
-
-const hasAvatars = avatars && avatars?.length > 0
 ---
 
 <Element
   class:list="rating"
+  {size}
   {...rest}
 >
-  {
-    [avatar, ...(avatars ?? [])]
-      ?.filter(Boolean)
-      ?.map((avatar) => <Avatar src={avatar} />)
-  }
-  <Element
-    class:list="column"
-    align={!hasAvatars ? align : undefined}
-  >
+  <Avatars
+    {size}
+    {avatars}
+    {avatar}
+  />
+  <Element class:list="rating-content">
     <Element
-      class:list={'stars'}
+      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>
-    <Label
-      color="base"
-      text={label}
-    />
+    <Fragment set:html={text} />
+    <slot />
   </Element>
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .rating {
-      display: flex;
-      align-items: center;
-      gap: var(--space-4);
+      @apply flex items-center gap-3;
 
-      .column {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
+      .rating-content {
+        @apply flex flex-col gap-1 text-muted-foreground;
       }
 
-      .avatar + .avatar {
-        margin-left: calc(var(--space-4) * -2.5);
+      .rating-stars {
+        @apply flex gap-1 text-primary;
       }
 
-      .label {
-        margin-top: var(--space-2) !important;
+      &.size-sm {
+        @apply gap-2;
+
+        .rating-content {
+          @apply text-xs leading-none;
+        }
       }
 
-      .stars {
-        display: flex;
-        align-items: center;
-        gap: var(--space-2);
+      &.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;
+        }
       }
     }
   }

package/src/components/Search.astro

@@ -12,7 +12,7 @@ const { variant = 'secondary', ...rest } = Astro.props
   {...rest}
 />
 
-<style is:global lang="scss">
+<style is:global >
   :root {
     --pagefind-ui-primary: var(--brand-11);
     --pagefind-ui-text: var(--base-12);