fulldev-ui 0.2.13 → 0.3.0-beta.1

package/.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1718391483085
+	}
+}

package/.astro/types.d.ts

@@ -125,22 +125,13 @@ declare module 'astro:content' {
 	>;
 
 	type ContentEntryMap = {
-		"layouts": {
-"index.md": {
-	id: "index.md";
-  slug: "index";
-  body: string;
-  collection: "layouts";
-  data: any
-} & { render(): Render[".md"] };
-};
-"pages": {
+		"pages": {
 "index.md": {
 	id: "index.md";
   slug: "index";
   body: string;
   collection: "pages";
-  data: any
+  data: InferEntrySchema<"pages">
 } & { render(): Render[".md"] };
 };
 
@@ -152,5 +143,5 @@ declare module 'astro:content' {
 
 	type AnyEntryMap = ContentEntryMap & DataEntryMap;
 
-	export type ContentConfig = never;
+	export type ContentConfig = typeof import("../src/content/config.js");
 }

package/.env

@@ -0,0 +1 @@
+TEST='HOI

package/astro.config.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.2.13",
+  "version": "0.3.0-beta.1",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -16,14 +16,15 @@
     "astro-ui"
   ],
   "scripts": {
+    "dev": "astro dev",
     "test": "astro check",
     "check": "astro check"
   },
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
-    "./css": "./src/css/main.css",
-    "./colors": "./src/css/colors.css",
+    "./color": "./src/css/color.css",
+    "./radix": "./src/css/radix.css",
     "./integration": "./src/integration/integration.ts"
   },
   "devDependencies": {
@@ -33,15 +34,11 @@
   },
   "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",
-    "tailwindcss": "^3.4.4",
     "typescript": "^5.4.3",
     "vite-plugin-virtual": "^0.3.0"
   }

package/src/_archive/Childmorphic.ts

@@ -0,0 +1,8 @@
+// import type { AstroGlobal } from 'astro'
+
+// export type Childmorphic<C extends AstroGlobal['props']> = {
+//   [Key in keyof C & string as
+//     | Lowercase<Key>
+//     | Capitalize<Key>
+//     | `${string}${Capitalize<Key>}`]?: C[Key]
+// }

package/src/_archive/getAllCollections.ts

@@ -0,0 +1,10 @@
+// import type { CollectionKey } from 'astro:content'
+// import { getCollection } from 'astro:content'
+
+// export const getAllCollections = async (names: CollectionKey[]) => {
+//   const promises = names.map((name) => getCollection(name))
+//   const resolved = await Promise.all(promises)
+//   const flattened = resolved.flat()
+//   const filtered = flattened.filter(Boolean)
+//   return filtered
+// }

package/src/_archive/getCollectionCascade.ts

@@ -0,0 +1,33 @@
+// import {
+//   getCollection,
+//   type CollectionEntry,
+//   type CollectionKey,
+//   type ContentCollectionKey,
+//   type DataCollectionKey,
+// } from 'astro:content'
+// import { unflatten } from 'flat'
+// import { objectify } from 'radash'
+// import { mapValues } from 'remeda'
+
+// export type CollectionCascade = {
+//   [Key in ContentCollectionKey]: {
+//     [Key in CollectionEntry<ContentCollectionKey>['slug']]: any
+//   }
+// } & {
+//   [Key in DataCollectionKey]: {
+//     [Key in CollectionEntry<DataCollectionKey>['id']]: any
+//   }
+// }
+
+// export const getCollectionCascade = async (collectionKeys: CollectionKey[]) => {
+//   const promises = collectionKeys.map((key) => getCollection(key))
+//   const resolved = await Promise.all(promises)
+//   const flattened = resolved.flat()
+//   const object = objectify(
+//     flattened,
+//     ({ collection, slug, id }) => `${collection}.${slug || id}`
+//   )
+//   const mapped = mapValues(object, (value) => value.data)
+//   const unflattened = unflatten(mapped)
+//   return unflattened as CollectionCascade
+// }

package/src/_archive/getPathname.ts

@@ -0,0 +1,18 @@
+// import type { AstroGlobal } from 'astro'
+// import type { CollectionEntry, ContentCollectionKey } from 'astro:content'
+
+// export const getPathname = ({
+//   slug,
+//   collection,
+//   data,
+// }: CollectionEntry<ContentCollectionKey>):
+//   | AstroGlobal['url']['pathname']
+//   | undefined => {
+//   if (!slug) return
+//   if (data.draft) return
+//   if (data.output === false) return
+//   if (collection === 'pages' && slug === 'index') return '/'
+//   if (collection === 'pages') return `/${slug}`
+//   if (slug === 'index') return `/${collection}`
+//   return `/${collection}/${slug}`
+// }

package/src/_archive/staticPageSchema.ts

@@ -0,0 +1,124 @@
+// import {
+//   getCollection,
+//   getEntry,
+//   z,
+//   type CollectionEntry,
+//   type CollectionKey,
+// } from 'astro:content'
+// import { flatten, unflatten } from 'flat'
+// import { all, camel, construct, get, isString, mapValues } from 'radash'
+// import { mapKeys, merge } from 'remeda'
+
+// interface Options {
+//   casing: boolean
+//   layouts: boolean
+//   references: boolean
+//   selfs: boolean
+// }
+
+// const defaults: Options = {
+//   casing: true,
+//   layouts: true,
+//   references: true,
+//   selfs: true,
+// }
+
+// const transformReferences = async (data: object) =>
+//   await all(
+//     mapValues(flatten(data) as any, async (value) => {
+//       if (!isString(value)) return value
+//       const parts = (value as string).split(' ')
+//       const results = await all(
+//         parts.map(async (valuePart) => {
+//           if (!valuePart.startsWith('$')) return valuePart
+//           if (valuePart.startsWith('$self')) return valuePart
+
+//           const reference = valuePart.split('.')[0].replace('$', '')
+//           const collection = reference.split('/')[0]
+//           const slug = reference.split('/').slice(1).join('/')
+//           const path = valuePart.split('.').slice(1).join('.')
+
+//           if (collection && slug) {
+//             let response = await getEntry(collection as CollectionKey, slug)
+//             const result = get(response?.data, path)
+//             return result
+//           } else if (collection) {
+//             const response = await getCollection(collection as CollectionKey)
+//             const result = response?.map((entry: any) => get(entry?.data, path))
+//             return result
+//           }
+
+//           return valuePart
+//         })
+//       )
+//       if (results.length == 1) return results[0]
+//       return results.join(' ')
+//     })
+//   )
+
+// const transformLayouts = (data: object) => {
+//   const flat: any = flatten(data)
+//   let store: any = {}
+//   let i: number = 0
+
+//   const merged = mapKeys(flat, (key) => {
+//     if (!isString(key)) return key
+//     const parts = key.split('.')
+//     const result = parts.map((part) => {
+//       return part.replace(/^_+/, '')
+//     })
+//     const filtered = result.filter(Boolean)
+//     const joined = filtered.join('.')
+//     return joined
+//   })
+//   const nested = construct(merged)
+//   return nested
+// }
+
+// const transformSelfs = (data: object) => {
+//   const flat = flatten(data) as any
+//   const mapped = mapValues(flat, (value) => {
+//     if (!isString(value)) return value
+//     const parts = (value as string).split(' ')
+//     const result = parts.map((part) => {
+//       if (!part.startsWith('$self')) return part
+//       const pathParts = part.split('.').slice(1)
+//       const camelCased = pathParts.map((part) => camel(part))
+//       const path = camelCased.join('.')
+//       const result = get(data, path)
+//       return result ? result : part
+//     })
+//     return result.join(' ')
+//   })
+//   return unflatten(mapped)
+// }
+
+// const transformCasing = (object: object) => {
+//   const flat = flatten(object)
+//   const mapped = mapKeys(flat, (key) => {
+//     if (!isString(key)) return key
+//     const parts = (key as string).split('.')
+//     const result = parts.map((part) => camel(part))
+//     return result.join('.')
+//   })
+//   return unflatten(mapped)
+// }
+
+// export const pageSchema = (options: Partial<Options> = {}) =>
+//   z.any().transform(async (data: CollectionEntry<CollectionKey>['data']) => {
+//     const { layouts, casing, references, selfs } = merge(defaults, options)
+
+//     if (references) data = await transformReferences(data)
+//     // console.log('references', JSON.stringify(data, null, 2))
+
+//     if (layouts) data = transformLayouts(data)
+//     // console.log('layouts', data)
+
+//     if (casing) data = transformCasing(data)
+//     // console.log('casing', data)
+
+//     if (selfs) data = transformSelfs(data)
+//     // console.log('selfs', data)
+
+//     return data
+//   })

package/src/_archive/transform/transform.ts

@@ -0,0 +1,25 @@
+// import type { CollectionEntry, CollectionKey } from 'astro:content'
+// import { transformCasing } from './transformCasing'
+// import { transformReferences } from './transformReferences'
+// import { transformSelfs } from './transformSelfs'
+// import { transformUnderscores } from './transformUnderscores'
+
+// export const transform = async (
+//   entry: CollectionEntry<CollectionKey>
+// ): Promise<any> => {
+//   // console.log('entry', entry.data)
+
+//   entry = await transformReferences(entry)
+//   // console.log('references', entry)
+
+//   entry = transformUnderscores(entry)
+//   // console.log('underscores', entry)
+
+//   entry = transformCasing(entry)
+//   // console.log('casing', entry)
+
+//   entry = transformSelfs(entry)
+//   // console.log('selfs', entry)
+
+//   return entry
+// }

package/src/_archive/transform/transformCasing.ts

@@ -0,0 +1,24 @@
+// import { flatten, unflatten } from 'flat'
+// import { camel, isObject } from 'radash'
+// import { isArray, isString, mapKeys } from 'remeda'
+
+// export const transformCasing = (data: any) => {
+//   if (!isObject(data) && !isArray(data)) return data
+
+//   const flat: any = flatten(data)
+//   const transformedData = mapKeys(flat, (key) => {
+//     if (!isString(key)) return key
+//     const parts = (key as string).split('.')
+//     const result = parts.map((part) => {
+//       const leadingUnderscores = part.match(/^_+/) || ['']
+//       const withoutLeadingUnderscores = part.replace(/^_+/, '')
+//       const camelCased = camel(withoutLeadingUnderscores)
+//       const result = leadingUnderscores + camelCased
+//       return result
+//     })
+//     return result.join('.')
+//   })
+
+//   const nested = unflatten(transformedData)
+//   return nested
+// }

package/src/_archive/transform/transformReferences.ts

@@ -0,0 +1,54 @@
+// import { getCollection, getEntry, type CollectionKey } from 'astro:content'
+// import { flatten, unflatten } from 'flat'
+// import { all, get, isString, mapValues } from 'radash'
+// import { getPathname } from '../getPathname'
+// import { transform } from './transform'
+
+// export const transformReferences = async (data: object): Promise<any> => {
+//   const flat = flatten(data)
+//   const mappedValues = await all(
+//     mapValues(flat as any, async (value) => {
+//       if (!isString(value)) return value
+//       const parts = (value as string).split(' ')
+//       const mappedParts = await all(
+//         parts.map(async (valuePart) => {
+//           if (!valuePart.startsWith('$/')) return valuePart
+
+//           const reference = valuePart.split('.')[0].replace('$/', '')
+//           const collection = reference.split('/')[0]
+//           const slug = reference.split('/').slice(1).join('/')
+//           const path = valuePart.split('.').slice(1).join('.')
+
+//           if (collection && slug) {
+//             let response = await getEntry(collection as CollectionKey, slug)
+//             if (!response)
+//               throw new Error(`Entry not found: ${collection}/${slug}`)
+//             const transformed = await transform(response as any)
+//             const result = get(transformed?.data, path)
+//             if (!path)
+//               return {
+//                 ...transformed?.data,
+//                 pathname: getPathname(transformed),
+//               }
+//             return result ? result : valuePart
+//           } else if (collection) {
+//             const response = await getCollection(collection as CollectionKey)
+//             if (!response)
+//               throw new Error(`Entry not found: ${collection}/${slug}`)
+//             const mapped = response?.map(async (entry: any) => {
+//               const transformed = await transform(entry?.data)
+//               return get(transformed, path)
+//             })
+//             const result = await all(mapped)
+//             return result ? result : valuePart
+//           }
+
+//           return valuePart
+//         })
+//       )
+//       if (mappedParts.length == 1) return mappedParts[0]
+//       else return mappedParts.join(' ')
+//     })
+//   )
+//   return unflatten(mappedValues)
+// }

package/src/_archive/transform/transformSelfs.ts

@@ -0,0 +1,20 @@
+// import { flatten, unflatten } from 'flat'
+// import { camel, get, isString, mapValues } from 'radash'
+
+// export const transformSelfs = (data: any): any => {
+//   const flat = flatten(data) as any
+//   const mapped = mapValues(flat, (value) => {
+//     if (!isString(value)) return value
+//     const parts = (value as string).split(' ')
+//     const result = parts.map((part) => {
+//       if (!part.startsWith('$.')) return part
+//       const pathParts = part.replace('$.', '').split('.')
+//       const camelCased = pathParts.map((part) => camel(part))
+//       const path = 'data.' + camelCased.join('.')
+//       const result = get(data, path)
+//       return result ? result : part
+//     })
+//     return result.join(' ')
+//   })
+//   return unflatten(mapped)
+// }

package/src/_archive/transform/transformUnderscores.ts

@@ -0,0 +1,19 @@
+// import { flatten, unflatten } from 'flat'
+// import { isString } from 'radash'
+// import { mapKeys } from 'remeda'
+
+// export const transformUnderscores = (data: any): any => {
+//   const flat: any = flatten(data)
+//   const merged = mapKeys(flat, (key) => {
+//     if (!isString(key)) return key
+//     const parts = key.split('.')
+//     const result = parts.map((part) => {
+//       return part.replace(/^_+/, '')
+//     })
+//     const filtered = result.filter(Boolean)
+//     const joined = filtered.join('.')
+//     return joined
+//   })
+//   const nested = unflatten(merged)
+//   return nested
+// }

package/src/components/_Block.astro

@@ -1,4 +1,6 @@
 ---
+import Component from '../_Component.astro'
+
 interface Props {
   block?: string
   [key: string | number | symbol]: any

package/src/components/{_Tag.astro → _Component.astro}

@@ -1,8 +1,8 @@
 ---
-interface Props {
-  theme?: 'light' | 'dark' | string
-  size?: 'sm' | 'md' | 'lg'
-  density?: 'base' | 'compact' | string
+import type { HTMLTag } from 'astro/types'
+
+type Props<As extends HTMLTag> = {
+  as?: As
   slot?: any
   if?: 'content' | any
   [key: string | number | symbol]: any
@@ -12,14 +12,16 @@ const {
   as: As = 'div',
   if: ifProp = 'content',
   theme,
+  compact,
   variant,
   density,
   size,
   align,
+  color,
   position,
-  level,
   frame,
   ratio,
+  contrast,
   structure,
   text,
   html,
@@ -40,17 +42,19 @@ const render =
     <As
       class:list={[
         'full',
-        structure,
         {
+          compact,
+          contrast,
           [`theme-${theme}`]: theme,
           [`variant-${variant}`]: variant,
           [`density-${density}`]: density,
+          [`structure-${structure}`]: structure,
           [`size-${size}`]: size,
           [`align-${align}`]: align,
-          [`level-${level}`]: level,
           [`position-${position}`]: position,
           [`frame-${frame}`]: frame,
           [`ratio-${ratio}`]: ratio,
+          [`color-${color}`]: color,
         },
       ]}
       {...rest}
@@ -64,9 +68,14 @@ const render =
 
 <style is:global lang="scss">
   @import '../css/utils.scss';
-  @import '../css/colors.css';
+  @import '../css/color.css';
   @import '../css/styles.css';
-  @import '../css/sizes.css';
+  @import '../css/size.css';
+  @import '../css/props/frame.scss';
+  @import '../css/props/variant.scss';
+  @import '../css/props/structure.scss';
+  @import '../css/props/align.scss';
+  @import '../css/props/position.scss';
 
   @include component('full') {
     z-index: 0;

package/src/components/{segment → _archive}/Body.astro

@@ -1,14 +1,14 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'body'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag>
+  ComponentProps<typeof Component>
 
 const { as = 'body', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['body']}
   {as}
   {...rest}
@@ -25,11 +25,13 @@ const { as = 'body', ...rest } = Astro.props
       margin: 0;
       background: var(--background);
       padding: 0;
+      width: 100%;
+      max-width: 100vw;
       height: 100%;
       min-height: 100vh;
       color: var(--foreground);
-      font-size: var(--text-2);
+      font-size: var(--text-body);
       font-family: var(--font-family);
     }
   </style>
-</Tag>
+</Component>

package/src/components/{segment → _archive}/Main.astro

@@ -1,20 +1,20 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'main'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag>
+  ComponentProps<typeof Component>
 
 const { as = 'main', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['main']}
   {as}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';

package/src/components/{segment → _archive}/Nav.astro

@@ -1,9 +1,9 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'nav'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag> & {
+  ComponentProps<typeof Component> & {
     structure?: 'spread' | 'group' | 'row'
     align?: 'start' | 'center' | 'end'
   }
@@ -11,14 +11,14 @@ type Props<As extends HTMLTag = 'nav'> = Polymorphic<{ as: As }> &
 const { as = 'nav', structure = 'spread', ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['nav']}
   {as}
   {structure}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';

package/src/components/{structure → _archive}/Row.astro

@@ -1,19 +1,19 @@
 ---
 import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Tag from '../_Tag.astro'
+import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Tag>
+  ComponentProps<typeof Component>
 
 const { ...rest } = Astro.props
 ---
 
-<Tag
+<Component
   class:list={['row']}
   {...rest}
 >
   <slot />
-</Tag>
+</Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';