@sakura-ui/sakura-ui 0.2.0 → 0.4.1

package/packages/markdown/src/plugins/attr.ts

@@ -0,0 +1,19 @@
+import type { Root } from 'mdast'
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import { isDirective } from './helper'
+
+// This plugin is an example to turn `::node` into divs, passing arbitrary
+// attributes.
+export const attrPlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isDirective, (node: Directives) => {
+      node.data = node.data ?? {}
+      const hast = h(node.name, node.attributes || {})
+
+      node.data.hName = hast.tagName
+      node.data.hProperties = hast.properties
+    })
+  }
+}

package/packages/markdown/src/plugins/card.ts

@@ -0,0 +1,57 @@
+import type { Root } from 'mdast'
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import { isDirective } from './helper'
+
+// This plugin is to turn `:::card` into divs, passing arbitrary
+// attributes.
+export const cardPlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isDirective, (node: Directives) => {
+      if (node.type !== 'containerDirective') {
+        return
+      }
+      if (node.name !== 'card') {
+        return
+      }
+
+      node.data = node.data ?? {}
+
+      const tagName = 'article'
+
+      node.data.hName = tagName
+
+      node.attributes = node.attributes ?? {}
+      node.attributes['data-node'] = node.name
+
+      if (node.attributes.as === 'link') {
+        node.attributes.as = undefined
+        node.attributes['data-behavior'] = 'link'
+        node.attributes['data-href'] = node.attributes.href || ''
+      }
+
+      node.data.hProperties = h(tagName, node.attributes).properties
+
+      node.children.forEach((child) => {
+        if (!isDirective(child)) {
+          return
+        }
+
+        child.data = child.data ?? {}
+
+        let tagName = 'div'
+        if (child.name === 'card-img') {
+          tagName = 'img'
+        }
+
+        child.data.hName = tagName
+
+        child.attributes = child.attributes ?? {}
+        child.attributes['data-node'] = child.name
+
+        child.data.hProperties = h(tagName, child.attributes).properties
+      })
+    })
+  }
+}

package/packages/markdown/src/plugins/cell.ts

@@ -0,0 +1,47 @@
+import type { Root } from 'mdast'
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import { isContainerDirective, isDirective } from './helper'
+
+// This plugin is to turn `:::cell` into divs, passing arbitrary
+// attributes.
+export const cellPlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isContainerDirective, (node: Directives) => {
+      if (node.name !== 'cell') {
+        return
+      }
+
+      node.data = node.data ?? {}
+      const tagName = 'div'
+
+      node.data.hName = tagName
+
+      node.attributes = node.attributes ?? {}
+      node.attributes['data-node'] = node.name
+
+      node.data.hProperties = h(tagName, node.attributes).properties
+
+      node.children.forEach((child) => {
+        if (!isDirective(child)) {
+          return
+        }
+        if (child.name !== 'cell-img') {
+          return
+        }
+
+        child.data = child.data ?? {}
+
+        const tagName = 'img'
+
+        child.data.hName = tagName
+
+        child.attributes = child.attributes ?? {}
+        child.attributes['data-node'] = child.name
+
+        child.data.hProperties = h(tagName, child.attributes).properties
+      })
+    })
+  }
+}

package/packages/markdown/src/plugins/faq.ts

@@ -0,0 +1,40 @@
+import type { Root } from 'mdast'
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import { isContainerDirective, isDirective } from './helper'
+
+// This plugin is to turn `::linkButton` into divs, passing arbitrary
+// attributes.
+export const faqPlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isContainerDirective, (node: Directives) => {
+      if (node.name !== 'faq') {
+        return
+      }
+
+      node.data = node.data ?? {}
+      const tagName = 'dl'
+
+      node.data.hName = tagName
+
+      node.data.hProperties = h(tagName, node.attributes || {}).properties
+
+      node.children.forEach((child) => {
+        if (!isDirective(child)) {
+          return
+        }
+        if (child.name !== 'faq-q' && child.name !== 'faq-a') {
+          return
+        }
+
+        child.data = child.data ?? {}
+        const tagName = child.name === 'faq-q' ? 'dt' : 'dd'
+
+        child.data.hName = tagName
+
+        child.data.hProperties = h(tagName, child.attributes || {}).properties
+      })
+    })
+  }
+}

package/packages/markdown/src/plugins/grid.ts

@@ -0,0 +1,54 @@
+import type { Root } from 'mdast'
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import { isContainerDirective } from './helper'
+
+// This plugin is to turn `::linkButton` into divs, passing arbitrary
+// attributes.
+export const gridPlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isContainerDirective, (node: Directives) => {
+      if (!node.name.startsWith('grid-cols-')) {
+        return
+      }
+
+      node.attributes = node.attributes ?? {}
+
+      if (node.attributes.as === 'list') {
+        node.attributes.as = undefined
+        node.attributes['data-behavior'] = 'list'
+      }
+
+      const gridNum: number = Number.parseInt(
+        node.name.split('-').pop() || '1',
+        10
+      )
+
+      // Tailwind doesn't generate CSS for string interpolation
+      const gridClass: { [key: number]: string } = {
+        1: 'md:grid-cols-1',
+        2: 'md:grid-cols-2',
+        3: 'md:grid-cols-3',
+        4: 'md:grid-cols-4',
+        5: 'md:grid-cols-5',
+        6: 'md:grid-cols-6',
+        7: 'md:grid-cols-6',
+        8: 'md:grid-cols-6',
+        9: 'md:grid-cols-6',
+        10: 'md:grid-cols-6',
+        11: 'md:grid-cols-6',
+        12: 'md:grid-cols-12'
+      }
+
+      node.data = node.data ?? {}
+      const tagName = 'div'
+
+      node.data.hName = tagName
+
+      node.attributes.class = `flex flex-col md:grid ${gridClass[gridNum]} gap-8`
+
+      node.data.hProperties = h(tagName, node.attributes).properties
+    })
+  }
+}

package/packages/markdown/src/plugins/headings.ts

@@ -0,0 +1,38 @@
+import type { Heading, Root } from 'mdast'
+import Slugger from 'github-slugger'
+import { visit } from 'unist-util-visit'
+import { toString as mdastToString } from 'mdast-util-to-string'
+import { treefy } from '@sakura-ui/helper'
+import { isHeading } from './helper'
+
+export type HeadingItem = {
+  id?: string
+  depth: number
+  value?: string
+  children?: Array<HeadingItem>
+}
+
+export const headingsPlugin = () => {
+  return (tree: Root, vFile: { data: Record<string, unknown> }) => {
+    const headings: Array<HeadingItem> = []
+    const slugger = new Slugger()
+
+    const getFlatHeadingsList = (node: Heading) => {
+      const h: HeadingItem = {
+        id: slugger.slug(mdastToString(node)),
+        depth: node.depth,
+        value: mdastToString(node)
+      }
+
+      headings.push(h)
+    }
+
+    visit(tree, isHeading, getFlatHeadingsList)
+
+    if (!vFile.data.fm) {
+      vFile.data.fm = {}
+    }
+    const fm = vFile.data.fm as { headings?: Array<HeadingItem> }
+    fm.headings = treefy(headings)
+  }
+}

package/packages/markdown/src/plugins/helper.ts

@@ -0,0 +1,27 @@
+import type { Directives } from 'mdast-util-directive'
+import type { Node } from 'unist'
+import type { Heading } from 'mdast'
+
+export const isDirective = (node: Node): node is Directives => {
+  return (
+    node.type === 'containerDirective' ||
+    node.type === 'leafDirective' ||
+    node.type === 'textDirective'
+  )
+}
+
+export const isContainerDirective = (node: Node): node is Directives => {
+  return node.type === 'containerDirective'
+}
+
+export const isLeafDirective = (node: Node): node is Directives => {
+  return node.type === 'leafDirective'
+}
+
+export const isTextDirective = (node: Node): node is Directives => {
+  return node.type === 'textDirective'
+}
+
+export const isHeading = (node: Node): node is Heading => {
+  return node.type === 'heading'
+}

package/packages/markdown/src/plugins/index.ts

@@ -0,0 +1,8 @@
+export { youtubePlugin } from './youtube'
+export { attrPlugin } from './attr'
+export { linkButtonPlugin } from './linkButton'
+export { gridPlugin } from './grid'
+export { cellPlugin } from './cell'
+export { cardPlugin } from './card'
+export { faqPlugin } from './faq'
+export { headingsPlugin, type HeadingItem } from './headings'

package/packages/markdown/src/plugins/linkButton.ts

@@ -0,0 +1,26 @@
+import type { Root } from 'mdast'
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import { isTextDirective } from './helper'
+
+// This plugin is to turn `::linkButton` into divs, passing arbitrary
+// attributes.
+export const linkButtonPlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isTextDirective, (node: Directives) => {
+      if (node.name !== 'link-button') return
+
+      node.data ??= {}
+      const data = node.data
+      const tagName = 'a'
+
+      data.hName = tagName
+
+      node.attributes = node.attributes ?? {}
+      node.attributes['data-node'] = node.name
+
+      data.hProperties = h(tagName, node.attributes).properties
+    })
+  }
+}

package/packages/markdown/src/plugins/youtube.ts

@@ -0,0 +1,49 @@
+import type { Root } from 'mdast'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import type { Literal } from 'unist'
+import { isDirective } from './helper'
+
+// This plugin is turn `::youtube` into iframes.
+export const youtubePlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isDirective, (node: Directives) => {
+      if (node.type === 'containerDirective' || node.type === 'leafDirective') {
+        if (node.name !== 'youtube') return
+
+        node.data ??= {}
+        const data = node.data
+        const attributes = node.attributes || {}
+        const id = attributes.id
+
+        if (!id) {
+          console.error('Unexpected missing `id` on `youtube` directive')
+        }
+
+        const child = node.children[0] as Literal
+
+        const title = child.value as string
+        const width = attributes.width ?? undefined
+        const height = attributes.height ?? undefined
+        const allow =
+          attributes.allow ||
+          'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+        const referrerpolicy =
+          attributes.referrerpolicy || 'strict-origin-when-cross-origin'
+
+        data.hName = 'iframe'
+        data.hProperties = {
+          title: title,
+          src: `https://www.youtube-nocookie.com/embed/${id}`,
+          width: width,
+          height: height,
+          frameBorder: '0',
+          allow: allow,
+          referrerpolicy: referrerpolicy,
+          allowFullScreen: true,
+          loading: 'lazy'
+        }
+      }
+    })
+  }
+}

package/packages/markdown/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declarationDir": "./dist/types",
+    "outDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/packages/markdown/tsconfig.node.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "resolveJsonModule": true
+  },
+  "include": ["vite.config.ts", "package.json"]
+}

package/packages/markdown/vite.config.ts

@@ -0,0 +1,30 @@
+/// <reference types="vitest" />
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import { peerDependencies } from './package.json'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src', 'index.ts'),
+      formats: ['es', 'cjs'],
+      fileName: (ext: string) => `index.${ext}.js`
+    },
+    rollupOptions: {
+      external: [...Object.keys(peerDependencies)]
+    }
+  },
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: 'tests/vitest.setup.ts'
+  }
+})

package/packages/tailwind-theme-plugin/#package.json#

@@ -0,0 +1,51 @@
+{
+  "name": "@sakura-ui/tailwind-theme-plugin",
+  "version": "0.4.0",
+  "description": "",
+  "keywords": [],
+  "author": "glassonion1",
+  "homepage": "https://github.com/glassonion1/sakura-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
+    "directory": "packages/config"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "run-s lint:*",
+    "lint:eslint": "biome lint ./",
+    "lint:prettier": "prettier --write --ignore-path .gitignore './src/*.ts'",
+    "prebuild": "rimraf dist",
+    "build": "run-p build:*",
+    "build:scripts": "vite build",
+    "build:types": "tsc && tsc-alias",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4.1.17"
+  },
+  "devDependencies": {
+    "@digital-go-jp/design-tokens": "^1.1.0",
+    "@tailwindcss/vite": "catalog:",
+    "autoprefixer": "catalog:",
+    "postcss": "catalog:",
+    "tailwindcss": "catalog:"
+  }
+}

package/packages/tailwind-theme-plugin/.turbo/turbo-build.log

@@ -0,0 +1,12 @@
+$ rimraf dist
+$ run-p build:*
+$ vite build
+$ tsc && tsc-alias
+vite v7.3.6 building client environment for production...
+transforming...
+✓ 5 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.es.js  160.05 kB │ gzip: 10.15 kB
+dist/index.cjs.js  88.17 kB │ gzip: 8.80 kB
+✓ built in 609ms