Skip to content

Commit b44681a

Browse files
cezaraugustocezaraugusto
committed
Add shadcn template
1 parent 21f5698 commit b44681a

File tree

24 files changed

+1274
-48
lines changed

24 files changed

+1274
-48
lines changed

‎examples/data.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,15 @@ const CUSTOM_TEMPLATES: Template[] = [
284284
hasBackground: false,
285285
hasEnv: false,
286286
configFiles: ['tsconfig.json']
287+
},
288+
{
289+
name: 'sidebar-shadcn',
290+
uiContext: ['sidebar'],
291+
uiFramework: 'react',
292+
css: 'css',
293+
hasBackground: false,
294+
hasEnv: false,
295+
configFiles: ['postcss.config.js', 'tailwind.config.js', 'tsconfig.json']
287296
}
288297
]
289298

‎examples/sidebar-shadcn/.gitignore

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules
5+
6+
# testing
7+
coverage
8+
9+
# production
10+
dist
11+
12+
# misc
13+
.DS_Store
14+
15+
# local env files
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
# lock files
22+
yarn.lock
23+
package-lock.json
24+
25+
# debug files
26+
npm-debug.log*
27+
yarn-debug.log*
28+
yarn-error.log*
29+
30+
# extension.js
31+
extension-env.d.ts

‎examples/sidebar-shadcn/background.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const isFirefoxLike =
2+
typeof browser !== 'undefined' && typeof browser.sidebarAction !== 'undefined'
3+
4+
if (isFirefoxLike) {
5+
browser.browserAction.onClicked.addListener(() => {
6+
browser.sidebarAction.open()
7+
})
8+
} else if (typeof chrome !== 'undefined' && chrome.sidePanel) {
9+
chrome.action.onClicked.addListener(() => {
10+
chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
11+
})
12+
}

‎examples/sidebar-shadcn/components/ui/button.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import * as React from 'react'
2+
import {Slot} from '@radix-ui/react-slot'
3+
import {cva, type VariantProps} from 'class-variance-authority'
4+
5+
import {cn} from '@/lib/utils'
6+
7+
const buttonVariants = cva(
8+
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
9+
{
10+
variants: {
11+
variant: {
12+
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
13+
destructive:
14+
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
15+
outline:
16+
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
17+
secondary:
18+
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
19+
ghost: 'hover:bg-accent hover:text-accent-foreground',
20+
link: 'text-primary underline-offset-4 hover:underline'
21+
},
22+
size: {
23+
default: 'h-10 px-4 py-2',
24+
sm: 'h-9 rounded-md px-3',
25+
lg: 'h-11 rounded-md px-8',
26+
icon: 'h-10 w-10'
27+
}
28+
},
29+
defaultVariants: {
30+
variant: 'default',
31+
size: 'default'
32+
}
33+
}
34+
)
35+
36+
export interface ButtonProps
37+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38+
VariantProps<typeof buttonVariants> {
39+
asChild?: boolean
40+
}
41+
42+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43+
({className, variant, size, asChild = false, ...props}, ref) => {
44+
const Comp = asChild ? Slot : 'button'
45+
return (
46+
<Comp
47+
className={cn(buttonVariants({variant, size, className}))}
48+
ref={ref}
49+
{...props}
50+
/>
51+
)
52+
}
53+
)
54+
Button.displayName = 'Button'
55+
56+
export {Button, buttonVariants}

‎examples/sidebar-shadcn/components/ui/card.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as React from 'react'
2+
3+
import {cn} from '@/lib/utils'
4+
5+
const Card = React.forwardRef<
6+
HTMLDivElement,
7+
React.HTMLAttributes<HTMLDivElement>
8+
>(({className, ...props}, ref) => (
9+
<div
10+
ref={ref}
11+
className={cn(
12+
'rounded-lg border bg-card text-card-foreground shadow-sm',
13+
className
14+
)}
15+
{...props}
16+
/>
17+
))
18+
Card.displayName = 'Card'
19+
20+
const CardHeader = React.forwardRef<
21+
HTMLDivElement,
22+
React.HTMLAttributes<HTMLDivElement>
23+
>(({className, ...props}, ref) => (
24+
<div
25+
ref={ref}
26+
className={cn('flex flex-col space-y-1.5 p-6', className)}
27+
{...props}
28+
/>
29+
))
30+
CardHeader.displayName = 'CardHeader'
31+
32+
const CardTitle = React.forwardRef<
33+
HTMLParagraphElement,
34+
React.HTMLAttributes<HTMLHeadingElement>
35+
>(({className, ...props}, ref) => (
36+
<h3
37+
ref={ref}
38+
className={cn(
39+
'text-2xl font-semibold leading-none tracking-tight',
40+
className
41+
)}
42+
{...props}
43+
/>
44+
))
45+
CardTitle.displayName = 'CardTitle'
46+
47+
const CardDescription = React.forwardRef<
48+
HTMLParagraphElement,
49+
React.HTMLAttributes<HTMLParagraphElement>
50+
>(({className, ...props}, ref) => (
51+
<p
52+
ref={ref}
53+
className={cn('text-sm text-muted-foreground', className)}
54+
{...props}
55+
/>
56+
))
57+
CardDescription.displayName = 'CardDescription'
58+
59+
const CardContent = React.forwardRef<
60+
HTMLDivElement,
61+
React.HTMLAttributes<HTMLDivElement>
62+
>(({className, ...props}, ref) => (
63+
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
64+
))
65+
CardContent.displayName = 'CardContent'
66+
67+
const CardFooter = React.forwardRef<
68+
HTMLDivElement,
69+
React.HTMLAttributes<HTMLDivElement>
70+
>(({className, ...props}, ref) => (
71+
<div
72+
ref={ref}
73+
className={cn('flex items-center p-6 pt-0', className)}
74+
{...props}
75+
/>
76+
))
77+
CardFooter.displayName = 'CardFooter'
78+
79+
export {Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent}

‎examples/sidebar-shadcn/components/ui/label.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react'
2+
import * as LabelPrimitive from '@radix-ui/react-label'
3+
import {cva, type VariantProps} from 'class-variance-authority'
4+
5+
import {cn} from '@/lib/utils'
6+
7+
const labelVariants = cva(
8+
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
9+
)
10+
11+
const Label = React.forwardRef<
12+
React.ElementRef<typeof LabelPrimitive.Root>,
13+
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
14+
VariantProps<typeof labelVariants>
15+
>(({className, ...props}, ref) => (
16+
<LabelPrimitive.Root
17+
ref={ref}
18+
className={cn(labelVariants(), className)}
19+
{...props}
20+
/>
21+
))
22+
Label.displayName = LabelPrimitive.Root.displayName
23+
24+
export {Label}

‎examples/sidebar-shadcn/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-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
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-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
21+
)}
22+
/>
23+
</SwitchPrimitives.Root>
24+
))
25+
Switch.displayName = SwitchPrimitives.Root.displayName
26+
27+
export {Switch}

‎examples/sidebar-shadcn/images/extension_48.png

1.35 KB
Loading

‎examples/sidebar-shadcn/images/shadcn.svg

Lines changed: 7 additions & 0 deletions
Loading

‎examples/sidebar-shadcn/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+
}

‎examples/sidebar-shadcn/manifest.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"chromium:manifest_version": 3,
3+
"firefox:manifest_version": 2,
4+
"version": "0.0.1",
5+
"name": "shadcn-extension",
6+
"author": "Your Name",
7+
"description": "An Extension.js example.",
8+
"icons": {
9+
"48": "images/extension_48.png"
10+
},
11+
"chromium:action": {
12+
"default_icon": {
13+
"48": "images/extension_48.png"
14+
},
15+
"default_title": "Open Side Panel"
16+
},
17+
"firefox:browser_action": {
18+
"default_icon": {
19+
"48": "images/extension_48.png"
20+
},
21+
"default_title": "Open Side Panel"
22+
},
23+
"chromium:side_panel": {
24+
"default_path": "sidebar/index.html",
25+
"default_title": "Side Panel Content"
26+
},
27+
"firefox:sidebar_action": {
28+
"default_panel": "sidebar/index.html",
29+
"default_title": "Side Panel Content"
30+
},
31+
"permissions": ["tabs"],
32+
"background": {
33+
"chromium:service_worker": "background.ts",
34+
"firefox:scripts": ["background.ts"]
35+
}
36+
}

‎examples/sidebar-shadcn/package.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"private": true,
3+
"name": "shadcn-extension",
4+
"description": "An Extension.js example.",
5+
"version": "0.0.1",
6+
"author": {
7+
"name": "Your Name",
8+
"email": "[email protected]",
9+
"url": "https://yourwebsite.com"
10+
},
11+
"license": "MIT",
12+
"scripts": {
13+
"dev": "extension dev",
14+
"start": "extension start",
15+
"build": "extension build"
16+
},
17+
"dependencies": {
18+
"@radix-ui/react-label": "^2.1.0",
19+
"@radix-ui/react-slot": "^1.1.0",
20+
"@radix-ui/react-switch": "^1.1.1",
21+
"class-variance-authority": "^0.7.0",
22+
"clsx": "^2.1.1",
23+
"react": "^18.3.1",
24+
"react-dom": "^18.3.1",
25+
"tailwind-merge": "^2.5.3",
26+
"tailwindcss-animate": "^1.0.7"
27+
},
28+
"devDependencies": {
29+
"@tailwindcss/typography": "^0.5.15",
30+
"@types/react": "^18.2.64",
31+
"@types/react-dom": "^18.2.21",
32+
"autoprefixer": "^10.4.20",
33+
"daisyui": "^4.12.10",
34+
"extension": "latest",
35+
"postcss": "^8.4.47",
36+
"tailwindcss": "^3.4.13",
37+
"typescript": "5.3.3"
38+
}
39+
}

‎examples/sidebar-shadcn/postcss.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
plugins: [require('tailwindcss'), require('autoprefixer')]
3+
}

‎examples/sidebar-shadcn/public/logo.svg

Lines changed: 7 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)