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

package/src/components/_CartList copy.astro

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

@@ -1,148 +0,0 @@
----
-// 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/components/sections.astro

@@ -1,28 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Section from './Section.astro'
-
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  sections?: ComponentProps<typeof Section>[] | undefined
-}
-
-const { sections, ...rest } = Astro.props
----
-
-<Element
-  class:list="sections"
-  {...rest}
->
-  {sections?.map((section) => <Section {...section} />)}
-</Element>
-
-<style is:global >
-  @layer fulldev {
-    .sections {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-</style>

package/src/content/docs/components/lead.mdx

@@ -1,49 +0,0 @@
----
-title: Lead
----
-
-# Lead
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Lead from 'fulldev-ui/components/Lead.astro'
----
-
-<Lead>The quick brown fox jumps over the lazy dog</Lead>
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-### `size`
-
-```astro live
----
-import Lead from 'fulldev-ui/components/Lead.astro'
----
-
-<Lead size="sm">
-  The quick brown fox jumps over the lazy dog because he is quick
-</Lead>
-<Lead size="md">
-  The quick brown fox jumps over the lazy dog because he is quick
-</Lead>
-<Lead size="lg">
-  The quick brown fox jumps over the lazy dog because he is quick
-</Lead>
-```
-
-### `text`
-
-```astro live
----
-import Lead from 'fulldev-ui/components/Lead.astro'
----
-
-<Lead text="The quick brown fox jumps over the lazy dog" />
-```

package/src/content/docs/components/paragraph.mdx

@@ -1,49 +0,0 @@
----
-title: Paragraph
----
-
-# Paragraph
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
----
-
-<Paragraph>The quick brown fox jumps over the lazy dog</Paragraph>
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-### `size`
-
-```astro live
----
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
----
-
-<Paragraph size="sm">
-  The quick brown fox jumps over the lazy dog because he is quick
-</Paragraph>
-<Paragraph size="md">
-  The quick brown fox jumps over the lazy dog because he is quick
-</Paragraph>
-<Paragraph size="lg">
-  The quick brown fox jumps over the lazy dog because he is quick
-</Paragraph>
-```
-
-### `text`
-
-```astro live
----
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
----
-
-<Paragraph text="The quick brown fox jumps over the lazy dog" />
-```

package/src/content/layouts/docs.yml

@@ -1,70 +0,0 @@
-# sidebar:
-# menu:
-#   - heading: Get Started
-#     links:
-#       - docs
-#       - docs/installation
-#       - docs/customization
-#       - docs/frameworks
-#       - docs/components
-#       - docs/collections
-#   - heading: Collections
-#     links:
-#       - docs/collections/pages
-#       - docs/collections/presets
-#       - docs/collections/images
-#   - heading: Components
-#     links:
-#       - docs/components/avatar
-#       - docs/components/badge
-#       - docs/components/badges
-#       - docs/components/button
-#       - docs/components/buttons
-#       # - docs/components/card
-#       # - docs/components/cards
-#       # - docs/components/cart
-#       # - docs/components/cart-form
-#       # - docs/components/cart-list
-#       # - docs/components/cart-summary
-#       - docs/components/channel
-#       - docs/components/channels
-#       - docs/components/checkbox
-#       - docs/components/code
-#       # - docs/components/dialog
-#       # - docs/components/drawer
-#       # - docs/components/element
-#       # - docs/components/footer
-#       # - docs/components/form
-#       # - docs/components/head
-#       # - docs/components/header
-#       - docs/components/heading
-#       - docs/components/icon
-#       - docs/components/image
-#       - docs/components/input
-#       - docs/components/label
-#       - docs/components/lead
-#       - docs/components/link
-#       - docs/components/links
-#       - docs/components/list
-#       # - docs/components/locale-switcher
-#       - docs/components/logo
-#       - docs/components/menu
-#       - docs/components/paragraph
-#       # - docs/components/price
-#       - docs/components/prose
-#       - docs/components/rating
-#       # - docs/components/search
-#       # - docs/components/section
-#       # - docs/components/sections
-#       - docs/components/select
-#       # - docs/components/sidebar
-#       - docs/components/social
-#       - docs/components/socials
-#       - docs/components/switch
-#       # - docs/components/table
-#       - docs/components/tagline
-#       # - docs/components/text
-#       - docs/components/textarea
-#       - docs/components/themer
-#       # - docs/components/toc
-#       # - docs/components/writeup

package/src/layouts/DocLayout.astro

@@ -1,17 +0,0 @@
----
-import type { CollectionEntry } from 'astro:content'
-import Prose from 'fulldev-ui/components/Prose.astro'
-import Layout from 'fulldev-ui/layouts/Layout.astro'
-
-type Props = CollectionEntry<'docs'>
-
-const { render } = Astro.props
----
-
-<Layout>
-  <Prose
-    {render}
-    toc={true}
-  />
-  <slot />
-</Layout>

package/src/layouts/Layout.astro

@@ -1,79 +0,0 @@
----
-import type { CollectionEntry, ContentCollectionKey } from 'astro:content'
-import { getEntry } from 'astro:content'
-import Banner from 'fulldev-ui/blocks/Banner.astro'
-import Footer from 'fulldev-ui/blocks/Footer.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Head from 'fulldev-ui/components/Head.astro'
-import Header from 'fulldev-ui/components/Header.astro'
-import Sidebar from 'fulldev-ui/components/Sidebar.astro'
-import Subheader from 'fulldev-ui/components/Subheader.astro'
-
-type Props = CollectionEntry<ContentCollectionKey>
-
-const layout = await getEntry('layouts', 'base')
-
-const { banner, header, subheader, sidebar, footer, theme, code } = layout.data
----
-
-<!doctype html>
-<html class="layout">
-  <Head
-    {...layout.data}
-    {...Astro.props.data}
-  />
-  <Element
-    class:list="layout-body"
-    as="body"
-    {theme}
-  >
-    <Banner text={banner} />
-    <Header {...header} />
-    <Subheader {...subheader} />
-    <slot name="before" />
-
-    <Element class:list={['layout-container', { 'has-sidebar': sidebar }]}>
-      <Sidebar {...sidebar} />
-      <main class="layout-main">
-        <slot />
-      </main>
-    </Element>
-    <Footer {...footer} />
-    <slot name="after" />
-    <Fragment set:html={code?.body} />
-
-    <style is:global>
-      @layer fulldev {
-        .layout {
-          @apply w-full font-sans text-base leading-relaxed text-foreground;
-          color-scheme: light;
-
-          &.dark {
-            color-scheme: dark;
-          }
-        }
-
-        .layout-body {
-          @apply flex min-h-screen w-full flex-col bg-background font-sans text-foreground;
-        }
-
-        .layout-container {
-          @apply relative flex h-full w-full flex-grow;
-
-          &.has-sidebar {
-            @apply container px-0;
-          }
-        }
-
-        .layout-main {
-          @apply flex w-full max-w-full flex-1 shrink flex-col;
-
-          /* full width minus sidebar width */
-          @media (min-width: 1024px) {
-            max-width: calc(100% - var(--sidebar-width, 0px));
-          }
-        }
-      }
-    </style>
-  </Element>
-</html>

package/src/layouts/PageLayout.astro

@@ -1,20 +0,0 @@
----
-import type { CollectionEntry } from 'astro:content'
-import Prose from 'fulldev-ui/components/Prose.astro'
-import Sections from 'fulldev-ui/components/sections.astro'
-import Layout from 'fulldev-ui/layouts/Layout.astro'
-
-type Props = CollectionEntry<'pages'>
-
-const { render } = Astro.props
-const { sections } = Astro.props.data
----
-
-<Layout {...Astro.props}>
-  <Prose
-    {render}
-    toc={false}
-  />
-  <Sections {sections} />
-  <slot />
-</Layout>

package/src/layouts/PostLayout.astro

@@ -1,20 +0,0 @@
----
-import type { CollectionEntry } from 'astro:content'
-import Prose from 'fulldev-ui/components/Prose.astro'
-import Sections from 'fulldev-ui/components/sections.astro'
-import Layout from 'fulldev-ui/layouts/Layout.astro'
-
-type Props = CollectionEntry<'posts'>
-
-const { render } = Astro.props
-const { sections } = Astro.props.data
----
-
-<Layout {...Astro.props}>
-  <Prose
-    {render}
-    toc={true}
-  />
-  <Sections {sections} />
-  <slot />
-</Layout>