Skip to content

Commit

Permalink
feat: update
Browse files Browse the repository at this point in the history 
useLocalStorage instead of useSessionStorage
  • Loading branch information
@sadeghbarati
sadeghbarati committed Nov 26, 2023
1 parent 8a1a2a4 commit 917d8e1
Show file tree
Hide file tree
Showing 16 changed files with 314 additions and 136 deletions.
4 changes: 2 additions & 2 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
"prettier.enable": false,
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.organizeImports": false
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},

"eslint.validate": [
Expand Down
136 changes: 117 additions & 19 deletions apps/www/.vitepress/theme/layout/ThemingLayout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Di
import RadixIconsCheck from '~icons/radix-icons/check'
import RadixIconsSun from '~icons/radix-icons/sun'
import RadixIconsMoon from '~icons/radix-icons/moon'
import RadixIconsReset from '~icons/radix-icons/reset'
import RadixIconsInfoCircled from '~icons/radix-icons/info-circled'
import { cn } from '@/lib/utils'
type Color =
| 'zinc'
Expand Down Expand Up @@ -47,7 +51,7 @@ const allColors: Color[] = [
'violet',
]
const { theme, radius, setRadius, setTheme, codeConfig } = useConfigStore()
const { theme, radius, setRadius, setTheme, codeConfig, config } = useConfigStore()
const { isDark } = useData()
// Whenever the component is mounted, update the document class list
Expand Down Expand Up @@ -131,17 +135,101 @@ watch(radius, (radius) => {
Customize
</Button>
</PopoverTrigger>
<PopoverContent :side-offset="8" align="end" class="w-96">
<div class="p-4">
<div class="grid space-y-1">
<h1 class="text-md text-foreground font-semibold">
Customize
</h1>
<p class="text-xs text-muted-foreground">
Pick a style and color for your components.
</p>
<PopoverContent :side-offset="8" align="end" class="p-6 w-96">
<div>
<div class="flex items-start">
<div class="space-y-1 pr-2">
<h1 class="text-md text-foreground font-semibold">
Customize
</h1>
<p class="text-xs text-muted-foreground">
Pick a style and color for your components.
</p>
</div>
<Button
variant="ghost" size="icon" class="ml-auto rounded-[0.5rem]" @click="() => {
config = {
...config,
theme: 'zinc',
radius: 0.5,
}
codeConfig = {
prefix: '',
aliases: {
components: '@/components',
utils: '@/lib/utils',
},
}
}"
>
<RadixIconsReset />
</Button>
</div>
<div class="space-y-1.5 pt-6">
<div class="flex flex-1 flex-col space-y-4 md:space-y-6 pt-4">
<div class="space-y-1.5">
<div class="flex w-full items-center">
<Label class="text-xs">Style</Label>
<Popover>
<PopoverTrigger>
<RadixIconsInfoCircled class="ml-1 h-3 w-3" />
<span class="sr-only">About styles</span>
</PopoverTrigger>
<PopoverContent
class="space-y-3 rounded-[0.5rem] text-sm"
side="right"
align="start"
:align-offset="-20"
>
<p class="font-medium">
What is the difference between the New York and Default style?
</p>
<p>
A style comes with its own set of components, animations,
icons and more.
</p>
<p>
The <span class="font-medium">Default</span> style has
larger inputs, uses lucide-react for icons and
tailwindcss-animate for animations.
</p>
<p>
The <span class="font-medium">New York</span> style ships
with smaller buttons and cards with shadows. It uses icons
from Radix Icons.
</p>
</PopoverContent>
</Popover>
</div>
<div class="grid grid-cols-3 gap-2">
<Button
variant="outline"
size="sm"
:class="cn(
config.style === 'default' && 'border-2 border-primary',
)"
@click="() => {
config = { ...config, style: 'default' }
}"
>
Default
</Button>
<Button
variant="outline"
size="sm"
:class="cn(
config.style === 'new-york' && 'border-2 border-primary',
)"
@click="() => {
config = { ...config, style: 'new-york' }
}"
>
New York
</Button>
</div>
</div>
</div>
<div class="space-y-1.5 pt-4">
<Label for="color" class="text-xs"> Color </Label>
<div class="grid grid-cols-3 gap-2 py-1.5">
<Button
Expand Down Expand Up @@ -171,7 +259,7 @@ watch(radius, (radius) => {
</Button>
</div>
</div>
<div class="space-y-1.5 pt-6">
<div class="space-y-1.5 pt-4">
<Label for="radius" class="text-xs"> Radius </Label>
<div class="grid grid-cols-5 gap-2 py-1.5">
<Button
Expand All @@ -192,7 +280,7 @@ watch(radius, (radius) => {
</Button>
</div>
</div>
<div class="space-y-1.5 pt-6">
<div class="space-y-1.5 pt-4">
<Label for="theme" class="text-xs"> Theme </Label>

<div class="flex space-x-2 py-1.5">
Expand All @@ -216,16 +304,26 @@ watch(radius, (radius) => {
</Button>
</div>
</div>
<div class="space-y-1.5 pt-6">
<Label for="radius" class="text-xs"> Alias </Label>
<div class="py-1.5">
<input v-model.lazy="codeConfig.alias" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
<div class="space-y-1.5 pt-4">
<div class="flex">
<div>
<Label for="components" class="text-xs"> Alias (components) </Label>
<div class="flex py-1.5">
<input id="components" v-model.lazy="codeConfig.aliases.components" class="flex h-9 w-full rounded-s-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
</div>
</div>
<div>
<Label for="utils" class="text-xs"> Alias (utils) </Label>
<div id="utils" class="flex py-1.5">
<input v-model.lazy="codeConfig.aliases.utils" class="flex h-9 w-full rounded-e-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
</div>
</div>
</div>
</div>
<div class="space-y-1.5 pt-6">
<div class="space-y-1.5 pt-3">
<Label for="radius" class="text-xs"> Prefix </Label>
<div class="py-1.5">
<input v-model.lazy="codeConfig.prefix" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
<input v-model.lazy="codeConfig.prefix" placeholder="Ui" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
</div>
</div>
</div>
Expand Down
29 changes: 20 additions & 9 deletions apps/www/src/content/docs/components/accordion.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/accordion
primitive: https://www.radix-vue.com/components/accordion.html
---

<script setup>
import { useConfigStore } from '@/stores/config'

const { codeConfig } = useConfigStore()
</script>


<ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />

Expand Down Expand Up @@ -52,20 +58,25 @@ module.exports = {

## Usage

```vue
```vue-vue
<script setup lang="ts">
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
import {
{{codeConfig.prefix}}Accordion,
{{codeConfig.prefix}}AccordionContent,
{{codeConfig.prefix}}AccordionItem,
{{codeConfig.prefix}}AccordionTrigger
} from '{{codeConfig.aliases.components}}/ui/accordion'
</script>
<template>
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
<{{codeConfig.prefix}}Accordion type="single" collapsible>
<{{codeConfig.prefix}}AccordionItem value="item-1">
<{{codeConfig.prefix}}AccordionTrigger>Is it accessible?</{{codeConfig.prefix}}AccordionTrigger>
<{{codeConfig.prefix}}AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>
</{{codeConfig.prefix}}AccordionContent>
</{{codeConfig.prefix}}AccordionItem>
</{{codeConfig.prefix}}Accordion>
</template>
```

2 changes: 1 addition & 1 deletion apps/www/src/content/docs/components/alert-dialog.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import {
{{codeConfig.prefix}}AlertDialogHeader,
{{codeConfig.prefix}}AlertDialogTitle,
{{codeConfig.prefix}}AlertDialogTrigger,
} from '{{codeConfig.alias}}/ui/alert-dialog'
} from '{{codeConfig.aliases.components}}/ui/alert-dialog'
</script>
<template>
Expand Down
19 changes: 12 additions & 7 deletions apps/www/src/content/docs/components/alert.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ title: Alert
description: Displays a callout for user attention.
---

<script setup>
import { useConfigStore } from '@/stores/config'

const { codeConfig } = useConfigStore()
</script>

<ComponentPreview name="AlertDemo" />

Expand All @@ -15,18 +20,18 @@ npx shadcn-vue@latest add alert

## Usage

```vue
```vue-vue
<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { {{codeConfig.prefix}}Alert, {{codeConfig.prefix}}AlertDescription, {{codeConfig.prefix}}AlertTitle } from '{{codeConfig.aliases.components}}/ui/alert'
</script>
<template>
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
<{{codeConfig.prefix}}Alert>
<{{codeConfig.prefix}}AlertTitle>Heads up!</{{codeConfig.prefix}}AlertTitle>
<{{codeConfig.prefix}}AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>
</{{codeConfig.prefix}}AlertDescription>
</{{codeConfig.prefix}}Alert>
</template>
```

Expand Down
16 changes: 11 additions & 5 deletions apps/www/src/content/docs/components/aspect-ratio.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/aspect-ratio
primitive: https://www.radix-vue.com/components/aspect-ratio.html
---

<script setup>
import { useConfigStore } from '@/stores/config'

const { codeConfig } = useConfigStore()
</script>


<ComponentPreview name="AspectRatioDemo" />

Expand Down Expand Up @@ -39,16 +45,16 @@ npm install radix-vue

## Usage

```vue
```vue-vue
<script setup lang="ts">
import { AspectRatio } from '@/components/ui/aspect-ratio'
import { {{codeConfig.prefix}}AspectRatio } from '{{codeConfig.aliases.components}}/ui/aspect-ratio'
</script>
<template>
<div class="w-[450px]">
<AspectRatio :ratio="16 / 9">
<{{codeConfig.prefix}}AspectRatio :ratio="16 / 9">
<img src="..." alt="Image" class="rounded-md object-cover">
</AspectRatio>
</{{codeConfig.prefix}}AspectRatio>
</div>
</template>
```
```
20 changes: 13 additions & 7 deletions apps/www/src/content/docs/components/avatar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/avatar
primitive: https://www.radix-vue.com/components/avatar.html
---

<script setup>
import { useConfigStore } from '@/stores/config'

const { codeConfig } = useConfigStore()
</script>


<ComponentPreview name="AvatarDemo" />

Expand All @@ -18,15 +24,15 @@ npx shadcn-vue@latest add avatar

## Usage

```vue
```vue-vue
<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { {{codeConfig.prefix}}Avatar, {{codeConfig.prefix}}AvatarFallback, {{codeConfig.prefix}}AvatarImage } from '{{codeConfig.aliases.components}}/ui/avatar'
</script>
<template>
<Avatar>
<AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<{{codeConfig.prefix}}Avatar>
<{{codeConfig.prefix}}AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
<{{codeConfig.prefix}}AvatarFallback>CN</{{codeConfig.prefix}}AvatarFallback>
</{{codeConfig.prefix}}Avatar>
</template>
```
```
Loading

0 comments on commit 917d8e1

Please sign in to comment.