fulldev-ui 0.6.0-beta.3 → 0.6.0-beta.6

package/astro.config.ts

@@ -1,10 +1,6 @@
+import svelte from '@astrojs/svelte'
 import { defineConfig } from 'astro/config'
 import integration from 'fulldev-ui/integration'
-import simpleStackQuery from 'simple-stack-query'
-
-import simpleStackForm from 'simple-stack-form'
-
-import svelte from '@astrojs/svelte'
 
 // https://astro.build/config
 export default defineConfig({
@@ -19,8 +15,6 @@ export default defineConfig({
       css: '/src/css/custom.css',
       injectRoutes: false,
     }),
-    simpleStackQuery(),
-    simpleStackForm(),
     svelte(),
   ],
   redirects: {

package/cloudcannon.config.yml

@@ -0,0 +1,269 @@
+paths:
+  uploads: public/images
+  static: public
+
+collection_groups:
+  - heading: Content
+    collections:
+      - pages
+      - jobs
+      - categories
+  - heading: Settings
+    collections:
+      - layouts
+
+collections_config:
+  pages:
+    path: src/content/pages
+    url: /[full_slug]/
+    icon: wysiwyg
+    name: Pages
+    disable_add_folder: true
+    _enabled_editors:
+      - visual
+      - content
+    schemas:
+      page:
+        name: Page
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/page.md
+      job:
+        name: Job
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/job.md
+      jobs:
+        name: Job overview
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/category.md
+      post:
+        name: Content
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/post.md
+      category:
+        name: Category
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/category.md
+      product:
+        name: Product
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/product.md
+  layouts:
+    path: src/content/layouts
+    name: Layouts
+    icon: web
+    disable_url: true
+    disable_add: true
+    disable_add_folder: true
+    disable_file_actions: true
+    _enabled_editors:
+      - data
+
+_inputs:
+  head:
+    label: SEO / Settings
+
+  head.title:
+    label: SEO title
+    comment: 50-60 characters
+
+  head.description:
+    label: SEO description
+    comment: 50-120 characters
+
+  parents:
+    type: multiselect
+    label: Categorieën
+    options:
+      values: collections.pages
+  children:
+    type: multiselect
+    label: Subcategorieën
+    options:
+      values: collections.pages
+  siblings:
+    type: multiselect
+    label: Aanbevolen pagina's
+    options:
+      values: collections.pages
+
+  href:
+    type: url
+    label: Link
+
+  rating.value:
+    label: Rating
+    type: range
+    options:
+      min: 0
+      max: 5
+      step: 0.1
+
+  head.image:
+    type: image
+    label: Image
+    comment: Visible when you share a link of the page
+    options:
+      accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+      mime_type: image/png
+      resize_style: contain
+      width: 1200
+      height: 640
+  images:
+    type: array
+    cascade: true
+  images[*]:
+    type: image
+    options:
+      accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+      mime_type: image/webp
+      resize_style: contain
+      width: 1920
+      height: 1920
+  image:
+    type: image
+    label: Afbeelding
+    options:
+      accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+      mime_type: image/webp
+      resize_style: contain
+      width: 1920
+      height: 1920
+
+  list:
+    type: array
+  list[*]:
+    type: text
+  hidden:
+    label: Hide
+    type: switch
+  soldout:
+    label: Sold out
+    type: switch
+  draft:
+    label: Draft
+    type: switch
+  order:
+    label: Volgorde
+    type: number
+  paragraph:
+    type: textarea
+    label: Tekst
+  text:
+    type: textarea
+    label: Tekst
+  button.text:
+    type: text
+  options:
+    type: array
+    label: Opties
+  options[*]:
+    type: text
+  variations:
+    type: array
+    label: Variations
+  sizes:
+    type: array
+    label: Sizes
+  sizes[*]:
+    type: text
+  logo:
+    type: image
+    cascade: true
+    options:
+      accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+      mime_type: image/webp
+      resize_style: contain
+      width: 260
+      height: 32
+  rating:
+    type: range
+    options:
+      min: 0
+      max: 5
+      step: 0.1
+    label: Rating
+  price:
+    type: number
+    label: Prijs
+  presets:
+    hidden: true
+  component:
+    hidden: true
+  dark:
+    hidden: true
+  name:
+    hidden: true
+  color:
+    hidden: true
+  layout:
+    hidden: true
+  position:
+    hidden: true
+  scheme:
+    hidden: true
+  hue:
+    hidden: true
+  align:
+    hidden: true
+  frame:
+    hidden: true
+  variant:
+    hidden: true
+  scale:
+    hidden: true
+  render:
+    hidden: true
+  collection:
+    hidden: true
+  slug:
+    hidden: true
+  id:
+    hidden: true
+  class:
+    hidden: true
+  direction:
+    hidden: true
+  size:
+    hidden: true
+  structure:
+    hidden: true
+
+_editables:
+  content:
+    allow_custom_markup: false
+    remove_custom_markup: false
+    bold: true
+    bulletedlist: true
+    format: p h1 h2 h3 h4 h5 h6
+    image: true
+    image_size_attributes: true
+    italic: true
+    link: true
+    numberedlist: true
+    redo: true
+    table: true
+    underline: true
+    undo: true
+    accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+    mime_type: image/webp
+    resize_style: contain
+    width: 1920
+    height: 1920

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.6.0-beta.3",
+  "version": "0.6.0-beta.6",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/blocks/Banner.astro

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Container from 'fulldev-ui/components/Container.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends HTMLAttributes<'header'>, BlockSchema {
+  as?: HTMLTag
+}
+
+const { as = 'header', text, ...rest } = Astro.props
+---
+
+<Element
+  class:list="banner"
+  {...rest}
+>
+  <Container>
+    <Fragment set:html={text} />
+  </Container>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .banner {
+      @apply relative flex w-full items-center bg-primary py-3 text-primary-foreground;
+
+      .container {
+        @apply flex items-center justify-center overflow-hidden bg-primary text-center text-sm leading-none text-primary-foreground;
+      }
+    }
+  }
+</style>

package/src/blocks/Colleagues1.astro

@@ -0,0 +1,73 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Card from 'fulldev-ui/components/Card.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Stack from 'fulldev-ui/components/Stack.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+---
+
+<Section
+  class:list="colleagues-1"
+  {...rest}
+>
+  <Container>
+    <Writeup align="center">
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph text={paragraph} />
+    </Writeup>
+    <Stack>
+      {
+        cards?.map(({ image, heading, paragraph }) => (
+          <Card>
+            <Image {...image} />
+            <Heading
+              as="h3"
+              size="xl"
+              text={heading}
+            />
+            <Paragraph text={paragraph} />
+          </Card>
+        ))
+      }
+    </Stack>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .colleagues-1 {
+      .container {
+        @apply flex flex-col items-center gap-16;
+      }
+
+      .card {
+        @apply mt-20 flex flex-col items-center gap-1 pt-0;
+      }
+
+      .image {
+        @apply -mt-20 mb-4 aspect-square max-w-40 rounded-full object-cover;
+      }
+
+      .icon {
+        @apply text-primary;
+      }
+    }
+  }
+</style>

package/src/blocks/Contact1.astro

@@ -1,4 +1,6 @@
 ---
+import type { ComponentProps } from 'astro/types'
+import Badges from 'fulldev-ui/components/Badges.astro'
 import Channel from 'fulldev-ui/components/Channel.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Form from 'fulldev-ui/components/Form.astro'
@@ -8,16 +10,17 @@ import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Section from 'fulldev-ui/components/Section.astro'
 import Social from 'fulldev-ui/components/Social.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { ContactSchema } from 'fulldev-ui/schemas/blocks/contact'
-import type { ComponentProps } from 'svelte'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends ComponentProps<typeof Section>, ContactSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
 const {
+  badge,
+  badges,
+  tagline,
   heading,
   form,
   text,
-  tagline,
   googleMaps,
   paragraph,
   buttons,
@@ -37,6 +40,11 @@ const {
   <Element>
     <Element class:list="contact-1-segment">
       <Element class:list="contact-1-content">
+        <Badges
+          size="sm"
+          {badge}
+          {badges}
+        />
         <Tagline
           size="sm"
           text={tagline}

package/src/blocks/Content1.astro

@@ -0,0 +1,79 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Group from 'fulldev-ui/components/Group.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {
+  headings?: ComponentProps<typeof Toc>['headings']
+}
+
+const {
+  tagline,
+  badge,
+  badges,
+  heading,
+  paragraph,
+  list,
+  button,
+  buttons,
+  image,
+  content,
+  headings,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="content-1"
+  {...rest}
+>
+  <Container>
+    <Prose>
+      <Group>
+        <Badge {...badge} />
+        {badges?.map((badge) => <Badge {...badge} />)}
+      </Group>
+      <Tagline text={tagline} />
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <List items={list} />
+      <Group>
+        <Button {...button} />
+        {buttons?.map((button) => <Button {...button} />)}
+      </Group>
+      <Image {...image} />
+      <Fragment set:html={content} />
+      <slot />
+    </Prose>
+    <Toc {headings} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-1 {
+      .container {
+        @apply flex items-start justify-evenly gap-x-gutter;
+      }
+    }
+  }
+</style>

package/src/blocks/Content2.astro

@@ -0,0 +1,94 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Group from 'fulldev-ui/components/Group.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {
+  headings?: ComponentProps<typeof Toc>['headings']
+}
+
+const {
+  tagline,
+  badge,
+  badges,
+  heading,
+  paragraph,
+  list,
+  button,
+  buttons,
+  image,
+  headings,
+  content,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="content-2"
+  {...rest}
+>
+  <Container>
+    <Prose>
+      <Group>
+        <Badge {...badge} />
+        {badges?.map((badge) => <Badge {...badge} />)}
+      </Group>
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <List items={list} />
+      <Group>
+        <Button {...button} />
+        {buttons?.map((button) => <Button {...button} />)}
+      </Group>
+      <Fragment set:html={content} />
+      <slot />
+    </Prose>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-2 {
+      .container {
+        @apply grid items-start gap-x-gutter gap-y-16 lg:grid-cols-2;
+      }
+
+      .prose,
+      .image {
+        @apply lg:sticky lg:top-sticky-16;
+      }
+
+      .prose {
+        @apply max-w-screen-sm;
+      }
+
+      .image {
+        @apply rounded-md;
+      }
+    }
+  }
+</style>

package/src/blocks/Content3.astro

@@ -0,0 +1,70 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badges from 'fulldev-ui/components/Badges.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Group from 'fulldev-ui/components/Group.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { badge, badges, heading, paragraph, list, button, buttons, ...rest } =
+  Astro.props
+---
+
+<Section
+  class:list="content-3"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Group>
+        <Badges
+          size="sm"
+          {badge}
+          {badges}
+        />
+      </Group>
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        size="lg"
+        muted
+        text={paragraph}
+      />
+      <List items={list} />
+      <Group>
+        <Buttons
+          {button}
+          {buttons}
+        />
+      </Group>
+    </Writeup>
+    <Prose>
+      <slot />
+    </Prose>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-3 {
+      .container {
+        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
+      }
+
+      .writeup {
+        @apply lg:sticky lg:top-sticky-16 lg:max-w-xl;
+      }
+    }
+  }
+</style>