@sakura-ui/sakura-ui 0.0.1

package/src/components/Heading.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type HeadingProps = React.ComponentProps<'h1'>
+
+const common = `
+    font-bold
+`
+
+export const H1 = (props: HeadingProps) => {
+  const { className, children, ...newProps } = props
+
+  const style = `
+    text-h1
+    mt-16
+    mb-6
+  `
+
+  return (
+    <h1 className={cx(common, style, props.className)} {...newProps}>
+      {props.children}
+    </h1>
+  )
+}
+
+export const H2 = (props: HeadingProps) => {
+  // コンポーネントを使う側でclassNameを指定しても問題ないようにする
+  const { className, children, ...newProps } = props
+
+  const style = `
+    text-h2
+    mt-16
+    mb-6
+  `
+
+  return (
+    <h2 className={cx(common, style, props.className)} {...newProps}>
+      {props.children}
+    </h2>
+  )
+}
+
+export const H3 = (props: HeadingProps) => {
+  // コンポーネントを使う側でclassNameを指定しても問題ないようにする
+  const { className, children, ...newProps } = props
+
+  const style = `
+    text-h3
+    mt-10
+    mb-6
+  `
+
+  return (
+    <h3 className={cx(common, style, props.className)} {...newProps}>
+      {props.children}
+    </h3>
+  )
+}
+
+export const H4 = (props: HeadingProps) => {
+  // コンポーネントを使う側でclassNameを指定しても問題ないようにする
+  const { className, children, ...newProps } = props
+
+  const style = `
+    text-h4
+    mt-10
+    mb-4
+  `
+
+  return (
+    <h4 className={cx(common, style, props.className)} {...newProps}>
+      {props.children}
+    </h4>
+  )
+}
+
+export const H5 = (props: HeadingProps) => {
+  // コンポーネントを使う側でclassNameを指定しても問題ないようにする
+  const { className, children, ...newProps } = props
+
+  const style = `
+    text-h5
+    mt-10
+    mb-4
+  `
+
+  return (
+    <h5 className={cx(common, style, props.className)} {...newProps}>
+      {props.children}
+    </h5>
+  )
+}
+
+export const H6 = (props: HeadingProps) => {
+  // コンポーネントを使う側でclassNameを指定しても問題ないようにする
+  const { className, children, ...newProps } = props
+
+  const style = `
+    text-h6
+    mt-6
+    mb-4
+  `
+
+  return (
+    <h6 className={cx(common, style, props.className)} {...newProps}>
+      {props.children}
+    </h6>
+  )
+}

package/src/components/IconButton.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type IconButtonProps = 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 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}
+      >
+        <img src={`/icons/${props.icon}.svg`} alt={props.icon} width="24" />
+        {children}
+      </button>
+    )
+  }
+)

package/src/components/InfoCard.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type Props = React.ComponentProps<'div'> & {
+  title?: string
+}
+
+export const InfoCard = (props: Props) => {
+  const { className, children, ...newProps } = props
+
+  const style = `
+    bg-sumi-50
+    border-sumi-900
+    border
+    border-solid
+    rounded-[12px]
+  `
+
+  const topStyle = `
+    p-4
+    text-h5
+    font-bold
+  `
+
+  const bottmStyle = `
+    px-4
+    pb-4
+  `
+
+  return (
+    <div className={cx(style, props.className)} {...newProps}>
+      <h2 className={topStyle}>{props.title}</h2>
+      <p className={bottmStyle}>{props.children}</p>
+    </div>
+  )
+}

package/src/components/Link.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export type LinkProps = React.ComponentProps<'a'>
+
+const getFileType = (url: string) => {
+  const converted = url.toLowerCase()
+
+  if (converted.endsWith('.pdf')) {
+    return 'PDF'
+  }
+  if (converted.endsWith('.doc') || converted.endsWith('.docx')) {
+    return 'Word'
+  }
+  if (converted.endsWith('.xls') || converted.endsWith('.xlsx')) {
+    return 'Excel'
+  }
+  if (converted.endsWith('.csv')) {
+    return 'CSV'
+  }
+  if (converted.endsWith('.json')) {
+    return 'JSON'
+  }
+  if (converted.endsWith('.ndjson')) {
+    return 'NDJSON'
+  }
+  if (converted.includes('youtu.be')) {
+    return 'YouTube'
+  }
+  return null
+}
+
+export const Link = (props: LinkProps) => {
+  const { className, children, ...newProps } = props
+  const href = props.href ?? ''
+  const fileType = getFileType(href)
+
+  const style = `
+    rounded-sm
+    cursor-pointer
+    text-sea-600
+    underline
+    underline-offset-[0.1em]
+    hover:text-sea-800
+    active:text-sea-800
+    visited:text-sea-900
+    focus:outline
+    focus:outline-2
+    focus:outline-wood-500
+    disabled:border-sumi-500
+  `
+
+  if (href.startsWith('http')) {
+    return (
+      <a
+        className={cx(style, props.className)}
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        {...newProps}
+      >
+        {props.children}
+        {fileType ? `（${fileType}）` : null}
+      </a>
+    )
+  }
+  return (
+    <a className={cx(style, props.className)} href={href} {...newProps}>
+      {props.children}
+      {fileType ? `（${fileType}）` : null}
+    </a>
+  )
+}

package/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/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/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/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/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/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/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/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/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'