@sakura-ui/sakura-ui 0.0.9 → 0.0.10

package/README.md

@@ -16,8 +16,8 @@ tailwind.config.js
 module.exports = {
   mode: 'jit',
   content: [
-    './src/pages/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@sakura-ui/react/**/*.{js,ts,jsx,tsx}'
+    './src/pages/**/*.{jsx,tsx}',
+    './node_modules/@sakura-ui/sakura-ui/packages/react/**/*.{jsx,tsx}'
   ],
   plugins: [require('@sakura-ui/config')]
 }

package/examples/README.md

@@ -0,0 +1,14 @@
+# SakuraUI examples
+
+## Install
+```
+$ pnpm install
+```
+
+## Run
+```
+$ pnpm dev
+```
+
+## Browse
+http://localhost:5173/

package/examples/package.json

@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sakura-ui/sakura-ui": "workspace:^0.0.8",
+    "@sakura-ui/sakura-ui": "workspace:^0.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/examples/src/App.tsx

@@ -1,11 +1,23 @@
 import { useState } from 'react'
-import { H1, H2, H3, H4, H5, H6, Button } from '@sakura-ui/react'
+import {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Button,
+  Checkbox,
+  Radio,
+  Text,
+  Textarea
+} from '../../packages/react/src'
 
 const App = () => {
   const [count, setCount] = useState(0)
 
   return (
-    <div>
+    <div className="text-sumi-900 text-base">
       <H1>SakuraUI Heading1</H1>
       <H2>SakuraUI Heading2</H2>
       <H3>SakuraUI Heading3</H3>
@@ -22,6 +34,20 @@ const App = () => {
         >
           count is {count}
         </Button>
+        <Button onClick={() => setCount((count) => count + 1)} disabled>
+          count is {count}
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => setCount((count) => count + 1)}
+          disabled
+        >
+          count is {count}
+        </Button>
+        <Radio name="sample">ラジオ1</Radio>
+        <Radio name="sample">ラジオ2</Radio>
+        <Checkbox>選択肢1</Checkbox>
+        <Checkbox>選択肢2</Checkbox>
       </div>
     </div>
   )

package/examples/tailwind.config.js

@@ -2,8 +2,8 @@ module.exports = {
   mode: 'jit',
   content: [
     './index.html',
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@sakura-ui/sakura-ui/packages/react/**/*.{js,ts,jsx,tsx}'
+    './src/**/*.{jsx,tsx}',
+    './node_modules/@sakura-ui/sakura-ui/packages/react/**/*.{jsx,tsx}'
   ],
   plugins: [require('@sakura-ui/config')]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
+export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
   variant?: 'primary' | 'secondary'
   textAlign?: 'left' | 'right' | 'center'
 }
@@ -37,8 +37,10 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     disabled:border
     disabled:border-solid
     disabled:border-sumi-500
+    disabled:cursor-not-allowed
   `
     const secondary = `
+    text-sea-600
     border
     border-solid
     border-sea-600
@@ -47,11 +49,12 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     focus:outline
     focus:outline-2
     focus:outline-wood-500
-    disabled:bg-sumi-500
-    disabled:text-white-1000
+    disabled:hover:bg-white-1000
+    disabled:text-sumi-500
     disabled:border
     disabled:border-solid
     disabled:border-sumi-500
+    disabled:cursor-not-allowed
   `
 
     const styles = {

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

@@ -1,9 +1,9 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type Props = React.ComponentProps<'div'>
+export interface CardProps extends React.ComponentProps<'div'> {}
 
-export const Card = (props: Props) => {
+export const Card = (props: CardProps) => {
   const { className, children, ...newProps } = props
 
   const style = `

package/packages/react/src/components/Checkbox.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export interface CheckboxProps extends React.ComponentProps<'input'> {}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (props, ref) => {
+    const { className, children, ...newProps } = props
+
+    const style = `
+    flex
+    items-center
+    text-sm
+    cursor-pointer
+    py-2
+  `
+    const styleInput = `
+    hidden
+    peer
+  `
+
+    const styleCheck = `
+    inline-block
+    bg-clip-content
+    w-6 h-6
+    ml-1
+    mr-2
+    rounded
+    border
+    border-solid
+    border-sumi-900
+    peer-checked:bg-sea-600
+    peer-checked:border-none
+    `
+
+    return (
+      <label htmlFor={newProps.id} className={cx(style, className)}>
+        <input className={styleInput} type="checkbox" {...newProps} ref={ref} />
+        <span className={styleCheck}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="w-6"
+            height="w-6"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+              fill="#fff"
+            />
+          </svg>
+        </span>
+        {children}
+      </label>
+    )
+  }
+)

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type CodeProps = React.ComponentProps<'code'>
+export interface CodeProps extends React.ComponentProps<'code'> {}
 
 export const Code = (props: CodeProps) => {
   const { className, children, ...newProps } = props

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type HeadingProps = React.ComponentProps<'h1'>
+export interface HeadingProps extends React.ComponentProps<'h1'> {}
 
 const common = `
     font-bold

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

@@ -1,71 +1,22 @@
 import React from 'react'
-import { cx } from '../utils'
+import { Button } from './Button'
 
-export type IconButtonProps = React.ComponentProps<'button'> & {
+export interface IconButtonProps extends React.ComponentProps<'button'> {
   variant?: 'primary' | 'secondary'
   icon: string
 }
 
 export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
   (props, ref) => {
-    const { className, children, icon, variant, ...newProps } = props
+    const { children, icon, ...newProps } = props
 
     const align = 'center'
 
-    const style = `
-    inline-block
-    p-4
-    text-base
-    font-bold
-    rounded-lg
-    text-${align}
-    cursor-pointer
-  `
-
-    const primary = `
-    text-white-1000
-    bg-sea-600
-    hover:bg-sea-800
-    active:bg-sea-800
-    focus:outline
-    focus:outline-2
-    focus:outline-wood-500
-    disabled:bg-sumi-500
-    disabled:text-white-1000
-    disabled:border
-    disabled:border-solid
-    disabled:border-sumi-500
-  `
-    const secondary = `
-    border
-    border-solid
-    border-sea-600
-    hover:bg-sea-100
-    active:bg-sea-100
-    focus:outline
-    focus:outline-2
-    focus:outline-wood-500
-    disabled:bg-sumi-500
-    disabled:text-white-1000
-    disabled:border
-    disabled:border-solid
-    disabled:border-sumi-500
-  `
-
-    const styles = {
-      primary: primary,
-      secondary: secondary
-    }
-
     return (
-      <button
-        className={cx(style, styles[variant ?? 'primary'], className)}
-        {...newProps}
-        ref={ref}
-      >
+      <Button textAlign={align} {...newProps} ref={ref}>
         <img src={`/icons/${props.icon}.svg`} alt={props.icon} width="24" />
         {children}
-      </button>
+      </Button>
     )
   }
 )

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

@@ -1,11 +1,11 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type Props = React.ComponentProps<'div'> & {
+export interface InfoCardProps extends React.ComponentProps<'div'> {
   title?: string
 }
 
-export const InfoCard = (props: Props) => {
+export const InfoCard = (props: InfoCardProps) => {
   const { className, children, ...newProps } = props
 
   const style = `

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type LinkProps = React.ComponentProps<'a'>
+export interface LinkProps extends React.ComponentProps<'a'> {}
 
 const getFileType = (url: string) => {
   const converted = url.toLowerCase()

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type UlProps = React.ComponentProps<'ul'>
+export interface UlProps extends React.ComponentProps<'ul'> {}
 
 export const Ul = (props: UlProps) => {
   const { className, children, ...newprops } = props
@@ -19,7 +19,7 @@ export const Ul = (props: UlProps) => {
   )
 }
 
-export type OlProps = React.ComponentProps<'ol'>
+export interface OlProps extends React.ComponentProps<'ol'> {}
 
 export const Ol = (props: OlProps) => {
   const { className, children, ...newprops } = props

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type PreProps = React.ComponentProps<'pre'>
+export interface PreProps extends React.ComponentProps<'pre'> {}
 
 export const Pre = (props: PreProps) => {
   const { className, children, ...newProps } = props

package/packages/react/src/components/Radio.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type Props = React.ComponentProps<'input'> & {}
+export interface Props extends React.ComponentProps<'input'> {}
 
 export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
   const { className, children, ...newProps } = props
@@ -11,6 +11,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
     items-center
     text-sm
     cursor-pointer
+    py-2
   `
   const styleInput = `
     hidden
@@ -21,6 +22,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
     inline-block
     bg-clip-content
     w-6 h-6
+    ml-1
     mr-2
     p-1
     rounded-full
@@ -28,6 +30,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
     border-solid
     border-sumi-900
     peer-checked:bg-sea-600
+    peer-checked:border-sea-600
   `
   return (
     <label htmlFor={newProps.id} className={cx(style, className)}>

package/packages/react/src/components/Select.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type Props = React.ComponentPropsWithoutRef<'select'>
+export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {}
 
-export const Select = React.forwardRef<HTMLSelectElement, Props>(
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   (props, ref) => {
     const { className, children, ...newProps } = props
 

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type TableProps = React.ComponentProps<'table'>
+export interface TableProps extends React.ComponentProps<'table'> {}
 
 const styleBorder = `
     border
@@ -26,7 +26,7 @@ export const Table = (props: TableProps) => {
   )
 }
 
-export type CaptionProps = React.ComponentProps<'caption'>
+export interface CaptionProps extends React.ComponentProps<'caption'> {}
 
 export const Caption = (props: CaptionProps) => {
   const { className, children, ...newprops } = props
@@ -39,7 +39,7 @@ export const Caption = (props: CaptionProps) => {
   )
 }
 
-export type TheadProps = React.ComponentProps<'thead'>
+export interface TheadProps extends React.ComponentProps<'thead'> {}
 
 export const Thead = (props: TheadProps) => {
   const { className, children, ...newprops } = props
@@ -51,7 +51,7 @@ export const Thead = (props: TheadProps) => {
   )
 }
 
-export type TbodyProps = React.ComponentProps<'tbody'>
+export interface TbodyProps extends React.ComponentProps<'tbody'> {}
 
 export const Tbody = (props: TbodyProps) => {
   const { className, children, ...newprops } = props
@@ -63,7 +63,7 @@ export const Tbody = (props: TbodyProps) => {
   )
 }
 
-export type ThProps = React.ComponentProps<'th'>
+export interface ThProps extends React.ComponentProps<'th'> {}
 
 export const Th = (props: ThProps) => {
   const { className, children, ...newprops } = props
@@ -80,7 +80,7 @@ export const Th = (props: ThProps) => {
   )
 }
 
-export type TrProps = React.ComponentProps<'tr'>
+export interface TrProps extends React.ComponentProps<'tr'> {}
 
 export const Tr = (props: TrProps) => {
   const { className, children, ...newprops } = props
@@ -94,7 +94,7 @@ export const Tr = (props: TrProps) => {
   )
 }
 
-export type TdProps = React.ComponentProps<'td'>
+export interface TdProps extends React.ComponentProps<'td'> {}
 
 export const Td = (props: TdProps) => {
   const { className, children, ...newprops } = props

package/packages/react/src/components/Text.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type TextProps = React.ComponentPropsWithoutRef<'input'>
+export interface TextProps extends React.ComponentPropsWithoutRef<'input'> {}
 
 export const Text = React.forwardRef<HTMLInputElement, TextProps>(
-  ({ ...props }, ref) => {
+  (props, ref) => {
     const { className, ...newProps } = props
 
     const style = `

package/packages/react/src/components/Textarea.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { cx } from '../utils'
 
-export type TextareaProps = React.ComponentPropsWithoutRef<'textarea'>
+export interface TextareaProps
+  extends React.ComponentPropsWithoutRef<'textarea'> {}
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ ...props }, ref) => {
+  (props, ref) => {
     const { className, children, ...newProps } = props
 
     const style = `

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

@@ -1,5 +1,6 @@
 export { Button } from './Button'
 export { Card } from './Card'
+export { Checkbox } from './Checkbox'
 export { Code } from './Code'
 export { H1, H2, H3, H4, H5, H6 } from './Heading'
 export { IconButton } from './IconButton'

package/packages/react/src/index.ts

@@ -1,6 +1,7 @@
 export {
   Button,
   Card,
+  Checkbox,
   Code,
   H1,
   H2,

package/packages/config/coverage/clover.xml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1677477705846" clover="3.2.0">
-  <project timestamp="1677477705847" name="All files">
-    <metrics statements="3" coveredstatements="3" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="0" elements="4" coveredelements="3" complexity="0" loc="3" ncloc="3" packages="1" files="1" classes="1"/>
-    <file name="index.ts" path="/Users/taisukefujita/Documents/Repos/sakura-ui/packages/config/src/index.ts">
-      <metrics statements="3" coveredstatements="3" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="0"/>
-      <line num="1" count="1" type="stmt"/>
-      <line num="3" count="1" type="stmt"/>
-      <line num="100" count="1" type="stmt"/>
-    </file>
-  </project>
-</coverage>

package/packages/config/coverage/coverage-final.json

@@ -1,2 +0,0 @@
-{"/Users/taisukefujita/Documents/Repos/sakura-ui/packages/config/src/index.ts": {"path":"/Users/taisukefujita/Documents/Repos/sakura-ui/packages/config/src/index.ts","statementMap":{"0":{"start":{"line":1,"column":0},"end":{"line":1,"column":39}},"1":{"start":{"line":3,"column":21},"end":{"line":98,"column":2}},"2":{"start":{"line":100,"column":0},"end":{"line":100,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":3,"column":28},"end":{"line":3,"column":31}},"loc":{"start":{"line":3,"column":33},"end":{"line":3,"column":36}}}},"branchMap":{},"s":{"0":1,"1":1,"2":1},"f":{"0":0},"b":{}}
-}