fulldev-ui 0.5.0-beta.8 → 0.6.0-beta-4

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/types/global-props.ts

@@ -5,12 +5,3 @@ export type GlobalProps = {
   size?: 'sm' | 'md' | 'lg' | string | number | null | undefined
   contrast?: boolean | undefined
 }
-
-// declare global {
-//   type GlobalProps = {
-//     theme?: 'light' | 'dark' | undefined
-//     color?: 'base' | 'brand' | undefined
-//     size?: 'sm' | 'md' | 'lg' | undefined
-//     contrast?: boolean | undefined
-//   }
-// }

package/src/types/{virtual-modules.d.ts → virtual.d.ts}

@@ -1,4 +1,4 @@
-declare module 'virtual:*' {
+declare module 'virtual:fulldev-ui/config' {
   import type { Config } from 'fulldev-ui/integration'
   const content: Config
   export default content

package/src/utils/cart.ts

@@ -1,13 +1,4 @@
-// import Stripe from 'stripe'
-
-// const stripe = new Stripe(import.meta.env.STRIPE_SECRET_KEY)
-
-const slugify = (input: string): string => {
-  return input
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-}
+import { slugify } from './slugify'
 
 export const generateProductId = (
   slug: string,

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/getDeepReferenceChildren.ts

@@ -0,0 +1,14 @@
+import { getCollection, type CollectionEntry } from 'astro:content'
+
+// Pages that reference the current page
+export const getDeepReferenceChildren = async (
+  slug: CollectionEntry<'pages'>['slug']
+) =>
+  (
+    await getCollection('pages', (page) =>
+      page.data?.categories?.some((p: any) => p.slug.includes(slug))
+    )
+  )?.map(({ slug, data }) => ({
+    ...data,
+    href: `/${slug}/`,
+  }))

package/src/utils/getHref.ts

@@ -0,0 +1,6 @@
+import type { CollectionEntry } from 'astro:content'
+
+export function getHref(slug: CollectionEntry<'pages'>['slug']) {
+  if (slug === 'index') return '/'
+  else return `/${slug}/`
+}

package/src/utils/getReferenceChildren.ts

@@ -6,7 +6,7 @@ export const getReferenceChildren = async (
 ) =>
   (
     await getCollection('pages', (page) =>
-      page.data?.parents?.some((p: any) => p.slug === slug)
+      page.data?.categories?.some((p: any) => p.slug === slug)
     )
   )?.map(({ slug, data }) => ({
     ...data,

package/src/utils/setTheme.ts

@@ -0,0 +1,18 @@
+export default function setTheme(newValue?: string) {
+  newValue && localStorage.setItem('theme', newValue)
+  const value = localStorage.getItem('theme')
+
+  const isDark =
+    value === 'dark' ||
+    (value === 'system' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+  document.documentElement.classList.toggle('dark', isDark)
+
+  document.querySelectorAll('.themer').forEach((themer) => {
+    themer.classList.toggle('dark', isDark)
+    themer?.querySelectorAll('option').forEach((option) => {
+      option.selected = option.value === value
+    })
+  })
+}

package/src/utils/slugify.ts

@@ -0,0 +1,6 @@
+export const slugify = (input: string): string => {
+  return input
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}

package/svelte.config.js

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

package/tailwind.config.ts

@@ -0,0 +1,67 @@
+import tailwindcssScrollbar from 'tailwind-scrollbar'
+import type { Config } from 'tailwindcss'
+import tailwindcssAnimate from 'tailwindcss-animate'
+
+export default {
+  darkMode: ['class'],
+  content: ['src/**/*.{ts,tsx,astro,css,mdx}'],
+  theme: {
+    container: {
+      center: true,
+      padding: 'clamp(16px, 4vw, 32px)',
+      screens: ['1536px'],
+    },
+    extend: {
+      spacing: {
+        gutter: 'clamp(16px, 4vw, 32px)',
+        container: 'var(--container, 1536px)',
+        hero: 'calc(100vh - var(--header-height, 0px) - var(--subheader-height, 0px) - var(--banner-height, 0px))',
+      },
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+          hover: 'hsl(var(--primary) / 85%)',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+          hover: 'hsl(var(--secondary) / 75%)',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+          hover: 'hsl(var(--muted) / 75%)',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+          hover: 'hsl(var(--accent) / 75%)',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+          hover: 'hsl(var(--card) / 75%)',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      borderColor: {
+        DEFAULT: 'hsl(var(--border))',
+      },
+    },
+  },
+  plugins: [tailwindcssAnimate, tailwindcssScrollbar({ nocompatible: true })],
+} satisfies Config

package/tsconfig.json

@@ -4,9 +4,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "fulldev-ui/*": [
-        "src/*"
-      ]
+      "fulldev-ui/*": ["src/*"],
     }
   },
 }

package/src/blocks/Article.astro

@@ -1,40 +0,0 @@
----
-import Prose from 'fulldev-ui/components/experimental/Prose.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import Toc from 'fulldev-ui/components/Toc.astro'
-
-const { toc = 'Op deze pagina', render } = Astro.props
-const { Content } = (render && (await render())) || {}
----
-
-<Section class:list="article">
-  <Prose>
-    {Content && <Content />}
-    <slot />
-  </Prose>
-  <Toc
-    {render}
-    heading={toc}
-  />
-</Section>
-
-<style is:global lang="scss">
-  .article {
-    display: flex;
-    position: relative;
-    flex-grow: 1;
-    flex-direction: row;
-    align-items: start;
-    height: 100%;
-
-    &:first-child {
-      padding-top: var(--space-6);
-    }
-
-    .prose {
-      margin-right: auto;
-      margin-left: auto;
-      max-width: 768px;
-    }
-  }
-</style>

package/src/blocks/Categories.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="categories"
-  structure="grid"
-  position="inset"
-  {...rest}
-/>

package/src/blocks/Colleagues.astro

@@ -1,13 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="colleagues"
-  structure="grid"
-  align="center"
-  position="inset"
-  {...rest}
-/>

package/src/blocks/Contact.astro

@@ -1,116 +0,0 @@
----
-import Button from 'fulldev-ui/components/Button.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Channels from 'fulldev-ui/components/Channels.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Form from 'fulldev-ui/components/experimental/Form.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Input from 'fulldev-ui/components/Input.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import Socials from 'fulldev-ui/components/Socials.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import Textarea from 'fulldev-ui/components/Textarea.astro'
-
-const {
-  heading,
-  form,
-  text,
-  tagline,
-  googleMaps,
-  buttons,
-  socials,
-  position,
-  image,
-  channels,
-  level = 1,
-  ...rest
-} = Astro.props
----
-
-<Section
-  class:list="contact"
-  structure="split"
-  {...rest}
->
-  <Element class:list="column">
-    <Tagline
-      color="brand"
-      text={tagline}
-    />
-    <Heading
-      size={'sm'}
-      level={level}
-      text={heading}
-    />
-    <Text text={text} />
-    <Buttons {buttons} />
-    <Channels {channels} />
-    <Socials {socials} />
-    <Form
-      action="/thank-you"
-      method="POST"
-    >
-      {
-        form.fields.map((field: any) => {
-          if (field.type === 'textarea') {
-            return (
-              <Textarea
-                label={field.label}
-                id={field.name}
-                name={field.name}
-                required={field.required}
-              />
-            )
-          }
-          return (
-            <Input
-              label={field.label}
-              id={field.name}
-              name={field.name}
-              type={field.type}
-              required={field.required}
-            />
-          )
-        })
-      }
-      <Button
-        type="submit"
-        color="brand"
-        variant="primary"
-        text={form.button}
-      />
-    </Form>
-  </Element>
-
-  <Image
-    {position}
-    {...image}
-  />
-</Section>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .contact {
-      .column {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-
-      > .column {
-        gap: var(--space-5);
-      }
-
-      .channel + .channel {
-        margin-top: var(--space-3) !important;
-      }
-
-      .socials {
-        display: flex;
-        gap: var(--space-2);
-      }
-    }
-  }
-</style>

package/src/blocks/Content.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="content"
-  structure="split"
-  align="center"
-  {...rest}
-/>

package/src/blocks/Cta.astro

@@ -1,15 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="cta"
-  variant="primary"
-  align="center"
-  size="lg"
-  color="brand"
-  panel
-  {...rest}
-/>

package/src/blocks/Excerpt.astro

@@ -1,14 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  level={1}
-  size="lg"
-  align="center"
-  variant="primary"
-  color="brand"
-  {...rest}
-/>

package/src/blocks/Features.astro

@@ -1,11 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="features"
-  structure="stack"
-  {...rest}
-/>

package/src/blocks/Hero.astro

@@ -1,15 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="hero"
-  level={1}
-  size="lg"
-  align="center"
-  variant="primary"
-  color="brand"
-  {...rest}
-/>

package/src/blocks/Intro.astro

@@ -1,23 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { image, ...rest } = Astro.props
----
-
-<Section
-  class:list="intro"
-  structure="column"
-  size="sm"
-  level={1}
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .intro {
-      border-bottom: 1px solid var(--base-6);
-      padding-top: var(--space-7);
-      padding-bottom: var(--space-7);
-    }
-  }
-</style>

package/src/blocks/Jobs.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="jobs"
-  structure="grid"
-  panel
-  {...rest}
-/>

package/src/blocks/Posts.astro

@@ -1,11 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="posts"
-  structure="grid"
-  {...rest}
-/>

package/src/blocks/Prices.astro

@@ -1,24 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="prices"
-  structure="stack"
-  panel
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .prices {
-      .card {
-        .wrap {
-          margin-top: auto;
-        }
-      }
-    }
-  }
-</style>