Skip to content

Commit

Permalink
docs(registry): add sonner component
Browse files Browse the repository at this point in the history
  • Loading branch information
adrian-ub committed Oct 25, 2024
1 parent 14dd909 commit 0a7831f
Show file tree
Hide file tree
Showing 9 changed files with 349 additions and 17 deletions.
1 change: 1 addition & 0 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"astro": "^4.16.6",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"ngx-sonner": "^2.0.2",
"rxjs": "^7.8.1",
"tailwind-merge": "^2.5.2",
"tailwindcss": "^3.4.13",
Expand Down
6 changes: 6 additions & 0 deletions docs/src/config/docs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,12 @@ export const docsConfig: TDocsConfig = {
href: '/docs/components/skeleton',
items: [],
},
{
title: 'Sonner',
href: '/docs/components/sonner',
items: [],
label: 'New',
},
{
title: 'Switch',
href: '/docs/components/switch',
Expand Down
100 changes: 100 additions & 0 deletions docs/src/content/docs/components/sonner.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
---
title: Sonner
description: An opinionated toast component for Angular.
links:
doc: https://tutkli.github.io/ngx-sonner/
---

<ComponentPreview name="sonner-demo" />

## About

ngx-sonner is built and maintained by [tutkli](https://github.com/tutkli).

## Installation

<Tabs defaultValue="cli">

<TabsList>
<TabsTrigger value="cli">CLI</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

<Steps>

<Step>Run the following command:</Step>

```bash
npx shadcn-ng@latest add sonner
```

<Step>Add the Toaster component</Step>

```angular-ts
import { Component } from '@angular/core'
import { ToasterComponent } from '@/components/ui/sonner'
@Component({
standalone: true,
selector: 'app-root',
imports: [ToasterComponent],
template: `
<ub-toaster />
`,
})
export class AppComponent {}
```

</Steps>

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install ngx-sonner
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="sonner" />

<Step>Add the Toaster component</Step>

```angular-ts
import { Component } from '@angular/core'
import { ToasterComponent } from '@/components/ui/sonner'
@Component({
standalone: true,
selector: 'app-root',
imports: [ToasterComponent],
template: `
<ub-toaster />
`,
})
export class AppComponent {}
```

</Steps>

</TabsContent>

</Tabs>

## Usage

```ts
import { toast } from "ngx-sonner"
```

```ts
toast("Event has been created.")
```
29 changes: 29 additions & 0 deletions docs/src/registry/default/example/sonner-demo.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { UbButtonDirective } from '@/registry/default/ui/button'
import { ToasterComponent } from '@/registry/default/ui/sonner'

import { Component } from '@angular/core'
import { toast } from 'ngx-sonner'

@Component({
standalone: true,
selector: 'sonner-demo-default',
imports: [ToasterComponent, UbButtonDirective],
template: `
<ub-toaster />
<button ubButton variant="outline" (click)="onClick()">Show Toast</button>
`,
})
export class SonnerDemoDefault {
protected onClick(): void {
toast('Event has been created', {
description: 'Sunday, December 03, 2023 at 9:00 AM',
action: {
label: 'Undo',
// eslint-disable-next-line no-console
onClick: () => console.log('Undo'),
},
})
}
}

export default SonnerDemoDefault
73 changes: 73 additions & 0 deletions docs/src/registry/default/ui/sonner.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { booleanAttribute, Component, input, numberAttribute } from '@angular/core'
import { NgxSonnerToaster, type ToasterProps } from 'ngx-sonner'

@Component({
standalone: true,
selector: 'ub-toaster',
imports: [NgxSonnerToaster],
template: `
<ngx-sonner-toaster
class="toaster group"
[invert]="invert()"
[theme]="theme()"
[position]="position()"
[hotKey]="hotKey()"
[richColors]="richColors()"
[expand]="expand()"
[duration]="duration()"
[visibleToasts]="visibleToasts()"
[closeButton]="closeButton()"
[toastOptions]="toastOptions()"
[offset]="offset()"
[dir]="dir()"
[class]="_class()"
[style]="_style()"
/>
`,
})
export class ToasterComponent {
invert = input<ToasterProps['invert'], boolean | string>(false, {
transform: booleanAttribute,
})

theme = input<ToasterProps['theme']>('system')
position = input<ToasterProps['position']>('bottom-right')
hotKey = input<ToasterProps['hotkey']>(['altKey', 'KeyT'])
richColors = input<ToasterProps['richColors'], boolean | string>(false, {
transform: booleanAttribute,
})

expand = input<ToasterProps['expand'], boolean | string>(false, {
transform: booleanAttribute,
})

duration = input<ToasterProps['duration'], number | string>(4000, {
transform: numberAttribute,
})

visibleToasts = input<ToasterProps['visibleToasts'], number | string>(
3,
{ transform: numberAttribute },
)

closeButton = input<ToasterProps['closeButton'], boolean | string>(false, {
transform: booleanAttribute,
})

toastOptions = input<ToasterProps['toastOptions']>({
classes: {
toast:
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
description: 'group-[.toast]:text-muted-foreground',
actionButton:
'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
cancelButton:
'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
},
})

offset = input<ToasterProps['offset']>(null)
dir = input<ToasterProps['dir']>('auto')
_class = input('', { alias: 'class' })
_style = input<Record<string, string>>({}, { alias: 'style' })
}
29 changes: 29 additions & 0 deletions docs/src/registry/new-york/example/sonner-demo.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { UbButtonDirective } from '@/registry/new-york/ui/button'
import { ToasterComponent } from '@/registry/new-york/ui/sonner'

import { Component } from '@angular/core'
import { toast } from 'ngx-sonner'

@Component({
standalone: true,
selector: 'sonner-demo-new-york',
imports: [ToasterComponent, UbButtonDirective],
template: `
<ub-toaster />
<button ubButton variant="outline" (click)="onClick()">Show Toast</button>
`,
})
export class SonnerDemoNewYork {
protected onClick(): void {
toast('Event has been created', {
description: 'Sunday, December 03, 2023 at 9:00 AM',
action: {
label: 'Undo',
// eslint-disable-next-line no-console
onClick: () => console.log('Undo'),
},
})
}
}

export default SonnerDemoNewYork
73 changes: 73 additions & 0 deletions docs/src/registry/new-york/ui/sonner.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { booleanAttribute, Component, input, numberAttribute } from '@angular/core'
import { NgxSonnerToaster, type ToasterProps } from 'ngx-sonner'

@Component({
standalone: true,
selector: 'ub-toaster',
imports: [NgxSonnerToaster],
template: `
<ngx-sonner-toaster
class="toaster group"
[invert]="invert()"
[theme]="theme()"
[position]="position()"
[hotKey]="hotKey()"
[richColors]="richColors()"
[expand]="expand()"
[duration]="duration()"
[visibleToasts]="visibleToasts()"
[closeButton]="closeButton()"
[toastOptions]="toastOptions()"
[offset]="offset()"
[dir]="dir()"
[class]="_class()"
[style]="_style()"
/>
`,
})
export class ToasterComponent {
invert = input<ToasterProps['invert'], boolean | string>(false, {
transform: booleanAttribute,
})

theme = input<ToasterProps['theme']>('system')
position = input<ToasterProps['position']>('bottom-right')
hotKey = input<ToasterProps['hotkey']>(['altKey', 'KeyT'])
richColors = input<ToasterProps['richColors'], boolean | string>(false, {
transform: booleanAttribute,
})

expand = input<ToasterProps['expand'], boolean | string>(false, {
transform: booleanAttribute,
})

duration = input<ToasterProps['duration'], number | string>(4000, {
transform: numberAttribute,
})

visibleToasts = input<ToasterProps['visibleToasts'], number | string>(
3,
{ transform: numberAttribute },
)

closeButton = input<ToasterProps['closeButton'], boolean | string>(false, {
transform: booleanAttribute,
})

toastOptions = input<ToasterProps['toastOptions']>({
classes: {
toast:
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
description: 'group-[.toast]:text-muted-foreground',
actionButton:
'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
cancelButton:
'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
},
})

offset = input<ToasterProps['offset']>(null)
dir = input<ToasterProps['dir']>('auto')
_class = input('', { alias: 'class' })
_style = input<Record<string, string>>({}, { alias: 'style' })
}
6 changes: 6 additions & 0 deletions docs/src/registry/registry-ui.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,12 @@ export const ui: Registry = [
type: 'registry:ui',
files: ['ui/skeleton.ts'],
},
{
name: 'sonner',
type: 'registry:ui',
dependencies: ['ngx-sonner'],
files: ['ui/sonner.ts'],
},
{
name: 'switch',
type: 'registry:ui',
Expand Down
Loading

0 comments on commit 0a7831f

Please sign in to comment.