Skip to content

Commit 306a6eb

Browse files
existentialcoderexistentialcoder
committed
Added UI layer for browser extension - 50% completed
1 parent b4298e6 commit 306a6eb

30 files changed

Lines changed: 1741 additions & 27 deletions

‎apps/browser-extension/components.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"$schema": "https://shadcn-vue.com/schema.json",
3+
"style": "new-york",
4+
"typescript": true,
5+
"tailwind": {
6+
"config": "config/tailwind.config.js",
7+
"css": "public/popup.css",
8+
"baseColor": "neutral",
9+
"cssVariables": true
10+
},
11+
"framework": "vite"
12+
}

apps/browser-extension/public/manifest.json renamed to apps/browser-extension/manifest.json

File renamed without changes.

‎apps/browser-extension/package.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,23 @@
66
"build": "vite build"
77
},
88
"dependencies": {
9+
"class-variance-authority": "^0.7.0",
10+
"clsx": "^2.1.1",
11+
"lucide-vue-next": "^0.544.0",
12+
"radix-vue": "^1.9.17",
13+
"tailwind-merge": "^3.3.1",
14+
"tailwindcss": "^3.4.1",
15+
"tailwindcss-animate": "^1.0.7",
16+
"vee-validate": "^4.15.1",
917
"vue": "^3.3.4"
1018
},
1119
"devDependencies": {
20+
"@tsconfig/node20": "^20.1.6",
1221
"@vitejs/plugin-vue": "^5.0.0",
22+
"@vue/tsconfig": "^0.5.1",
23+
"autoprefixer": "^10.4.17",
1324
"typescript": "^5.2.2",
14-
"vite": "^5.0.0"
25+
"vite": "^5.0.0",
26+
"vite-plugin-static-copy": "^3.1.3"
1527
}
1628
}

apps/browser-extension/public/popup.html renamed to apps/browser-extension/popup.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>Job Applica Extension</title>
6+
<link rel="stylesheet" href="./popup.css" />
67
</head>
78
<body>
89
<div id="app"></div>

‎apps/browser-extension/public/popup.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
html {
2+
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
3+
-webkit-font-smoothing: antialiased;
4+
}

‎apps/browser-extension/src/components/ui/button/Button.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
import type { HTMLAttributes } from 'vue'
3+
import { Primitive, type PrimitiveProps } from 'radix-vue'
4+
import { type ButtonVariants, buttonVariants } from './index';
5+
import { cn } from '../../../lib/utils';
6+
7+
interface Props extends PrimitiveProps {
8+
variant?: ButtonVariants['variant']
9+
size?: ButtonVariants['size']
10+
as?: string
11+
class?: HTMLAttributes['class'],
12+
prependIcon?: string,
13+
}
14+
15+
const props = withDefaults(defineProps<Props>(), {
16+
as: 'button',
17+
})
18+
</script>
19+
20+
<template>
21+
<Primitive
22+
:as="as"
23+
:as-child="asChild"
24+
:class="cn(buttonVariants({ variant, size }), props.class)"
25+
class="flex items-center"
26+
>
27+
<Icon v-if="prependIcon" :name="prependIcon" class="mr-2 h-6 w-6" />
28+
<slot />
29+
</Primitive>
30+
</template>

‎apps/browser-extension/src/components/ui/button/index.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { type VariantProps, cva } from 'class-variance-authority';
2+
3+
export { default as Button } from './Button.vue';
4+
5+
export const buttonVariants = cva(
6+
'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',
7+
{
8+
variants: {
9+
variant: {
10+
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
11+
destructive:
12+
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
13+
outline:
14+
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
15+
secondary:
16+
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
17+
ghost: 'hover:bg-accent hover:text-accent-foreground',
18+
link: 'text-primary underline-offset-4 hover:underline',
19+
},
20+
size: {
21+
default: 'h-10 px-4 py-2',
22+
sm: 'h-9 rounded-md px-3',
23+
lg: 'h-11 rounded-md px-8',
24+
icon: 'h-10 w-10',
25+
},
26+
},
27+
defaultVariants: {
28+
variant: 'default',
29+
size: 'default',
30+
},
31+
},
32+
)
33+
34+
export type ButtonVariants = VariantProps<typeof buttonVariants>

‎apps/browser-extension/src/components/ui/checkbox/Checkbox.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script setup lang="ts">
2+
import { type HTMLAttributes, computed } from 'vue'
3+
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
4+
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
5+
import { Check } from 'lucide-vue-next'
6+
import { cn } from '../../../lib/utils';
7+
8+
const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
9+
const emits = defineEmits<CheckboxRootEmits>()
10+
11+
const delegatedProps = computed(() => {
12+
const { class: _, ...delegated } = props
13+
14+
return delegated
15+
})
16+
17+
const forwarded = useForwardPropsEmits(delegatedProps, emits)
18+
</script>
19+
20+
<template>
21+
<CheckboxRoot
22+
v-bind="forwarded"
23+
:class="
24+
cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
25+
props.class)"
26+
>
27+
<CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
28+
<slot>
29+
<Check class="h-4 w-4" />
30+
</slot>
31+
</CheckboxIndicator>
32+
</CheckboxRoot>
33+
</template>

‎apps/browser-extension/src/components/ui/checkbox/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Checkbox } from './Checkbox.vue'

‎apps/browser-extension/src/components/ui/form/FormControl.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts" setup>
2+
import { Slot } from 'radix-vue'
3+
import { useFormField } from './useFormField'
4+
5+
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
6+
</script>
7+
8+
<template>
9+
<Slot
10+
:id="formItemId"
11+
:aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
12+
:aria-invalid="!!error"
13+
>
14+
<slot />
15+
</Slot>
16+
</template>

0 commit comments

Comments
 (0)