update

package.json

@@ -21,7 +21,8 @@
   "dependencies": {
     "@sakura-ui/tailwind-theme-plugin": "workspace:*",
     "@sakura-ui/core": "workspace:*",
-    "@sakura-ui/forms": "workspace:*"
+    "@sakura-ui/forms": "workspace:*",
+    "@sakura-ui/helper": "workspace:*"
   },
   "peerDependencies": {
     "react": "^18.2.0",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "",
   "keywords": [],
   "author": "glassonion1",

packages/core/src/components/Button.tsx

@@ -1,6 +1,4 @@
-import { cx } from '../libs/cx'
-import type { ComponentWithAs } from '../types/component'
-import { forwardRef } from '../libs/forward-ref'
+import { type ComponentWithAs, cx, forwardRef } from '@sakura-ui/helper'
 import {
   type ButtonVariant,
   type ButtonSize,

packages/core/src/components/Card.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
 interface IdContextType {
   id: string

packages/core/src/components/Code.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
 export interface CodeProps extends React.ComponentPropsWithoutRef<'code'> {}
 

packages/core/src/components/Faq.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
 export interface FaqProps extends React.ComponentPropsWithoutRef<'dl'> {}
 

packages/core/src/components/Heading.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
 export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {}
 

packages/core/src/components/Icon.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
 export interface IconProps extends React.ComponentPropsWithRef<'span'> {
   icon: string

packages/core/src/components/IconButton.tsx

@@ -1,6 +1,4 @@
-import { cx } from '../libs/cx'
-import type { ComponentWithAs } from '../types/component'
-import { forwardRef } from '../libs/forward-ref'
+import { type ComponentWithAs, cx, forwardRef } from '@sakura-ui/helper'
 import { base, getVariantStyle, getSizeStyle } from './buttonStyle'
 
 export interface IconButtonProps {

packages/core/src/components/Link.tsx

@@ -1,6 +1,4 @@
-import { cx } from '../libs/cx'
-import type { ComponentWithAs } from '../types/component'
-import { forwardRef } from '../libs/forward-ref'
+import { type ComponentWithAs, cx, forwardRef } from '@sakura-ui/helper'
 
 // biome-ignore lint/suspicious/noEmptyInterface:
 export interface LinkProps {}

packages/core/src/components/LinkCard.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { cx } from '@sakura-ui/helper'
+import { Card, CardHeader } from './Card'
+import { Icon } from './Icon'
+
+interface LinkContextType {
+  href: string
+}
+
+const LinkContext = React.createContext<LinkContextType>({ href: '' })
+
+export interface LinkCardProps extends React.ComponentProps<'article'> {
+  href: string
+}
+
+export const LinkCard = ({
+  href,
+  className,
+  children,
+  ...rest
+}: LinkCardProps) => {
+  const styleLink = `
+    grid
+    outline-offset-4
+    rounded-2xl
+    sm:rounded-3xl
+    focus:outline-2
+    focus:outline-wood-600
+    w-full h-full
+  `
+
+  const styleHover = `
+    hover:text-sea-1000
+    hover:border-sea-1000
+  `
+
+  const isExternal = href?.startsWith('https://')
+
+  return (
+    <LinkContext.Provider value={{ href: href }}>
+      <a
+        className={cx(styleLink)}
+        href={href}
+        target={isExternal ? '_blank' : ''}
+      >
+        <Card className={cx(styleHover, className)} {...rest}>
+          {children}
+        </Card>
+      </a>
+    </LinkContext.Provider>
+  )
+}
+
+export interface LinkCardHeaderProps extends React.ComponentProps<'div'> {}
+
+export const LinkCardHeader = ({
+  className,
+  children
+}: LinkCardHeaderProps) => {
+  const { href } = React.useContext(LinkContext)
+
+  const styleHeading = `
+    flex
+    justify-between
+    items-center
+  `
+
+  const isExternal = href.startsWith('https://')
+
+  return (
+    <CardHeader className={cx(className, styleHeading)}>
+      {href === '' ? (
+        children
+      ) : (
+        <>
+          <span>
+            {children}
+            {isExternal ? (
+              <Icon className="text-base ml-1 font-light" icon="open_in_new" />
+            ) : (
+              ''
+            )}
+          </span>
+          {isExternal ? (
+            ''
+          ) : (
+            <Icon className="text-base-sm !font-medium" icon="arrow_forward" />
+          )}
+        </>
+      )}
+    </CardHeader>
+  )
+}

packages/core/src/components/List.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
 export interface UlProps extends React.ComponentPropsWithoutRef<'ul'> {}
 

packages/core/src/components/Pre.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
 export interface PreProps extends React.ComponentPropsWithoutRef<'pre'> {}
 

packages/core/src/components/Table.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
 export interface TableProps extends React.ComponentPropsWithoutRef<'table'> {}
 

packages/core/src/components/container.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
 export interface OverflowContainerProps
   extends React.ComponentPropsWithoutRef<'div'> {}

packages/core/src/components/index.ts

@@ -7,6 +7,8 @@ export type {
   CardBodyProps,
   CardFooterProps
 } from './Card'
+export { LinkCard, LinkCardHeader } from './LinkCard'
+export type { LinkCardProps, LinkCardHeaderProps } from './LinkCard'
 export { Code, type CodeProps } from './Code'
 export { Faq, Question, Answer } from './Faq'
 export type { FaqProps, QuestionProps, AnswerProps } from './Faq'

packages/core/src/index.ts

@@ -5,6 +5,8 @@ export {
   CardHeader,
   CardBody,
   CardFooter,
+  LinkCard,
+  LinkCardHeader,
   Code,
   Faq,
   Question,
@@ -38,6 +40,8 @@ export type {
   CardHeaderProps,
   CardBodyProps,
   CardFooterProps,
+  LinkCardProps,
+  LinkCardHeaderProps,
   CodeProps,
   FaqProps,
   QuestionProps,

packages/helper/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@sakura-ui/helper",
+  "version": "0.0.2",
+  "license": "MIT",
+  "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:lint": "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"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "happy-dom": "^14.12.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

packages/core/src/libs/forward-ref.ts → packages/helper/src/forward-ref.ts

@@ -26,7 +26,7 @@ import React, {
   type ComponentProps,
   forwardRef as forwardReactRef
 } from 'react'
-import type { As, ComponentWithAs, RightJoinProps } from '../types/component'
+import type { As, ComponentWithAs, RightJoinProps } from './types/component'
 
 export function forwardRef<Component extends As, Props extends object>(
   component: React.ForwardRefRenderFunction<

packages/helper/src/index.ts

@@ -0,0 +1,4 @@
+export { cx } from './cx'
+export { forwardRef } from './forward-ref'
+export type { ComponentWithAs } from './types/component'
+export { treefy } from './treefy'

packages/helper/src/treefy.ts

@@ -0,0 +1,22 @@
+type TreeNode<I> = Omit<I, 'children'> & { children?: TreeNode<I>[] }
+type Input<I> = (I & { children: unknown })[]
+
+export const treefy = <I extends { depth: number }>(input: I[]) => {
+  const tree: TreeNode<I>[] = []
+  const last: TreeNode<I>[] = []
+  let top = -1
+  let bottom = -1
+  for (const { children: _, ...item } of input as Input<I>) {
+    if (top < item.depth && item.depth <= bottom + 1) {
+      const idx = item.depth - top
+      bottom = item.depth
+      ;(last[idx - 1].children ??= []).push(item)
+      last[idx] = item
+      continue
+    }
+    tree.push(item)
+    last[0] = item
+    top = bottom = item.depth
+  }
+  return tree
+}

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" }]
+}

packages/helper/tsconfig.node.json

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

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'
+  }
+})