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

package/src/components/Toc.astro

@@ -1,16 +1,17 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import type { CollectionEntry } from 'astro:content'
 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 type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'aside'> {
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  heading?: ComponentProps<typeof Heading>['text']
   render?: CollectionEntry<'pages'>['render'] | undefined
 }
 
-const { size = 'sm', render } = Astro.props
+const { size = 'sm', heading, render, ...rest } = Astro.props
 
 const headings = render ? (await render())?.headings : []
 const filteredHeadings = headings?.filter(
@@ -18,114 +19,55 @@ const filteredHeadings = headings?.filter(
 )
 ---
 
-<input
-  id="toc"
-  class="toc-checkbox"
-  type="checkbox"
-/>
-
 <Element
+  if={filteredHeadings?.length > 0}
   class:list="toc"
-  as="aside"
   {size}
+  {...rest}
 >
+  <Heading
+    level={6}
+    text={heading}
+  />
   {
-    filteredHeadings?.length > 0 && (
-      <>
-        <Heading
-          text="On this page"
-          level={6}
-        />
-        <nav class="toc-nav">
-          <Button
-            variant="link"
-            href={`#${filteredHeadings[0]?.slug}`}
-            text="Overview"
-            class="toc-link toc-link-h2"
-          />
-          {filteredHeadings.map((heading: any) => (
-            <Button
-              variant="link"
-              href={`#${heading.slug}`}
-              text={heading.text}
-              class={`toc-link toc-link-h${heading.depth}`}
-            />
-          ))}
-        </nav>
-      </>
-    )
+    filteredHeadings?.map((button: any) => (
+      <Button
+        class:list={`depth-${button.depth}`}
+        href={`#${button.slug}`}
+        variant="link"
+        text={button.text}
+      />
+    ))
   }
 </Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
-    .toc-checkbox {
-      display: none;
-    }
-
-    @media (max-width: 1023.999px) {
-      body:has(.toc-checkbox:checked) {
-        overflow: hidden;
-      }
-    }
-
     .toc {
-      --toc-width: 240px;
-
       display: none;
-      position: fixed;
-      top: var(--header-height, 0px);
-      right: 0;
-      flex-shrink: 0;
-      flex-direction: column;
-      justify-content: flex-start;
-      gap: calc(var(--space-4) + var(--space-1));
-      z-index: 10;
-      border-left-width: 1px;
-      border-style: solid;
-      border-color: var(--color-a6);
-      background-color: var(--color-background);
-      padding: var(--space-md-6) var(--gutter);
-      width: 100%;
-      max-height: calc(100vh - var(--header-height, 0px));
-      overflow-y: auto;
-
-      &:is(.toc-checkbox:checked + &) {
-        display: flex;
-      }
 
       @media (min-width: 1024px) {
         display: flex;
         position: sticky;
-        border-left-width: 1px;
-        width: var(--toc-width);
-      }
-
-      .button + .heading {
-        margin-top: var(--space-5);
-      }
-
-      .toc-nav {
-        display: flex;
+        top: var(--header-height, 0px);
+        bottom: 0;
+        flex-shrink: 0;
         flex-direction: column;
-      }
-
-      .toc-link {
-        text-align: left;
-      }
-
-      .toc-link-h2 {
-        margin-top: var(--space-3);
-      }
-
-      .toc-link-h3 {
-        margin-top: var(--space-3);
-        margin-left: var(--space-4);
-      }
-
-      .toc-link-h4 {
-        margin-top: var(--space-2);
-        margin-left: var(--space-5);
+        justify-content: flex-start;
+        gap: var(--space-4);
+        z-index: 10;
+        padding: var(--space-md-6) var(--gutter);
+        width: calc(var(--space-7) * 4);
+        height: calc(100vh - var(--header-height, 0px));
+        overflow-y: auto;
+
+        .depth-3 {
+          padding-left: var(--space-4);
+        }
+
+        .depth-4 {
+          padding-left: var(--space-5);
+        }
       }
     }
   }

package/src/components/experimental/Gallery.astro

@@ -1,180 +1,104 @@
 ---
-import Icon from 'fulldev-ui/components/Icon.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 
-const { images, direction } = Astro.props
+const { images } = Astro.props
 ---
 
 <script>
-  const carousel = document.querySelector('.gallery .large-carousel')
-  const icon = document.querySelector('.gallery .icon')
-  const smallImages = document.querySelectorAll('.gallery .small-image')
-
-  carousel &&
-    icon?.addEventListener('click', () => {
-      const carouselWidth = (carousel as HTMLElement).offsetWidth
-      const currentScroll = carousel.scrollLeft
-      const maxScroll = carousel.scrollWidth - carouselWidth
-
-      let scrollAmount = currentScroll + carouselWidth
-      if (scrollAmount > maxScroll) {
-        scrollAmount = 0 // Reset to beginning if we're at the end
-      }
-
-      carousel.scrollTo({
-        left: scrollAmount,
-        behavior: 'smooth',
-      })
-    })
-
-  carousel &&
-    smallImages?.forEach((image, i) => {
-      image.addEventListener('click', () => {
-        const imageWidth = (carousel as HTMLElement).offsetWidth
-        carousel.scrollTo({
-          left: i * imageWidth,
-          behavior: 'smooth',
+  const setupGallery = (document: Document) => {
+    const galleries = document.querySelectorAll('.gallery')
+
+    galleries.forEach((gallery) => {
+      const carousel = gallery.querySelector('.large-carousel')
+      const smallImages = gallery.querySelectorAll('.small-image')
+
+      carousel &&
+        smallImages?.forEach((image, i) => {
+          image.addEventListener('click', () => {
+            const largeImages = carousel.querySelectorAll('.large-image')
+            if (largeImages[i]) {
+              largeImages[i].scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'start',
+              })
+            }
+          })
         })
-      })
     })
+  }
+
+  setupGallery(document)
+
+  document.addEventListener('astro:before-swap', (event) => {
+    setupGallery(event.newDocument)
+  })
 </script>
 
-<div
-  class:list={[
-    'full',
-    'gallery',
-    {
-      [`direction-${direction}`]: direction,
-    },
-  ]}
->
-  <div class="large-container">
-    <div class="large-carousel">
-      {
-        images?.map((image: any) => (
-          <Image
-            class="large-image"
-            src={image}
-          />
-        ))
-      }
-    </div>
+<Element class:list={['gallery']}>
+  <Element class="large-carousel">
     {
-      images?.length > 1 && (
-        <Icon
-          class="icon"
-          name="swipe-left"
+      images?.map((image: any) => (
+        <Image
+          class="large-image"
+          {...(typeof image === 'string' ? { src: image } : image)}
         />
-      )
+      ))
     }
-  </div>
-  <div class="small-carousel">
+  </Element>
+  <Element class="small-carousel">
     {
       images?.length > 1 &&
         images.map((image: any) => (
           <Image
             class="small-image"
-            src={image}
+            {...(typeof image === 'string' ? { src: image } : image)}
           />
         ))
     }
-  </div>
-</div>
+  </Element>
+</Element>
 
 <style is:global lang="scss">
   .gallery {
     display: flex;
     position: relative;
-    column-gap: var(--space-4);
-    row-gap: var(--space-1);
     flex-direction: column;
-
-    @media (min-width: 1024px) {
-      flex-direction: row-reverse;
-    }
-
-    .large-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      &:hover .icon {
-        opacity: 1;
-      }
-
-      .icon {
-        position: absolute;
-        right: var(--space-3);
-        opacity: 0.5;
-        animation: swipe-icon 1.6s ease-in-out infinite;
-        transition: opacity 0.2s ease-in-out;
-        font-size: calc(var(--text-2) * 1.7);
-
-        @media (min-width: 1024px) {
-          display: none;
-        }
-      }
-
-      @keyframes swipe-icon {
-        0%,
-        100% {
-          right: var(--space-3);
-        }
-        50% {
-          right: calc(var(--space-3) * 2);
-        }
-      }
-    }
+    gap: var(--space-1) var(--space-4);
 
     .small-carousel,
     .large-carousel {
-      --column-width: 100%;
       display: flex;
       position: relative;
-      align-items: flex-start;
+      align-items: center;
       gap: var(--space-4);
-
       box-sizing: border-box;
       padding-bottom: var(--space-4);
       width: 100%;
-      overflow-x: auto;
+      overflow: auto;
       scroll-behavior: smooth;
       scroll-snap-type: x mandatory;
 
-      > .root {
+      > .image {
         flex-grow: 0;
         flex-shrink: 0;
         width: var(--column-width);
         scroll-snap-align: center;
       }
+    }
 
-      &.position-inset {
-        margin-right: calc(var(--inner-x) * -1);
-        margin-left: calc(var(--inner-x) * -1);
-        padding-right: var(--inner-x);
-        padding-left: var(--inner-x);
-        width: calc(100% + var(--inner-x) * 2);
-      }
+    .large-carousel {
+      --column-width: 100%;
     }
 
     .small-carousel {
       --column-width: var(--space-7);
 
-      @media (min-width: 1024px) {
-        --column-width: 100%;
-
-        flex-direction: column;
-        width: 40%;
+      .image:hover {
+        opacity: 0.8;
+        cursor: pointer;
       }
     }
-
-    .small-image,
-    .large-image {
-    }
-
-    .small-image:hover {
-      opacity: 0.8;
-      cursor: pointer;
-    }
   }
 </style>

package/src/components/experimental/Prose.astro

@@ -151,6 +151,38 @@ const { as = 'div', ...rest } = Astro.props
       }
     }
 
+    ul,
+    ol {
+      display: flex;
+      flex-direction: column;
+      margin: var(--space-4) 0;
+      padding-left: var(--space-5);
+      color: var(--color-11);
+      font-size: var(--text-2);
+      line-height: 1.625;
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    li {
+      align-items: center;
+      margin-bottom: var(--space-2);
+      max-width: calc(var(--space-4) * 44);
+      color: var(--color-11);
+      font-size: var(--text-2);
+      line-height: 1.625;
+    }
+
+    li:last-child {
+      margin-bottom: 0;
+    }
+
     p code {
       background-color: var(--base-12);
       padding: 0 var(--space-1);

package/src/content/config.ts

@@ -2,7 +2,6 @@ import { defineCollection } from 'astro:content'
 import imageLoader from 'fulldev-ui/loaders/imageLoader.ts'
 import imageSchema from 'fulldev-ui/schemas/imageSchema.ts'
 import pageSchema from 'fulldev-ui/schemas/pageSchema.ts'
-import presetSchema from 'fulldev-ui/schemas/presetSchema.ts'
 
 export const collections = {
   pages: defineCollection({
@@ -11,7 +10,7 @@ export const collections = {
   }),
   presets: defineCollection({
     type: 'data',
-    schema: presetSchema,
+    schema: pageSchema,
   }),
   images: defineCollection({
     loader: imageLoader,

package/src/content/pages/blocks/_product.mdx

@@ -13,8 +13,79 @@ import Product from 'fulldev-ui/blocks/Product.astro'
   heading="Basic Tee"
   price={48}
   rating={5}
-  image="/images/placeholder-landscape.webp"
-  buttons={[{ text: 'Add to cart' }]}
+  image="placeholder-landscape.webp"
+  form={{ submit: 'Add to cart' }}
+  description="Oversized white tee made of 100% cotton."
+  list={[
+    'Shortsleeve',
+    'Ribbed collar',
+    'Runs large',
+    'Unisex',
+    'Material: 100% cotton',
+    'Imported',
+  ]}
+/>
+```
+
+```astro live
+---
+import Product from 'fulldev-ui/blocks/Product.astro'
+---
+
+<Product
+  heading="Basic Tee"
+  price={48}
+  rating={5}
+  images={[
+    '/images/blocks/colleagues.png',
+    '/images/blocks/content.png',
+    '/images/blocks/cta.png',
+    '/images/blocks/features.png',
+    '/images/blocks/footer.png',
+    '/images/blocks/header.png',
+    '/images/blocks/hero.png',
+    '/images/blocks/intro.png',
+    '/images/blocks/posts.png',
+    '/images/blocks/prices.png',
+    '/images/blocks/reviews.png',
+  ]}
+  form={{ submit: 'Add to cart' }}
+  description="Oversized white tee made of 100% cotton."
+  list={[
+    'Shortsleeve',
+    'Ribbed collar',
+    'Runs large',
+    'Unisex',
+    'Material: 100% cotton',
+    'Imported',
+  ]}
+/>
+```
+
+```astro live
+---
+import Product from 'fulldev-ui/blocks/Product.astro'
+---
+
+<Product
+  heading="Basic Tee"
+  price={48}
+  rating={5}
+  images={[
+    '/images/blocks/colleagues.png',
+    '/images/blocks/content.png',
+    '/images/blocks/cta.png',
+    '/images/blocks/features.png',
+    '/images/blocks/footer.png',
+    '/images/blocks/header.png',
+    '/images/blocks/hero.png',
+    '/images/blocks/intro.png',
+    '/images/blocks/posts.png',
+    '/images/blocks/prices.png',
+    '/images/blocks/reviews.png',
+  ]}
+  gallery="vertical"
+  form={{ submit: 'Add to cart' }}
   description="Oversized white tee made of 100% cotton."
   list={[
     'Shortsleeve',

package/src/content/pages/index.mdx

@@ -1,7 +1,5 @@
 ---
 presets: [base]
-sidebar: false
-toc: false
 
 seo:
   title: Fulldev UI - Astro component and block library, open-source

package/src/content/pages/layouts/_layout.mdx

@@ -1,21 +1,14 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: Layout
 ---
 
-```astro live
----
-import Hero from 'fulldev-ui/blocks/Hero.astro'
-import Layout from 'fulldev-ui/layouts/Layout.astro'
----
+import Layout from 'fulldev-ui/layouts/Layout.astro?raw'
+import { Code } from 'astro:components'
+
+# Layout
+
+The Layout component is used to wrap the content of a page. It provides a structured template for your website.
 
-<Layout>
-  <Hero
-    heading="Layout"
-    text="The Layout component is used to wrap the content of a page."
-    align="center"
-    frame="viewport"
-  />
-</Layout>
-```
+<Code code={Layout} lang="astro" />

package/src/content/pages/layouts/docslayout.mdx

@@ -1,5 +1,14 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: DocsLayout
 ---
+
+import Layout from 'fulldev-ui/layouts/DocsLayout.astro?raw'
+import { Code } from 'astro:components'
+
+# DocsLayout
+
+The DocsLayout component is used to wrap the content of a page in a sidebar and a main content area and table of contents.
+
+<Code code={Layout} lang="astro" />

package/src/content/pages/overview/components.mdx

@@ -68,3 +68,8 @@ import Button from 'fulldev-ui/components/Button.astro'
 
 {/* This will render a button */}
 <Button if={true} />
+```
+
+## Overriding Components
+
+You can override components by creating a new component with the same name as one from the library in the **src/components** directory and adding your custom code. This also works for blocks and layouts.