fulldev-ui 0.5.0-beta.5 → 0.5.0-beta.6

package/CONTRIBUTING.md

@@ -15,19 +15,25 @@ Here lay a few resources we wrote to help you do it!
 │   ├── content/
 │   │   ├── pages/
 │   │   │   └── ...
-│   │   ├── settings/
+│   │   ├── presets/
 │   │   │   └── ...
 │   │   └── ...
 │   ├── css/
 │   │   └── ...
+│   ├── images/
+│   │   └── ...
 │   ├── integration/
 │   │   └── ...
 │   ├── layouts/
 │   │   └── ...
+│   ├── loaders/
+│   │   └── ...
 │   ├── pages/
 │   │   └── ...
 │   ├── schemas/
 │   │   └── ...
+│   ├── types/
+│   │   └── ...
 │   └── utils/
 │       └── ...
 ├── public/
@@ -101,9 +107,9 @@ For a faster and easier review we advise you to use [conventional commits](https
 Have you used fulldev-ui to build a website? Add it to the showcase!
 
 1. Fork this repository.
-2. Add a screenshot of your site to the `public/images/showcase/` directory.
-3. Create a file which is your unslugged domain in `src/pages/records/showcase/` for example `src/pages/records/showcase/google-com.mdx`.
-4. Go to the forked repository on your Github and clicke the 'Contribute` button to make a Pull Request.
+2. Add a screenshot of your site to the `/src/images/showcase/` directory.
+3. Create a file which in `/src/content/pages/showcase/` for example `/src/content/pages/showcase/google.md`.
+4. Go to the forked repository on your Github and clicke the "Contribute" button to make a Pull Request.
 
 ## Community / Contact
 

package/astro.config.ts

@@ -2,7 +2,6 @@ import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
 // @ts-ignore
 import liveCode from 'astro-live-code'
-import pagefind from 'astro-pagefind'
 import { defineConfig } from 'astro/config'
 import integration from 'fulldev-ui/integration'
 
@@ -19,7 +18,6 @@ export default defineConfig({
   integrations: [
     sitemap(),
     mdx(),
-    pagefind(),
     liveCode({
       layout: '/src/components/experimental/Window.astro',
     }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.5.0-beta.5",
+  "version": "0.5.0-beta.6",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -41,6 +41,7 @@
     "@astrojs/sitemap": "^3.2.1",
     "@astrolib/seo": "1.0.0-beta.8",
     "@iconify-json/tabler": "^1.2.5",
+    "@nanostores/persistent": "^0.10.2",
     "@radix-ui/colors": "^3.0.0",
     "@rollup/plugin-yaml": "^4.1.2",
     "@types/js-yaml": "^4.0.9",
@@ -48,7 +49,6 @@
     "astro": "^4.16.6",
     "astro-favicons": "^2.0.2",
     "astro-live-code": "^0.0.3",
-    "astro-pagefind": "^1.6.0",
     "astro-seo": "^0.8.4",
     "bezier-easing": "^2.1.0",
     "colorjs.io": "^0.5.2",
@@ -56,11 +56,13 @@
     "fs": "0.0.1-security",
     "install": "^0.13.0",
     "js-yaml": "^4.1.0",
+    "nanostores": "^0.11.3",
     "npm": "^10.9.0",
     "radash": "^12.1.0",
     "remeda": "2.15.2",
     "sass": "^1.80.2",
     "sharp": "^0.33.5",
+    "stripe": "^17.2.1",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3",
     "unocss": "^0.63.4",

package/pnpm-lock.yaml

@@ -17,6 +17,9 @@ dependencies:
   '@iconify-json/tabler':
     specifier: ^1.2.5
     version: 1.2.5
+  '@nanostores/persistent':
+    specifier: ^0.10.2
+    version: 0.10.2(nanostores@0.11.3)
   '@radix-ui/colors':
     specifier: ^3.0.0
     version: 3.0.0
@@ -38,9 +41,6 @@ dependencies:
   astro-live-code:
     specifier: ^0.0.3
     version: 0.0.3
-  astro-pagefind:
-    specifier: ^1.6.0
-    version: 1.6.0(astro@4.16.6)
   astro-seo:
     specifier: ^0.8.4
     version: 0.8.4(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.3)
@@ -62,6 +62,9 @@ dependencies:
   js-yaml:
     specifier: ^4.1.0
     version: 4.1.0
+  nanostores:
+    specifier: ^0.11.3
+    version: 0.11.3
   npm:
     specifier: ^10.9.0
     version: 10.9.0
@@ -77,6 +80,9 @@ dependencies:
   sharp:
     specifier: ^0.33.5
     version: 0.33.5
+  stripe:
+    specifier: ^17.2.1
+    version: 17.2.1
   tailwindcss:
     specifier: ^3.4.14
     version: 3.4.14
@@ -1299,6 +1305,15 @@ packages:
       - supports-color
     dev: false
 
+  /@nanostores/persistent@0.10.2(nanostores@0.11.3):
+    resolution: {integrity: sha512-BEndnLhRC+yP7gXTESepBbSj8XNl8OXK9hu4xAgKC7MWJHKXnEqJMqY47LUyHxK6vYgFnisyHmqq+vq8AUFyIg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      nanostores: ^0.9.0 || ^0.10.0 || ^0.11.0
+    dependencies:
+      nanostores: 0.11.3
+    dev: false
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1321,50 +1336,6 @@ packages:
     resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
     dev: false
 
-  /@pagefind/darwin-arm64@1.1.1:
-    resolution: {integrity: sha512-tZ9tysUmQpFs2EqWG2+E1gc+opDAhSyZSsgKmFzhnWfkK02YHZhvL5XJXEZDqYy3s1FAKhwjTg8XDxneuBlDZQ==}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@pagefind/darwin-x64@1.1.1:
-    resolution: {integrity: sha512-ChohLQ39dLwaxQv0jIQB/SavP3TM5K5ENfDTqIdzLkmfs3+JlzSDyQKcJFjTHYcCzQOZVeieeGq8PdqvLJxJxQ==}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@pagefind/default-ui@1.1.1:
-    resolution: {integrity: sha512-ZM0zDatWDnac/VGHhQCiM7UgA4ca8jpjA+VfuTJyHJBaxGqZMQnm4WoTz9E0KFcue1Bh9kxpu7uWFZfwpZZk0A==}
-    dev: false
-
-  /@pagefind/linux-arm64@1.1.1:
-    resolution: {integrity: sha512-H5P6wDoCoAbdsWp0Zx0DxnLUrwTGWGLu/VI1rcN2CyFdY2EGSvPQsbGBMrseKRNuIrJDFtxHHHyjZ7UbzaM9EA==}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@pagefind/linux-x64@1.1.1:
-    resolution: {integrity: sha512-yJs7tTYbL2MI3HT+ngs9E1BfUbY9M4/YzA0yEM5xBo4Xl8Yu8Qg2xZTOQ1/F6gwvMrjCUFo8EoACs6LRDhtMrQ==}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@pagefind/windows-x64@1.1.1:
-    resolution: {integrity: sha512-b7/qPqgIl+lMzkQ8fJt51SfguB396xbIIR+VZ3YrL2tLuyifDJ1wL5mEm+ddmHxJ2Fki340paPcDan9en5OmAw==}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@parcel/watcher-android-arm64@2.4.1:
     resolution: {integrity: sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==}
     engines: {node: '>= 10.0.0'}
@@ -2257,17 +2228,6 @@ packages:
       unist-util-visit-parents: 6.0.1
     dev: false
 
-  /astro-pagefind@1.6.0(astro@4.16.6):
-    resolution: {integrity: sha512-U/WuE0ktkZkoFJf6yopWO4DjIJ3+wrnopE2L3kUYiyqNTJpqmp13bFLR8gir6B+KzQ5dsXQtJZYTQtKJg1FxIA==}
-    peerDependencies:
-      astro: ^2.0.4 || ^3.0.0 || ^4.0.0
-    dependencies:
-      '@pagefind/default-ui': 1.1.1
-      astro: 4.16.6(sass@1.80.2)(typescript@5.6.3)
-      pagefind: 1.1.1
-      sirv: 2.0.4
-    dev: false
-
   /astro-seo@0.8.4(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.3):
     resolution: {integrity: sha512-Ou1vzQSXAxa0K8rtNtXNvSpYqOGEgMhh0immMxJeXmbVZac3UKCNWAoXWyOQDFYsZvBugCRSg0N1phBqPMVgCw==}
     dependencies:
@@ -4419,6 +4379,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /nanostores@0.11.3:
+    resolution: {integrity: sha512-TUes3xKIX33re4QzdxwZ6tdbodjmn3tWXCEc1uokiEmo14sI1EaGYNs2k3bU2pyyGNmBqFGAVl6jAGWd06AVIg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    dev: false
+
   /napi-build-utils@1.0.2:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
     dev: false
@@ -4641,17 +4606,6 @@ packages:
     resolution: {integrity: sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==}
     dev: false
 
-  /pagefind@1.1.1:
-    resolution: {integrity: sha512-U2YR0dQN5B2fbIXrLtt/UXNS0yWSSYfePaad1KcBPTi0p+zRtsVjwmoPaMQgTks5DnHNbmDxyJUL5TGaLljK3A==}
-    hasBin: true
-    optionalDependencies:
-      '@pagefind/darwin-arm64': 1.1.1
-      '@pagefind/darwin-x64': 1.1.1
-      '@pagefind/linux-arm64': 1.1.1
-      '@pagefind/linux-x64': 1.1.1
-      '@pagefind/windows-x64': 1.1.1
-    dev: false
-
   /parse-entities@4.0.1:
     resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==}
     dependencies:
@@ -5540,6 +5494,14 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /stripe@17.2.1:
+    resolution: {integrity: sha512-Mwb0SitV/UjxTLSUiTlUQ0VDE/gfyQ7OHDGdvDdvKIH4CNNqobPKlzlWhoZHFFU0OA/YsZyBtPULK4JG86BAAg==}
+    engines: {node: '>=12.*'}
+    dependencies:
+      '@types/node': 17.0.45
+      qs: 6.13.0
+    dev: false
+
   /style-to-object@0.4.4:
     resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==}
     dependencies:

package/src/blocks/Banner.astro

@@ -31,8 +31,9 @@ const { color = 'brand', size = 'sm', text, ...rest } = Astro.props
       background-color: var(--color-9);
       padding: 0 var(--gutter);
       width: 100%;
-      height: var(--banner-height);
+      min-height: var(--banner-height);
       overflow: hidden;
+      text-align: center;
 
       .text {
         color: var(--color-contrast);

package/src/blocks/Product.astro

@@ -1,12 +1,10 @@
 ---
-import Button from 'fulldev-ui/components/Button.astro'
+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 Input from 'fulldev-ui/components/Input.astro'
 import List from 'fulldev-ui/components/List.astro'
-import Price from 'fulldev-ui/components/Price.astro'
 import Section from 'fulldev-ui/components/Section.astro'
 import Text from 'fulldev-ui/components/Text.astro'
 
@@ -21,12 +19,16 @@ const {
   buttons,
   text,
   subheading,
+  variants,
   button,
   description,
   form,
   gallery = 'horizontal',
   ...rest
 } = Astro.props
+
+const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
+const src = `/src/images/${images?.[0].id}`
 ---
 
 <Section
@@ -53,28 +55,16 @@ const {
       style={{ maxWidth: '420px' }}
       text={text || description}
     />
-    <Price value={price} />
     <List
       items={list}
       style={{ marginTop: 'var(--space-5)' }}
     />
-    <Element class:list="row">
-      <Input
-        value={1}
-        name={'quantity'}
-        style={{ width: 'var(--space-7)' }}
-        type="number"
-        min={1}
-      />
-      <Button
-        color="brand"
-        text={form?.submit}
-      />
-    </Element>
-    <Button
-      style={{ marginTop: 'var(--space-3)', width: '100%', maxWidth: '400px' }}
-      variant="secondary"
-      {...button}
+    <CartForm
+      image={src}
+      {title}
+      {price}
+      {slug}
+      {variants}
     />
   </Element>
 </Section>

package/src/components/Card.astro

@@ -36,7 +36,7 @@ const page = slug ? (await getEntry('pages', slug)).data : {}
 const entryProps = {
   heading: page.title,
   text: page.description,
-  href: `/${slug}/`,
+  href: slug ? `/${slug}/` : undefined,
   ...page,
 }
 

package/src/components/Cart.astro

@@ -0,0 +1,36 @@
+---
+import type { ComponentProps } from 'astro/types'
+import CartList from 'fulldev-ui/components/CartList.astro'
+import CartSummary from 'fulldev-ui/components/CartSummary.astro'
+import Drawer from 'fulldev-ui/components/Drawer.astro'
+
+interface Props extends ComponentProps<typeof Drawer> {}
+
+const {
+  icon = 'shopping-cart',
+  color = 'brand',
+  id = 'cart',
+  ...rest
+} = Astro.props
+---
+
+<Drawer
+  class:list="cart"
+  {icon}
+  {color}
+  {id}
+  {...rest}
+>
+  <CartList />
+  <CartSummary slot="footer" />
+</Drawer>
+
+<style lang="scss" is:global>
+  @layer fulldev {
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
+    }
+  }
+</style>

package/src/components/CartForm.astro

@@ -0,0 +1,121 @@
+---
+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

@@ -0,0 +1,134 @@
+---
+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>