stacks 0.1.0 → 0.37.3

package/core/types/src/markdown.ts

@@ -0,0 +1,198 @@
+import type MarkdownIt from 'markdown-it'
+import type { ComponentPluginOptions } from '@mdit-vue/plugin-component'
+import type { FrontmatterPluginOptions } from '@mdit-vue/plugin-frontmatter'
+import type { MarkdownItEnv } from '@mdit-vue/types'
+import type { FilterPattern } from '@rollup/pluginutils'
+
+/** a `<meta />` property in HTML is defined with the following name/values */
+export interface MetaProperty {
+  key?: string
+  /**
+   * the "name" property used by Facebook and other providers who
+   * use the Open Graph standards
+   */
+  property?: string
+  /**
+   * used by google to identify the "name" of the name/value pair
+   */
+  itemprop?: string
+  /**
+   * used by Twitter to indicate the "name" field in a meta properties
+   * name/value pairing
+   */
+  name?: string
+  /**
+   * The value of the meta property
+   */
+  content?: any
+  [key: string]: unknown
+}
+
+/**
+ * Frontmatter content is represented as key/value dictionary
+ */
+export interface Frontmatter {
+  title?: string
+  name?: string
+  description?: string
+  meta?: MetaProperty[]
+  [key: string]: unknown
+}
+
+export interface Options {
+  /**
+   * Explicitly set the Vue version
+   *
+   * @default auto detected
+   */
+  vueVersion?: string
+
+  /**
+   * Enable head support, need to install @vueuse/head and register to App in main.js
+   *
+   * @default false
+   */
+  headEnabled?: boolean
+
+  /**
+   * The head field in frontmatter used to be used for @vueuse/head
+   *
+   * When an empty string is passed, it will use the root properties of the frontmatter
+   *
+   * @default ''
+   */
+  headField?: string
+
+  /**
+   * Parse for frontmatter
+   *
+   * @default true
+   */
+  frontmatter?: boolean
+
+  /**
+   * Parse for excerpt
+   *
+   * If `true`, it will be passed to `frontmatterPreprocess` as `frontmatter.excerpt`, replacing the `excerpt` key in frontmatter, if there's any
+   *
+   * @default false
+   */
+  excerpt?: boolean
+
+  /**
+   * Remove custom SFC block
+   *
+   * @default ['route', 'i18n']
+   */
+  customSfcBlocks?: string[]
+
+  /**
+   * Options passed to [@mdit-vue/plugin-component](https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-component)
+   */
+  componentOptions?: ComponentPluginOptions
+
+  /**
+   * Options passed to [@mdit-vue/plugin-frontmatter](https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-frontmatter)
+   */
+  frontmatterOptions?: FrontmatterPluginOptions
+
+  /**
+   * Custom function to provide defaults to the frontmatter and
+   * move certain attributes into the "meta" category.
+   *
+   * Note: _overriding this will remove built-in functionality setting
+   * "meta" properties and the built-in "head" support. Do this only
+   * if you know what you're doing._
+   */
+  frontmatterPreprocess?: (
+    frontmatter: Frontmatter,
+    options: ResolvedOptions
+  ) => {
+    head: Record<string, any>
+    frontmatter: Frontmatter
+  }
+
+  /**
+   * Expose frontmatter via expose API
+   *
+   * @default true
+   */
+  exposeFrontmatter?: boolean
+
+  /**
+   * Expose excerpt via expose API
+   *
+   * @default false
+   */
+  exposeExcerpt?: boolean
+
+  /**
+   * Add `v-pre` to `<code>` tag to escape curly brackets interpolation
+   *
+   * @see https://github.com/antfu/vite-plugin-vue-markdown/issues/14
+   * @default true
+   */
+  escapeCodeTagInterpolation?: boolean
+
+  /**
+   * Options passed to Markdown It
+   */
+  markdownItOptions?: MarkdownIt.Options
+
+  /**
+   * Plugins for Markdown It
+   */
+  markdownItUses?: (
+    | MarkdownIt.PluginSimple
+    | [MarkdownIt.PluginSimple | MarkdownIt.PluginWithOptions<any>, any]
+    | any
+  )[]
+
+  /**
+   * A function providing the Markdown It instance gets the ability to apply custom
+   * settings/plugins
+   */
+  markdownItSetup?: (MarkdownIt: MarkdownIt) => void
+
+  /**
+   * Class names for wrapper div
+   *
+   * @default 'markdown-body'
+   */
+  wrapperClasses?: string | string[]
+
+  /**
+   * Component name to wrapper with
+   *
+   * @default undefined
+   */
+  wrapperComponent?: string | undefined | null
+
+  /**
+   * Custom transformations apply before and after the markdown transformation
+   */
+  transforms?: {
+    before?: (code: string, id: string) => string
+    after?: (code: string, id: string) => string
+  }
+
+  include?: FilterPattern
+  exclude?: FilterPattern
+}
+
+export interface ResolvedOptions extends Required<Options> {
+  wrapperClasses: string
+}
+
+export interface MarkdownEnv extends MarkdownItEnv {
+  id: string
+}
+
+/**
+ * ### Markdown Options
+ *
+ * The Markdown options.
+ *
+ * @see https://github.com/mdit-vue/vite-plugin-vue-markdown/blob/main/src/types.ts
+ */
+export type MarkdownOptions = Options

package/core/types/src/pages.ts

@@ -0,0 +1,8 @@
+import type { UserOptions } from 'vite-plugin-pages'
+
+/**
+ * ### Pages Options
+ *
+ * The pages options.
+ */
+export type PagesOptions = UserOptions

package/core/types/src/pwa.ts

@@ -0,0 +1,8 @@
+import type { Options } from 'vite-plugin-pwa'
+
+/**
+ * ### PWA Options
+ *
+ * The PWA options.
+ */
+export type PwaOptions = Options

package/core/types/src/ssg.ts

@@ -0,0 +1,3 @@
+import { type ViteSSGContext } from 'vite-ssg'
+
+export type UserModule = (ctx: ViteSSGContext) => void

package/core/types/src/ui.ts

@@ -0,0 +1,141 @@
+import type { UserShortcuts } from 'unocss'
+
+/**
+ * ### UI Engine Options
+ *
+ * This type defines all of your UI Engine options. Because Stacks is full-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
+   * ```ts
+   * 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
+
+  /**
+   * ### 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: Record<string, () => Promise<any>>
+}
+
+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/core/ui/README.md

@@ -0,0 +1,60 @@
+# Stacks UI
+
+This package contains the Stacks UI engine.
+
+## ☘️ Features
+
+wip
+
+- ⚡️ Vue
+- ⚡️ UnoCSS
+
+wip
+
+## 🤖 Usage
+
+wip
+
+```bash
+pnpm i -D @stacksjs/security
+```
+
+Now, you can use it in your project:
+
+```js
+import * as ui from '@stacksjs/ui'
+
+// wip
+```
+
+Learn more in the docs.
+
+## 🧪 Testing
+
+```bash
+pnpm test
+```
+
+## 📈 Changelog
+
+Please see our [releases](https://github.com/stacksjs/stacksjs/releases) page for more information on what has changed recently.
+
+## 💪🏼 Contributing
+
+Please see [CONTRIBUTING](../../.github/CONTRIBUTING.md) for details.
+
+## 🏝 Community
+
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
+
+[Discussions on GitHub](https://github.com/stacksjs/stacks/discussions)
+
+For casual chit-chat with others using this package:
+
+[Join the Open Web Discord Server](https://discord.ow3.org)
+
+## 📄 License
+
+The MIT License (MIT). Please see [LICENSE](https://github.com/stacksjs/stacks/tree/main/LICENSE.md) for more information.
+
+Made with ❤️

package/core/ui/node_modules/.bin/mkdist

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/chrisbreuer/Code/stacks/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/Users/chrisbreuer/Code/stacks/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/mkdist@0.3.13_typescript@4.8.4/node_modules/mkdist/dist/cli.cjs" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/mkdist@0.3.13_typescript@4.8.4/node_modules/mkdist/dist/cli.cjs" "$@"
+fi

package/core/ui/node_modules/.bin/tsc

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/chrisbreuer/Code/stacks/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/Users/chrisbreuer/Code/stacks/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/typescript@4.8.4/node_modules/typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@4.8.4/node_modules/typescript/bin/tsc" "$@"
+fi

package/core/ui/node_modules/.bin/tsserver

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/chrisbreuer/Code/stacks/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/Users/chrisbreuer/Code/stacks/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/typescript@4.8.4/node_modules/typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@4.8.4/node_modules/typescript/bin/tsserver" "$@"
+fi

package/core/ui/node_modules/.bin/vite

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/chrisbreuer/Code/stacks/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/Users/chrisbreuer/Code/stacks/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vite@3.1.8/node_modules/vite/bin/vite.js" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/vite@3.1.8/node_modules/vite/bin/vite.js" "$@"
+fi

package/core/ui/node_modules/.bin/vue-tsc

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/chrisbreuer/Code/stacks/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/Users/chrisbreuer/Code/stacks/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vue-tsc@1.0.8_typescript@4.8.4/node_modules/vue-tsc/bin/vue-tsc.js" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/vue-tsc@1.0.8_typescript@4.8.4/node_modules/vue-tsc/bin/vue-tsc.js" "$@"
+fi

package/core/ui/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@stacksjs/ui",
+  "type": "module",
+  "version": "0.37.3",
+  "packageManager": "pnpm@7.13.6",
+  "description": "The Stacks atomic UI engine, powered by UnoCSS.",
+  "author": "Chris Breuer",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/chrisbbreuer",
+  "homepage": "https://github.com/stacksjs/stacks/tree/main/.stacks/core/ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stacksjs/stacks.git",
+    "directory": "./.stacks/core/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/stacksjs/stacks/issues"
+  },
+  "keywords": [
+    "css",
+    "atomic",
+    "ui",
+    "engine",
+    "styles",
+    "stacks",
+    "unocss"
+  ],
+  "sideEffects": false,
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "contributors": [
+    "Chris Breuer <chris@ow3.org>"
+  ],
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=v18.10.0",
+    "pnpm": ">=7.13.6"
+  },
+  "scripts": {
+    "build": "mkdist -d",
+    "dev": "mkdist -d",
+    "prepublishOnly": "pnpm run build",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@iconify-json/heroicons-outline": "^1.1.4",
+    "@iconify-json/heroicons-solid": "^1.1.5",
+    "@julr/unocss-preset-forms": "^0.0.2",
+    "@unocss/transformer-compile-class": "^0.45.30",
+    "@vitejs/plugin-vue": "^3.1.2",
+    "unocss": "^0.45.30",
+    "vue": "^3.2.41",
+    "vue-tsc": "^1.0.8"
+  },
+  "devDependencies": {
+    "mkdist": "^0.3.13",
+    "typescript": "^4.8.4"
+  }
+}

package/core/ui/src/index.ts

@@ -0,0 +1,60 @@
+import type { UserConfig } from 'unocss'
+import { defineConfig, presetIcons, presetTypography, presetWind, transformerDirectives, transformerVariantGroup } from 'unocss'
+import { presetForms } from '@julr/unocss-preset-forms'
+import transformerCompileClass from '@unocss/transformer-compile-class'
+// import { ui } from '../../../config'
+import type { UiOptions as Options } from '@stacksjs/types'
+
+const uis: Options = {
+  shortcuts: [
+    ['btn', 'inline-flex items-center px-4 py-2 ml-2 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer'],
+  ],
+  safelist: 'prose prose-sm m-auto text-left',
+  trigger: ':stx:',
+  classPrefix: 'stx-',
+  reset: 'tailwind',
+  icons: {
+    'heroicon-outline': () => import('@iconify-json/heroicons-outline/icons.json').then(i => i.default as any),
+    'heroicon-solid': () => import('@iconify-json/heroicons-solid/icons.json').then(i => i.default as any),
+  },
+}
+
+const config: UserConfig = defineConfig({
+  shortcuts: uis.shortcuts,
+
+  presets: [
+    presetWind(), // allows for Tailwind utility classes
+    presetForms(), // allows for form Tailwind's form styling
+    presetTypography(),
+    presetIcons({
+      prefix: 'i-',
+      warn: true,
+      collections: uis.icons,
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+      },
+    }),
+    // presetWebFonts({
+    //   provider: 'bunny', // privacy-friendly Google Web Fonts proxy
+    //   fonts: {
+    //     // these will extend the default theme
+    //     sans: 'Inter',
+    //     mono: 'Inter',
+    //   },
+    // }),
+  ],
+
+  transformers: [
+    transformerCompileClass({
+      classPrefix: uis.classPrefix,
+      trigger: uis.trigger,
+    }),
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+
+  safelist: uis.safelist.split(' '),
+})
+
+export default config

package/custom-elements.json

@@ -0,0 +1,14 @@
+{
+  "version": 1.1,
+  "tags": [{
+    "name": ["HelloWorld", "AppHelloWorld"],
+    "description": "The Hello World custom element, built via this framework.",
+    "attributes": [{
+      "name": "greeting",
+      "description": "The greeting."
+    }]
+  }, {
+    "name": "Demo",
+    "description": "A Demo components."
+  }]
+}

package/examples/vue-components/App.vue

@@ -0,0 +1,12 @@
+<!--
+  This is how you would implement your generated
+  library into your own frontend. You may import
+  any of the components developed.
+-->
+<script setup lang="ts">
+import { Demo } from './dist/index.mjs'
+</script>
+
+<template>
+  <Demo />
+</template>

package/examples/vue-components/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stacks Vue Example</title>
+    <link rel="stylesheet" href="./dist/style.css">
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script type="module">
+      import { createApp } from 'vue'
+      import App from './App.vue'
+
+      createApp(App).mount('#app')
+    </script>
+  </body>
+</html>