Daisy UI #14

Merged
BenjaminPalko merged 28 commits from daisy-ui into master 2024-12-19 21:20:21 -05:00
56 changed files with 192 additions and 182 deletions
Showing only changes of commit 783f0553f3 - Show all commits

View file

@ -1,8 +1,14 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"trailingComma": "es5",
"printWidth": 100,
piopi commented 2024-12-19 21:02:26 -05:00 (Migrated from github.com)
Review

🙈

🙈
"endOfLine": "lf",
"arrowParens": "always",
"jsxSingleQuote": false,
"semi": true,
"quoteProps": "as-needed",
"tabWidth": 4,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"overrides": [
{

View file

@ -7,11 +7,11 @@ const config = {
'@storybook/addon-interactions',
'@storybook/addon-styling-webpack',
'@storybook/addon-svelte-csf',
'@storybook/addon-themes'
'@storybook/addon-themes',
],
framework: {
name: '@storybook/sveltekit',
options: {}
}
options: {},
},
};
export default config;
export default config;

View file

@ -1,4 +1,4 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import '@flaticon/flaticon-uicons/css/all/all';
@import '@flaticon/flaticon-uicons/css/all/all';

View file

@ -8,21 +8,21 @@ const preview = {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i
}
}
date: /Date$/i,
},
},
},
decorators: [
withThemeByDataAttribute({
themes: {
light: 'light',
dark: 'dark',
night: 'night'
night: 'night',
},
defaultTheme: 'dark',
attributeName: 'data-theme'
})
]
attributeName: 'data-theme',
}),
],
};
export default preview;
export default preview;

View file

@ -66,4 +66,4 @@ bun build
You can preview the production build with `bun run preview`.
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

View file

@ -1,3 +1,3 @@
# Experienced Issues
- https://github.com/saadeghi/daisyui/issues/811
- https://github.com/saadeghi/daisyui/issues/811

View file

@ -18,17 +18,17 @@ export default ts.config(
languageOptions: {
globals: {
...globals.browser,
...globals.node
}
}
...globals.node,
},
},
},
{
files: ['**/*.svelte'],
languageOptions: {
parserOptions: {
parser: ts.parser
}
}
parser: ts.parser,
},
},
}
);

View file

@ -3,8 +3,8 @@ import { defineConfig } from '@playwright/test';
export default defineConfig({
webServer: {
command: 'npm run build && npm run preview',
port: 4173
port: 4173,
},
testDir: 'e2e'
testDir: 'e2e',
});

View file

@ -1,6 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
autoprefixer: {},
},
};

View file

@ -5,4 +5,4 @@
:root {
@apply text-base-content;
}
}

3
src/app.d.ts vendored
View file

@ -2,10 +2,9 @@
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
interface Locals {
user: import("lucia").User | null;
user: import('lucia').User | null;
session: import('lucia').Session | null;
}
piopi commented 2024-12-19 21:03:51 -05:00 (Migrated from github.com)
Review

Will need to remove this when we switch to Clerk, maybe add a Todo to not forget it ?

Will need to remove this when we switch to Clerk, maybe add a Todo to not forget it ?
// interface PageData {}

View file

@ -4,8 +4,8 @@
const { Story } = defineMeta({
title: 'Navigation/Navbar',
component: Navbar
component: Navbar,
});
</script>
<Story name="Default" args={{ title: 'Storybook' }} />
<Story name="Default" args={{ title: 'Storybook' }} />

View file

@ -9,4 +9,4 @@
</header>
<style>
</style>
</style>

View file

@ -1,3 +1,3 @@
import Navbar from './Navbar.svelte';
export default Navbar;
export default Navbar;

View file

@ -2,4 +2,4 @@
let { active, label, onclick } = $props();
</script>
<input aria-label={label} type="radio" role="tab" class="tab" class:tab-active={active} {onclick} />
<input aria-label={label} type="radio" role="tab" class="tab" class:tab-active={active} {onclick} />

View file

@ -10,13 +10,13 @@
argTypes: {
size: {
control: 'select',
options: ['xs', 'sm', 'rg', 'lg']
options: ['xs', 'sm', 'rg', 'lg'],
},
variant: {
control: 'select',
options: ['none', 'bordered', 'lifted', 'boxed']
}
}
options: ['none', 'bordered', 'lifted', 'boxed'],
},
},
});
</script>
@ -24,4 +24,4 @@
<Tabs tabs={['Tab 1', 'Tab 2']} {...args} />
{/snippet}
<Story name="Default" args={{}} children={template} />
<Story name="Default" args={{}} children={template} />

View file

@ -33,4 +33,4 @@
/>
{/key}
{/each}
</div>
</div>

View file

@ -1,4 +1,4 @@
import Tabs from './Tabs.svelte';
export default Tabs;
export { default as Tabs } from './Tabs.svelte';
export { default as Tabs } from './Tabs.svelte';

View file

@ -1,4 +1,4 @@
import Navbar from './Navbar';
import Tabs from './Tabs';
export { Navbar, Tabs };
export { Navbar, Tabs };

View file

@ -7,7 +7,7 @@
title: 'Actions/Button',
component: Button,
args: {
onClick: fn()
onClick: fn(),
},
argTypes: {
color: {
@ -22,23 +22,23 @@
'info',
'success',
'warning',
'error'
]
'error',
],
},
outline: {
control: 'boolean'
control: 'boolean',
},
size: {
control: 'select',
options: ['Default', 'xs', 'sm', 'lg'],
defaultValue: 'Default'
defaultValue: 'Default',
},
type: {
control: 'select',
options: ['button', 'reset', 'submit']
}
}
options: ['button', 'reset', 'submit'],
},
},
});
</script>
<Story name="Default" args={{ label: 'Button', color: 'primary' }} />
<Story name="Default" args={{ label: 'Button', color: 'primary' }} />

View file

@ -25,7 +25,7 @@
responsive = false,
size,
type = 'button',
wide = false
wide = false,
}: Props = $props();
</script>
@ -54,4 +54,4 @@
{label}
</button>
<style></style>
<style></style>

View file

@ -1,3 +1,3 @@
import Button from './Button.svelte';
export default Button;
export default Button;

View file

@ -4,8 +4,8 @@
const { Story } = defineMeta({
title: 'Feedback/Loader',
component: Loader
component: Loader,
});
</script>
<Story name="Default" args={{}} />
<Story name="Default" args={{}} />

View file

@ -48,4 +48,4 @@
transform: rotate(-360deg);
}
}
</style>
</style>

View file

@ -1,3 +1,3 @@
import Loader from './Loader.svelte';
export default Loader;
export default Loader;

View file

@ -17,22 +17,22 @@
'info',
'success',
'warning',
'error'
]
'error',
],
},
bordered: {
control: 'boolean'
control: 'boolean',
},
size: {
control: 'select',
options: ['Default', 'xs', 'sm', 'lg'],
defaultValue: 'Default'
defaultValue: 'Default',
},
type: {
control: 'select',
options: ['email', 'password', 'search', 'tel', 'text', 'url']
}
}
options: ['email', 'password', 'search', 'tel', 'text', 'url'],
},
},
});
</script>
@ -42,4 +42,4 @@
<Story name="Text Label" args={{ color: 'primary', name: 'text', start: 'Text' }} />
<Story name="Icon Start" args={{ color: 'secondary', name: 'text', start: icon }} />
<Story name="Icon End" args={{ color: 'secondary', name: 'text', end: icon }} />
<Story name="Icon End" args={{ color: 'secondary', name: 'text', end: icon }} />

View file

@ -30,7 +30,7 @@
name,
placeholder,
size,
type = 'text'
type = 'text',
}: Props = $props();
</script>
@ -65,4 +65,4 @@
</label>
<style>
</style>
</style>

View file

@ -1,3 +1,3 @@
import TextInput from './TextInput.svelte';
export default TextInput;
export default TextInput;

View file

@ -1,2 +1,2 @@
// place files you want to import through the `$lib` alias in this folder.
export * from './components';
export * from './components';

View file

@ -8,7 +8,7 @@ export interface Configuration {
export const LoadConfig = (): Configuration => {
const { success, data, error } = z
.object({
VITE_APP_VERSION: z.string().default('development')
VITE_APP_VERSION: z.string().default('development'),
})
.safeParse(import.meta.env);
@ -17,8 +17,8 @@ export const LoadConfig = (): Configuration => {
}
return {
app_version: data!.VITE_APP_VERSION
app_version: data!.VITE_APP_VERSION,
};
};
export const Config = LoadConfig();
export const Config = LoadConfig();

View file

@ -19,5 +19,5 @@ export const yogaLogger: YogaLogger = {
error(...args) {
// @ts-expect-error types dont match
logger.error(...args);
}
};
},
};

View file

@ -7,14 +7,14 @@ const adapter = new PrismaAdapter(prisma.session, prisma.user);
export const auth = new Lucia(adapter, {
sessionCookie: {
attributes: {
secure: process.env.NODE_ENV === 'production'
}
secure: process.env.NODE_ENV === 'production',
},
},
getUserAttributes: (attributes) => {
return {
email: attributes.email
email: attributes.email,
};
}
},
});
declare module 'lucia' {

View file

@ -23,6 +23,6 @@ export const builder = new SchemaBuilder<PothosType>({
// use where clause from prismaRelatedConnection for totalCount (defaults to true)
filterConnectionTotalCount: true,
// warn when not using a query parameter correctly
onUnusedQuery: process.env.NODE_ENV === 'production' ? null : 'warn'
}
});
onUnusedQuery: process.env.NODE_ENV === 'production' ? null : 'warn',
},
});

View file

@ -1 +1 @@
export * from './schema';
export * from './schema';

View file

@ -10,5 +10,5 @@ export const DateScalar = builder.scalarType('Date', {
throw new Error('Cyka blyat');
}
return new Date(date);
}
});
},
});

View file

@ -5,4 +5,4 @@ export type Scalars = {
Input: Date;
Output: Date;
};
};
};

View file

@ -5,7 +5,7 @@ builder.queryType({});
builder.queryField('version', (t) =>
t.string({
description: 'Application version',
resolve: (parent, args, context) => context.config.app_version
resolve: (parent, args, context) => context.config.app_version,
})
);
@ -15,4 +15,4 @@ import './Scalars';
import './posts';
import './users';
export const Schema = builder.toSchema();
export const Schema = builder.toSchema();

View file

@ -9,39 +9,39 @@ export const Post = builder.prismaObject('Post', {
published: t.exposeBoolean('published'),
author: t.relation('author'),
createdAt: t.expose('createdAt', {
type: 'Date'
type: 'Date',
}),
updatedAt: t.expose('updatedAt', {
type: 'Date'
})
})
type: 'Date',
}),
}),
});
const CreatePost = builder.inputType('CreatePost', {
fields: (t) => ({
title: t.string({
required: true
required: true,
}),
content: t.string({
required: true
required: true,
}),
published: t.boolean(),
authorId: t.id({
required: true
})
})
required: true,
}),
}),
});
const UpdatePost = builder.inputType('UpdatePost', {
fields: (t) => ({
id: t.id({
required: true
required: true,
}),
title: t.string(),
content: t.string(),
published: t.boolean(),
authorId: t.id()
})
authorId: t.id(),
}),
});
builder.queryFields((t) => ({
@ -49,19 +49,19 @@ builder.queryFields((t) => ({
type: [Post],
resolve: async () => {
return await prisma.post.findMany();
}
})
},
}),
}));
builder.mutationFields((t) => ({
createPost: t.field({
type: Post,
args: {
input: t.arg({ required: true, type: CreatePost })
input: t.arg({ required: true, type: CreatePost }),
},
resolve: async (parent, args) => {
const author = await prisma.user.findUnique({
where: { id: Number(args.input.authorId) }
where: { id: Number(args.input.authorId) },
});
if (!author) {
throw new Error('Author does not exist!');
@ -73,23 +73,23 @@ builder.mutationFields((t) => ({
published: args.input.published,
author: {
connect: {
id: author.id
}
}
}
id: author.id,
},
},
},
});
return post;
}
},
}),
updatePost: t.field({
type: Post,
args: {
input: t.arg({ required: true, type: UpdatePost })
input: t.arg({ required: true, type: UpdatePost }),
},
resolve: async (parent, args) => {
const post = await prisma.post.update({
where: {
id: Number(args.input.id)
id: Number(args.input.id),
},
data: {
title: args.input.title ?? undefined,
@ -98,13 +98,13 @@ builder.mutationFields((t) => ({
...(args.input.authorId && {
author: {
connect: {
id: Number(args.input.authorId)
}
}
})
}
id: Number(args.input.authorId),
},
},
}),
},
});
return post;
}
})
}));
},
}),
}));

View file

@ -8,33 +8,33 @@ export const User = builder.prismaObject('User', {
name: t.exposeString('name'),
posts: t.relation('posts'),
createdAt: t.expose('createdAt', {
type: 'Date'
type: 'Date',
}),
updatedAt: t.expose('updatedAt', {
type: 'Date'
})
})
type: 'Date',
}),
}),
});
const CreateUser = builder.inputType('CreateUser', {
fields: (t) => ({
email: t.string({
required: true
required: true,
}),
name: t.string({
required: true
})
})
required: true,
}),
}),
});
const UpdateUser = builder.inputType('UpdateUser', {
fields: (t) => ({
id: t.id({
required: true
required: true,
}),
email: t.string(),
name: t.string()
})
name: t.string(),
}),
});
builder.queryFields((t) => ({
@ -42,42 +42,42 @@ builder.queryFields((t) => ({
type: [User],
resolve: async () => {
return await prisma.user.findMany();
}
})
},
}),
}));
builder.mutationFields((t) => ({
createUser: t.field({
type: User,
args: {
input: t.arg({ required: true, type: CreateUser })
input: t.arg({ required: true, type: CreateUser }),
},
resolve: async (parent, args) => {
const post = await prisma.user.create({
data: {
email: args.input.email,
name: args.input.name
}
name: args.input.name,
},
});
return post;
}
},
}),
updateUser: t.field({
type: User,
args: {
input: t.arg({ required: true, type: UpdateUser })
input: t.arg({ required: true, type: UpdateUser }),
},
resolve: async (parent, args) => {
const post = await prisma.user.update({
where: {
id: Number(args.input.id)
id: Number(args.input.id),
},
data: {
email: args.input.email,
name: args.input.name ?? undefined
}
name: args.input.name ?? undefined,
},
});
return post;
}
})
}));
},
}),
}));

View file

@ -1,3 +1,3 @@
import { PrismaClient } from '@prisma/client';
export const prisma = new PrismaClient();
export const prisma = new PrismaClient();

View file

@ -3,5 +3,5 @@ import type { YogaInitialContext } from 'graphql-yoga';
export const Context = (initialContext: YogaInitialContext) => ({
...initialContext,
config: Config
});
config: Config,
});

View file

@ -1,2 +1,2 @@
export * from './context';
export * from './server';
export * from './server';

View file

@ -10,5 +10,5 @@ export const Yoga = createYoga<RequestEvent>({
graphqlEndpoint: '/api/graphql',
// Let Yoga use sveltekit's Response object
fetchAPI: { Response },
logging: yogaLogger
});
logging: yogaLogger,
});

View file

@ -9,4 +9,4 @@ export type DaisyColor =
| 'info'
| 'success'
| 'warning'
| 'error';
| 'error';

View file

@ -1 +1 @@
export type DaisySize = 'xs' | 'sm' | 'lg';
export type DaisySize = 'xs' | 'sm' | 'lg';

View file

@ -1,2 +1,2 @@
export * from './daisy-colors';
export * from './daisy-sizes';
export * from './daisy-sizes';

View file

@ -11,4 +11,4 @@
.layout {
@apply h-screen w-screen bg-base-100;
}
</style>
</style>

View file

@ -3,15 +3,15 @@ export async function load(event) {
const userId = event.cookies.get('user');
if (!userId) {
return {
authenticated: false
authenticated: false,
};
}
const user = await prisma.user.findUnique({
where: {
id: userId
}
id: userId,
},
});
return {
authenticated: !!user
authenticated: !!user,
};
}

View file

@ -21,4 +21,4 @@
.site-loader {
@apply flex h-screen w-screen flex-col items-center justify-center gap-6;
}
</style>
</style>

View file

@ -1,3 +1,3 @@
import { Yoga } from '$lib/server/yoga';
export { Yoga as GET, Yoga as POST };
export { Yoga as GET, Yoga as POST };

View file

@ -5,4 +5,4 @@
</script>
<Navbar title="Svelte" />
{@render children()}
{@render children()}

View file

@ -12,8 +12,8 @@ export const actions = {
}
const user = await prisma.user.findUnique({
where: {
email: form.get('email') as string
}
email: form.get('email') as string,
},
});
if (!user) {
logger.error('User not found! ${user}');
@ -31,7 +31,7 @@ export const actions = {
const sessionCookie = auth.createSessionCookie(session.id);
event.cookies.set(sessionCookie.name, sessionCookie.value, {
path: '/',
maxAge: 120
maxAge: 120,
});
redirect(302, '/');
},
@ -47,8 +47,8 @@ export const actions = {
data: {
email: form.get('email') as string,
name: form.get('name') as string,
password: hashedPassword
}
password: hashedPassword,
},
});
const session = await auth.createSession(user.id.toString(), {});
const sessionCookie = auth.createSessionCookie(session.id);
@ -57,8 +57,8 @@ export const actions = {
}
event.cookies.set(sessionCookie.name, sessionCookie.value, {
path: '/',
maxAge: 120
maxAge: 120,
});
redirect(302, '/');
}
},
} satisfies Actions;

View file

@ -23,7 +23,12 @@
<form method="POST" action={`?/${variant}`}>
<div class="card-body gap-4">
<TextInput start={userIcon} placeholder="Email" name="email" type="email" />
<TextInput start={passwordIcon} placeholder="Password" name="password" type="password" />
<TextInput
start={passwordIcon}
placeholder="Password"
name="password"
type="password"
/>
{#if variant === 'register'}
<TextInput start={nameIcon} placeholder="Name" name="name" fade />
{/if}
@ -47,4 +52,4 @@
.page {
@apply flex flex-col items-center justify-around gap-24 py-[10%];
}
</style>
</style>

View file

@ -11,8 +11,8 @@ const config = {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter()
}
adapter: adapter(),
},
};
export default config;

View file

@ -8,22 +8,22 @@ export default {
theme: {
extend: {
fontFamily: {
display: ['Baskervville SC']
display: ['Baskervville SC'],
},
animation: {
fade: 'fadeIn .5s ease-in-out'
fade: 'fadeIn .5s ease-in-out',
},
keyframes: {
fadeIn: {
from: { opacity: '0' },
to: { opacity: '1' }
}
}
}
to: { opacity: '1' },
},
},
},
},
plugins: [typography, daisyui],
daisyui: {
logs: false
}
} satisfies Config;
logs: false,
},
} satisfies Config;

View file

@ -5,6 +5,6 @@ export default defineConfig({
plugins: [sveltekit()],
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
}
include: ['src/**/*.{test,spec}.{js,ts}'],
},
});