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

package/src/components/_CartList copy.astro

@@ -0,0 +1,213 @@
+<!-- ---
+import Element from 'fulldev-ui/components/Element.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import { $cart } from 'fulldev-ui/stores/cart.ts'
+import { formatPrice } from 'fulldev-ui/utils/cart'
+import Button from './Button.astro'
+import Card from './Card.astro'
+import Heading from './Heading.astro'
+import Input from './Input.astro'
+import Price from './Price.astro'
+import Text from './Text.astro'
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="cart-list"
+  {...rest}
+>
+  <template id="cart-card-template">
+    <Element class="cart-card">
+      <Image src="/placeholder-portrait.webp" />
+      <Element class="cart-card-segment">
+        <Element class="cart-card-content">
+          <Heading
+            level={6}
+            text="Product title"
+          />
+          <Price value={999} />
+        </Element>
+        <Element class="cart-card-actions">
+          <Input
+            type="number"
+            name="quantity"
+            value={1}
+            min={0}
+          />
+          <Button
+            variant="outline"
+            icon="trash"
+            type="button"
+          />
+        </Element>
+      </Element>
+    </Element>
+  </template>
+</Element>
+<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="ghost"
+          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-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>
+
+<script>
+  function setCards(items: any) {
+    const template = document.querySelector('template')
+    const container = document.querySelector('.cart-list')
+    if (!(container instanceof HTMLElement)) return
+    if (!(template instanceof HTMLTemplateElement)) 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 image = card.querySelector('img')
+      const heading = card.querySelector('.heading')
+      const price = card.querySelector('.price')
+      // const input = card.querySelector('.input-input')
+      const remove = card.querySelector('.button')
+
+      if (image) image.src = item.image
+      if (heading) heading.textContent = item.name
+      if (price) price.textContent = formatPrice(item.price)
+
+      remove?.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 is:global>
+  @layer fulldev {
+    .cart-list {
+      @apply flex flex-col text-foreground;
+
+      .cart-card {
+        @apply flex w-full gap-5;
+
+        &:not(:first-child) {
+          @apply mt-5 border-t pt-5;
+        }
+
+        .image {
+          @apply block h-auto w-24;
+        }
+
+        .column {
+          @apply flex h-full w-full flex-col justify-between gap-3;
+        }
+
+        .row {
+          @apply flex w-full flex-row justify-between;
+        }
+      }
+
+      .cart-card-segment {
+        @apply flex h-full w-full flex-col justify-between gap-4;
+      }
+
+      .cart-card-content,
+      .cart-card-actions {
+        @apply flex justify-between gap-2;
+      }
+
+      .input {
+        @apply w-16;
+      }
+    }
+  }
+</style> -->-->

package/src/components/_CartListSimple.astro

@@ -0,0 +1,148 @@
+---
+// import { getCollection } from 'astro:content'
+// import Element from 'fulldev-ui/components/Element.astro'
+// import Image from 'fulldev-ui/components/Image.astro'
+// import Button from './Button.astro'
+// import Heading from './Heading.astro'
+// import Input from './Input.astro'
+// import Price from './Price.astro'
+
+// const products = await getCollection('products')
+---
+
+<!-- <RootElement>
+  <Element
+    data-target="container"
+    if={true}
+    class:list="cart-list"
+  />
+
+  {
+    products.map((product) => (
+      <template data-target={product.slug}>
+        <Element
+          data-target="card"
+          class="cart-list-card"
+        >
+          <Image
+            data-target="image"
+            src="/placeholder-portrait.webp"
+          />
+          <Element class="cart-list-card-segment">
+            <Element class="cart-list-card-content">
+              <Heading
+                data-target="heading"
+                level={6}
+                text="Product title"
+              />
+              <Price
+                data-target="price"
+                value={999}
+              />
+            </Element>
+            <Element class="cart-list-card-actions">
+              <Input
+                data-target="input"
+                type="number"
+                name="quantity"
+                value={1}
+                min={0}
+              />
+              <Button
+                data-target="button"
+                variant="outline"
+                icon="trash"
+                type="button"
+              />
+            </Element>
+          </Element>
+        </Element>
+      </template>
+    ))
+  }
+</RootElement> --><!-- <RootElement>
+  <Element
+    data-target="container"
+    if={true}
+    class:list="cart-list"
+  >
+    {
+      products.map((product) => (
+        <Element
+          data-target={product.slug}
+          class="cart-list-card"
+        >
+          <Image
+            data-target="image"
+            src="/placeholder-portrait.webp"
+          />
+          <Element class="cart-list-card-segment">
+            <Element class="cart-list-card-content">
+              <Heading
+                data-target="heading"
+                level={6}
+                text="Product title"
+              />
+              <Price
+                data-target="price"
+                value={999}
+              />
+            </Element>
+            <Element class="cart-list-card-actions">
+              <Input
+                data-target="input"
+                type="number"
+                name="quantity"
+                value={1}
+                min={0}
+              />
+              <Button
+                data-target="button"
+                variant="outline"
+                icon="trash"
+                type="button"
+              />
+            </Element>
+          </Element>
+        </Element>
+      ))
+    }
+  </Element>
+</RootElement> --><!-- <script>
+  RootElement.ready(($) => {
+    const card = $('151-booster-box')
+    console.log(card)
+  })
+</script> -->
+<style is:global>
+  @layer fulldev {
+    .cart-list {
+      @apply flex flex-col text-foreground;
+
+      .cart-list-card {
+        @apply flex w-full gap-5;
+
+        &:not(:first-child) {
+          @apply mt-5 border-t pt-5;
+        }
+      }
+
+      .image {
+        @apply block h-auto w-24;
+      }
+
+      .cart-list-card-segment {
+        @apply flex h-full w-full flex-col justify-between gap-4;
+      }
+
+      .cart-list-card-content,
+      .cart-list-card-actions {
+        @apply flex justify-between gap-2;
+      }
+
+      .input {
+        @apply w-16;
+      }
+    }
+  }
+</style>

package/src/content/categories/mugs.md

@@ -0,0 +1,7 @@
+---
+title: Mug
+description: Lorem ipsum dolor sit
+---
+
+
+  

package/src/content/config.ts

@@ -1,17 +1,37 @@
 import { defineCollection } from 'astro:content'
 import imageLoader from 'fulldev-ui/loaders/imageLoader.ts'
+import { categorySchema } from 'fulldev-ui/schemas/categorySchema'
+import { docSchema } from 'fulldev-ui/schemas/docSchema'
 import imageSchema from 'fulldev-ui/schemas/imageSchema.ts'
-import pageSchema from 'fulldev-ui/schemas/pageSchema.ts'
-import presetSchema from 'fulldev-ui/schemas/presetSchema.ts'
+import { layoutSchema } from 'fulldev-ui/schemas/layoutSchema'
+import { pageSchema } from 'fulldev-ui/schemas/pageSchema'
+import { postSchema } from 'fulldev-ui/schemas/postSchema'
+import { productSchema } from 'fulldev-ui/schemas/productSchema'
 
 export const collections = {
   pages: defineCollection({
     type: 'content',
     schema: pageSchema,
   }),
-  presets: defineCollection({
+  posts: defineCollection({
+    type: 'content',
+    schema: postSchema,
+  }),
+  docs: defineCollection({
+    type: 'content',
+    schema: docSchema,
+  }),
+  categories: defineCollection({
+    type: 'content',
+    schema: categorySchema,
+  }),
+  products: defineCollection({
+    type: 'content',
+    schema: productSchema,
+  }),
+  layouts: defineCollection({
     type: 'data',
-    schema: presetSchema,
+    schema: layoutSchema,
   }),
   images: defineCollection({
     loader: imageLoader,

package/src/content/{pages/docs → docs}/_internationalization.mdx

@@ -1,5 +1,4 @@
 ---
-presets: [docs]
 title: Internationalization
 ---
 

package/src/content/{pages/docs → docs}/_using-blocks.mdx

@@ -1,5 +1,4 @@
 ---
-presets: [docs]
 title: Using Blocks
 ---
 

package/src/content/{pages/docs → docs}/_using-presets.mdx

@@ -1,5 +1,4 @@
 ---
-presets: [docs]
 title: Using Presets
 ---
 

package/src/content/{pages/docs → docs}/blocks.mdx

@@ -1,5 +1,4 @@
 ---
-presets: [docs]
 title: Blocks
 ---
 

package/src/content/{pages/docs → docs}/collections/images.mdx

@@ -1,5 +1,4 @@
 ---
-presets: [docs]
 title: images
 ---
 
@@ -32,6 +31,7 @@ alt: 'A placeholder landscape image'
 ## Using images
 
 ### Automatic (recommended)
+
 Use fulldev-ui's included `<Image />` component to get the following benefits out of the box:
 
 - You only have to pass the image id
@@ -40,6 +40,7 @@ Use fulldev-ui's included `<Image />` component to get the following benefits ou
 - Automatically optimizes image file
 
 This is also the easiest way to use images:
+
 ```astro
 ---
 import Image from 'fulldev-ui/components/Image.astro'
@@ -97,4 +98,4 @@ const image = images[image.src]
 ---
 
 <Image src={image()} alt={image.alt} />
-```
+```

package/src/content/{pages/docs → docs}/collections/pages.mdx

@@ -1,5 +1,4 @@
 ---
-presets: [docs]
 title: pages
 ---
 

package/src/content/{pages/docs → docs}/collections/presets.mdx

@@ -1,5 +1,4 @@
 ---
-presets: [docs]
 title: presets
 ---
 

package/src/content/{pages/docs → docs}/collections.mdx

@@ -1,5 +1,4 @@
 ---
-presets: [docs]
 title: Collections
 ---
 

package/src/content/{pages/docs → docs}/components/_card.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Card
 ---
 

package/src/content/{pages/docs → docs}/components/_dialog.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Dialog
 ---
 

package/src/content/{pages/docs → docs}/components/_drawer.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Drawer
 ---
 

package/src/content/{pages/docs → docs}/components/_localeswitcher.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: LocaleSwitcher
 ---
 

package/src/content/{pages/docs → docs}/components/_switch.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Switch
 ---
 

package/src/content/{pages/docs → docs}/components/_tagline.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Tagline
 ---
 

package/src/content/{pages/docs → docs}/components/_toggle.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Toggle
 ---
 

package/src/content/{pages/docs → docs}/components/avatar.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Avatar
 ---
 

package/src/content/{pages/docs → docs}/components/badge.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Badge
 ---
 

package/src/content/{pages/docs → docs}/components/badges.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Badges
 ---
 

package/src/content/{pages/docs → docs}/components/button.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Button
 ---
 

package/src/content/{pages/docs → docs}/components/buttons.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Buttons
 ---
 

package/src/content/{pages/docs → docs}/components/channel.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Channel
 ---
 

package/src/content/{pages/docs → docs}/components/channels.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Channels
 ---
 

package/src/content/{pages/docs → docs}/components/checkbox.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Checkbox
 ---
 

package/src/content/{pages/docs → docs}/components/code.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Code
 ---
 

package/src/content/{pages/docs → docs}/components/heading.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Heading
 ---
 

package/src/content/{pages/docs → docs}/components/icon.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Icon
 ---
 

package/src/content/{pages/docs → docs}/components/image.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Image
 ---
 

package/src/content/{pages/docs → docs}/components/input.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Input
 ---
 

package/src/content/{pages/docs → docs}/components/label.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Label
 ---
 

package/src/content/{pages/docs → docs}/components/lead.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Lead
 ---
 

package/src/content/{pages/docs → docs}/components/link.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Link
 ---
 

package/src/content/{pages/docs → docs}/components/links.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: Links
 ---
 

package/src/content/{pages/docs → docs}/components/list.mdx

@@ -1,6 +1,4 @@
 ---
-presets: [docs]
-
 title: List
 ---