fulldev-ui 0.6.4 → 0.7.0-beta.1

package/src/blocks/Logos1.astro

@@ -1,55 +0,0 @@
----
-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 type { BlockSchema } from 'fulldev-ui/schemas/block'
-import Container from 'fulldev-ui/structures/Container.astro'
-import Section from 'fulldev-ui/structures/Section.astro'
-import Writeup from 'fulldev-ui/structures/Writeup.astro'
-
-interface Props extends BlockSchema {}
-
-const { depth = 2, tagline, heading, paragraph, images, ...rest } = Astro.props
----
-
-<Section
-  class:list="logos-1"
-  {...rest}
->
-  <Container>
-    <Writeup align="center">
-      <Heading
-        size="xl"
-        text={heading}
-        {depth}
-      />
-      <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-8;
-      }
-
-      .image {
-        @apply max-w-36;
-      }
-    }
-  }
-</style>

package/src/blocks/Pages1.astro

@@ -1,85 +0,0 @@
----
-// Heading etc left, image and content right, sticky
-import Badges from 'fulldev-ui/components/Badges.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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/block'
-import Container from 'fulldev-ui/structures/Container.astro'
-import Group from 'fulldev-ui/structures/Group.astro'
-import Prose from 'fulldev-ui/structures/Prose.astro'
-import Section from 'fulldev-ui/structures/Section.astro'
-import Split from 'fulldev-ui/structures/Split.astro'
-
-interface Props extends BlockSchema {}
-
-const {
-  depth = 2,
-  tagline,
-  heading,
-  paragraph,
-  buttons,
-  content,
-  cards,
-} = Astro.props
----
-
-<Section class="pages-1">
-  <Container>
-    <Split class="items-start">
-      <Prose class="lg:sticky lg:top-sticky-16 lg:max-w-xl">
-        <Tagline text={tagline} />
-        <Heading
-          as="h2"
-          size="4xl"
-          text={heading}
-          {depth}
-        />
-        <Paragraph
-          muted
-          size="lg"
-          text={paragraph}
-        />
-        <Fragment set:html={content} />
-        <Group>
-          <Buttons
-            variant="secondary"
-            {buttons}
-          />
-        </Group>
-      </Prose>
-      <Element class="flex flex-col gap-8">
-        {
-          cards?.map(({ href, image, badges, heading, paragraph }) => (
-            <Element
-              as="a"
-              class="flex flex-col gap-2"
-              {href}
-            >
-              <Image
-                class="mb-4"
-                {...image}
-              />
-              <Group>
-                <Badges
-                  size="sm"
-                  {badges}
-                />
-              </Group>
-              <Heading
-                depth={(depth + 1) as 3}
-                as="h3"
-                size="xl"
-                text={heading}
-              />
-              <Paragraph text={paragraph} />
-            </Element>
-          ))
-        }
-      </Element>
-    </Split>
-  </Container>
-</Section>

package/src/blocks/Pricings1.astro

@@ -1,61 +0,0 @@
----
-import Button from 'fulldev-ui/components/Button.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 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 Prose from 'fulldev-ui/structures/Prose.astro'
-import Section from 'fulldev-ui/structures/Section.astro'
-import Stack from 'fulldev-ui/structures/Stack.astro'
-
-interface Props extends BlockSchema {}
-
-const { depth = 2, heading, paragraph, cards } = Astro.props
----
-
-<Section class="pricings-1">
-  <Container class="flex flex-col items-center gap-16">
-    <Prose class="text-center">
-      <Heading
-        size="5xl"
-        text={heading}
-        {depth}
-      />
-      <Paragraph
-        size="xl"
-        text={paragraph}
-      />
-    </Prose>
-    <Stack class="mx-auto flex flex-wrap items-stretch justify-center">
-      {
-        cards?.map(({ tagline, heading, paragraph, list, button }) => (
-          <Card class="min-w-sm flex max-w-md flex-col justify-between gap-8 p-8">
-            <Prose>
-              <Tagline text={tagline} />
-              <Heading
-                depth={(depth + 1) as 3}
-                size="3xl"
-                text={heading}
-              />
-              <Paragraph
-                muted
-                text={paragraph}
-              />
-              <List
-                size="sm"
-                items={list}
-              />
-            </Prose>
-            <Button
-              class=""
-              {...button}
-            />
-          </Card>
-        ))
-      }
-    </Stack>
-  </Container>
-</Section>

package/src/blocks/Products1.astro

@@ -1,87 +0,0 @@
----
-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 Image from 'fulldev-ui/components/Image.astro'
-import Price from 'fulldev-ui/components/Price.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 Section from 'fulldev-ui/structures/Section.astro'
-
-interface Props extends BlockSchema {}
-
-const { depth = 2, heading, button, cards, ...rest } = Astro.props
----
-
-<Section
-  class:list="products-1"
-  {...rest}
->
-  <Container>
-    <Element class:list="products-1-segment">
-      <Heading
-        size="2xl"
-        text={heading}
-        {depth}
-      />
-      <Button
-        variant="ghost"
-        size="sm"
-        {...button}
-      />
-    </Element>
-    <Element class:list="products-1-cards">
-      {
-        cards?.map(({ href, images, heading, price }) => (
-          <Card {href}>
-            <Image {...images?.[0]} />
-            <Element class:list="products-1-card-content">
-              <Heading
-                depth={(depth + 1) as 3}
-                as="h3"
-                size="md"
-                text={heading}
-              />
-              <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/Projects1.astro

@@ -1,79 +0,0 @@
----
-import Badges from 'fulldev-ui/components/Badges.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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/block'
-import Container from 'fulldev-ui/structures/Container.astro'
-import Group from 'fulldev-ui/structures/Group.astro'
-import Prose from 'fulldev-ui/structures/Prose.astro'
-import Section from 'fulldev-ui/structures/Section.astro'
-import Split from 'fulldev-ui/structures/Split.astro'
-
-interface Props extends BlockSchema {}
-
-const {
-  depth = 2,
-  tagline,
-  heading,
-  paragraph,
-  buttons,
-  content,
-  cards,
-} = Astro.props
----
-
-<Section class="projects-1">
-  <Container>
-    <Split align="sticky">
-      <Prose class="max-w-xl">
-        <Tagline text={tagline} />
-        <Heading
-          size="3xl"
-          text={heading}
-          {depth}
-        />
-        <Paragraph text={paragraph} />
-        <Fragment set:html={content} />
-        <Group>
-          <Buttons
-            variant="secondary"
-            {buttons}
-          />
-        </Group>
-      </Prose>
-      <Element class="flex flex-col gap-8">
-        {
-          cards?.map(({ href, image, badges, heading, paragraph }) => (
-            <Element
-              class="flex flex-col gap-2"
-              as="a"
-              {href}
-            >
-              <Image
-                class="mb-4"
-                {...image}
-              />
-              <Group>
-                <Badges
-                  size="sm"
-                  {badges}
-                />
-              </Group>
-              <Heading
-                depth={(depth + 1) as 3}
-                as="h3"
-                size="xl"
-                text={heading}
-              />
-              <Paragraph text={paragraph} />
-            </Element>
-          ))
-        }
-      </Element>
-    </Split>
-  </Container>
-</Section>

package/src/blocks/Subheader.astro

@@ -1,53 +0,0 @@
----
-import Element from 'fulldev-ui/components/Element.astro'
-import Links from 'fulldev-ui/components/Links.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/block'
-
-interface Props extends BlockSchema {}
-
-const { links, ...rest } = Astro.props
----
-
-<Element
-  class:list={['subheader']}
-  as="subheader"
-  {...rest}
->
-  <Element class:list="subheader-container">
-    <Links
-      class:list="subheader-links"
-      size="sm"
-      {links}
-    />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .subheader {
-      @apply sticky left-0 top-0 z-20 flex h-11 items-center overflow-hidden bg-card max-lg:hidden;
-
-      top: var(--header-height);
-
-      .subheader-container {
-        @apply container flex w-full items-center gap-6;
-      }
-
-      .subheader-links {
-        @apply w-full justify-between;
-      }
-
-      &,
-      & ~ * {
-        --subheader-height: 2.75rem;
-      }
-
-      @media (max-width: 1023.999px) {
-        &,
-        & ~ * {
-          --subheader-height: 0px;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Avatars.astro

@@ -1,20 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Avatar from 'fulldev-ui/components/Avatar.astro'
-
-interface Props extends ComponentProps<typeof Avatar> {
-  avatar?: ComponentProps<typeof Avatar> | undefined
-  avatars?: ComponentProps<typeof Avatar>[] | undefined
-}
-
-const { avatar, avatars, ...rest } = Astro.props
----
-
-{
-  [avatar, ...(avatars || [])].filter(Boolean).map((avatar) => (
-    <Avatar
-      {...rest}
-      {...avatar}
-    />
-  ))
-}

package/src/components/Badges.astro

@@ -1,20 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Badge from 'fulldev-ui/components/Badge.astro'
-
-interface Props extends ComponentProps<typeof Badge> {
-  badge?: ComponentProps<typeof Badge> | undefined
-  badges?: string[] | undefined
-}
-
-const { badge, badges, ...rest } = Astro.props
----
-
-{
-  [badge, ...(badges || [])].filter(Boolean).map((badge) => (
-    <Badge
-      {...rest}
-      {...(typeof badge === 'string' ? { text: badge } : badge)}
-    />
-  ))
-}

package/src/components/Block.astro

@@ -1,46 +0,0 @@
----
-import { getEntries } from 'astro:content'
-import type { BlockSchema } from 'fulldev-ui/schemas/block'
-import { getHref } from 'fulldev-ui/utils/getHref'
-
-interface Props extends BlockSchema {}
-
-let { _block, cards, pages, records, ...rest } = Astro.props
-
-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
-
-cards = [
-  ...(cards || []),
-  ...(await getEntries(records || [])).map(({ data }) => ({
-    ...data,
-  })),
-  ...(await getEntries(pages || [])).map(({ slug, data }) => ({
-    href: getHref(slug),
-    heading: data.title,
-    paragraph: data.description,
-    ...data,
-  })),
-]
----
-
-{
-  BlockComponent && (
-    <BlockComponent
-      {cards}
-      {pages}
-      {records}
-      {...rest}
-    >
-      <slot />
-    </BlockComponent>
-  )
-}

package/src/components/Cart.astro

@@ -1,42 +0,0 @@
----
-// @ts-nocheck
-import type { ComponentProps } from 'astro/types'
-import CartList from 'fulldev-ui/components/CartList.svelte'
-import CartSummary from 'fulldev-ui/components/CartSummary.astro'
-import Drawer from 'fulldev-ui/structures/Drawer.astro'
-import Button from './Button.astro'
-import Icon from './Icon.astro'
-import Input from './Input.astro'
-import Select from './Select.astro'
-
-interface Props extends Omit<ComponentProps<typeof Drawer>, 'id' | 'icon'> {}
-
-const { variant = 'ghost', size = 'md', ...rest } = Astro.props
----
-
-<Select show={false} />
-<Button show={false} />
-<Input show={false} />
-<Icon show={false} />
-
-<Drawer
-  class:list="cart"
-  id="cart"
-  icon="shopping-cart"
-  {variant}
-  {size}
-  {...rest}
->
-  <CartList client:load />
-  <CartSummary slot="footer" />
-</Drawer>
-
-<style is:global>
-  @layer fulldev {
-    form {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-4);
-    }
-  }
-</style>

package/src/components/CartAdd.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-  import { updateQuantity } from 'fulldev-ui/stores/cart.svelte.ts'
-  import { tick } from 'svelte'
-
-  let { uid, quantity } = $props()
-  let inputElement: HTMLInputElement | null = $state(null)
-
-  async function onQuantityChange(e: Event) {
-    const target = e.target as HTMLInputElement
-    const value = Number(target.value)
-    updateQuantity(uid, value)
-
-    if (value === 11) {
-      await tick()
-      inputElement?.focus()
-    }
-  }
-</script>
-
-<label
-  class="quantity input select size-md"
-  for="quantity"
->
-  {#if quantity > 10}
-    <input
-      bind:this={inputElement}
-      class="input-input"
-      name="quantity"
-      type="number"
-      value={quantity}
-      min={0}
-      onchange={onQuantityChange}
-    />
-  {:else}
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      class="icon size-md"
-    >
-      <path
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="m6 9l6 6l6-6"
-      ></path>
-    </svg>
-    <select
-      class="select-select"
-      value={quantity}
-      onchange={onQuantityChange}
-    >
-      {#each Array(10) as _, i}
-        <option
-          value={i + 1}
-          selected={quantity === i + 1}
-        >
-          {i + 1}
-        </option>
-      {/each}
-      <option
-        value="11"
-        selected={quantity > 10}
-      >
-        Meer
-      </option>
-    </select>
-  {/if}
-</label>
-
-<style lang="postcss">
-  .quantity {
-    @apply w-24;
-  }
-</style>

package/src/components/CartCheckout.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-  import { cart } from 'fulldev-ui/stores/cart.svelte.ts'
-  import Stripe from 'stripe'
-
-  const { STRIPE_RESTRICTED_KEY, URL } = $props()
-
-  async function handeClick() {
-    if (!STRIPE_RESTRICTED_KEY) {
-      console.error('Stripe key is missing')
-      return
-    }
-    const stripe = new Stripe(STRIPE_RESTRICTED_KEY)
-    const checkoutConfig = {
-      success_url: `${URL}/checkout`,
-      mode: 'payment',
-      customer_creation: 'always',
-      shipping_address_collection: {
-        allowed_countries: ['NL'],
-      },
-      phone_number_collection: {
-        enabled: true,
-      },
-    }
-
-    const lineItems = $cart.map((item) => ({
-      quantity: item.quantity,
-      adjustable_quantity: {
-        enabled: true,
-        maximum: 999999,
-      },
-      price_data: {
-        currency: 'eur',
-        product_data: {
-          name:
-            item.variants && Object.values(item.variants || {}).length
-              ? `${item.title} - ${Object.values(item.variants).join(' / ')}`
-              : item.title,
-          // images: [item.image ? URL + item.image : ''],
-        },
-        unit_amount: Math.round(item.price || 0 * 100),
-      },
-    }))
-
-    const checkoutSession = await stripe.checkout.sessions.create({
-      line_items: lineItems,
-      ...checkoutConfig,
-    })
-
-    checkoutSession.url && window.location.replace(checkoutSession.url)
-  }
-</script>
-
-<button
-  class="button variant-primary size-md"
-  onclick={handeClick}
->
-  Afrekenennn
-</button>