@sakura-ui/sakura-ui 0.0.1

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type UlProps = React.ComponentProps<'ul'>
+
+export const Ul = (props: UlProps) => {
+  const { className, children, ...newprops } = props
+
+  const style = `
+    list-disc
+    list-inside
+    -indent-4
+    pl-4
+  `
+  return (
+    <ul className={cx(style, className)} {...newprops}>
+      {children}
+    </ul>
+  )
+}
+
+export type OlProps = React.ComponentProps<'ol'>
+
+export const Ol = (props: OlProps) => {
+  const { className, children, ...newprops } = props
+
+  const style = `
+    list-decimal
+    list-inside
+    -indent-4
+    pl-4
+  `
+  return (
+    <ol className={cx(style, className)} {...newprops}>
+      {children}
+    </ol>
+  )
+}

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type PreProps = React.ComponentProps<'pre'>
+
+export const Pre = (props: PreProps) => {
+  const { className, children, ...newProps } = props
+
+  const style = `
+    p-4
+    bg-sumi-50
+    rounded-lg
+    whitespace-pre-wrap
+    overflow-y-scroll
+  `
+
+  return (
+    <pre className={cx(style, className)} {...newProps}>
+      {children}
+    </pre>
+  )
+}

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

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

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Radio } from './Radio'
+
+interface Item {
+  label: string
+  value: string
+}
+
+export interface RadioGroupProps {
+  name: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  items: Item[]
+}
+
+export const RadioGroup = ({ name, items, onChange }: RadioGroupProps) => {
+  return (
+    <>
+      {items.map(({ label, value }, index) => {
+        const itemId = name + value
+
+        return (
+          <div key={index}>
+            <Radio
+              className="mb-6 ml-4"
+              id={itemId}
+              name={name}
+              value={value}
+              onChange={onChange}
+              defaultChecked={index === 0}
+            >
+              {label}
+            </Radio>
+          </div>
+        )
+      })}
+    </>
+  )
+}

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

@@ -0,0 +1,41 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type Props = React.ComponentPropsWithoutRef<'select'>
+
+export const Select = React.forwardRef<HTMLSelectElement, Props>(
+  (props, ref) => {
+    const { className, children, ...newProps } = props
+
+    const style = `
+    block
+    appearance-none
+    w-full
+    bg-white-100
+    border
+    border-solid
+    border-sea-600
+    py-4 px-4 pr-8
+    rounded-[4px]
+    focus:outline
+    focus:outline-2
+    focus:outline-wood-500
+  `
+    return (
+      <div className="inline-block relative">
+        <select className={cx(style, props.className)} {...newProps} ref={ref}>
+          {props.children}
+        </select>
+        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+          <svg
+            className="fill-current h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+          >
+            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+          </svg>
+        </div>
+      </div>
+    )
+  }
+)

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

@@ -0,0 +1,111 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type TableProps = React.ComponentProps<'table'>
+
+const styleBorder = `
+    border
+    border-collapse
+    border-sumi-900
+`
+
+export const Table = (props: TableProps) => {
+  const { className, children, ...newprops } = props
+
+  // If there is no break-all setting, the table will protrude when using a smartphone
+  const style = `
+    w-full
+    table-auto
+    break-all
+  `
+
+  return (
+    <table className={cx(style, styleBorder, className)} {...newprops}>
+      {children}
+    </table>
+  )
+}
+
+export type CaptionProps = React.ComponentProps<'caption'>
+
+export const Caption = (props: CaptionProps) => {
+  const { className, children, ...newprops } = props
+
+  const style = `text-left`
+  return (
+    <caption className={cx(style, className)} {...newprops}>
+      {children}
+    </caption>
+  )
+}
+
+export type TheadProps = React.ComponentProps<'thead'>
+
+export const Thead = (props: TheadProps) => {
+  const { className, children, ...newprops } = props
+
+  return (
+    <thead className={cx(className)} {...newprops}>
+      {children}
+    </thead>
+  )
+}
+
+export type TbodyProps = React.ComponentProps<'tbody'>
+
+export const Tbody = (props: TbodyProps) => {
+  const { className, children, ...newprops } = props
+
+  return (
+    <tbody className={cx(className)} {...newprops}>
+      {children}
+    </tbody>
+  )
+}
+
+export type ThProps = React.ComponentProps<'th'>
+
+export const Th = (props: ThProps) => {
+  const { className, children, ...newprops } = props
+
+  const style = `
+    p-2
+    bg-sumi-100
+    text-left
+  `
+  return (
+    <th className={cx(style, styleBorder, className)} {...newprops}>
+      {children}
+    </th>
+  )
+}
+
+export type TrProps = React.ComponentProps<'tr'>
+
+export const Tr = (props: TrProps) => {
+  const { className, children, ...newprops } = props
+
+  const style = ``
+
+  return (
+    <tr className={cx(style, styleBorder, className)} {...newprops}>
+      {children}
+    </tr>
+  )
+}
+
+export type TdProps = React.ComponentProps<'td'>
+
+export const Td = (props: TdProps) => {
+  const { className, children, ...newprops } = props
+
+  const style = `
+    p-2
+  `
+
+  return (
+    <td className={cx(style, styleBorder, className)} {...newprops}>
+      {children}
+    </td>
+  )
+}

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type TextProps = React.ComponentPropsWithoutRef<'input'>
+
+export const Text = React.forwardRef<HTMLInputElement, TextProps>(
+  ({ ...props }, ref) => {
+    const { className, ...newProps } = props
+
+    const style = `
+    p-4
+    rounded-[4px]
+    border
+    border-solid
+    border-sumi-900
+    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
+  `
+
+    return (
+      <input
+        type="text"
+        className={cx(style, className)}
+        {...newProps}
+        ref={ref}
+      />
+    )
+  }
+)

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type TextareaProps = React.ComponentPropsWithoutRef<'textarea'>
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ ...props }, ref) => {
+    const { className, children, ...newProps } = props
+
+    const style = `
+    p-4
+    rounded-[12px]
+    border
+    border-solid
+    border-sumi-900
+    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
+  `
+
+    return (
+      <textarea className={cx(style, className)} {...newProps} ref={ref}>
+        {children}
+      </textarea>
+    )
+  }
+)

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

@@ -0,0 +1,15 @@
+export { Button } from './Button'
+export { Card } from './Card'
+export { Code } from './Code'
+export { H1, H2, H3, H4, H5, H6 } from './Heading'
+export { IconButton } from './IconButton'
+export { InfoCard } from './InfoCard'
+export { Link } from './Link'
+export { Ol, Ul } from './List'
+export { Pre } from './Pre'
+export { Radio } from './Radio'
+export { RadioGroup } from './RadioGroup'
+export { Select } from './Select'
+export { Table, Caption, Thead, Tbody, Th, Tr, Td } from './Table'
+export { Text } from './Text'
+export { Textarea } from './Textarea'

package/packages/react/src/index.ts

@@ -0,0 +1,29 @@
+export {
+  Button,
+  Card,
+  Code,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  IconButton,
+  InfoCard,
+  Link,
+  Ol,
+  Ul,
+  Pre,
+  Radio,
+  RadioGroup,
+  Select,
+  Table,
+  Caption,
+  Thead,
+  Tbody,
+  Th,
+  Tr,
+  Td,
+  Text,
+  Textarea
+} from './components'

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

@@ -0,0 +1 @@
+export const cx = (...classNames: any[]) => classNames.filter(Boolean).join(' ')

package/packages/react/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/packages/react/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/packages/react/vite.config.ts

@@ -0,0 +1,26 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import { peerDependencies } from './package.json'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src', 'index.ts'),
+      formats: ['es', 'cjs'],
+      fileName: (ext) => `index.${ext}.js`
+    },
+    rollupOptions: {
+      external: [...Object.keys(peerDependencies)]
+    },
+    target: 'esnext',
+    sourcemap: true
+  }
+})

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - 'packages/**'
+  - '!**/test/**'

package/src/components/Button.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type ButtonProps = React.ComponentPropsWithoutRef<'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, ...newProps } = props
+
+    const align = textAlign ?? 'center'
+
+    const style = `
+    inline-block
+    p-4
+    text-base
+    font-bold
+    rounded-lg
+    text-${align}
+    cursor-pointer
+    whitespace-nowrap
+  `
+
+    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}
+      >
+        {children}
+      </button>
+    )
+  }
+)

package/src/components/Card.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type Props = React.ComponentProps<'div'>
+
+export const Card = (props: Props) => {
+  const { className, children, ...newProps } = props
+
+  const style = `
+    bg-sumi-50
+    border
+    border-solid
+    border-sumi-900
+    rounded-[12px]
+    p-4
+  `
+  return (
+    <div className={cx(style, props.className)} {...newProps}>
+      {props.children}
+    </div>
+  )
+}

package/src/components/Code.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type CodeProps = React.ComponentProps<'code'>
+
+export const Code = (props: CodeProps) => {
+  const { className, children, ...newProps } = props
+
+  const style = `
+    bg-sumi-50
+    font-mono
+  `
+
+  return (
+    <code className={cx(style, className)} {...newProps}>
+      {children}
+    </code>
+  )
+}