@sakura-ui/sakura-ui 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
@@ -12,17 +12,17 @@
   "files": [
     "packages"
   ],
+  "scripts": {
+    "build": "pnpm --parallel --filter \"./**\" build"
+  },
   "dependencies": {
-    "@sakura-ui/forms": "0.1.2",
-    "@sakura-ui/config": "0.1.2",
-    "@sakura-ui/core": "0.1.5"
+    "@sakura-ui/config": "workspace:*",
+    "@sakura-ui/core": "workspace:*",
+    "@sakura-ui/forms": "workspace:*"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.2.7"
-  },
-  "scripts": {
-    "build": "pnpm --parallel --filter \"./**\" build"
   }
-}
+}

package/packages/config/package.json

@@ -19,7 +19,7 @@
   "scripts": {
     "build": "run-p build:*",
     "build:scripts": "vite build",
-    "build:types": "tsc --emitDeclarationOnly",
+    "build:types": "tsc",
     "test": "jest"
   },
   "keywords": [],

package/packages/config/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ESNext",
     "module": "ESNext",
     "lib": ["ESNext", "DOM"],
-    "moduleResolution": "Bundler",
+    "moduleResolution": "node",
     "useDefineForClassFields": true,
     "strict": true,
     "resolveJsonModule": true,

package/packages/config/vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
     lib: {
       entry: resolve(__dirname, 'src', 'index.ts'),
       formats: ['es', 'cjs'],
-      fileName: (ext) => `index.${ext}.js`
+      fileName: (ext: string) => `index.${ext}.js`
     },
     rollupOptions: {
       external: [...Object.keys(peerDependencies)]

package/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "type": "module",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
     "dev": "vite",
     "build": "run-p build:*",
     "build:scripts": "vite build",
-    "build:types": "tsc --emitDeclarationOnly && tsc-alias",
+    "build:types": "tsc && tsc-alias",
     "test": "jest"
   },
   "keywords": [],

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

@@ -1,19 +1,21 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
-export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+export interface ButtonProps extends React.ComponentPropsWithRef<'button'> {
   variant?: 'primary' | 'secondary'
   textAlign?: 'left' | 'right' | 'center'
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    // Make sure that there is no problem even if className is specified on the side that uses the component
-    const { className, children, textAlign, variant, ...restProps } = props
+export const Button: React.ElementType<ButtonProps> = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>((props, ref) => {
+  // Make sure that there is no problem even if className is specified on the side that uses the component
+  const { className, children, textAlign, variant, ...restProps } = props
 
-    const align = textAlign ?? 'center'
+  const align = textAlign ?? 'center'
 
-    const style = `
+  const style = `
       inline-block
       p-4
       text-button
@@ -31,7 +33,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       disabled:cursor-not-allowed
     `
 
-    const primary = `
+  const primary = `
       text-white-1000
       bg-sea-600
       hover:enabled:bg-sea-700
@@ -39,7 +41,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       disabled:bg-sumi-500
       disabled:text-white-1000
     `
-    const secondary = `
+  const secondary = `
       text-sea-600
       bg-transparent
       hover:enabled:bg-sea-100
@@ -47,19 +49,20 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       disabled:text-sumi-500
     `
 
-    const styles = {
-      primary: primary,
-      secondary: secondary
-    }
-
-    return (
-      <button
-        className={cx(style, styles[variant ?? 'primary'], className)}
-        {...restProps}
-        ref={ref}
-      >
-        {children}
-      </button>
-    )
+  const styles = {
+    primary: primary,
+    secondary: secondary
   }
-) as React.ElementType
+
+  return (
+    <button
+      className={cx(style, styles[variant ?? 'primary'], className)}
+      {...restProps}
+      ref={ref}
+    >
+      {children}
+    </button>
+  )
+})
+
+Button.displayName = 'Button'

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

@@ -1,9 +1,9 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
-export interface CardProps extends React.ComponentProps<'section'> {}
+export interface CardProps extends React.ComponentPropsWithoutRef<'section'> {}
 
-export const Card = (props: CardProps) => {
+export const Card: React.ElementType<CardProps> = (props: CardProps) => {
   const { className, children, ...restProps } = props
 
   const style = `

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

@@ -1,9 +1,9 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
-export interface CodeProps extends React.ComponentProps<'code'> {}
+export interface CodeProps extends React.ComponentPropsWithoutRef<'code'> {}
 
-export const Code = (props: CodeProps) => {
+export const Code: React.ElementType<CodeProps> = (props: CodeProps) => {
   const { className, children, ...restProps } = props
 
   const style = `

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

@@ -1,9 +1,9 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
-export interface HeadingProps extends React.ComponentProps<'h1'> {}
+export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {}
 
-export const H1 = (props: HeadingProps) => {
+export const H1: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -20,8 +20,7 @@ export const H1 = (props: HeadingProps) => {
   )
 }
 
-export const H2 = (props: HeadingProps) => {
-  // コンポーネントを使う側でclassNameを指定しても問題ないようにする
+export const H2: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -38,8 +37,7 @@ export const H2 = (props: HeadingProps) => {
   )
 }
 
-export const H3 = (props: HeadingProps) => {
-  // コンポーネントを使う側でclassNameを指定しても問題ないようにする
+export const H3: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -56,8 +54,7 @@ export const H3 = (props: HeadingProps) => {
   )
 }
 
-export const H4 = (props: HeadingProps) => {
-  // コンポーネントを使う側でclassNameを指定しても問題ないようにする
+export const H4: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -74,8 +71,7 @@ export const H4 = (props: HeadingProps) => {
   )
 }
 
-export const H5 = (props: HeadingProps) => {
-  // コンポーネントを使う側でclassNameを指定しても問題ないようにする
+export const H5: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -92,8 +88,7 @@ export const H5 = (props: HeadingProps) => {
   )
 }
 
-export const H6 = (props: HeadingProps) => {
-  // コンポーネントを使う側でclassNameを指定しても問題ないようにする
+export const H6: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `

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

@@ -1,11 +1,14 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
-export interface IconProps extends React.ComponentProps<'span'> {
+export interface IconProps extends React.ComponentPropsWithRef<'span'> {
   icon: string
 }
 
-export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
+export const Icon: React.ElementType<IconProps> = React.forwardRef<
+  HTMLElement,
+  IconProps
+>((props, ref) => {
   const { className, icon, ...restProps } = props
 
   const style = `
@@ -24,4 +27,6 @@ export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
       {icon}
     </span>
   )
-}) as React.ElementType
+})
+
+Icon.displayName = 'Icon'

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

@@ -1,30 +1,32 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
-export interface IconButtonProps extends React.ComponentProps<'button'> {
+export interface IconButtonProps extends React.ComponentPropsWithRef<'button'> {
   variant?: 'primary' | 'secondary'
   iconLayout?: 'left' | 'right'
   rounded?: string
   icon: string
 }
 
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-  (props, ref) => {
-    const {
-      className,
-      children,
-      variant,
-      icon,
-      iconLayout,
-      rounded,
-      ...restProps
-    } = props
+export const IconButton: React.ElementType<IconButtonProps> = React.forwardRef<
+  HTMLButtonElement,
+  IconButtonProps
+>((props, ref) => {
+  const {
+    className,
+    children,
+    variant,
+    icon,
+    iconLayout,
+    rounded,
+    ...restProps
+  } = props
 
-    const layout = iconLayout ?? 'left'
+  const layout = iconLayout ?? 'left'
 
-    const align = 'center'
+  const align = 'center'
 
-    const style = `
+  const style = `
       ${rounded === 'full' ? 'aspect-square' : ''}
       inline-block
       p-4
@@ -43,7 +45,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
       disabled:cursor-not-allowed
     `
 
-    const primary = `
+  const primary = `
       text-white-1000
       bg-sea-600
       hover:enabled:bg-sea-700
@@ -51,19 +53,19 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
       disabled:bg-sumi-500
       disabled:text-white-1000
     `
-    const secondary = `
+  const secondary = `
       text-sea-600
       hover:enabled:bg-sea-100
       active:enabled:bg-sea-200
       disabled:text-sumi-500
     `
 
-    const styles = {
-      primary: primary,
-      secondary: secondary
-    }
+  const styles = {
+    primary: primary,
+    secondary: secondary
+  }
 
-    const iconStyle = `
+  const iconStyle = `
       inline-block
       align-middle
       font-icon
@@ -74,16 +76,17 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
       mb-1
     `
 
-    return (
-      <button
-        className={cx(style, styles[variant ?? 'primary'], className)}
-        {...restProps}
-        ref={ref}
-      >
-        {layout == 'left' && <span className={cx(iconStyle)}>{icon}</span>}
-        {children && <span className="mx-1 inline-block">{children}</span>}
-        {layout == 'right' && <span className={cx(iconStyle)}>{icon}</span>}
-      </button>
-    )
-  }
-) as React.ElementType
+  return (
+    <button
+      className={cx(style, styles[variant ?? 'primary'], className)}
+      {...restProps}
+      ref={ref}
+    >
+      {layout == 'left' && <span className={cx(iconStyle)}>{icon}</span>}
+      {children && <span className="mx-1 inline-block">{children}</span>}
+      {layout == 'right' && <span className={cx(iconStyle)}>{icon}</span>}
+    </button>
+  )
+})
+
+IconButton.displayName = 'IconButton'

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

@@ -1,11 +1,14 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
-export interface InfoCardProps extends React.ComponentProps<'section'> {
+export interface InfoCardProps
+  extends React.ComponentPropsWithoutRef<'section'> {
   title?: string
 }
 
-export const InfoCard = (props: InfoCardProps) => {
+export const InfoCard: React.ElementType<InfoCardProps> = (
+  props: InfoCardProps
+) => {
   const { className, children, title, ...restProps } = props
 
   const style = `

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

@@ -28,15 +28,17 @@ const getFileType = (url: string) => {
   return null
 }
 
-export interface LinkProps extends React.ComponentProps<'a'> {}
+export interface LinkProps extends React.ComponentPropsWithRef<'a'> {}
 
-export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
-  (props, ref) => {
-    const { className, children, ...restProps } = props
-    const href = props.href ?? ''
-    const fileType = getFileType(href)
+export const Link: React.ElementType<LinkProps> = React.forwardRef<
+  HTMLAnchorElement,
+  LinkProps
+>((props, ref) => {
+  const { className, children, ...restProps } = props
+  const href = props.href ?? ''
+  const fileType = getFileType(href)
 
-    const style = `
+  const style = `
       rounded-sm
       cursor-pointer
       text-sea-600
@@ -51,26 +53,27 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       disabled:border-sumi-500
     `
 
-    if (href.startsWith('http')) {
-      return (
-        <a
-          className={cx(style, className)}
-          href={href}
-          target="_blank"
-          rel="noopener noreferrer"
-          {...restProps}
-          ref={ref}
-        >
-          {children}
-          {fileType ? `（${fileType}）` : null}
-        </a>
-      )
-    }
+  if (href.startsWith('http')) {
     return (
-      <a className={cx(style, className)} href={href} {...restProps} ref={ref}>
+      <a
+        className={cx(style, className)}
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        {...restProps}
+        ref={ref}
+      >
         {children}
         {fileType ? `（${fileType}）` : null}
       </a>
     )
   }
-) as React.ElementType
+  return (
+    <a className={cx(style, className)} href={href} {...restProps} ref={ref}>
+      {children}
+      {fileType ? `（${fileType}）` : null}
+    </a>
+  )
+})
+
+Link.displayName = 'Link'

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

@@ -1,9 +1,9 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
-export interface UlProps extends React.ComponentProps<'ul'> {}
+export interface UlProps extends React.ComponentPropsWithoutRef<'ul'> {}
 
-export const Ul = (props: UlProps) => {
+export const Ul: React.ElementType<UlProps> = (props: UlProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -20,9 +20,9 @@ export const Ul = (props: UlProps) => {
   )
 }
 
-export interface OlProps extends React.ComponentProps<'ol'> {}
+export interface OlProps extends React.ComponentPropsWithoutRef<'ol'> {}
 
-export const Ol = (props: OlProps) => {
+export const Ol: React.ElementType<OlProps> = (props: OlProps) => {
   const { className, children, ...restProps } = props
 
   const style = `

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

@@ -1,9 +1,9 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
-export interface PreProps extends React.ComponentProps<'pre'> {}
+export interface PreProps extends React.ComponentPropsWithoutRef<'pre'> {}
 
-export const Pre = (props: PreProps) => {
+export const Pre: React.ElementType<PreProps> = (props: PreProps) => {
   const { className, children, ...restProps } = props
 
   const style = `

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
-export interface TableProps extends React.ComponentProps<'table'> {}
+export interface TableProps extends React.ComponentPropsWithoutRef<'table'> {}
 
 const styleBorder = `
   border
@@ -9,7 +9,7 @@ const styleBorder = `
   border-sumi-900
 `
 
-export const Table = (props: TableProps) => {
+export const Table: React.ElementType<TableProps> = (props: TableProps) => {
   const { className, children, ...restProps } = props
 
   // If there is no break-all setting, the table will protrude when using a smartphone
@@ -26,9 +26,12 @@ export const Table = (props: TableProps) => {
   )
 }
 
-export interface CaptionProps extends React.ComponentProps<'caption'> {}
+export interface CaptionProps
+  extends React.ComponentPropsWithoutRef<'caption'> {}
 
-export const Caption = (props: CaptionProps) => {
+export const Caption: React.ElementType<CaptionProps> = (
+  props: CaptionProps
+) => {
   const { className, children, ...restProps } = props
 
   const style = `text-left`
@@ -39,9 +42,9 @@ export const Caption = (props: CaptionProps) => {
   )
 }
 
-export interface TheadProps extends React.ComponentProps<'thead'> {}
+export interface TheadProps extends React.ComponentPropsWithoutRef<'thead'> {}
 
-export const Thead = (props: TheadProps) => {
+export const Thead: React.ElementType<TheadProps> = (props: TheadProps) => {
   const { className, children, ...restProps } = props
 
   return (
@@ -51,9 +54,9 @@ export const Thead = (props: TheadProps) => {
   )
 }
 
-export interface TbodyProps extends React.ComponentProps<'tbody'> {}
+export interface TbodyProps extends React.ComponentPropsWithoutRef<'tbody'> {}
 
-export const Tbody = (props: TbodyProps) => {
+export const Tbody: React.ElementType<TbodyProps> = (props: TbodyProps) => {
   const { className, children, ...restProps } = props
 
   return (
@@ -63,9 +66,9 @@ export const Tbody = (props: TbodyProps) => {
   )
 }
 
-export interface ThProps extends React.ComponentProps<'th'> {}
+export interface ThProps extends React.ComponentPropsWithoutRef<'th'> {}
 
-export const Th = (props: ThProps) => {
+export const Th: React.ElementType<ThProps> = (props: ThProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -80,9 +83,9 @@ export const Th = (props: ThProps) => {
   )
 }
 
-export interface TrProps extends React.ComponentProps<'tr'> {}
+export interface TrProps extends React.ComponentPropsWithoutRef<'tr'> {}
 
-export const Tr = (props: TrProps) => {
+export const Tr: React.ElementType<TrProps> = (props: TrProps) => {
   const { className, children, ...restProps } = props
 
   const style = ``
@@ -94,9 +97,9 @@ export const Tr = (props: TrProps) => {
   )
 }
 
-export interface TdProps extends React.ComponentProps<'td'> {}
+export interface TdProps extends React.ComponentPropsWithoutRef<'td'> {}
 
-export const Td = (props: TdProps) => {
+export const Td: React.ElementType<TdProps> = (props: TdProps) => {
   const { className, children, ...restProps } = props
 
   const style = `

package/packages/core/tsconfig.node.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "composite": true,
     "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "node",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]

package/packages/core/vite.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
     lib: {
       entry: resolve(__dirname, 'src', 'index.ts'),
       formats: ['es', 'cjs'],
-      fileName: (ext) => `index.${ext}.js`
+      fileName: (ext: string) => `index.${ext}.js`
     },
     rollupOptions: {
       external: [...Object.keys(peerDependencies)]