Skip to content

Commit be85361

Browse files
maykbritomaykbrito
committed
feat: add shadn and update packages
1 parent 4fb26f1 commit be85361

File tree

11 files changed

+916
-590
lines changed

11 files changed

+916
-590
lines changed

‎components.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": "src/styles/global.css",
9+
"baseColor": "neutral",
10+
"cssVariables": false,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
}
20+
}

‎package.json

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,43 @@
99
"lint": "eslint src --ext tsx"
1010
},
1111
"dependencies": {
12-
"@headlessui/react": "^1.7.18",
12+
"@headlessui/react": "^2.2.0",
1313
"@monaco-editor/react": "^4.6.0",
14+
"@radix-ui/react-icons": "^1.3.0",
15+
"@radix-ui/react-switch": "^1.1.1",
16+
"@uidotdev/usehooks": "^2.4.1",
17+
"class-variance-authority": "^0.7.0",
1418
"classnames": "^2.5.1",
15-
"emmet-monaco-es": "^5.3.2",
19+
"clsx": "^2.1.1",
20+
"emmet-monaco-es": "^5.5.0",
1621
"file-saver": "^2.0.5",
17-
"framer-motion": "^11.0.24",
22+
"framer-motion": "^11.11.10",
1823
"jszip": "^3.10.1",
19-
"monaco-editor": "^0.47.0",
24+
"lucide-react": "^0.454.0",
25+
"monaco-editor": "^0.52.0",
2026
"monaco-editor-textmate": "^4.0.0",
2127
"monaco-textmate": "^3.0.1",
2228
"onigasm": "^2.2.5",
2329
"phosphor-react": "^1.4.1",
2430
"pretty": "^2.0.0",
25-
"react": "^18.2.0",
26-
"react-dom": "^18.2.0"
31+
"react": "^18.3.1",
32+
"react-dom": "^18.3.1",
33+
"react-resizable-panels": "^2.1.6",
34+
"tailwind-merge": "^2.5.4",
35+
"tailwindcss-animate": "^1.0.7"
2736
},
2837
"devDependencies": {
2938
"@rocketseat/eslint-config": "^2.2.2",
3039
"@types/file-saver": "^2.0.7",
31-
"@types/node": "^20.12.2",
40+
"@types/node": "^22.8.4",
3241
"@types/pretty": "^2.0.3",
33-
"@types/react": "^18.2.74",
34-
"@types/react-dom": "^18.2.23",
35-
"@vitejs/plugin-react": "^4.2.1",
36-
"autoprefixer": "^10.4.19",
37-
"postcss": "^8.4.38",
38-
"tailwindcss": "^3.4.3",
39-
"typescript": "^5.4.3",
40-
"vite": "^5.2.7"
42+
"@types/react": "^18.3.12",
43+
"@types/react-dom": "^18.3.1",
44+
"@vitejs/plugin-react": "^4.3.3",
45+
"autoprefixer": "^10.4.20",
46+
"postcss": "^8.4.47",
47+
"tailwindcss": "^3.4.14",
48+
"typescript": "^5.6.3",
49+
"vite": "^5.4.10"
4150
}
4251
}

‎src/components/ui/resizable.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { DragHandleDots2Icon } from "@radix-ui/react-icons"
2+
import * as ResizablePrimitive from "react-resizable-panels"
3+
4+
import { cn } from "@/lib/utils"
5+
6+
const ResizablePanelGroup = ({
7+
className,
8+
...props
9+
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
10+
<ResizablePrimitive.PanelGroup
11+
className={cn(
12+
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
13+
className
14+
)}
15+
{...props}
16+
/>
17+
)
18+
19+
const ResizablePanel = ResizablePrimitive.Panel
20+
21+
const ResizableHandle = ({
22+
withHandle,
23+
className,
24+
...props
25+
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
26+
withHandle?: boolean
27+
}) => (
28+
<ResizablePrimitive.PanelResizeHandle
29+
className={cn(
30+
"relative flex w-px items-center justify-center bg-neutral-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90 dark:bg-neutral-800 dark:focus-visible:ring-neutral-300",
31+
className
32+
)}
33+
{...props}
34+
>
35+
{withHandle && (
36+
<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-neutral-200 bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-800">
37+
<DragHandleDots2Icon className="h-2.5 w-2.5" />
38+
</div>
39+
)}
40+
</ResizablePrimitive.PanelResizeHandle>
41+
)
42+
43+
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

‎src/components/ui/switch.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from "react"
2+
import * as SwitchPrimitives from "@radix-ui/react-switch"
3+
4+
import { cn } from "@/lib/utils"
5+
6+
const Switch = React.forwardRef<
7+
React.ElementRef<typeof SwitchPrimitives.Root>,
8+
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
9+
>(({ className, ...props }, ref) => (
10+
<SwitchPrimitives.Root
11+
className={cn(
12+
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800",
13+
className
14+
)}
15+
{...props}
16+
ref={ref}
17+
>
18+
<SwitchPrimitives.Thumb
19+
className={cn(
20+
"pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-neutral-950"
21+
)}
22+
/>
23+
</SwitchPrimitives.Root>
24+
))
25+
Switch.displayName = SwitchPrimitives.Root.displayName
26+
27+
export { Switch }

‎src/lib/utils.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { clsx, type ClassValue } from "clsx"
2+
import { twMerge } from "tailwind-merge"
3+
4+
export function cn(...inputs: ClassValue[]) {
5+
return twMerge(clsx(inputs))
6+
}

‎src/styles/global.css

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@
33
@tailwind components;
44

55
body {
6-
@apply bg-[#191622];
6+
/* @apply bg-[#191622]; */
7+
}
8+
9+
@layer base {
10+
:root {
11+
12+
--radius: 0.5rem
13+
}
714
}
815

‎tailwind.config.js

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,22 @@
22
* @type { import('tailwindcss/tailwind-config').TailwindConfig }
33
*/
44
module.exports = {
5-
mode: 'jit',
5+
darkMode: ['class'],
6+
mode: 'jit',
67
content: ['./src/*.tsx', './src/components/**/*.tsx'],
78
theme: {
8-
extend: {
9-
gridTemplateColumns: {
10-
floatingPreviewHeader: '100px 1fr 100px',
11-
previewHeader: '1fr 100px',
12-
},
13-
},
9+
extend: {
10+
gridTemplateColumns: {
11+
floatingPreviewHeader: '100px 1fr 100px',
12+
previewHeader: '1fr 100px'
13+
},
14+
borderRadius: {
15+
lg: 'var(--radius)',
16+
md: 'calc(var(--radius) - 2px)',
17+
sm: 'calc(var(--radius) - 4px)'
18+
},
19+
colors: {}
20+
}
1421
},
15-
plugins: [],
22+
plugins: [require("tailwindcss-animate")],
1623
}

‎tsconfig.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@
1414
"resolveJsonModule": true,
1515
"isolatedModules": true,
1616
"noEmit": true,
17-
"jsx": "react-jsx"
17+
"jsx": "react-jsx",
18+
"baseUrl": ".",
19+
"paths": {
20+
"@/*": ["./src/*"]
21+
},
1822
},
1923
"include": ["src"],
2024
"references": [{ "path": "./tsconfig.node.json" }]

‎tsconfig.node.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
"compilerOptions": {
33
"composite": true,
44
"module": "esnext",
5-
"moduleResolution": "node"
5+
"moduleResolution": "node",
6+
"baseUrl": ".",
7+
"paths": {
8+
"@/*": [
9+
"./src/*"
10+
]
11+
},
612
},
713
"include": ["vite.config.ts"]
814
}

‎vite.config.ts

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
import { defineConfig } from 'vite'
2-
import react from '@vitejs/plugin-react'
3-
4-
// https://vitejs.dev/config/
1+
import * as path from "node:path"
2+
import react from "@vitejs/plugin-react"
3+
import { defineConfig } from "vite"
4+
55
export default defineConfig({
6-
plugins: [react()]
7-
})
6+
plugins: [react()],
7+
resolve: {
8+
alias: {
9+
"@": path.resolve(__dirname, "./src"),
10+
},
11+
},
12+
})

0 commit comments

Comments
 (0)