@sakura-ui/sakura-ui 0.0.15 → 0.1.0

package/README.md

@@ -17,8 +17,8 @@ module.exports = {
   mode: 'jit',
   content: [
     './src/pages/**/*.{jsx,tsx}',
-    './node_modules/@sakura-ui/react/**/*.{js,jsx,ts,tsx}',
-    './node_modules/@sakura-ui/icons/**/*.{js,jsx,ts,tsx}'
+    './node_modules/@sakura-ui/core/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@sakura-ui/forms/**/*.{js,jsx,ts,tsx}'
   ],
   plugins: [require('@sakura-ui/config')]
 }
@@ -50,8 +50,7 @@ Add fonts from CDN.
 ## Usage
 ```ts
 import { useState } from 'react'
-import { H1, H2, H3, H4, H5, H6, Button } from '@sakura-ui/react'
-import { IconButton } from '@sakura-ui/icons'
+import { H1, H2, H3, H4, H5, H6, Button, IconButton } from '@sakura-ui/react'
 
 const App = () => {
   const [count, setCount] = useState(0)
@@ -99,12 +98,14 @@ export default App
 - Td
 - Code
 - Pre
-
-## Form components
 - Button
 - IconButton
+
+## Form components
 - Radio
-- RadioGroup
+- Checkbox
 - Select
 - Text
 - Textarea
+- LabelControl
+- FieldsetControl

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.0.15",
+  "version": "0.1.0",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
@@ -14,8 +14,8 @@
   ],
   "dependencies": {
     "@sakura-ui/config": "0.0.10",
-    "@sakura-ui/react": "0.0.5",
-    "@sakura-ui/forms": "0.0.1"
+    "@sakura-ui/forms": "0.0.3",
+    "@sakura-ui/core": "0.0.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/packages/{react → core}/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@sakura-ui/react",
-  "version": "0.0.5",
+  "name": "@sakura-ui/core",
+  "version": "0.0.1",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -31,7 +31,7 @@
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
-    "directory": "packages/react"
+    "directory": "packages/core"
   },
   "license": "MIT",
   "peerDependencies": {

package/packages/{react → core}/src/components/Button.tsx

@@ -9,7 +9,7 @@ export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
 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, ...newProps } = props
+    const { className, children, textAlign, variant, ...restProps } = props
 
     const align = textAlign ?? 'center'
 
@@ -68,7 +68,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <button
         className={cx(style, styles[variant ?? 'primary'], className)}
-        {...newProps}
+        {...restProps}
         ref={ref}
       >
         {children}

package/packages/{react → core}/src/components/Card.tsx

@@ -4,7 +4,7 @@ import { cx } from '../utils'
 export interface CardProps extends React.ComponentProps<'div'> {}
 
 export const Card = (props: CardProps) => {
-  const { className, children, ...newProps } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     bg-sumi-50
@@ -15,7 +15,7 @@ export const Card = (props: CardProps) => {
     p-4
   `
   return (
-    <div className={cx(style, props.className)} {...newProps}>
+    <div className={cx(style, props.className)} {...restProps}>
       {props.children}
     </div>
   )

package/packages/{react → core}/src/components/Code.tsx

@@ -4,7 +4,7 @@ import { cx } from '../utils'
 export interface CodeProps extends React.ComponentProps<'code'> {}
 
 export const Code = (props: CodeProps) => {
-  const { className, children, ...newProps } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     bg-sumi-50
@@ -12,7 +12,7 @@ export const Code = (props: CodeProps) => {
   `
 
   return (
-    <code className={cx(style, className)} {...newProps}>
+    <code className={cx(style, className)} {...restProps}>
       {children}
     </code>
   )

package/packages/{react → core}/src/components/Heading.tsx

@@ -8,7 +8,7 @@ const common = `
 `
 
 export const H1 = (props: HeadingProps) => {
-  const { className, children, ...newProps } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     text-h1
@@ -17,15 +17,15 @@ export const H1 = (props: HeadingProps) => {
   `
 
   return (
-    <h1 className={cx(common, style, props.className)} {...newProps}>
-      {props.children}
+    <h1 className={cx(common, style, className)} {...restProps}>
+      {children}
     </h1>
   )
 }
 
 export const H2 = (props: HeadingProps) => {
   // コンポーネントを使う側でclassNameを指定しても問題ないようにする
-  const { className, children, ...newProps } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     text-h2
@@ -34,15 +34,15 @@ export const H2 = (props: HeadingProps) => {
   `
 
   return (
-    <h2 className={cx(common, style, props.className)} {...newProps}>
-      {props.children}
+    <h2 className={cx(common, style, className)} {...restProps}>
+      {children}
     </h2>
   )
 }
 
 export const H3 = (props: HeadingProps) => {
   // コンポーネントを使う側でclassNameを指定しても問題ないようにする
-  const { className, children, ...newProps } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     text-h3
@@ -51,15 +51,15 @@ export const H3 = (props: HeadingProps) => {
   `
 
   return (
-    <h3 className={cx(common, style, props.className)} {...newProps}>
-      {props.children}
+    <h3 className={cx(common, style, className)} {...restProps}>
+      {children}
     </h3>
   )
 }
 
 export const H4 = (props: HeadingProps) => {
   // コンポーネントを使う側でclassNameを指定しても問題ないようにする
-  const { className, children, ...newProps } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     text-h4
@@ -68,15 +68,15 @@ export const H4 = (props: HeadingProps) => {
   `
 
   return (
-    <h4 className={cx(common, style, props.className)} {...newProps}>
-      {props.children}
+    <h4 className={cx(common, style, className)} {...restProps}>
+      {children}
     </h4>
   )
 }
 
 export const H5 = (props: HeadingProps) => {
   // コンポーネントを使う側でclassNameを指定しても問題ないようにする
-  const { className, children, ...newProps } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     text-h5
@@ -85,15 +85,15 @@ export const H5 = (props: HeadingProps) => {
   `
 
   return (
-    <h5 className={cx(common, style, props.className)} {...newProps}>
-      {props.children}
+    <h5 className={cx(common, style, className)} {...restProps}>
+      {children}
     </h5>
   )
 }
 
 export const H6 = (props: HeadingProps) => {
   // コンポーネントを使う側でclassNameを指定しても問題ないようにする
-  const { className, children, ...newProps } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     text-h6
@@ -102,8 +102,8 @@ export const H6 = (props: HeadingProps) => {
   `
 
   return (
-    <h6 className={cx(common, style, props.className)} {...newProps}>
-      {props.children}
+    <h6 className={cx(common, style, className)} {...restProps}>
+      {children}
     </h6>
   )
 }

package/packages/{react → core}/src/components/Icon.tsx

@@ -6,7 +6,7 @@ export interface IconProps extends React.ComponentProps<'span'> {
 }
 
 export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
-  const { className, icon, ...newProps } = props
+  const { className, icon, ...restProps } = props
 
   const style = `
   inline-block
@@ -20,7 +20,7 @@ export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
   `
 
   return (
-    <span className={cx(style, className)} {...newProps} ref={ref}>
+    <span className={cx(style, className)} {...restProps} ref={ref}>
       {icon}
     </span>
   )

package/packages/{react → core}/src/components/IconButton.tsx

@@ -9,7 +9,7 @@ export interface IconButtonProps extends React.ComponentProps<'button'> {
 
 export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
   (props, ref) => {
-    const { className, children, variant, icon, iconLayout, ...newProps } =
+    const { className, children, variant, icon, iconLayout, ...restProps } =
       props
 
     const layout = iconLayout ?? 'left'
@@ -82,7 +82,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
     return (
       <button
         className={cx(style, styles[variant ?? 'primary'], className)}
-        {...newProps}
+        {...restProps}
         ref={ref}
       >
         {layout == 'left' && <span className={cx(iconStyle)}>{icon}</span>}

package/packages/{react → core}/src/components/InfoCard.tsx

@@ -6,7 +6,7 @@ export interface InfoCardProps extends React.ComponentProps<'div'> {
 }
 
 export const InfoCard = (props: InfoCardProps) => {
-  const { className, children, ...newProps } = props
+  const { className, children, title, ...restProps } = props
 
   const style = `
     bg-sumi-50
@@ -28,9 +28,9 @@ export const InfoCard = (props: InfoCardProps) => {
   `
 
   return (
-    <div className={cx(style, props.className)} {...newProps}>
-      <h2 className={topStyle}>{props.title}</h2>
-      <p className={bottmStyle}>{props.children}</p>
+    <div className={cx(style, className)} {...restProps}>
+      <h2 className={topStyle}>{title}</h2>
+      <p className={bottmStyle}>{children}</p>
     </div>
   )
 }

package/packages/{react → core}/src/components/Link.tsx

@@ -31,7 +31,7 @@ const getFileType = (url: string) => {
 }
 
 export const Link = (props: LinkProps) => {
-  const { className, children, ...newProps } = props
+  const { className, children, ...restProps } = props
   const href = props.href ?? ''
   const fileType = getFileType(href)
 
@@ -53,20 +53,20 @@ export const Link = (props: LinkProps) => {
   if (href.startsWith('http')) {
     return (
       <a
-        className={cx(style, props.className)}
+        className={cx(style, className)}
         href={href}
         target="_blank"
         rel="noopener noreferrer"
-        {...newProps}
+        {...restProps}
       >
-        {props.children}
+        {children}
         {fileType ? `（${fileType}）` : null}
       </a>
     )
   }
   return (
-    <a className={cx(style, props.className)} href={href} {...newProps}>
-      {props.children}
+    <a className={cx(style, className)} href={href} {...restProps}>
+      {children}
       {fileType ? `（${fileType}）` : null}
     </a>
   )

package/packages/{react → core}/src/components/List.tsx

@@ -4,7 +4,7 @@ import { cx } from '../utils'
 export interface UlProps extends React.ComponentProps<'ul'> {}
 
 export const Ul = (props: UlProps) => {
-  const { className, children, ...newprops } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     list-disc
@@ -14,7 +14,7 @@ export const Ul = (props: UlProps) => {
     marker:text-xs
   `
   return (
-    <ul className={cx(style, className)} {...newprops}>
+    <ul className={cx(style, className)} {...restProps}>
       {children}
     </ul>
   )
@@ -23,7 +23,7 @@ export const Ul = (props: UlProps) => {
 export interface OlProps extends React.ComponentProps<'ol'> {}
 
 export const Ol = (props: OlProps) => {
-  const { className, children, ...newprops } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     list-decimal
@@ -32,7 +32,7 @@ export const Ol = (props: OlProps) => {
     pl-4
   `
   return (
-    <ol className={cx(style, className)} {...newprops}>
+    <ol className={cx(style, className)} {...restProps}>
       {children}
     </ol>
   )

package/packages/{react → core}/src/components/Pre.tsx

@@ -4,7 +4,7 @@ import { cx } from '../utils'
 export interface PreProps extends React.ComponentProps<'pre'> {}
 
 export const Pre = (props: PreProps) => {
-  const { className, children, ...newProps } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     p-4
@@ -15,7 +15,7 @@ export const Pre = (props: PreProps) => {
   `
 
   return (
-    <pre className={cx(style, className)} {...newProps}>
+    <pre className={cx(style, className)} {...restProps}>
       {children}
     </pre>
   )

package/packages/{react → core}/src/components/Table.tsx

@@ -10,7 +10,7 @@ const styleBorder = `
 `
 
 export const Table = (props: TableProps) => {
-  const { className, children, ...newprops } = props
+  const { className, children, ...restProps } = props
 
   // If there is no break-all setting, the table will protrude when using a smartphone
   const style = `
@@ -20,7 +20,7 @@ export const Table = (props: TableProps) => {
   `
 
   return (
-    <table className={cx(style, styleBorder, className)} {...newprops}>
+    <table className={cx(style, styleBorder, className)} {...restProps}>
       {children}
     </table>
   )
@@ -29,11 +29,11 @@ export const Table = (props: TableProps) => {
 export interface CaptionProps extends React.ComponentProps<'caption'> {}
 
 export const Caption = (props: CaptionProps) => {
-  const { className, children, ...newprops } = props
+  const { className, children, ...restProps } = props
 
   const style = `text-left`
   return (
-    <caption className={cx(style, className)} {...newprops}>
+    <caption className={cx(style, className)} {...restProps}>
       {children}
     </caption>
   )
@@ -42,10 +42,10 @@ export const Caption = (props: CaptionProps) => {
 export interface TheadProps extends React.ComponentProps<'thead'> {}
 
 export const Thead = (props: TheadProps) => {
-  const { className, children, ...newprops } = props
+  const { className, children, ...restProps } = props
 
   return (
-    <thead className={cx(className)} {...newprops}>
+    <thead className={cx(className)} {...restProps}>
       {children}
     </thead>
   )
@@ -54,10 +54,10 @@ export const Thead = (props: TheadProps) => {
 export interface TbodyProps extends React.ComponentProps<'tbody'> {}
 
 export const Tbody = (props: TbodyProps) => {
-  const { className, children, ...newprops } = props
+  const { className, children, ...restProps } = props
 
   return (
-    <tbody className={cx(className)} {...newprops}>
+    <tbody className={cx(className)} {...restProps}>
       {children}
     </tbody>
   )
@@ -66,7 +66,7 @@ export const Tbody = (props: TbodyProps) => {
 export interface ThProps extends React.ComponentProps<'th'> {}
 
 export const Th = (props: ThProps) => {
-  const { className, children, ...newprops } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     p-2
@@ -74,7 +74,7 @@ export const Th = (props: ThProps) => {
     text-left
   `
   return (
-    <th className={cx(style, styleBorder, className)} {...newprops}>
+    <th className={cx(style, styleBorder, className)} {...restProps}>
       {children}
     </th>
   )
@@ -83,12 +83,12 @@ export const Th = (props: ThProps) => {
 export interface TrProps extends React.ComponentProps<'tr'> {}
 
 export const Tr = (props: TrProps) => {
-  const { className, children, ...newprops } = props
+  const { className, children, ...restProps } = props
 
   const style = ``
 
   return (
-    <tr className={cx(style, styleBorder, className)} {...newprops}>
+    <tr className={cx(style, styleBorder, className)} {...restProps}>
       {children}
     </tr>
   )
@@ -97,14 +97,14 @@ export const Tr = (props: TrProps) => {
 export interface TdProps extends React.ComponentProps<'td'> {}
 
 export const Td = (props: TdProps) => {
-  const { className, children, ...newprops } = props
+  const { className, children, ...restProps } = props
 
   const style = `
     p-2
   `
 
   return (
-    <td className={cx(style, styleBorder, className)} {...newprops}>
+    <td className={cx(style, styleBorder, className)} {...restProps}>
       {children}
     </td>
   )

package/packages/core/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}