@sakura-ui/sakura-ui 0.0.1

package/packages/config/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@sakura-ui/config",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "run-p build:*",
+    "build:scripts": "vite build",
+    "build:types": "tsc --emitDeclarationOnly",
+    "test": "jest"
+  },
+  "keywords": [],
+  "author": "glassonion1",
+  "homepage": "https://github.com/glassonion1/sakura-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
+    "directory": "packages/config"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "tailwindcss": "^3.2.7"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.4.0",
+    "@types/node": "^18.14.1",
+    "autoprefixer": "^10.4.13",
+    "jest": "^29.4.3",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
+    "ts-jest": "^29.0.5",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
+  }
+}

package/packages/config/src/index.ts

@@ -0,0 +1,100 @@
+import plugin from 'tailwindcss/plugin'
+
+const sakuraPlugin = plugin(() => {}, {
+  theme: {
+    extend: {
+      fontSize: {
+        h1: ['42px', '42px'],
+        h2: ['32px', '32px'],
+        h3: ['26px', '26px'],
+        h4: ['22px', '22px'],
+        h5: ['20px', '20px'],
+        h6: ['18px', '18px'],
+        base: ['16px', '28px'],
+        code: ['16px', '24px'],
+        sm: ['14px', '24px'],
+        xs: ['12px', '20px']
+      },
+      colors: {
+        white: {
+          1000: '#FFFFFF'
+        },
+        sea: {
+          900: '#0017B6',
+          800: '#0024CE',
+          700: '#0031D8',
+          600: '#003EE5',
+          500: '#0946F1',
+          400: '#4979F5',
+          300: '#7096F8',
+          200: '#9DB7F9',
+          100: '#C5D7FB',
+          50: '#E8F1FE'
+        },
+        sumi: {
+          900: '#1A1A1C',
+          800: '#414143',
+          700: '#626264',
+          600: '#757578',
+          500: '#949497',
+          400: '#B4B4B7',
+          300: '#D8D8DB',
+          200: '#E8E8EB',
+          100: '#F1F1F4',
+          50: '#F8F8FB'
+        },
+        forest: {
+          900: '#115A36',
+          800: '#197A4B',
+          700: '#1D8B56',
+          600: '#259D63',
+          500: '#2CAC6E',
+          400: '#51B883',
+          300: '#71C598',
+          200: '#9BD4B5',
+          100: '#C2E5D1',
+          50: '#E6F5Ec'
+        },
+        wood: {
+          900: '#B65200',
+          800: '#C16800',
+          700: '#C87504',
+          600: '#CD820A',
+          500: '#D18D0F',
+          400: '#D69C2B',
+          300: '#DCAC4D',
+          200: '#E5C47f',
+          100: '#EFDBB1',
+          50: '#F8F1E0'
+        },
+        sun: {
+          900: '#D50000',
+          800: '#EC0000',
+          700: '#FA1606',
+          600: '#FF220D',
+          500: '#FF4B36',
+          400: '#FF5838',
+          300: '#FF7B5C',
+          200: '#FFA28B',
+          100: '#FFC8B8',
+          50: '#FFE7E6'
+        }
+      },
+      fontFamily: {
+        sans: [
+          'Noto Sans JP',
+          '-apple-system',
+          'blinkmacsystemfont',
+          'Segoe UI',
+          'Hiragino Kaku Gothic ProN',
+          'BIZ UDPGothic',
+          'meiryo',
+          'sans-serif'
+        ],
+        code: ['Monaco', 'Menlo', 'Consolas', 'Courier New', 'monospace']
+      }
+    }
+  }
+})
+
+export default sakuraPlugin

package/packages/config/tests/index.test.ts

@@ -0,0 +1,13 @@
+import sakuraPlugin from '../src'
+
+describe('run tests', () => {
+  it('tests the sakuraCOnfig', () => {
+    const config = {
+      mode: 'jit',
+      content: ['./src/components/**/*.{js,ts,jsx,tsx}'],
+      plugins: [sakuraPlugin]
+    }
+    console.log(config)
+    expect(1 + 2).toBe(3)
+  })
+})

package/packages/config/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["src"]
+}

package/packages/config/vite.config.ts

@@ -0,0 +1,24 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import { peerDependencies } from './package.json'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  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/packages/react/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@sakura-ui/react",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p build:*",
+    "build:scripts": "vite build",
+    "build:types": "tsc --emitDeclarationOnly && tsc-alias",
+    "test": "jest"
+  },
+  "keywords": [],
+  "author": "glassonion1",
+  "homepage": "https://github.com/glassonion1/sakura-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
+    "directory": "packages/react"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.2.7"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.4.0",
+    "@types/node": "^18.14.1",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "autoprefixer": "^10.4.13",
+    "jest": "^29.4.3",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.2.7",
+    "ts-jest": "^29.0.5",
+    "ts-node": "^10.9.1",
+    "tsc-alias": "^1.8.2",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
+  }
+}

package/packages/react/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/packages/react/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/packages/react/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>
+  )
+}

package/packages/react/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/packages/react/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/packages/react/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/packages/react/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>
+  )
+}