@sakura-ui/sakura-ui 0.2.0 → 0.4.1

package/packages/helper/tests/treefy.test.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect } from 'vitest'
+import { treefy } from '../src/treefy'
+
+describe('treefy', () => {
+  it('should return an empty array for empty input', () => {
+    expect(treefy([])).toEqual([])
+  })
+
+  it('should keep flat items at the root level when all depths are the same', () => {
+    const input = [
+      { depth: 1, name: 'a' },
+      { depth: 1, name: 'b' },
+      { depth: 1, name: 'c' }
+    ]
+    expect(treefy(input)).toEqual([
+      { depth: 1, name: 'a' },
+      { depth: 1, name: 'b' },
+      { depth: 1, name: 'c' }
+    ])
+  })
+
+  it('should nest children under their parent', () => {
+    const input = [
+      { depth: 1, name: 'parent' },
+      { depth: 2, name: 'child1' },
+      { depth: 2, name: 'child2' }
+    ]
+    expect(treefy(input)).toEqual([
+      {
+        depth: 1,
+        name: 'parent',
+        children: [
+          { depth: 2, name: 'child1' },
+          { depth: 2, name: 'child2' }
+        ]
+      }
+    ])
+  })
+
+  it('should nest deeply (depth 1 -> 2 -> 3)', () => {
+    const input = [
+      { depth: 1, name: 'root' },
+      { depth: 2, name: 'child' },
+      { depth: 3, name: 'grandchild' }
+    ]
+    expect(treefy(input)).toEqual([
+      {
+        depth: 1,
+        name: 'root',
+        children: [
+          {
+            depth: 2,
+            name: 'child',
+            children: [{ depth: 3, name: 'grandchild' }]
+          }
+        ]
+      }
+    ])
+  })
+
+  it('should handle multiple root nodes with children', () => {
+    const input = [
+      { depth: 1, name: 'h1-first' },
+      { depth: 2, name: 'h2-under-first' },
+      { depth: 1, name: 'h1-second' },
+      { depth: 2, name: 'h2-under-second' }
+    ]
+    expect(treefy(input)).toEqual([
+      {
+        depth: 1,
+        name: 'h1-first',
+        children: [{ depth: 2, name: 'h2-under-first' }]
+      },
+      {
+        depth: 1,
+        name: 'h1-second',
+        children: [{ depth: 2, name: 'h2-under-second' }]
+      }
+    ])
+  })
+
+  it('should strip existing children property from input items', () => {
+    const input = [
+      { depth: 1, name: 'parent', children: 'should be removed' },
+      { depth: 2, name: 'child', children: null }
+    ]
+    expect(treefy(input)).toEqual([
+      {
+        depth: 1,
+        name: 'parent',
+        children: [{ depth: 2, name: 'child' }]
+      }
+    ])
+  })
+
+  // PR #21: treefy bug fix - children were not properly attached to parent nodes
+  it('should correctly attach children to parent (regression test for PR #21)', () => {
+    const input = [
+      { depth: 2, name: 'hogehoge1' },
+      { depth: 3, name: 'fugafuga' },
+      { depth: 2, name: 'hogehoge2' }
+    ]
+    const result = treefy(input)
+
+    // hogehoge1 should have fugafuga as a child
+    expect(result[0].children).toEqual([{ depth: 3, name: 'fugafuga' }])
+    // hogehoge2 should be a separate root node, not nested under hogehoge1
+    expect(result).toHaveLength(2)
+    expect(result[1]).toEqual({ depth: 2, name: 'hogehoge2' })
+  })
+})

package/packages/helper/tests/vitest.setup.ts

@@ -0,0 +1,2 @@
+/// <reference types="vitest" />
+import '@testing-library/jest-dom'

package/packages/helper/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/helper/tsconfig.node.json

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

package/packages/helper/vite.config.ts

@@ -0,0 +1,26 @@
+/// <reference types="vitest" />
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// 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`
+    }
+  },
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: 'tests/vitest.setup.ts'
+  }
+})

package/packages/markdown/.turbo/turbo-build.log

@@ -0,0 +1,12 @@
+$ rimraf dist
+$ run-p build:*
+$ vite build
+vite v7.3.6 building client environment for production...
+transforming...
+$ tsc && tsc-alias
+✓ 365 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.es.js  554.27 kB │ gzip: 141.23 kB
+dist/index.cjs.js  377.84 kB │ gzip: 117.18 kB
+✓ built in 4.49s

package/packages/markdown/README.md

@@ -0,0 +1,129 @@
+# Sakura UI markdown extension
+Sakura UI markdown extension is a markdown extension library that utilizes the Directive syntax of markdown.
+
+For details on markdown directives, please refer to the following page.
+- [remark-directive](https://github.com/remarkjs/remark-directive)
+
+## Install
+```
+$ npm install @sakura-ui/markdown
+```
+or
+```
+$ yarn add @sakura-ui/markdown
+```
+or
+```
+$ pnpm add @sakura-ui/markdown
+```
+
+## Usage
+When using libraries such as Gatsby or Next.js, please use them in combination with React Suspense.
+```ts
+import React, { lazy, Suspense } from 'react'
+
+const Markdown = lazy(() =>
+  import('@sakura-ui/markdown').then((module) => ({ default: module.Markdown }))
+)
+
+export const MyPage = () => {
+  const text = `
+    # Page title
+    I really like using Markdown.
+  
+    - First item
+    - Second item
+    - Third item
+  `
+
+  return (
+    <div>
+      <Suspense fallback={<div />}>
+        <Markdown>{text}</Markdown>
+      </Suspense>
+    </div>
+  );
+}
+```
+
+## Syntax
+### LinkButton
+```
+:link-button[Services and applications]{href=/services}
+```
+<img width="288" alt="スクリーンショット 2024-07-26 23 44 39" src="https://github.com/user-attachments/assets/997ccf27-4d83-4fb5-b173-ae94cd7d76cb">
+
+### YouTube
+```
+::youtube[title]{id=yXdbvBzxeb8}
+```
+<img width="494" alt="スクリーンショット 2024-07-26 23 48 18" src="https://github.com/user-attachments/assets/a724cf27-a1af-4633-b9a8-27b25b04e3ae">
+
+### Multi column layout
+```
+::::grid-cols-3
+:::cell
+![alternative text](https://dummyimage.com/600x400/000/fff)
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+:::
+:::cell
+![alternative text](https://dummyimage.com/600x400/000/fff)
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+:::
+:::cell
+![alternative text](https://dummyimage.com/600x400/000/fff)
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+:::
+::::
+```
+<img width="1143" alt="スクリーンショット 2024-07-26 23 51 46" src="https://github.com/user-attachments/assets/60b813b4-3a8c-451d-99b2-58c1e5b3a3b4">
+
+### Multi column layout with card
+```
+::::grid-cols-3
+:::card
+::card-img{alt=alternative_text src=https://dummyimage.com/600x400/000/fff}
+::card-title[Card title]
+::card-description[Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.]
+:::
+:::card
+::card-img{alt=alternative_text src=https://dummyimage.com/600x400/000/fff}
+::card-title[Card title]
+::card-description[Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.]
+:::
+:::card
+::card-img{alt=alternative_text src=https://dummyimage.com/600x400/000/fff}
+::card-title[Card title]
+::card-description[Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.]
+:::
+::::
+```
+<img width="1133" alt="スクリーンショット 2024-07-26 23 55 37" src="https://github.com/user-attachments/assets/9a6dff6f-7115-451a-9d15-f953ddad78b7">
+
+### FAQ
+```
+:::faq
+::faq-q[Why you need an FAQ page]
+::faq-a[Here are the benefits of having an FAQ page.]
+::faq-q[Whom to contact?]
+::faq-a[You can contact the apprenticeship office through our official phone hotline above, or with the web-form below. We generally respond to written requests within 7-10 days.]
+:::
+```
+or
+```
+::::faq
+:::faq-q
+Why you need an FAQ page
+:::
+:::faq-a
+Here are the benefits of having an FAQ page.
+:::
+:::faq-q
+Whom to contact?
+:::
+:::faq-a
+You can contact the apprenticeship office through our official phone hotline above, or with the web-form below. We generally respond to written requests within 7-10 days.
+:::
+::::
+```
+<img width="1133" alt="スクリーンショット 2024-07-26 23 59 50" src="https://github.com/user-attachments/assets/0f6b51fb-068e-4173-8011-f782c1b894f6">