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

package/src/schemas/components/subheader.ts

@@ -7,3 +7,4 @@ export default z
   })
   .partial()
   .passthrough()
+  .optional()

package/src/schemas/components/writeup.ts

@@ -1,8 +1,8 @@
 import { z } from 'astro:content'
+import price from '../fields/price'
 import badge from './badge'
 import heading from './heading'
 import list from './list'
-import price from './price'
 import rating from './rating'
 import tagline from './tagline'
 import text from './text'

package/src/schemas/docSchema.ts

@@ -0,0 +1,10 @@
+import { z } from 'astro:content'
+import title from 'fulldev-ui/schemas/fields/title'
+
+export const docSchema = z
+  .object({
+    title,
+  })
+  .strict()
+
+export type DocSchema = z.infer<typeof docSchema>

package/src/schemas/fields/categories.ts

@@ -0,0 +1,3 @@
+import pathSchema from '../utils/pathSchema'
+
+export default pathSchema('categories').array().optional()

package/src/schemas/fields/description.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.string().optional()

package/src/schemas/fields/href.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.string().optional()

package/src/schemas/fields/image.ts

@@ -0,0 +1,24 @@
+import { reference, z } from 'astro:content'
+
+const imagePath = z.preprocess((data: unknown) => {
+  if (typeof data === 'string') {
+    return data.split('/').pop()
+  }
+  return data
+}, reference('images').optional())
+
+export default z.union([imagePath, z.object({}).passthrough()]).pipe(
+  z
+    .object({
+      id: z
+        .string()
+        .refine(async (data) => await reference('images').parseAsync(data)),
+      src: z.string(),
+      alt: z.string(),
+      width: z.number(),
+      height: z.number(),
+    })
+    .partial()
+    .passthrough()
+    .optional()
+)

package/src/schemas/fields/images.ts

@@ -0,0 +1,4 @@
+import { z } from 'astro:content'
+import image from '../components/image'
+
+export default z.array(image).optional()

package/src/schemas/fields/order.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.number().optional()

package/src/schemas/fields/price.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.number().optional()

package/src/schemas/fields/products.ts

@@ -0,0 +1,5 @@
+import { reference, z } from 'astro:content'
+
+export const productsSchema = reference('products').array().optional()
+
+export type ProductReferences = z.infer<typeof productsSchema>

package/src/schemas/fields/seo.ts

@@ -0,0 +1,12 @@
+import { z } from 'astro:content'
+import image from 'fulldev-ui/schemas/components/image'
+import description from 'fulldev-ui/schemas/fields/description'
+import title from 'fulldev-ui/schemas/fields/title'
+
+export default z
+  .object({
+    title: title.optional(),
+    description,
+    image,
+  })
+  .optional()

package/src/schemas/fields/soldout.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.boolean().optional()

package/src/schemas/{components/price.ts → fields/title.ts}

@@ -1,3 +1,3 @@
 import { z } from 'astro:content'
 
-export default z.number()
+export default z.string()

package/src/schemas/fields/variants.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.record(z.string(), z.string().array()).optional()

package/src/schemas/layoutSchema.ts

@@ -0,0 +1,28 @@
+import { z } from 'astro:content'
+import banner from 'fulldev-ui/schemas/components/banner'
+import footer from 'fulldev-ui/schemas/components/footer'
+import header from 'fulldev-ui/schemas/components/header'
+import sidebar from 'fulldev-ui/schemas/components/sidebar'
+import subheader from 'fulldev-ui/schemas/components/subheader'
+import seo from './fields/seo'
+
+export const layoutSchema = z
+  .object({
+    theme: z.any(),
+    code: z
+      .object({
+        head: z.string().optional(),
+        body: z.string().optional(),
+      })
+      .optional(),
+    seo,
+    banner,
+    header,
+    subheader,
+    footer,
+    sidebar,
+  })
+  .strict()
+  .nullable()
+
+export type LayoutSchema = z.infer<typeof layoutSchema>

package/src/schemas/pageSchema.ts

@@ -1,94 +1,20 @@
-import { getEntries, getEntry, z } from 'astro:content'
-import { assign } from 'radash'
-import footer from './components/footer'
-import header from './components/header'
-import image from './components/image'
-import images from './components/images'
-import price from './components/price'
-import section from './components/section'
+import { z } from 'astro:content'
+import title from 'fulldev-ui/schemas/fields/title'
 import sections from './components/sections'
-import sidebar from './components/sidebar'
-import subheader from './components/subheader'
-import toc from './components/toc'
-import categories from './utils/categories'
-import component from './utils/component'
-import navigation from './utils/navigation'
-import pathSchema from './utils/pathSchema'
+import description from './fields/description'
+import href from './fields/href'
+import image from './fields/image'
+import seo from './fields/seo'
 
-export const i18n = z
+export const pageSchema = z
   .object({
-    i18n: pathSchema('pages').optional(),
-  })
-  .passthrough()
-  .transform(async ({ i18n, ...rest }) => {
-    if (!i18n) return rest
-    const entry = await getEntry(i18n)
-    const merged = assign(entry.data, rest) as typeof rest
-    return merged as typeof rest
-  })
-
-export const presets = z
-  .object({
-    presets: z.array(pathSchema('presets')).optional(),
-  })
-  .passthrough()
-  .transform(async ({ presets, ...rest }) => {
-    let mergedData = {}
-
-    const baseEntry = await getEntry('presets', 'base')
-    mergedData = assign(mergedData, baseEntry?.data || {})
-
-    if (presets) {
-      const entries = await getEntries(presets)
-      entries.forEach(
-        (preset: any) => (mergedData = assign(mergedData, preset.data))
-      )
-    }
-
-    mergedData = assign(mergedData, rest)
-    return mergedData as typeof rest
-  })
-
-export const page = z
-  .object({
-    component,
-    categories,
-    order: z.number().optional(),
-    theme: z.enum(['light', 'dark', 'system']),
-    lang: z.string(),
-    seo: z
-      .object({
-        title: z.string().optional(),
-        description: z.string().optional(),
-      })
-      .optional(),
-    title: z.string(),
-    description: z.string().optional(),
-    paragraph: z.string().optional(),
+    seo,
+    title,
+    description,
     image,
-    images,
-    section,
     sections,
-    footer,
-    header,
-    sidebar,
-    subheader,
-    navigation,
-    toc,
-    price,
-    code: z.any(),
-    sizes: z.any(),
-    banner: z.any(),
-    _schema: z.any(),
-    uitverkocht: z.any(),
-    rating: z.any(),
-    variants: z.any(),
-    heading: z.any(),
-    href: z.any(),
-    next: z.any(),
-    prev: z.any(),
+    href,
   })
-  .partial()
   .strict()
 
-export default i18n.pipe(presets).pipe(page)
+export type PageSchema = z.infer<typeof pageSchema>

package/src/schemas/postSchema.ts

@@ -0,0 +1,16 @@
+import { z } from 'astro:content'
+import image from 'fulldev-ui/schemas/components/image'
+import sections from 'fulldev-ui/schemas/components/sections'
+import description from 'fulldev-ui/schemas/fields/description'
+import title from 'fulldev-ui/schemas/fields/title'
+
+export const postSchema = z
+  .object({
+    title,
+    description,
+    image,
+    sections,
+  })
+  .strict()
+
+export type PostSchema = z.infer<typeof postSchema>

package/src/schemas/productSchema.ts

@@ -0,0 +1,22 @@
+import { z } from 'astro:content'
+import categories from 'fulldev-ui/schemas/fields/categories'
+import description from 'fulldev-ui/schemas/fields/description'
+import images from 'fulldev-ui/schemas/fields/images'
+import title from 'fulldev-ui/schemas/fields/title'
+import order from './fields/order'
+import price from './fields/price'
+import soldout from './fields/soldout'
+import variants from './fields/variants'
+
+export const productSchema = z.object({
+  soldout,
+  order,
+  title,
+  description,
+  price,
+  categories,
+  images,
+  variants,
+})
+
+export type ProductSchema = z.infer<typeof productSchema>

package/src/stores/cart.svelte.ts

@@ -0,0 +1,79 @@
+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) => {
+  console.log('DERIVED', $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/utils/formatEntries.ts

@@ -0,0 +1,8 @@
+import type { CollectionEntry } from 'astro:content'
+import { formatEntry } from './formatEntry'
+
+export const formatEntries = (
+  entries: CollectionEntry<
+    'categories' | 'docs' | 'pages' | 'posts' | 'products'
+  >[]
+) => entries.map(formatEntry)

package/src/utils/formatEntry.ts

@@ -0,0 +1,29 @@
+import type { CollectionEntry, ContentCollectionKey } from 'astro:content'
+
+const routes: {
+  [key in ContentCollectionKey]: string
+} = {
+  categories: 'categorieen',
+  docs: 'docs',
+  pages: '',
+  posts: 'blog',
+  products: 'producten',
+}
+
+export const formatEntry = ({
+  data,
+  slug,
+  ...rest
+}: CollectionEntry<ContentCollectionKey>) => {
+  let href
+  if (slug !== 'index') href = `/${routes[rest.collection]}/${slug}/`
+
+  href?.replace('//', '/')
+
+  return {
+    href,
+    slug,
+    ...rest,
+    ...data,
+  }
+}

package/src/utils/getHref.ts

@@ -0,0 +1,22 @@
+import type { CollectionEntry, ContentCollectionKey } from 'astro:content'
+
+const routes: {
+  [key in ContentCollectionKey]: string
+} = {
+  categories: 'categorieen',
+  docs: 'docs',
+  pages: '',
+  posts: 'blog',
+  products: 'producten',
+}
+
+export function getHref(
+  collection: ContentCollectionKey,
+  slug: CollectionEntry<ContentCollectionKey>['slug']
+) {
+  let href
+  if (slug === 'index') href = `/`
+  else if (slug) href = `/${routes[collection]}/${slug}/`
+  href = href?.replace('//', '/')
+  return href
+}

package/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+	preprocess: vitePreprocess(),
+}

package/src/content/presets/base.yml

@@ -1,100 +0,0 @@
-theme: system
-
-seo:
-  image: /images/og-image.png
-
-code:
-  head: |
-    <script is:inline>
-      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-      posthog.init('phc_mVacbe8Xydu0UZlh4bNw5EGisvzyRcpqXEEuEEp5lOY',{api_host:'https://eu.i.posthog.com', person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
-        })
-    </script>
-
-navigation:
-  themer: true
-  header: true
-  company: Fulldev UI
-  logo: favicon.svg
-  links:
-    - text: Docs
-      href: /docs/
-    - text: Components
-      href: /docs/components/badge/
-    - text: Blocks
-      href: /docs/blocks/banner/
-    - showcase
-
-  socials:
-    - https://github.com/fulldotdev/ui
-    - https://discord.gg/vXZqMbadm8
-
-  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/content/presets/docs.yml

@@ -1,6 +0,0 @@
-navigation:
-  sidebar: true
-  header: false
-  toc: 'On this page'
-next: true
-prev: true

package/src/schemas/components/images.ts

@@ -1,4 +0,0 @@
-import { z } from 'astro:content'
-import image from './image'
-
-export default z.array(image)

package/src/schemas/presetSchema.ts

@@ -1,3 +0,0 @@
-import { page } from './pageSchema'
-
-export default page

package/src/schemas/utils/categories.ts

@@ -1,3 +0,0 @@
-import pathSchema from './pathSchema'
-
-export default pathSchema('pages').array().optional()

package/src/schemas/utils/navigation.ts

@@ -1,8 +0,0 @@
-import { z } from 'astro:content'
-import header from '../components/header'
-import sidebar from '../components/sidebar'
-
-export default sidebar.merge(header).extend({
-  header: z.boolean().optional(),
-  sidebar: z.boolean().optional(),
-})