bartvdbraak/omnidash
1
0
Fork 0
mirror of https://github.com/bartvdbraak/omnidash.git synced 2025-04-27 15:31:21 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: formatting using linter

Browse source
This commit is contained in:
Bart van der Braak 2024-02-21 03:16:22 +01:00
parent 68ae0e7d1e
commit f6c274b3cc
40 changed files with 298 additions and 313 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/lib/components/ui/button/button.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts">
import { Button as ButtonPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { buttonVariants, type Props, type Events } from ".";
import { Button as ButtonPrimitive } from 'bits-ui';
import { cn } from '$lib/utils';
import { buttonVariants, type Props, type Events } from '.';
type $$Props = Props;
type $$Events = Events;
let className: $$Props["class"] = undefined;
export let variant: $$Props["variant"] = "default";
export let size: $$Props["size"] = "default";
export let builders: $$Props["builders"] = [];
let className: $$Props['class'] = undefined;
export let variant: $$Props['variant'] = 'default';
export let size: $$Props['size'] = 'default';
export let builders: $$Props['builders'] = [];
export { className as class };
</script>

43
src/lib/components/ui/button/index.ts
View file

@ -1,35 +1,34 @@
import type { Button as ButtonPrimitive } from "bits-ui";
import { tv, type VariantProps } from "tailwind-variants";
import Root from "./button.svelte";
import type { Button as ButtonPrimitive } from 'bits-ui';
import { tv, type VariantProps } from 'tailwind-variants';
import Root from './button.svelte';
const buttonVariants = tv({
base: "inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
variants: {
variant: {
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline'
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
default: 'h-9 px-4 py-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
icon: 'h-9 w-9'
}
},
defaultVariants: {
variant: "default",
size: "default",
},
variant: 'default',
size: 'default'
}
});
type Variant = VariantProps<typeof buttonVariants>["variant"];
type Size = VariantProps<typeof buttonVariants>["size"];
type Variant = VariantProps<typeof buttonVariants>['variant'];
type Size = VariantProps<typeof buttonVariants>['size'];
type Props = ButtonPrimitive.Props & {
variant?: Variant;
@ -46,5 +45,5 @@ export {
Root as Button,
type Props as ButtonProps,
type Events as ButtonEvents,
buttonVariants,
buttonVariants
};

10
src/lib/components/ui/calendar/calendar-cell.svelte
View file

@ -1,18 +1,18 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { Calendar as CalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils';
type $$Props = CalendarPrimitive.CellProps;
export let date: $$Props["date"];
let className: $$Props["class"] = undefined;
export let date: $$Props['date'];
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<CalendarPrimitive.Cell
{date}
class={cn(
"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50",
'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50',
className
)}
{...$$restProps}

26
src/lib/components/ui/calendar/calendar-day.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { buttonVariants } from "$lib/components/ui/button";
import { cn } from "$lib/utils";
import { Calendar as CalendarPrimitive } from 'bits-ui';
import { buttonVariants } from '$lib/components/ui/button';
import { cn } from '$lib/utils';
type $$Props = CalendarPrimitive.DayProps;
type $$Events = CalendarPrimitive.DayEvents;
export let date: $$Props["date"];
export let month: $$Props["month"];
let className: $$Props["class"] = undefined;
export let date: $$Props['date'];
export let month: $$Props['month'];
let className: $$Props['class'] = undefined;
export { className as class };
</script>
@ -17,18 +17,18 @@
{date}
{month}
class={cn(
buttonVariants({ variant: "ghost" }),
"h-8 w-8 p-0 font-normal",
buttonVariants({ variant: 'ghost' }),
'h-8 w-8 p-0 font-normal',
// Today
"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
// Selected
"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground",
'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
// Disabled
"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
// Unavailable
"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
// Outside months
"data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30",
'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
className
)}
{...$$restProps}

6
src/lib/components/ui/calendar/calendar-grid-body.svelte
View file

@ -1,10 +1,10 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { Calendar as CalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils';
type $$Props = CalendarPrimitive.GridBodyProps;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>

4
src/lib/components/ui/calendar/calendar-grid-head.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { Calendar as CalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils';
type $$Props = CalendarPrimitive.GridHeadProps;

8
src/lib/components/ui/calendar/calendar-grid-row.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { Calendar as CalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils';
type $$Props = CalendarPrimitive.GridRowProps;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
<CalendarPrimitive.GridRow class={cn('flex', className)} {...$$restProps}>
<slot />
</CalendarPrimitive.GridRow>

8
src/lib/components/ui/calendar/calendar-grid.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { Calendar as CalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils';
type $$Props = CalendarPrimitive.GridProps;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<CalendarPrimitive.Grid class={cn("w-full border-collapse space-y-1", className)} {...$$restProps}>
<CalendarPrimitive.Grid class={cn('w-full border-collapse space-y-1', className)} {...$$restProps}>
<slot />
</CalendarPrimitive.Grid>

8
src/lib/components/ui/calendar/calendar-head-cell.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { Calendar as CalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils';
type $$Props = CalendarPrimitive.HeadCellProps;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<CalendarPrimitive.HeadCell
class={cn("w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground", className)}
class={cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', className)}
{...$$restProps}
>
<slot />

8
src/lib/components/ui/calendar/calendar-header.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { Calendar as CalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils';
type $$Props = CalendarPrimitive.HeaderProps;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<CalendarPrimitive.Header
class={cn("relative flex w-full items-center justify-between pt-1", className)}
class={cn('relative flex w-full items-center justify-between pt-1', className)}
{...$$restProps}
>
<slot />

6
src/lib/components/ui/calendar/calendar-heading.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { Calendar as CalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils';
type $$Props = CalendarPrimitive.HeadingProps;
@ -10,7 +10,7 @@
<CalendarPrimitive.Heading
let:headingValue
class={cn("text-sm font-medium", className)}
class={cn('text-sm font-medium', className)}
{...$$restProps}
>
<slot {headingValue}>

8
src/lib/components/ui/calendar/calendar-months.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts">
import { cn } from "$lib/utils";
import type { HTMLAttributes } from "svelte/elements";
import { cn } from '$lib/utils';
import type { HTMLAttributes } from 'svelte/elements';
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<div
class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
class={cn('mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0', className)}
{...$$restProps}
>
<slot />

14
src/lib/components/ui/calendar/calendar-next-button.svelte
View file

@ -1,21 +1,21 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { ChevronRight } from "radix-icons-svelte";
import { buttonVariants } from "$lib/components/ui/button";
import { cn } from "$lib/utils";
import { Calendar as CalendarPrimitive } from 'bits-ui';
import { ChevronRight } from 'radix-icons-svelte';
import { buttonVariants } from '$lib/components/ui/button';
import { cn } from '$lib/utils';
type $$Props = CalendarPrimitive.NextButtonProps;
type $$Events = CalendarPrimitive.NextButtonEvents;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<CalendarPrimitive.NextButton
on:click
class={cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
buttonVariants({ variant: 'outline' }),
'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
className
)}
{...$$restProps}

14
src/lib/components/ui/calendar/calendar-prev-button.svelte
View file

@ -1,21 +1,21 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { ChevronLeft } from "radix-icons-svelte";
import { buttonVariants } from "$lib/components/ui/button";
import { cn } from "$lib/utils";
import { Calendar as CalendarPrimitive } from 'bits-ui';
import { ChevronLeft } from 'radix-icons-svelte';
import { buttonVariants } from '$lib/components/ui/button';
import { cn } from '$lib/utils';
type $$Props = CalendarPrimitive.PrevButtonProps;
type $$Events = CalendarPrimitive.PrevButtonEvents;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<CalendarPrimitive.PrevButton
on:click
class={cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
buttonVariants({ variant: 'outline' }),
'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
className
)}
{...$$restProps}

16
src/lib/components/ui/calendar/calendar.svelte
View file

@ -1,16 +1,16 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import * as Calendar from ".";
import { cn } from "$lib/utils";
import { Calendar as CalendarPrimitive } from 'bits-ui';
import * as Calendar from '.';
import { cn } from '$lib/utils';
type $$Props = CalendarPrimitive.Props;
type $$Events = CalendarPrimitive.Events;
export let value: $$Props["value"] = undefined;
export let placeholder: $$Props["placeholder"] = undefined;
export let weekdayFormat: $$Props["weekdayFormat"] = "short";
export let value: $$Props['value'] = undefined;
export let placeholder: $$Props['placeholder'] = undefined;
export let weekdayFormat: $$Props['weekdayFormat'] = 'short';
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
@ -18,7 +18,7 @@
bind:value
bind:placeholder
{weekdayFormat}
class={cn("p-3", className)}
class={cn('p-3', className)}
{...$$restProps}
on:keydown
let:months

28
src/lib/components/ui/calendar/index.ts
View file

@ -1,16 +1,16 @@
import Root from "./calendar.svelte";
import Cell from "./calendar-cell.svelte";
import Day from "./calendar-day.svelte";
import Grid from "./calendar-grid.svelte";
import Header from "./calendar-header.svelte";
import Months from "./calendar-months.svelte";
import GridRow from "./calendar-grid-row.svelte";
import Heading from "./calendar-heading.svelte";
import GridBody from "./calendar-grid-body.svelte";
import GridHead from "./calendar-grid-head.svelte";
import HeadCell from "./calendar-head-cell.svelte";
import NextButton from "./calendar-next-button.svelte";
import PrevButton from "./calendar-prev-button.svelte";
import Root from './calendar.svelte';
import Cell from './calendar-cell.svelte';
import Day from './calendar-day.svelte';
import Grid from './calendar-grid.svelte';
import Header from './calendar-header.svelte';
import Months from './calendar-months.svelte';
import GridRow from './calendar-grid-row.svelte';
import Heading from './calendar-heading.svelte';
import GridBody from './calendar-grid-body.svelte';
import GridHead from './calendar-grid-head.svelte';
import HeadCell from './calendar-head-cell.svelte';
import NextButton from './calendar-next-button.svelte';
import PrevButton from './calendar-prev-button.svelte';
export {
Day,
@ -26,5 +26,5 @@ export {
NextButton,
PrevButton,
//
Root as Calendar,
Root as Calendar
};

2
src/lib/components/ui/form/form-button.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import * as Button from "$lib/components/ui/button";
import * as Button from '$lib/components/ui/button';
type $$Props = Button.Props;
</script>

8
src/lib/components/ui/form/form-description.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts">
import * as FormPrimitive from "formsnap";
import { cn } from "$lib/utils";
import * as FormPrimitive from 'formsnap';
import { cn } from '$lib/utils';
type $$Props = FormPrimitive.DescriptionProps;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<FormPrimitive.Description
class={cn("text-[0.8rem] text-muted-foreground", className)}
class={cn('text-[0.8rem] text-muted-foreground', className)}
{...$$restProps}
let:descriptionAttrs
>

12
src/lib/components/ui/form/form-element-field.svelte
View file

@ -1,26 +1,26 @@
<script lang="ts" context="module">
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import type { FormPathLeaves, SuperForm } from "sveltekit-superforms";
import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
type T = Record<string, unknown>;
type U = unknown;
</script>
<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
import type { HTMLAttributes } from "svelte/elements";
import * as FormPrimitive from "formsnap";
import { cn } from "$lib/utils";
import type { HTMLAttributes } from 'svelte/elements';
import * as FormPrimitive from 'formsnap';
import { cn } from '$lib/utils';
type $$Props = FormPrimitive.ElementFieldProps<T, U> & HTMLAttributes<HTMLDivElement>;
export let form: SuperForm<T>;
export let name: U;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<FormPrimitive.ElementField {form} {name} let:constraints let:errors let:tainted let:value>
<div class={cn("space-y-2", className)}>
<div class={cn('space-y-2', className)}>
<slot {constraints} {errors} {tainted} {value} />
</div>
</FormPrimitive.ElementField>

10
src/lib/components/ui/form/form-field-errors.svelte
View file

@ -1,18 +1,18 @@
<script lang="ts">
import * as FormPrimitive from "formsnap";
import { cn } from "$lib/utils";
import * as FormPrimitive from 'formsnap';
import { cn } from '$lib/utils';
type $$Props = FormPrimitive.FieldErrorsProps & {
errorClasses?: string | undefined | null;
};
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
export let errorClasses: $$Props["class"] = undefined;
export let errorClasses: $$Props['class'] = undefined;
</script>
<FormPrimitive.FieldErrors
class={cn("text-[0.8rem] font-medium text-destructive", className)}
class={cn('text-[0.8rem] font-medium text-destructive', className)}
{...$$restProps}
let:errors
let:fieldErrorsAttrs

12
src/lib/components/ui/form/form-field.svelte
View file

@ -1,26 +1,26 @@
<script lang="ts" context="module">
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import type { FormPath, SuperForm } from "sveltekit-superforms";
import type { FormPath, SuperForm } from 'sveltekit-superforms';
type T = Record<string, unknown>;
type U = unknown;
</script>
<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
import type { HTMLAttributes } from "svelte/elements";
import * as FormPrimitive from "formsnap";
import { cn } from "$lib/utils";
import type { HTMLAttributes } from 'svelte/elements';
import * as FormPrimitive from 'formsnap';
import { cn } from '$lib/utils';
type $$Props = FormPrimitive.FieldProps<T, U> & HTMLAttributes<HTMLElement>;
export let form: SuperForm<T>;
export let name: U;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<FormPrimitive.Field {form} {name} let:constraints let:errors let:tainted let:value>
<div class={cn("space-y-2", className)}>
<div class={cn('space-y-2', className)}>
<slot {constraints} {errors} {tainted} {value} />
</div>
</FormPrimitive.Field>

10
src/lib/components/ui/form/form-fieldset.svelte
View file

@ -1,20 +1,20 @@
<script lang="ts" context="module">
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import type { FormPath, SuperForm } from "sveltekit-superforms";
import type { FormPath, SuperForm } from 'sveltekit-superforms';
type T = Record<string, unknown>;
type U = unknown;
</script>
<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
import * as FormPrimitive from "formsnap";
import { cn } from "$lib/utils";
import * as FormPrimitive from 'formsnap';
import { cn } from '$lib/utils';
type $$Props = FormPrimitive.FieldsetProps<T, U>;
export let form: SuperForm<T>;
export let name: U;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
@ -25,7 +25,7 @@
let:errors
let:tainted
let:value
class={cn("space-y-2", className)}
class={cn('space-y-2', className)}
>
<slot {constraints} {errors} {tainted} {value} />
</FormPrimitive.Fieldset>

12
src/lib/components/ui/form/form-label.svelte
View file

@ -1,17 +1,17 @@
<script lang="ts">
import type { Label as LabelPrimitive } from "bits-ui";
import { getFormControl } from "formsnap";
import { cn } from "$lib/utils";
import { Label } from "$lib/components/ui/label";
import type { Label as LabelPrimitive } from 'bits-ui';
import { getFormControl } from 'formsnap';
import { cn } from '$lib/utils';
import { Label } from '$lib/components/ui/label';
type $$Props = LabelPrimitive.Props;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
const { labelAttrs } = getFormControl();
</script>
<Label {...$labelAttrs} class={cn("data-[fs-error]:text-destructive", className)} {...$$restProps}>
<Label {...$labelAttrs} class={cn('data-[fs-error]:text-destructive', className)} {...$$restProps}>
<slot {labelAttrs} />
</Label>

8
src/lib/components/ui/form/form-legend.svelte
View file

@ -1,16 +1,16 @@
<script lang="ts">
import * as FormPrimitive from "formsnap";
import { cn } from "$lib/utils";
import * as FormPrimitive from 'formsnap';
import { cn } from '$lib/utils';
type $$Props = FormPrimitive.LegendProps;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<FormPrimitive.Legend
{...$$restProps}
class={cn("text-sm font-medium leading-none data-[fs-error]:text-destructive", className)}
class={cn('text-sm font-medium leading-none data-[fs-error]:text-destructive', className)}
let:legendAttrs
>
<slot {legendAttrs} />

20
src/lib/components/ui/form/index.ts
View file

@ -1,12 +1,12 @@
import * as FormPrimitive from "formsnap";
import Description from "./form-description.svelte";
import Label from "./form-label.svelte";
import FieldErrors from "./form-field-errors.svelte";
import Field from "./form-field.svelte";
import Button from "./form-button.svelte";
import Fieldset from "./form-fieldset.svelte";
import Legend from "./form-legend.svelte";
import ElementField from "./form-element-field.svelte";
import * as FormPrimitive from 'formsnap';
import Description from './form-description.svelte';
import Label from './form-label.svelte';
import FieldErrors from './form-field-errors.svelte';
import Field from './form-field.svelte';
import Button from './form-button.svelte';
import Fieldset from './form-fieldset.svelte';
import Legend from './form-legend.svelte';
import ElementField from './form-element-field.svelte';
const Control = FormPrimitive.Control;
@ -29,5 +29,5 @@ export {
Fieldset as FormFieldset,
Legend as FormLegend,
ElementField as FormElementField,
Button as FormButton,
Button as FormButton
};

4
src/lib/components/ui/label/index.ts
View file

@ -1,7 +1,7 @@
import Root from "./label.svelte";
import Root from './label.svelte';
export {
Root,
//
Root as Label,
Root as Label
};

8
src/lib/components/ui/label/label.svelte
View file

@ -1,16 +1,16 @@
<script lang="ts">
import { Label as LabelPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
import { Label as LabelPrimitive } from 'bits-ui';
import { cn } from '$lib/utils';
type $$Props = LabelPrimitive.Props;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<LabelPrimitive.Root
class={cn(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
className
)}
{...$$restProps}

99
src/routes/(auth)/auth/(components)/register-form.svelte
View file

@ -9,59 +9,52 @@
</script>
<div class="flex flex-col space-y-2 text-center">
<h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
<p class="pb-6 text-sm text-muted-foreground">
Enter your details below to create a new account
</p>
<h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
<p class="pb-6 text-sm text-muted-foreground">Enter your details below to create a new account</p>
</div>
<div class={cn('grid gap-6')} {...$$restProps}>
<form
method="POST"
action="?/register"
use:enhance={() => {
isLoading = true;
return async ({ update }) => {
isLoading = false;
update();
};
}}
>
<div class="grid gap-2">
<div class="grid gap-2">
<Label for="email">Name</Label>
<Input id="name" name="name" type="name" disabled={isLoading} />
</div>
<div class="grid gap-2">
<Label for="email">Email</Label>
<Input
id="email"
name="email"
type="email"
autocapitalize="none"
autocomplete="email"
autocorrect="off"
disabled={isLoading}
/>
</div>
<div class="grid gap-2">
<Label for="password">Password</Label>
<Input id="password" name="password" type="password" disabled={isLoading} />
</div>
<div class="grid gap-2">
<Label for="passwordConfirm">Confirm password</Label>
<Input
id="passwordConfirm"
name="passwordConfirm"
type="password"
disabled={isLoading}
/>
</div>
<Button type="submit" disabled={isLoading}>
{#if isLoading}
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
{/if}
Register
</Button>
</div>
</form>
<form
method="POST"
action="?/register"
use:enhance={() => {
isLoading = true;
return async ({ update }) => {
isLoading = false;
update();
};
}}
>
<div class="grid gap-2">
<div class="grid gap-2">
<Label for="email">Name</Label>
<Input id="name" name="name" type="name" disabled={isLoading} />
</div>
<div class="grid gap-2">
<Label for="email">Email</Label>
<Input
id="email"
name="email"
type="email"
autocapitalize="none"
autocomplete="email"
autocorrect="off"
disabled={isLoading}
/>
</div>
<div class="grid gap-2">
<Label for="password">Password</Label>
<Input id="password" name="password" type="password" disabled={isLoading} />
</div>
<div class="grid gap-2">
<Label for="passwordConfirm">Confirm password</Label>
<Input id="passwordConfirm" name="passwordConfirm" type="password" disabled={isLoading} />
</div>
<Button type="submit" disabled={isLoading}>
{#if isLoading}
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
{/if}
Register
</Button>
</div>
</form>
</div>

18
src/routes/(auth)/auth/(components)/sso-form.svelte
View file

@ -1,19 +1,21 @@
<script lang="ts">
import { Icons } from "$lib/components/site";
import PocketBase from 'pocketbase';
import { Icons } from '$lib/components/site';
import PocketBase from 'pocketbase';
import { PUBLIC_CLIENT_PB } from '$env/static/public';
import { enhance } from "$app/forms";
import { Button } from "$lib/components/ui/button";
import { Separator } from "$lib/components/ui/separator";
import { enhance } from '$app/forms';
import { Button } from '$lib/components/ui/button';
import { Separator } from '$lib/components/ui/separator';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
import { ChevronDown } from "radix-icons-svelte";
import { ChevronDown } from 'radix-icons-svelte';
export let isLoading = false;
export let providers: { name: string, icon?: any, displayName: string }[];
/* eslint-disable @typescript-eslint/no-explicit-any */
export let providers: { name: string; icon?: any; displayName: string }[];
let currentProvider = providers[0];
const pb = new PocketBase(PUBLIC_CLIENT_PB);
let oauth2Form: HTMLFormElement;
let oauth2Form: HTMLFormElement;
async function loginWithOauth2(provider: string) {
try {
await pb.collection('users').authWithOAuth2({ provider });

2
src/routes/(auth)/auth/+page.svelte
View file

@ -5,7 +5,7 @@
import type { PageData } from './$types.js';
import { LoginForm, RegisterForm, SSOForm } from './(components)';
export let form;
export let data: PageData;
export let data: PageData;
const { providers } = data;
const providersWithIcons = providers.map((provider) => ({
...provider,

23
src/routes/(user)/settings/(components)/sidebar-nav.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import { cn } from "$lib/utils";
import { page } from "$app/stores";
import { Button } from "$lib/components/ui/button";
import { cubicInOut } from "svelte/easing";
import { crossfade } from "svelte/transition";
import { cn } from '$lib/utils';
import { page } from '$app/stores';
import { Button } from '$lib/components/ui/button';
import { cubicInOut } from 'svelte/easing';
import { crossfade } from 'svelte/transition';
let className: string | undefined | null = undefined;
export let items: { href: string; title: string }[];
@ -11,28 +11,25 @@
const [send, receive] = crossfade({
duration: 250,
easing: cubicInOut,
easing: cubicInOut
});
</script>
<nav class={cn("flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1", className)}>
<nav class={cn('flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1', className)}>
{#each items as item}
{@const isActive = $page.url.pathname === item.href}
<Button
href={item.href}
variant="ghost"
class={cn(
!isActive && "hover:underline",
"relative justify-start hover:bg-transparent"
)}
class={cn(!isActive && 'hover:underline', 'relative justify-start hover:bg-transparent')}
data-sveltekit-noscroll
>
{#if isActive}
<div
class="absolute inset-0 rounded-md bg-muted"
in:send={{ key: "active-sidebar-tab" }}
out:receive={{ key: "active-sidebar-tab" }}
in:send={{ key: 'active-sidebar-tab' }}
out:receive={{ key: 'active-sidebar-tab' }}
/>
{/if}
<div class="relative">

22
src/routes/(user)/settings/+layout.svelte
View file

@ -1,29 +1,27 @@
<script lang="ts">
import { Separator } from "$lib/components/ui/separator";
import SidebarNav from "./(components)/sidebar-nav.svelte";
import { Separator } from '$lib/components/ui/separator';
import SidebarNav from './(components)/sidebar-nav.svelte';
const sidebarNavItems = [
{
title: "Profile",
href: "/settings",
title: 'Profile',
href: '/settings'
},
{
title: "Account",
href: "/settings/account",
title: 'Account',
href: '/settings/account'
},
{
title: "Appearance",
href: "/settings/appearance",
},
title: 'Appearance',
href: '/settings/appearance'
}
];
</script>
<div class="space-y-6 p-10 pb-16">
<div class="space-y-0.5">
<h2 class="text-2xl font-bold tracking-tight">Settings</h2>
<p class="text-muted-foreground">
Manage your account settings and set e-mail preferences.
</p>
<p class="text-muted-foreground">Manage your account settings and set e-mail preferences.</p>
</div>
<Separator class="my-6" />
<div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">

18
src/routes/(user)/settings/+page.server.ts
View file

@ -1,12 +1,12 @@
import type { PageServerLoad } from "./$types";
import { superValidate } from "sveltekit-superforms";
import { zod } from "sveltekit-superforms/adapters";
import { profileFormSchema } from "./profile-form.svelte";
import { fail, type Actions } from "@sveltejs/kit";
import type { PageServerLoad } from './$types';
import { superValidate } from 'sveltekit-superforms';
import { zod } from 'sveltekit-superforms/adapters';
import { profileFormSchema } from './profile-form.svelte';
import { fail, type Actions } from '@sveltejs/kit';
export const load: PageServerLoad = async () => {
return {
form: await superValidate(zod(profileFormSchema)),
form: await superValidate(zod(profileFormSchema))
};
};
@ -15,12 +15,12 @@ export const actions: Actions = {
const form = await superValidate(request, zod(profileFormSchema));
if (!form.valid) {
return fail(400, {
form,
form
});
}
await locals.pocketBase.collection('users').update(locals.id, form.data);
return {
form,
form
};
},
}
};

6
src/routes/(user)/settings/+page.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import type { PageData } from "./$types";
import ProfileForm from "./profile-form.svelte";
import { Separator } from "$lib/components/ui/separator";
import type { PageData } from './$types';
import ProfileForm from './profile-form.svelte';
import { Separator } from '$lib/components/ui/separator';
export let data: PageData;
</script>

34
src/routes/(user)/settings/account/+page.server.ts
View file

@ -1,17 +1,17 @@
import type { PageServerLoad } from "./$types";
import { superValidate } from "sveltekit-superforms";
import { zod } from "sveltekit-superforms/adapters";
import { usernameFormSchema } from "./username-form.svelte";
import { emailRequestFormSchema, emailConfirmFormSchema } from "./email-form.svelte";
import { passwordFormSchema } from "./password-form.svelte";
import { fail, type Actions } from "@sveltejs/kit";
import type { PageServerLoad } from './$types';
import { superValidate } from 'sveltekit-superforms';
import { zod } from 'sveltekit-superforms/adapters';
import { usernameFormSchema } from './username-form.svelte';
import { emailRequestFormSchema, emailConfirmFormSchema } from './email-form.svelte';
import { passwordFormSchema } from './password-form.svelte';
import { fail, type Actions } from '@sveltejs/kit';
export const load: PageServerLoad = async () => {
return {
usernameForm: await superValidate(zod(usernameFormSchema)),
emailRequestForm: await superValidate(zod(emailRequestFormSchema)),
emailConfirmForm: await superValidate(zod(emailConfirmFormSchema)),
passwordForm: await superValidate(zod(passwordFormSchema)),
passwordForm: await superValidate(zod(passwordFormSchema))
};
};
@ -20,50 +20,50 @@ export const actions: Actions = {
const form = await superValidate(request, zod(usernameFormSchema));
if (!form.valid) {
return fail(400, {
form,
form
});
}
await locals.pocketBase.collection('users').update(locals.id, form.data);
return {
form,
form
};
},
emailRequest: async ({ request, locals }) => {
const form = await superValidate(request, zod(emailRequestFormSchema));
if (!form.valid) {
return fail(400, {
form,
form
});
}
await locals.pocketBase.collection('users').requestEmailChange(form.data.newEmail);
return {
form,
form
};
},
emailConfirm: async ({ request, locals }) => {
const form = await superValidate(request, zod(emailConfirmFormSchema));
if (!form.valid) {
return fail(400, {
form,
form
});
}
await locals.pocketBase
.collection('users')
.confirmEmailChange(form.data.token, form.data.password);
return {
form,
form
};
},
password: async ({ request, locals }) => {
const form = await superValidate(request, zod(passwordFormSchema));
if (!form.valid) {
return fail(400, {
form,
form
});
}
await locals.pocketBase.collection('users').update(locals.id, form.data);
return {
form,
form
};
},
}
};

20
src/routes/(user)/settings/account/+page.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import { Separator } from "$lib/components/ui/separator";
import type { PageData } from "./$types";
import UsernameForm from "./username-form.svelte";
import EmailForm from "./email-form.svelte";
import PasswordForm from "./password-form.svelte";
import { Separator } from '$lib/components/ui/separator';
import type { PageData } from './$types';
import UsernameForm from './username-form.svelte';
import EmailForm from './email-form.svelte';
import PasswordForm from './password-form.svelte';
export let data: PageData;
</script>
@ -11,12 +11,14 @@
<div class="space-y-6">
<div>
<h3 class="text-lg font-medium">Account</h3>
<p class="text-sm text-muted-foreground">
Update your account settings.
</p>
<p class="text-sm text-muted-foreground">Update your account settings.</p>
</div>
<Separator />
<UsernameForm user={data.user} data={data.usernameForm} />
<EmailForm user={data.user} requestData={data.emailRequestForm} confirmData={data.emailConfirmForm} />
<EmailForm
user={data.user}
requestData={data.emailRequestForm}
confirmData={data.emailConfirmForm}
/>
<PasswordForm data={data.passwordForm} />
</div>

18
src/routes/(user)/settings/appearance/+page.server.ts
View file

@ -1,12 +1,12 @@
import { superValidate } from "sveltekit-superforms";
import { zod } from "sveltekit-superforms/adapters";
import type { PageServerLoad } from "../$types";
import { appearanceFormSchema } from "./appearance-form.svelte";
import { fail, type Actions } from "@sveltejs/kit";
import { superValidate } from 'sveltekit-superforms';
import { zod } from 'sveltekit-superforms/adapters';
import type { PageServerLoad } from '../$types';
import { appearanceFormSchema } from './appearance-form.svelte';
import { fail, type Actions } from '@sveltejs/kit';
export const load: PageServerLoad = async () => {
return {
form: await superValidate(zod(appearanceFormSchema)),
form: await superValidate(zod(appearanceFormSchema))
};
};
@ -15,12 +15,12 @@ export const actions: Actions = {
const form = await superValidate(request, zod(appearanceFormSchema));
if (!form.valid) {
return fail(400, {
form,
form
});
}
await locals.pocketBase.collection('users').update(locals.id, form.data);
return {
form,
form
};
},
}
};

6
src/routes/(user)/settings/appearance/+page.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import { Separator } from "$lib/components/ui/separator";
import type { PageData } from "./$types";
import AppearanceForm from "./appearance-form.svelte";
import { Separator } from '$lib/components/ui/separator';
import type { PageData } from './$types';
import AppearanceForm from './appearance-form.svelte';
export let data: PageData;
</script>

14
src/routes/(user)/settings/appearance/appearance-form.svelte
View file

@ -13,11 +13,7 @@
<script lang="ts">
import { browser, dev } from '$app/environment';
import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
import SuperDebug, {
type SuperValidated,
type Infer,
superForm,
} from 'sveltekit-superforms';
import SuperDebug, { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
import * as Card from '$lib/components/ui/card';
import * as Form from '$lib/components/ui/form';
import * as RadioGroup from '$lib/components/ui/radio-group';
@ -25,7 +21,7 @@
import { zodClient } from 'sveltekit-superforms/adapters';
import { toast } from 'svelte-sonner';
import { Icons } from '$lib/components/site';
import { resetMode, setMode } from 'mode-watcher';
import { setMode } from 'mode-watcher';
export let data: SuperValidated<Infer<AppearanceFormSchema>>;
let isLoading = false;
@ -38,7 +34,7 @@
},
onUpdated: ({ form: f }) => {
isLoading = false;
setMode(f.data.appearanceMode)
setMode(f.data.appearanceMode);
if (f.valid) {
toast.success('Appearance has been updated.');
} else {
@ -52,9 +48,7 @@
<Card.Root>
<Card.Header>
<Card.Title>Change your mode</Card.Title>
<Card.Description>
You can modify the mode for your theme preference.
</Card.Description>
<Card.Description>You can modify the mode for your theme preference.</Card.Description>
</Card.Header>
<Card.Content>
<form method="POST" use:enhance class="space-y-2">

4
src/routes/+layout.svelte
View file

@ -7,10 +7,10 @@
import DataIndicator from '$lib/components/site/data-indicator.svelte';
import { fly } from 'svelte/transition';
import { Toaster } from 'svelte-sonner';
import { } from "mode-watcher";
import {} from 'mode-watcher';
export let data: LayoutData;
if (data.user?.appearanceMode) {
setMode(data.user.appearanceMode);
}