@sakura-ui/sakura-ui 0.1.11 → 0.1.13

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

@@ -1,23 +1,104 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
-export interface CardProps extends React.ComponentProps<'section'> {}
+interface IdContextType {
+  id: string
+}
+
+const IdContext = React.createContext<IdContextType>({ id: '' })
+
+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 id = React.useId()
+  const ctx: IdContextType = { id: id }
+
   const style = `
-    bg-sumi-50
     border
     border-solid
     border-sumi-300
-    rounded-[12px]
-    p-4
+    rounded-2xl
+    md:rounded-3xl
     text-sumi-900
+    overflow-hidden
+  `
+
+  return (
+    <IdContext.Provider value={ctx}>
+      <section
+        aria-labelledby={ctx.id}
+        className={cx(style, className)}
+        {...restProps}
+      >
+        {children}
+      </section>
+    </IdContext.Provider>
+  )
+}
+
+export interface CardHeaderProps extends React.ComponentPropsWithoutRef<'h2'> {}
+
+export const CardHeader: React.ElementType<CardHeaderProps> = (
+  props: CardHeaderProps
+) => {
+  const { className, children, ...restProps } = props
+
+  const ctx = React.useContext(IdContext)
+
+  const style = `
+    py-6
+    px-6
+    text-lgm
+    leading-none
+  `
+
+  return (
+    <h2 id={ctx.id} className={cx(style, className)} {...restProps}>
+      {children}
+    </h2>
+  )
+}
+
+export interface CardBodyProps extends React.ComponentPropsWithoutRef<'p'> {}
+
+export const CardBody: React.ElementType<CardBodyProps> = (
+  props: CardBodyProps
+) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+    px-6
+    first:pt-6
+    pb-6
+    text-base
+  `
+
+  return (
+    <p className={cx(style, className)} {...restProps}>
+      {children}
+    </p>
+  )
+}
+
+export interface CardFooterProps
+  extends React.ComponentPropsWithoutRef<'div'> {}
+
+export const CardFooter: React.ElementType<CardFooterProps> = (
+  props: CardFooterProps
+) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+    px-6
+    first:pt-6
+    pb-6
   `
+
   return (
-    <section className={cx(style, props.className)} {...restProps}>
-      {props.children}
-    </section>
+    <div className={cx(style, className)} {...restProps}>
+      {children}
+    </div>
   )
 }

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
@@ -35,35 +37,40 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
       whitespace-nowrap
       border
       border-solid
-      border-sea-600
+      border-sea-800
+      active:enabled:border-sea-800-darken
+      hover:enabled:border-sea-800-darken
       focus:outline
       focus:outline-2
-      focus:outline-wood-500
+      focus:outline-wood-600
       disabled:border-sumi-500
       disabled:cursor-not-allowed
     `
 
-    const primary = `
-      text-white-1000
-      bg-sea-600
-      hover:enabled:bg-sea-700
-      active:enabled:bg-sea-800
-      disabled:bg-sumi-500
-      disabled:text-white-1000
-    `
-    const secondary = `
-      text-sea-600
-      hover:enabled:bg-sea-100
-      active:enabled:bg-sea-200
-      disabled:text-sumi-500
-    `
+  const primary = `
+    text-white-1000
+    bg-sea-800
+    active:enabled:bg-sea-800-darken
+    hover:enabled:bg-sea-800-darken
+    disabled:bg-sumi-500
+    disabled:text-white-1000
+  `
+  const secondary = `
+    text-sea-800
+    bg-transparent
+    active:enabled:bg-sea-50
+    hover:enabled:bg-sea-50
+    active:enabled:text-sea-800-darken
+    hover:enabled:text-sea-800-darken
+    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 +81,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,33 +1,37 @@
 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 = `
-    bg-sumi-50
-    border-sumi-300
     border
     border-solid
-    rounded-[12px]
+    border-sumi-300
+    rounded-2xl
+    md:rounded-3xl
     text-sumi-900
   `
 
   const topStyle = `
-    px-4
-    pt-4
-    mb-1
+    pt-6
+    px-6
     text-lgm
-    sm:text-lg
+    leading-none
+    mb-2
   `
 
   const bottmStyle = `
-    px-4
-    pb-4
+    pb-6
+    px-6
+    text-base
   `
 
   const headingId = React.useId()

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/src/components/index.ts

@@ -1,11 +1,13 @@
 export { Button } from './Button'
-export { Card } from './Card'
+export { Card, CardHeader, CardBody, CardFooter } from './Card'
 export { Code } from './Code'
 export { H1, H2, H3, H4, H5, H6 } from './Heading'
 export { Icon } from './Icon'
 export { IconButton } from './IconButton'
-export { InfoCard } from './InfoCard'
 export { Link } from './Link'
 export { Ol, Ul } from './List'
 export { Pre } from './Pre'
 export { Table, Caption, Thead, Tbody, Th, Tr, Td } from './Table'
+
+/** @deprecated use Card instead */
+export { InfoCard } from './InfoCard'

package/packages/core/src/index.ts

@@ -1,6 +1,9 @@
 export {
   Button,
   Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
   Code,
   H1,
   H2,

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

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Card, CardHeader } from '../src'
+
+describe('should labeled text from Card', () => {
+  test('renders Card', async () => {
+    render(
+      <Card>
+        <CardHeader>Card-Label</CardHeader>
+      </Card>
+    )
+
+    const text = screen.getByLabelText(/Card-Label/)
+
+    expect(text).toBeInTheDocument()
+  })
+})

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)]