Migrate from DaisyUI to Shadcn (WIP)

This commit is contained in:
Emmanuel 2024-12-01 23:55:52 +01:00
parent ff98c12cff
commit e0bffa4f3a
36 changed files with 228 additions and 99 deletions

17
components.json Normal file
View file

@ -0,0 +1,17 @@
{
"$schema": "https://next.shadcn-svelte.com/schema.json",
"style": "default",
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/app.css",
"baseColor": "slate"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/utils",
"ui": "$lib/components/ui",
"hooks": "$lib/hooks"
},
"typescript": true,
"registry": "https://next.shadcn-svelte.com/registry"
}

View file

@ -28,7 +28,7 @@ export default [
},
settings: {
svelte: {
ignoreWarnings: ["no-irregular-whitespace"],
ignoreWarnings: ["no-irregular-whitespace", "svelte/no-at-html-tags"],
},
},
},

53
package-lock.json generated
View file

@ -32,7 +32,8 @@
"@types/papaparse": "^5.3.7",
"augmented-data-viewer": "^0.6.4",
"autoprefixer": "^10.4.7",
"daisyui": "^4.4.22",
"bits-ui": "^1.0.0-next.65",
"clsx": "^2.1.1",
"dotenv": "^16.0.1",
"eslint": "^9.10.0",
"eslint-config-prettier": "^9.0.0",
@ -52,7 +53,7 @@
"sade": "^1.8.1",
"svelte": "^5.1.10",
"svelte-check": "^4.0.2",
"tailwind-merge": "^2.5.4",
"tailwind-merge": "^2.5.5",
"tailwind-variants": "^0.3.0",
"tailwindcss": "^3.3.2",
"tailwindcss-animate": "^1.0.7",
@ -2533,17 +2534,6 @@
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/css-selector-tokenizer": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
"integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
"dev": true,
"license": "MIT",
"dependencies": {
"cssesc": "^3.0.0",
"fastparse": "^1.1.2"
}
},
"node_modules/css-what": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@ -2581,36 +2571,6 @@
"node": ">=18"
}
},
"node_modules/culori": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
"integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
}
},
"node_modules/daisyui": {
"version": "4.12.14",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.14.tgz",
"integrity": "sha512-hA27cdBasdwd4/iEjn+aidoCrRroDuo3G5W9NDKaVCJI437Mm/3eSL/2u7MkZ0pt8a+TrYF3aT2pFVemTS3how==",
"dev": true,
"license": "MIT",
"dependencies": {
"css-selector-tokenizer": "^0.8",
"culori": "^3",
"picocolors": "^1",
"postcss-js": "^4"
},
"engines": {
"node": ">=16.9.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/daisyui"
}
},
"node_modules/data-urls": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
@ -3366,13 +3326,6 @@
"fxparser": "src/cli/cli.js"
}
},
"node_modules/fastparse": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
"dev": true,
"license": "MIT"
},
"node_modules/fastq": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",

View file

@ -69,7 +69,8 @@
"@types/papaparse": "^5.3.7",
"augmented-data-viewer": "^0.6.4",
"autoprefixer": "^10.4.7",
"daisyui": "^4.4.22",
"bits-ui": "^1.0.0-next.65",
"clsx": "^2.1.1",
"dotenv": "^16.0.1",
"eslint": "^9.10.0",
"eslint-config-prettier": "^9.0.0",
@ -89,7 +90,7 @@
"sade": "^1.8.1",
"svelte": "^5.1.10",
"svelte-check": "^4.0.2",
"tailwind-merge": "^2.5.4",
"tailwind-merge": "^2.5.5",
"tailwind-variants": "^0.3.0",
"tailwindcss": "^3.3.2",
"tailwindcss-animate": "^1.0.7",

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { page } from "$app/stores"
import * as Tabs from "$lib/components/ui/tabs"
import { menuItemsFromLegalId } from "$lib/legal"
export let id: string | undefined | null
@ -10,11 +11,15 @@
</script>
{#if items !== undefined}
<div class="tabs">
{#each items as { href, label }}
<a class="tab tab-lifted" class:tab-active={href === pathname} {href}
>{label}</a
>
{/each}
</div>
<Tabs.Root value={pathname}>
<Tabs.List>
{#each items as { href, label }}
<Tabs.Trigger value={href!}>
{#snippet child({ props })}
<a {href} {...props}>{label}</a>
{/snippet}
</Tabs.Trigger>
{/each}
</Tabs.List>
</Tabs.Root>
{/if}

View file

@ -0,0 +1,18 @@
import { Tabs as TabsPrimitive } from "bits-ui";
import Content from "./tabs-content.svelte";
import List from "./tabs-list.svelte";
import Trigger from "./tabs-trigger.svelte";
const Root = TabsPrimitive.Root;
export {
Root,
Content,
List,
Trigger,
//
Root as Tabs,
Content as TabsContent,
List as TabsList,
Trigger as TabsTrigger,
};

View file

@ -0,0 +1,19 @@
<script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: TabsPrimitive.ContentProps = $props();
</script>
<TabsPrimitive.Content
bind:ref
class={cn(
"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
className
)}
{...restProps}
/>

View file

@ -0,0 +1,19 @@
<script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: TabsPrimitive.ListProps = $props();
</script>
<TabsPrimitive.List
bind:ref
class={cn(
"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
className
)}
{...restProps}
/>

View file

@ -0,0 +1,19 @@
<script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: TabsPrimitive.TriggerProps = $props();
</script>
<TabsPrimitive.Trigger
bind:ref
class={cn(
"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
className
)}
{...restProps}
/>

6
src/lib/utils.ts Normal file
View file

@ -0,0 +1,6 @@
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

View file

@ -11,7 +11,7 @@
summaryMenu={appMenu}
title={$page.data.appTitle}
>
<h1 class="text-5xl font-bold">
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
{$page.data.appTitle}
Légifrance
</h1>

View file

@ -14,7 +14,9 @@
</script>
<header class="prose my-6 max-w-full">
<h1>ARTICLE</h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
ARTICLE
</h1>
</header>
<!-- <form action={$page.url.pathname} class="mx-auto max-w-sm" method="get">

View file

@ -16,9 +16,13 @@
</script>
<header class="prose my-6 max-w-full">
<h2>ARTICLE</h2>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
ARTICLE
</h2>
{#if summary !== undefined}
<h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<SummaryView {summary} />
</h1>
{/if}

View file

@ -24,9 +24,13 @@
<IdPagesSwitcher {id} />
<header class="prose my-6 max-w-full">
<h2>Articles</h2>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
Articles
</h2>
{#if summary !== undefined}
<h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<SummaryView {summary} />
</h1>
{/if}

View file

@ -14,7 +14,9 @@
</script>
<header class="prose my-6 max-w-full">
<h1>DOSSIER_LEGISLATIF</h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
DOSSIER_LEGISLATIF
</h1>
</header>
<!-- <form action={$page.url.pathname} class="mx-auto max-w-sm" method="get">

View file

@ -20,9 +20,13 @@
</script>
<header class="prose my-6 max-w-full">
<h2>DOSSIER_LEGISLATIF</h2>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
DOSSIER_LEGISLATIF
</h2>
{#if summary !== undefined}
<h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<SummaryView {summary} />
</h1>
{/if}

View file

@ -14,7 +14,9 @@
</script>
<header class="prose my-6 max-w-full">
<h1>ID</h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
ID
</h1>
</header>
<!-- <form action={$page.url.pathname} class="mx-auto max-w-sm" method="get">

View file

@ -16,9 +16,13 @@
</script>
<header class="prose my-6 max-w-full">
<h2>ID</h2>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
ID
</h2>
{#if summary !== undefined}
<h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<SummaryView {summary} />
</h1>
{/if}

View file

@ -14,7 +14,9 @@
</script>
<header class="prose my-6 max-w-full">
<h1>IDCC</h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
IDCC
</h1>
</header>
<!-- <form action={$page.url.pathname} class="mx-auto max-w-sm" method="get">

View file

@ -13,9 +13,13 @@
</script>
<header class="prose my-6 max-w-full">
<h2>IDCC</h2>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
IDCC
</h2>
{#if summary !== undefined}
<h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<SummaryView {summary} />
</h1>
{/if}

View file

@ -14,7 +14,9 @@
</script>
<header class="prose my-6 max-w-full">
<h1>JO</h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
JO
</h1>
</header>
<!-- <form action={$page.url.pathname} class="mx-auto max-w-sm" method="get">

View file

@ -13,9 +13,13 @@
</script>
<header class="prose my-6 max-w-full">
<h2>JO</h2>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
JO
</h2>
{#if summary !== undefined}
<h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<SummaryView {summary} />
</h1>
{/if}

View file

@ -16,7 +16,9 @@
</script>
<header class="prose my-6 max-w-full">
<h1>Recherche</h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
Recherche
</h1>
</header>
<form action={$page.url.pathname} class="mx-auto max-w-sm" method="get">

View file

@ -14,7 +14,9 @@
</script>
<header class="prose my-6 max-w-full">
<h1>SECTION_TA</h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
SECTION_TA
</h1>
</header>
<!-- <form action={$page.url.pathname} class="mx-auto max-w-sm" method="get">

View file

@ -20,9 +20,13 @@
</script>
<header class="prose my-6 max-w-full">
<h2>SECTION_TA</h2>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
SECTION_TA
</h2>
{#if summary !== undefined}
<h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<SummaryView {summary} />
</h1>
{/if}

View file

@ -14,7 +14,9 @@
</script>
<header class="prose my-6 max-w-full">
<h1>TEXTE_VERSION</h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
TEXTE_VERSION
</h1>
</header>
<!-- <form action={$page.url.pathname} class="mx-auto max-w-sm" method="get">

View file

@ -23,9 +23,13 @@
<IdPagesSwitcher id={texteVersion.META.META_COMMUN.ID} />
<header class="prose my-6 max-w-full">
<h2>TEXTE_VERSION</h2>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
TEXTE_VERSION
</h2>
{#if summary !== undefined}
<h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<SummaryView {summary} />
</h1>
{/if}

View file

@ -14,7 +14,9 @@
</script>
<header class="prose my-6 max-w-full">
<h1>TEXTEKALI</h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
TEXTEKALI
</h1>
</header>
<!-- <form action={$page.url.pathname} class="mx-auto max-w-sm" method="get">

View file

@ -23,9 +23,13 @@
<IdPagesSwitcher id={textekali.META.META_COMMUN.ID} />
<header class="prose my-6 max-w-full">
<h2>TEXTEKALI</h2>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
TEXTEKALI
</h2>
{#if summary !== undefined}
<h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<SummaryView {summary} />
</h1>
{/if}

View file

@ -14,7 +14,9 @@
</script>
<header class="prose my-6 max-w-full">
<h1>TEXTELR</h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
TEXTELR
</h1>
</header>
<!-- <form action={$page.url.pathname} class="mx-auto max-w-sm" method="get">

View file

@ -19,9 +19,13 @@
<IdPagesSwitcher id={textelr.META.META_COMMUN.ID} />
<header class="prose my-6 max-w-full">
<h2>TEXTELR</h2>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
TEXTELR
</h2>
{#if summary !== undefined}
<h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<SummaryView {summary} />
</h1>
{/if}

View file

@ -36,7 +36,9 @@
</script>
<header class="prose my-6 max-w-full">
<h1>Codes, lois et règlements</h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
Codes, lois et règlements
</h1>
</header>
<form action={$page.url.pathname} class="mx-auto max-w-sm" method="get">

View file

@ -57,9 +57,13 @@
<IdPagesSwitcher {id} />
<header class="prose my-6 max-w-full">
<h2>Codes, lois et règlements</h2>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
Codes, lois et règlements
</h2>
{#if summary !== undefined}
<h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<SummaryView {summary} />
</h1>
{/if}

View file

@ -14,7 +14,9 @@
</script>
<header class="prose my-6 max-w-full">
<h1>VERSIONS</h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
VERSIONS
</h1>
</header>
<!-- <form action={$page.url.pathname} class="mx-auto max-w-sm" method="get">

View file

@ -20,9 +20,13 @@
</script>
<header class="prose my-6 max-w-full">
<h2>VERSIONS</h2>
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
VERSIONS
</h2>
{#if summary !== undefined}
<h1>
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<SummaryView {summary} />
</h1>
{/if}

View file

@ -76,10 +76,10 @@ const config: Config = {
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
to: { height: "var(--bits-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
from: { height: "var(--bits-accordion-content-height)" },
to: { height: "0" },
},
"caret-blink": {