fulldev-ui 0.6.0-beta.0 → 0.6.0-beta.10

package/src/blocks/Intro.astro

@@ -1,101 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import Badge from 'fulldev-ui/components/Badge.astro'
-import Breadcrumb from 'fulldev-ui/components/Breadcrumb.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 Rating from 'fulldev-ui/components/Rating.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-
-interface Props extends HTMLAttributes<'section'> {
-  rating?: ComponentProps<typeof Rating> | undefined
-  badge?: ComponentProps<typeof Badge> | undefined
-  tagline?: ComponentProps<typeof Tagline>['text']
-  heading?: ComponentProps<typeof Heading>['text']
-  lead?: ComponentProps<typeof Lead>['text']
-  paragraph?: ComponentProps<typeof Paragraph>['text']
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  image?: ComponentProps<typeof Image>['id']
-  level?: ComponentProps<typeof Heading>['level']
-  as?: HTMLTag
-  size?: 'sm' | 'md' | 'lg' | undefined
-  variant?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined
-}
-
-const {
-  as = 'section',
-  size = 'lg',
-  variant = 1,
-  level = 1,
-  slug,
-  rating,
-  tagline,
-  badge,
-  heading,
-  lead,
-  paragraph,
-  buttons,
-  image,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="intro"
-  {as}
-  {size}
-  {variant}
-  {...rest}
->
-  <Element class:list="intro-container">
-    <Element class:list="intro-content">
-      <!-- <Breadcrumb {slug} /> -->
-      <Heading
-        text={heading}
-        as="h1"
-        level={3}
-        {size}
-      />
-      <Paragraph
-        text={paragraph}
-        {size}
-      />
-    </Element>
-    <slot />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .intro {
-      @apply relative w-full;
-
-      .intro-container {
-        @apply flex h-full w-full flex-col;
-      }
-
-      .intro-content {
-        @apply flex max-w-screen-md flex-col gap-6;
-      }
-
-      &.dark {
-        @apply bg-background;
-      }
-
-      /* Background left */
-      &.variant-1 {
-        .intro-container {
-          @apply container justify-center py-16;
-        }
-
-        .intro-image {
-          @apply absolute inset-0 h-full w-full object-cover opacity-30;
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/Jobs.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="jobs"
-  structure="grid"
-  panel
-  {...rest}
-/>

package/src/blocks/Posts.astro

@@ -1,11 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="posts"
-  structure="grid"
-  {...rest}
-/>

package/src/blocks/Prices.astro

@@ -1,24 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="prices"
-  structure="stack"
-  panel
-  {...rest}
-/>
-
-<style is:global >
-  @layer fulldev {
-    .prices {
-      .card {
-        .wrap {
-          margin-top: auto;
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/Product.astro

@@ -1,89 +0,0 @@
-<!-- ---
-import { getImage } from 'astro:assets'
-import CartForm from 'fulldev-ui/components/CartForm.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Gallery from 'fulldev-ui/components/Gallery.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'
-
-const {
-  as = 'section',
-  size = 'md',
-  variant = 1,
-  level = 1,
-  heading,
-  paragraph,
-  title,
-  list,
-  price,
-  images,
-  text,
-  subheading,
-  variants,
-  button,
-  description,
-  form,
-  uitverkocht,
-  ...rest
-} = Astro.props
-
-const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
-const imageId = images?.[0]?.id
-const src = `/src/images/${imageId}`
-const allImages = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
-const foundImage = allImages[src]
-const gotImage =
-  imageId && (await getImage({ src: foundImage ? foundImage() : src }))
----
-
-<Element
-  class:list="product"
-  {as}
-  {size}
-  {...rest}
->
-  <Element class:list="product-container">
-    <Gallery {images} />
-    <Element class:list="product-segment">
-      <Element class:list="product-content">
-        <Heading
-          {level}
-          text={heading || title}
-        />
-        <Paragraph text={paragraph || description} />
-        <List items={list} />
-      </Element>
-      <CartForm
-        soldout={uitverkocht}
-        image={gotImage?.src}
-        {title}
-        {price}
-        {slug}
-        {variants}
-      />
-    </Element>
-  </Element>
-</Element>
-
-<style is:global>
-  .product {
-    @apply relative w-full;
-
-    .product-container {
-      @apply container flex h-full w-full flex-col gap-16 py-8 lg:grid lg:grid-cols-[3fr_2fr];
-    }
-
-    .product-segment {
-      @apply z-10 flex flex-col items-start gap-8;
-    }
-
-    .product-content {
-      @apply flex max-w-screen-md flex-col gap-6;
-    }
-
-    &.dark {
-      @apply bg-background;
-    }
-  }
-</style> -->

package/src/blocks/Products.astro

@@ -1,120 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Cards from 'fulldev-ui/components/Cards.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 Tagline from 'fulldev-ui/components/Tagline.astro'
-
-interface Props extends HTMLAttributes<'section'> {
-  tagline?: ComponentProps<typeof Tagline>['text']
-  heading?: ComponentProps<typeof Heading>['text']
-  paragraph?: ComponentProps<typeof Paragraph>['text']
-  button?: ComponentProps<typeof Buttons> | undefined
-  cards?: ComponentProps<typeof Cards>['cards']
-  level?: ComponentProps<typeof Heading>['level']
-  as?: HTMLTag
-  size?: 'sm' | 'md' | 'lg' | undefined
-  variant?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined
-}
-
-const {
-  as = 'section',
-  size = 'sm',
-  variant = 1,
-  level = 2,
-  tagline,
-  heading,
-  paragraph,
-  button,
-  cards,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="products"
-  {as}
-  {size}
-  {variant}
-  {...rest}
->
-  <Element class:list="products-container">
-    <Element class:list="products-segment">
-      <Element class:list="products-content">
-        <Tagline
-          text={tagline}
-          {size}
-        />
-        <Heading
-          text={heading}
-          {level}
-          {size}
-        />
-        <Paragraph
-          text={paragraph}
-          {size}
-        />
-        <slot name="content" />
-      </Element>
-      <Button
-        variant="ghost"
-        {size}
-        {...button}
-      />
-      <slot name="segment" />
-    </Element>
-    <Cards
-      {cards}
-      {size}
-    />
-    <slot />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .products {
-      @apply relative w-full;
-
-      .products-container {
-        @apply flex h-full w-full flex-col;
-      }
-
-      .products-segment {
-        @apply z-10 flex flex-col items-start gap-8;
-      }
-
-      .products-content {
-        @apply flex max-w-screen-md flex-col gap-6;
-      }
-
-      &.dark {
-        @apply bg-background;
-      }
-
-      /* Column left aligned */
-      &.variant-1 {
-        .products-container {
-          @apply container py-8;
-        }
-
-        .products-segment {
-          @apply w-full flex-row flex-wrap justify-between gap-8 py-8;
-        }
-
-        .cards {
-          --column-width: 200px;
-
-          @apply gap-2;
-
-          .image {
-            @apply p-4;
-          }
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/Reviews.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="reviews"
-  structure="masonry"
-  panel
-  {...rest}
-/>

package/src/blocks/_Contact.astro

@@ -1,112 +0,0 @@
----
-import Button from 'fulldev-ui/components/Button.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Channels from 'fulldev-ui/components/Channels.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Form from 'fulldev-ui/components/Form.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Input from 'fulldev-ui/components/Input.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import Socials from 'fulldev-ui/components/Socials.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import Textarea from 'fulldev-ui/components/Textarea.astro'
-
-const {
-  heading,
-  form,
-  text,
-  tagline,
-  googleMaps,
-  buttons,
-  socials,
-  position,
-  image,
-  channels,
-  level = 1,
-  ...rest
-} = Astro.props
----
-
-<Section
-  class:list="contact"
-  structure="split"
-  {...rest}
->
-  <Element class:list="column">
-    <Tagline text={tagline} />
-    <Heading
-      size={'sm'}
-      level={level}
-      text={heading}
-    />
-    <Text text={text} />
-    <Buttons {buttons} />
-    <Channels {channels} />
-    <Socials {socials} />
-    <Form
-      action="/thank-you"
-      method="POST"
-    >
-      {
-        form.fields.map((field: any) => {
-          if (field.type === 'textarea') {
-            return (
-              <Textarea
-                label={field.label}
-                id={field.name}
-                name={field.name}
-                required={field.required}
-              />
-            )
-          }
-          return (
-            <Input
-              label={field.label}
-              id={field.name}
-              name={field.name}
-              type={field.type}
-              required={field.required}
-            />
-          )
-        })
-      }
-      <Button
-        type="submit"
-        variant="primary"
-        text={form.button}
-      />
-    </Form>
-  </Element>
-
-  <Image
-    {position}
-    {...image}
-  />
-</Section>
-
-<style is:global>
-  @layer fulldev {
-    .oldcontact {
-      .column {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-
-      > .column {
-        gap: var(--space-5);
-      }
-
-      .channel + .channel {
-        margin-top: var(--space-3) !important;
-      }
-
-      .socials {
-        display: flex;
-        gap: var(--space-2);
-      }
-    }
-  }
-</style>

package/src/components/Avatar.astro

@@ -1,45 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Image from 'fulldev-ui/components/Image.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, ComponentProps<typeof Image> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-}
-
-const { size = 'md', ...rest } = Astro.props
-
-const sizeMap = {
-  sm: 36,
-  md: 40,
-  lg: 44,
-}
----
-
-<Image
-  class:list={'avatar'}
-  width={sizeMap[size]}
-  height={sizeMap[size]}
-  {size}
-  {...rest}
-/>
-
-<style is:global>
-  @layer fulldev {
-    .avatar {
-      @apply aspect-square shrink-0 rounded-full bg-muted object-cover;
-
-      &.size-sm {
-        @apply size-9;
-      }
-
-      &.size-md {
-        @apply size-10;
-      }
-
-      &.size-lg {
-        @apply size-11;
-      }
-    }
-  }
-</style>

package/src/components/Avatars.astro

@@ -1,36 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import Avatar from './Avatar.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  size?: any
-  avatars?: ComponentProps<typeof Avatar>[] | undefined
-  avatar?: ComponentProps<typeof Avatar>['id'] | undefined
-}
-
-const { size = 'md', avatars = [], avatar, ...rest } = Astro.props
----
-
-<Element
-  class:list="avatars"
-  {size}
-  {...rest}
->
-  {
-    [avatar, ...avatars].filter(Boolean).map((id) => (
-      <Avatar
-        {size}
-        {id}
-      />
-    ))
-  }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .avatars {
-      @apply inline-flex -space-x-3;
-    }
-  }
-</style>