fulldev-ui 0.4.33 → 0.5.0-beta-16

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/Logo.astro

@@ -1,21 +1,38 @@
 ---
 import type { ComponentProps } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 
-type Props = Omit<ComponentProps<typeof Image>, 'position' | 'frame'> & {}
+interface Props extends ComponentProps<typeof Image> {
+  company?: string | undefined
+}
 
-const { ...rest } = Astro.props
+const { company, ...rest } = Astro.props as Props
 ---
 
-<Image
+<Element
+  as="a"
+  href="/"
   class:list="logo"
-  {...rest}
-/>
+>
+  {company ? <Fragment set:html={company} /> : <Image {...rest} />}
+</Element>
 
 <style is:global lang="scss">
-  .logo {
-    max-width: calc(15 * var(--space-2));
-    height: 100%;
-    object-fit: contain;
+  @layer fulldev {
+    .logo {
+      display: flex;
+      align-items: center;
+      color: var(--color-12);
+      font-weight: 700;
+      font-size: var(--text-6);
+      line-height: 1.1;
+
+      .image {
+        max-width: calc(15 * var(--space-2));
+        height: 100%;
+        object-fit: contain;
+      }
+    }
   }
 </style>

package/src/components/experimental/Prose.astro

@@ -1,19 +1,19 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }>
 
 const { as = 'div', ...rest } = Astro.props
 ---
 
-<Root
+<Element
   class:list="prose"
   {as}
   {...rest}
 >
   <slot />
-</Root>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -21,10 +21,8 @@ const { as = 'div', ...rest } = Astro.props
       width: 100%;
       scroll-margin-top: var(--space-6);
       color: var(--color-11);
-      font-weight: var(--font-weight);
       font-size: var(--text-3);
       line-height: 1.7;
-      font-family: var(--font-family);
 
       > {
         .astro-code,
@@ -152,5 +150,43 @@ const { as = 'div', ...rest } = Astro.props
         text-decoration: underline;
       }
     }
+
+    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);
+      color: var(--base-1);
+    }
   }
 </style>

package/src/components/experimental/Video.astro

@@ -2,7 +2,7 @@
 // 
 type Props = any & {
   src: string
-  thumbnail?: string
+  thumbnail?: string | undefined
 }
 
 const { src, thumbnail } = Astro.props

package/src/components/experimental/Window.astro

@@ -28,7 +28,6 @@ const isComponent =
     <div class="block window">
       <div class="button-header">
         <Button
-          as="label"
           for={id}
           variant="secondary"
         >
@@ -64,7 +63,7 @@ const isComponent =
 
         .astro-code {
           margin: 0;
-          background-color: var(--base-2) !important;
+          background-color: #191919 !important;
           padding: var(--space-5);
         }
       }
@@ -88,8 +87,8 @@ const isComponent =
           border-radius: 0px;
 
           .astro-code {
-            border: none;
-            border-radius: 0px;
+            border: none !important;
+            border-radius: 0px !important;
           }
         }
       }

package/src/components/sections.astro

@@ -0,0 +1,28 @@
+---
+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 lang="scss">
+  @layer fulldev {
+    .sections {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+</style>

package/src/content/config.ts

@@ -1,17 +1,20 @@
 import { defineCollection } from 'astro:content'
-import { page } from 'fulldev-ui/schemas/page'
+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({
     type: 'content',
-    schema: page,
+    schema: pageSchema,
   }),
-  records: defineCollection({
+  presets: defineCollection({
     type: 'data',
-    schema: page,
+    schema: presetSchema,
   }),
-  settings: defineCollection({
-    type: 'data',
-    schema: page,
+  images: defineCollection({
+    loader: imageLoader,
+    schema: imageSchema,
   }),
 }

package/src/content/pages/base/_dialog.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Dialog
 ---

package/src/content/pages/base/_drawer.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Drawer
 ---

package/src/content/pages/base/_localeswitcher.mdx

@@ -0,0 +1,17 @@
+---
+presets: [docs]
+
+title: LocaleSwitcher
+---
+
+# Theme Switcher
+
+```astro live
+---
+import LocaleSwitcher from 'fulldev-ui/components/LocaleSwitcher.astro'
+---
+
+<LocaleSwitcher />
+```
+
+## Props

package/src/content/pages/base/_switch.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Switch
 ---

package/src/content/pages/base/badge.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Badge
 ---
@@ -56,15 +55,5 @@ import Badge from 'fulldev-ui/components/Badge.astro'
 import Badge from 'fulldev-ui/components/Badge.astro'
 ---
 
-<Badge radius="none">Badge</Badge>
-<Badge radius="auto">Badge</Badge>
-<Badge radius="full">Badge</Badge>
-```
-
-```astro live
----
-import Badge from 'fulldev-ui/components/Badge.astro'
----
-
 <Badge icon="circle" text="Badge" />
 ```

package/src/content/pages/base/button.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Button
 ---
@@ -59,13 +58,3 @@ import Button from 'fulldev-ui/components/Button.astro'
 <Button color="base" text="Button" />
 <Button color="brand" text="Button" />
 ```
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button radius="none" text="Button" />
-<Button radius="auto" text="Button" />
-<Button radius="full" text="Button" />
-```

package/src/content/pages/base/card.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Card
 ---
@@ -32,14 +31,13 @@ import Card from 'fulldev-ui/components/Card.astro'
 ---
 
 <Card
-  frame="panel"
   size="sm"
   heading="Lorem ipsum dolor"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 />
 
 <Card
-  frame="fill"
+  panel={false}
   size="sm"
   heading="Lorem ipsum dolor"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
@@ -52,21 +50,18 @@ import Card from 'fulldev-ui/components/Card.astro'
 ---
 
 <Card
-  frame="panel"
   size="sm"
   heading="Lorem ipsum dolor"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 />
 
 <Card
-  frame="panel"
   size="md"
   heading="Lorem ipsum dolor"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 />
 
 <Card
-  frame="panel"
   size="lg"
   heading="Lorem ipsum dolor"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
@@ -79,36 +74,14 @@ import Card from 'fulldev-ui/components/Card.astro'
 ---
 
 <Card
-  frame="panel"
   color="base"
   heading="Lorem ipsum dolor"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 />
 
 <Card
-  frame="panel"
   color="brand"
   heading="Lorem ipsum dolor"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 />
 ```
-
-```astro live
----
-import Card from 'fulldev-ui/components/Card.astro'
----
-
-<Card
-  frame="panel"
-  radius="none"
-  heading="Lorem ipsum dolor"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-/>
-
-<Card
-  frame="panel"
-  radius="auto"
-  heading="Lorem ipsum dolor"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-/>
-```

package/src/content/pages/base/checkbox.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Checkbox
 ---

package/src/content/pages/base/icon.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Icon
 ---

package/src/content/pages/base/image.mdx

@@ -0,0 +1,42 @@
+---
+presets: [docs]
+
+title: Image
+---
+
+# Image
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+To use content collections for alt texts, see <Link href="/overview/content-layer/#image-alt-collections">generateImageEntries</Link>.
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Image from 'fulldev-ui/components/Image.astro'
+---
+
+<Image src="placeholder-landscape.webp" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Image from 'fulldev-ui/components/Image.astro'
+---
+
+{/* image in public/images/ */}
+<Image src="/images/placeholder-landscape.webp" />
+
+{/* optimized image in public/images/ using astro:assets */}
+<Image src="/images/placeholder-landscape.webp" width={600} height={400} />
+
+{/* automatically optimized image in src/images/ using astro:assets */}
+<Image src="placeholder-landscape.webp" />
+```