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

package/src/blocks/Intro1.astro

@@ -1,17 +1,29 @@
 ---
+import type { ComponentProps } from 'astro/types'
 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 Group from 'fulldev-ui/components/Group.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.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'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends ComponentProps<typeof Section>, IntroSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, ...rest } = Astro.props
+const {
+  badge,
+  tagline,
+  heading,
+  paragraph,
+  content,
+  button,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
 ---
 
 <Section
@@ -19,7 +31,7 @@ const { tagline, heading, paragraph, buttons, ...rest } = Astro.props
   {...rest}
 >
   <Container>
-    <Element class="intro-1-content">
+    <Writeup>
       <Tagline
         size="sm"
         text={tagline}
@@ -30,26 +42,28 @@ const { tagline, heading, paragraph, buttons, ...rest } = Astro.props
         text={heading}
       />
       <Paragraph
-        size="md"
+        size="lg"
         text={paragraph}
       />
-    </Element>
-    <Buttons
-      size="sm"
-      {buttons}
-    />
+      <Fragment set:html={content} />
+      <Group>
+        <Buttons
+          {button}
+          {buttons}
+        />
+      </Group>
+    </Writeup>
+    <Image {...image} />
   </Container>
 </Section>
 
 <style is:global>
   @layer fulldev {
-    .intro-1 {
-      .container {
-        @apply flex flex-col items-center gap-8 text-center;
-      }
+    .section.intro-1 {
+      @apply border-b py-8;
 
-      .intro-1-content {
-        @apply flex max-w-screen-md flex-col items-center gap-4 text-center;
+      .image {
+        @apply rounded-lg;
       }
     }
   }

package/src/blocks/Jobs1.astro

@@ -0,0 +1,73 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { getEntries } from 'astro:content'
+import Card from 'fulldev-ui/components/Card.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Grid from 'fulldev-ui/components/Grid.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import List from 'fulldev-ui/components/List.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 Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+import { getHref } from 'fulldev-ui/utils/getHref'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { tagline, heading, paragraph, pages, ...rest } = Astro.props
+
+const entries = pages && (await getEntries(pages))
+---
+
+<Section
+  class:list="jobs-1"
+  {...rest}
+>
+  <Container>
+    <Writeup align="center">
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph text={paragraph} />
+    </Writeup>
+    <Grid>
+      {
+        entries?.map(({ slug, data: { title, list } }) => (
+          <Card
+            class="jobs-1-card"
+            href={getHref(slug)}
+          >
+            <Heading
+              as="h2"
+              size="lg"
+              text={title}
+            />
+            <List
+              size="sm"
+              items={list}
+            />
+          </Card>
+        ))
+      }
+    </Grid>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .jobs-1 {
+      .container {
+        @apply flex flex-col items-center gap-16;
+      }
+      .card {
+        @apply flex flex-col gap-3;
+      }
+    }
+  }
+</style>

package/src/blocks/Logos1.astro

@@ -0,0 +1,55 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block.ts'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { tagline, heading, paragraph, images, ...rest } = Astro.props
+---
+
+<Section
+  class:list="logos-1"
+  {...rest}
+>
+  <Container>
+    <Writeup align="center">
+      <Heading
+        size="xl"
+        text={heading}
+      />
+      <Paragraph
+        size="sm"
+        muted
+        text={paragraph}
+      />
+    </Writeup>
+    <Element class:list="logos-1-cards">
+      {images?.map((image) => <Image {...image} />)}
+    </Element>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .logos-1 {
+      .container {
+        @apply flex flex-col items-center gap-8;
+      }
+
+      .logos-1-cards {
+        @apply flex flex-wrap justify-center gap-12;
+      }
+
+      .image {
+        @apply max-w-36;
+      }
+    }
+  }
+</style>

package/src/blocks/Products1.astro

@@ -9,10 +9,10 @@ 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 type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 import { getHref } from 'fulldev-ui/utils/getHref'
 
-interface Props extends ComponentProps<typeof Section>, ProductsSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
 const { heading, button, products, ...rest } = Astro.props
 
@@ -37,8 +37,8 @@ const entries = products && (await getEntries(products))
     </Element>
     <Element class:list="products-1-cards">
       {
-        entries?.map(({ collection, slug, data: { images, title, price } }) => (
-          <Card href={getHref(collection, slug)}>
+        entries?.map(({ slug, data: { images, title, price } }) => (
+          <Card href={getHref(slug)}>
             <Image {...images?.[0]} />
             <Element class:list="products-1-card-content">
               <Heading

package/src/blocks/Reviews1.astro

@@ -0,0 +1,79 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Card from 'fulldev-ui/components/Card.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Masonry from 'fulldev-ui/components/Masonry.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Rating from 'fulldev-ui/components/Rating.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+---
+
+<Section
+  class:list="reviews-1"
+  {...rest}
+>
+  <Container>
+    <Writeup align="center">
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph text={paragraph} />
+    </Writeup>
+    <Masonry>
+      {
+        cards?.map(({ rating, heading, paragraph }) => (
+          <Card class="reviews-1-card">
+            <Rating
+              size="sm"
+              score={rating}
+            />
+            <Heading
+              as="h3"
+              size="md"
+              text={heading}
+            />
+            <Paragraph
+              size="sm"
+              text={paragraph}
+            />
+          </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/Badges.astro

@@ -1,43 +1,20 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
+import type { ComponentProps } from 'astro/types'
 import Badge from './Badge.astro'
 
-interface Props extends HTMLAttributes<'div'> {
-  variant?: ComponentProps<typeof Badge>['variant']
-  size?: ComponentProps<typeof Badge>['size']
-  badges?: ComponentProps<typeof Badge>[] | undefined
+interface Props extends ComponentProps<typeof Badge> {
   badge?: ComponentProps<typeof Badge> | undefined
+  badges?: ComponentProps<typeof Badge>[] | undefined
 }
 
-const {
-  variant = 'outline',
-  size = 'md',
-  badges = [],
-  badge,
-  ...rest
-} = Astro.props
+const { badge, badges, ...rest } = Astro.props
 ---
 
-<Element
-  class:list="badges"
-  {...rest}
->
-  {
-    [badge, ...badges].filter(Boolean).map((badge) => (
-      <Badge
-        {variant}
-        {size}
-        {...badge}
-      />
-    ))
-  }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .badges {
-      @apply inline-flex w-auto flex-wrap justify-stretch gap-1.5;
-    }
-  }
-</style>
+{
+  [badge, ...(badges || [])].filter(Boolean).map((badge) => (
+    <Badge
+      {...badge}
+      {...rest}
+    />
+  ))
+}

package/src/components/Block.astro

@@ -1,30 +1,12 @@
 ---
 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'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props
-  extends HeroSchema,
-    CtaSchema,
-    FeatureSchema,
-    CategoriesSchema,
-    ProductsSchema,
-    HeaderSchema,
-    FooterSchema,
-    BannerSchema {
-  _block: string
-}
+interface Props extends BlockSchema {}
 
-let { _block, products, categories, ...rest } = Astro.props
+let { _block, pages, ...rest } = Astro.props
 
-products = products && (await getEntries(products))
-categories = categories && (await getEntries(categories))
+pages = pages && (await getEntries(pages))
 
 const blocks = {
   ...import.meta.glob('/src/blocks/**/*.astro'),
@@ -41,8 +23,7 @@ const BlockComponent = path && (await (blocks[path] as any)()).default
 {
   BlockComponent && (
     <BlockComponent
-      {products}
-      {categories}
+      {pages}
       {...rest}
     />
   )

package/src/components/Button.astro

@@ -11,7 +11,6 @@ interface Props
   as?: HTMLTag
   type?: HTMLAttributes<'button'>['type'] & HTMLAttributes<'a'>['type']
   for?: HTMLAttributes<'label'>['for']
-  reverse?: boolean | undefined
 }
 
 const {
@@ -33,11 +32,11 @@ const {
   {size}
   {...rest}
 >
-  <Icon name={icon} />
   <Element as="span">
     <Fragment set:html={text} />
     <slot />
   </Element>
+  <Icon name={icon} />
 </Element>
 
 <style is:global>

package/src/components/Buttons.astro

@@ -1,59 +1,28 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { ComponentProps } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  variant?: ComponentProps<typeof Button>['variant']
+interface Props extends ComponentProps<typeof Button> {
   button?: ComponentProps<typeof Button> | undefined
   buttons?: ComponentProps<typeof Button>[] | undefined
-  direction?: 'row' | 'column' | undefined
 }
 
-const {
-  direction = 'row',
-  variant = 'primary',
-  buttons = [],
-  button,
-  size,
-  ...rest
-} = Astro.props
+const { variant = 'primary', button, buttons, ...rest } = Astro.props
 
 const buttonVariant = (i: number) => {
   if (variant === 'primary' && i === 0) return 'primary'
   else if (variant === 'primary' && i === 1) return 'secondary'
-  else if (variant === 'primary' && i > 1) return 'ghost'
   else if (variant === 'secondary' && i === 0) return 'secondary'
   else return 'ghost'
 }
 ---
 
-<Element
-  class:list="buttons"
-  {direction}
-  {...rest}
->
-  {
-    [button, ...buttons].filter(Boolean).map((button, i) => (
-      <Button
-        variant={buttonVariant(i)}
-        {size}
-        {...button}
-      />
-    ))
-  }
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .buttons {
-      @apply inline-flex flex-wrap justify-stretch gap-2;
-
-      &.direction-column {
-        @apply flex-col items-start;
-      }
-    }
-  }
-</style>
+{
+  [button, ...(buttons || [])].filter(Boolean).map((button, i) => (
+    <Button
+      variant={buttonVariant(i)}
+      {...rest}
+      {...button}
+    />
+  ))
+}

package/src/components/Cart.astro

@@ -8,15 +8,9 @@ import Icon from './Icon.astro'
 import Input from './Input.astro'
 import Select from './Select.astro'
 
-interface Props extends ComponentProps<typeof Drawer> {}
+interface Props extends Omit<ComponentProps<typeof Drawer>, 'id' | 'icon'> {}
 
-const {
-  icon = 'shopping-cart',
-  color = 'brand',
-  id = 'cart',
-  if: ifProp,
-  ...rest
-} = Astro.props
+const { variant = 'ghost', size = 'md', ...rest } = Astro.props
 ---
 
 <Select if={false} />
@@ -25,12 +19,12 @@ const {
 <Icon if={false} />
 
 <Drawer
-  if={ifProp}
   class:list="cart"
-  variant="secondary"
+  id="cart"
+  icon="shopping-cart"
+  {variant}
+  {size}
   {icon}
-  {color}
-  {id}
   {...rest}
 >
   <CartList client:load />

package/src/components/Drawer.astro

@@ -1,7 +1,6 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import type { ComponentProps } from 'svelte'
 import Button from './Button.astro'
 
 interface Props

package/src/components/Form.astro

@@ -3,8 +3,8 @@ import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Input from 'fulldev-ui/components/Input.astro'
-import Paragrapharea from 'fulldev-ui/components/Paragrapharea.astro'
 import Select from 'fulldev-ui/components/Select.astro'
+import Textarea from 'fulldev-ui/components/Textarea.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 interface Props extends GlobalProps, HTMLAttributes<'form'> {
@@ -13,7 +13,7 @@ interface Props extends GlobalProps, HTMLAttributes<'form'> {
     | (
         | ComponentProps<typeof Input>
         | ComponentProps<typeof Select>
-        | (ComponentProps<typeof Paragrapharea> & {
+        | (ComponentProps<typeof Textarea> & {
             type?: 'textarea' | undefined
           })
       )[]
@@ -32,7 +32,7 @@ const { fields, submit, ...rest } = Astro.props
     fields?.map((field) => {
       if ('options' in field) return <Select {...field} />
       if ('type' in field && field.type === 'textarea')
-        return <Paragrapharea {...field} />
+        return <Textarea {...field} />
       return <Input {...(field as any)} />
     })
   }

package/src/components/Grid.astro

@@ -0,0 +1,39 @@
+---
+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="grid"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .grid {
+      @apply relative w-full grid-cols-[repeat(auto-fill,minmax(var(--column-width),1fr))] gap-5;
+      display: grid;
+      --column-width: 20rem;
+
+      /* &.size-sm {
+        --column-width: 16rem;
+      }
+
+      &.size-md {
+        --column-width: 20rem;
+      }
+
+      &.size-lg {
+        --column-width: 26rem;
+      } */
+    }
+  }
+</style>

package/src/components/{Banner.astro → Group.astro}

@@ -2,16 +2,15 @@
 import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 
-interface Props extends HTMLAttributes<'header'> {
+interface Props extends HTMLAttributes<'div'> {
   as?: HTMLTag
 }
 
-const { as = 'header', ...rest } = Astro.props
+const { ...rest } = Astro.props
 ---
 
 <Element
-  class:list="banner"
-  {as}
+  class:list="group"
   {...rest}
 >
   <slot />
@@ -19,8 +18,8 @@ const { as = 'header', ...rest } = Astro.props
 
 <style is:global>
   @layer fulldev {
-    .banner {
-      @apply relative flex w-full items-center bg-primary py-3;
+    .group {
+      @apply flex flex-wrap justify-stretch gap-2;
     }
   }
 </style>

package/src/components/Heading.astro

@@ -4,7 +4,7 @@ import Element from 'fulldev-ui/components/Element.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 import { slugify } from 'fulldev-ui/utils/slugify'
 
-interface Props extends GlobalProps, HTMLAttributes<'h2'> {
+interface Props extends GlobalProps, HTMLAttributes<'h2'>, HTMLAttributes<'a'> {
   as?: HTMLTag
   text?: string | undefined
   muted?: boolean | undefined
@@ -70,6 +70,10 @@ const {
     }
 
     &.size-5xl {
+      @apply text-4xl lg:text-5xl;
+    }
+
+    &.size-6xl {
       @apply text-5xl lg:text-6xl;
     }
   }