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

package/src/blocks/Intro1.astro

@@ -0,0 +1,56 @@
+---
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { IntroSchema } from 'fulldev-ui/schemas/blocks/intro.ts'
+import type { ComponentProps } from 'svelte'
+
+interface Props extends ComponentProps<typeof Section>, IntroSchema {}
+
+const { tagline, heading, paragraph, buttons, ...rest } = Astro.props
+---
+
+<Section
+  class:list="intro-1"
+  {...rest}
+>
+  <Container>
+    <Element class="intro-1-content">
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        as="h1"
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph
+        size="md"
+        text={paragraph}
+      />
+    </Element>
+    <Buttons
+      size="sm"
+      {buttons}
+    />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .intro-1 {
+      .container {
+        @apply flex flex-col items-center gap-8 text-center;
+      }
+
+      .intro-1-content {
+        @apply flex max-w-screen-md flex-col items-center gap-4 text-center;
+      }
+    }
+  }
+</style>

package/src/blocks/Products1.astro

@@ -0,0 +1,90 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { getEntries } from 'astro:content'
+import Button from 'fulldev-ui/components/Button.astro'
+import Card from 'fulldev-ui/components/Card.astro'
+import Container from 'fulldev-ui/components/Container.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 Price from 'fulldev-ui/components/Price.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import type { ProductsSchema } from 'fulldev-ui/schemas/blocks/products'
+import { getHref } from 'fulldev-ui/utils/getHref'
+
+interface Props extends ComponentProps<typeof Section>, ProductsSchema {}
+
+const { heading, button, products, ...rest } = Astro.props
+
+const entries = products && (await getEntries(products))
+---
+
+<Section
+  class:list="products-1"
+  {...rest}
+>
+  <Container>
+    <Element class:list="products-1-segment">
+      <Heading
+        size="2xl"
+        text={heading}
+      />
+      <Button
+        variant="ghost"
+        size="sm"
+        {...button}
+      />
+    </Element>
+    <Element class:list="products-1-cards">
+      {
+        entries?.map(({ collection, slug, data: { images, title, price } }) => (
+          <Card href={getHref(collection, slug)}>
+            <Image {...images?.[0]} />
+            <Element class:list="products-1-card-content">
+              <Heading
+                as="h3"
+                size="md"
+                text={title}
+              />
+              <Price amount={price} />
+            </Element>
+          </Card>
+        ))
+      }
+    </Element>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .products-1 {
+      .container {
+        @apply flex flex-col gap-8;
+      }
+
+      .products-1-segment {
+        @apply flex items-center justify-between gap-8;
+      }
+
+      .products-1-cards {
+        @apply grid grid-cols-2 items-start gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6;
+      }
+
+      .card {
+        @apply relative flex flex-col gap-3;
+
+        &:hover > .image {
+          @apply opacity-75 transition-opacity;
+        }
+
+        .image {
+          @apply rounded-md border;
+        }
+      }
+
+      .products-1-card-content {
+        @apply flex h-full flex-col gap-2;
+      }
+    }
+  }
+</style>

package/src/blocks/{Hero.astro → _Hero.astro}

@@ -1,12 +1,13 @@
----
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+<!-- ---
+import type { ComponentProps,HTMLAttributes,HTMLTag } from 'astro/types'
 import Badge from 'fulldev-ui/components/Badge.astro'
 import Buttons from 'fulldev-ui/components/Buttons.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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Paragraph,{
+default as Lead,
+} from 'fulldev-ui/components/Paragraph.astro'
 import Rating from 'fulldev-ui/components/Rating.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 
@@ -69,7 +70,7 @@ const {
           {level}
           {size}
         />
-        <Lead
+        <Paragraph
           text={lead}
           {size}
         />
@@ -241,4 +242,4 @@ const {
       }
     }
   }
-</style>
+</style> -->

package/src/components/Badge.astro

@@ -1,31 +1,24 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
+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 { BadgeSchema } from 'fulldev-ui/schemas/components/badge'
 
 interface Props
-  extends GlobalProps,
-    HTMLAttributes<'div'>,
-    HTMLAttributes<'a'> {
+  extends HTMLAttributes<'button'>,
+    Omit<HTMLAttributes<'a'>, 'href' | 'target'>,
+    BadgeSchema {
   as?: HTMLTag
-  href?: string | null | undefined
-  icon?: ComponentProps<typeof Icon>['name']
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
-  text?: string | undefined
+  type?: HTMLAttributes<'button'>['type'] & HTMLAttributes<'a'>['type']
+  reverse?: boolean | undefined
 }
 
 const {
-  slug,
-  href = slug === 'index' ? '/' : slug ? `/${slug}/` : undefined,
-  text = slug ? (await getEntry('pages', slug)).data.title : undefined,
-  as = href ? 'a' : 'div',
-  target = href?.startsWith('http') ? '_blank' : undefined,
+  href,
+  as = href ? 'a' : 'button',
   variant = 'outline',
   size = 'md',
+  text,
   icon,
   ...rest
 } = Astro.props
@@ -35,7 +28,6 @@ const {
   class:list="badge"
   {as}
   {href}
-  {target}
   {variant}
   {size}
   {...rest}

package/src/components/Banner.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'header'> {
+  as?: HTMLTag
+}
+
+const { as = 'header', ...rest } = Astro.props
+---
+
+<Element
+  class:list="banner"
+  {as}
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .banner {
+      @apply relative flex w-full items-center bg-primary py-3;
+    }
+  }
+</style>

package/src/components/Block.astro

@@ -0,0 +1,49 @@
+---
+import { getEntries } from 'astro:content'
+import type { BannerSchema } from 'fulldev-ui/schemas/blocks/banner'
+import type { CategoriesSchema } from 'fulldev-ui/schemas/blocks/categories'
+import type { CtaSchema } from 'fulldev-ui/schemas/blocks/cta'
+import type { FeatureSchema } from 'fulldev-ui/schemas/blocks/feature'
+import type { HeroSchema } from 'fulldev-ui/schemas/blocks/hero'
+import type { ProductsSchema } from 'fulldev-ui/schemas/blocks/products'
+import type { FooterSchema } from 'fulldev-ui/schemas/components/footer'
+import type { HeaderSchema } from 'fulldev-ui/schemas/components/header'
+
+interface Props
+  extends HeroSchema,
+    CtaSchema,
+    FeatureSchema,
+    CategoriesSchema,
+    ProductsSchema,
+    HeaderSchema,
+    FooterSchema,
+    BannerSchema {
+  _block: string
+}
+
+let { _block, products, categories, ...rest } = Astro.props
+
+products = products && (await getEntries(products))
+categories = categories && (await getEntries(categories))
+
+const blocks = {
+  ...import.meta.glob('/src/blocks/**/*.astro'),
+  ...import.meta.glob('../blocks/**/*.astro'),
+}
+
+const path = Object.keys(blocks).find(
+  (path) => path.split('/').pop()?.split('.')[0] === _block
+)
+
+const BlockComponent = path && (await (blocks[path] as any)()).default
+---
+
+{
+  BlockComponent && (
+    <BlockComponent
+      {products}
+      {categories}
+      {...rest}
+    />
+  )
+}

package/src/components/Blocks.astro

@@ -0,0 +1,26 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Block from 'fulldev-ui/components/Block.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  blocks?: ComponentProps<typeof Block>[] | undefined
+}
+
+const { blocks, ...rest } = Astro.props
+---
+
+<Element
+  class:list="blocks"
+  {...rest}
+>
+  {blocks?.map((block) => <Block {...block} />)}
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .blocks {
+      @apply flex flex-col;
+    }
+  }
+</style>

package/src/components/Button.astro

@@ -1,49 +1,36 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
+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 { ButtonSchema } from 'fulldev-ui/schemas/components/button'
 
 interface Props
-  extends GlobalProps,
-    HTMLAttributes<'button'>,
-    HTMLAttributes<'a'> {
+  extends HTMLAttributes<'button'>,
+    Omit<HTMLAttributes<'a'>, 'href' | 'target'>,
+    ButtonSchema {
   as?: HTMLTag
-  href?: string | null | undefined
   type?: HTMLAttributes<'button'>['type'] & HTMLAttributes<'a'>['type']
-  icon?: ComponentProps<typeof Icon>['name']
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
-  text?: string | undefined
+  for?: HTMLAttributes<'label'>['for']
   reverse?: boolean | undefined
 }
 
 const {
-  slug,
-  href = slug === 'index' ? '/' : slug ? `/${slug}/` : undefined,
-  text = slug ? (await getEntry('pages', slug)).data.title : undefined,
+  href,
   as = href ? 'a' : 'button',
-  type = as === 'button' ? 'button' : undefined,
-  target = href?.startsWith('http') ? '_blank' : undefined,
   variant = 'primary',
   size = 'md',
+  text,
   icon,
-  reverse,
   ...rest
 } = Astro.props
 ---
 
 <Element
   class:list={['button']}
-  {href}
   {as}
-  {type}
-  {target}
+  {href}
   {variant}
   {size}
-  {reverse}
   {...rest}
 >
   <Icon name={icon} />
@@ -56,7 +43,7 @@ const {
 <style is:global>
   @layer fulldev {
     .button {
-      @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium leading-none ring-offset-background transition-colors;
+      @apply inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium leading-none ring-offset-background transition-colors;
       @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;
 

package/src/components/Card.astro

@@ -1,172 +1,30 @@
 ---
-import { getEntry } from 'astro:content'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Icon from 'fulldev-ui/components/Icon.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Price from 'fulldev-ui/components/Price.astro'
-import Heading from './Heading.astro'
-import Lead from './Lead.astro'
-import Paragraph from './Paragraph.astro'
-import Rating from './Rating.astro'
 
-// interface Props
-//   extends GlobalProps,
-//     ComponentProps<typeof Writeup>,
-//     Omit<HTMLAttributes<'a'>, 'title'> {
-//   image?: ComponentProps<typeof Image>
-//   images?: ComponentProps<typeof Image>[]
-//   position?: ComponentProps<typeof Image>['position']
-//   buttons?: ComponentProps<typeof Buttons>['buttons']
-//   button?: ComponentProps<typeof Button> | undefined
-//   variant?: ComponentProps<typeof Button>['variant']
-//   align?: ComponentProps<typeof Writeup>['align']
-//   icon?: ComponentProps<typeof Icon>['name']
-//   price?: ComponentProps<typeof Price>['value']
-//   slug?: CollectionEntry<'pages'>['slug'] | undefined
-//   id?: any
-//   panel?: boolean | undefined
-//   title?: ComponentProps<typeof Writeup>['heading']
-// }
-
-const { slug, ...props } = Astro.props
-const page = slug && (await getEntry('pages', slug))
-
-const merged = {
-  ...props,
-  ...page?.data,
+interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
+  as?: HTMLTag
 }
 
-const {
-  href = slug === 'index' ? undefined : `/${slug}/`,
-  as = href ? 'a' : 'div',
-  heading = page?.data.title || props.title,
-  image = page?.data.images?.[0] || props.images?.[0],
-  size = 'md',
-  panel = true,
-  inset = panel,
-  level = 3,
-  lead,
-  paragraph,
-  rating,
-  price,
-  icon,
-  position,
-  ...rest
-} = merged
+const { href, as = href ? 'a' : 'div', ...rest } = Astro.props
 ---
 
 <Element
   class:list="card"
-  as={href ? 'a' : 'div'}
+  {as}
   {href}
-  {panel}
-  {inset}
-  {size}
   {...rest}
 >
-  <Image
-    position={panel ? position : undefined}
-    {...image}
-  />
-  <Element class:list="card-content">
-    <Icon name={icon} />
-    <Rating
-      {size}
-      value={rating}
-    />
-    <Heading
-      {size}
-      {level}
-      text={heading}
-    />
-    <Lead
-      {size}
-      text={lead}
-    />
-    <Paragraph
-      {size}
-      text={paragraph}
-    />
-    <Price value={price} />
-  </Element>
   <slot />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .card {
-      @apply relative flex flex-col items-start;
-
-      &:is(a[href]):hover > .image {
-        @apply opacity-50 transition;
-      }
-
-      .card-content {
-        @apply flex flex-col;
-      }
-
-      &.panel {
-        @apply overflow-hidden rounded-md border bg-card;
-      }
-
-      &.size-sm {
-        @apply gap-4;
-
-        .card-content {
-          @apply gap-2;
-        }
-
-        &.panel {
-          @apply p-4;
-        }
-
-        &.inset {
-          @apply gap-0 p-0;
-
-          .card-content {
-            @apply p-4;
-          }
-        }
-      }
-
-      &.size-md {
-        @apply gap-5;
-
-        .card-content {
-          @apply gap-2.5;
-        }
-
-        &.panel {
-          @apply p-5;
-        }
-
-        &.inset {
-          @apply gap-0 p-0;
-
-          .card-content {
-            @apply p-5;
-          }
-        }
-      }
-
-      &.size-lg {
-        @apply gap-6;
-
-        .card-content {
-          @apply gap-3;
-        }
-
-        &.panel {
-          @apply p-6;
-        }
-
-        &.inset {
-          @apply gap-0 p-0;
+      @apply w-full rounded-lg border bg-card p-4 text-card-foreground;
 
-          .card-content {
-            @apply p-6;
-          }
-        }
+      &:is(a[href]) {
+        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
       }
     }
   }

package/src/components/Cart.astro

@@ -27,6 +27,7 @@ const {
 <Drawer
   if={ifProp}
   class:list="cart"
+  variant="secondary"
   {icon}
   {color}
   {id}

package/src/components/CartSummary.astro

@@ -3,7 +3,7 @@ import { STRIPE_RESTRICTED_KEY, URL } from 'astro:env/client'
 import CartCheckout from './CartCheckout.svelte'
 import CartTotal from './CartTotal.svelte'
 import Element from './Element.astro'
-import Text from './Text.astro'
+import Paragraph from './Paragraph.astro'
 
 interface Props {}
 
@@ -18,14 +18,14 @@ const { ...rest } = Astro.props
     class="row"
     {...rest}
   >
-    <Text
+    <Paragraph
       class:list="total"
       text="Totaal"
       contrast
     />
     <CartTotal client:load />
   </div>
-  <Text
+  <Paragraph
     class:list="shipping"
     text="Verzendkosten worden berekend bij het afrekenen."
   />

package/src/components/Channel.astro

@@ -1,20 +1,11 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { 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 Text from 'fulldev-ui/components/Text.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import type { ChannelSchema } from 'fulldev-ui/schemas/components/channel'
 
-interface Props extends GlobalProps, ComponentProps<typeof Button> {
-  variant?: ComponentProps<typeof Button>['variant']
-  icon?: ComponentProps<typeof Button>['icon']
-  href?: ComponentProps<typeof Button>['href']
-  heading?: ComponentProps<typeof Heading>['text']
-  text?: ComponentProps<typeof Text>['text']
-  structure?: 'row' | 'column' | undefined
-  align?: 'start' | 'center' | undefined
-}
+interface Props extends HTMLAttributes<'div'>, ChannelSchema {}
 
 const {
   variant = 'secondary',
@@ -40,9 +31,9 @@ const {
   />
   <Element class:list="channel-content">
     <Heading
-      level={6}
+      as="h6"
+      size="sm"
       text={heading}
-      {size}
     />
     <Fragment set:html={text} />
     <slot />

package/src/components/Container.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="container"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .container {
+      @apply mx-auto w-full max-w-screen-2xl px-gutter;
+    }
+  }
+</style>