mirror of
https://github.com/kunkunsh/kunkun.git
synced 2025-04-03 22:26:43 +00:00
feat: add shadcn-svelte, integrate with @kksh/svelte5 and @kksh/ui
This commit is contained in:
Huakun Shen
parent
8ed36a22db
commit
2f2404bd1f
20
.prettierrc
Normal file
20
.prettierrc
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"printWidth": 100,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "none",
|
||||
"semi": false,
|
||||
"useTabs": true,
|
||||
"plugins": [
|
||||
"prettier-plugin-svelte",
|
||||
"@ianvs/prettier-plugin-sort-imports",
|
||||
"prettier-plugin-tailwindcss"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.svelte",
|
||||
"options": {
|
||||
"parser": "svelte"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "kunkun",
|
||||
"name": "@kksh/desktop",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
@ -17,14 +17,26 @@
|
||||
"@tauri-apps/plugin-shell": "^2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@kksh/ui": "workspace:*",
|
||||
"@sveltejs/adapter-static": "^3.0.5",
|
||||
"@sveltejs/kit": "^2.7.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"@tailwindcss/aspect-ratio": "^0.4.2",
|
||||
"@tailwindcss/container-queries": "^0.1.1",
|
||||
"@tailwindcss/forms": "^0.5.9",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@tauri-apps/cli": "^2",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"clsx": "^2.1.1",
|
||||
"embla-carousel-svelte": "^8.3.1",
|
||||
"formsnap": "^1.0.1",
|
||||
"tailwind-merge": "^2.5.4",
|
||||
"tailwind-variants": "^0.2.1",
|
||||
"tailwindcss": "^3.4.9",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"tslib": "^2.8.0",
|
||||
"typescript": "^5.5.0",
|
||||
"vite": "^5.4.10",
|
||||
"@tauri-apps/cli": "^2"
|
||||
"vaul-svelte": "^0.3.2",
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
|
||||
9
apps/desktop/postcss.config.js
Normal file
9
apps/desktop/postcss.config.js
Normal file
@ -0,0 +1,9 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {
|
||||
config: "tailwind.config.ts"
|
||||
// config: "../../packages/ui/tailwind.config.ts"
|
||||
},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
75
apps/desktop/src/app.css
Normal file
75
apps/desktop/src/app.css
Normal file
@ -0,0 +1,75 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
--destructive: 0 72.2% 50.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--ring: 0 0% 3.9%;
|
||||
--radius: 0.5rem;
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--ring: 0 0% 83.1%;
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
6
apps/desktop/src/lib/utils.ts
Normal file
6
apps/desktop/src/lib/utils.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
9
apps/desktop/src/routes/+layout.svelte
Normal file
9
apps/desktop/src/routes/+layout.svelte
Normal file
@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
import "../app.css"
|
||||
import { Toaster } from "@kksh/svelte5"
|
||||
|
||||
let { children } = $props()
|
||||
</script>
|
||||
|
||||
<Toaster richColors />
|
||||
{@render children()}
|
||||
@ -1 +1,14 @@
|
||||
<script lang="ts"></script>
|
||||
<script lang="ts">
|
||||
import { Alert, Avatar, Button } from "@kksh/svelte5"
|
||||
</script>
|
||||
|
||||
<Button>Click me</Button>
|
||||
<button class="bg-red-500">hi</button>
|
||||
<Alert.Root>
|
||||
<Alert.Title>Heads up!</Alert.Title>
|
||||
<Alert.Description>You can add components to your app using the cli.</Alert.Description>
|
||||
</Alert.Root>
|
||||
<Avatar.Root>
|
||||
<Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
|
||||
<Avatar.Fallback>CN</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
|
||||
@ -9,6 +9,11 @@ const config = {
|
||||
preprocess: vitePreprocess(),
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
alias: {
|
||||
"@/*": "./src/lib/*",
|
||||
"@kksh/ui/*": "../../packages/ui/*",
|
||||
"@kksh/svelte5/*": "../../node_modules/@kksh/svelte5/src/lib/*",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
100
apps/desktop/tailwind.config.ts
Normal file
100
apps/desktop/tailwind.config.ts
Normal file
@ -0,0 +1,100 @@
|
||||
import type { Config } from "tailwindcss"
|
||||
import tailwindcssAnimate from "tailwindcss-animate"
|
||||
import { fontFamily } from "tailwindcss/defaultTheme"
|
||||
|
||||
const config: Config = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./src/**/*.{html,js,svelte,ts}",
|
||||
"./node_modules/@kksh/ui/src/**/*.{html,js,svelte,ts}",
|
||||
"../../node_modules/@kksh/svelte5/src/**/*.{html,js,svelte,ts}"
|
||||
],
|
||||
safelist: ["dark"],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px"
|
||||
}
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border) / <alpha-value>)",
|
||||
input: "hsl(var(--input) / <alpha-value>)",
|
||||
ring: "hsl(var(--ring) / <alpha-value>)",
|
||||
background: "hsl(var(--background) / <alpha-value>)",
|
||||
foreground: "hsl(var(--foreground) / <alpha-value>)",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
|
||||
foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
|
||||
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
|
||||
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
|
||||
foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
|
||||
foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
|
||||
foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card) / <alpha-value>)",
|
||||
foreground: "hsl(var(--card-foreground) / <alpha-value>)"
|
||||
},
|
||||
sidebar: {
|
||||
DEFAULT: "hsl(var(--sidebar-background))",
|
||||
foreground: "hsl(var(--sidebar-foreground))",
|
||||
primary: "hsl(var(--sidebar-primary))",
|
||||
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
|
||||
accent: "hsl(var(--sidebar-accent))",
|
||||
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
|
||||
border: "hsl(var(--sidebar-border))",
|
||||
ring: "hsl(var(--sidebar-ring))"
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
xl: "calc(var(--radius) + 4px)",
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)"
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [...fontFamily.sans]
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" }
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" }
|
||||
},
|
||||
"caret-blink": {
|
||||
"0%,70%,100%": { opacity: "1" },
|
||||
"20%,50%": { opacity: "0" }
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
"caret-blink": "caret-blink 1.25s ease-out infinite"
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [tailwindcssAnimate]
|
||||
}
|
||||
|
||||
export default config
|
||||
@ -8,7 +8,13 @@
|
||||
"format": "prettier --write \"**/*.{ts,tsx,md}\""
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ianvs/prettier-plugin-sort-imports": "^4.3.1",
|
||||
"@kksh/svelte5": "0.1.2-beta.3",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-svelte": "^3.2.7",
|
||||
"prettier-plugin-tailwindcss": "^0.6.8",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"turbo": "^2.2.3",
|
||||
"typescript": "5.5.4"
|
||||
},
|
||||
|
||||
31
packages/config-eslint/index.js
Normal file
31
packages/config-eslint/index.js
Normal file
@ -0,0 +1,31 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:svelte/recommended',
|
||||
'prettier',
|
||||
'turbo'
|
||||
],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['@typescript-eslint'],
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020,
|
||||
extraFileExtensions: ['.svelte']
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
parser: 'svelte-eslint-parser',
|
||||
parserOptions: {
|
||||
parser: '@typescript-eslint/parser'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
14
packages/config-eslint/package.json
Normal file
14
packages/config-eslint/package.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "@kksh/eslint-config",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
||||
"@typescript-eslint/parser": "^7.1.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-config-turbo": "^2.0.0",
|
||||
"eslint-plugin-svelte": "^2.35.1"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
29
packages/typescript-config/README.md
Normal file
29
packages/typescript-config/README.md
Normal file
@ -0,0 +1,29 @@
|
||||
To extend the `base.json` config, use relative path
|
||||
|
||||
```json
|
||||
"extends": "@kksh/typescript-config/base.json" // no
|
||||
"extends": "../typescript-config/base.json" // yes
|
||||
```
|
||||
|
||||
Because the path alias is resolved relative to the file that extends the config.
|
||||
If you install `"@kksh/typescript-config": "workspace:*"` in the `package.json`,
|
||||
`@kksh/typescript-config` actually points to `node_modules/packages/typescript-config`,
|
||||
and the path alias cannot be correctly resolved. (will need to add another `../`).
|
||||
|
||||
```json
|
||||
"paths": {
|
||||
"@kksh/ui/*": ["../../packages/ui/*"]
|
||||
}
|
||||
```
|
||||
|
||||
needs to become
|
||||
|
||||
```json
|
||||
"paths": {
|
||||
"@kksh/ui/*": ["../../../packages/ui/*"]
|
||||
}
|
||||
```
|
||||
|
||||
to "escape" from `node_modules`.
|
||||
|
||||
So I'd rather use relative path to extend the config.
|
||||
@ -1,19 +1,26 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"compilerOptions": {
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"esModuleInterop": true,
|
||||
"incremental": false,
|
||||
"isolatedModules": true,
|
||||
"lib": ["es2022", "DOM", "DOM.Iterable"],
|
||||
"module": "NodeNext",
|
||||
"moduleDetection": "force",
|
||||
"moduleResolution": "NodeNext",
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"target": "ES2022"
|
||||
}
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"compilerOptions": {
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"esModuleInterop": true,
|
||||
"incremental": false,
|
||||
"isolatedModules": true,
|
||||
"lib": ["es2022", "DOM", "DOM.Iterable"],
|
||||
"module": "NodeNext",
|
||||
"moduleDetection": "force",
|
||||
"moduleResolution": "NodeNext",
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true,
|
||||
"target": "ES2022",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@kksh/ui/*": ["../../packages/ui/*"],
|
||||
"@kksh/desktop/*": ["../../packages/desktop/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@repo/typescript-config",
|
||||
"name": "@kksh/typescript-config",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
|
||||
17
packages/ui/components.json
Normal file
17
packages/ui/components.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://next.shadcn-svelte.com/schema.json",
|
||||
"style": "new-york",
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.ts",
|
||||
"css": "app.css",
|
||||
"baseColor": "neutral"
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@kksh/ui/src/components",
|
||||
"utils": "@kksh/ui/src/utils",
|
||||
"ui": "@kksh/ui/src/components/ui",
|
||||
"hooks": "@kksh/ui/src/hooks"
|
||||
},
|
||||
"typescript": true,
|
||||
"registry": "https://next.shadcn-svelte.com/registry"
|
||||
}
|
||||
0
packages/ui/index.ts
Normal file
0
packages/ui/index.ts
Normal file
31
packages/ui/package.json
Normal file
31
packages/ui/package.json
Normal file
@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "@kksh/ui",
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"module": "index.ts",
|
||||
"main": "index.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./index.ts",
|
||||
"svelte": "./index.ts"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"lint": "eslint ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@kksh/eslint-config": "workspace:*",
|
||||
"@kksh/typescript-config": "workspace:*",
|
||||
"bits-ui": "1.0.0-next.36",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-svelte": "^0.454.0",
|
||||
"mode-watcher": "^0.4.1",
|
||||
"paneforge": "1.0.0-next.1",
|
||||
"svelte-radix": "^2.0.1",
|
||||
"svelte-sonner": "^0.3.28",
|
||||
"tailwind-merge": "^2.5.4",
|
||||
"tailwind-variants": "^0.2.1",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
}
|
||||
}
|
||||
6
packages/ui/src/utils.ts
Normal file
6
packages/ui/src/utils.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
7
packages/ui/tsconfig.json
Normal file
7
packages/ui/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "../typescript-config/base.json",
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "Bundler",
|
||||
"module": "ESNext"
|
||||
}
|
||||
}
|
||||
2642
pnpm-lock.yaml
generated
2642
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user