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

package/src/blocks/Hero1.astro

@@ -0,0 +1,74 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Container from 'fulldev-ui/components/Container.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 Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const {
+  badge,
+  tagline,
+  heading,
+  paragraph,
+  content,
+  button,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="hero-1"
+  {...rest}
+>
+  <Container>
+    <Writeup align="center">
+      <Badge
+        size="lg"
+        {...badge}
+      />
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        as="h1"
+        size="6xl"
+        text={heading}
+      />
+      <Paragraph
+        size="xl"
+        text={paragraph}
+      />
+      <Fragment set:html={content} />
+      <Group>
+        <Buttons
+          size="lg"
+          {button}
+          {buttons}
+        />
+      </Group>
+    </Writeup>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .hero-1 {
+      .image {
+        @apply rounded-lg;
+      }
+    }
+  }
+</style>

package/src/blocks/Intro1.astro

@@ -0,0 +1,70 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Container from 'fulldev-ui/components/Container.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 Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const {
+  badge,
+  tagline,
+  heading,
+  paragraph,
+  content,
+  button,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="intro-1"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        as="h1"
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph
+        size="lg"
+        text={paragraph}
+      />
+      <Fragment set:html={content} />
+      <Group>
+        <Buttons
+          {button}
+          {buttons}
+        />
+      </Group>
+    </Writeup>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .section.intro-1 {
+      @apply border-b py-8;
+
+      .image {
+        @apply rounded-lg;
+      }
+    }
+  }
+</style>

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

@@ -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 { BlockSchema } from 'fulldev-ui/schemas/components/block'
+import { getHref } from 'fulldev-ui/utils/getHref'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+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(({ slug, data: { images, title, price } }) => (
+          <Card href={getHref(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/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/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/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

@@ -0,0 +1,30 @@
+---
+import { getEntries } from 'astro:content'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends BlockSchema {}
+
+let { _block, pages, ...rest } = Astro.props
+
+pages = pages && (await getEntries(pages))
+
+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
+      {pages}
+      {...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>