fulldev-ui 0.3.35 → 0.4.0-beta.0

package/src/integration/index.ts

@@ -0,0 +1,158 @@
+import type { AstroIntegration } from 'astro'
+import merge from 'deepmerge'
+import virtual from 'vite-plugin-virtual'
+import { generateRadixColors } from './generate-colors'
+
+type Color = {
+  background: Parameters<typeof generateRadixColors>[0]['background']
+  base: Parameters<typeof generateRadixColors>[0]['gray']
+  brand: Parameters<typeof generateRadixColors>[0]['accent']
+}
+
+interface Config {
+  css?: string
+  injectRoutes?: boolean
+  colors: {
+    theme: 'light' | 'dark'
+    light?: Color
+    dark?: Color
+  }
+}
+
+const defaultConfig: Config = {
+  colors: {
+    theme: 'light',
+    light: {
+      background: '#fff',
+      base: '#000',
+      brand: '#000',
+    },
+  },
+}
+export default function fulluiIntegration(
+  userConfig: any = {}
+): AstroIntegration {
+  const config = merge(defaultConfig ?? {}, userConfig ?? {})
+
+  return {
+    name: '/integration',
+    hooks: {
+      'astro:config:setup': async ({
+        config: astroConfig,
+        updateConfig,
+        injectScript,
+        injectRoute,
+      }) => {
+        // ----------------------
+        // Inject css
+        // ----------------------
+        config?.css && injectScript('page-ssr', `import "${config?.css}";`)
+
+        const generateCss = (
+          defaultTheme: 'light' | 'dark',
+          theme: 'light' | 'dark',
+          color: Color
+        ) => {
+          const { background, base, brand } = color
+          const generated = generateRadixColors({
+            background,
+            appearance: theme,
+            gray: base,
+            accent: brand,
+          })
+
+          const scaleToString = (
+            scale: any,
+            palette: 'base' | 'brand',
+            alpha?: boolean
+          ) =>
+            scale
+              .map(
+                (color: any, i: any) =>
+                  `--${palette}-${alpha ? 'a' : ''}${i + 1}: ${color};`
+              )
+              .join('\n')
+
+          const baseString = scaleToString(generated.grayScale, 'base', false)
+          const baseAlphaString = scaleToString(
+            generated.grayScaleAlpha,
+            'base',
+            true
+          )
+          const brandString = scaleToString(
+            generated.accentScale,
+            'brand',
+            false
+          )
+          const brandAlphaString = scaleToString(
+            generated.accentScaleAlpha,
+            'brand',
+            true
+          )
+          const brandContrastString = `--brand-contrast: ${generated.accentContrast};`
+          const baseContrastString = `--base-contrast: ${generated.accentContrast};`
+          const baseBackgroundString = `--base-background: ${generated.background};`
+          const brandBackgroundString = `--brand-background: ${generated.background};`
+          const colorSchemeString = `--color-scheme: ${theme};`
+
+          const css = `${defaultTheme == theme ? ':root, ' : ''} .theme-${theme}  {
+  ${baseString}
+  ${baseAlphaString}
+  ${baseContrastString}
+  ${baseBackgroundString}
+  ${brandString}
+  ${brandAlphaString}
+  ${brandContrastString}
+  ${brandBackgroundString}
+  ${colorSchemeString}
+  }`
+          return css
+        }
+
+        const lightCss =
+          (config.colors.light &&
+            generateCss(config.colors.theme, 'light', config.colors.light)) ||
+          ''
+        const darkCss =
+          (config.colors.dark &&
+            generateCss(config.colors.theme, 'dark', config.colors.dark)) ||
+          ''
+
+        const css = lightCss + '\n' + darkCss
+
+        updateConfig({
+          vite: {
+            plugins: [
+              virtual({
+                'virtual:astro/config': `export default ${JSON.stringify(astroConfig)}`,
+                'virtual:fulldev-ui/config': `export default ${JSON.stringify(config)}`,
+                'virtual:colors.css': css,
+              }),
+            ],
+            // css: {
+            //   preprocessorOptions: {
+            //     scss: {
+            //       additionalData: `$layer: ${config.layer};`,
+            //     },
+            //   },
+            // },
+          },
+        })
+
+        injectScript('page-ssr', `import "virtual:colors.css";`)
+
+        // ----------------------
+        // Inject routes
+        // ----------------------
+        if (config.injectRoutes) {
+          const pages = import.meta.glob('/src/pages/**/*.astro')
+          !pages['/src/pages/[...page].astro'] &&
+            injectRoute({
+              pattern: '/[...page]',
+              entrypoint: 'fulldev-ui/[...page].astro',
+            })
+        }
+      },
+    },
+  }
+}

package/src/integration/tailwind-plugin.ts

@@ -0,0 +1,80 @@
+import plugin from 'tailwindcss/plugin'
+
+export default plugin(() => {}, {
+  theme: {
+    spacing: {
+      'space-1': 'var(--space-1)',
+      'space-2': 'var(--space-2)',
+      'space-3': 'var(--space-3)',
+      'space-4': 'var(--space-4)',
+      'space-5': 'var(--space-5)',
+      'space-6': 'var(--space-6)',
+      'space-7': 'var(--space-7)',
+    },
+    borderRadius: {
+      1: 'var(--radius-1)',
+      2: 'var(--radius-2)',
+      3: 'var(--radius-3)',
+    },
+    fontSize: {
+      1: 'var(--text-1)',
+      2: 'var(--text-2)',
+      3: 'var(--text-3)',
+      4: 'var(--text-4)',
+      5: 'var(--text-5)',
+      6: 'var(--text-6)',
+      7: 'var(--text-7)',
+      8: 'var(--text-8)',
+    },
+    colors: {
+      color: {
+        1: 'var(--color-1)',
+        2: 'var(--color-2)',
+        3: 'var(--color-3)',
+        4: 'var(--color-4)',
+        5: 'var(--color-5)',
+        6: 'var(--color-6)',
+        7: 'var(--color-7)',
+        8: 'var(--color-8)',
+        9: 'var(--color-9)',
+        10: 'var(--color-10)',
+        11: 'var(--color-11)',
+        12: 'var(--color-12)',
+        contrast: 'var(--color-contrast)',
+        background: 'var(--color-background)',
+      },
+      base: {
+        1: 'var(--color-base-1)',
+        2: 'var(--color-base-2)',
+        3: 'var(--color-base-3)',
+        4: 'var(--color-base-4)',
+        5: 'var(--color-base-5)',
+        6: 'var(--color-base-6)',
+        7: 'var(--color-base-7)',
+        8: 'var(--color-base-8)',
+        9: 'var(--color-base-9)',
+        10: 'var(--color-base-10)',
+        11: 'var(--color-base-11)',
+        12: 'var(--color-base-12)',
+        contrast: 'var(--color-base-contrast)',
+        background: 'var(--color-base-background)',
+      },
+      brand: {
+        1: 'var(--color-brand-1)',
+        2: 'var(--color-brand-2)',
+        3: 'var(--color-brand-3)',
+        4: 'var(--color-brand-4)',
+        5: 'var(--color-brand-5)',
+        6: 'var(--color-brand-6)',
+        7: 'var(--color-brand-7)',
+        8: 'var(--color-brand-8)',
+        9: 'var(--color-brand-9)',
+        10: 'var(--color-brand-10)',
+        11: 'var(--color-brand-11)',
+        12: 'var(--color-brand-12)',
+        contrast: 'var(--color-brand-contrast)',
+        background: 'var(--color-brand-background)',
+      },
+    },
+  },
+})

package/src/integration/unocss-preset.ts

@@ -0,0 +1,84 @@
+import { definePreset, presetUno } from 'unocss'
+
+export default definePreset(() => {
+  return {
+    name: 'fullUI',
+    presets: [presetUno()],
+    theme: {
+      spacing: {
+        'space-1': 'var(--space-1)',
+        'space-2': 'var(--space-2)',
+        'space-3': 'var(--space-3)',
+        'space-4': 'var(--space-4)',
+        'space-5': 'var(--space-5)',
+        'space-6': 'var(--space-6)',
+        'space-7': 'var(--space-7)',
+      },
+      borderRadius: {
+        1: 'var(--radius-1)',
+        2: 'var(--radius-2)',
+        3: 'var(--radius-3)',
+      },
+      fontSize: {
+        1: 'var(--text-1)',
+        2: 'var(--text-2)',
+        3: 'var(--text-3)',
+        4: 'var(--text-4)',
+        5: 'var(--text-5)',
+        6: 'var(--text-6)',
+        7: 'var(--text-7)',
+        8: 'var(--text-8)',
+      },
+      colors: {
+        color: {
+          1: 'var(--color-1)',
+          2: 'var(--color-2)',
+          3: 'var(--color-3)',
+          4: 'var(--color-4)',
+          5: 'var(--color-5)',
+          6: 'var(--color-6)',
+          7: 'var(--color-7)',
+          8: 'var(--color-8)',
+          9: 'var(--color-9)',
+          10: 'var(--color-10)',
+          11: 'var(--color-11)',
+          12: 'var(--color-12)',
+          contrast: 'var(--color-contrast)',
+          background: 'var(--color-background)',
+        },
+        base: {
+          1: 'var(--color-base-1)',
+          2: 'var(--color-base-2)',
+          3: 'var(--color-base-3)',
+          4: 'var(--color-base-4)',
+          5: 'var(--color-base-5)',
+          6: 'var(--color-base-6)',
+          7: 'var(--color-base-7)',
+          8: 'var(--color-base-8)',
+          9: 'var(--color-base-9)',
+          10: 'var(--color-base-10)',
+          11: 'var(--color-base-11)',
+          12: 'var(--color-base-12)',
+          contrast: 'var(--color-base-contrast)',
+          background: 'var(--color-base-background)',
+        },
+        brand: {
+          1: 'var(--color-brand-1)',
+          2: 'var(--color-brand-2)',
+          3: 'var(--color-brand-3)',
+          4: 'var(--color-brand-4)',
+          5: 'var(--color-brand-5)',
+          6: 'var(--color-brand-6)',
+          7: 'var(--color-brand-7)',
+          8: 'var(--color-brand-8)',
+          9: 'var(--color-brand-9)',
+          10: 'var(--color-brand-10)',
+          11: 'var(--color-brand-11)',
+          12: 'var(--color-brand-12)',
+          contrast: 'var(--color-brand-contrast)',
+          background: 'var(--color-brand-background)',
+        },
+      },
+    },
+  }
+})

package/src/layouts/BlockLayout.astro

@@ -0,0 +1,24 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import Intro from 'fulldev-ui/blocks/Intro.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+
+type Props = CollectionEntry<'pages'>
+
+const { data, render } = Astro.props
+const { Content } = await render()
+---
+
+<Layout {...Astro.props}>
+  <Intro
+    variant="ghost"
+    size="md"
+    style={{
+      paddingBottom: '0px',
+      borderColor: 'transparent',
+    }}
+    {...data}
+  />
+  <Content />
+  <slot />
+</Layout>

package/src/layouts/BlockOverviewLayout.astro

@@ -0,0 +1,39 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import Hero from 'fulldev-ui/blocks/Hero.astro'
+import Block from 'fulldev-ui/components/Block.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+
+type Props = CollectionEntry<'pages'>
+
+const { data } = Astro.props
+---
+
+<Layout {...Astro.props}>
+  <Hero
+    size="md"
+    {...data}
+  />
+  <Block
+    _bookshop_name="Categories"
+    class:list={'block-overview-cards'}
+    source="children"
+    structure="grid"
+    frame="panel"
+    variant="surface"
+    size="lg"
+    align="start"
+  />
+</Layout>
+
+<style is:global lang="scss">
+  .block-overview-cards {
+    padding-top: var(--space-5) !important;
+
+    .card {
+      .image {
+        height: auto !important;
+      }
+    }
+  }
+</style>

package/src/layouts/ComponentLayout.astro

@@ -0,0 +1,23 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import Prose from 'fulldev-ui/components/experimental/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+
+type Props = CollectionEntry<'pages'>
+
+const { render } = Astro.props
+const { Content } = await render()
+---
+
+<Layout
+  {...Astro.props}
+  class:list="component-layout"
+>
+  <Section>
+    <Prose>
+      <Content />
+    </Prose>
+  </Section>
+  <slot />
+</Layout>

package/src/layouts/JobsLayout.astro

@@ -0,0 +1,40 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import { getCollection } from 'astro:content'
+import JobDeck from 'fulldev-ui/blocks/Jobs.astro'
+import Block from 'fulldev-ui/components/Block.astro'
+import Blocks from 'fulldev-ui/components/Blocks.astro'
+import Prose from 'fulldev-ui/components/experimental/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+
+type Props = CollectionEntry<'pages'>
+
+const { data, slug, ...rest } = Astro.props
+
+const childPages = (
+  await getCollection('pages', (page: any) => page.slug.startsWith(slug))
+).map((page: any) => ({ href: `/${page.slug}/`, ...page.data }))
+---
+
+<Layout
+  class:list={'page'}
+  data={data}
+  {...rest}
+>
+  <Block
+    _bookshop_name="Hero"
+    heading={data.title}
+    set:html={data.description}
+    {...data}
+    {...data.hero}
+  />
+  <JobDeck cards={childPages} />
+  <Section style={{ '--screen': '768px' }}>
+    <Prose id="prose">
+      <slot />
+    </Prose>
+  </Section>
+  <Blocks blocks={data.blocks} />
+  <slot />
+</Layout>

package/src/layouts/Layout.astro

@@ -0,0 +1,168 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import Block from 'fulldev-ui/components/Block.astro'
+import Blocks from 'fulldev-ui/components/Blocks.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Head from 'fulldev-ui/components/Head.astro'
+import Header from 'fulldev-ui/components/Header.astro'
+import Sidebar from 'fulldev-ui/components/Sidebar.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+
+type Props = Partial<CollectionEntry<'pages'>> & {
+  class?: string
+  theme?: 'light' | 'dark'
+}
+
+const { slug, data, theme, class: classes, render } = Astro.props
+const { logo, header, footer, footers, channels, sidebar, toc } = data || {}
+
+const { headings } = render ? await render() : { headings: [] }
+
+const h2Headings = headings.filter((heading: any) => heading.depth === 2)
+---
+
+<!doctype html>
+<html
+  lang="nl"
+  class:list={[
+    slug,
+    {
+      'theme-dark': theme === 'dark',
+      'theme-light': theme === 'light',
+    },
+  ]}
+>
+  <Head {...Astro.props} />
+  <body
+    class:list={[
+      classes,
+      {
+        'has-sidebar': sidebar,
+        'has-toc': toc,
+        'theme-dark': theme === 'dark',
+        'theme-light': theme === 'light',
+      },
+    ]}
+  >
+    <Header
+      {logo}
+      {...header}
+    />
+    <div class="core">
+      <Sidebar {sidebar} />
+      <main data-pagefind-body>
+        <Toc
+          toc={toc}
+          headings={h2Headings}
+        />
+        <div class="blocks">
+          <slot />
+        </div>
+      </main>
+    </div>
+
+    {
+      channels?.whatsapp && (
+        <Button
+          variant="primary"
+          color="brand"
+          icon="brand-whatsapp"
+          size="lg"
+          href={`https://wa.me/${channels.whatsapp}`}
+          style={{
+            position: 'fixed',
+            right: 'var(--space-4)',
+            bottom: 'var(--space-4)',
+            backgroundColor: '#46A758',
+          }}
+        />
+      )
+    }
+    <Block
+      _bookshop_name="Footer"
+      {logo}
+      {...footer}
+    />
+    <Blocks {...footers} />
+
+    <Fragment set:html={data?.code?.body} />
+    <style lang="scss" is:global>
+      :root {
+        --screen: 1536px;
+        --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
+        --gutter-left: var(--gutter);
+        --gutter-right: var(--gutter);
+        --sidebar-width: 0px;
+        --toc-width: 0px;
+        --header-height: calc(
+          var(--text-2) + 2 * var(--space-4) + 2 * var(--space-3)
+        );
+      }
+
+      html,
+      body {
+        box-sizing: border-box;
+        margin: 0;
+        background-color: var(--color-background);
+        padding: 0;
+        width: 100%;
+        min-height: 100vh;
+        color: var(--base-11);
+        color-scheme: var(--color-scheme);
+        font-size: var(--text-2);
+        font-family: var(--font-family);
+      }
+
+      body {
+        display: flex;
+        flex-direction: column;
+
+        @media (min-width: 1024px) {
+          &.has-sidebar .core {
+            --gutter-left: var(--space-6);
+            --sidebar-width: calc(var(--gutter) + 200px);
+
+            display: grid;
+            grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+          }
+
+          &.has-toc main {
+            --gutter-right: var(--space-6);
+            --toc-width: calc(var(--gutter) + 200px);
+
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) var(--toc-width);
+          }
+        }
+
+        .header {
+          width: 100%;
+          height: var(--header-height);
+        }
+
+        .core {
+          .sidebar {
+            position: sticky;
+            top: 0;
+            padding-left: var(--gutter);
+          }
+
+          main {
+            .toc {
+              position: sticky;
+              top: 0;
+              order: 1;
+              padding-right: var(--gutter);
+            }
+
+            .blocks {
+              display: flex;
+              flex-direction: column;
+              width: 100%;
+            }
+          }
+        }
+      }
+    </style>
+  </body>
+</html>

package/src/layouts/OverviewLayout.astro

@@ -0,0 +1,45 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import Block from 'fulldev-ui/components/Block.astro'
+import Blocks from 'fulldev-ui/components/Blocks.astro'
+import Prose from 'fulldev-ui/components/experimental/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+
+type Props = CollectionEntry<'pages'>
+
+const { data, render } = Astro.props
+const { sections, blocks, children, references } = data
+const { Content } = await render()
+---
+
+<Layout {...Astro.props}>
+  <Block
+    _bookshop_name="Hero"
+    size="lg"
+    {...data}
+  />
+  <Block
+    _bookshop_name="Categories"
+    source="children"
+    structure="grid"
+    {...children ?? {}}
+  />
+  <Block
+    _bookshop_name="ProductDeck"
+    heading={data.title && references
+      ? `Alle ${data.title.toLowerCase()}`
+      : undefined}
+    source="references"
+    structure="grid"
+    {...references ?? {}}
+  />
+  <Section style={{ '--screen': '768px' }}>
+    <Prose id="prose">
+      <Content />
+    </Prose>
+  </Section>
+  <Blocks {...sections} />
+  <Blocks {...blocks} />
+  <slot />
+</Layout>

package/src/layouts/PageLayout.astro

@@ -0,0 +1,32 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import Block from 'fulldev-ui/components/Block.astro'
+import Blocks from 'fulldev-ui/components/Blocks.astro'
+import Prose from 'fulldev-ui/components/experimental/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+
+type Props = CollectionEntry<'pages'>
+
+const { data, render } = Astro.props
+const { hero, section, sections, block, blocks } = data
+const { Content } = await render()
+---
+
+<Layout {...Astro.props}>
+  <Block
+    _bookshop_name="Hero"
+    {...data}
+    {...hero}
+  />
+  <Block {...section} />
+  <Block {...block} />
+  <Section style={{ '--screen': '768px' }}>
+    <Prose id="prose">
+      <Content />
+    </Prose>
+  </Section>
+  <Blocks {...sections} />
+  <Blocks {...blocks} />
+  <slot />
+</Layout>