@sakura-ui/sakura-ui 0.1.20 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.1.20",
+  "version": "0.2.0",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
@@ -12,11 +12,14 @@
   "files": [
     "packages"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
-    "build": "pnpm --parallel --filter \"./**\" build"
+    "build": "pnpm --parallel --filter=./packages/* build"
   },
   "dependencies": {
-    "@sakura-ui/config": "workspace:*",
+    "@sakura-ui/tailwind-theme-plugin": "workspace:*",
     "@sakura-ui/core": "workspace:*",
     "@sakura-ui/forms": "workspace:*"
   },
@@ -26,18 +29,15 @@
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@types/node": "^18.16.19",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "eslint": "^8.47.0",
-    "eslint-config-prettier": "^9.0.0",
-    "npm-run-all2": "^6.1.2",
-    "rimraf": "^5.0.5",
-    "ts-node": "^10.9.1",
-    "tsc-alias": "^1.8.7",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.2",
-    "vitest": "^1.3.1"
+    "@biomejs/biome": "^1.8.0",
+    "@types/node": "^20.14.1",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "npm-run-all2": "^6.2.0",
+    "rimraf": "^5.0.7",
+    "ts-node": "^10.9.2",
+    "tsc-alias": "^1.8.10",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12",
+    "vitest": "^1.6.0"
   }
 }

package/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.1.36",
+  "version": "0.2.0",
   "description": "",
   "keywords": [],
   "author": "glassonion1",
@@ -25,9 +25,12 @@
   "files": [
     "dist"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "lint": "run-s lint:*",
-    "lint:eslint": "eslint . --ext .ts,.tsx --fix",
+    "lint:lint": "biome lint ./",
     "lint:prettier": "prettier --write --ignore-path .gitignore './src/*.ts'",
     "prebuild": "rimraf dist",
     "build": "run-p build:*",
@@ -41,17 +44,15 @@
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
-    "@types/react": "^18.2.60",
-    "@types/react-dom": "^18.2.19",
-    "autoprefixer": "^10.4.17",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.33.2",
-    "jsdom": "^24.0.0",
-    "postcss": "^8.4.35",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwindcss": "^3.4.1"
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
+    "happy-dom": "^14.12.0",
+    "postcss": "^8.4.38",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.3"
   }
 }

package/packages/core/src/components/Button.tsx

@@ -1,11 +1,17 @@
 import { cx } from '../libs/cx'
-import { ComponentWithAs } from '../types/component'
+import type { ComponentWithAs } from '../types/component'
 import { forwardRef } from '../libs/forward-ref'
-import { base, getVariantStyle, getSizeStyle } from './buttonStyle'
+import {
+  type ButtonVariant,
+  type ButtonSize,
+  base,
+  getVariantStyle,
+  getSizeStyle
+} from './buttonStyle'
 
 export interface ButtonProps {
-  variant?: 'primary' | 'secondary'
-  size?: 'lg' | 'md' | 'sm' | 'xs'
+  variant?: ButtonVariant
+  size?: ButtonSize
 }
 
 export const Button: ComponentWithAs<'button', ButtonProps> = forwardRef(

package/packages/core/src/components/Card.tsx

@@ -7,7 +7,7 @@ interface IdContextType {
 
 const IdContext = React.createContext<IdContextType>({ id: '' })
 
-export interface CardProps extends React.ComponentPropsWithoutRef<'section'> {}
+export interface CardProps extends React.ComponentPropsWithoutRef<'article'> {}
 
 export const Card = (props: CardProps) => {
   const { className, children, ...restProps } = props
@@ -29,13 +29,14 @@ export const Card = (props: CardProps) => {
 
   return (
     <IdContext.Provider value={ctx}>
-      <section
+      <article
         aria-labelledby={ctx.id}
+        aria-describedby={`${ctx.id}-desc`}
         className={cx(style, className)}
         {...restProps}
       >
         {children}
-      </section>
+      </article>
     </IdContext.Provider>
   )
 }
@@ -43,15 +44,15 @@ export const Card = (props: CardProps) => {
 export interface CardImgProps extends React.ComponentPropsWithoutRef<'img'> {}
 
 export const CardImg = (props: CardImgProps) => {
-  const { className, children, ...restProps } = props
-
-  const ctx = React.useContext(IdContext)
+  const { className, ...restProps } = props
 
   const style = `
     object-cover
+    mb-2
   `
 
-  return <img id={ctx.id} className={cx(style, className)} {...restProps} />
+  // biome-ignore lint/a11y/useAltText: things to check on the user side
+  return <img className={cx(style, className)} {...restProps} />
 }
 
 export interface CardHeaderProps
@@ -82,6 +83,8 @@ export interface CardBodyProps extends React.ComponentPropsWithoutRef<'div'> {}
 export const CardBody = (props: CardBodyProps) => {
   const { className, children, ...restProps } = props
 
+  const ctx = React.useContext(IdContext)
+
   const style = `
     text-base-sm
     first:pt-4
@@ -90,7 +93,7 @@ export const CardBody = (props: CardBodyProps) => {
   `
 
   return (
-    <div className={cx(style, className)} {...restProps}>
+    <div id={`${ctx.id}-desc`} className={cx(style, className)} {...restProps}>
       {children}
     </div>
   )

package/packages/core/src/components/IconButton.tsx

@@ -1,5 +1,5 @@
 import { cx } from '../libs/cx'
-import { ComponentWithAs } from '../types/component'
+import type { ComponentWithAs } from '../types/component'
 import { forwardRef } from '../libs/forward-ref'
 import { base, getVariantStyle, getSizeStyle } from './buttonStyle'
 
@@ -25,7 +25,7 @@ export const IconButton: ComponentWithAs<'button', IconButtonProps> =
       ...restProps
     } = props
 
-    const styleFontSize = `${size === 'xs' ? `scale-105` : `scale-125`}`
+    const styleFontSize = `${size === 'xs' ? 'scale-105' : 'scale-125'}`
 
     const styleIcon = `
       inline-block
@@ -37,10 +37,10 @@ export const IconButton: ComponentWithAs<'button', IconButtonProps> =
       antialiased
     `
 
-    const styleRounded = `${rounded ? `aspect-square !rounded-full !py-0` : ''}`
+    const styleRounded = `${rounded ? 'aspect-square !rounded-full !py-0' : ''}`
 
     // When text is specified on a button, set the 'aria-hidden' attribute of the icon to true.
-    const ariaHidden = children ? true : false
+    const ariaHidden = !!children
 
     return (
       <Component
@@ -54,7 +54,7 @@ export const IconButton: ComponentWithAs<'button', IconButtonProps> =
         {...restProps}
         ref={ref}
       >
-        {iconLayout == 'left' && (
+        {iconLayout === 'left' && (
           <span
             className={cx(styleIcon, styleFontSize)}
             aria-hidden={ariaHidden}
@@ -63,7 +63,7 @@ export const IconButton: ComponentWithAs<'button', IconButtonProps> =
           </span>
         )}
         {children && <span className="mx-1">{children}</span>}
-        {iconLayout == 'right' && (
+        {iconLayout === 'right' && (
           <span
             className={cx(styleIcon, styleFontSize)}
             aria-hidden={ariaHidden}

package/packages/core/src/components/Link.tsx

@@ -1,7 +1,8 @@
 import { cx } from '../libs/cx'
-import { ComponentWithAs } from '../types/component'
+import type { ComponentWithAs } from '../types/component'
 import { forwardRef } from '../libs/forward-ref'
 
+// biome-ignore lint/suspicious/noEmptyInterface:
 export interface LinkProps {}
 
 export const Link: ComponentWithAs<'a', LinkProps> = forwardRef(

package/packages/core/src/components/Table.tsx

@@ -32,7 +32,7 @@ export interface CaptionProps
 export const Caption = (props: CaptionProps) => {
   const { className, children, ...restProps } = props
 
-  const style = `text-left`
+  const style = 'text-left'
   return (
     <caption className={cx(style, className)} {...restProps}>
       {children}
@@ -72,7 +72,7 @@ export const Th = (props: ThProps) => {
   const style = `
     p-2
     bg-[#f8f8fb]
-    text-base
+    text-label
     text-left
   `
   return (
@@ -87,7 +87,7 @@ export interface TrProps extends React.ComponentPropsWithoutRef<'tr'> {}
 export const Tr = (props: TrProps) => {
   const { className, children, ...restProps } = props
 
-  const style = ``
+  const style = ''
 
   return (
     <tr className={cx(style, styleBorder, className)} {...restProps}>
@@ -103,6 +103,7 @@ export const Td = (props: TdProps) => {
 
   const style = `
     p-2
+    text-label
   `
 
   return (

package/packages/core/src/components/buttonStyle.ts

@@ -1,3 +1,6 @@
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
+export type ButtonSize = 'lg' | 'md' | 'sm' | 'xs'
+
 export const base = `
   inline-block
   text-button
@@ -20,12 +23,12 @@ export const base = `
 `
 
 const primary = `
-  text-white-1000
+  text-white
   bg-sea-800
   active:bg-sea-1200
   hover:bg-sea-900
   disabled:bg-sumi-500
-  disabled:text-white-1000
+  disabled:text-white
 `
 
 const secondary = `
@@ -39,46 +42,63 @@ const secondary = `
   disabled:bg-transparent
 `
 
-const styles: { [key: string]: string } = {
-  primary: primary,
-  secondary: secondary
-}
+const tertiary = `
+  bg-transparent
+  text-blue-900
+  underline
+  hover:bg-blue-200
+  hover:text-blue-1000
+  active:bg-blue-300
+  active:text-blue-1200
+  disabled:bg-transparent
+  disabled:text-solid-grey-420
+`
 
-export const getVariantStyle = (variant: 'primary' | 'secondary') => {
-  return styles[variant]
+const styles: { [key in ButtonVariant]: string } = {
+  primary: primary,
+  secondary: secondary,
+  tertiary: tertiary
 }
 
-const params: {
-  [key: string]: string
-} = {
+const params: { [key in ButtonSize]: string } = {
+  // 16(p-4) * 2 + 22(text-button * leading-snug) + boader * 2 = 56px
   lg: `
     p-4
     text-button
     rounded-lg
+    leading-snug
   `,
+  // 12(py-3) * 2 + 22(text-button * leading-snug) + boader * 2 = 48px
   md: `
     px-4
     py-3
     text-button
     rounded-lg
+    leading-snug
   `,
+  // 6(py-1.5) * 2 + 22(text-button * leading-snug) + boader * 2 = 36px
   sm: `
     px-3
     py-1.5
     my-1
     text-button
     rounded-md
+    leading-snug
   `,
+  // 6(py-1.5) * 2 + 14(text-button-sm) + boader * 2 = 28p
   xs: `
     px-2
-    py-[7px]
+    py-1.5
     my-2
     text-button-sm
-    !leading-[14px]
     rounded
   `
 }
 
-export const getSizeStyle = (size: 'lg' | 'md' | 'sm' | 'xs') => {
+export const getVariantStyle = (variant: ButtonVariant) => {
+  return styles[variant]
+}
+
+export const getSizeStyle = (size: ButtonSize) => {
   return params[size]
 }

package/packages/core/src/components/index.ts

@@ -27,6 +27,3 @@ export type {
   TrProps,
   TdProps
 } from './Table'
-
-/** @deprecated use Card instead */
-export { InfoCard } from './InfoCard'

package/packages/core/src/index.ts

@@ -17,7 +17,6 @@ export {
   H6,
   Icon,
   IconButton,
-  InfoCard,
   Link,
   Ol,
   Ul,

package/packages/core/src/libs/cx.ts

@@ -1 +1,2 @@
+// biome-ignore lint/suspicious/noExplicitAny:
 export const cx = (...classNames: any[]) => classNames.filter(Boolean).join(' ')

package/packages/core/src/libs/forward-ref.ts

@@ -22,12 +22,15 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
 
-import { ComponentProps, forwardRef as forwardReactRef } from 'react'
-import { As, ComponentWithAs, RightJoinProps } from '../types/component'
+import React, {
+  type ComponentProps,
+  forwardRef as forwardReactRef
+} from 'react'
+import type { As, ComponentWithAs, RightJoinProps } from '../types/component'
 
-export function forwardRef<Props extends object, Component extends As>(
+export function forwardRef<Component extends As, Props extends object>(
   component: React.ForwardRefRenderFunction<
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // biome-ignore lint/suspicious/noExplicitAny:
     any,
     RightJoinProps<ComponentProps<Component>, Props> & {
       as?: As

package/packages/core/src/types/component.ts

@@ -22,14 +22,14 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
 
-import { ComponentProps } from 'react'
+import React, { type ComponentProps } from 'react'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// biome-ignore lint/suspicious/noExplicitAny:
 export type As<Props = any> = React.ElementType<Props>
 
 export type OmitCommonProps<
   Target,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny:
   OmitAdditionalProps extends keyof any = never
 > = Omit<Target, 'as' | OmitAdditionalProps>
 
@@ -70,13 +70,14 @@ export type ComponentWithAs<
       Props,
       AsComponent
     >
+    // biome-ignore lint/correctness/noUndeclaredVariables:
   ): JSX.Element
   displayName?: string
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny:
   propTypes?: React.WeakValidationMap<any>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny:
   contextTypes?: React.ValidationMap<any>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny:
   defaultProps?: Partial<any>
   id?: string
 }

package/packages/core/tests/Button.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { describe, test, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { Button } from '../src'
+
+describe('should labeled text from Button', () => {
+  test('text', async () => {
+    render(<Button>Button</Button>)
+
+    const text = screen.getByText(/Button/)
+    expect(text).toBeInTheDocument()
+  })
+  test('as button', async () => {
+    render(<Button>Button</Button>)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+  })
+  test('as link', async () => {
+    render(
+      <Button as="a" href="https://example.com">
+        Button
+      </Button>
+    )
+
+    const button = screen.getByRole('link')
+    expect(button).toBeInTheDocument()
+  })
+})

package/packages/core/tests/Card.test.tsx

@@ -1,19 +1,42 @@
-import * as React from 'react'
+import React from 'react'
+import { describe, test, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
 
-import { Card, CardHeader } from '../src'
+import { Card, CardBody, CardHeader } from '../src'
 
 describe('should labeled text from Card', () => {
-  test('renders Card', async () => {
+  test('text', async () => {
     render(
       <Card>
-        <CardHeader>Card-Label</CardHeader>
+        <CardHeader>Card-Header</CardHeader>
+        <CardBody>Card-Body</CardBody>
       </Card>
     )
 
-    const text = screen.getByLabelText(/Card-Label/)
+    const text1 = screen.getByText(/Card-Header/)
+    expect(text1).toBeInTheDocument()
 
-    expect(text).toBeInTheDocument()
+    const text2 = screen.getByText(/Card-Body/)
+    expect(text2).toBeInTheDocument()
+  })
+  test('role and id', async () => {
+    render(
+      <Card>
+        <CardHeader>Card-Header</CardHeader>
+        <CardBody>Card-Body</CardBody>
+      </Card>
+    )
+
+    const card = screen.getByRole('article')
+    expect(card).toBeInTheDocument()
+    expect(card).toHaveProperty('id')
+
+    const header = screen.getByLabelText('Card-Header')
+    expect(header).toBeInTheDocument()
+    expect(header).toHaveProperty('id')
+
+    const body = screen.getByRole('article', { description: 'Card-Body' })
+    expect(body).toBeInTheDocument()
+    expect(body).toHaveProperty('id')
   })
 })

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

package/packages/core/vite.config.ts

@@ -1,5 +1,5 @@
 /// <reference types="vitest" />
-import { resolve } from 'path'
+import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import { peerDependencies } from './package.json'
@@ -24,6 +24,7 @@ export default defineConfig({
   },
   test: {
     globals: true,
-    environment: 'jsdom'
+    environment: 'happy-dom',
+    setupFiles: 'tests/vitest.setup.ts'
   }
 })