@sakura-ui/sakura-ui 0.0.11 → 0.0.13

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

@@ -0,0 +1,94 @@
+import React from 'react'
+import { cx } from '../utils'
+
+export interface IconButtonProps extends React.ComponentProps<'button'> {
+  variant?: 'primary' | 'secondary'
+  iconLayout?: 'left' | 'right'
+  icon: string
+}
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props, ref) => {
+    const { className, children, variant, icon, iconLayout, ...newProps } =
+      props
+
+    const layout = iconLayout ?? 'left'
+
+    const align = 'center'
+
+    const style = `
+    inline-block
+    p-4
+    text-base
+    font-bold
+    rounded-lg
+    text-${align}
+    cursor-pointer
+    whitespace-nowrap
+  `
+
+    const primary = `
+    text-white-1000
+    border
+    border-solid
+    border-sea-600
+    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
+    disabled:cursor-not-allowed
+  `
+    const secondary = `
+    text-sea-600
+    border
+    border-solid
+    border-sea-600
+    hover:bg-sea-100
+    active:bg-sea-100
+    focus:outline
+    focus:outline-2
+    focus:outline-wood-500
+    disabled:hover:bg-white-1000
+    disabled:text-sumi-500
+    disabled:border
+    disabled:border-solid
+    disabled:border-sumi-500
+    disabled:cursor-not-allowed
+  `
+
+    const styles = {
+      primary: primary,
+      secondary: secondary
+    }
+
+    const iconStyle = `
+    inline-block
+    align-middle
+    font-icon
+    text-2xl
+    font-light
+    leading-4
+    antialiased
+    mb-1
+    `
+
+    return (
+      <button
+        className={cx(style, styles[variant ?? 'primary'], className)}
+        {...newProps}
+        ref={ref}
+      >
+        {layout == 'left' && <span className={cx(iconStyle)}>{icon}</span>}
+        {children && <span className="mx-1 inline-block">{children}</span>}
+        {layout == 'right' && <span className={cx(iconStyle)}>{icon}</span>}
+      </button>
+    )
+  }
+)

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

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton'
+export { Icon } from './Icon'

package/packages/icons/src/index.ts

@@ -0,0 +1 @@
+export { Icon, IconButton } from './components'

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

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

package/{examples → packages/icons}/tsconfig.json

@@ -13,8 +13,14 @@
     "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

package/packages/icons/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/packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

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

@@ -26,6 +26,9 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     const primary = `
     text-white-1000
+    border
+    border-solid
+    border-sea-600
     bg-sea-600
     hover:bg-sea-800
     active:bg-sea-800

package/.prettierrc

@@ -1,21 +0,0 @@
-{
-  "tabWidth": 2,
-  "singleQuote": true,
-  "jsxSingleQuote": false,
-  "trailingComma": "none",
-  "semi": false,
-  "overrides": [
-    {
-      "files": ["*.md", "README"],
-      "options": {
-        "parser": "markdown-nocjsp"
-      }
-    },
-    {
-      "files": ["*.mdx"],
-      "options": {
-        "parser": "mdx-nocjsp"
-      }
-    }
-  ]
-}

package/examples/README.md

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

package/examples/index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="/src/main.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/examples/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "examples",
-  "private": true,
-  "version": "0.0.0",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@sakura-ui/sakura-ui": "workspace:^0.0.10",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react-swc": "^3.0.0",
-    "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.7",
-    "typescript": "^4.9.3",
-    "vite": "^4.1.4"
-  }
-}

package/examples/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

package/examples/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/examples/src/App.tsx

@@ -1,56 +0,0 @@
-import { useState } from '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 className="text-sumi-900 text-base">
-      <H1>SakuraUI Heading1</H1>
-      <H2>SakuraUI Heading2</H2>
-      <H3>SakuraUI Heading3</H3>
-      <H4>SakuraUI Heading4</H4>
-      <H5>SakuraUI Heading5</H5>
-      <H6>SakuraUI Heading6</H6>
-      <div>
-        <Button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </Button>
-        <Button
-          variant="secondary"
-          onClick={() => setCount((count) => count + 1)}
-        >
-          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>
-  )
-}
-
-export default App

package/examples/src/main.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/examples/src/main.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)

package/examples/tailwind.config.js

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

package/examples/vite.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})

package/pnpm-workspace.yaml

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