@stacksjs/types 0.58.48 → 0.58.49

package/src/ui.ts

@@ -0,0 +1,197 @@
+import type { UserShortcuts } from 'unocss'
+
+export type Font = 'inter' | 'mona' | 'hubot'
+export type Icon = 'heroicons'
+export type WebFontsProviders = 'google' | 'bunny' | 'fontshare'
+
+export interface FontInfo {
+  title: string
+  text: string
+}
+export type FontFor = 'email' | 'desktop' | 'mobile' | 'web'
+
+export interface WebFontMeta {
+  name: string
+  weights?: (string | number)[]
+  italic?: boolean
+  provider?: WebFontsProviders
+}
+
+/**
+ * **UI Engine Options**
+ *
+ * This type defines all of your UI Engine options. Because Stacks is fully-typed, you may
+ * hover any of the options below and the definitions will be provided. In case you
+ * have any questions, feel free to reach out via Discord or GitHub Discussions.
+ */
+export interface UiOptions {
+  /**
+   * **Shortcuts**
+   *
+   * Shortcuts provide you with the ability to combine
+   * utility names for reusability purposes.
+   *
+   * @example
+   * ```
+   * config: {
+   *   shortcuts: {
+   *     'btn': 'px-4 py-2 rounded text-white bg-blue-500',
+   *     'btn-lg': 'btn px-6 py-3',
+   *   }
+   * }
+   * ```
+   */
+  shortcuts: Shortcuts
+
+  /**
+   * **Safelist**
+   *
+   * Use the `safelist` option to ensure the generation of
+   * those utility classes. This is useful when certain
+   * class names don’t exist in your content files.
+   *
+   * @example
+   * ```ts
+   * safelist: [
+   *   'btn',
+   *   'btn-lg',
+   *   'btn-blue',
+   *   'btn-blue-500',
+   * ]
+   */
+  safelist: string
+
+  /**
+   * **Trigger String**
+   *
+   * The "trigger string" defines the class name markup
+   * you want to add into your components.
+   *
+   * @default ':stx:'
+   *
+   * @example
+   * ```ts
+   * trigger: ':stx:'
+   * ```
+   */
+  trigger?: string
+
+  /**
+   * **Class Prefix**
+   *
+   * The prefix for the compiled class name. When transforming
+   * all utility classes into a single class, this prefix
+   * will be added to the generated CSS class name.
+   *
+   * @default 'stx-'
+   *
+   * @example
+   * ```ts
+   * prefix: 'stx-'
+   * ```
+   */
+  classPrefix?: string
+
+  /**
+   * **Hash Function**
+   *
+   * The hash function used to generate the class name.
+   *
+   * @example
+   * ```ts
+   * hash: (str: string) => {
+   *   return str
+   *     .split('')
+   *     .reduce((a, b) => {
+   *       a = ((a << 5) - a) + b.charCodeAt(0)
+   *       return a & a
+   *     }, 0)
+   *     .toString(36)
+   * }
+   */
+  hashFn?: (str: string) => string
+
+  /**
+   * **CSS Resets—Preset**
+   *
+   * Define a standard of reset CSS stylesheets. By default, the Tailwind
+   * reset styles are utilized. You may set this value to `null`
+   * if you prefer not applying any default stylesheets.
+   *
+   * @url https://www.npmjs.com/package/@unocss/reset
+   * @todo preset needs to be added via a Vite plugin on development & build
+   * @example
+   * ```ts
+   * reset: 'tailwind'
+   * ```
+   */
+  reset?: ResetPreset
+
+  /**
+   * **Fonts**
+   *
+   * Define the fonts you want to use. By default, Stacks provides support
+   * for several local font providers. You may set this value to
+   * `null` if you prefer not utilize any local fonts.
+   *
+   * @see https://stacks.ow3.org/fonts
+   * @example applies the same font for all platforms _(web, email, desktop, and mobile)_
+   * ```ts
+   * fonts: {
+   *   title: 'Mona',
+   *   text: 'Hubot'
+   * }
+   * ```
+   * @example
+   * ```ts
+   * fonts: {
+   *   web: {
+   *     title: 'Inter',
+   *     text: 'Mona'
+   *   },
+   *   desktop: {
+   *     title: 'Mona',
+   *     text: 'Inter'
+   *   },
+   * }
+   * ```
+   */
+  fonts?: Record<FontFor, FontInfo> | { [key in FontFor]: FontInfo }
+
+  useWebFonts?: boolean | WebFontsProviders
+
+  /**
+   * **Icon Sets**
+   *
+   * This value defines the icon sets you want to use. When using icons, they
+   * are displayed utilizing a technique called "icons in pure css."
+   * Learn more here https://antfu.me/posts/icons-in-pure-css.
+   *
+   * @see https://stacks.ow3.org/config/icons — list of available icon sets
+   * @todo implement this into Vite build flow
+   * @example
+   * ```ts
+   * icons: ['heroicons']
+   * ```
+   * @example
+   * ```html
+   * <i class="i-heroicons-outline-book-open w-8 h-8 text-gray-500" aria-hidden="true" />
+   * ```
+   */
+  icons: Icon | Icon[]
+  // icons: Record<string, () => Promise<any>>
+}
+
+export type UiConfig = Partial<UiOptions>
+
+export type Shortcuts = UserShortcuts
+
+/**
+ * **Style Reset — Preset**
+ *
+ * This value sets the "reset preset." A preset defines certain
+ * CSS defaults to be applied.
+ *
+ * @default "tailwind"
+ */
+export type ResetPreset = 'tailwind' | 'normalize' | 'sanitize' | 'eric-meyer' | 'antfu' | null

package/src/utils.ts

@@ -0,0 +1,47 @@
+/**
+ * Null or whatever.
+ */
+export type Nullable<T> = T | null | undefined
+
+/**
+ * Function
+ */
+export type Fn<T = void> = () => T
+
+/**
+ * Array, or not yet
+ */
+export type Arrayable<T> = T | Array<T>
+
+/**
+ * Constructor.
+ */
+export type Constructor<T = void> = new (...args: any[]) => T
+
+/**
+ * Defines an intersection type of all union items.
+ *
+ * @param U Union of any types that will be intersected.
+ * @returns U items intersected
+ * @see https://stackoverflow.com/a/50375286/9259330
+ */
+export type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
+
+export type MergeInsertions<T> =
+  T extends object
+    ? { [K in keyof T]: MergeInsertions<T[K]> }
+    : T
+
+export type DeepMerge<F, S> = MergeInsertions<{
+  [K in keyof F | keyof S]: K extends keyof S & keyof F
+    ? DeepMerge<F[K], S[K]>
+    : K extends keyof S
+      ? S[K]
+      : K extends keyof F
+        ? F[K]
+        : never;
+}>
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: DeepPartial<T[P]>;
+}