fulldev-ui 0.1.64

package/.astro/types.d.ts

@@ -0,0 +1,156 @@
+declare module 'astro:content' {
+	interface Render {
+		'.md': Promise<{
+			Content: import('astro').MarkdownInstance<{}>['Content'];
+			headings: import('astro').MarkdownHeading[];
+			remarkPluginFrontmatter: Record<string, any>;
+		}>;
+	}
+}
+
+declare module 'astro:content' {
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+	export type CollectionKey = keyof AnyEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
+
+	export type ContentCollectionKey = keyof ContentEntryMap;
+	export type DataCollectionKey = keyof DataEntryMap;
+
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
+		ContentEntryMap[C]
+	>['slug'];
+
+	export function getEntryBySlug<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		// Note that this has to accept a regular string too, for SSR
+		entrySlug: E
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
+		collection: C,
+		entryId: E
+	): Promise<CollectionEntry<C>>;
+
+	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E
+	): Promise<E[]>;
+	export function getCollection<C extends keyof AnyEntryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown
+	): Promise<CollectionEntry<C>[]>;
+
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(entry: {
+		collection: C;
+		slug: E;
+	}): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(entry: {
+		collection: C;
+		id: E;
+	}): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		slug: E
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		collection: C,
+		id: E
+	): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** Resolve an array of entry references from the same collection */
+	export function getEntries<C extends keyof ContentEntryMap>(
+		entries: {
+			collection: C;
+			slug: ValidContentEntrySlug<C>;
+		}[]
+	): Promise<CollectionEntry<C>[]>;
+	export function getEntries<C extends keyof DataEntryMap>(
+		entries: {
+			collection: C;
+			id: keyof DataEntryMap[C];
+		}[]
+	): Promise<CollectionEntry<C>[]>;
+
+	export function reference<C extends keyof AnyEntryMap>(
+		collection: C
+	): import('astro/zod').ZodEffects<
+		import('astro/zod').ZodString,
+		C extends keyof ContentEntryMap
+			? {
+					collection: C;
+					slug: ValidContentEntrySlug<C>;
+				}
+			: {
+					collection: C;
+					id: keyof DataEntryMap[C];
+				}
+	>;
+	// Allow generic `string` to avoid excessive type errors in the config
+	// if `dev` is not running to update as you edit.
+	// Invalid collection names will be caught at build time.
+	export function reference<C extends string>(
+		collection: C
+	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
+
+	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
+		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+
+	type ContentEntryMap = {
+		"layouts": {
+"index.md": {
+	id: "index.md";
+  slug: "index";
+  body: string;
+  collection: "layouts";
+  data: any
+} & { render(): Render[".md"] };
+};
+"pages": {
+"index.md": {
+	id: "index.md";
+  slug: "index";
+  body: string;
+  collection: "pages";
+  data: any
+} & { render(): Render[".md"] };
+};
+
+	};
+
+	type DataEntryMap = {
+		
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	export type ContentConfig = never;
+}

package/README.md

@@ -0,0 +1,29 @@
+# Fulldev UI
+
+The [Astro][astro] UI library for content-driven websites
+
+Rapidly build content-driven websites, with the power of modern design,
+static / server rendering, and CSS cascading styles.
+
+## Documentation
+
+Please visit the [documentaion site][docs]
+
+## Support
+
+Please [create a Github issue ][issues] for things that cross your mind; feature requests, bug reports or feedback.
+
+## Older versions
+This package has moved to here. See [this package](https://www.npmjs.com/package/@fullui/ui) for older versions.
+
+
+## License
+
+MIT
+
+Copyright (c) 2024–present [Fulldev][fulldev]
+
+[astro]: https://astro.build/
+[docs]: https://ui.full.dev/
+[fulldev]: https://full.dev/
+[issues]: https://github.com/fulldotdev/ui/issues/

package/astro.config.mjs

@@ -0,0 +1,7 @@
+import icon from 'astro-icon'
+import { defineConfig } from 'astro/config'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [icon()],
+})

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "fulldev-ui",
+  "version": "0.1.64",
+  "description": "A component library built for Astro",
+  "homepage": "https://ui.full.dev",
+  "bugs": "https://github.com/fulldotdev/ui/issues",
+  "license": "MIT",
+  "author": "Fulldev <contact@full.dev> (https://full.dev)",
+  "keywords": [
+    "withastro",
+    "astro",
+    "astro-component",
+    "astro-component-library",
+    "astro-ui-library",
+    "astro-ui"
+  ],
+  "scripts": {
+    "test": "astro check",
+    "check": "astro check"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./css": "./src/css/main.css",
+    "./colors": "./src/css/colors.css"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.5.9",
+    "@types/flat": "^5.0.5",
+    "astro": "^4.5.5"
+  },
+  "dependencies": {
+    "@iconify-json/tabler": "^1.1.109",
+    "astro-icon": "^1.1.0",
+    "astro-seo": "^0.8.3",
+    "autoprefixer": "^10.4.19",
+    "cheerio": "1.0.0-rc.12",
+    "flat": "^6.0.1",
+    "radash": "^12.1.0",
+    "remeda": "1.61.0",
+    "sass": "^1.77.0",
+    "typescript": "^5.4.3",
+    "vite-plugin-virtual": "^0.3.0"
+  }
+}

package/src/blocks/todo.md

@@ -0,0 +1,12 @@
+Add config files here for blocks. These should contain the following things:
+
+- schema for in CMS
+- default values
+- schema for all possible props, cms and defaults combined
+
+Each block should have it's own config file, because this aligns with how astro and markdown workk; they utilize folder structure.
+We might need a folder for 'hero' for example, to add all possible hero's.
+
+
+example:
+Hero component should choose which hero. Could also be a local hero. similar behaviour as blocks, but then only hero's.

package/src/components/_Block.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+  block?: string
+  [key: string | number | symbol]: any
+}
+
+const libraryComponents = await Astro.glob('../**/*.astro')
+const userComponents = await Astro.glob('/src/**/*.astro')
+const components = [...userComponents, ...libraryComponents]
+
+const { block, ...rest } = Astro.props
+
+const Component = components.find((component) => {
+  const fileName = component.default.moduleId?.split('/').pop()
+  const componentName = fileName?.split('.')[0]
+  return componentName === block
+})?.default
+---
+
+{Component && <Component {...rest} />}

package/src/components/_Blocks.astro

@@ -0,0 +1,26 @@
+---
+import { pascal } from 'radash'
+import Block from './_Block.astro'
+
+interface Props {
+  [key: string | number | symbol]: {
+    block?: string
+    [key: string | number | symbol]: any
+  }
+}
+---
+
+{
+  Object.entries(Astro.props).map(([key, value]) => {
+    const { block, ...rest } = value
+    const keyPart = key.split(/(?=[A-Z])/).pop()
+    const keyBlock = keyPart ? pascal(keyPart) : ''
+
+    return (
+      <Block
+        block={block ?? keyBlock}
+        {...rest}
+      />
+    )
+  })
+}

package/src/components/_Children.astro

@@ -0,0 +1,38 @@
+---
+import { isObject, pascal } from 'radash'
+import { isArray, isString } from 'remeda'
+
+interface Props {
+  render?: () => any
+  [key: string]: any
+}
+
+const components = await Astro.glob('../**/*.astro')
+// const userComponents = await Astro.glob('/src/**/*.astro')
+// const components = [...userComponents, ...libraryComponents]
+---
+
+{
+  Object.entries(Astro.props).map(([key, value]) => {
+    const lastPart = key.split(/(?=[A-Z])/).pop()
+    if (!lastPart) return null
+    const part = pascal(lastPart)
+
+    if (part === 'Text' && isString(value)) return value
+    if (part === 'Html') return <Fragment set:html={value} />
+    if (part === 'Content' && Astro.props.render) {
+      const { Content } = Astro.props.render()
+      return <Content />
+    }
+
+    const Component: any = components.find((component) => {
+      const fileName = component.default.moduleId?.split('/').pop()
+      const componentName = fileName?.split('.')[0]
+      return componentName === part
+    })?.default
+
+    if (!Component) return null
+    if (isObject(value) || isArray(value)) return <Component {...value} />
+    return <Component html={value} />
+  })
+}

package/src/components/_Plural.astro

@@ -0,0 +1,27 @@
+---
+import { listify } from 'radash'
+import { isNumber, isString, pickBy } from 'remeda'
+
+interface Props {
+  component: any
+  [defaults: string]: any
+  [items: number]: object | string
+}
+
+const { component: Component, ...rest } = Astro.props
+
+const defaults = pickBy(rest, (v, key) => !isNumber(parseInt(key as string)))
+
+const items = pickBy(rest, (v, key) => isNumber(parseInt(key as string)))
+const array = listify(items, (k, value) => value)
+const mapped = array.map((item) => (isString(item) ? { html: item } : item))
+---
+
+{
+  mapped.map((item) => (
+    <Component
+      {...defaults}
+      {...item}
+    />
+  ))
+}

package/src/components/_Tag.astro

@@ -0,0 +1,53 @@
+---
+interface Props {
+  theme?: 'light' | 'dark' | string
+  size?: 'sm' | 'md' | 'lg' | string
+  density?: 'base' | 'compact' | string
+  slot?: any
+  if?: 'slot' | any
+  [key: string | number | symbol]: any
+}
+
+const {
+  as: As = 'div',
+  if: ifProp = 'slot',
+  theme,
+  variant,
+  density,
+  size,
+  ...rest
+} = Astro.props
+
+const slot = await Astro.slots.render('default')
+const render = ifProp === 'slot' ? slot?.trim().length > 0 : ifProp
+---
+
+{
+  render && (
+    <As
+      class:list={[
+        'full-tag',
+        {
+          [`full-theme-${theme}`]: theme,
+          [`full-variant-${variant}`]: variant,
+          [`full-density-${density}`]: density,
+          [`full-size-${size}`]: size,
+        },
+      ]}
+      {...rest}
+    >
+      <Fragment set:html={slot} />
+    </As>
+  )
+}
+
+<style is:global>
+  @import '../css/main.css';
+</style>
+
+<style is:global>
+  .full-tag {
+    z-index: 0;
+    box-sizing: border-box;
+  }
+</style>

package/src/components/base/Badge.astro

@@ -0,0 +1,53 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { Childmorphic } from '../../types/Childmorphic'
+import Children from '../_Children.astro'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> &
+  Childmorphic<{
+    html: string
+    text: string
+  }>
+
+const { as = 'div', variant, ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['full-badge']}
+  {as}
+  {variant}
+  {...rest}
+>
+  <slot name="before" />
+  <Children {...rest} />
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  .full-badge {
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    vertical-align: top;
+    gap: var(--space-2);
+    transition: var(--full-transition);
+    box-shadow: inset 0 0 0 1px var(--border);
+    border-radius: var(--full-border-radius-2);
+    background-color: var(--background);
+    padding-right: var(--space-element-2);
+    padding-left: var(--space-element-2);
+    height: calc(var(--text-element) + 2 * var(--space-element-1));
+    color: var(--foreground);
+    font-weight: var(--full-button-font-weight);
+    font-size: var(--text-element);
+    line-height: 1.625;
+    font-family: var(--full-button-font-family);
+    user-select: none;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+</style>

package/src/components/base/Button.astro

@@ -0,0 +1,85 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { Childmorphic } from '../../types/Childmorphic'
+import Children from '../_Children.astro'
+import Tag from '../_Tag.astro'
+import type Icon from './Icon.astro'
+
+type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag> &
+  Childmorphic<{
+    html: string
+    text: string
+    variant?: 'primary' | 'secondary' | 'ghost'
+    icon: ComponentProps<typeof Icon> | ComponentProps<typeof Icon>['name']
+  }>
+
+// TODO: variants: link, filled, outline, ghost. Deze zijn independent van de color prop. Betekent dus dat je een outline variant hebt van elke color.
+// Let wel op, dit werkt niet met de Primary variant, omdat deze kleuren dan niet kloppen.
+
+const { as = 'a', variant = 'primary', ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['full-button']}
+  {as}
+  {variant}
+  {...rest}
+>
+  <slot name="before" />
+  <Children {...rest} />
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  .full-button {
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    vertical-align: top;
+    gap: var(--space-2);
+    transition: background-color var(--full-transition);
+    cursor: pointer;
+    outline: none !important;
+    box-shadow: inset 0 0 0 1px var(--color-border);
+    border: none;
+    border-radius: var(--full-border-radius-2);
+    background-color: var(--background);
+    padding-right: var(--space-element-3);
+    padding-left: var(--space-element-3);
+    height: calc(var(--text-element) + 2 * var(--space-element-3));
+    color: var(--foreground);
+    font-weight: var(--full-button-font-weight);
+    font-size: var(--text-element);
+    line-height: 1.625;
+    font-family: var(--full-button-font-family);
+    user-select: none;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: var(--hover);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--focus) !important;
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .full-tag + & {
+      --my-spacer: var(--space-4);
+    }
+
+    & + & {
+      --my-spacer: var(--space-2);
+    }
+  }
+</style>

package/src/components/base/Buttons.astro

@@ -0,0 +1,15 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { Pluralmorphic } from '../../types/Pluralmorphic'
+import Plural from '../_Plural.astro'
+import Button from './Button.astro'
+
+type Props = Pluralmorphic<ComponentProps<typeof Button>>
+
+const { props } = Astro
+---
+
+<Plural
+  component={Button}
+  {...props}
+/>

package/src/components/base/Checkbox.astro

@@ -0,0 +1,39 @@
+---
+import type { ComponentProps, HTMLTag } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'input'> = ComponentProps<typeof Tag<As>>
+
+const { as = 'input', type = 'checkbox', name, ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['full-checkbox']}
+  if={name}
+  {name}
+  {as}
+  {type}
+  {...rest}
+/>
+
+<style is:global lang="scss">
+  .full-checkbox {
+    border-width: var(--border-width);
+    border-color: var(--border-color);
+    border-radius: var(--full-border-radius-2);
+    background: var(--background);
+    color: var(--color);
+    accent-color: var(--10);
+    font-size: var(--text);
+
+    &:hover {
+      border: var(--border-color-hover);
+      background: var(--background-hover);
+    }
+
+    &:active {
+      border: var(--border-color-active);
+      background: var(--background-active);
+    }
+  }
+</style>

package/src/components/base/Icon.astro

@@ -0,0 +1,46 @@
+---
+import tablerIcons from '@iconify-json/tabler/icons.json'
+import type { ComponentProps, HTMLTag } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'i'> = ComponentProps<typeof Tag> & {
+  name?: string
+}
+
+const { as = 'i', name = Astro.props.html, ...rest } = Astro.props
+
+const trimmedName = name?.trim() as string | undefined
+const icon = trimmedName && (tablerIcons as any)?.icons[trimmedName]?.body
+---
+
+<Tag
+  class:list={['full-icon']}
+  if={icon}
+  {as}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    set:html={icon}
+  />
+</Tag>
+
+<style is:global lang="scss">
+  .full-icon {
+    display: inline-flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    color: var(--foreground);
+    font-size: var(--text);
+
+    svg {
+      position: absolute;
+      width: 120%;
+      height: 120%;
+    }
+  }
+</style>