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

package/src/schemas/menu.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import { linkSchema } from 'fulldev-ui/schemas/link.ts'
+
+export const menuSchema = z
+  .object({
+    heading: z.string().optional(),
+    links: linkSchema.array().optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Menu>>

package/src/schemas/page.ts

@@ -0,0 +1,39 @@
+import { z } from 'astro:content'
+import { blockSchema } from 'fulldev-ui/schemas/block.ts'
+import { buttonSchema } from 'fulldev-ui/schemas/button.ts'
+import { headSchema } from 'fulldev-ui/schemas/head.ts'
+import { imageSchema } from 'fulldev-ui/schemas/image.ts'
+import { menuSchema } from 'fulldev-ui/schemas/menu.ts'
+import { pathSchema } from 'fulldev-ui/schemas/path.ts'
+
+export const pageSchema = z
+  .object({
+    _layout: z.string().optional(),
+    _schema: z.string().optional(),
+    _block: z.string().optional(),
+    href: z.string().optional(),
+    draft: z.boolean().optional(),
+    title: z.string().optional(),
+    description: z.string().optional(),
+    list: z.string().array().optional(),
+    price: z.number().optional(),
+    soldout: z.boolean().optional(),
+    order: z.number().optional(),
+    variants: z.record(z.string(), z.string().array()).optional(),
+    image: imageSchema.optional(),
+    images: imageSchema.array().optional(),
+    head: headSchema.optional(),
+    button: buttonSchema.optional(),
+    buttons: buttonSchema.array().optional(),
+    banner: blockSchema.optional(),
+    navigation: blockSchema.optional(),
+    header: blockSchema.optional(),
+    sections: blockSchema.array().optional(),
+    subheader: blockSchema.array().optional(),
+    sidebar: menuSchema.array().optional(),
+    footer: blockSchema.optional(),
+    parents: pathSchema('pages').array().optional(),
+  })
+  .strict()
+
+export type PageSchema = z.infer<typeof pageSchema>

package/src/schemas/{utils/pathSchema.ts → path.ts}

@@ -1,7 +1,7 @@
 import { reference, z, type AnyEntryMap } from 'astro:content'
 
 // TODO: preprocess instead
-export default <C extends keyof AnyEntryMap>(collection: C) =>
+export const pathSchema = <C extends keyof AnyEntryMap>(collection: C) =>
   z
     .string()
     .transform((value) => {

package/src/schemas/textarea.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import type Textarea from 'fulldev-ui/components/Textarea.astro'
+
+export const textareaSchema = z
+  .object({
+    label: z.string().optional(),
+    placeholder: z.string().optional(),
+    value: z.string().optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Textarea>>

package/src/stores/cart.svelte.ts

@@ -0,0 +1,78 @@
+import { derived, writable } from 'svelte/store'
+
+export type CartItem = {
+  uid: string
+  quantity: number
+  slug: string
+  title: string
+  price?: number | undefined
+  image?: string | undefined
+  variants?:
+    | {
+        [k: string]: string | undefined
+      }
+    | undefined
+}
+
+export type Cart = CartItem[]
+
+const isServer = import.meta.env.SSR
+const storageJson = !isServer && localStorage.getItem('cart')
+const storageData = storageJson ? JSON.parse(storageJson) : []
+
+export const cart = writable<Cart>(storageData)
+
+cart.subscribe((newCart) => {
+  if (isServer) return
+  const json = JSON.stringify(newCart)
+  localStorage.setItem('cart', json)
+})
+
+export const getUid = (
+  slug: CartItem['slug'],
+  variants?: CartItem['variants']
+) => (variants ? `${slug}-${Object.values(variants)?.join('-')}` : slug)
+
+export const getItemIndex = (currentCart: Cart, uid: CartItem['uid']) => {
+  const index = currentCart.findIndex((i) => i.uid === uid)
+  if (index === -1) throw new Error(`Item with uid ${uid} not found`)
+  return index
+}
+
+export const addItem = (item: CartItem) =>
+  cart.update((currentCart) => [...currentCart, item])
+
+export const removeItem = (uid: CartItem['uid']) =>
+  cart.update((currentCart) => {
+    const index = getItemIndex(currentCart, uid)
+    currentCart.splice(index, 1)
+    return [...currentCart]
+  })
+
+export const updateQuantity = (
+  uid: CartItem['uid'],
+  quantity: CartItem['quantity']
+) =>
+  cart.update((currentCart) => {
+    const index = getItemIndex(currentCart, uid)
+    if (currentCart[index]) currentCart[index].quantity = quantity
+    return [...currentCart]
+  })
+
+export const openCart = () => {
+  const cartDialog = document.querySelector('dialog#cart')
+  if (cartDialog instanceof HTMLDialogElement) cartDialog.showModal()
+}
+
+export const closeCart = () => {
+  const cartDialog = document.querySelector('dialog#cart')
+  if (cartDialog instanceof HTMLDialogElement) cartDialog.close()
+}
+
+export const totalPrice = derived(cart, ($cart) => {
+  return $cart.length
+  // return $cart.reduce(
+  //   (acc, item) => acc + (item.price || 0) * (item.quantity || 0),
+  //   0
+  // )
+})

package/src/stores/cart.ts

@@ -1,23 +1,76 @@
 import { persistentAtom } from '@nanostores/persistent'
 import { computed } from 'nanostores'
 
-// type Item = CollectionEntry<'products'>['data'] & {
-//   quantity: number
-// }
+type Item = {
+  slug: string
+  title: string
+  price: number
+  image: string
+  quantity: number
+  variants: string[]
+}
 
-type Item = any
+type Cart = Item[] | []
 
-export const $cart = persistentAtom<Item[] | []>('cart', [], {
+export const $cart = persistentAtom<Cart>('cart', [], {
   encode: JSON.stringify,
   decode: JSON.parse,
 })
 
-// export const cartIsOpen = atom(false)
+// for svelte files
+export const cart = $cart
+
+export const getCart = () => $cart.get()
+
+export const setCart = (cart: Cart) => $cart.set(cart)
+
+export const removeItem = (slug: string) => {
+  const currentCart = getCart()
+  const newCart = [...currentCart]
+  const index = currentCart.findIndex((item) => item.slug === slug)
+  newCart.splice(index, 1)
+  $cart.set(newCart)
+}
+
+export const addItem = (item: Item) => {
+  const currentCart = getCart()
+  const newCart = [...currentCart]
+  const index = currentCart.findIndex(
+    (i) => i.slug === item.slug && i.variants.join() === item.variants.join()
+  )
+  if (index === -1) newCart.push(item)
+  else {
+    let newItem = { ...newCart[index] } as Item
+    newItem.quantity += item.quantity
+    newCart[index] = newItem
+  }
+  setCart(newCart)
+}
+
+export const updateQuantity = (slug: string, quantity: number) => {
+  const currentCart = getCart()
+  const newCart = [...currentCart]
+  const index = currentCart.findIndex((item) => item.slug === slug)
+  let newItem = { ...newCart[index] } as Item
+  newItem.quantity = quantity
+  newCart[index] = newItem
+  setCart(newCart)
+}
 
 export const $totalPrice = computed($cart, ($cart) =>
   $cart.reduce((a, b) => +a + b.price * b.quantity, 0)
 )
 
+export const openCart = () => {
+  const cartDialog = document.querySelector('dialog#cart')
+  if (cartDialog instanceof HTMLDialogElement) cartDialog.showModal()
+}
+
+export const closeCart = () => {
+  const cartDialog = document.querySelector('dialog#cart')
+  if (cartDialog instanceof HTMLDialogElement) cartDialog.close()
+}
+
 // export const totalQuantity = computed(cart, ($cart) =>
 //   $cart.reduce((a, b) => +a + b.quantity, 0)
 // )

package/src/structures/Card.astro

@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { href, as = href ? 'a' : 'div', ...rest } = Astro.props
+---
+
+<Element
+  class:list="card"
+  {as}
+  {href}
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .card {
+      @apply w-full overflow-hidden rounded-lg border bg-card p-4 text-card-foreground;
+
+      &:is(a[href]) {
+        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+
+        &:hover .image {
+          @apply opacity-75 transition-opacity;
+        }
+      }
+    }
+  }
+</style>

package/src/{components → structures}/Code.astro

@@ -28,12 +28,8 @@ const { lang = 'astro', code, ...rest } = Astro.props
 
 <style is:global>
   @layer fulldev {
-    .astro-code {
-      @apply mt-4 rounded-md p-4 text-sm first:mt-0;
-    }
-
     .code {
-      @apply mt-8 overflow-hidden rounded-md border first:mt-0;
+      @apply mt-8 rounded-md border first:mt-0;
 
       .example {
         @apply flex flex-wrap items-center gap-8 p-8;
@@ -42,10 +38,15 @@ const { lang = 'astro', code, ...rest } = Astro.props
         > slot > * {
           @apply mt-0;
         }
+
+        .heading,
+        .paragraph {
+          @apply w-full;
+        }
       }
 
       .astro-code {
-        @apply mt-0 rounded-none border-none p-4;
+        @apply mt-0 overflow-x-auto rounded-none border-none p-4 text-sm first:mt-0;
       }
     }
   }

package/src/structures/Container.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="container"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .container {
+      @apply mx-auto w-full max-w-screen-2xl px-4 sm:px-8;
+    }
+  }
+</style>

package/src/structures/Drawer.astro

@@ -0,0 +1,81 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props
+  extends HTMLAttributes<'aside'>,
+    Pick<ComponentProps<typeof Button>, 'variant' | 'size' | 'text' | 'icon'> {
+  id: string
+  icon: string
+}
+
+const { id, variant = 'ghost', size = 'md', icon, text, ...rest } = Astro.props
+
+const slot = await Astro.slots.render('default')
+const render = slot?.trim().length > 0
+---
+
+{
+  render && (
+    <Element class:list="drawer">
+      <Button
+        class="drawer-button"
+        for={id}
+        {variant}
+        {size}
+        {text}
+        {icon}
+      />
+
+      <input
+        type="checkbox"
+        class="drawer-checkbox"
+        name={id}
+        {id}
+      />
+
+      <Element
+        class:list="drawer-body"
+        as="aside"
+        {...rest}
+      >
+        <Fragment set:html={slot} />
+      </Element>
+
+      <label
+        for={id}
+        class="drawer-backdrop"
+      />
+    </Element>
+  )
+}
+
+<style is:global>
+  @layer fulldev {
+    .drawer {
+      @apply contents h-screen;
+    }
+
+    .drawer-checkbox {
+      @apply invisible hidden;
+    }
+
+    .drawer-backdrop {
+      @apply pointer-events-none invisible fixed left-0 top-0 z-30 h-full w-full bg-black opacity-0 transition-opacity;
+
+      &:is(.drawer-checkbox:checked ~ &) {
+        @apply pointer-events-auto visible opacity-50;
+      }
+    }
+
+    .drawer-body {
+      @apply fixed bottom-0 left-0 top-0 z-40 h-full w-80 max-w-[75vw] -translate-x-full overflow-y-auto rounded-r-lg border border-l-0 bg-background shadow-2xl transition-transform;
+      @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
+
+      &:is(.drawer-checkbox:checked ~ &) {
+        @apply translate-x-0;
+      }
+    }
+  }
+</style>

package/src/structures/Group.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="group"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .group {
+      @apply flex flex-wrap justify-stretch gap-2;
+    }
+  }
+</style>

package/src/structures/Layout.astro

@@ -0,0 +1,34 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Head from 'fulldev-ui/components/Head.astro'
+
+type Props = Omit<HTMLAttributes<'body'>, 'title'> & {
+  head?: ComponentProps<typeof Head>
+}
+
+const { head, ...rest } = Astro.props
+---
+
+<!doctype html>
+<html>
+  <Head {...head} />
+  <body {...rest}>
+    <slot />
+    <style is:global>
+      @layer fulldev {
+        html {
+          @apply w-full font-sans text-base leading-relaxed text-foreground;
+          color-scheme: light;
+        }
+
+        .dark {
+          color-scheme: dark;
+        }
+
+        body {
+          @apply w-full bg-background font-sans text-foreground;
+        }
+      }
+    </style>
+  </body>
+</html>

package/src/structures/Masonry.astro

@@ -0,0 +1,42 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="masonry"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .masonry {
+      --column-width: 20rem;
+      @apply relative w-full columns-sm gap-5 space-y-5;
+
+      & > * {
+        @apply break-inside-avoid;
+      }
+
+      /* &.size-sm {
+        --column-width: 16rem;
+      }
+
+      &.size-md {
+        --column-width: 20rem;
+      }
+
+      &.size-lg {
+        --column-width: 26rem;
+      } */
+    }
+  }
+</style>

package/src/structures/Matrix.astro

@@ -0,0 +1,39 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+  size?: 'sm' | 'md' | 'lg' | undefined
+}
+
+const { size = 'md', ...rest } = Astro.props
+---
+
+<Element
+  class:list="matrix"
+  {size}
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .matrix {
+      @apply relative grid w-full gap-5;
+
+      &.size-sm {
+        @apply grid-cols-[repeat(auto-fill,minmax(12rem,1fr))];
+      }
+
+      &.size-md {
+        @apply grid-cols-[repeat(auto-fill,minmax(16rem,1fr))];
+      }
+
+      &.size-lg {
+        @apply grid-cols-[repeat(auto-fill,minmax(20rem,1fr))];
+      }
+    }
+  }
+</style>

package/src/structures/Panel.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="panel"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .panel {
+      @apply w-full gap-x-gutter rounded-lg border bg-card px-gutter py-20 text-card-foreground lg:px-20;
+    }
+  }
+</style>

package/src/structures/Prose.astro

@@ -0,0 +1,97 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="prose"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .prose {
+      @apply relative w-full max-w-screen-md;
+
+      > * {
+        & + * {
+          @apply mt-6;
+        }
+
+        &.tagline + .heading,
+        & + p,
+        & > p {
+          @apply mt-4;
+        }
+
+        & + .group,
+        & + .button,
+        & + .buttons {
+          @apply mt-8;
+        }
+      }
+
+      code:not(.astro-code code) {
+        @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-medium;
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        @apply scroll-m-20 font-bold;
+
+        code {
+          font-size: inherit !important;
+        }
+      }
+
+      > h1 {
+        @apply text-4xl;
+      }
+
+      > h2 {
+        @apply mt-10 text-2xl;
+      }
+
+      > h3 {
+        @apply mt-8 text-xl;
+      }
+
+      > h4 {
+        @apply text-lg;
+      }
+
+      > h5 {
+        @apply text-base;
+      }
+
+      > h6 {
+        @apply text-sm;
+      }
+
+      > aside {
+        @apply rounded-md border border-destructive p-4 text-destructive;
+      }
+
+      > img,
+      > * > img {
+        @apply my-12 rounded-md;
+      }
+
+      > *:first-child {
+        @apply mt-0;
+      }
+    }
+  }
+</style>