fulldev-ui 0.6.5 → 0.7.0-beta.1

package/src/blocks/ProductGroup1.astro

@@ -0,0 +1,82 @@
+---
+import Box from 'fulldev-ui/components/Box.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Grid from 'fulldev-ui/components/Grid.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Price from 'fulldev-ui/components/Price.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+// import Sort from 'fulldev-ui/components/Sort.vue'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { ProductGroupSchema } from 'fulldev-ui/schemas/blocks/productGroup'
+
+interface Props extends ProductGroupSchema {}
+
+const { title, description, products } = Astro.props
+---
+
+<Section class="pt-0">
+  <Container class="flex flex-col gap-12">
+    <Box class="border-b py-12">
+      <Writeup
+        align="start"
+        size="sm"
+      >
+        <Box as="h1">{title}</Box>
+        <Box as="p">{description}</Box>
+      </Writeup>
+    </Box>
+    <!-- <Box class="flex shrink items-center justify-between gap-4 border-t py-4">
+          <Box
+            as="p"
+            class="text-sm text-muted-foreground"
+          >
+            {products?.length} producten
+          </Box>
+          <Sort
+            client:load
+            options={[
+              { label: 'Aanbevolen', value: 'recommended' },
+              { label: 'Prijs (laag - hoog)', value: 'price-low' },
+              { label: 'Prijs (hoog - laag)', value: 'price-high' },
+            ]}
+          />
+        </Box> -->
+    <Grid
+      length={products?.length}
+      data-sort
+    >
+      {
+        products?.map(({ href, images, title, price }, i) => (
+          <Box
+            data-sort-recommended={i}
+            data-sort-price-low={price}
+            data-sort-price-high={(price || 0) * -1}
+            class="group flex flex-col gap-4"
+            {href}
+          >
+            <Image
+              class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-border transition-opacity group-hover:opacity-75"
+              {...images?.[0]}
+            />
+            <Box class="flex flex-col gap-1">
+              <Box
+                as="h3"
+                class="text-sm font-medium"
+              >
+                {title}
+              </Box>
+              <Price
+                class="text-sm text-muted-foreground"
+                amount={price}
+              />
+            </Box>
+          </Box>
+        ))
+      }
+    </Grid>
+    <Prose>
+      <slot />
+    </Prose>
+  </Container>
+</Section>

package/src/blocks/ProductList1.astro

@@ -0,0 +1,60 @@
+---
+import Abstract from 'fulldev-ui/components/Abstract.astro'
+import Box from 'fulldev-ui/components/Box.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Grid from 'fulldev-ui/components/Grid.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Price from 'fulldev-ui/components/Price.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { ProductListSchema } from 'fulldev-ui/schemas/blocks/productList'
+
+interface Props extends ProductListSchema {}
+
+const { writeup, button, products } = Astro.props
+---
+
+<Section class="products products-1">
+  <Container class="flex flex-col items-start gap-8">
+    <Writeup class="flex w-full items-center justify-between gap-8">
+      <Writeup size="sm">
+        <Fragment set:html={writeup} />
+        <slot />
+      </Writeup>
+      <Button
+        class="max-lg:hidden"
+        variant="link"
+        size="sm"
+        {...button}
+      />
+    </Writeup>
+    <Grid
+      length={products?.length}
+      class="gap-4"
+    >
+      {
+        products?.map(({ href, title, images, price }) => (
+          <Box
+            class="group flex flex-col gap-3"
+            {href}
+          >
+            <Image
+              class="aspect-square rounded-lg bg-muted object-contain transition-opacity group-hover:opacity-75"
+              {...images?.[0]}
+            />
+            <Abstract>
+              <Box as="h3">{title}</Box>
+              <Price amount={price} />
+            </Abstract>
+          </Box>
+        ))
+      }
+    </Grid>
+    <Button
+      class="hidden"
+      variant="secondary"
+      {...button}
+    />
+  </Container>
+</Section>

package/src/blocks/ProductSingle1.astro

@@ -0,0 +1,65 @@
+---
+import Box from 'fulldev-ui/components/Box.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Gallery from 'fulldev-ui/components/Gallery.vue'
+import Image from 'fulldev-ui/components/Image.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Price from 'fulldev-ui/components/Price.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Split from 'fulldev-ui/components/Split.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { ProductSingleSchema } from 'fulldev-ui/schemas/blocks/productSingle'
+
+interface Props extends ProductSingleSchema {}
+
+const { title, description, list, images, price } = Astro.props
+---
+
+<Section class="pt-4 lg:pt-16">
+  <Container>
+    <Split>
+      <Box class="flex flex-col gap-16">
+        <Gallery client:load>
+          {
+            images?.map((image) => (
+              <Image
+                class="aspect-square h-full w-full object-contain"
+                src={image.src}
+                alt={image.alt}
+              />
+            ))
+          }
+        </Gallery>
+        <Prose class="max-lg:hidden">
+          <slot />
+        </Prose>
+      </Box>
+      <Writeup
+        size="sm"
+        class="lg:pl-8"
+      >
+        <Box as="h1">{title}</Box>
+        <Box as="p">{description}</Box>
+        <Price
+          class="mt-4 text-xl font-medium"
+          amount={price}
+        />
+        <Button
+          class="mt-4"
+          size="lg"
+          text="In winkelwagen"
+          icon="shopping-cart"
+        />
+        <List
+          class="pt-4 text-muted-foreground"
+          items={list}
+        />
+      </Writeup>
+      <Prose class="lg:hidden">
+        <slot />
+      </Prose>
+    </Split>
+  </Container>
+</Section>

package/src/blocks/Reviews1.astro

@@ -1,81 +1,37 @@
 ---
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Proof from 'fulldev-ui/components/Proof.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/block'
-import Card from 'fulldev-ui/structures/Card.astro'
-import Container from 'fulldev-ui/structures/Container.astro'
-import Masonry from 'fulldev-ui/structures/Masonry.astro'
-import Section from 'fulldev-ui/structures/Section.astro'
-import Writeup from 'fulldev-ui/structures/Writeup.astro'
+import Abstract from 'fulldev-ui/components/Abstract.astro'
+import Box from 'fulldev-ui/components/Box.astro'
+import Card from 'fulldev-ui/components/Card.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Masonry from 'fulldev-ui/components/Masonry.astro'
+import Rating from 'fulldev-ui/components/Rating.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { ReviewsSchema } from 'fulldev-ui/schemas/blocks/reviews'
 
-interface Props extends BlockSchema {}
+interface Props extends ReviewsSchema {}
 
-const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
+const { writeup, reviews } = Astro.props
 ---
 
-<Section
-  class:list="reviews-1"
-  {...rest}
->
-  <Container>
+<Section class="reviews reviews-1">
+  <Container class="flex flex-col gap-12">
     <Writeup align="center">
-      <Tagline
-        size="sm"
-        text={tagline}
-      />
-      <Heading
-        size="3xl"
-        text={heading}
-        {depth}
-      />
-      <Paragraph text={paragraph} />
+      <Fragment set:html={writeup} />
+      <slot />
     </Writeup>
-    <Masonry>
+    <Masonry length={reviews?.length}>
       {
-        cards?.map(({ tagline, avatar, rating, heading, paragraph }) => (
-          <Card class="reviews-1-card">
-            <Proof
-              text={tagline}
-              {rating}
-              {avatar}
-            />
-            <Heading
-              depth={(depth + 1) as 3}
-              as="h3"
-              size="md"
-              text={heading}
-            />
-            <Paragraph
-              size="sm"
-              text={paragraph}
-            />
+        reviews?.map(({ rating, title, description }) => (
+          <Card class="flex flex-col">
+            <Abstract size="lg">
+              <Rating score={rating} />
+              <Box as="h3">{title}</Box>
+              <Box as="p">{description}</Box>
+            </Abstract>
           </Card>
         ))
       }
     </Masonry>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .reviews-1 {
-      .container {
-        @apply flex flex-col items-center gap-16;
-      }
-
-      .reviews-1-cards {
-        @apply grid grid-cols-1 gap-6 lg:grid-cols-3;
-      }
-
-      .reviews-1-card {
-        @apply flex flex-col gap-3;
-      }
-
-      .icon {
-        @apply text-primary;
-      }
-    }
-  }
-</style>

package/src/components/Abstract.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Box from './Box.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  size?: 'sm' | 'default' | 'lg' | 'xl'
+  align?: 'start' | 'center' | 'end'
+}
+
+const { size = 'default', align = 'start', class: className, ...rest } = Astro.props
+---
+
+<Box
+  class:list={[
+    'abstract',
+    'flex-flex-col w-full max-w-lg',
+    'first:child:mt-0',
+    'headings:text-pretty headings:font-medium headings:tracking-tight',
+    'p:max-w-[90%] p:text-pretty p:leading-[1.8] p:text-muted-foreground',
+    {
+      // size
+      'text-sm child:mt-1 headings:text-sm': size === 'sm',
+      'text-sm child:mt-1 headings:text-base': size === 'default',
+      'text-base child:mt-1.5 headings:mt-3 headings:text-lg': size === 'lg',
+      'text-base child:mt-2.5 headings:mt-5 headings:text-xl': size === 'xl',
+      // align
+      'mr-auto items-start text-left child:mr-auto': align === 'start',
+      'mx-auto items-center text-center child:mx-auto': align === 'center',
+      'ml-auto items-end text-right child:ml-auto': align === 'end',
+    },
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</Box>

package/src/components/Accordion.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'fulldev-ui/components/ui/accordion'
+
+interface Props {
+  items?: {
+    title?: string
+    description?: string
+  }[]
+}
+
+const { items } = defineProps<Props>()
+</script>
+
+<template v-if="items">
+  <Accordion
+    type="single"
+    class="w-full"
+    collapsible
+  >
+    <AccordionItem
+      v-for="item in items"
+      :key="item.title"
+      :value="item.title ?? ''"
+    >
+      <AccordionTrigger>{{ item.title }}</AccordionTrigger>
+      <AccordionContent>
+        {{ item.description }}
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+</template>

package/src/components/Avatar.astro

@@ -1,40 +1,31 @@
 ---
-import type { ComponentProps } from 'astro/types'
-import Image from 'fulldev-ui/components/Image.astro'
+import type { HTMLAttributes } from 'astro/types'
+import { Image } from 'astro:assets'
+import { avatarVariant, type AvatarVariants } from 'fulldev-ui/components/ui/avatar'
+import Box from './Box.astro'
 
-interface Props extends ComponentProps<typeof Image> {
-  size?: 'sm' | 'md' | 'lg' | undefined
+interface Props extends HTMLAttributes<'span'>, AvatarVariants {
+  src?: string
+  alt?: string
 }
 
-const { size = 'md', ...rest } = Astro.props
+const { class: className, size, shape, alt = '', src, ...rest } = Astro.props
 ---
 
-<Image
-  class:list={[
-    'avatar',
-    {
-      [`size-${size}`]: size,
-    },
-  ]}
+<Box
+  class:list={['avatar', avatarVariant({ size, shape }), className]}
+  as="span"
   {...rest}
-/>
-
-<style is:global>
-  @layer fulldev {
-    .avatar {
-      @apply !rounded-full object-cover;
-
-      &.size-sm {
-        @apply h-9 w-9;
-      }
-
-      &.size-md {
-        @apply h-10 w-10;
-      }
-
-      &.size-lg {
-        @apply h-11 w-11;
-      }
-    }
+>
+  {
+    src && (
+      <Image
+        class:list="h-full w-full object-cover"
+        width={40}
+        height={40}
+        {alt}
+        {src}
+      />
+    )
   }
-</style>
+</Box>

package/src/components/Badge.astro

@@ -1,69 +1,21 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
+import type { BadgeVariants } from 'fulldev-ui/components/ui/badge'
+import { badgeVariants } from 'fulldev-ui/components/ui/badge/index.ts'
+import Box from './Box.astro'
 
-interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
-  variant?: 'primary' | 'secondary' | 'outline' | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-  text?: string | undefined
-  icon?: string | undefined
-  href?: string | undefined
+interface Props extends HTMLAttributes<'span'>, BadgeVariants {
+  text?: string
 }
 
-const {
-  variant = 'outline',
-  size = 'md',
-  text,
-  icon,
-  href,
-  target = href?.startsWith('http') ? '_blank' : undefined,
-  ...rest
-} = Astro.props
+const { variant, text, class: className, ...rest } = Astro.props
 ---
 
-<Element
-  class:list="badge"
-  as={href ? 'a' : 'div'}
-  {variant}
-  {size}
-  {href}
-  {target}
+<Box
+  class:list={['badge', badgeVariants({ variant }), className]}
+  as="span"
   {...rest}
 >
   <Fragment set:html={text} />
   <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .badge {
-      @apply inline-flex h-6 items-center justify-center whitespace-nowrap rounded-full px-2.5 text-xs font-medium leading-none ring-offset-background;
-      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
-      @apply disabled:pointer-events-none disabled:opacity-50;
-
-      &.size-sm {
-        @apply h-6 min-w-6 px-2;
-      }
-
-      &.size-md {
-        @apply h-7 min-w-7 px-3;
-      }
-
-      &.size-lg {
-        @apply h-8 min-w-8 px-3.5;
-      }
-
-      &.variant-primary {
-        @apply bg-primary text-primary-foreground;
-      }
-
-      &.variant-secondary {
-        @apply bg-secondary text-secondary-foreground;
-      }
-
-      &.variant-outline {
-        @apply border border-input text-accent-foreground;
-      }
-    }
-  }
-</style>
+</Box>

package/src/components/Box.astro

@@ -0,0 +1,28 @@
+---
+import { cn } from 'fulldev-ui/lib/utils'
+
+const {
+  href,
+  as: As = href ? 'a' : 'div',
+  show = 'content',
+  target = href?.startsWith('http') ? '_blank' : undefined,
+  class: className,
+  ...rest
+} = Astro.props
+
+const slot = await Astro.slots.render('default')
+const render = show === 'content' ? slot?.trim().length > 0 : show
+---
+
+{
+  render && (
+    <As
+      class:list={cn('box', className)}
+      {href}
+      {target}
+      {...rest}
+    >
+      <Fragment set:html={slot} />
+    </As>
+  )
+}