fulldev-ui 0.5.0-beta.8 → 0.6.0-beta-4

package/src/blocks/Product.astro

@@ -1,106 +0,0 @@
----
-import CartForm from 'fulldev-ui/components/CartForm.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Gallery from 'fulldev-ui/components/experimental/Gallery.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import List from 'fulldev-ui/components/List.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-
-const {
-  heading,
-  title,
-  list,
-  price,
-  image,
-  images,
-  rating,
-  buttons,
-  text,
-  subheading,
-  variants,
-  button,
-  description,
-  form,
-  gallery = 'horizontal',
-  ...rest
-} = Astro.props
-
-const slug = Astro.params.page || 'index'
-const src = `/src/images/${images?.[0].id}`
----
-
-<Section
-  class:list="product"
-  structure="split"
-  {...rest}
->
-  {
-    images && images.length > 1 ? (
-      <Gallery
-        {images}
-        direction={gallery}
-      />
-    ) : (
-      <Image {...(image || images?.[0])} />
-    )
-  }
-  <Element class:list="column">
-    <Heading
-      level={2}
-      text={heading || title}
-    />
-    <Text
-      style={{ maxWidth: '420px' }}
-      text={text || description}
-    />
-    <List
-      items={list}
-      style={{ marginTop: 'var(--space-5)' }}
-    />
-    <CartForm
-      image={src}
-      {title}
-      {price}
-      {slug}
-      {variants}
-    />
-  </Element>
-</Section>
-
-<style is:global lang="scss">
-  .product {
-    padding-top: 0px;
-
-    @media (min-width: 1024px) {
-      padding-top: var(--space-6);
-    }
-
-    .column {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--space-5);
-    }
-
-    .row {
-      display: flex;
-      align-items: center;
-      gap: var(--space-5);
-    }
-
-    @media (max-width: 1023.99px) {
-      .gallery {
-        margin-right: calc(-1 * var(--gutter));
-        margin-left: calc(-1 * var(--gutter));
-        width: calc(100% + (var(--gutter) * 2));
-
-        .small-carousel {
-          padding-right: var(--gutter);
-          padding-left: var(--gutter);
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/Products.astro

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

package/src/blocks/Reviews.astro

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

package/src/components/CartForm.astro

@@ -1,121 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Input from 'fulldev-ui/components/Input.astro'
-import Select from 'fulldev-ui/components/Select.astro'
-import { capitalize } from 'radash'
-import Form from './experimental/Form.astro'
-import Price from './Price.astro'
-
-interface Props extends Omit<ComponentProps<typeof Form>, 'fields' | 'submit'> {
-  title: string
-  slug: string
-  price: number
-  image?: string | undefined
-  variants?:
-    | {
-        [key: string]: string[]
-      }
-    | undefined
-}
-
-const { title, slug, image, price, variants, ...rest } = Astro.props
----
-
-<Form
-  class:list="cart-form"
-  {...rest}
->
-  <Input
-    type="hidden"
-    name="title"
-    value={title}
-  />
-  <Input
-    type="hidden"
-    name="slug"
-    value={slug}
-  />
-  <Input
-    type="hidden"
-    name="url"
-    value={Astro.site ? Astro.site.href + slug : undefined}
-  />
-  <Input
-    type="hidden"
-    name="image"
-    value={image}
-  />
-  {
-    Object.entries(variants ?? {}).map(([key, options]) => (
-      <Select
-        label={capitalize(key)}
-        name={`variant-${key}`}
-        options={options}
-      />
-    ))
-  }
-  <Price value={price} />
-  <Input
-    type="hidden"
-    name="price"
-    value={price}
-  />
-  <Button
-    variant="primary"
-    color="brand"
-    type="submit"
-    class="cart-add"
-    text="Toevoegen aan winkelwagen"
-  />
-</Form>
-
-<script>
-  import { $cart } from 'fulldev-ui/stores/cart.ts'
-  import { generateProductId, generateProductName } from 'fulldev-ui/utils/cart'
-
-  document.addEventListener('astro:page-load', () => {
-    const cartForm = document.querySelector('.cart-form')
-
-    cartForm?.addEventListener('submit', (e) => {
-      e.preventDefault()
-
-      if (e.target instanceof HTMLFormElement) {
-        const formData = new FormData(e.target)
-
-        const title = formData.get('title') as string
-        const slug = formData.get('slug') as string
-        const url = formData.get('url') as string
-        const image = formData.get('image') as string
-        const price = Number(formData.get('price')) as number
-        const variants = Array.from(formData.entries())
-          .filter(([key]) => key.startsWith('variant-'))
-          .map(([_, value]) => value) as string[]
-
-        const id = generateProductId(slug, variants)
-        const name = generateProductName(title, variants)
-
-        const currentCart = $cart.get()
-        const newCart = [...currentCart, { id, name, price, image, url }]
-        $cart.set(newCart)
-
-        const cartDialog = document?.querySelector('dialog#cart')
-        if (cartDialog instanceof HTMLDialogElement) cartDialog.showModal()
-      }
-    })
-  })
-</script>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .cart-form {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-4);
-
-      .input {
-        display: none;
-      }
-    }
-  }
-</style>

package/src/components/CartList.astro

@@ -1,134 +0,0 @@
----
-import Element from 'fulldev-ui/components/Element.astro'
-import Button from './Button.astro'
-import Card from './Card.astro'
-import Heading from './Heading.astro'
-import Text from './Text.astro'
-
-const { ...rest } = Astro.props
----
-
-<Element
-  if
-  class:list="cart-list"
-  {...rest}
-/>
-
-<template>
-  <Card class="cart-list-card">
-    <img class="cart-list-image image" />
-    <Element class="column">
-      <Heading
-        if
-        level={4}
-        class="heading"
-      />
-      <Element class="row">
-        <Text
-          if
-          class="cart-list-price"
-        />
-        <Button
-          class:list="cart-list-remove"
-          variant="tertiary"
-          icon="trash"
-          type="button"
-        />
-      </Element>
-    </Element>
-  </Card>
-</template>
-
-<script>
-  import { $cart } from 'fulldev-ui/stores/cart.ts'
-  import { formatPrice } from 'fulldev-ui/utils/cart'
-
-  function setCards(items: any) {
-    const template = document.querySelector('template')
-    const container = document.querySelector('.cart-list')
-
-    if (!container || !template) return
-
-    container.innerHTML = ''
-
-    items.forEach((item: any, index: number) => {
-      const clone = template?.content.cloneNode(true)
-      if (!(clone instanceof DocumentFragment)) return
-      const card = clone.querySelector('.cart-list-card')
-      if (!card) return
-
-      const img = card.querySelector('img')
-      if (img) img.src = item.image
-
-      const h4 = card.querySelector('h4')
-      if (h4) h4.textContent = item.name
-
-      const p = card.querySelector('p')
-      if (p) p.textContent = formatPrice(item.price)
-
-      const button = card.querySelector('button')
-      if (button) {
-        button.addEventListener('click', () => {
-          const currentCart = $cart.get()
-          const newCart = [...currentCart]
-          newCart.splice(index, 1)
-          $cart.set(newCart)
-        })
-      }
-
-      container.appendChild(clone)
-    })
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    setCards($cart.get())
-
-    $cart.subscribe((items: any) => {
-      setCards(items)
-    })
-  })
-</script>
-
-<style lang="scss" is:global>
-  @layer fulldev {
-    .cart-list {
-      display: flex;
-      flex-direction: column;
-
-      .card {
-        display: flex;
-        flex-direction: row;
-        gap: var(--space-5);
-        width: 100%;
-
-        &:not(:first-child) {
-          margin-top: var(--space-5);
-          border-top: 1px solid var(--color-a6);
-          padding-top: var(--space-5);
-        }
-
-        .image {
-          display: block;
-          width: 100px;
-          height: auto;
-        }
-
-        .column {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          gap: var(--space-3);
-          width: 100%;
-          height: 100%;
-        }
-
-        .row {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Footer.astro

@@ -1,193 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Channels from 'fulldev-ui/components/Channels.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Social from 'fulldev-ui/components/Social.astro'
-import Socials from 'fulldev-ui/components/Socials.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import Logo from 'fulldev-ui/components/experimental/Logo.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, HTMLAttributes<'footer'> {
-  screen?: number | undefined
-  logo?: ComponentProps<typeof Logo>['src']
-  company?: ComponentProps<typeof Logo>['company']
-  text?: ComponentProps<typeof Text>['text']
-  hours?: any
-  socials?: ComponentProps<typeof Social>['href'][] | undefined
-  buttons?: ComponentProps<typeof Button>[] | undefined
-  panel?: boolean | undefined
-  channels?: ComponentProps<typeof Channels>['channels'] | undefined
-  columns?: {
-    heading: ComponentProps<typeof Heading>['text']
-    buttons: ComponentProps<typeof Button>[] | undefined
-  }[]
-}
-
-const {
-  size = 'sm',
-  screen = 1280,
-  hours,
-  panel,
-  logo,
-  company,
-  socials,
-  buttons,
-  columns,
-  text,
-  title,
-  channels,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="footer"
-  style={{ '--screen': `${screen}px` }}
-  structure="stack"
-  {panel}
-  {size}
-  {...rest}
->
-  <Element class:list="column">
-    <Logo
-      {company}
-      {...typeof logo === 'string' ? { src: logo } : logo}
-    />
-    <Text
-      color="base"
-      {text}
-    />
-    <Socials {socials} />
-  </Element>
-  <Channels {channels} />
-  <Element class:list="hours column">
-    <Heading
-      text={hours?.heading}
-      level={5}
-    />
-    <Element>
-      {
-        Object.entries(hours?.days ?? {})?.map(([key, value]: any) => (
-          <Element class:list="spread">
-            <Text text={key} />
-            <Text text={value} />
-          </Element>
-        ))
-      }
-    </Element>
-  </Element>
-
-  <Element class:list="buttons column">
-    {
-      columns?.map(({ heading, buttons }: any) => (
-        <Element class:list="column">
-          <Heading
-            level={5}
-            text={heading}
-          />
-          {buttons?.map((button: any) => (
-            <Button
-              variant="link"
-              {...button}
-            />
-          ))}
-        </Element>
-      ))
-    }
-  </Element>
-</Element>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .footer {
-      display: grid;
-      position: relative;
-      grid-template-columns: 1fr;
-      align-items: flex-start;
-      gap: var(--space-6);
-      margin-top: auto;
-      margin-top: auto;
-      border-top-width: 1px;
-      border-color: var(--base-a6);
-      background-color: var(--base-2);
-      padding: var(--space-7) var(--gutter);
-      width: 100%;
-
-      @media (min-width: 1024px) {
-        grid-auto-columns: 1fr;
-        grid-auto-flow: column;
-      }
-
-      .spread {
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .column {
-        display: flex;
-        flex-direction: column;
-      }
-
-      > .column {
-        gap: var(--space-4);
-      }
-
-      .socials {
-        display: flex;
-      }
-
-      .column {
-        h5 + * {
-          margin-top: var(--space-4);
-        }
-
-        .button.variant-link + .button.variant-link {
-          margin-top: var(--space-4);
-        }
-      }
-
-      &.panel {
-        margin: var(--spacer) var(--gutter);
-        border-width: 1px;
-        border-radius: var(--radius-2);
-        overflow: hidden;
-      }
-
-      .channels {
-        gap: var(--space-3);
-      }
-
-      .buttons {
-        display: grid;
-        position: relative;
-        grid-template-columns: 1fr;
-        align-items: flex-start;
-        gap: var(--space-3);
-        gap: var(--space-6);
-        width: 100%;
-
-        @media (min-width: 1024px) {
-          grid-auto-columns: 1fr;
-          grid-auto-flow: column;
-        }
-      }
-
-      .text {
-        max-width: calc(5 * var(--space-7));
-      }
-
-      .hours {
-        .column {
-          gap: 0;
-
-          .text {
-            font-size: var(--text-2);
-          }
-        }
-      }
-    }
-  }
-</style>

package/src/components/Text.astro

@@ -1,43 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, HTMLAttributes<'p'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  color?: 'base' | 'brand' | undefined
-  theme?: 'light' | 'dark' | undefined
-  contrast?: boolean | undefined
-  lead?: boolean | undefined
-  text?: string | undefined
-}
-
-const { color = 'base', text, ...rest } = Astro.props
----
-
-<Element
-  class:list="text"
-  as="p"
-  {color}
-  {...rest}
->
-  <slot />
-  <Fragment set:text={text} />
-</Element>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .text {
-      margin: 0;
-      max-width: calc(var(--space-4) * 44);
-      color: var(--color-11);
-      font-size: var(--text-3);
-      line-height: 1.625;
-
-      &.lead {
-        font-size: var(--text-4);
-        text-wrap: balance;
-      }
-    }
-  }
-</style>

package/src/components/ThemeSelect.astro

@@ -1,41 +0,0 @@
----
-import Select from 'fulldev-ui/components/Select.astro'
-// const defaultTheme = fulldevConfig.colors.theme || 'light'
-
-const { ...rest } = Astro.props
----
-
-<Select
-  class:list="theme-select"
-  name="theme-select"
-  options={['light', 'dark']}
-  value="light"
-  onchange="localStorage.setItem('theme', this.value); window.location.reload();"
-  {...rest}
-/>
-
-<script>
-  const setOption = (document: Document) => {
-    const selects = document.querySelectorAll('.theme-select')
-    const theme = localStorage.getItem('theme') || ''
-    selects?.forEach((select) => {
-      const options = select?.querySelectorAll('option')
-      options?.forEach((option) => {
-        if (option.value === theme) option.selected = true
-        else option.selected = false
-      })
-    })
-  }
-
-  setOption(document)
-
-  document.addEventListener('astro:before-swap', (event) => {
-    setOption(event.newDocument)
-  })
-</script>
-
-<style is:global lang="scss">
-  .theme-select {
-    width: calc(1.4 * var(--space-7));
-  }
-</style>