fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-5

package/src/content/pages/base/button.mdx

@@ -1,60 +0,0 @@
----
-presets: [docs]
-
-title: Button
----
-
-# Button
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button color="brand">Button</Button>
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button variant="primary">Button</Button>
-<Button variant="secondary">Button</Button>
-<Button variant="tertiary">Button</Button>
-```
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button icon="circle" text="Button" text="Buttontje" />
-```
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button size="sm" text="Button" />
-<Button size="md" text="Button" />
-<Button size="lg" text="Button" />
-```
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button color="base" text="Button" />
-<Button color="brand" text="Button" />
-```

package/src/content/pages/base/checkbox.mdx

@@ -1,42 +0,0 @@
----
-presets: [docs]
-
-title: Checkbox
----
-
-# Checkbox
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Checkbox from 'fulldev-ui/components/Checkbox.astro'
----
-
-<Checkbox label="My Checkbox" color="base" />
-```
-
-```astro live
----
-import Checkbox from 'fulldev-ui/components/Checkbox.astro'
----
-
-<Checkbox label="Base" color="base" />
-<Checkbox label="Brand" color="brand" />
-```
-
-```astro live
----
-import Checkbox from 'fulldev-ui/components/Checkbox.astro'
----
-
-<Checkbox label="Small" size="sm" />
-<Checkbox label="Medium" size="md" />
-<Checkbox label="Large" size="lg" />
-```

package/src/content/pages/base/icon.mdx

@@ -1,55 +0,0 @@
----
-presets: [docs]
-
-title: Icon
----
-
-# Icon
-
-We use [Tabler Icons](https://tablericons.com/) under the hood, you can use any of those icons by having the `name` prop match one of the icon names.
-
-```astro live
----
-import Icon from 'fulldev-ui/components/Icon.astro'
----
-
-<Icon name="code" color="brand" size="lg" />
-```
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Icon from 'fulldev-ui/components/Icon.astro'
----
-
-<Icon name="circle" />
-<Icon name="arrow-right" />
-<Icon name="brand-x" />
-<Icon name="brand-github" />
-```
-
-```astro live
----
-import Icon from 'fulldev-ui/components/Icon.astro'
----
-
-<Icon size="sm" name="circle" />
-<Icon size="md" name="circle" />
-<Icon size="lg" name="circle" />
-```
-
-```astro live
----
-import Icon from 'fulldev-ui/components/Icon.astro'
----
-
-<Icon color="base" name="circle" />
-<Icon color="brand" name="circle" />
-```

package/src/content/pages/base/image.mdx

@@ -1,42 +0,0 @@
----
-presets: [docs]
-
-title: Image
----
-
-# Image
-
-import Link from 'fulldev-ui/components/Link.astro'
-
-To use content collections for alt texts, see <Link href="/overview/content-layer/#image-alt-collections">generateImageEntries</Link>.
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Image from 'fulldev-ui/components/Image.astro'
----
-
-<Image src="placeholder-landscape.webp" />
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Image from 'fulldev-ui/components/Image.astro'
----
-
-{/* image in public/images/ */}
-<Image src="/images/placeholder-landscape.webp" />
-
-{/* optimized image in public/images/ using astro:assets */}
-<Image src="/images/placeholder-landscape.webp" width={600} height={400} />
-
-{/* automatically optimized image in src/images/ using astro:assets */}
-<Image src="placeholder-landscape.webp" />
-```

package/src/content/pages/base/input.mdx

@@ -1,56 +0,0 @@
----
-presets: [docs]
-
-title: Input
----
-
-# Input
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Input from 'fulldev-ui/components/Input.astro'
----
-
-<Input
-  label="Email"
-  icon="mail"
-  name="input"
-  type="email"
-  placeholder="This is an input"
-/>
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Input from 'fulldev-ui/components/Input.astro'
----
-
-<Input label="Name" icon="mail" name="name" type="email" />
-```
-
-```astro live
----
-import Input from 'fulldev-ui/components/Input.astro'
----
-
-<Input size="sm" name="name" />
-<Input size="md" name="name" />
-<Input size="lg" name="name" />
-```
-
-```astro live
----
-import Input from 'fulldev-ui/components/Input.astro'
----
-
-<Input color="base" name="name" />
-<Input color="brand" name="name" />
-```

package/src/content/pages/base/rating.mdx

@@ -1,55 +0,0 @@
----
-presets: [docs]
-
-title: Rating
----
-
-# Rating
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Rating from 'fulldev-ui/components/Rating.astro'
----
-
-<Rating avatar="avatar-1.jpeg" label="John Doe" value={4} color="brand" />
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Rating from 'fulldev-ui/components/Rating.astro'
----
-
-<Rating
-  avatars={['avatar-1.jpeg', 'avatar-2.jpeg', 'avatar-3.jpeg', 'avatar-4.jpeg']}
-  label="5.0 out of 86 reviews"
-  value={5}
-  color="brand"
-/>
-```
-
-```astro live
----
-import Rating from 'fulldev-ui/components/Rating.astro'
----
-
-<Rating value={3} color="base" />
-<Rating value={5} color="brand" />
-```
-
-```astro live
----
-import Rating from 'fulldev-ui/components/Rating.astro'
----
-
-<Rating value={5} size="sm" />
-<Rating value={5} size="md" />
-<Rating value={5} size="lg" />
-```

package/src/content/pages/base/textarea.mdx

@@ -1,58 +0,0 @@
----
-presets: [docs]
-
-title: Textarea
----
-
-# Textarea
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Textarea from 'fulldev-ui/components/Textarea.astro'
----
-
-<Textarea name="message" placeholder="Write a message.." label="Textarea" />
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Textarea from 'fulldev-ui/components/Textarea.astro'
----
-
-<Textarea size="sm" name="message" placeholder="name" />
-<Textarea size="md" name="message" placeholder="name" />
-<Textarea size="lg" name="message" placeholder="name" />
-```
-
-```astro live
----
-import Textarea from 'fulldev-ui/components/Textarea.astro'
----
-
-<Textarea label="Message" name="message" placeholder="name" />
-```
-
-```astro live
----
-import Textarea from 'fulldev-ui/components/Textarea.astro'
----
-
-<Textarea label="Message" name="message" placeholder="name" />
-```
-
-```astro live
----
-import Textarea from 'fulldev-ui/components/Textarea.astro'
----
-
-<Textarea color="base" name="message" placeholder="name" />
-<Textarea color="brand" name="message" placeholder="name" />
-```

package/src/content/pages/base/theme-select.mdx

@@ -1,15 +0,0 @@
----
-presets: [docs]
-
-title: ThemeSelect
----
-
-# ThemeSelect
-
-```astro live
----
-import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
----
-
-<ThemeSelect />
-```

package/src/content/pages/layouts/_layout.mdx

@@ -1,14 +0,0 @@
----
-presets: [docs]
-
-title: Layout
----
-
-import Layout from 'fulldev-ui/layouts/Layout.astro?raw'
-import { Code } from 'astro:components'
-
-# Layout
-
-The Layout component is used to wrap the content of a page. It provides a structured template for your website.
-
-<Code code={Layout} lang="astro" />

package/src/content/pages/layouts/docslayout.mdx

@@ -1,14 +0,0 @@
----
-presets: [docs]
-
-title: DocsLayout
----
-
-import Layout from 'fulldev-ui/layouts/DocsLayout.astro?raw'
-import { Code } from 'astro:components'
-
-# DocsLayout
-
-The DocsLayout component is used to wrap the content of a page in a sidebar and a main content area and table of contents.
-
-<Code code={Layout} lang="astro" />

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

@@ -1,75 +0,0 @@
----
-presets: [docs]
-title: Components
----
-
-# Components
-
-Fulldev UI offers a collection of components that are styled with regular CSS, have cascading styles, and are easy to customize.
-
-## Usage
-
-To use a component, you need to import it from the `fulldev-ui` package.
-
-```astro
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button text="Click me" />
-```
-
-```astro
----
-import Hero from 'fulldev-ui/blocks/Hero.astro'
----
-
-<Hero text="Props here" />
-```
-
-```astro
----
-import Hero from 'fulldev-ui/blocks/Hero.astro'
-import Layout from 'fulldev-ui/layouts/Layout.astro'
----
-
-<Layout>
-  <Hero />
-</Layout>
-```
-
-## Slots
-
-Even though we recommend using props to pass content into components, you can also use slots to inject content into a component.
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-{/* Slots example */}
-<Button>Click me</Button>
-
-{/* Props example */}
-<Button text="Click me" />
-```
-
-## Rendering
-
-If no content passed to a component, it will NOT render anything. unless you pass an `if` prop.
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-{/* This will not render anything */}
-<Button />
-
-{/* This will render a button */}
-<Button if={true} />
-```
-
-## Overriding Components
-
-You can override components by creating a new component with the same name as one from the library in the **src/components** directory and adding your custom code. This also works for blocks and layouts.

package/src/content/pages/overview/content-collections.mdx

@@ -1,139 +0,0 @@
----
-presets: [docs]
-title: Content Collections
----
-
-import Link from 'fulldev-ui/components/Link.astro'
-
-# Content Collections
-
-We utilize <Link href="https://docs.astro.build/docs/guides/content-collections/">Astro's Content Layer</Link> to create entire websites using just content files and our components.
-
-## Starter Template
-
-This is the recommended way to get started with our content layer integration. We've created a <Link href="https://github.com/fulldotdev/starter/tree/main">starter template</Link> with examples of everything you need to get started.
-
-```bash
-pnpm create astro@latest -- --template fulldotdev/starter
-```
-
-## Manual Setup
-
-To get started with the manual setup, you need to install the <Link href="/overview/installation/">integration</Link> and add `injectRoutes: true` to your `astro.config.ts` file, see <Link href="#type-safe-frontmatter">frontmatter</Link> below for more information on how this generates a site using content files.
-
-```ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-// https://astro.build/config
-export default defineConfig({
-  integrations: [
-    fulldev({
-      // other options
-      injectRoutes: true,
-    }),
-  ],
-})
-```
-
-## Type-safe frontmatter
-
-Each file has a few frontmatter objects that are important to know about. Seo has priority over title and description, however title and description is used in multiple places like a card.
-
-```yml
----
-preset: [docs] # Applies the configuration from src/content/presets/docs.yml
-component: DocsLayout
-
-seo:
-  title: Page Title
-  description: This is my page description
-  image: /image.jpg # Open Graph Image
-
-# Information on the page, this is used in places like card, sidebar, etc.
-title: Page Title
-description: This is my page description
-
-sections: # Here you generate the page by adding a component and passing props
-  - component: Hero
-    heading: Page Title
-    text: This is my page description
-    buttons:
-      - text: Button
-        color: brand
-        href: /
-      - text: Button
-        href: /
----
-# This is the prose, you can use markdown here
-```
-
-For all objects avaliable in the Content Layer, see the <Link href="https://ui.full.dev/schemas/page/">schemas</Link>.
-
-### Presets
-
-Presets are configuration files that can be used to set the default values for a page. They are located in the **src/content/presets** directory and you can use them by adding the `preset` property to the frontmatter of a page or add a `basePreset` to the integration setup in the `astro.config.ts` file.
-
-```ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-// https://astro.build/config
-export default defineConfig({
-  integrations: [
-    fulldev({
-      // other options
-      basePreset: 'base', // Applies the configuration from src/content/presets/base.yml to every page
-    }),
-  ],
-})
-```
-
-## i18n
-
-Getting started with i18n is easy, you can easily add additional languages by creating a new folder named after a language code in the **content/pages** directory and adding your content files in the new language.
-
-These pages are just as static as the others however you can merge them with the default language by adding the `i18n` key to the frontmatter.
-
-By merging pages you only need to specify the content that is different for the new language. Things like images do not need to be repeated in these new files. See example:
-
-content/pages/index.md:
-
-```md
----
-sections:
-  - component: Hero
-    image: /image.webp
-    heading: Page Title
-    text: This is my page description
----
-```
-
-content/pages/nl/index.md:
-
-```md
----
-i18n: index
-
-sections:
-  - component: Hero
-    heading: Page Title
-    text: This is my page description
----
-```
-
-These return the same results
-
-### Example structure
-
-```bash
-.
-├── src/
-│   ├── content/
-│   │   ├── pages/
-│   │   │   ├── index.md
-│   │   │   ├── nl/
-│   │   │   │   └── index.md
-│   │   │   └── de/
-│   │   │   │   └── index.md
-```