fulldev-ui 0.3.35 → 0.4.0-beta.0

package/src/content/pages/blocks/reviews.mdx

@@ -0,0 +1,249 @@
+---
+_layout: BlockLayout
+
+title: Reviews
+image: /images/blocks/reviews.png
+---
+
+```astro live
+---
+import Reviews from 'fulldev-ui/blocks/Reviews.astro'
+---
+
+<Reviews
+  size="md"
+  tagline="Rated 5,0 out of 86 reviews"
+  heading="What Our Customers Say"
+  text="Discover what our satisfied customers are saying about us."
+  cards={[
+    {
+      rating: {
+        value: 5,
+        avatar: '/images/avatars/1.jpeg',
+        label: 'John Doe',
+      },
+      heading: 'Exceptional Service',
+      text: 'Outstanding experience! Highly recommended.',
+    },
+    {
+      rating: {
+        value: 5,
+        avatar: '/images/avatars/2.jpeg',
+        label: 'Jane Smith',
+      },
+      heading: 'Great Product',
+      text: "This product exceeded my expectations. The quality is superb and the customer support is top-notch. I'll definitely be a returning customer.",
+    },
+    {
+      rating: {
+        value: 5,
+        avatar: '/images/avatars/3.jpeg',
+        label: 'Mike Johnson',
+      },
+      heading: 'Reliable and Efficient',
+      text: "I've been using this for months now, and it's consistently performed well. The efficiency and reliability are impressive.",
+    },
+    {
+      rating: {
+        value: 5,
+        avatar: '/images/avatars/4.jpeg',
+        label: 'Emily Brown',
+      },
+      heading: 'Fantastic Experience',
+      text: "From ordering to delivery, everything was smooth. The product itself is fantastic, and I couldn't be happier with my purchase.",
+    },
+    {
+      rating: {
+        value: 5,
+        avatar: '/images/avatars/5.jpeg',
+        label: 'David Wilson',
+      },
+      heading: 'Best in Class',
+      text: "After trying several similar products, this one stands out as the best. It's clear why it's a market leader.",
+    },
+    {
+      rating: {
+        value: 5,
+        avatar: '/images/avatars/6.jpeg',
+        label: 'Sarah Davis',
+      },
+      heading: 'Innovative Design',
+      text: "The innovative features of this product have significantly improved my workflow. It's a game-changer in its category.",
+    },
+    {
+      rating: {
+        value: 5,
+        avatar: '/images/avatars/7.jpeg',
+        label: 'Alex Taylor',
+      },
+      heading: 'Time-Saver',
+      text: "This product has saved me countless hours. Its efficiency is unmatched, and I can't imagine going back to my old ways.",
+    },
+    {
+      rating: {
+        value: 5,
+        avatar: '/images/avatars/8.jpeg',
+        label: 'Olivia Martinez',
+      },
+      heading: 'Reliable and Durable',
+      text: "I've had this product for over a year now, and it's still performing as well as day one. The durability is impressive, making it a worthwhile long-term investment.",
+    },
+  ]}
+/>
+```
+
+```astro live
+---
+import Reviews from 'fulldev-ui/blocks/Reviews.astro'
+---
+
+<Reviews
+  rating={{
+    value: 5,
+    label: 'Rated 5,0 out of 86 reviews',
+    avatars: [
+      '/images/avatars/1.jpeg',
+      '/images/avatars/2.jpeg',
+      '/images/avatars/3.jpeg',
+      '/images/avatars/4.jpeg',
+    ],
+  }}
+  heading="What Our Customers Say"
+  text="Discover what our satisfied customers are saying about us."
+  cards={[
+    {
+      rating: 5,
+      heading: 'Exceptional Service',
+      text: 'Outstanding experience! Highly recommended.',
+    },
+    {
+      rating: 5,
+      heading: 'Great Product',
+      text: "This product exceeded my expectations. The quality is superb and the customer support is top-notch. I'll definitely be a returning customer.",
+    },
+    {
+      rating: 5,
+      heading: 'Reliable and Efficient',
+      text: "I've been using this for months now, and it's consistently performed well. The efficiency and reliability are impressive.",
+    },
+    {
+      rating: 5,
+      heading: 'Fantastic Experience',
+      text: "From ordering to delivery, everything was smooth. The product itself is fantastic, and I couldn't be happier with my purchase.",
+    },
+    {
+      rating: 5,
+      heading: 'Best in Class',
+      text: "After trying several similar products, this one stands out as the best. It's clear why it's a market leader.",
+    },
+    {
+      rating: 5,
+      heading: 'Innovative Design',
+      text: "The innovative features of this product have significantly improved my workflow. It's a game-changer in its category.",
+    },
+    {
+      rating: 5,
+      heading: 'Time-Saver',
+      text: "This product has saved me countless hours. Its efficiency is unmatched, and I can't imagine going back to my old ways.",
+    },
+    {
+      rating: 5,
+      heading: 'Reliable and Durable',
+      text: "I've had this product for over a year now, and it's still performing as well as day one. The durability is impressive, making it a worthwhile long-term investment.",
+    },
+  ]}
+/>
+```
+
+```astro live
+---
+import Reviews from 'fulldev-ui/blocks/Reviews.astro'
+---
+
+<Reviews
+  size="sm"
+  align="start"
+  structure="carousel"
+  heading="What Our Customers Say"
+  text="Discover what our satisfied customers are saying about us."
+  cards={[
+    {
+      rating: 5,
+      heading: 'Exceptional Service',
+      text: 'Outstanding experience! Highly recommended.',
+    },
+    {
+      rating: 5,
+      heading: 'Great Product',
+      text: "This product exceeded my expectations. The quality is superb and the customer support is top-notch. I'll definitely be a returning customer.",
+    },
+    {
+      rating: 5,
+      heading: 'Reliable and Efficient',
+      text: "I've been using this for months now, and it's consistently performed well. The efficiency and reliability are impressive.",
+    },
+    {
+      rating: 5,
+      heading: 'Fantastic Experience',
+      text: "From ordering to delivery, everything was smooth. The product itself is fantastic, and I couldn't be happier with my purchase.",
+    },
+    {
+      rating: 5,
+      heading: 'Best in Class',
+      text: "After trying several similar products, this one stands out as the best. It's clear why it's a market leader.",
+    },
+    {
+      rating: 5,
+      heading: 'Innovative Design',
+      text: "The innovative features of this product have significantly improved my workflow. It's a game-changer in its category.",
+    },
+    {
+      rating: 5,
+      heading: 'Time-Saver',
+      text: "This product has saved me countless hours. Its efficiency is unmatched, and I can't imagine going back to my old ways.",
+    },
+    {
+      rating: 5,
+      heading: 'Reliable and Durable',
+      text: "I've had this product for over a year now, and it's still performing as well as day one. The durability is impressive, making it a worthwhile long-term investment.",
+    },
+  ]}
+/>
+```
+
+```astro live
+---
+import Reviews from 'fulldev-ui/blocks/Reviews.astro'
+---
+
+<Reviews
+  heading="Customer Testimonials"
+  text="See what our valued customers have to say about their experiences."
+  structure="grid"
+  frame="panel"
+  variant="primary"
+  cards={[
+    {
+      rating: 5,
+      heading: 'Life-Changing Product',
+      text: "This product has revolutionized my daily routine. I can't imagine life without it now!",
+      avatar: '/images/avatars/1.jpeg',
+      label: 'John Doe',
+    },
+    {
+      rating: 4,
+      heading: 'Great Value for Money',
+      text: 'Excellent quality at a reasonable price. Definitely worth every penny.',
+      avatar: '/images/avatars/2.jpeg',
+      label: 'Jane Smith',
+    },
+    {
+      rating: 5,
+      heading: 'Superb Customer Service',
+      text: 'The support team went above and beyond to help me. Truly impressive!',
+      avatar: '/images/avatars/3.jpeg',
+      label: 'Mike Johnson',
+    },
+  ]}
+/>
+```

package/src/content/pages/blocks.mdx

@@ -0,0 +1,10 @@
+---
+_layout: BlockOverviewLayout
+
+seo:
+  title: Fulldev UI - Astro block library, open-source
+  description: Make websites rapidly with pre-built blocks.
+
+title: Blocks
+heading: Blocks that you can customize with props
+---

package/src/content/pages/index.mdx

@@ -0,0 +1,65 @@
+---
+seo:
+  title: Fulldev UI - Astro component and block library, open-source
+  description: Make websites rapidly with pre-built components and blocks.
+
+sections:
+  hero:
+    _bookshop_name: Hero
+    color: brand
+    badge:
+      as: a
+      text: We just released a big update 🎉
+      href: https://discord.gg/vXZqMbadm8
+    heading: The Astro UI library to build content sites
+    text: Make websites with prebuilt components and blocks
+    buttons:
+      - text: Get Started
+        href: /overview/installation
+      - text: GitHub
+        href: https://github.com/fulldotdev/ui
+        target: _blank
+        icon: brand-github
+
+  blocks:
+    _bookshop_name: Content
+    color: brand
+    label: Blocks
+    heading: Use pre-built blocks with just props
+    text: we created a great gallery of blocks to build content sites with a modern look and feel, all of our blocks are build with components from the library to achieve a consistent look.
+    image: /images/block-code.png
+    reverse: odd
+    buttons:
+      - href: /blocks
+        icon: layout
+        text: View blocks
+
+  components:
+    _bookshop_name: Content
+    color: brand
+    label: Components
+    heading: Or built your own, with easy to use components
+    text: our rich set of components make it easy to build your own blocks with great customizability through props and global theming.
+    image: /images/component-code.png
+    reverse: odd
+    buttons:
+      - href: /base/badge
+        icon: code
+        text: View components
+
+  cta:
+    _bookshop_name: Cta
+    size: lg
+    variant: primary
+    heading: Build content websites in a fraction of time
+    text: A library of components and blocks to build content sites, fast.
+    buttons:
+      - text: Get Started
+        href: /overview/installation
+        color: brand
+      - text: Github
+        href: https://github.com/fulldotdev/ui
+        target: _blank
+        icon: brand-github
+        color: brand
+---

package/src/content/pages/overview/frameworks.mdx

@@ -0,0 +1,180 @@
+---
+_layout: PostLayout
+settings: components
+---
+
+# Frameworks
+Fulldev UI is written in vanilla CSS and .astro files. It is framework agnostic.
+
+## JS frameworks
+
+All styles in Fulldev UI use regular CSS and classes. Classes use the following naming convention:
+
+- Component classes are the same as the component name, like `button` for `<Button>`.
+- Prop classes have the prop name as prefix, like `variant-primary` for `<Button variant="primary">`.
+- If a prop is a boolean the class is added without a prefix, like `contrast`.
+- To prevent conflicts, all styles only apply if there is a `full` class on the element too.
+
+This means you can apply Fulldev UI styles to any framework component as follows:
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<a class="full button variant-primary contrast radius-auto"> Button </a>
+<Button contrast> Button </Button>
+```
+
+## CSS frameworks
+
+A TailwindCSS plugin and UnoCSS preset is available.
+
+### TailwindCSS
+
+In your `tailwind.config.ts` add the following:
+
+```ts
+// tailwind.config.ts
+import fulldevUI from 'fulldev-ui/tailwind'
+
+export default defineConfig({
+  plugins: [fulldevUI],
+})
+```
+
+### UnoCSS
+
+In your `uno.config.ts` add the following:
+
+```ts
+// uno.config.ts
+import fulldevUI from 'fulldev-ui/unocss'
+
+export default defineConfig({
+  presets: [fulldevUI],
+})
+```
+
+
+```ts
+// uno.config.ts
+import fulldevUI from 'fulldev-ui/unocss'
+
+export default defineConfig({
+  presets: [fulldevUI],
+})
+```
+
+## Utility classes
+
+The following classes are available when using the Tailwind plugin or UnoCSS preset.
+
+### Spacing
+
+The following spacing classes are added to your tailwind/uno config. 
+
+You can use them like `p-space-1`, `m-space-1`, `h-space-1`, `w-space-1`, etc.
+```ts
+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)',
+},
+```
+
+### Font size
+
+The following spacing classes are added to your tailwind/uno config. 
+
+You can use them like `text-1`, `text-2`, `text-3`, etc.
+
+```ts
+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)',
+}
+```
+
+### Border radius
+
+The following border radius classes are added to your tailwind/uno config. 
+
+You can use them like `rounded-1`, `rounded-2`, `rounded-3`, etc.
+
+```ts
+borderRadius: {
+  1: 'var(--radius-1)',
+  2: 'var(--radius-2)',
+  3: 'var(--radius-3)',
+}
+```
+
+### Color classes
+
+The following color classes are added to your tailwind/uno config. 
+
+You can use them like `bg-color-1`, `text-base-2`, `border-base-6`, etc.
+
+```ts
+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/content/pages/overview/installation.mdx

@@ -0,0 +1,20 @@
+---
+_layout: PostLayout
+settings: components
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Installation
+
+Install fulldev-ui with your favorite package manager and you are ready to go. To get started with the integration see the <Link href="/overview/integration">integration page.</Link>
+
+```bash
+pnpm i fulldev-ui
+# or
+bun i fulldev-ui
+# or
+yarn add fulldev-ui
+# or
+npm i fulldev-ui
+```

package/src/content/pages/overview/integration.mdx

@@ -0,0 +1,37 @@
+---
+_layout: PostLayout
+settings: components
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Integration
+
+After <Link href="/overview/installation">installation</Link> you can generate your color palettes via an Astro integration. You can optionally add a custom css file and define custom colors and other theming options, see the <Link href="/overview/theming">theming page</Link> for more information.
+
+```ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    fulldev({
+      css: '/src/css/custom.css',
+      colors: {
+        theme: 'dark',
+        dark: {
+          background: '#111110',
+          base: '#6F6D66',
+          brand: '#F50',
+        },
+        light: {
+          background: '#EEEEEC',
+          base: '#6F6D66',
+          brand: '#F50',
+        },
+      },
+    }),
+  ],
+})
+```

package/src/content/pages/overview/introduction.mdx

@@ -0,0 +1,20 @@
+---
+_layout: PostLayout
+settings: components
+---
+
+# Introduction
+
+Fulldev UI focusses on content websites rather than applications.
+
+##### Build entire websites with just components
+
+Fulldev UI is unique in that it introduces larger components to build entire pages, and even websites. Like a Section component that just works.
+
+##### Integrates with any JS / CSS framework
+
+Want to use Tailwind, or something else? You can overwrite all styles. Need an interactive framework component? Styles can be applied with one simple class.
+
+##### Automated colors, spacing and sizes
+
+Everything is carefully designed to be fully responsive. Component adapt to their environment, like a Heading being different in a Section than in a Card. You can also customize via simple props.

package/src/content/pages/overview/theming.mdx

@@ -0,0 +1,83 @@
+---
+_layout: PostLayout
+settings: components
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Theming
+
+## Colors
+
+The color theme is inspired by / compatible with <Link href="https://www.radix-ui.com/colors">Radix Colors.</Link>
+
+### Automatic setup
+
+With the fulldev-ui integration you can easily set a theme and generate a radix color palette. See the <Link href="/overview/integration">integration page</Link> for details.
+
+### Manual setup
+
+You can define a `base` and a `brand` theme, both with 12 steps and 1 contrast step for text on step 9. For a detailed explenation see <Link href="https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale">this page</Link>.
+
+```css
+:root,
+.theme-light {
+  --base-1: ;
+  --base-2: ;
+  --base-3: ;
+  --base-4: ;
+  --base-5: ;
+  --base-6: ;
+  --base-7: ;
+  --base-8: ;
+  --base-9: ;
+  --base-10: ;
+  --base-11: ;
+  --base-12: ;
+  --base-contrast: ;
+
+  --brand-1: ;
+  --brand-2: ;
+  --brand-3: ;
+  --brand-4: ;
+  --brand-5: ;
+  --brand-6: ;
+  --brand-7: ;
+  --brand-8: ;
+  --brand-9: ;
+  --brand-10: ;
+  --brand-11: ;
+  --brand-12: ;
+  --brand-contrast: ;
+}
+```
+
+### Dark theme
+
+Dark mode is set via a simple `.theme-dark` class.
+
+If you want to use a dark theme by default, remove the `:root` selector from the light theme and add it to the dark theme.
+
+Components in Fulldev UI that support theme switching have the `theme` prop available, which adds either the `theme-dark` or `theme-light` class
+
+```css
+.theme-dark {
+  /* Same variables here as above */
+}
+```
+
+## Radius
+
+The `--border-radius` variable is a multiplier applied to all radius values. The default value is `1`.
+
+```css
+:root {
+  --border-radius: 1;
+}
+```
+
+## Other
+
+Since Fulldev UI uses just regular CSS with low specificity, you can customize anything else using custom CSS.
+
+We plan to add more customization via variables later.

package/src/content/pages/structure/_row.mdx

@@ -0,0 +1,23 @@
+---
+_layout: BlockLayout
+title: Row
+description: Structures children in a horizontal row. This component sizes dynamically, the margin between a heading and a paragraph is smaller than the margin between a paragraph an image.
+---
+
+```astro live
+---
+import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro'
+import Row from 'fulldev-ui/components/Row.astro'
+---
+
+<Row>
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+  <DecorativeBox />
+</Row>
+```