@sakura-ui/sakura-ui 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -2
- package/examples/index.html +4 -3
- package/examples/package.json +25 -0
- package/examples/postcss.config.js +6 -0
- package/examples/public/vite.svg +1 -0
- package/examples/src/App.tsx +30 -0
- package/examples/src/main.css +3 -0
- package/examples/src/{index.tsx → main.tsx} +2 -3
- package/examples/src/vite-env.d.ts +1 -0
- package/examples/tailwind.config.js +9 -0
- package/examples/tsconfig.json +21 -0
- package/examples/tsconfig.node.json +9 -0
- package/examples/vite.config.ts +7 -0
- package/package.json +3 -3
- package/src/components/Button.tsx +0 -72
- package/src/components/Card.tsx +0 -22
- package/src/components/Code.tsx +0 -19
- package/src/components/Heading.tsx +0 -109
- package/src/components/IconButton.tsx +0 -71
- package/src/components/InfoCard.tsx +0 -36
- package/src/components/Link.tsx +0 -73
- package/src/components/List.tsx +0 -38
- package/src/components/Pre.tsx +0 -22
- package/src/components/Radio.tsx +0 -39
- package/src/components/RadioGroup.tsx +0 -38
- package/src/components/Select.tsx +0 -41
- package/src/components/Table.tsx +0 -111
- package/src/components/Text.tsx +0 -35
- package/src/components/Textarea.tsx +0 -32
- package/src/components/index.ts +0 -15
- package/src/configs/index.ts +0 -92
- package/src/index.ts +0 -59
- package/src/utils/index.ts +0 -1
package/README.md
CHANGED
|
@@ -3,11 +3,58 @@ Sakura UI - UI components built with Tailwind CSS for React.
|
|
|
3
3
|
|
|
4
4
|
## Install
|
|
5
5
|
```
|
|
6
|
-
$ npm install @
|
|
6
|
+
$ npm install @sakura-ui/sakura-ui
|
|
7
7
|
```
|
|
8
8
|
or
|
|
9
9
|
```
|
|
10
|
-
$ yarn add @
|
|
10
|
+
$ yarn add @sakura-ui/sakura-ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Configuration
|
|
14
|
+
tailwind.config.js
|
|
15
|
+
```
|
|
16
|
+
module.exports = {
|
|
17
|
+
mode: 'jit',
|
|
18
|
+
content: [
|
|
19
|
+
'./src/pages/**/*.{js,ts,jsx,tsx}',
|
|
20
|
+
'./node_modules/@sakura-ui/react/**/*.{js,ts,jsx,tsx}'
|
|
21
|
+
],
|
|
22
|
+
plugins: [require('@sakura-ui/config')]
|
|
23
|
+
}
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
```ts
|
|
28
|
+
import { useState } from 'react'
|
|
29
|
+
import { H1, H2, H3, H4, H5, H6, Button } from '@sakura-ui/react'
|
|
30
|
+
|
|
31
|
+
const App = () => {
|
|
32
|
+
const [count, setCount] = useState(0)
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<div>
|
|
36
|
+
<H1>SakuraUI Heading1</H1>
|
|
37
|
+
<H2>SakuraUI Heading2</H2>
|
|
38
|
+
<H3>SakuraUI Heading3</H3>
|
|
39
|
+
<H4>SakuraUI Heading4</H4>
|
|
40
|
+
<H5>SakuraUI Heading5</H5>
|
|
41
|
+
<H6>SakuraUI Heading6</H6>
|
|
42
|
+
<div>
|
|
43
|
+
<Button onClick={() => setCount((count) => count + 1)}>
|
|
44
|
+
count is {count}
|
|
45
|
+
</Button>
|
|
46
|
+
<Button
|
|
47
|
+
variant="secondary"
|
|
48
|
+
onClick={() => setCount((count) => count + 1)}
|
|
49
|
+
>
|
|
50
|
+
count is {count}
|
|
51
|
+
</Button>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export default App
|
|
11
58
|
```
|
|
12
59
|
|
|
13
60
|
## Standard Components
|
package/examples/index.html
CHANGED
|
@@ -2,12 +2,13 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<link rel="stylesheet" href="/src/main.css" />
|
|
5
7
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>
|
|
7
|
-
<link href="../../dist/style.css" rel="stylesheet" />
|
|
8
|
+
<title>Vite + React + TS</title>
|
|
8
9
|
</head>
|
|
9
10
|
<body>
|
|
10
11
|
<div id="root"></div>
|
|
11
|
-
<script type="module" src="
|
|
12
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
12
13
|
</body>
|
|
13
14
|
</html>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "examples",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"dev": "vite",
|
|
7
|
+
"build": "tsc && vite build",
|
|
8
|
+
"preview": "vite preview"
|
|
9
|
+
},
|
|
10
|
+
"dependencies": {
|
|
11
|
+
"@sakura-ui/sakura-ui": "workspace:^0.0.8",
|
|
12
|
+
"react": "^18.2.0",
|
|
13
|
+
"react-dom": "^18.2.0"
|
|
14
|
+
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"@types/react": "^18.0.27",
|
|
17
|
+
"@types/react-dom": "^18.0.10",
|
|
18
|
+
"@vitejs/plugin-react-swc": "^3.0.0",
|
|
19
|
+
"autoprefixer": "^10.4.13",
|
|
20
|
+
"postcss": "^8.4.21",
|
|
21
|
+
"tailwindcss": "^3.2.7",
|
|
22
|
+
"typescript": "^4.9.3",
|
|
23
|
+
"vite": "^4.1.4"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<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>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { useState } from 'react'
|
|
2
|
+
import { H1, H2, H3, H4, H5, H6, Button } from '@sakura-ui/react'
|
|
3
|
+
|
|
4
|
+
const App = () => {
|
|
5
|
+
const [count, setCount] = useState(0)
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<div>
|
|
9
|
+
<H1>SakuraUI Heading1</H1>
|
|
10
|
+
<H2>SakuraUI Heading2</H2>
|
|
11
|
+
<H3>SakuraUI Heading3</H3>
|
|
12
|
+
<H4>SakuraUI Heading4</H4>
|
|
13
|
+
<H5>SakuraUI Heading5</H5>
|
|
14
|
+
<H6>SakuraUI Heading6</H6>
|
|
15
|
+
<div>
|
|
16
|
+
<Button onClick={() => setCount((count) => count + 1)}>
|
|
17
|
+
count is {count}
|
|
18
|
+
</Button>
|
|
19
|
+
<Button
|
|
20
|
+
variant="secondary"
|
|
21
|
+
onClick={() => setCount((count) => count + 1)}
|
|
22
|
+
>
|
|
23
|
+
count is {count}
|
|
24
|
+
</Button>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export default App
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import ReactDOM from 'react-dom/client'
|
|
3
|
-
|
|
4
|
-
import { Button } from '../../src'
|
|
3
|
+
import App from './App'
|
|
5
4
|
|
|
6
5
|
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
|
7
6
|
<React.StrictMode>
|
|
8
|
-
<
|
|
7
|
+
<App />
|
|
9
8
|
</React.StrictMode>
|
|
10
9
|
)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="vite/client" />
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ESNext",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
|
6
|
+
"allowJs": false,
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
"esModuleInterop": false,
|
|
9
|
+
"allowSyntheticDefaultImports": true,
|
|
10
|
+
"strict": true,
|
|
11
|
+
"forceConsistentCasingInFileNames": true,
|
|
12
|
+
"module": "ESNext",
|
|
13
|
+
"moduleResolution": "Node",
|
|
14
|
+
"resolveJsonModule": true,
|
|
15
|
+
"isolatedModules": true,
|
|
16
|
+
"noEmit": true,
|
|
17
|
+
"jsx": "react-jsx"
|
|
18
|
+
},
|
|
19
|
+
"include": ["src"],
|
|
20
|
+
"references": [{ "path": "./tsconfig.node.json" }]
|
|
21
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sakura-ui/sakura-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.9",
|
|
4
4
|
"keywords": [],
|
|
5
5
|
"author": "glassonion1",
|
|
6
6
|
"homepage": "https://github.com/glassonion1/sakura-ui",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
},
|
|
11
11
|
"license": "MIT",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@sakura-ui/
|
|
14
|
-
"@sakura-ui/
|
|
13
|
+
"@sakura-ui/react": "0.0.1",
|
|
14
|
+
"@sakura-ui/config": "0.0.2"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": "^18.2.0",
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
|
|
5
|
-
variant?: 'primary' | 'secondary'
|
|
6
|
-
textAlign?: 'left' | 'right' | 'center'
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
10
|
-
(props, ref) => {
|
|
11
|
-
// Make sure that there is no problem even if className is specified on the side that uses the component
|
|
12
|
-
const { className, children, textAlign, variant, ...newProps } = props
|
|
13
|
-
|
|
14
|
-
const align = textAlign ?? 'center'
|
|
15
|
-
|
|
16
|
-
const style = `
|
|
17
|
-
inline-block
|
|
18
|
-
p-4
|
|
19
|
-
text-base
|
|
20
|
-
font-bold
|
|
21
|
-
rounded-lg
|
|
22
|
-
text-${align}
|
|
23
|
-
cursor-pointer
|
|
24
|
-
whitespace-nowrap
|
|
25
|
-
`
|
|
26
|
-
|
|
27
|
-
const primary = `
|
|
28
|
-
text-white-1000
|
|
29
|
-
bg-sea-600
|
|
30
|
-
hover:bg-sea-800
|
|
31
|
-
active:bg-sea-800
|
|
32
|
-
focus:outline
|
|
33
|
-
focus:outline-2
|
|
34
|
-
focus:outline-wood-500
|
|
35
|
-
disabled:bg-sumi-500
|
|
36
|
-
disabled:text-white-1000
|
|
37
|
-
disabled:border
|
|
38
|
-
disabled:border-solid
|
|
39
|
-
disabled:border-sumi-500
|
|
40
|
-
`
|
|
41
|
-
const secondary = `
|
|
42
|
-
border
|
|
43
|
-
border-solid
|
|
44
|
-
border-sea-600
|
|
45
|
-
hover:bg-sea-100
|
|
46
|
-
active:bg-sea-100
|
|
47
|
-
focus:outline
|
|
48
|
-
focus:outline-2
|
|
49
|
-
focus:outline-wood-500
|
|
50
|
-
disabled:bg-sumi-500
|
|
51
|
-
disabled:text-white-1000
|
|
52
|
-
disabled:border
|
|
53
|
-
disabled:border-solid
|
|
54
|
-
disabled:border-sumi-500
|
|
55
|
-
`
|
|
56
|
-
|
|
57
|
-
const styles = {
|
|
58
|
-
primary: primary,
|
|
59
|
-
secondary: secondary
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
return (
|
|
63
|
-
<button
|
|
64
|
-
className={cx(style, styles[variant ?? 'primary'], className)}
|
|
65
|
-
{...newProps}
|
|
66
|
-
ref={ref}
|
|
67
|
-
>
|
|
68
|
-
{children}
|
|
69
|
-
</button>
|
|
70
|
-
)
|
|
71
|
-
}
|
|
72
|
-
)
|
package/src/components/Card.tsx
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type Props = React.ComponentProps<'div'>
|
|
5
|
-
|
|
6
|
-
export const Card = (props: Props) => {
|
|
7
|
-
const { className, children, ...newProps } = props
|
|
8
|
-
|
|
9
|
-
const style = `
|
|
10
|
-
bg-sumi-50
|
|
11
|
-
border
|
|
12
|
-
border-solid
|
|
13
|
-
border-sumi-900
|
|
14
|
-
rounded-[12px]
|
|
15
|
-
p-4
|
|
16
|
-
`
|
|
17
|
-
return (
|
|
18
|
-
<div className={cx(style, props.className)} {...newProps}>
|
|
19
|
-
{props.children}
|
|
20
|
-
</div>
|
|
21
|
-
)
|
|
22
|
-
}
|
package/src/components/Code.tsx
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type CodeProps = React.ComponentProps<'code'>
|
|
5
|
-
|
|
6
|
-
export const Code = (props: CodeProps) => {
|
|
7
|
-
const { className, children, ...newProps } = props
|
|
8
|
-
|
|
9
|
-
const style = `
|
|
10
|
-
bg-sumi-50
|
|
11
|
-
font-mono
|
|
12
|
-
`
|
|
13
|
-
|
|
14
|
-
return (
|
|
15
|
-
<code className={cx(style, className)} {...newProps}>
|
|
16
|
-
{children}
|
|
17
|
-
</code>
|
|
18
|
-
)
|
|
19
|
-
}
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type HeadingProps = React.ComponentProps<'h1'>
|
|
5
|
-
|
|
6
|
-
const common = `
|
|
7
|
-
font-bold
|
|
8
|
-
`
|
|
9
|
-
|
|
10
|
-
export const H1 = (props: HeadingProps) => {
|
|
11
|
-
const { className, children, ...newProps } = props
|
|
12
|
-
|
|
13
|
-
const style = `
|
|
14
|
-
text-h1
|
|
15
|
-
mt-16
|
|
16
|
-
mb-6
|
|
17
|
-
`
|
|
18
|
-
|
|
19
|
-
return (
|
|
20
|
-
<h1 className={cx(common, style, props.className)} {...newProps}>
|
|
21
|
-
{props.children}
|
|
22
|
-
</h1>
|
|
23
|
-
)
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export const H2 = (props: HeadingProps) => {
|
|
27
|
-
// コンポーネントを使う側でclassNameを指定しても問題ないようにする
|
|
28
|
-
const { className, children, ...newProps } = props
|
|
29
|
-
|
|
30
|
-
const style = `
|
|
31
|
-
text-h2
|
|
32
|
-
mt-16
|
|
33
|
-
mb-6
|
|
34
|
-
`
|
|
35
|
-
|
|
36
|
-
return (
|
|
37
|
-
<h2 className={cx(common, style, props.className)} {...newProps}>
|
|
38
|
-
{props.children}
|
|
39
|
-
</h2>
|
|
40
|
-
)
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
export const H3 = (props: HeadingProps) => {
|
|
44
|
-
// コンポーネントを使う側でclassNameを指定しても問題ないようにする
|
|
45
|
-
const { className, children, ...newProps } = props
|
|
46
|
-
|
|
47
|
-
const style = `
|
|
48
|
-
text-h3
|
|
49
|
-
mt-10
|
|
50
|
-
mb-6
|
|
51
|
-
`
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
<h3 className={cx(common, style, props.className)} {...newProps}>
|
|
55
|
-
{props.children}
|
|
56
|
-
</h3>
|
|
57
|
-
)
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
export const H4 = (props: HeadingProps) => {
|
|
61
|
-
// コンポーネントを使う側でclassNameを指定しても問題ないようにする
|
|
62
|
-
const { className, children, ...newProps } = props
|
|
63
|
-
|
|
64
|
-
const style = `
|
|
65
|
-
text-h4
|
|
66
|
-
mt-10
|
|
67
|
-
mb-4
|
|
68
|
-
`
|
|
69
|
-
|
|
70
|
-
return (
|
|
71
|
-
<h4 className={cx(common, style, props.className)} {...newProps}>
|
|
72
|
-
{props.children}
|
|
73
|
-
</h4>
|
|
74
|
-
)
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export const H5 = (props: HeadingProps) => {
|
|
78
|
-
// コンポーネントを使う側でclassNameを指定しても問題ないようにする
|
|
79
|
-
const { className, children, ...newProps } = props
|
|
80
|
-
|
|
81
|
-
const style = `
|
|
82
|
-
text-h5
|
|
83
|
-
mt-10
|
|
84
|
-
mb-4
|
|
85
|
-
`
|
|
86
|
-
|
|
87
|
-
return (
|
|
88
|
-
<h5 className={cx(common, style, props.className)} {...newProps}>
|
|
89
|
-
{props.children}
|
|
90
|
-
</h5>
|
|
91
|
-
)
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
export const H6 = (props: HeadingProps) => {
|
|
95
|
-
// コンポーネントを使う側でclassNameを指定しても問題ないようにする
|
|
96
|
-
const { className, children, ...newProps } = props
|
|
97
|
-
|
|
98
|
-
const style = `
|
|
99
|
-
text-h6
|
|
100
|
-
mt-6
|
|
101
|
-
mb-4
|
|
102
|
-
`
|
|
103
|
-
|
|
104
|
-
return (
|
|
105
|
-
<h6 className={cx(common, style, props.className)} {...newProps}>
|
|
106
|
-
{props.children}
|
|
107
|
-
</h6>
|
|
108
|
-
)
|
|
109
|
-
}
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type IconButtonProps = React.ComponentProps<'button'> & {
|
|
5
|
-
variant?: 'primary' | 'secondary'
|
|
6
|
-
icon: string
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
|
|
10
|
-
(props, ref) => {
|
|
11
|
-
const { className, children, icon, variant, ...newProps } = props
|
|
12
|
-
|
|
13
|
-
const align = 'center'
|
|
14
|
-
|
|
15
|
-
const style = `
|
|
16
|
-
inline-block
|
|
17
|
-
p-4
|
|
18
|
-
text-base
|
|
19
|
-
font-bold
|
|
20
|
-
rounded-lg
|
|
21
|
-
text-${align}
|
|
22
|
-
cursor-pointer
|
|
23
|
-
`
|
|
24
|
-
|
|
25
|
-
const primary = `
|
|
26
|
-
text-white-1000
|
|
27
|
-
bg-sea-600
|
|
28
|
-
hover:bg-sea-800
|
|
29
|
-
active:bg-sea-800
|
|
30
|
-
focus:outline
|
|
31
|
-
focus:outline-2
|
|
32
|
-
focus:outline-wood-500
|
|
33
|
-
disabled:bg-sumi-500
|
|
34
|
-
disabled:text-white-1000
|
|
35
|
-
disabled:border
|
|
36
|
-
disabled:border-solid
|
|
37
|
-
disabled:border-sumi-500
|
|
38
|
-
`
|
|
39
|
-
const secondary = `
|
|
40
|
-
border
|
|
41
|
-
border-solid
|
|
42
|
-
border-sea-600
|
|
43
|
-
hover:bg-sea-100
|
|
44
|
-
active:bg-sea-100
|
|
45
|
-
focus:outline
|
|
46
|
-
focus:outline-2
|
|
47
|
-
focus:outline-wood-500
|
|
48
|
-
disabled:bg-sumi-500
|
|
49
|
-
disabled:text-white-1000
|
|
50
|
-
disabled:border
|
|
51
|
-
disabled:border-solid
|
|
52
|
-
disabled:border-sumi-500
|
|
53
|
-
`
|
|
54
|
-
|
|
55
|
-
const styles = {
|
|
56
|
-
primary: primary,
|
|
57
|
-
secondary: secondary
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
return (
|
|
61
|
-
<button
|
|
62
|
-
className={cx(style, styles[variant ?? 'primary'], className)}
|
|
63
|
-
{...newProps}
|
|
64
|
-
ref={ref}
|
|
65
|
-
>
|
|
66
|
-
<img src={`/icons/${props.icon}.svg`} alt={props.icon} width="24" />
|
|
67
|
-
{children}
|
|
68
|
-
</button>
|
|
69
|
-
)
|
|
70
|
-
}
|
|
71
|
-
)
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type Props = React.ComponentProps<'div'> & {
|
|
5
|
-
title?: string
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export const InfoCard = (props: Props) => {
|
|
9
|
-
const { className, children, ...newProps } = props
|
|
10
|
-
|
|
11
|
-
const style = `
|
|
12
|
-
bg-sumi-50
|
|
13
|
-
border-sumi-900
|
|
14
|
-
border
|
|
15
|
-
border-solid
|
|
16
|
-
rounded-[12px]
|
|
17
|
-
`
|
|
18
|
-
|
|
19
|
-
const topStyle = `
|
|
20
|
-
p-4
|
|
21
|
-
text-h5
|
|
22
|
-
font-bold
|
|
23
|
-
`
|
|
24
|
-
|
|
25
|
-
const bottmStyle = `
|
|
26
|
-
px-4
|
|
27
|
-
pb-4
|
|
28
|
-
`
|
|
29
|
-
|
|
30
|
-
return (
|
|
31
|
-
<div className={cx(style, props.className)} {...newProps}>
|
|
32
|
-
<h2 className={topStyle}>{props.title}</h2>
|
|
33
|
-
<p className={bottmStyle}>{props.children}</p>
|
|
34
|
-
</div>
|
|
35
|
-
)
|
|
36
|
-
}
|
package/src/components/Link.tsx
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type LinkProps = React.ComponentProps<'a'>
|
|
5
|
-
|
|
6
|
-
const getFileType = (url: string) => {
|
|
7
|
-
const converted = url.toLowerCase()
|
|
8
|
-
|
|
9
|
-
if (converted.endsWith('.pdf')) {
|
|
10
|
-
return 'PDF'
|
|
11
|
-
}
|
|
12
|
-
if (converted.endsWith('.doc') || converted.endsWith('.docx')) {
|
|
13
|
-
return 'Word'
|
|
14
|
-
}
|
|
15
|
-
if (converted.endsWith('.xls') || converted.endsWith('.xlsx')) {
|
|
16
|
-
return 'Excel'
|
|
17
|
-
}
|
|
18
|
-
if (converted.endsWith('.csv')) {
|
|
19
|
-
return 'CSV'
|
|
20
|
-
}
|
|
21
|
-
if (converted.endsWith('.json')) {
|
|
22
|
-
return 'JSON'
|
|
23
|
-
}
|
|
24
|
-
if (converted.endsWith('.ndjson')) {
|
|
25
|
-
return 'NDJSON'
|
|
26
|
-
}
|
|
27
|
-
if (converted.includes('youtu.be')) {
|
|
28
|
-
return 'YouTube'
|
|
29
|
-
}
|
|
30
|
-
return null
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export const Link = (props: LinkProps) => {
|
|
34
|
-
const { className, children, ...newProps } = props
|
|
35
|
-
const href = props.href ?? ''
|
|
36
|
-
const fileType = getFileType(href)
|
|
37
|
-
|
|
38
|
-
const style = `
|
|
39
|
-
rounded-sm
|
|
40
|
-
cursor-pointer
|
|
41
|
-
text-sea-600
|
|
42
|
-
underline
|
|
43
|
-
underline-offset-[0.1em]
|
|
44
|
-
hover:text-sea-800
|
|
45
|
-
active:text-sea-800
|
|
46
|
-
visited:text-sea-900
|
|
47
|
-
focus:outline
|
|
48
|
-
focus:outline-2
|
|
49
|
-
focus:outline-wood-500
|
|
50
|
-
disabled:border-sumi-500
|
|
51
|
-
`
|
|
52
|
-
|
|
53
|
-
if (href.startsWith('http')) {
|
|
54
|
-
return (
|
|
55
|
-
<a
|
|
56
|
-
className={cx(style, props.className)}
|
|
57
|
-
href={href}
|
|
58
|
-
target="_blank"
|
|
59
|
-
rel="noopener noreferrer"
|
|
60
|
-
{...newProps}
|
|
61
|
-
>
|
|
62
|
-
{props.children}
|
|
63
|
-
{fileType ? `（${fileType}）` : null}
|
|
64
|
-
</a>
|
|
65
|
-
)
|
|
66
|
-
}
|
|
67
|
-
return (
|
|
68
|
-
<a className={cx(style, props.className)} href={href} {...newProps}>
|
|
69
|
-
{props.children}
|
|
70
|
-
{fileType ? `（${fileType}）` : null}
|
|
71
|
-
</a>
|
|
72
|
-
)
|
|
73
|
-
}
|
package/src/components/List.tsx
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type UlProps = React.ComponentProps<'ul'>
|
|
5
|
-
|
|
6
|
-
export const Ul = (props: UlProps) => {
|
|
7
|
-
const { className, children, ...newprops } = props
|
|
8
|
-
|
|
9
|
-
const style = `
|
|
10
|
-
list-disc
|
|
11
|
-
list-inside
|
|
12
|
-
-indent-4
|
|
13
|
-
pl-4
|
|
14
|
-
`
|
|
15
|
-
return (
|
|
16
|
-
<ul className={cx(style, className)} {...newprops}>
|
|
17
|
-
{children}
|
|
18
|
-
</ul>
|
|
19
|
-
)
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export type OlProps = React.ComponentProps<'ol'>
|
|
23
|
-
|
|
24
|
-
export const Ol = (props: OlProps) => {
|
|
25
|
-
const { className, children, ...newprops } = props
|
|
26
|
-
|
|
27
|
-
const style = `
|
|
28
|
-
list-decimal
|
|
29
|
-
list-inside
|
|
30
|
-
-indent-4
|
|
31
|
-
pl-4
|
|
32
|
-
`
|
|
33
|
-
return (
|
|
34
|
-
<ol className={cx(style, className)} {...newprops}>
|
|
35
|
-
{children}
|
|
36
|
-
</ol>
|
|
37
|
-
)
|
|
38
|
-
}
|
package/src/components/Pre.tsx
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type PreProps = React.ComponentProps<'pre'>
|
|
5
|
-
|
|
6
|
-
export const Pre = (props: PreProps) => {
|
|
7
|
-
const { className, children, ...newProps } = props
|
|
8
|
-
|
|
9
|
-
const style = `
|
|
10
|
-
p-4
|
|
11
|
-
bg-sumi-50
|
|
12
|
-
rounded-lg
|
|
13
|
-
whitespace-pre-wrap
|
|
14
|
-
overflow-y-scroll
|
|
15
|
-
`
|
|
16
|
-
|
|
17
|
-
return (
|
|
18
|
-
<pre className={cx(style, className)} {...newProps}>
|
|
19
|
-
{children}
|
|
20
|
-
</pre>
|
|
21
|
-
)
|
|
22
|
-
}
|
package/src/components/Radio.tsx
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type Props = React.ComponentProps<'input'> & {}
|
|
5
|
-
|
|
6
|
-
export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
|
|
7
|
-
const { className, children, ...newProps } = props
|
|
8
|
-
|
|
9
|
-
const style = `
|
|
10
|
-
flex
|
|
11
|
-
items-center
|
|
12
|
-
text-sm
|
|
13
|
-
cursor-pointer
|
|
14
|
-
`
|
|
15
|
-
const styleInput = `
|
|
16
|
-
hidden
|
|
17
|
-
peer
|
|
18
|
-
`
|
|
19
|
-
|
|
20
|
-
const styleRadio = `
|
|
21
|
-
inline-block
|
|
22
|
-
bg-clip-content
|
|
23
|
-
w-6 h-6
|
|
24
|
-
mr-2
|
|
25
|
-
p-1
|
|
26
|
-
rounded-full
|
|
27
|
-
border
|
|
28
|
-
border-solid
|
|
29
|
-
border-sumi-900
|
|
30
|
-
peer-checked:bg-sea-600
|
|
31
|
-
`
|
|
32
|
-
return (
|
|
33
|
-
<label htmlFor={newProps.id} className={cx(style, className)}>
|
|
34
|
-
<input className={styleInput} type="radio" {...newProps} ref={ref} />
|
|
35
|
-
<span className={styleRadio}></span>
|
|
36
|
-
{children}
|
|
37
|
-
</label>
|
|
38
|
-
)
|
|
39
|
-
})
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { Radio } from './Radio'
|
|
3
|
-
|
|
4
|
-
interface Item {
|
|
5
|
-
label: string
|
|
6
|
-
value: string
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export interface RadioGroupProps {
|
|
10
|
-
name: string
|
|
11
|
-
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
|
|
12
|
-
items: Item[]
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export const RadioGroup = ({ name, items, onChange }: RadioGroupProps) => {
|
|
16
|
-
return (
|
|
17
|
-
<>
|
|
18
|
-
{items.map(({ label, value }, index) => {
|
|
19
|
-
const itemId = name + value
|
|
20
|
-
|
|
21
|
-
return (
|
|
22
|
-
<div key={index}>
|
|
23
|
-
<Radio
|
|
24
|
-
className="mb-6 ml-4"
|
|
25
|
-
id={itemId}
|
|
26
|
-
name={name}
|
|
27
|
-
value={value}
|
|
28
|
-
onChange={onChange}
|
|
29
|
-
defaultChecked={index === 0}
|
|
30
|
-
>
|
|
31
|
-
{label}
|
|
32
|
-
</Radio>
|
|
33
|
-
</div>
|
|
34
|
-
)
|
|
35
|
-
})}
|
|
36
|
-
</>
|
|
37
|
-
)
|
|
38
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type Props = React.ComponentPropsWithoutRef<'select'>
|
|
5
|
-
|
|
6
|
-
export const Select = React.forwardRef<HTMLSelectElement, Props>(
|
|
7
|
-
(props, ref) => {
|
|
8
|
-
const { className, children, ...newProps } = props
|
|
9
|
-
|
|
10
|
-
const style = `
|
|
11
|
-
block
|
|
12
|
-
appearance-none
|
|
13
|
-
w-full
|
|
14
|
-
bg-white-100
|
|
15
|
-
border
|
|
16
|
-
border-solid
|
|
17
|
-
border-sea-600
|
|
18
|
-
py-4 px-4 pr-8
|
|
19
|
-
rounded-[4px]
|
|
20
|
-
focus:outline
|
|
21
|
-
focus:outline-2
|
|
22
|
-
focus:outline-wood-500
|
|
23
|
-
`
|
|
24
|
-
return (
|
|
25
|
-
<div className="inline-block relative">
|
|
26
|
-
<select className={cx(style, props.className)} {...newProps} ref={ref}>
|
|
27
|
-
{props.children}
|
|
28
|
-
</select>
|
|
29
|
-
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
|
|
30
|
-
<svg
|
|
31
|
-
className="fill-current h-4 w-4"
|
|
32
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
33
|
-
viewBox="0 0 20 20"
|
|
34
|
-
>
|
|
35
|
-
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
|
|
36
|
-
</svg>
|
|
37
|
-
</div>
|
|
38
|
-
</div>
|
|
39
|
-
)
|
|
40
|
-
}
|
|
41
|
-
)
|
package/src/components/Table.tsx
DELETED
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type TableProps = React.ComponentProps<'table'>
|
|
5
|
-
|
|
6
|
-
const styleBorder = `
|
|
7
|
-
border
|
|
8
|
-
border-collapse
|
|
9
|
-
border-sumi-900
|
|
10
|
-
`
|
|
11
|
-
|
|
12
|
-
export const Table = (props: TableProps) => {
|
|
13
|
-
const { className, children, ...newprops } = props
|
|
14
|
-
|
|
15
|
-
// If there is no break-all setting, the table will protrude when using a smartphone
|
|
16
|
-
const style = `
|
|
17
|
-
w-full
|
|
18
|
-
table-auto
|
|
19
|
-
break-all
|
|
20
|
-
`
|
|
21
|
-
|
|
22
|
-
return (
|
|
23
|
-
<table className={cx(style, styleBorder, className)} {...newprops}>
|
|
24
|
-
{children}
|
|
25
|
-
</table>
|
|
26
|
-
)
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export type CaptionProps = React.ComponentProps<'caption'>
|
|
30
|
-
|
|
31
|
-
export const Caption = (props: CaptionProps) => {
|
|
32
|
-
const { className, children, ...newprops } = props
|
|
33
|
-
|
|
34
|
-
const style = `text-left`
|
|
35
|
-
return (
|
|
36
|
-
<caption className={cx(style, className)} {...newprops}>
|
|
37
|
-
{children}
|
|
38
|
-
</caption>
|
|
39
|
-
)
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export type TheadProps = React.ComponentProps<'thead'>
|
|
43
|
-
|
|
44
|
-
export const Thead = (props: TheadProps) => {
|
|
45
|
-
const { className, children, ...newprops } = props
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<thead className={cx(className)} {...newprops}>
|
|
49
|
-
{children}
|
|
50
|
-
</thead>
|
|
51
|
-
)
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
export type TbodyProps = React.ComponentProps<'tbody'>
|
|
55
|
-
|
|
56
|
-
export const Tbody = (props: TbodyProps) => {
|
|
57
|
-
const { className, children, ...newprops } = props
|
|
58
|
-
|
|
59
|
-
return (
|
|
60
|
-
<tbody className={cx(className)} {...newprops}>
|
|
61
|
-
{children}
|
|
62
|
-
</tbody>
|
|
63
|
-
)
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
export type ThProps = React.ComponentProps<'th'>
|
|
67
|
-
|
|
68
|
-
export const Th = (props: ThProps) => {
|
|
69
|
-
const { className, children, ...newprops } = props
|
|
70
|
-
|
|
71
|
-
const style = `
|
|
72
|
-
p-2
|
|
73
|
-
bg-sumi-100
|
|
74
|
-
text-left
|
|
75
|
-
`
|
|
76
|
-
return (
|
|
77
|
-
<th className={cx(style, styleBorder, className)} {...newprops}>
|
|
78
|
-
{children}
|
|
79
|
-
</th>
|
|
80
|
-
)
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
export type TrProps = React.ComponentProps<'tr'>
|
|
84
|
-
|
|
85
|
-
export const Tr = (props: TrProps) => {
|
|
86
|
-
const { className, children, ...newprops } = props
|
|
87
|
-
|
|
88
|
-
const style = ``
|
|
89
|
-
|
|
90
|
-
return (
|
|
91
|
-
<tr className={cx(style, styleBorder, className)} {...newprops}>
|
|
92
|
-
{children}
|
|
93
|
-
</tr>
|
|
94
|
-
)
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
export type TdProps = React.ComponentProps<'td'>
|
|
98
|
-
|
|
99
|
-
export const Td = (props: TdProps) => {
|
|
100
|
-
const { className, children, ...newprops } = props
|
|
101
|
-
|
|
102
|
-
const style = `
|
|
103
|
-
p-2
|
|
104
|
-
`
|
|
105
|
-
|
|
106
|
-
return (
|
|
107
|
-
<td className={cx(style, styleBorder, className)} {...newprops}>
|
|
108
|
-
{children}
|
|
109
|
-
</td>
|
|
110
|
-
)
|
|
111
|
-
}
|
package/src/components/Text.tsx
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type TextProps = React.ComponentPropsWithoutRef<'input'>
|
|
5
|
-
|
|
6
|
-
export const Text = React.forwardRef<HTMLInputElement, TextProps>(
|
|
7
|
-
({ ...props }, ref) => {
|
|
8
|
-
const { className, ...newProps } = props
|
|
9
|
-
|
|
10
|
-
const style = `
|
|
11
|
-
p-4
|
|
12
|
-
rounded-[4px]
|
|
13
|
-
border
|
|
14
|
-
border-solid
|
|
15
|
-
border-sumi-900
|
|
16
|
-
focus:outline
|
|
17
|
-
focus:outline-2
|
|
18
|
-
focus:outline-wood-500
|
|
19
|
-
disabled:bg-sumi-500
|
|
20
|
-
disabled:text-white-1000
|
|
21
|
-
disabled:border
|
|
22
|
-
disabled:border-solid
|
|
23
|
-
disabled:border-sumi-500
|
|
24
|
-
`
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<input
|
|
28
|
-
type="text"
|
|
29
|
-
className={cx(style, className)}
|
|
30
|
-
{...newProps}
|
|
31
|
-
ref={ref}
|
|
32
|
-
/>
|
|
33
|
-
)
|
|
34
|
-
}
|
|
35
|
-
)
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { cx } from '../utils'
|
|
3
|
-
|
|
4
|
-
export type TextareaProps = React.ComponentPropsWithoutRef<'textarea'>
|
|
5
|
-
|
|
6
|
-
export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
7
|
-
({ ...props }, ref) => {
|
|
8
|
-
const { className, children, ...newProps } = props
|
|
9
|
-
|
|
10
|
-
const style = `
|
|
11
|
-
p-4
|
|
12
|
-
rounded-[12px]
|
|
13
|
-
border
|
|
14
|
-
border-solid
|
|
15
|
-
border-sumi-900
|
|
16
|
-
focus:outline
|
|
17
|
-
focus:outline-2
|
|
18
|
-
focus:outline-wood-500
|
|
19
|
-
disabled:bg-sumi-500
|
|
20
|
-
disabled:text-white-1000
|
|
21
|
-
disabled:border
|
|
22
|
-
disabled:border-solid
|
|
23
|
-
disabled:border-sumi-500
|
|
24
|
-
`
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<textarea className={cx(style, className)} {...newProps} ref={ref}>
|
|
28
|
-
{children}
|
|
29
|
-
</textarea>
|
|
30
|
-
)
|
|
31
|
-
}
|
|
32
|
-
)
|
package/src/components/index.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export { Button } from './Button'
|
|
2
|
-
export { Card } from './Card'
|
|
3
|
-
export { Code } from './Code'
|
|
4
|
-
export { H1, H2, H3, H4, H5, H6 } from './Heading'
|
|
5
|
-
export { IconButton } from './IconButton'
|
|
6
|
-
export { InfoCard } from './InfoCard'
|
|
7
|
-
export { Link } from './Link'
|
|
8
|
-
export { Ol, Ul } from './List'
|
|
9
|
-
export { Pre } from './Pre'
|
|
10
|
-
export { Radio } from './Radio'
|
|
11
|
-
export { RadioGroup } from './RadioGroup'
|
|
12
|
-
export { Select } from './Select'
|
|
13
|
-
export { Table, Caption, Thead, Tbody, Th, Tr, Td } from './Table'
|
|
14
|
-
export { Text } from './Text'
|
|
15
|
-
export { Textarea } from './Textarea'
|
package/src/configs/index.ts
DELETED
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
export const extend = {
|
|
2
|
-
fontSize: {
|
|
3
|
-
h1: ['42px', '42px'],
|
|
4
|
-
h2: ['32px', '32px'],
|
|
5
|
-
h3: ['26px', '26px'],
|
|
6
|
-
h4: ['22px', '22px'],
|
|
7
|
-
h5: ['20px', '20px'],
|
|
8
|
-
h6: ['18px', '18px'],
|
|
9
|
-
base: ['16px', '28px'],
|
|
10
|
-
code: ['16px', '24px'],
|
|
11
|
-
sm: ['14px', '24px'],
|
|
12
|
-
xs: ['12px', '20px']
|
|
13
|
-
},
|
|
14
|
-
colors: {
|
|
15
|
-
white: {
|
|
16
|
-
1000: '#FFFFFF'
|
|
17
|
-
},
|
|
18
|
-
sea: {
|
|
19
|
-
900: '#0017B6',
|
|
20
|
-
800: '#0024CE',
|
|
21
|
-
700: '#0031D8',
|
|
22
|
-
600: '#003EE5',
|
|
23
|
-
500: '#0946F1',
|
|
24
|
-
400: '#4979F5',
|
|
25
|
-
300: '#7096F8',
|
|
26
|
-
200: '#9DB7F9',
|
|
27
|
-
100: '#C5D7FB',
|
|
28
|
-
50: '#E8F1FE'
|
|
29
|
-
},
|
|
30
|
-
sumi: {
|
|
31
|
-
900: '#1A1A1C',
|
|
32
|
-
800: '#414143',
|
|
33
|
-
700: '#626264',
|
|
34
|
-
600: '#757578',
|
|
35
|
-
500: '#949497',
|
|
36
|
-
400: '#B4B4B7',
|
|
37
|
-
300: '#D8D8DB',
|
|
38
|
-
200: '#E8E8EB',
|
|
39
|
-
100: '#F1F1F4',
|
|
40
|
-
50: '#F8F8FB'
|
|
41
|
-
},
|
|
42
|
-
forest: {
|
|
43
|
-
900: '#115A36',
|
|
44
|
-
800: '#197A4B',
|
|
45
|
-
700: '#1D8B56',
|
|
46
|
-
600: '#259D63',
|
|
47
|
-
500: '#2CAC6E',
|
|
48
|
-
400: '#51B883',
|
|
49
|
-
300: '#71C598',
|
|
50
|
-
200: '#9BD4B5',
|
|
51
|
-
100: '#C2E5D1',
|
|
52
|
-
50: '#E6F5Ec'
|
|
53
|
-
},
|
|
54
|
-
wood: {
|
|
55
|
-
900: '#B65200',
|
|
56
|
-
800: '#C16800',
|
|
57
|
-
700: '#C87504',
|
|
58
|
-
600: '#CD820A',
|
|
59
|
-
500: '#D18D0F',
|
|
60
|
-
400: '#D69C2B',
|
|
61
|
-
300: '#DCAC4D',
|
|
62
|
-
200: '#E5C47f',
|
|
63
|
-
100: '#EFDBB1',
|
|
64
|
-
50: '#F8F1E0'
|
|
65
|
-
},
|
|
66
|
-
sun: {
|
|
67
|
-
900: '#D50000',
|
|
68
|
-
800: '#EC0000',
|
|
69
|
-
700: '#FA1606',
|
|
70
|
-
600: '#FF220D',
|
|
71
|
-
500: '#FF4B36',
|
|
72
|
-
400: '#FF5838',
|
|
73
|
-
300: '#FF7B5C',
|
|
74
|
-
200: '#FFA28B',
|
|
75
|
-
100: '#FFC8B8',
|
|
76
|
-
50: '#FFE7E6'
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
fontFamily: {
|
|
80
|
-
sans: [
|
|
81
|
-
'Noto Sans JP',
|
|
82
|
-
'-apple-system',
|
|
83
|
-
'blinkmacsystemfont',
|
|
84
|
-
'Segoe UI',
|
|
85
|
-
'Hiragino Kaku Gothic ProN',
|
|
86
|
-
'BIZ UDPGothic',
|
|
87
|
-
'meiryo',
|
|
88
|
-
'sans-serif'
|
|
89
|
-
],
|
|
90
|
-
code: ['Monaco', 'Menlo', 'Consolas', 'Courier New', 'monospace']
|
|
91
|
-
}
|
|
92
|
-
}
|
package/src/index.ts
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { extend } from './configs'
|
|
2
|
-
|
|
3
|
-
interface Config {
|
|
4
|
-
[prop: string]: any
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
//const content = ``
|
|
8
|
-
|
|
9
|
-
export const sakuraConfig = (userConfig = {}) => {
|
|
10
|
-
const newConfig: Config = {
|
|
11
|
-
...userConfig,
|
|
12
|
-
theme: {
|
|
13
|
-
extend: extend
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
/*
|
|
17
|
-
if (!newConfig.content) {
|
|
18
|
-
newConfig.content = [content]
|
|
19
|
-
} else if (Array.isArray(newConfig.content)) {
|
|
20
|
-
newConfig.content = [...newConfig.content, content]
|
|
21
|
-
} else if (newConfig.content.files) {
|
|
22
|
-
newConfig.content.files = [...newConfig.content.files, content]
|
|
23
|
-
} else if (!newConfig.content.files) {
|
|
24
|
-
newConfig.content.files = [content]
|
|
25
|
-
}
|
|
26
|
-
*/
|
|
27
|
-
|
|
28
|
-
return newConfig
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export {
|
|
32
|
-
Button,
|
|
33
|
-
Card,
|
|
34
|
-
Code,
|
|
35
|
-
H1,
|
|
36
|
-
H2,
|
|
37
|
-
H3,
|
|
38
|
-
H4,
|
|
39
|
-
H5,
|
|
40
|
-
H6,
|
|
41
|
-
IconButton,
|
|
42
|
-
InfoCard,
|
|
43
|
-
Link,
|
|
44
|
-
Ol,
|
|
45
|
-
Ul,
|
|
46
|
-
Pre,
|
|
47
|
-
Radio,
|
|
48
|
-
RadioGroup,
|
|
49
|
-
Select,
|
|
50
|
-
Table,
|
|
51
|
-
Caption,
|
|
52
|
-
Thead,
|
|
53
|
-
Tbody,
|
|
54
|
-
Th,
|
|
55
|
-
Tr,
|
|
56
|
-
Td,
|
|
57
|
-
Text,
|
|
58
|
-
Textarea
|
|
59
|
-
} from './components'
|
package/src/utils/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const cx = (...classNames: any[]) => classNames.filter(Boolean).join(' ')
|