b44ui 0.0.1
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/Markdown.tsx +31 -0
- package/cn.ts +4 -0
- package/comps.tsx +33 -0
- package/example/index.html +12 -0
- package/example/package.json +22 -0
- package/example/src/App.tsx +58 -0
- package/example/src/index.css +3 -0
- package/example/src/main.tsx +5 -0
- package/example/tsconfig.json +12 -0
- package/example/vite.config.ts +7 -0
- package/index.ts +3 -0
- package/package.json +21 -0
- package/tailwind.css +21 -0
- package/tsconfig.json +14 -0
package/Markdown.tsx
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { useMemo } from "react"
|
|
2
|
+
import { Marked } from "marked"
|
|
3
|
+
import { markedHighlight } from "marked-highlight"
|
|
4
|
+
import hljs from "highlight.js"
|
|
5
|
+
import cn from "./cn"
|
|
6
|
+
|
|
7
|
+
const marked = new Marked(markedHighlight({ langPrefix: "hljs language-", highlight: c => hljs.highlightAuto(c).value }))
|
|
8
|
+
|
|
9
|
+
const css = `.ui-markdown { line-height: 1.6; }
|
|
10
|
+
.ui-markdown h1, .ui-markdown h2, .ui-markdown h3 { font-weight: 700; margin: 1em 0 0.5em; }
|
|
11
|
+
.ui-markdown h1 { font-size: 1.5em; }
|
|
12
|
+
.ui-markdown h2 { font-size: 1.25em; }
|
|
13
|
+
.ui-markdown h3 { font-size: 1.1em; }
|
|
14
|
+
.ui-markdown p { margin: 0.5em 0; }
|
|
15
|
+
.ui-markdown pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.75em 0; }
|
|
16
|
+
.ui-markdown code { font-family: ui-monospace, monospace; font-size: 0.9em; padding: 4px; }
|
|
17
|
+
.ui-markdown :not(pre) > code { background: #1a1a2e; padding: 2px 5px; border-radius: 3px; }
|
|
18
|
+
.ui-markdown ul, .ui-markdown ol { padding-left: 1.5em; margin: 0.5em 0; }
|
|
19
|
+
.ui-markdown blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.5em 0; }
|
|
20
|
+
.ui-markdown a { color: #93c5fd; text-decoration: underline; }
|
|
21
|
+
.ui-markdown table { border-collapse: collapse; margin: 0.75em 0; }
|
|
22
|
+
.ui-markdown th, .ui-markdown td { border: 1px solid #333; padding: 6px 12px; }
|
|
23
|
+
.ui-markdown img { max-width: 100%; border-radius: 6px; }`
|
|
24
|
+
|
|
25
|
+
let injected = false
|
|
26
|
+
|
|
27
|
+
export const Md = ({ children, className }: { children: string, className?: string }) => {
|
|
28
|
+
const html = useMemo(() => marked.parse(children, { async: false }) as string, [children])
|
|
29
|
+
if (!injected) { injected = true; document.head.insertAdjacentHTML('beforeend', `<style>${css}</style>`) }
|
|
30
|
+
return <div className={cn("ui-markdown", className)} dangerouslySetInnerHTML={{ __html: html }} />
|
|
31
|
+
}
|
package/cn.ts
ADDED
package/comps.tsx
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { type ReactNode, Children } from "react"
|
|
2
|
+
import CN from "./cn"
|
|
3
|
+
import { Md } from "./Markdown"
|
|
4
|
+
|
|
5
|
+
export type DProps = { children?: ReactNode, cn?: any, style?: React.CSSProperties }
|
|
6
|
+
export const D = ({ children, cn, style }: DProps) =>
|
|
7
|
+
<div className={CN(cn)} style={style}>{children}</div>
|
|
8
|
+
|
|
9
|
+
export const App = ({ children, center = true, width, cn }: DProps & { center?: boolean, width?: number }) => {
|
|
10
|
+
const inner = Children.map(children, c => typeof c == 'string' ? <Md>{c.trim()}</Md> : c)
|
|
11
|
+
|
|
12
|
+
return <D cn={["min-h-screen w-full bg-[#111] text-[#eee] font-[Inter]", center && "flex justify-center items-center", cn]}>
|
|
13
|
+
{center ? <div className="max-w-full px-6 py-12 space-y-6" style={{ width }}>{inner}</div> : inner}
|
|
14
|
+
</D>
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const Centered = ({ children, cn, width = 700 }: DProps & { width?: number }) =>
|
|
18
|
+
<D cn={["mx-auto max-w-full px-6", cn]} style={{ width }}>{children}</D>
|
|
19
|
+
|
|
20
|
+
export const Block = ({ label, children, row, dashed, cn }: DProps & { label?: ReactNode, row?: boolean, dashed?: boolean }) =>
|
|
21
|
+
<D cn={["rounded p-4 flex flex-col items-center gap-2", dashed && "border border-dashed border-zinc-700", cn]}>
|
|
22
|
+
{label && <span className="opacity-75">{label}</span>}
|
|
23
|
+
<div className={CN(row ? "flex-row" : "flex-col", "flex items-center gap-2")}>{children}</div>
|
|
24
|
+
</D>
|
|
25
|
+
|
|
26
|
+
export const BlockSm = ({ children, dashed, cn }: DProps & { dashed?: boolean }) =>
|
|
27
|
+
<D cn={["rounded px-3 py-2 text-sm", dashed && "border border-dashed border-zinc-700", cn]}>{children}</D>
|
|
28
|
+
|
|
29
|
+
export const Chip = ({ children, cn }: DProps) =>
|
|
30
|
+
<D cn={["bg-zinc-800 rounded px-3 py-1 text-sm", cn]}>{children}</D>
|
|
31
|
+
|
|
32
|
+
export const Grid = ({ children, cols, cn }: { children: ReactNode, cols?: number, cn?: string }) =>
|
|
33
|
+
<D cn={["grid gap-4", cn]} style={{ gridTemplateColumns: `repeat(${cols ?? Children.count(children)}, 1fr)` }}>{children}</D>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>ui kitchen sink</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="root"></div>
|
|
10
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "ui-kitchen-sink",
|
|
3
|
+
"private": true,
|
|
4
|
+
"type": "module",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"dev": "vite"
|
|
7
|
+
},
|
|
8
|
+
"dependencies": {
|
|
9
|
+
"react": "^19.0.0",
|
|
10
|
+
"react-dom": "^19.0.0",
|
|
11
|
+
"ui": "file:.."
|
|
12
|
+
},
|
|
13
|
+
"devDependencies": {
|
|
14
|
+
"@types/react": "^19.0.0",
|
|
15
|
+
"@types/react-dom": "^19.0.0",
|
|
16
|
+
"@tailwindcss/vite": "^4.0.0",
|
|
17
|
+
"tailwindcss": "^4.0.0",
|
|
18
|
+
"typescript": "^5.7.0",
|
|
19
|
+
"vite": "^6.0.0",
|
|
20
|
+
"@vitejs/plugin-react": "^4.3.0"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { App, Block, BlockSm, Chip, Grid } from "ui"
|
|
2
|
+
|
|
3
|
+
export default () => <App>
|
|
4
|
+
{`
|
|
5
|
+
# ui kitchen sink
|
|
6
|
+
|
|
7
|
+
source: [github/b44ken/ui](https://github.com/b44ken/ui)
|
|
8
|
+
|
|
9
|
+
## \\<App center marked\\>
|
|
10
|
+
wraps the page in a centered column (700px) with dark theme. string children are rendered as markdown.
|
|
11
|
+
|
|
12
|
+
## \\<Block\\> and \\<BlockSm\\>
|
|
13
|
+
`}
|
|
14
|
+
<Grid cols={2}>
|
|
15
|
+
<BlockSm>blocks! this is a small block</BlockSm>
|
|
16
|
+
<BlockSm dashed>which can be dashed</BlockSm>
|
|
17
|
+
<Block>this is a normal sized block</Block>
|
|
18
|
+
<Block dashed>and a normal sized dashed block</Block>
|
|
19
|
+
</Grid>
|
|
20
|
+
|
|
21
|
+
## Block with labels and row layout
|
|
22
|
+
<Block label="labeled block" dashed>
|
|
23
|
+
some content here
|
|
24
|
+
</Block>
|
|
25
|
+
<Block label="row layout" row dashed>
|
|
26
|
+
<Chip>A</Chip> <Chip>B</Chip> <Chip>C</Chip>
|
|
27
|
+
</Block>
|
|
28
|
+
|
|
29
|
+
## Grid
|
|
30
|
+
<Grid cols={3}>
|
|
31
|
+
<BlockSm dashed>col 1</BlockSm>
|
|
32
|
+
<BlockSm dashed>col 2</BlockSm>
|
|
33
|
+
<BlockSm dashed>col 3</BlockSm>
|
|
34
|
+
</Grid>
|
|
35
|
+
|
|
36
|
+
{`
|
|
37
|
+
## markdown rendering
|
|
38
|
+
|
|
39
|
+
\`\`\`
|
|
40
|
+
const greet = (name) => {
|
|
41
|
+
return console.log('hello ' + name)
|
|
42
|
+
}
|
|
43
|
+
\`\`\`
|
|
44
|
+
|
|
45
|
+
inline \`code\` works too. and [links](https://example.com).
|
|
46
|
+
|
|
47
|
+
- first item
|
|
48
|
+
- second item
|
|
49
|
+
- third item
|
|
50
|
+
|
|
51
|
+
> blockquotes look like this
|
|
52
|
+
|
|
53
|
+
| col a | col b |
|
|
54
|
+
|-------|-------|
|
|
55
|
+
| 1 | 2 |
|
|
56
|
+
| 3 | 4 |
|
|
57
|
+
`}
|
|
58
|
+
</App>
|
package/index.ts
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "b44ui",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"exports": {
|
|
6
|
+
".": "./index.ts"
|
|
7
|
+
},
|
|
8
|
+
"dependencies": {
|
|
9
|
+
"clsx": "^2.1.1",
|
|
10
|
+
"highlight.js": "^11.11.0",
|
|
11
|
+
"marked": "^15.0.0",
|
|
12
|
+
"marked-highlight": "^2.2.0",
|
|
13
|
+
"tailwind-merge": "^3.0.0"
|
|
14
|
+
},
|
|
15
|
+
"peerDependencies": {
|
|
16
|
+
"react": "^19.0.0"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@types/react": "^19.2.14"
|
|
20
|
+
}
|
|
21
|
+
}
|
package/tailwind.css
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@import 'tailwindcss';
|
|
2
|
+
|
|
3
|
+
/* everything */
|
|
4
|
+
body { width: 100%; height: 100%; }
|
|
5
|
+
|
|
6
|
+
/* markdown */
|
|
7
|
+
.ui-markdown { line-height: 1.6; }
|
|
8
|
+
.ui-markdown h1, .ui-markdown h2, .ui-markdown h3 { font-weight: 700; margin: 1em 0 0.5em; }
|
|
9
|
+
.ui-markdown h1 { font-size: 1.5em; }
|
|
10
|
+
.ui-markdown h2 { font-size: 1.25em; }
|
|
11
|
+
.ui-markdown h3 { font-size: 1.1em; }
|
|
12
|
+
.ui-markdown p { margin: 0.5em 0; }
|
|
13
|
+
.ui-markdown pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.75em 0; }
|
|
14
|
+
.ui-markdown code { font-family: ui-monospace, monospace; font-size: 0.9em; padding: 4px; }
|
|
15
|
+
.ui-markdown :not(pre) > code { background: #1a1a2e; padding: 2px 5px; border-radius: 3px; }
|
|
16
|
+
.ui-markdown ul, .ui-markdown ol { padding-left: 1.5em; margin: 0.5em 0; }
|
|
17
|
+
.ui-markdown blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.5em 0; }
|
|
18
|
+
.ui-markdown a { color: #93c5fd; text-decoration: underline; }
|
|
19
|
+
.ui-markdown table { border-collapse: collapse; margin: 0.75em 0; }
|
|
20
|
+
.ui-markdown th, .ui-markdown td { border: 1px solid #333; padding: 6px 12px; }
|
|
21
|
+
.ui-markdown img { max-width: 100%; border-radius: 6px; }
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2022",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"jsx": "react-jsx",
|
|
7
|
+
"strict": true,
|
|
8
|
+
"skipLibCheck": true,
|
|
9
|
+
"esModuleInterop": true,
|
|
10
|
+
"declaration": true,
|
|
11
|
+
"outDir": "dist"
|
|
12
|
+
},
|
|
13
|
+
"include": ["*.ts", "*.tsx"]
|
|
14
|
+
}
|