@sakura-ui/sakura-ui 0.1.10 → 0.1.12

package/README.md

@@ -1,7 +1,11 @@
 # Sakura UI
 Sakura UI - UI components built with Tailwind CSS for React. Sakura UI is an unofficial implementation of the Digital Agency Design System. The specifications for each UI component have been implemented with reference to the Digital Agency Design System.
 
-- [Design System 1.2.1](https://www.figma.com/community/file/1172530831489802410)
+- [Design System 1.2.2](https://www.figma.com/community/file/1172530831489802410)
+
+## Sample page
+
+- [UI Catalog](https://glassonion1.github.io/sakura-ui/)
 
 ## Install
 ```
@@ -41,7 +45,7 @@ Add fonts from CDN.
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100;200;300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
     ...head
@@ -105,42 +109,14 @@ export default App
 - Code
 - Pre
 - Button
+- Icon
 - IconButton
 
 ## Form components
 - Radio
 - Checkbox
 - Select
-- Text
+- Input
 - Textarea
 - LabelControl
 - FieldsetControl
-
-## UI Samples
-
-### Heading
-![Heading](https://user-images.githubusercontent.com/1037944/227953097-5c35de72-b4a2-4ec3-95bf-a65ccbb5744e.png)
-
-### List
-![List](https://user-images.githubusercontent.com/1037944/227954257-418f55a0-69fe-4f97-85cd-e46e03ebada6.png)
-
-### Button
-![Button](https://user-images.githubusercontent.com/1037944/227955904-8c5f3466-d7c0-426d-b7b2-af58f13d84d5.png)
-
-### Icon button
-![Icon button](https://user-images.githubusercontent.com/1037944/227956130-142160f6-263f-48d4-83d3-3ba9479c14f2.png)
-
-### Select
-![Select](https://user-images.githubusercontent.com/1037944/227956833-29d1201d-e9ea-4124-b4c3-f14c937a9079.png)
-
-### Radio button
-![Radio](https://user-images.githubusercontent.com/1037944/227956968-2c0519ba-0e8c-424e-9949-722a6ab6fcba.png)
-
-### Checkbox
-![Checkbox](https://user-images.githubusercontent.com/1037944/227957113-a75370eb-b1ed-4010-b30f-bc44db1846a5.png)
-
-### Textbox
-![Textbox](https://user-images.githubusercontent.com/1037944/227957734-7aeabd51-f2ae-441b-94ae-b5ebb1536811.png)
-
-### Textarea
-![Textarea](https://user-images.githubusercontent.com/1037944/227957968-627a2808-7f5a-4106-8824-9622d5ab7c1a.png)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.1.10",
+  "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/config": "0.1.1",
-    "@sakura-ui/core": "0.1.3",
-    "@sakura-ui/forms": "0.1.1"
+    "@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

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/config",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -19,7 +19,7 @@
   "scripts": {
     "build": "run-p build:*",
     "build:scripts": "vite build",
-    "build:types": "tsc --emitDeclarationOnly",
+    "build:types": "tsc",
     "test": "jest"
   },
   "keywords": [],
@@ -35,16 +35,16 @@
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.1",
-    "@types/node": "^18.16.15",
+    "@types/jest": "^29.5.2",
+    "@types/node": "^18.16.19",
     "autoprefixer": "^10.4.14",
-    "jest": "^29.5.0",
+    "jest": "^29.6.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.25",
     "tailwindcss": "^3.3.2",
-    "ts-jest": "^29.1.0",
+    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.9"
+    "typescript": "^5.1.6",
+    "vite": "^4.4.2"
   }
 }

package/packages/config/src/index.ts

@@ -5,7 +5,7 @@ const sakuraPlugin = plugin(
     addBase({
       '@font-face': {
         fontFamily: 'Material Symbols Outlined',
-        fontWheight: '300',
+        fontWeight: '300',
         fontStyle: 'normal'
       }
     })

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.3",
+  "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": [],
@@ -39,22 +39,22 @@
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.1",
-    "@types/node": "^18.16.15",
-    "@types/react": "^18.2.7",
-    "@types/react-dom": "^18.2.4",
-    "@vitejs/plugin-react-swc": "^3.3.1",
+    "@types/jest": "^29.5.2",
+    "@types/node": "^18.16.19",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
-    "jest": "^29.5.0",
+    "jest": "^29.6.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.25",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.3.2",
-    "ts-jest": "^29.1.0",
+    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "tsc-alias": "^1.8.6",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.9"
+    "tsc-alias": "^1.8.7",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.2"
   }
 }

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,27 +1,38 @@
 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, ...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
       text-button
       text-${align}
-      rounded-lg
+      rounded-${rounded ? rounded : 'lg'}
       cursor-pointer
       whitespace-nowrap
       border
@@ -34,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
@@ -42,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
@@ -65,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 = `