LukeParke/skeleton
1
0
Fork 0
mirror of https://github.com/LukeHagar/skeleton.git synced 2025-12-09 12:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Format pass

Browse Source
This commit is contained in:
Nik
2022-09-06 11:46:11 +10:00
parent a87dec688b
commit c7c78e7858
79 changed files with 866 additions and 727 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
package.json
View File

@@ -19,15 +19,15 @@
}, },
"devDependencies": { "devDependencies": {
"@bobthered/tailwindcss-palette-generator": "^3.0.0", "@bobthered/tailwindcss-palette-generator": "^3.0.0",
"@sveltejs/adapter-auto": "^1.0.0-next.64", "@sveltejs/adapter-auto": "^1.0.0-next.71",
"@sveltejs/adapter-static": "^1.0.0-next.39", "@sveltejs/adapter-static": "^1.0.0-next.42",
"@sveltejs/kit": "^1.0.0-next.415", "@sveltejs/kit": "^1.0.0-next.471",
"@sveltejs/package": "^1.0.0-next.1", "@sveltejs/package": "^1.0.0-next.3",
"@tailwindcss/forms": "^0.5.2", "@tailwindcss/forms": "^0.5.3",
"@testing-library/dom": "^8.17.1", "@testing-library/dom": "^8.17.1",
"@testing-library/svelte": "^3.2.1", "@testing-library/svelte": "^3.2.1",
"@typescript-eslint/eslint-plugin": "^5.35.1", "@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.35.1", "@typescript-eslint/parser": "^5.36.2",
"autoprefixer": "^10.4.8", "autoprefixer": "^10.4.8",
"c8": "^7.12.0", "c8": "^7.12.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
@@ -39,14 +39,14 @@
"postcss-load-config": "^3.1.4", "postcss-load-config": "^3.1.4",
"prettier": "^2.7.1", "prettier": "^2.7.1",
"prettier-plugin-svelte": "^2.7.0", "prettier-plugin-svelte": "^2.7.0",
"svelte": "^3.49.0", "svelte": "^3.50.0",
"svelte-check": "^2.9.0", "svelte-check": "^2.9.0",
"svelte-preprocess": "^4.10.7", "svelte-preprocess": "^4.10.7",
"svelte2tsx": "^0.5.15", "svelte2tsx": "^0.5.16",
"tailwindcss": "^3.1.8", "tailwindcss": "^3.1.8",
"tslib": "^2.4.0", "tslib": "^2.4.0",
"typescript": "^4.8.2", "typescript": "^4.8.2",
"vite": "^3.0.9", "vite": "^3.1.0",
"vitest": "^0.19.1" "vitest": "^0.19.1"
}, },
"type": "module", "type": "module",

7
src/app.postcss
View File

@@ -29,7 +29,10 @@ Otherwise, update the respective style packs (core, typography, forms) so everyo
/* === NOTE: unique doc-only styles below: ==== */ /* === NOTE: unique doc-only styles below: ==== */
html, body { @apply h-screen overflow-hidden; } html,
body {
@apply h-screen overflow-hidden;
}
/* Gradient Background, via: https://csshero.org/mesher/ */ /* Gradient Background, via: https://csshero.org/mesher/ */
body { body {
@@ -45,4 +48,4 @@ body {
background-image: background-image:
radial-gradient(at 35% 35%, hsla(160,84%,39%,0.16) 0px, transparent 50%), radial-gradient(at 35% 35%, hsla(160,84%,39%,0.16) 0px, transparent 50%),
radial-gradient(at 61% 60%, hsla(238,83%,66%,0.16) 0px, transparent 50%); radial-gradient(at 61% 60%, hsla(238,83%,66%,0.16) 0px, transparent 50%);
} }

6
src/lib/Accordion/AccordionItem.svelte
View File

@@ -46,5 +46,7 @@
<style> <style>
/* Hide the left-hande arrows for details/summary */ /* Hide the left-hande arrows for details/summary */
/* Note: let's keep this localized in case users want the arrows elsewhere */ /* Note: let's keep this localized in case users want the arrows elsewhere */
details summary::-webkit-details-marker { display: none; } details summary::-webkit-details-marker {
</style> display: none;
}
</style>

12
src/lib/Alert/Alert.svelte
View File

@@ -6,7 +6,7 @@
export let duration: number = 200; // ms export let duration: number = 200; // ms
export let background: string = 'bg-accent-500/30'; export let background: string = 'bg-accent-500/30';
export let border: string = 'border-l-accent-500'; export let border: string = 'border-l-accent-500';
export let color: string|undefined = undefined; export let color: string | undefined = undefined;
export let radius: string = ''; export let radius: string = '';
// Base Classes // Base Classes
@@ -23,24 +23,24 @@
<div class="alert {classesCard}" transition:fade|local={{ duration }} data-testid="alert" role="alert" aria-live="polite"> <div class="alert {classesCard}" transition:fade|local={{ duration }} data-testid="alert" role="alert" aria-live="polite">
<!-- Slot: Lead --> <!-- Slot: Lead -->
{#if $$slots.lead} {#if $$slots.lead}
<section class="{cLead}"> <section class={cLead}>
<slot name="lead" /> <slot name="lead" />
</section> </section>
{/if} {/if}
<!-- Content --> <!-- Content -->
<section class="{cContent}"> <section class={cContent}>
<!-- Slot: Title --> <!-- Slot: Title -->
{#if $$slots.title}<h3><slot name="title"></slot></h3>{/if} {#if $$slots.title}<h3><slot name="title" /></h3>{/if}
<!-- Slot: Message --> <!-- Slot: Message -->
{#if $$slots.message} {#if $$slots.message}
<div class="{color}"><slot name="message" /></div> <div class={color}><slot name="message" /></div>
{/if} {/if}
</section> </section>
<!-- Slot: Trail --> <!-- Slot: Trail -->
{#if $$slots.trail} {#if $$slots.trail}
<section class="{cTail}"> <section class={cTail}>
<slot name="trail" /> <slot name="trail" />
</section> </section>
{/if} {/if}

62
src/lib/AppBar/AppBar.svelte
View File

@@ -1,43 +1,35 @@
<script lang="ts"> <script lang="ts">
// Props // Props
export let background: string = 'bg-surface-100 dark:bg-surface-800'; export let background: string = 'bg-surface-100 dark:bg-surface-800';
export let border: string = ''; export let border: string = '';
export let padding: string = 'px-4 py-4 md:py-6'; export let padding: string = 'px-4 py-4 md:py-6';
export let shadow: string = 'shadow-xl'; export let shadow: string = 'shadow-xl';
export let space: string = 'space-x-4'; export let space: string = 'space-x-4';
// Props (a11y) // Props (a11y)
export let label: string|undefined = undefined; export let label: string | undefined = undefined;
export let labelledby: string|undefined = undefined; export let labelledby: string | undefined = undefined;
// Base Classes // Base Classes
const cBase: string = 'flex items-center'; const cBase: string = 'flex items-center';
const cLead: string = 'flex-none flex justify-between items-center'; const cLead: string = 'flex-none flex justify-between items-center';
const cCenter: string = 'flex-auto'; const cCenter: string = 'flex-auto';
const cTrail: string = 'flex-none flex items-center space-x-4'; const cTrail: string = 'flex-none flex items-center space-x-4';
// Reactive Classes // Reactive Classes
$: classesBase = `${cBase} ${background} ${border} ${padding} ${shadow} ${space}`; $: classesBase = `${cBase} ${background} ${border} ${padding} ${shadow} ${space}`;
</script> </script>
<div <div class="app-bar {classesBase} {$$props.class || ''}" data-testid="app-bar" role="toolbar" aria-label={label} aria-labelledby={labelledby}>
class="app-bar {classesBase} {$$props.class||''}" <!-- Slot: lead -->
data-testid="app-bar" {#if $$slots.lead}
role="toolbar" <div class="appbar-lead {cLead}"><slot name="lead" /></div>
aria-label={label} {/if}
aria-labelledby={labelledby}
>
<!-- Slot: lead --> <!-- Slot: center -->
{#if $$slots.lead} <div class="appbar-center {cCenter}"><slot /></div>
<div class="appbar-lead {cLead}"><slot name="lead"></slot></div>
{/if}
<!-- Slot: center -->
<div class="appbar-center {cCenter}"><slot /></div>
<!-- Slot: trail -->
{#if $$slots.trail}
<div class="appbar-trail {cTrail}"><slot name="trail"></slot></div>
{/if}
<!-- Slot: trail -->
{#if $$slots.trail}
<div class="appbar-trail {cTrail}"><slot name="trail" /></div>
{/if}
</div> </div>

14
src/lib/AppBar/AppBar.test.ts
View File

@@ -14,13 +14,13 @@ describe('AppBar.svelte', () => {
const { getByTestId } = render(AppBar, { const { getByTestId } = render(AppBar, {
props: { props: {
background: 'bg-primary-500', background: 'bg-primary-500',
border: 'border border-accent-500', border: 'border border-accent-500',
padding: 'p-4', padding: 'p-4',
shadow: 'shadow', shadow: 'shadow',
space: 'space-x-2', space: 'space-x-2',
// a11y // a11y
label: 'TestAppShell', label: 'TestAppShell',
labelledby: 'TestLabelAppShell', labelledby: 'TestLabelAppShell'
} }
}); });
expect(getByTestId('app-bar')).toBeTruthy(); expect(getByTestId('app-bar')).toBeTruthy();

88
src/lib/AppShell/AppShell.svelte
View File

@@ -1,58 +1,52 @@
<script lang="ts"> <script lang="ts">
// Props // Props
export let sidebarLeftWidth: string = 'w-auto'; export let sidebarLeftWidth: string = 'w-auto';
export let sidebarRightWidth: string = 'w-auto'; export let sidebarRightWidth: string = 'w-auto';
// Base Classes // Base Classes
const cBaseAppShell: string = 'w-full h-full flex flex-col overflow-hidden'; const cBaseAppShell: string = 'w-full h-full flex flex-col overflow-hidden';
const cContentArea: string = 'w-full h-full flex overflow-hidden'; const cContentArea: string = 'w-full h-full flex overflow-hidden';
const cPage: string = 'flex-1 overflow-x-hidden overflow-y-auto'; const cPage: string = 'flex-1 overflow-x-hidden overflow-y-auto';
const cSidebarLeft: string = 'flex-none overflow-x-hidden overflow-y-auto'; const cSidebarLeft: string = 'flex-none overflow-x-hidden overflow-y-auto';
const cSidebarRight: string = 'flex-none overflow-x-hidden overflow-y-auto'; const cSidebarRight: string = 'flex-none overflow-x-hidden overflow-y-auto';
// Reactive Classes // Reactive Classes
$: classesSidebarLeft = `${cSidebarLeft} ${sidebarLeftWidth}`; $: classesSidebarLeft = `${cSidebarLeft} ${sidebarLeftWidth}`;
$: classesSidebarRight = `${cSidebarRight} ${sidebarRightWidth}`; $: classesSidebarRight = `${cSidebarRight} ${sidebarRightWidth}`;
</script> </script>
<main id="appShell" class="{cBaseAppShell}" data-testid="app-shell"> <main id="appShell" class={cBaseAppShell} data-testid="app-shell">
<!-- Slot: Header -->
{#if $$slots.header}
<header class="flex-none"><slot name="header" /></header>
{/if}
<!-- Slot: Header --> <!-- Content Area -->
{#if $$slots.header} <div class="flex-auto {cContentArea}">
<header class="flex-none"><slot name="header"></slot></header> <!-- Slot: Sidebar (left) -->
{/if} {#if $$slots.sidebarLeft}
<aside class="sidebar-left {classesSidebarLeft}"><slot name="sidebarLeft" /></aside>
{/if}
<!-- Content Area --> <!-- Page -->
<div class="flex-auto {cContentArea}"> <div id="page" class={cPage}>
<!-- Slot: Page Header -->
{#if $$slots.pageHeader}
<header id="page-header"><slot name="pageHeader">(slot:header)</slot></header>
{/if}
<!-- Slot: Sidebar (left) --> <!-- Slot: Page Content (default) -->
{#if $$slots.sidebarLeft} <div id="page-content"><slot /></div>
<aside class="sidebar-left {classesSidebarLeft}"><slot name="sidebarLeft"></slot></aside>
{/if}
<!-- Page --> <!-- Slot: Page Footer -->
<div id="page" class="{cPage}"> {#if $$slots.pageFooter}
<footer id="page-footer"><slot name="pageFooter">(slot:footer)</slot></footer>
<!-- Slot: Page Header --> {/if}
{#if $$slots.pageHeader} </div>
<header id="page-header"><slot name="pageHeader">(slot:header)</slot></header>
{/if}
<!-- Slot: Page Content (default) -->
<div id="page-content"><slot /></div>
<!-- Slot: Page Footer -->
{#if $$slots.pageFooter}
<footer id="page-footer"><slot name="pageFooter">(slot:footer)</slot></footer>
{/if}
</div>
<!-- Slot: Sidebar (right) -->
{#if $$slots.sidebarRight}
<aside class="sidebar-right {classesSidebarRight}"><slot name="sidebarRight"></slot></aside>
{/if}
</div>
<!-- Slot: Sidebar (right) -->
{#if $$slots.sidebarRight}
<aside class="sidebar-right {classesSidebarRight}"><slot name="sidebarRight" /></aside>
{/if}
</div>
</main> </main>

2
src/lib/AppShell/AppShell.test.ts
View File

@@ -14,7 +14,7 @@ describe('AppShell.svelte', () => {
const { getByTestId } = render(AppShell, { const { getByTestId } = render(AppShell, {
props: { props: {
sidebarLeftWidth: 'w-auto', sidebarLeftWidth: 'w-auto',
sidebarRightWidth: 'w-auto', sidebarRightWidth: 'w-auto'
} }
}); });
expect(getByTestId('app-shell')).toBeTruthy(); expect(getByTestId('app-shell')).toBeTruthy();

4
src/lib/Avatar/Avatar.svelte
View File

@@ -42,9 +42,9 @@
$: classesAvatar = `${cBase} ${cSize} ${background} ${color} ${cOutlined} ${cHover} ${$$props.class}`; $: classesAvatar = `${cBase} ${cSize} ${background} ${color} ${cOutlined} ${cHover} ${$$props.class}`;
</script> </script>
<figure on:click class="avatar {classesAvatar}" data-testid="avatar" > <figure on:click class="avatar {classesAvatar}" data-testid="avatar">
{#if src} {#if src}
<img class="w-full h-full object-cover" {src} alt={$$props.alt || 'avatar'} use:f.filter={filter||''} /> <img class="w-full h-full object-cover" {src} alt={$$props.alt || 'avatar'} use:f.filter={filter || ''} />
{:else} {:else}
<span class={cText}>{initials.substring(0, 2).toUpperCase()}</span> <span class={cText}>{initials.substring(0, 2).toUpperCase()}</span>
{/if} {/if}

5
src/lib/Avatar/Avatar.test.ts
View File

@@ -8,7 +8,6 @@ import { fireEvent } from '@testing-library/dom';
let testImgSrc = 'https://i.pravatar.cc/512'; let testImgSrc = 'https://i.pravatar.cc/512';
describe('Avatar.svelte', () => { describe('Avatar.svelte', () => {
it('Renders with minimal props', async () => { it('Renders with minimal props', async () => {
const { getByTestId } = render(Avatar); const { getByTestId } = render(Avatar);
expect(getByTestId('avatar')).toBeTruthy(); expect(getByTestId('avatar')).toBeTruthy();
@@ -24,7 +23,7 @@ describe('Avatar.svelte', () => {
color: 'text-white-500', color: 'text-white-500',
outlined: true, outlined: true,
hover: true, hover: true,
filter: '#Emerald', filter: '#Emerald'
} }
}); });
expect(getByTestId('avatar')).toBeTruthy(); expect(getByTestId('avatar')).toBeTruthy();
@@ -47,7 +46,7 @@ describe('Avatar.svelte', () => {
const { getByTestId } = render(Avatar, { const { getByTestId } = render(Avatar, {
props: { src: testImgSrc } props: { src: testImgSrc }
}); });
const imgSrc: string|undefined = getByTestId('avatar').querySelector('img')?.src; const imgSrc: string | undefined = getByTestId('avatar').querySelector('img')?.src;
expect(imgSrc).to.eq(testImgSrc); expect(imgSrc).to.eq(testImgSrc);
}); });

2
src/lib/Badge/Badge.test.ts
View File

@@ -17,7 +17,7 @@ describe('Badge.svelte', () => {
color: 'text-white', color: 'text-white',
fill: 'fill-white', fill: 'fill-white',
rounded: 'rounded', rounded: 'rounded',
icon: false, icon: false
} }
}); });
expect(getByTestId('badge')).toBeTruthy(); expect(getByTestId('badge')).toBeTruthy();

10
src/lib/Breadcrumb/Breadcrumb.test.ts
View File

@@ -11,12 +11,12 @@ describe('Breadcrumb.svelte', () => {
}); });
it('Renders with all props', () => { it('Renders with all props', () => {
const { getByTestId } = render(Breadcrumb, { const { getByTestId } = render(Breadcrumb, {
props: { props: {
separator: '|', separator: '|',
label: 'Test Divider' label: 'Test Divider'
}, }
}); });
expect(getByTestId('breadcrumb')).toBeTruthy(); expect(getByTestId('breadcrumb')).toBeTruthy();
}); });
}); });

4
src/lib/Button/Button.test.ts
View File

@@ -23,12 +23,12 @@ describe('Button.svelte', () => {
width: 'w-[200px]', width: 'w-[200px]',
rounded: 'rounded', rounded: 'rounded',
label: 'testButton1', label: 'testButton1',
describedby: 'testLabel1', describedby: 'testLabel1'
} }
}); });
expect(getByTestId).toBeTruthy(); expect(getByTestId).toBeTruthy();
}); });
it('Renders with variant prop', async () => { it('Renders with variant prop', async () => {
const { getByTestId } = render(Button, { const { getByTestId } = render(Button, {
props: { variant: 'ghost-primary' } props: { variant: 'ghost-primary' }

2
src/lib/Card/Card.svelte
View File

@@ -20,7 +20,7 @@
$: classesFooter = `${footer}`; $: classesFooter = `${footer}`;
</script> </script>
<div class="card {classesCard} {$$props.class||''}" data-testid="card"> <div class="card {classesCard} {$$props.class || ''}" data-testid="card">
<!-- Header --> <!-- Header -->
{#if $$slots.header} {#if $$slots.header}
<header class="card-header {classesHeader}"><slot name="header" /></header> <header class="card-header {classesHeader}"><slot name="header" /></header>

2
src/lib/Card/Card.test.ts
View File

@@ -14,7 +14,7 @@ describe('Card.svelte', () => {
const { getByTestId } = render(Card, { const { getByTestId } = render(Card, {
props: { props: {
background: 'bg-primary-500', background: 'bg-primary-500',
color: 'text-white', color: 'text-white'
} }
}); });
expect(getByTestId('card')).toBeTruthy(); expect(getByTestId('card')).toBeTruthy();

4
src/lib/CodeBlock/CodeBlock.svelte
View File

@@ -14,7 +14,9 @@
// Allow shorthand 'js' alias for Javascript // Allow shorthand 'js' alias for Javascript
function languageFormatter(lang: string): string { function languageFormatter(lang: string): string {
if (lang === 'js') { return 'javascript'; } if (lang === 'js') {
return 'javascript';
}
return lang; return lang;
} }

2
src/lib/CodeBlock/CodeBlock.test.ts
View File

@@ -20,7 +20,7 @@ describe('CodeBlock.svelte', () => {
props: { props: {
language: 'js', language: 'js',
code: `console.log('Hello World');`, code: `console.log('Hello World');`,
background: 'bg-slate-800', background: 'bg-slate-800'
} }
}); });
expect(getByTestId('codeblock')).toBeTruthy(); expect(getByTestId('codeblock')).toBeTruthy();

4
src/lib/CodeBlock/stores.ts
View File

@@ -1,5 +1,5 @@
import { writable, type Writable } from "svelte/store"; import { writable, type Writable } from 'svelte/store';
export const storeHighlightJs: Writable<any> = writable(undefined); export const storeHighlightJs: Writable<any> = writable(undefined);
// TODO: add support for other highlighters here in the future // TODO: add support for other highlighters here in the future

7
src/lib/Divider/Divider.svelte
View File

@@ -31,8 +31,11 @@
function setOrientation(): void { function setOrientation(): void {
// prettier-iignore // prettier-iignore
switch (orientation) { switch (orientation) {
case 'v': cOrientation = `border-0 ${cWeight[weight].v} h-full`; break; case 'v':
default: cOrientation = `border-0 ${cWeight[weight].h} border-t w-full`; cOrientation = `border-0 ${cWeight[weight].v} h-full`;
break;
default:
cOrientation = `border-0 ${cWeight[weight].h} border-t w-full`;
} }
} }

82
src/lib/Drawer/Drawer.svelte
View File

@@ -9,19 +9,19 @@
export let duration: number = 150; export let duration: number = 150;
// Props (backdrop) // Props (backdrop)
export let bgBackdrop: string = 'bg-surface-400/70 dark:bg-surface-900/70'; export let bgBackdrop: string = 'bg-surface-400/70 dark:bg-surface-900/70';
export let display: string|undefined = undefined; export let display: string | undefined = undefined;
export let blur: string = 'backdrop-blur-sm'; export let blur: string = 'backdrop-blur-sm';
// Props (drawer) // Props (drawer)
export let bgDrawer: string = 'bg-surface-100 dark:bg-surface-800'; export let bgDrawer: string = 'bg-surface-100 dark:bg-surface-800';
export let border: string|undefined = undefined; export let border: string | undefined = undefined;
export let rounded: string|undefined = undefined; export let rounded: string | undefined = undefined;
export let width: string|undefined = undefined; export let width: string | undefined = undefined;
export let height: string|undefined = undefined; export let height: string | undefined = undefined;
export let margin: string|undefined = undefined; export let margin: string | undefined = undefined;
// Props (a11y) // Props (a11y)
export let labelledby: string|undefined = undefined; export let labelledby: string | undefined = undefined;
export let describedby: string|undefined = undefined; export let describedby: string | undefined = undefined;
// Base Classes // Base Classes
const cBaseBackdrop: string = 'fixed top-0 left-0 right-0 bottom-0 z-40 flex'; const cBaseBackdrop: string = 'fixed top-0 left-0 right-0 bottom-0 z-40 flex';
const cBaseDrawer: string = 'shadow-xl overflow-y-auto'; const cBaseDrawer: string = 'shadow-xl overflow-y-auto';
@@ -32,15 +32,15 @@
// Set Animation Values // Set Animation Values
let animParams: any = { backdrop: '', width: '', height: '', x: 0, y: 0 }; let animParams: any = { backdrop: '', width: '', height: '', x: 0, y: 0 };
function setAnimParams(): void { function setAnimParams(): void {
switch(position) { switch (position) {
// prettier-ignore // prettier-ignore
case('top'): case('top'):
animParams = { backdrop: 'flex-col justify-start', width: 'w-full', height: 'h-[40%]', x: 0, y: -window.innerHeight }; animParams = { backdrop: 'flex-col justify-start', width: 'w-full', height: 'h-[40%]', x: 0, y: -window.innerHeight };
break; break;
case('bottom'): case 'bottom':
animParams = { backdrop: 'flex-col justify-end', width: 'w-full', height: 'h-[40%]', x: 0, y: window.innerHeight }; animParams = { backdrop: 'flex-col justify-end', width: 'w-full', height: 'h-[40%]', x: 0, y: window.innerHeight };
break; break;
case('right'): case 'right':
animParams = { backdrop: 'justify-end', width: 'w-[80%]', height: 'h-full', x: window.innerWidth, y: 0 }; animParams = { backdrop: 'justify-end', width: 'w-[80%]', height: 'h-full', x: window.innerWidth, y: 0 };
break; break;
// Default: Left // Default: Left
@@ -53,11 +53,15 @@
// Input Handlers // Input Handlers
function onClickBackdrop(e: any): void { function onClickBackdrop(e: any): void {
// Limit to only backdrop element // Limit to only backdrop element
if (e.target === elemBackdrop) { close(); } if (e.target === elemBackdrop) {
close();
}
} }
function onKeydownWindow(e: any): void { function onKeydownWindow(e: any): void {
if (!$open) return; if (!$open) return;
if (e.code === 'Escape') { close(); } if (e.code === 'Escape') {
close();
}
} }
// Close // Close
@@ -66,8 +70,12 @@
} }
// Lifecycle // Lifecycle
onMount(() => { setAnimParams(); }); onMount(() => {
afterUpdate(() => { setAnimParams(); }); setAnimParams();
});
afterUpdate(() => {
setAnimParams();
});
// Reactive // Reactive
$: classesWidth = width ? width : animParams.width; $: classesWidth = width ? width : animParams.width;
@@ -79,26 +87,28 @@
<svelte:window on:keydown={onKeydownWindow} /> <svelte:window on:keydown={onKeydownWindow} />
{#if $open} {#if $open}
<!-- Backdrop --> <!-- Backdrop -->
<div
bind:this={elemBackdrop}
class="drawer-backdrop {classesBackdrop} {$$props.class||''}"
data-testid="drawer-backdrop"
on:click={(e) => { onClickBackdrop(e) }}
transition:fade|local={{ duration }}
>
<!-- Drawer -->
<div <div
class="drawer {classesDrawer} {$$props.class}" bind:this={elemBackdrop}
data-testid="drawer" class="drawer-backdrop {classesBackdrop} {$$props.class || ''}"
transition:fly|local={{ x: animParams.x, y: animParams.y, duration }} data-testid="drawer-backdrop"
role="dialog" on:click={(e) => {
aria-modal="true" onClickBackdrop(e);
aria-labelledby={labelledby} }}
aria-describedby={describedby} transition:fade|local={{ duration }}
> >
<!-- Slot: Default --> <!-- Drawer -->
<slot /> <div
class="drawer {classesDrawer} {$$props.class}"
data-testid="drawer"
transition:fly|local={{ x: animParams.x, y: animParams.y, duration }}
role="dialog"
aria-modal="true"
aria-labelledby={labelledby}
aria-describedby={describedby}
>
<!-- Slot: Default -->
<slot />
</div>
</div> </div>
</div> {/if}
{/if}

2
src/lib/Drawer/Drawer.test.ts
View File

@@ -9,7 +9,6 @@ import Drawer from '$lib/Drawer/Drawer.svelte';
const storeTest: Writable<boolean> = writable(true); const storeTest: Writable<boolean> = writable(true);
describe('Drawer.svelte', () => { describe('Drawer.svelte', () => {
it('Renders when draw opened', async () => { it('Renders when draw opened', async () => {
const { getByTestId } = render(Drawer, { const { getByTestId } = render(Drawer, {
props: { props: {
@@ -19,5 +18,4 @@ describe('Drawer.svelte', () => {
expect(getByTestId('drawer-backdrop')).toBeTruthy(); expect(getByTestId('drawer-backdrop')).toBeTruthy();
expect(getByTestId('drawer')).toBeTruthy(); expect(getByTestId('drawer')).toBeTruthy();
}); });
}); });

2
src/lib/GradientHeading/GradientHeading.test.ts
View File

@@ -20,7 +20,7 @@ describe('GradientHeading.svelte', () => {
tag: 'h1', tag: 'h1',
direction: 'bg-gradient-to-r', direction: 'bg-gradient-to-r',
from: 'from-primary-500', from: 'from-primary-500',
to: 'to-accent-500', to: 'to-accent-500'
} }
}); });
const elem: HTMLElement = getByTestId('gradient-heading'); const elem: HTMLElement = getByTestId('gradient-heading');

2
src/lib/List/List.test.ts
View File

@@ -18,7 +18,7 @@ describe('List.svelte', () => {
tag: 'ul', tag: 'ul',
title: 'testTitle1', title: 'testTitle1',
label: 'testList1', label: 'testList1',
labelledby: 'testLabel1', labelledby: 'testLabel1'
} }
}); });
expect(getByTestId('list-group')).toBeTruthy(); expect(getByTestId('list-group')).toBeTruthy();

4
src/lib/List/ListItem.svelte
View File

@@ -40,7 +40,9 @@
dispatch('keydown', event); dispatch('keydown', event);
if (['Enter', 'Space'].includes(event.code)) { if (['Enter', 'Space'].includes(event.code)) {
event.preventDefault(); event.preventDefault();
if (parentTag === 'nav') { elemItem.click(); } if (parentTag === 'nav') {
elemItem.click();
}
} }
} }

15
src/lib/List/ListItem.test.ts
View File

@@ -49,15 +49,16 @@ describe('ListItem.svelte', () => {
// TODO: we need to define the `value` prop here, not sure the syntax // TODO: we need to define the `value` prop here, not sure the syntax
it('Renders <nav> selection list item, single value', async () => { it('Renders <nav> selection list item, single value', async () => {
const { getByTestId } = render(ListItem, { props: { const { getByTestId } = render(ListItem, {
parentTag: 'nav', props: {
selected: writable('foobar'), parentTag: 'nav',
highlight: 'hover:bg-accent-500/10', selected: writable('foobar'),
hover: '!bg-accent-500', highlight: 'hover:bg-accent-500/10',
} }); hover: '!bg-accent-500'
}
});
const element: HTMLElement = getByTestId('list-row'); const element: HTMLElement = getByTestId('list-row');
expect(element).toBeTruthy(); expect(element).toBeTruthy();
expect(element.className).to.contain('!bg-accent-500'); expect(element.className).to.contain('!bg-accent-500');
}); });
}); });

2
src/lib/LogoCloud/Logo.test.ts
View File

@@ -15,7 +15,7 @@ describe('Logo.svelte', () => {
props: { props: {
background: 'bg-primary-500', background: 'bg-primary-500',
color: 'text-white', color: 'text-white',
text: 'text-base font-bold', text: 'text-base font-bold'
} }
}); });
expect(getByTestId('logo')).toBeTruthy(); expect(getByTestId('logo')).toBeTruthy();

2
src/lib/LogoCloud/LogoCloud.test.ts
View File

@@ -15,7 +15,7 @@ describe('LogoCloud.svelte', () => {
props: { props: {
background: 'bg-primary-500', background: 'bg-primary-500',
color: 'text-white', color: 'text-white',
text: 'text-base font-bold', text: 'text-base font-bold'
} }
}); });
expect(getByTestId('logo-cloud')).toBeTruthy(); expect(getByTestId('logo-cloud')).toBeTruthy();

8
src/lib/Notifications/Dialog.svelte
View File

@@ -80,13 +80,7 @@
{#if $dialogStore.length} {#if $dialogStore.length}
<!-- Backdrop Shim --> <!-- Backdrop Shim -->
<div <div class="dialog-backdrop {classesBackdrop} {$$props.class}" on:click={onDialogClose} on:keydown={onKeyPress} transition:fade|local={{ duration }} data-testid="dialog-backdrop">
class="dialog-backdrop {classesBackdrop} {$$props.class}"
on:click={onDialogClose}
on:keydown={onKeyPress}
transition:fade|local={{ duration }}
data-testid="dialog-backdrop"
>
<!-- Dialog --> <!-- Dialog -->
<div <div
bind:this={elemModal} bind:this={elemModal}

32
src/lib/Notifications/Dialog.test.ts
View File

@@ -2,31 +2,36 @@ import { render } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest'; import { describe, it, expect } from 'vitest';
// @ts-ignore // @ts-ignore
import { dialogStore, DialogAlert, DialogConfirm, DialogPrompt} from '$lib/Notifications/Stores'; import { dialogStore, DialogAlert, DialogConfirm, DialogPrompt } from '$lib/Notifications/Stores';
// @ts-ignore // @ts-ignore
import Dialog from '$lib/Notifications/Dialog.svelte'; import Dialog from '$lib/Notifications/Dialog.svelte';
// Dialog Payloads // Dialog Payloads
const dialogAlert: DialogAlert = { const dialogAlert: DialogAlert = {
title: 'Welcome to Skeleton.', title: 'Welcome to Skeleton.',
body: 'This is a standard alert dialog.', body: 'This is a standard alert dialog.'
}; };
const dialogConfirm: DialogConfirm = { const dialogConfirm: DialogConfirm = {
type: 'confirm', type: 'confirm',
title: 'Please Confirm', title: 'Please Confirm',
body: 'Are you sure you wish to proceed?', body: 'Are you sure you wish to proceed?',
result: (r: boolean) => { console.log(r); } result: (r: boolean) => {
console.log(r);
}
}; };
const dialogPrompt: DialogPrompt = { const dialogPrompt: DialogPrompt = {
type: 'prompt', type: 'prompt',
title: 'Enter Name', title: 'Enter Name',
body: 'Provide your first name in the field below.', body: 'Provide your first name in the field below.',
value: 'foobar', value: 'foobar',
result: (r: string) => { if (r) { console.log(r); }; } result: (r: string) => {
if (r) {
console.log(r);
}
}
}; };
describe('Dialog.svelte', () => { describe('Dialog.svelte', () => {
it('Renders dialog alert', async () => { it('Renders dialog alert', async () => {
dialogStore.trigger(dialogAlert); dialogStore.trigger(dialogAlert);
const { getByTestId } = render(Dialog); const { getByTestId } = render(Dialog);
@@ -47,5 +52,4 @@ describe('Dialog.svelte', () => {
expect(getByTestId('dialog-backdrop')).toBeTruthy(); expect(getByTestId('dialog-backdrop')).toBeTruthy();
expect(getByTestId('dialog')).toBeTruthy(); expect(getByTestId('dialog')).toBeTruthy();
}); });
}); });

19
src/lib/Notifications/Toats.test.ts
View File

@@ -2,25 +2,28 @@ import { render } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest'; import { describe, it, expect } from 'vitest';
// @ts-ignore // @ts-ignore
import { toastStore, ToastMessage} from '$lib/Notifications/Stores'; import { toastStore, ToastMessage } from '$lib/Notifications/Stores';
// @ts-ignore // @ts-ignore
import Toast from '$lib/Notifications/Toast.svelte'; import Toast from '$lib/Notifications/Toast.svelte';
// Toast Payload // Toast Payload
const toastMessage: ToastMessage = { const toastMessage: ToastMessage = {
message: 'Your Message Here', message: 'Your Message Here',
// Optional: // Optional:
autohide: true, autohide: true,
timeout: 5000, timeout: 5000,
button: { label: 'Greeting', action: () => { alert('Hello, Skeleton'); }} button: {
label: 'Greeting',
action: () => {
alert('Hello, Skeleton');
}
}
}; };
describe('Toast.svelte', () => { describe('Toast.svelte', () => {
it('Renders dialog alert', async () => { it('Renders dialog alert', async () => {
toastStore.trigger(toastMessage); toastStore.trigger(toastMessage);
const { getByTestId } = render(Toast); const { getByTestId } = render(Toast);
expect(getByTestId('toast')).toBeTruthy(); expect(getByTestId('toast')).toBeTruthy();
}); });
}); });

2
src/lib/Paginator/Paginator.test.ts
View File

@@ -23,7 +23,7 @@ describe('Paginator.svelte', () => {
select: 'bg-primary-500', select: 'bg-primary-500',
// --- // ---
variant: 'ghost-primary', variant: 'ghost-primary',
rounded: 'rounded', rounded: 'rounded'
} }
}); });
expect(getByTestId('paginator')).toBeTruthy(); expect(getByTestId('paginator')).toBeTruthy();

4
src/lib/Progress/ProgressRadial.svelte
View File

@@ -3,14 +3,14 @@
import { afterUpdate } from 'svelte'; import { afterUpdate } from 'svelte';
// Props // Props
export let value: number|undefined = undefined; // % export let value: number | undefined = undefined; // %
export let stroke: number = 20; // px export let stroke: number = 20; // px
export let track: string = 'stroke-surface-300 dark:stroke-surface-700'; export let track: string = 'stroke-surface-300 dark:stroke-surface-700';
export let meter: string = 'stroke-black dark:stroke-white'; export let meter: string = 'stroke-black dark:stroke-white';
export let color: string = 'fill-black dark:fill-white'; export let color: string = 'fill-black dark:fill-white';
export let font: number = 56; // px export let font: number = 56; // px
// Ally // Ally
export let label: string|undefined = undefined; export let label: string | undefined = undefined;
// Base Classes // Base Classes
const cBaseTrack: string = 'fill-transparent'; const cBaseTrack: string = 'fill-transparent';

14
src/lib/Progress/ProgressRadial.test.ts
View File

@@ -13,13 +13,13 @@ describe('ProgressRadial.svelte', () => {
it('Renders with all props', () => { it('Renders with all props', () => {
const { getByTestId } = render(ProgressRadial, { const { getByTestId } = render(ProgressRadial, {
props: { props: {
value: 50, value: 50,
stroke: 20, stroke: 20,
track: 'stroke-surface-300 dark:stroke-surface-700', track: 'stroke-surface-300 dark:stroke-surface-700',
meter: 'stroke-black dark:stroke-white', meter: 'stroke-black dark:stroke-white',
color: 'fill-black dark:fill-white', color: 'fill-black dark:fill-white',
font: 56, font: 56,
label: 'testProgressRadial1', label: 'testProgressRadial1'
} }
}); });
expect(getByTestId('progress-radial')).toBeTruthy(); expect(getByTestId('progress-radial')).toBeTruthy();

4
src/lib/Radio/RadioGroup.test.ts
View File

@@ -10,7 +10,7 @@ describe('RadioGroup.svelte', () => {
it('Renders with minimal props', async () => { it('Renders with minimal props', async () => {
const { getByTestId } = render(RadioGroup, { const { getByTestId } = render(RadioGroup, {
props: { props: {
selected: writable(0), selected: writable(0)
} }
}); });
expect(getByTestId('radio-group')).toBeTruthy(); expect(getByTestId('radio-group')).toBeTruthy();
@@ -22,7 +22,7 @@ describe('RadioGroup.svelte', () => {
selected: writable(0), selected: writable(0),
background: 'bg-warning-500', background: 'bg-warning-500',
color: 'text-white', color: 'text-white',
width: 'w-auto', width: 'w-auto'
} }
}); });
expect(getByTestId('radio-group')).toBeTruthy(); expect(getByTestId('radio-group')).toBeTruthy();

9
src/lib/RangeSlider/RangeSlider.test.ts
View File

@@ -5,7 +5,6 @@ import { describe, it, expect } from 'vitest';
import RangeSlider from '$lib/RangeSlider/RangeSlider.svelte'; import RangeSlider from '$lib/RangeSlider/RangeSlider.svelte';
describe('RangeSlider.svelte', () => { describe('RangeSlider.svelte', () => {
it('Renders with minimal props', async () => { it('Renders with minimal props', async () => {
const { getByTestId } = render(RangeSlider); const { getByTestId } = render(RangeSlider);
expect(getByTestId('range-slider')).toBeTruthy(); expect(getByTestId('range-slider')).toBeTruthy();
@@ -22,7 +21,7 @@ describe('RangeSlider.svelte', () => {
value: 10, value: 10,
label: 'testRangeSliderLabel1', label: 'testRangeSliderLabel1',
ticked: true, ticked: true,
accent: 'bg-primary-500', accent: 'bg-primary-500'
} }
}); });
expect(getByTestId('range-slider')).toBeTruthy(); expect(getByTestId('range-slider')).toBeTruthy();
@@ -30,15 +29,15 @@ describe('RangeSlider.svelte', () => {
it('Ticks enabled', async () => { it('Ticks enabled', async () => {
const { getByTestId } = render(RangeSlider, { const { getByTestId } = render(RangeSlider, {
props: { ticked: true } props: { ticked: true }
}); });
expect(getByTestId('range-slider').querySelector('datalist')).toBeTruthy(); expect(getByTestId('range-slider').querySelector('datalist')).toBeTruthy();
}); });
it('Disabled state', async () => { it('Disabled state', async () => {
const { getByTestId } = render(RangeSlider, { const { getByTestId } = render(RangeSlider, {
props: { disabled: true } props: { disabled: true }
}); });
expect(getByTestId('range-slider').querySelector('input')?.disabled).eq(true) expect(getByTestId('range-slider').querySelector('input')?.disabled).eq(true);
}); });
}); });

2
src/lib/SlideToggle/SlideToggle.test.ts
View File

@@ -16,7 +16,7 @@ describe('SliderToggle.svelte', () => {
checked: true, checked: true,
accent: 'bg-primary-500', accent: 'bg-primary-500',
size: 'lg', size: 'lg',
label: 'testSlideToggle1', label: 'testSlideToggle1'
} }
}); });
expect(getByTestId('slide-toggle')).toBeTruthy(); expect(getByTestId('slide-toggle')).toBeTruthy();

1
src/lib/SvgIcon/SvgIcon.svelte
View File

@@ -1,6 +1,7 @@
<script context="module"> <script context="module">
import { icons } from './icons'; import { icons } from './icons';
</script> </script>
<script lang="ts"> <script lang="ts">
// Props // Props
export let name: string = 'image'; export let name: string = 'image';

20
src/lib/SvgIcon/SvgIcon.test.ts
View File

@@ -13,16 +13,16 @@ describe('SggIcon.svelte', () => {
it('Renders with all props', async () => { it('Renders with all props', async () => {
const { getByTestId } = render(SvgIcon, { const { getByTestId } = render(SvgIcon, {
name: 'image', name: 'image',
x: '0px', x: '0px',
y: '0px', y: '0px',
viewBox: '0 0 512 512', viewBox: '0 0 512 512',
// --- // ---
fill: 'fill-black dark:fill-white', fill: 'fill-black dark:fill-white',
width: 'w-5', width: 'w-5',
height: 'w-5', height: 'w-5',
// --- // ---
title: 'testSvgIcon1', title: 'testSvgIcon1',
tabindex: -1, tabindex: -1
}); });
expect(getByTestId('svg-icon')).toBeTruthy(); expect(getByTestId('svg-icon')).toBeTruthy();
}); });

9
src/lib/SvgIcon/icons.ts
View File

@@ -45,7 +45,7 @@ export let icons: any = {
viewBox: `0.15 0.13 799.7 479.69`, viewBox: `0.15 0.13 799.7 479.69`,
path: 'M400 .13c-106.63 0-173.27 53.3-199.93 159.89 39.99-53.3 86.64-73.28 139.95-59.96 30.42 7.6 52.16 29.67 76.23 54.09 39.2 39.78 84.57 85.82 183.68 85.82 106.62 0 173.27-53.3 199.92-159.9-39.98 53.3-86.63 73.29-139.95 59.97-30.41-7.6-52.15-29.67-76.22-54.09C544.48 46.17 499.1.13 400 .13zM200.07 239.97c-106.62 0-173.27 53.3-199.92 159.9 39.98-53.3 86.63-73.29 139.95-59.96 30.41 7.61 52.15 29.67 76.22 54.08 39.2 39.78 84.58 85.83 183.68 85.83 106.63 0 173.27-53.3 199.93-159.9-39.99 53.3-86.64 73.29-139.95 59.96-30.42-7.59-52.16-29.67-76.23-54.08-39.2-39.78-84.57-85.83-183.68-85.83z' path: 'M400 .13c-106.63 0-173.27 53.3-199.93 159.89 39.99-53.3 86.64-73.28 139.95-59.96 30.42 7.6 52.16 29.67 76.23 54.09 39.2 39.78 84.57 85.82 183.68 85.82 106.62 0 173.27-53.3 199.92-159.9-39.98 53.3-86.63 73.29-139.95 59.97-30.41-7.6-52.15-29.67-76.22-54.09C544.48 46.17 499.1.13 400 .13zM200.07 239.97c-106.62 0-173.27 53.3-199.92 159.9 39.98-53.3 86.63-73.29 139.95-59.96 30.41 7.61 52.15 29.67 76.22 54.08 39.2 39.78 84.58 85.83 183.68 85.83 106.63 0 173.27-53.3 199.93-159.9-39.99 53.3-86.64 73.29-139.95 59.96-30.42-7.59-52.16-29.67-76.23-54.08-39.2-39.78-84.57-85.83-183.68-85.83z'
}, },
// LinkedIn // LinkedIn
// Source: https://fontawesome.com/icons/linkedin?s=brands // Source: https://fontawesome.com/icons/linkedin?s=brands
linkedin: { linkedin: {
@@ -146,12 +146,12 @@ export let icons: any = {
screwdriver: { screwdriver: {
path: 'M331.8 224.1c28.29 0 54.88 10.99 74.86 30.97l19.59 19.59c40.01-17.74 71.25-53.3 81.62-96.65c5.725-23.92 5.34-47.08 .2148-68.4c-2.613-10.88-16.43-14.51-24.34-6.604l-68.9 68.9h-75.6V97.2l68.9-68.9c7.912-7.912 4.275-21.73-6.604-24.34c-21.32-5.125-44.48-5.51-68.4 .2148c-55.3 13.23-98.39 60.22-107.2 116.4C224.5 128.9 224.2 137 224.3 145l82.78 82.86C315.2 225.1 323.5 224.1 331.8 224.1zM384 278.6c-23.16-23.16-57.57-27.57-85.39-13.9L191.1 158L191.1 95.99l-127.1-95.99L0 63.1l96 127.1l62.04 .0077l106.7 106.6c-13.67 27.82-9.251 62.23 13.91 85.39l117 117.1c14.62 14.5 38.21 14.5 52.71-.0016l52.75-52.75c14.5-14.5 14.5-38.08-.0016-52.71L384 278.6zM227.9 307L168.7 247.9l-148.9 148.9c-26.37 26.37-26.37 69.08 0 95.45C32.96 505.4 50.21 512 67.5 512s34.54-6.592 47.72-19.78l119.1-119.1C225.5 352.3 222.6 329.4 227.9 307zM64 472c-13.25 0-24-10.75-24-24c0-13.26 10.75-24 24-24S88 434.7 88 448C88 461.3 77.25 472 64 472z' path: 'M331.8 224.1c28.29 0 54.88 10.99 74.86 30.97l19.59 19.59c40.01-17.74 71.25-53.3 81.62-96.65c5.725-23.92 5.34-47.08 .2148-68.4c-2.613-10.88-16.43-14.51-24.34-6.604l-68.9 68.9h-75.6V97.2l68.9-68.9c7.912-7.912 4.275-21.73-6.604-24.34c-21.32-5.125-44.48-5.51-68.4 .2148c-55.3 13.23-98.39 60.22-107.2 116.4C224.5 128.9 224.2 137 224.3 145l82.78 82.86C315.2 225.1 323.5 224.1 331.8 224.1zM384 278.6c-23.16-23.16-57.57-27.57-85.39-13.9L191.1 158L191.1 95.99l-127.1-95.99L0 63.1l96 127.1l62.04 .0077l106.7 106.6c-13.67 27.82-9.251 62.23 13.91 85.39l117 117.1c14.62 14.5 38.21 14.5 52.71-.0016l52.75-52.75c14.5-14.5 14.5-38.08-.0016-52.71L384 278.6zM227.9 307L168.7 247.9l-148.9 148.9c-26.37 26.37-26.37 69.08 0 95.45C32.96 505.4 50.21 512 67.5 512s34.54-6.592 47.72-19.78l119.1-119.1C225.5 352.3 222.6 329.4 227.9 307zM64 472c-13.25 0-24-10.75-24-24c0-13.26 10.75-24 24-24S88 434.7 88 448C88 461.3 77.25 472 64 472z'
}, },
// Source: https://fontawesome.com/icons/pen-ruler?s=solid&f=classic // Source: https://fontawesome.com/icons/pen-ruler?s=solid&f=classic
'pen-ruler': { 'pen-ruler': {
path: 'M469.3 19.3l23.4 23.4c25 25 25 65.5 0 90.5l-56.4 56.4L322.3 75.7l56.4-56.4c25-25 65.5-25 90.5 0zM44.9 353.2L299.7 98.3 413.7 212.3 158.8 467.1c-6.7 6.7-15.1 11.6-24.2 14.2l-104 29.7c-8.4 2.4-17.4 .1-23.6-6.1s-8.5-15.2-6.1-23.6l29.7-104c2.6-9.2 7.5-17.5 14.2-24.2zM249.4 103.4L103.4 249.4 16 161.9c-18.7-18.7-18.7-49.1 0-67.9L94.1 16c18.7-18.7 49.1-18.7 67.9 0l19.8 19.8c-.3 .3-.7 .6-1 .9l-64 64c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l64-64c.3-.3 .6-.7 .9-1l45.1 45.1zM408.6 262.6l45.1 45.1c-.3 .3-.7 .6-1 .9l-64 64c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l64-64c.3-.3 .6-.7 .9-1L496 350.1c18.7 18.7 18.7 49.1 0 67.9L417.9 496c-18.7 18.7-49.1 18.7-67.9 0l-87.4-87.4L408.6 262.6z' path: 'M469.3 19.3l23.4 23.4c25 25 25 65.5 0 90.5l-56.4 56.4L322.3 75.7l56.4-56.4c25-25 65.5-25 90.5 0zM44.9 353.2L299.7 98.3 413.7 212.3 158.8 467.1c-6.7 6.7-15.1 11.6-24.2 14.2l-104 29.7c-8.4 2.4-17.4 .1-23.6-6.1s-8.5-15.2-6.1-23.6l29.7-104c2.6-9.2 7.5-17.5 14.2-24.2zM249.4 103.4L103.4 249.4 16 161.9c-18.7-18.7-18.7-49.1 0-67.9L94.1 16c18.7-18.7 49.1-18.7 67.9 0l19.8 19.8c-.3 .3-.7 .6-1 .9l-64 64c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l64-64c.3-.3 .6-.7 .9-1l45.1 45.1zM408.6 262.6l45.1 45.1c-.3 .3-.7 .6-1 .9l-64 64c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l64-64c.3-.3 .6-.7 .9-1L496 350.1c18.7 18.7 18.7 49.1 0 67.9L417.9 496c-18.7 18.7-49.1 18.7-67.9 0l-87.4-87.4L408.6 262.6z'
}, },
// Source: https://fontawesome.com/icons/keyboard?s=regular&f=classic // Source: https://fontawesome.com/icons/keyboard?s=regular&f=classic
keyboard: { keyboard: {
viewBox: '0 0 576 512', viewBox: '0 0 576 512',
@@ -161,6 +161,5 @@ export let icons: any = {
// Source: https://fontawesome.com/icons/rocket?s=solid&f=classic // Source: https://fontawesome.com/icons/rocket?s=solid&f=classic
rocket: { rocket: {
path: 'M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3l82.3 0c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2v82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9V380.8c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4 .5-31.8-7.8zM384 168c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40s17.9 40 40 40z' path: 'M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3l82.3 0c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2v82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9V380.8c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4 .5-31.8-7.8zM384 168c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40s17.9 40 40 40z'
}, }
}; };

2
src/lib/Tab/Tab.test.ts
View File

@@ -18,7 +18,7 @@ describe('Tab.svelte', () => {
selected: writable(0), selected: writable(0),
border: 'border-primary-500', border: 'border-primary-500',
fill: 'fill-primary-500', fill: 'fill-primary-500',
color: 'text-primary-500', color: 'text-primary-500'
} }
}); });
expect(getByTestId('tab')).toBeTruthy(); expect(getByTestId('tab')).toBeTruthy();

2
src/lib/Tab/TabGroup.test.ts
View File

@@ -21,7 +21,7 @@ describe('TabGroup.svelte', () => {
fill: 'fill-primary-500', fill: 'fill-primary-500',
color: 'text-primary-500', color: 'text-primary-500',
labeledby: 'testTabGroupLabel1', labeledby: 'testTabGroupLabel1',
label: 'testTabGroup1', label: 'testTabGroup1'
} }
}); });
expect(getByTestId('tab-group')).toBeTruthy(); expect(getByTestId('tab-group')).toBeTruthy();

2
src/lib/Table/DataTable.test.ts
View File

@@ -31,7 +31,7 @@ describe('DataTable.svelte', () => {
hover: 'hover:bg-primary-500/10', hover: 'hover:bg-primary-500/10',
// --- // ---
labelledby: 'testDataTableLabel1', labelledby: 'testDataTableLabel1',
describedby: 'testDataTablDescribed1', describedby: 'testDataTablDescribed1'
} }
}); });
expect(getByTestId('data-table')).toBeTruthy(); expect(getByTestId('data-table')).toBeTruthy();

10
src/lib/Tooltip/Tooltip.svelte
View File

@@ -12,10 +12,10 @@
export let rounded: string = 'rounded'; export let rounded: string = 'rounded';
export let duration: number = 100; // ms export let duration: number = 100; // ms
// Props (slots) // Props (slots)
export let popup: string|undefined = undefined; export let popup: string | undefined = undefined;
export let message: string|undefined = undefined; export let message: string | undefined = undefined;
export let arrow: string|undefined = undefined; export let arrow: string | undefined = undefined;
export let content: string|undefined = undefined; export let content: string | undefined = undefined;
// Base Styles // Base Styles
const cBaseTooltip: string = 'relative inline-flex justify-center items-center'; const cBaseTooltip: string = 'relative inline-flex justify-center items-center';
@@ -92,7 +92,7 @@
<!-- Slot: Content --> <!-- Slot: Content -->
{#if $$slots.content} {#if $$slots.content}
<div class="{classesContent}" data-testid="content" on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave}> <div class={classesContent} data-testid="content" on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave}>
<slot name="content" /> <slot name="content" />
</div> </div>
{/if} {/if}

2
src/lib/Tooltip/Tooltip.test.ts
View File

@@ -20,7 +20,7 @@ describe('Tooltip.svelte', () => {
width: 'w-auto', width: 'w-auto',
whitespace: 'whitespace-nowrap', whitespace: 'whitespace-nowrap',
rounded: 'rounded', rounded: 'rounded',
duration: 100, duration: 100
} }
}); });
expect(getByTestId('tooltip')).toBeTruthy(); expect(getByTestId('tooltip')).toBeTruthy();

2
src/lib/_documentation/README.md
View File

@@ -1,3 +1,3 @@
# Documentation Components # Documentation Components
This section exists to house components that exist purely for documentation. These are not slated to be released as part of the public library set. This section exists to house components that exist purely for documentation. These are not slated to be released as part of the public library set.

114
src/lib/_documentation/SkeletonAppBar/SkeletonAppBar.svelte
View File

@@ -1,69 +1,71 @@
<script lang="ts"> <script lang="ts">
// @ts-ignore // @ts-ignore
const pkg = __PACKAGE__; const pkg = __PACKAGE__;
import AppBar from '$lib/AppBar/AppBar.svelte'; import AppBar from '$lib/AppBar/AppBar.svelte';
import Badge from '$lib/Badge/Badge.svelte'; import Badge from '$lib/Badge/Badge.svelte';
import LightSwitch from '$lib/LightSwitch/LightSwitch.svelte'; import LightSwitch from '$lib/LightSwitch/LightSwitch.svelte';
import SvgIcon from '$lib/SvgIcon/SvgIcon.svelte'; import SvgIcon from '$lib/SvgIcon/SvgIcon.svelte';
// Stores // Stores
import { storeMobileDrawer } from '$lib/_documentation/stores'; import { storeMobileDrawer } from '$lib/_documentation/stores';
// Drawer Handler // Drawer Handler
function drawerOpen(): void { storeMobileDrawer.set(true); }; function drawerOpen(): void {
storeMobileDrawer.set(true);
}
</script> </script>
<AppBar border="border-b border-b-surface-300 dark:border-b-surface-900"> <AppBar border="border-b border-b-surface-300 dark:border-b-surface-900">
<!-- Branding -->
<svelte:fragment slot="lead">
<!-- Drawer Menu -->
<div on:click={drawerOpen} class="lg:hidden mr-2 p-1 cursor-pointer">
<SvgIcon name="bars" width="w-6" height="h-6" fill="fill-black dark:fill-white" on:click={drawerOpen} />
</div>
<!-- Skeleton -->
<a href="/" class="text-sm sm:text-lg md:text-3xl font-bold uppercase mr-4" title="Return to Homepage">Skeleton</a>
<!-- Badge -->
<a class="hidden sm:block" href="https://github.com/Brain-Bones/skeleton/releases" target="_blank">
<Badge background="bg-surface-500/20" color="text-black dark:text-white">v{pkg.version}</Badge>
</a>
</svelte:fragment>
<!-- Branding --> <!-- Navigation -->
<svelte:fragment slot="lead"> <svelte:fragment slot="trail">
<!-- Drawer Menu --> <!-- Links -->
<div on:click={drawerOpen} class="lg:hidden mr-2 p-1 cursor-pointer"> <section class="hidden lg:flex space-x-4 spacer-line">
<SvgIcon name="bars" width="w-6" height="h-6" fill="fill-black dark:fill-white" on:click={drawerOpen} /> <a href="/guides/install" class="navlink" aria-label="Docs">Docs</a>
</div> <a href="/docs/why" class="navlink" aria-label="Guides">Guides</a>
<!-- Skeleton --> <a href="/components/app-shell" class="navlink" aria-label="Components">Components</a>
<a href="/" class="text-sm sm:text-lg md:text-3xl font-bold uppercase mr-4" title="Return to Homepage">Skeleton</a> <a href="/utilities/codeblocks" class="navlink" aria-label="Utilities">Utilities</a>
<!-- Badge --> </section>
<a class="hidden sm:block" href="https://github.com/Brain-Bones/skeleton/releases" target="_blank">
<Badge background="bg-surface-500/20" color="text-black dark:text-white">v{pkg.version}</Badge>
</a>
</svelte:fragment>
<!-- Navigation -->
<svelte:fragment slot="trail">
<!-- Links --> <!-- Light Switch -->
<section class="hidden lg:flex space-x-4 spacer-line"> <section class="flex spacer-line space-x-4">
<a href="/guides/install" class="navlink" aria-label="Docs">Docs</a> <LightSwitch origin="tr" />
<a href="/docs/why" class="navlink" aria-label="Guides">Guides</a> </section>
<a href="/components/app-shell" class="navlink" aria-label="Components">Components</a>
<a href="/utilities/codeblocks" class="navlink" aria-label="Components">Utilities</a>
</section>
<!-- Light Switch -->
<section class="flex spacer-line space-x-4">
<LightSwitch origin="tr" />
</section>
<!-- Community -->
<section class="flex space-x-4">
<a href="https://discord.gg/EXqV7W8MtY" target="_blank" aria-label="Discord">
<SvgIcon name="discord" viewBox="0 0 640 512" />
</a>
<a href="https://twitter.com/SkeletonUI" target="_blank" aria-label="Twitter">
<SvgIcon name="twitter" />
</a>
<a href="https://github.com/Brain-Bones/skeleton" target="_blank" aria-label="GitHub">
<SvgIcon name="github" />
</a>
</section>
</svelte:fragment>
<!-- Community -->
<section class="flex space-x-4">
<a href="https://discord.gg/EXqV7W8MtY" target="_blank" aria-label="Discord">
<SvgIcon name="discord" viewBox="0 0 640 512" />
</a>
<a href="https://twitter.com/SkeletonUI" target="_blank" aria-label="Twitter">
<SvgIcon name="twitter" />
</a>
<a href="https://github.com/Brain-Bones/skeleton" target="_blank" aria-label="GitHub">
<SvgIcon name="github" />
</a>
</section>
</svelte:fragment>
</AppBar> </AppBar>
<style lang="postcss"> <style lang="postcss">
.navlink { @apply opacity-80 hover:opacity-100 hover:text-primary-500 transition-all; } .navlink {
.spacer-line { @apply border-r border-r-surface-500/50 pr-4; } @apply opacity-80 hover:opacity-100 hover:text-primary-500 transition-all;
</style> }
.spacer-line {
@apply border-r border-r-surface-500/50 pr-4;
}
</style>

134
src/lib/_documentation/SkeletonFooter/SkeletonFooter.svelte
View File

@@ -1,77 +1,77 @@
<script lang="ts"> <script lang="ts">
import Button from "$lib/Button/Button.svelte"; import Button from '$lib/Button/Button.svelte';
import Divider from "$lib/Divider/Divider.svelte"; import Divider from '$lib/Divider/Divider.svelte';
import SvgIcon from "$lib/SvgIcon/SvgIcon.svelte"; import SvgIcon from '$lib/SvgIcon/SvgIcon.svelte';
// Base Classes // Base Classes
const cBase: string = 'bg-white/75 dark:bg-black/10 text-xs mx-auto px-4 py-8 md:p-10 space-y-10'; const cBase: string = 'bg-white/75 dark:bg-black/10 text-xs mx-auto px-4 py-8 md:p-10 space-y-10';
const cRowOne: string = 'flex flex-col md:flex-row justify-between items-center md:items-start space-y-5 md:space-y-0'; const cRowOne: string = 'flex flex-col md:flex-row justify-between items-center md:items-start space-y-5 md:space-y-0';
const cRowTwo: string = 'flex flex-col md:flex-row justify-between items-center md:items-start space-y-4 md:space-y-0'; const cRowTwo: string = 'flex flex-col md:flex-row justify-between items-center md:items-start space-y-4 md:space-y-0';
</script> </script>
<div class="page-footer {cBase}"> <div class="page-footer {cBase}">
<!-- Row 1 -->
<section class={cRowOne}>
<div class="space-y-2">
<span class="text-2xl font-bold uppercase">Skeleton</span>
<p class="text-lg">A fully featured Svelte + Tailwind component library.</p>
</div>
<div class="hidden md:flex items-start space-x-10">
<div class="space-y-4">
<h6>About</h6>
<ul class="space-y-2">
<li><a href="/docs/why">Contribute</a></li>
<li><a href="/docs/comparisons">Why Skeleton</a></li>
<li><a href="/docs/contributions">Comparisons</a></li>
</ul>
</div>
<div class="space-y-4">
<h6>Community</h6>
<ul class="space-y-2">
<li><a href="https://discord.gg/EXqV7W8MtY" target="_blank">Join Discord Community</a></li>
<li><a href="https://twitter.com/SkeletonUI" target="_blank">Follow on Twitter</a></li>
<li><a href="https://github.com/Brain-Bones/skeleton" target="_blank">View Github</a></li>
</ul>
</div>
<div class="space-y-4">
<h6>Project</h6>
<ul class="space-y-2">
<li><a href="https://github.com/Brain-Bones" target="_blank">Github Organization</a></li>
<li><a href="https://www.npmjs.com/org/brainandbones" target="_blank">NPM Organization</a></li>
<li><a href="https://www.npmjs.com/package/@brainandbones/skeleton" target="_blank">NPM Package</a></li>
</ul>
</div>
</div>
</section>
<!-- Row 1 --> <Divider variant="dotted" class="border-black/10 dark:border-white/10" />
<section class="{cRowOne}">
<div class="space-y-2">
<span class="text-2xl font-bold uppercase">Skeleton</span>
<p class="text-lg">A fully featured Svelte + Tailwind component library.</p>
</div>
<div class="hidden md:flex items-start space-x-10">
<div class="space-y-4">
<h6>About</h6>
<ul class="space-y-2">
<li><a href="/docs/why">Contribute</a></li>
<li><a href="/docs/comparisons">Why Skeleton</a></li>
<li><a href="/docs/contributions">Comparisons</a></li>
</ul>
</div>
<div class="space-y-4">
<h6>Community</h6>
<ul class="space-y-2">
<li><a href="https://discord.gg/EXqV7W8MtY" target="_blank">Join Discord Community</a></li>
<li><a href="https://twitter.com/SkeletonUI" target="_blank">Follow on Twitter</a></li>
<li><a href="https://github.com/Brain-Bones/skeleton" target="_blank">View Github</a></li>
</ul>
</div>
<div class="space-y-4">
<h6>Project</h6>
<ul class="space-y-2">
<li><a href="https://github.com/Brain-Bones" target="_blank">Github Organization</a></li>
<li><a href="https://www.npmjs.com/org/brainandbones" target="_blank">NPM Organization</a></li>
<li><a href="https://www.npmjs.com/package/@brainandbones/skeleton" target="_blank">NPM Package</a></li>
</ul>
</div>
</div>
</section>
<Divider variant="dotted" class="border-black/10 dark:border-white/10" /> <!-- Row 2 -->
<section class={cRowTwo}>
<!-- Row 2 --> <p class="text-xs">
<section class="{cRowTwo}"> <a href="https://github.com/Brain-Bones/skeleton/blob/master/LICENSE" target="_blank">MIT License</a>
<p class="text-xs"> <span class="opacity-10 mx-2">|</span>
<a href="https://github.com/Brain-Bones/skeleton/blob/master/LICENSE" target="_blank">MIT License</a> <a href="https://github.com/Brain-Bones/skeleton/graphs/contributors" target="_blank">Contributors</a>
<span class="opacity-10 mx-2">|</span> </p>
<a href="https://github.com/Brain-Bones/skeleton/graphs/contributors" target="_blank">Contributors</a> <div class="flex space-x-4">
</p> <Button background="bg-[#7289da]" color="!text-white" href="https://discord.gg/EXqV7W8MtY" target="_blank">
<div class="flex space-x-4"> <SvgIcon name="discord" fill="fill-white" viewBox="0 0 640 512" class="-translate-y-[2px]" />
<Button background="bg-[#7289da]" color="!text-white" href="https://discord.gg/EXqV7W8MtY" target="_blank"> <span class="hidden md:inline-block ml-2">Discord</span>
<SvgIcon name="discord" fill="fill-white" viewBox="0 0 640 512" class="-translate-y-[2px]" /> </Button>
<span class="hidden md:inline-block ml-2">Discord</span> <Button background="bg-[#1da1f2]" color="!text-white" href="https://twitter.com/SkeletonUI" target="_blank">
</Button> <SvgIcon name="twitter" fill="fill-white" class="-translate-y-[2px]" />
<Button background="bg-[#1da1f2]" color="!text-white" href="https://twitter.com/SkeletonUI" target="_blank"> <span class="hidden md:inline-block ml-2">Twitter</span>
<SvgIcon name="twitter" fill="fill-white" class="-translate-y-[2px]" /> </Button>
<span class="hidden md:inline-block ml-2">Twitter</span> <Button background="bg-[#6e5494]" color="!text-white" href="https://github.com/Brain-Bones/skeleton" target="_blank">
</Button> <SvgIcon name="github" fill="fill-white" class="-translate-y-[2px]" />
<Button background="bg-[#6e5494]" color="!text-white" href="https://github.com/Brain-Bones/skeleton" target="_blank"> <span class="hidden md:inline-block ml-2">Github</span>
<SvgIcon name="github" fill="fill-white" class="-translate-y-[2px]" /> </Button>
<span class="hidden md:inline-block ml-2">Github</span> </div>
</Button> </section>
</div>
</section>
</div> </div>
<style lang="postcss"> <style lang="postcss">
a { @apply !no-underline !text-surface-500 hover:!text-primary-500 text-sm; } a {
</style> @apply !no-underline !text-surface-500 hover:!text-primary-500 text-sm;
}
</style>

10
src/lib/_documentation/SkeletonNavigation/SkeletonDrawer.svelte
View File

@@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import Drawer from "$lib/Drawer/Drawer.svelte"; import Drawer from '$lib/Drawer/Drawer.svelte';
import SkeletonSidebar from "./SkeletonSidebar.svelte"; import SkeletonSidebar from './SkeletonSidebar.svelte';
import { storeMobileDrawer } from "$lib/_documentation/stores"; import { storeMobileDrawer } from '$lib/_documentation/stores';
</script> </script>
<Drawer open={storeMobileDrawer} display="lg:hidden"> <Drawer open={storeMobileDrawer} display="lg:hidden">
<SkeletonSidebar embedded={true} /> <SkeletonSidebar embedded={true} />
</Drawer> </Drawer>

81
src/lib/_documentation/SkeletonNavigation/SkeletonSidebar.svelte
View File

@@ -1,50 +1,47 @@
<script lang="ts"> <script lang="ts">
import { Badge, List, ListItem, Divider } from '@brainandbones/skeleton'; import { Badge, List, ListItem, Divider } from '@brainandbones/skeleton';
import SvgIcon from '$lib/SvgIcon/SvgIcon.svelte'; import SvgIcon from '$lib/SvgIcon/SvgIcon.svelte';
import { storeCurrentUrl, storeMobileDrawer } from '$lib/_documentation/stores'; import { storeCurrentUrl, storeMobileDrawer } from '$lib/_documentation/stores';
import { menuNavLinks } from './links'; import { menuNavLinks } from './links';
// Props // Props
export let embedded: boolean = false; export let embedded: boolean = false;
// ListItem Click Handler // ListItem Click Handler
function onListItemClick(): void { function onListItemClick(): void {
if (!embedded) return; if (!embedded) return;
storeMobileDrawer.set(false); storeMobileDrawer.set(false);
} }
</script> </script>
<div class="mb-8 {$$props.class||''}"> <div class="mb-8 {$$props.class || ''}">
{#each menuNavLinks as { title, list }, i}
<!-- Title -->
<div class="text-primary-500 text-sm font-bold uppercase p-4">{title}</div>
{#each menuNavLinks as { title, list }, i} <!-- List -->
<List tag="nav" selected={storeCurrentUrl} {title} label={title}>
{#each list as { href, label, badge, icon }}
<ListItem {href} value={href} on:click={onListItemClick}>
<!-- Icon -->
<svelte:fragment slot="lead">
{#if icon}
<div class="bg-accent-500 w-7 h-7 flex justify-center items-center rounded shadow">
<SvgIcon name={icon} width="w-4" fill="fill-white" height="h-10" />
</div>
{/if}
</svelte:fragment>
<!-- Label -->
<span>{label}</span>
<!-- Badge -->
<svelte:fragment slot="trail">
{#if badge}<Badge background="bg-accent-500 dark/bg-accent-500/30">{badge}</Badge>{/if}
</svelte:fragment>
</ListItem>
{/each}
</List>
<!-- Title --> <!-- Divider -->
<div class="text-primary-500 text-sm font-bold uppercase p-4">{title}</div> {#if i + 1 < menuNavLinks.length}<Divider class="my-4 opacity-30" />{/if}
{/each}
<!-- List -->
<List tag="nav" selected={storeCurrentUrl} {title} label={title}>
{#each list as { href, label, badge, icon }}
<ListItem {href} value={href} on:click={onListItemClick}>
<!-- Icon -->
<svelte:fragment slot="lead">
{#if icon}
<div class="bg-accent-500 w-7 h-7 flex justify-center items-center rounded shadow">
<SvgIcon name={icon} width="w-4" fill="fill-white" height="h-10" />
</div>
{/if}
</svelte:fragment>
<!-- Label -->
<span>{label}</span>
<!-- Badge -->
<svelte:fragment slot="trail">
{#if badge}<Badge background="bg-accent-500 dark/bg-accent-500/30">{badge}</Badge>{/if}
</svelte:fragment>
</ListItem>
{/each}
</List>
<!-- Divider -->
{#if i + 1 < menuNavLinks.length}<Divider class="my-4 opacity-30" />{/if}
{/each}
</div> </div>

122
src/lib/_documentation/SkeletonNavigation/links.ts
View File

@@ -1,65 +1,65 @@
// Menu Navigation Links // Menu Navigation Links
export const menuNavLinks: any = [ export const menuNavLinks: any = [
{ {
title: 'Get Started', title: 'Get Started',
list: [ list: [
{ href: '/guides/install', label: 'Install', icon: 'circle-check' }, { href: '/guides/install', label: 'Install', icon: 'circle-check' },
{ href: '/guides/tailwind', label: 'Tailwind Settings', icon: 'tailwind' }, { href: '/guides/tailwind', label: 'Tailwind Settings', icon: 'tailwind' },
{ href: '/guides/themes', label: 'Themes', icon: 'swatchbook' }, { href: '/guides/themes', label: 'Themes', icon: 'swatchbook' },
{ href: '/guides/styling', label: 'Styling', icon: 'pen-ruler' }, { href: '/guides/styling', label: 'Styling', icon: 'pen-ruler' },
{ href: '/guides/forms', label: 'Forms', icon: 'keyboard' }, { href: '/guides/forms', label: 'Forms', icon: 'keyboard' },
{ href: '/guides/astro', label: 'Usage with Astro', icon: 'rocket' } { href: '/guides/astro', label: 'Usage with Astro', icon: 'rocket' }
] ]
}, },
{ {
title: 'Docs', title: 'Docs',
list: [ list: [
{ href: '/docs/why', label: 'Why Skeleton' }, { href: '/docs/why', label: 'Why Skeleton' },
{ href: '/docs/comparisons', label: 'Comparisons' }, { href: '/docs/comparisons', label: 'Comparisons' },
{ href: '/docs/contributions', label: 'Contributions' } { href: '/docs/contributions', label: 'Contributions' }
] ]
}, },
{ {
title: 'Components', title: 'Components',
list: [ list: [
{ href: '/components/app-shell', label: 'App Shell' }, { href: '/components/app-shell', label: 'App Shell' },
{ href: '/components/app-bar', label: 'App Bar' }, { href: '/components/app-bar', label: 'App Bar' },
{ href: '/components/accordions', label: 'Accordions' }, { href: '/components/accordions', label: 'Accordions' },
{ href: '/components/alerts', label: 'Alerts' }, { href: '/components/alerts', label: 'Alerts' },
{ href: '/components/avatars', label: 'Avatars' }, { href: '/components/avatars', label: 'Avatars' },
{ href: '/components/badges', label: 'Badges' }, { href: '/components/badges', label: 'Badges' },
{ href: '/components/breadcrumbs', label: 'Breadcrumbs' }, { href: '/components/breadcrumbs', label: 'Breadcrumbs' },
{ href: '/components/buttons', label: 'Buttons' }, { href: '/components/buttons', label: 'Buttons' },
{ href: '/components/cards', label: 'Cards' }, { href: '/components/cards', label: 'Cards' },
// {href: '/components/conic-gradients', label: 'Conic Gradients'}, // keep disabled until further notice // {href: '/components/conic-gradients', label: 'Conic Gradients'}, // keep disabled until further notice
{ href: '/components/data-tables', label: 'Data Tables' }, { href: '/components/data-tables', label: 'Data Tables' },
{ href: '/components/dividers', label: 'Dividers' }, { href: '/components/dividers', label: 'Dividers' },
{ href: '/components/gradient-headings', label: 'Gradient Headings' }, { href: '/components/gradient-headings', label: 'Gradient Headings' },
{ href: '/components/lists', label: 'Lists' }, { href: '/components/lists', label: 'Lists' },
{ href: '/components/logo-clouds', label: 'Logo Clouds' }, { href: '/components/logo-clouds', label: 'Logo Clouds' },
{ href: '/components/menus', label: 'Menus' }, { href: '/components/menus', label: 'Menus' },
{ href: '/components/paginators', label: 'Paginators' }, { href: '/components/paginators', label: 'Paginators' },
{ href: '/components/progress-bars', label: 'Progress Bars' }, { href: '/components/progress-bars', label: 'Progress Bars' },
{ href: '/components/progress-radials', label: 'Progress Radials' }, { href: '/components/progress-radials', label: 'Progress Radials' },
{ href: '/components/radio-groups', label: 'Radio Groups' }, { href: '/components/radio-groups', label: 'Radio Groups' },
{ href: '/components/range-sliders', label: 'Range Sliders' }, { href: '/components/range-sliders', label: 'Range Sliders' },
{ href: '/components/slide-toggles', label: 'Slide Toggles' }, { href: '/components/slide-toggles', label: 'Slide Toggles' },
{ href: '/components/steppers', label: 'Steppers' }, { href: '/components/steppers', label: 'Steppers' },
// { href: '/components/svg-icons', label: 'SVG Icons' }, // keep disabled until further notice // { href: '/components/svg-icons', label: 'SVG Icons' }, // keep disabled until further notice
{ href: '/components/tabs', label: 'Tabs' }, { href: '/components/tabs', label: 'Tabs' },
{ href: '/components/tooltips', label: 'Tooltips' } { href: '/components/tooltips', label: 'Tooltips' }
] ]
}, },
{ {
title: 'Utilities', title: 'Utilities',
list: [ list: [
{ href: '/utilities/codeblocks', label: 'Code Blocks' }, { href: '/utilities/codeblocks', label: 'Code Blocks' },
{ href: '/utilities/drawers', label: 'Drawers' }, { href: '/utilities/drawers', label: 'Drawers' },
{ href: '/utilities/dialogs', label: 'Dialogs' }, { href: '/utilities/dialogs', label: 'Dialogs' },
{ href: '/utilities/toasts', label: 'Toasts' }, { href: '/utilities/toasts', label: 'Toasts' },
{ href: '/utilities/lightswitches', label: 'Lightswitch' }, { href: '/utilities/lightswitches', label: 'Lightswitch' },
{ href: '/utilities/filters', label: 'Filters', badge: 'Experimental' } { href: '/utilities/filters', label: 'Filters', badge: 'Experimental' }
] ]
} }
]; ];

2
src/lib/_documentation/ThemeGenerator/ThemeGenCustom.svelte
View File

@@ -67,7 +67,7 @@
// Creates a hex shade palette from a singular hex value // Creates a hex shade palette from a singular hex value
function generateHexShades(key: string): void { function generateHexShades(key: string): void {
// Use paletteGenerator // Use paletteGenerator
const p: any = paletteGenerator({ names: [key], colors: [formValues[key]], }); const p: any = paletteGenerator({ names: [key], colors: [formValues[key]] });
delete p[key][950]; // drop swatch 950 delete p[key][950]; // drop swatch 950
hexShades[key] = p[key]; hexShades[key] = p[key];
// Generate RGB shades // Generate RGB shades

2
src/lib/_documentation/stores.ts
View File

@@ -3,7 +3,7 @@ import { writable, type Writable } from 'svelte/store';
// TODO: make these persit with window.localStorage // TODO: make these persit with window.localStorage
// Set within root layout, persists current SvelteKit $page.url.pathname // Set within root layout, persists current SvelteKit $page.url.pathname
export const storeCurrentUrl: Writable<string|undefined> = writable(undefined); export const storeCurrentUrl: Writable<string | undefined> = writable(undefined);
// Persists the tab selection for the user's preferred framework // Persists the tab selection for the user's preferred framework
export const storeFramework: Writable<string> = writable('sveltekit'); export const storeFramework: Writable<string> = writable('sveltekit');

2
src/lib/index.ts
View File

@@ -41,7 +41,7 @@ export { default as LightSwitch } from './LightSwitch/LightSwitch.svelte';
// CodeBlock // CodeBlock
export { storeHighlightJs } from './CodeBlock/stores'; export { storeHighlightJs } from './CodeBlock/stores';
export { default as CodeBlock } from "./CodeBlock/CodeBlock.svelte"; export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
// Filters // Filters
export { filter } from './Filters/filter'; export { filter } from './Filters/filter';

2
src/lib/styles/core.css
View File

@@ -1,7 +1,7 @@
/* --- Skeleton: Core --- */ /* --- Skeleton: Core --- */
body { body {
@apply font-sans bg-surface-100 dark:bg-surface-900 text-black dark:text-white; @apply font-sans bg-surface-100 dark:bg-surface-900 text-black dark:text-white;
} }
/* --- Scrollbars --- */ /* --- Scrollbars --- */

2
src/lib/styles/tailwind.css
View File

@@ -7,4 +7,4 @@ Remove these from your global CSS file if you use this add-on.
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@tailwind variants; @tailwind variants;

28
src/lib/styles/typography.css
View File

@@ -1,12 +1,24 @@
/* --- Skeleton: Typography --- */ /* --- Skeleton: Typography --- */
/* Headings */ /* Headings */
h1 { @apply text-4xl md:text-5xl font-bold; } h1 {
h2 { @apply text-3xl md:text-3xl font-bold; } @apply text-4xl md:text-5xl font-bold;
h3 { @apply text-2xl md:text-2xl font-bold; } }
h4 { @apply text-xl md:text-xl font-bold; } h2 {
h5 { @apply text-lg md:text-lg font-bold; } @apply text-3xl md:text-3xl font-bold;
h6 { @apply text-base md:text-base font-bold; } }
h3 {
@apply text-2xl md:text-2xl font-bold;
}
h4 {
@apply text-xl md:text-xl font-bold;
}
h5 {
@apply text-lg md:text-lg font-bold;
}
h6 {
@apply text-base md:text-base font-bold;
}
/* Blockquote */ /* Blockquote */
blockquote { blockquote {
@@ -18,7 +30,7 @@ p {
@apply text-base text-surface-500 dark:text-surface-400; @apply text-base text-surface-500 dark:text-surface-400;
} }
a:not(.comp-button):not(.crumb a):not(.list-row):not(.drawer a):not(.app-bar a) { a:not(.comp-button):not(.crumb a):not(.list-row):not(.drawer a):not(.app-bar a) {
@apply text-primary-500 underline underline-offset-4 decoration-primary-500/20 decoration-dotted ; @apply text-primary-500 underline underline-offset-4 decoration-primary-500/20 decoration-dotted;
} }
/* --- Pre and Code --- */ /* --- Pre and Code --- */
@@ -30,4 +42,4 @@ pre:not(.codeblock pre) {
code:not(.codeblock code) { code:not(.codeblock code) {
@apply bg-surface-500/30 text-black dark:text-white text-xs py-1 px-2 rounded; @apply bg-surface-500/30 text-black dark:text-white text-xs py-1 px-2 rounded;
} }

4
src/routes/(inner)/+layout.svelte
View File

@@ -1,5 +1,5 @@
<!-- Layout: (inner) route group --> <!-- Layout: (inner) route group -->
<div class="container mx-auto p-4 md:p-10 space-y-10"> <div class="container mx-auto p-4 md:p-10 space-y-10">
<slot /> <slot />
</div> </div>

2
src/routes/(inner)/components/accordions/+page.svelte
View File

@@ -18,7 +18,7 @@
['hover', 'string', 'hover:bg-primary-500/10', '-', 'Provide a class to set the hover background color.'], ['hover', 'string', 'hover:bg-primary-500/10', '-', 'Provide a class to set the hover background color.'],
['spacing', 'string', 'space-y-0', '-', 'Provide a class to set spacing between title and description elements.'], ['spacing', 'string', 'space-y-0', '-', 'Provide a class to set spacing between title and description elements.'],
['padding', 'string', 'px-4 py-2', '-', 'Provide a class to set padding for summary and content regions.'], ['padding', 'string', 'px-4 py-2', '-', 'Provide a class to set padding for summary and content regions.'],
['rounded', 'string', 'rounded', '-', 'Provide a class to set summary border radius.'], ['rounded', 'string', 'rounded', '-', 'Provide a class to set summary border radius.']
] ]
}; };
const tableSlots: any = { const tableSlots: any = {

13
src/routes/(inner)/components/app-bar/+page.svelte
View File

@@ -11,7 +11,7 @@
['border', 'string', '-', 'Provide a class to set border styles.'], ['border', 'string', '-', 'Provide a class to set border styles.'],
['padding', 'string', 'px-4 py-4 md:py-6', 'Provide a class to set padding.'], ['padding', 'string', 'px-4 py-4 md:py-6', 'Provide a class to set padding.'],
['shadow', 'string', 'shadow-xl', 'Provide a class to define a box shadow.'], ['shadow', 'string', 'shadow-xl', 'Provide a class to define a box shadow.'],
['space', 'string', 'space-x-4', 'Provide a class to set horizontal spacing.'], ['space', 'string', 'space-x-4', 'Provide a class to set horizontal spacing.']
] ]
}; };
const tableSlots: any = { const tableSlots: any = {
@@ -19,7 +19,7 @@
source: [ source: [
['default', 'Provide items that reside in the center, such as a search element.'], ['default', 'Provide items that reside in the center, such as a search element.'],
['lead', 'Provide leading items, such as a branding logo or page header.'], ['lead', 'Provide leading items, such as a branding logo or page header.'],
['trail', 'Provide trailing items, such as a navigation links.'], ['trail', 'Provide trailing items, such as a navigation links.']
] ]
}; };
const tableA11y: any = { const tableA11y: any = {
@@ -45,7 +45,7 @@
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">
<span class="text-base md:text-3xl font-bold uppercase">Logo</span> <span class="text-base md:text-3xl font-bold uppercase">Logo</span>
</svelte:fragment> </svelte:fragment>
<input type="search" placeholder="Search..." class="max-w-[200px]"> <input type="search" placeholder="Search..." class="max-w-[200px]" />
<svelte:fragment slot="trail"> <svelte:fragment slot="trail">
<SvgIcon /> <SvgIcon />
</svelte:fragment> </svelte:fragment>
@@ -55,13 +55,16 @@
<!-- Usage --> <!-- Usage -->
<section class="space-y-4"> <section class="space-y-4">
<h2>Usage</h2> <h2>Usage</h2>
<CodeBlock language="html" code={` <CodeBlock
language="html"
code={`
<AppBar> <AppBar>
<svelte:fragment slot="lead">(branding)</svelte:fragment> <svelte:fragment slot="lead">(branding)</svelte:fragment>
(search) (search)
<svelte:fragment slot="trail">(navigation)</svelte:fragment> <svelte:fragment slot="trail">(navigation)</svelte:fragment>
</AppBar> </AppBar>
`.trim()} /> `.trim()}
/>
</section> </section>
<!-- Properties --> <!-- Properties -->

41
src/routes/(inner)/components/app-shell/+page.svelte
View File

@@ -12,7 +12,7 @@
headings: ['Prop', 'Type', 'Default', 'Required', 'Description'], headings: ['Prop', 'Type', 'Default', 'Required', 'Description'],
source: [ source: [
['sidebarLeftWidth', 'string', 'w-auto', '-', 'Provide a class to set the left sidebar width.'], ['sidebarLeftWidth', 'string', 'w-auto', '-', 'Provide a class to set the left sidebar width.'],
['sidebarRightWidth', 'string', 'w-auto', '-', 'Provide a class to set the right sidebar width.'], ['sidebarRightWidth', 'string', 'w-auto', '-', 'Provide a class to set the right sidebar width.']
] ]
}; };
const tableSlots: any = { const tableSlots: any = {
@@ -23,7 +23,7 @@
['sidebarLeft', 'Hidden when empty. Allows you to set fixed left sidebar content.'], ['sidebarLeft', 'Hidden when empty. Allows you to set fixed left sidebar content.'],
['sidebarRight', 'Hidden when empty. Allows you to set fixed right sidebar content.'], ['sidebarRight', 'Hidden when empty. Allows you to set fixed right sidebar content.'],
['pageHeader', 'Insert content that resides above your page content. Great for global alerts.'], ['pageHeader', 'Insert content that resides above your page content. Great for global alerts.'],
['pageFooter', 'Insert content that resides below your page content. Add your site footer here.'], ['pageFooter', 'Insert content that resides below your page content. Add your site footer here.']
] ]
}; };
</script> </script>
@@ -57,7 +57,9 @@
<section class="space-y-4"> <section class="space-y-4">
<h2>Usage</h2> <h2>Usage</h2>
<p>For best results implement this in your app's root layout. The slot order does not matter.</p> <p>For best results implement this in your app's root layout. The slot order does not matter.</p>
<CodeBlock language="html" code={` <CodeBlock
language="html"
code={`
<AppShell> <AppShell>
<svelte:fragment slot="header">Header</svelte:fragment> <svelte:fragment slot="header">Header</svelte:fragment>
<svelte:fragment slot="sidebarLeft">Sidebar Left</svelte:fragment> <svelte:fragment slot="sidebarLeft">Sidebar Left</svelte:fragment>
@@ -67,32 +69,45 @@
<!-- Be sure to insert your route <slot> in the default position ---> <!-- Be sure to insert your route <slot> in the default position --->
<slot /> <slot />
</AppShell> </AppShell>
`.trim()} /> `.trim()}
/>
<p>The App Shell will expand to fill the parent container. Disable overflow on your <em>html</em> and <em>body</em> tags to prevent duplicate scroll bars.</p> <p>The App Shell will expand to fill the parent container. Disable overflow on your <em>html</em> and <em>body</em> tags to prevent duplicate scroll bars.</p>
<CodeBlock language="css" code={` <CodeBlock
language="css"
code={`
/* Within your global stylesheet */ /* Within your global stylesheet */
html, body { @apply w-screen h-screen overflow-hidden; } html, body { @apply w-screen h-screen overflow-hidden; }
`.trim()} /> `.trim()}
/>
<h4>Header AppBar</h4> <h4>Header AppBar</h4>
<p>The <a href="/components/app-bar">AppBar</a> component should be embedded within the top-most <code>header</code> slot.</p> <p>The <a href="/components/app-bar">AppBar</a> component should be embedded within the top-most <code>header</code> slot.</p>
<CodeBlock language="html" code={` <CodeBlock
language="html"
code={`
<AppShell> <AppShell>
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<AppBar>Logo</AppBar> <AppBar>Logo</AppBar>
</svelte:fragment> </svelte:fragment>
<!-- ... --> <!-- ... -->
</AppShell> </AppShell>
`.trim()} /> `.trim()}
/>
<h4>Using Sidebars</h4> <h4>Using Sidebars</h4>
<p>Please be aware that sidebars have a default width of <code>auto</code>. They will automatically collapse when empty or content is set to hidden. This is useful for hiding sidebars using media queries via <a href="https://tailwindcss.com/docs/responsive-design" target="_blank">Tailwind's responsive breakpoints</a>.</p> <p>
<CodeBlock language="html" code={` Please be aware that sidebars have a default width of <code>auto</code>. They will automatically collapse when empty or content is set to hidden. This is useful for hiding sidebars using media
queries via <a href="https://tailwindcss.com/docs/responsive-design" target="_blank">Tailwind's responsive breakpoints</a>.
</p>
<CodeBlock
language="html"
code={`
<AppShell> <AppShell>
<svelte:fragment slot="sidebarLeft"> <svelte:fragment slot="sidebarLeft">
<!-- Hidden below Tailwind's large breakpoint --> <!-- Hidden below Tailwind's large breakpoint -->
<div id="sidebar-left" class="hidden lg:block">Sidebar</div> <div id="sidebar-left" class="hidden lg:block">Sidebar</div>
</svelte:fragment> </svelte:fragment>
</AppShell> </AppShell>
`.trim()} /> `.trim()}
/>
</section> </section>
<!-- Properties --> <!-- Properties -->
@@ -109,5 +124,7 @@ html, body { @apply w-screen h-screen overflow-hidden; }
</div> </div>
<style lang="postcss"> <style lang="postcss">
.boxShape { @apply bg-warning-500/10 border border-warning-500 p-4 text-center text-xs h-full flex justify-center items-center; } .boxShape {
@apply bg-warning-500/10 border border-warning-500 p-4 text-center text-xs h-full flex justify-center items-center;
}
</style> </style>

2
src/routes/(inner)/components/avatars/+page.svelte
View File

@@ -4,7 +4,7 @@
import { Apollo, BlueNight, Emerald, GreenFall, Noir, NoirLight, Rustic, Summer84, XPro } from '@brainandbones/skeleton'; import { Apollo, BlueNight, Emerald, GreenFall, Noir, NoirLight, Rustic, Summer84, XPro } from '@brainandbones/skeleton';
import CodeBlock from '$lib/CodeBlock/CodeBlock.svelte'; import CodeBlock from '$lib/CodeBlock/CodeBlock.svelte';
const storeSrc: Writable<string|undefined> = writable(undefined); const storeSrc: Writable<string | undefined> = writable(undefined);
let placeholder: string = 'https://i.pravatar.cc/'; let placeholder: string = 'https://i.pravatar.cc/';
const tableProps: any = { const tableProps: any = {

15
src/routes/(inner)/components/cards/+page.svelte
View File

@@ -13,15 +13,15 @@
['ringSize', 'string', 'ring-[1px]', 'Provide a class set outline size.'], ['ringSize', 'string', 'ring-[1px]', 'Provide a class set outline size.'],
['ringColor', 'string', 'ring-black/5 dark:ring-white/5', 'Provide a class set outline color.'], ['ringColor', 'string', 'ring-black/5 dark:ring-white/5', 'Provide a class set outline color.'],
['ringInset', 'string', 'ring-inset', 'Provide a class set outline inset style.'], ['ringInset', 'string', 'ring-inset', 'Provide a class set outline inset style.'],
['rounded', 'string', 'rounded-lg', 'Provide a class set border radius style.'], ['rounded', 'string', 'rounded-lg', 'Provide a class set border radius style.']
] ]
}; };
const tablePropsSlots: any = { const tablePropsSlots: any = {
headings: ['Prop', 'Type', 'Default', 'Description'], headings: ['Prop', 'Type', 'Default', 'Description'],
source: [ source: [
['header', 'string', '-', 'Provide classes for the card\'s header slot.'], ['header', 'string', '-', "Provide classes for the card's header slot."],
['body', 'string', '-', 'Provide classes for the card\'s body slot.'], ['body', 'string', '-', "Provide classes for the card's body slot."],
['footer', 'string', '-', 'Provide classes for the card\'s footer slot.'], ['footer', 'string', '-', "Provide classes for the card's footer slot."]
] ]
}; };
const tableSlots: any = { const tableSlots: any = {
@@ -88,13 +88,16 @@
<CodeBlock language="html" code={`<Card>Minimal</Card>`} /> <CodeBlock language="html" code={`<Card>Minimal</Card>`} />
<CodeBlock language="html" code={`<Card background="bg-primary-500" color="text-white">Colored</Card>`} /> <CodeBlock language="html" code={`<Card background="bg-primary-500" color="text-white">Colored</Card>`} />
<CodeBlock language="html" code={`<Card class="hover:shadow-xl">Styled</Card>`} /> <CodeBlock language="html" code={`<Card class="hover:shadow-xl">Styled</Card>`} />
<CodeBlock language="html" code={` <CodeBlock
language="html"
code={`
<Card header="bg-red-500" body="bg-green-500" footer="bg-blue-500" space="space-y-1"> <Card header="bg-red-500" body="bg-green-500" footer="bg-blue-500" space="space-y-1">
<svelte:fragment slot="header">(header)</svelte:fragment> <svelte:fragment slot="header">(header)</svelte:fragment>
(body) (body)
<svelte:fragment slot="footer">(footer)</svelte:fragment> <svelte:fragment slot="footer">(footer)</svelte:fragment>
</Card> </Card>
`.trim()} /> `.trim()}
/>
</section> </section>
<!-- Properties --> <!-- Properties -->

2
src/routes/(inner)/components/lists/+page.svelte
View File

@@ -14,7 +14,7 @@
['space', 'string', 'space-y-1', 'class', 'Provide a class to set Y-axis spacing of list items.'], ['space', 'string', 'space-y-1', 'class', 'Provide a class to set Y-axis spacing of list items.'],
['selected', 'Writable', '-', 'any', 'Nav tag only. Provide a writable store to maintain list selection.'], ['selected', 'Writable', '-', 'any', 'Nav tag only. Provide a writable store to maintain list selection.'],
['hover', 'string', 'hover:bg-primary-500/10', 'class', 'Nav tag only. Provide a class to set hover background color.'], ['hover', 'string', 'hover:bg-primary-500/10', 'class', 'Nav tag only. Provide a class to set hover background color.'],
['highlight', 'string', '!bg-primary-500', 'class', 'Nav tag only. Provide a class for highlighted rows. Note this must be use (!) for important.'], ['highlight', 'string', '!bg-primary-500', 'class', 'Nav tag only. Provide a class for highlighted rows. Note this must be use (!) for important.']
] ]
}; };
const tablePropsItems: any = { const tablePropsItems: any = {

10
src/routes/(inner)/components/template/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import DataTable from '$lib/Table/DataTable.svelte'; import DataTable from '$lib/Table/DataTable.svelte';
import Card from '$lib/Card/Card.svelte'; import Card from '$lib/Card/Card.svelte';
import CodeBlock from '$lib/CodeBlock/CodeBlock.svelte'; import CodeBlock from '$lib/CodeBlock/CodeBlock.svelte';
// Tables // Tables
@@ -8,20 +8,18 @@
headings: ['Prop', 'Type', 'Default', 'Values', 'Required', 'Description'], headings: ['Prop', 'Type', 'Default', 'Values', 'Required', 'Description'],
source: [ source: [
['name', '-', '-', '-', '&check;', '...'], ['name', '-', '-', '-', '&check;', '...'],
['name', '-', '-', '-', '-', '...'], ['name', '-', '-', '-', '-', '...']
] ]
}; };
const tableSlots: any = { const tableSlots: any = {
headings: ['Name', 'Description'], headings: ['Name', 'Description'],
source: [ source: [['name', '...']]
['name', '...'],
]
}; };
const tableA11y: any = { const tableA11y: any = {
headings: ['Prop', 'Type', 'Default', 'Values', 'Required', 'Description'], headings: ['Prop', 'Type', 'Default', 'Values', 'Required', 'Description'],
source: [ source: [
['name', '-', '-', '-', '&check;', '...'], ['name', '-', '-', '-', '&check;', '...'],
['name', '-', '-', '-', '-', '...'], ['name', '-', '-', '-', '-', '...']
] ]
}; };
</script> </script>

2
src/routes/(inner)/components/tooltips/+page.svelte
View File

@@ -21,7 +21,7 @@
['popup', 'string', 'false', 'Provide classes to style the popup.'], ['popup', 'string', 'false', 'Provide classes to style the popup.'],
['message', 'string', 'false', 'Provide classes to style the popup message.'], ['message', 'string', 'false', 'Provide classes to style the popup message.'],
['arrow', 'string', 'false', 'Provide classes to style the popup arrow.'], ['arrow', 'string', 'false', 'Provide classes to style the popup arrow.'],
['content', 'string', 'false', 'Provide classes to style the tooltip content wrapping element.'], ['content', 'string', 'false', 'Provide classes to style the tooltip content wrapping element.']
] ]
}; };
const tableSlots: any = { const tableSlots: any = {

57
src/routes/(inner)/docs/comparisons/+page.svelte
View File

@@ -17,9 +17,11 @@
<!-- Mantine --> <!-- Mantine -->
<section class="space-y-4"> <section class="space-y-4">
<h2>Mantine</h2> <h2>Mantine</h2>
<p><a href="https://mantine.dev/" target="_blank">https://mantine.dev/</a></p> <p><a href="https://mantine.dev/" target="_blank">https://mantine.dev/</a></p>
<p> <p>
It’s no secret that Mantine has had a huge influence on the features and design of Skeleton. We love Mantine’s huge set of components, modular add-ons, and of course the best-in-class documentation. We’re also huge fans of the deep customization provided per component. However, Mantine is unfortunately only available for React. That said, the Skeleton team hopes to bridge the gap and provide a similar experience for Svelte developers. It’s no secret that Mantine has had a huge influence on the features and design of Skeleton. We love Mantine’s huge set of components, modular add-ons, and of course the best-in-class
documentation. We’re also huge fans of the deep customization provided per component. However, Mantine is unfortunately only available for React. That said, the Skeleton team hopes to bridge the
gap and provide a similar experience for Svelte developers.
</p> </p>
</section> </section>
@@ -28,9 +30,14 @@
<!-- Flowbite --> <!-- Flowbite -->
<section class="space-y-4"> <section class="space-y-4">
<h2>Flowbite</h2> <h2>Flowbite</h2>
<p><a href="https://flowbite.com/" target="_blank">https://flowbite.com/</a></p> <p><a href="https://flowbite.com/" target="_blank">https://flowbite.com/</a></p>
<p> <p>
Flowbite provides a set of turnkey HTML/CSS components built with Tailwind’s utility class system. Unlike other libraries, Flowbite focuses on a singular and opinionated design aesthetic. Flowbite is a general purpose library, which means it can be used within any framework, but also provides framework-specific variations like <a href="https://flowbite-svelte.com/" target="_blank">Flowbite Svelte</a>. It’s relatively simple to tailor a Flowbite component to work within an existing Tailwind design system. In fact, it’s even possible to pair Flowbite with Skeleton, allowing you to mix and match components, while taking advantage of Skeleton’s theme system. See our guide below. Flowbite provides a set of turnkey HTML/CSS components built with Tailwind’s utility class system. Unlike other libraries, Flowbite focuses on a singular and opinionated design aesthetic.
Flowbite is a general purpose library, which means it can be used within any framework, but also provides framework-specific variations like <a
href="https://flowbite-svelte.com/"
target="_blank">Flowbite Svelte</a
>. It’s relatively simple to tailor a Flowbite component to work within an existing Tailwind design system. In fact, it’s even possible to pair Flowbite with Skeleton, allowing you to mix and
match components, while taking advantage of Skeleton’s theme system. See our guide below.
</p> </p>
<AccordionGroup> <AccordionGroup>
<AccordionItem class="border border-surface-500/20 rounded"> <AccordionItem class="border border-surface-500/20 rounded">
@@ -40,12 +47,15 @@
<svelte:fragment slot="content"> <svelte:fragment slot="content">
<div class="space-y-4 pb-3"> <div class="space-y-4 pb-3">
<p>Let's integrate a <a href="https://flowbite.com/docs/components/card/" target="_blank">Flowbite Card</a>. Here's the default markup:</p> <p>Let's integrate a <a href="https://flowbite.com/docs/components/card/" target="_blank">Flowbite Card</a>. Here's the default markup:</p>
<CodeBlock language="html" code={` <CodeBlock
language="html"
code={`
<a href="#" class="block p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"> <a href="#" class="block p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Flowbite Version</h5> <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Flowbite Version</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p> <p class="font-normal text-gray-700 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</a> </a>
`.trim()} /> `.trim()}
/>
<p>We make several small adjustements to take advantage of Skeleton's styles and theme system:</p> <p>We make several small adjustements to take advantage of Skeleton's styles and theme system:</p>
<ul class="list-disc list-inside opacity-60"> <ul class="list-disc list-inside opacity-60">
<li>Replaced all instances of the <code>bg-gray-X</code> class with <code>bg-surface-X</code>.</li> <li>Replaced all instances of the <code>bg-gray-X</code> class with <code>bg-surface-X</code>.</li>
@@ -53,14 +63,20 @@
<li>Modified the the heading to be an H2 and dropped <code>text-2xl font-bold</code> classes.</li> <li>Modified the the heading to be an H2 and dropped <code>text-2xl font-bold</code> classes.</li>
<li>Bumped <code>max-w-sm</code> up to <code>max-w-lg</code> to fit our content width.</li> <li>Bumped <code>max-w-sm</code> up to <code>max-w-lg</code> to fit our content width.</li>
</ul> </ul>
<CodeBlock language="html" code={` <CodeBlock
language="html"
code={`
<a href="#" class="block p-6 max-w-lg bg-white rounded-lg border border-surface-200 shadow-md hover:bg-surface-100 dark:bg-surface-800 dark:border-surface-700 dark:hover:bg-surface-700 !no-underline"> <a href="#" class="block p-6 max-w-lg bg-white rounded-lg border border-surface-200 shadow-md hover:bg-surface-100 dark:bg-surface-800 dark:border-surface-700 dark:hover:bg-surface-700 !no-underline">
<h2 class="mb-2 tracking-tight text-surface-900 dark:text-white">Flowbite + Skeleton = ❤️</h2> <h2 class="mb-2 tracking-tight text-surface-900 dark:text-white">Flowbite + Skeleton = ❤️</h2>
<p class="font-normal text-surface-700 dark:text-surface-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p> <p class="font-normal text-surface-700 dark:text-surface-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</a> </a>
`.trim()} /> `.trim()}
/>
<p>Here's the final result. Try toggling dark mode on/off to see how the card style adapts.</p> <p>Here's the final result. Try toggling dark mode on/off to see how the card style adapts.</p>
<a href="/docs/comparisons" class="block p-6 max-w-lg bg-white rounded-lg border border-surface-200 shadow-md hover:bg-surface-100 dark:bg-surface-800 dark:border-surface-700 dark:hover:bg-surface-700 !no-underline"> <a
href="/docs/comparisons"
class="block p-6 max-w-lg bg-white rounded-lg border border-surface-200 shadow-md hover:bg-surface-100 dark:bg-surface-800 dark:border-surface-700 dark:hover:bg-surface-700 !no-underline"
>
<h2 class="mb-2 tracking-tight text-surface-900 dark:text-white">Skeleton + Flowbite = ❤️</h2> <h2 class="mb-2 tracking-tight text-surface-900 dark:text-white">Skeleton + Flowbite = ❤️</h2>
<p class="font-normal text-surface-700 dark:text-surface-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p> <p class="font-normal text-surface-700 dark:text-surface-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</a> </a>
@@ -75,9 +91,15 @@
<!-- Daisy UI --> <!-- Daisy UI -->
<section class="space-y-4"> <section class="space-y-4">
<h2>Daisy UI</h2> <h2>Daisy UI</h2>
<p><a href="https://daisyui.com/" target="_blank">https://daisyui.com/</a></p> <p><a href="https://daisyui.com/" target="_blank">https://daisyui.com/</a></p>
<p> <p>
Daisy can be compared to Skeleton due to our shared use of Tailwind CSS and highly customizable theme systems. Unfortunately Daisy themes rely on hex color values which <a href="https://tailwindcss.com/docs/customizing-colors#using-css-variables" target="_blank">prevents the use of the opacity modifier syntax</a>. Likewise Daisy opts to forgo the biggest benefit of Tailwind - the deeply extensible utility class system. Instead relying on <a href="https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction" target="_blank">@apply</a> to generate canned style sets. On the other hand, Skeleton treats utility classes as first class citizens, providing hooks to set and override Tailwind classes within each component. Skeleton components also accept arbitrary classes allowing full customization top to bottom. However, it’s worth noting that Daisy is a general purpose library available to any framework, while Skeleton focuses purely on Svelte. Daisy can be compared to Skeleton due to our shared use of Tailwind CSS and highly customizable theme systems. Unfortunately Daisy themes rely on hex color values which <a
href="https://tailwindcss.com/docs/customizing-colors#using-css-variables"
target="_blank">prevents the use of the opacity modifier syntax</a
>. Likewise Daisy opts to forgo the biggest benefit of Tailwind - the deeply extensible utility class system. Instead relying on
<a href="https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction" target="_blank">@apply</a> to generate canned style sets. On the other hand, Skeleton treats utility classes as
first class citizens, providing hooks to set and override Tailwind classes within each component. Skeleton components also accept arbitrary classes allowing full customization top to bottom. However,
it’s worth noting that Daisy is a general purpose library available to any framework, while Skeleton focuses purely on Svelte.
</p> </p>
</section> </section>
@@ -86,10 +108,17 @@
<!-- Svelte Material UI --> <!-- Svelte Material UI -->
<section class="space-y-4"> <section class="space-y-4">
<h2>Svelte Material UI</h2> <h2>Svelte Material UI</h2>
<p><a href="https://sveltematerialui.com/" target="_blank">https://sveltematerialui.com/</a></p> <p><a href="https://sveltematerialui.com/" target="_blank">https://sveltematerialui.com/</a></p>
<p> <p>
The founding members of Skeleton are huge fans of Material Design and recognize its influence on modern web UI, UX, and component systems in general. Our team has extensive experience with <a href="https://material.angular.io/" target="_blank">Angular Material</a>, which adapts the Material Design conventions for the <a href="https://angular.io/" target="_blank">Angular</a> framework. This has actually influenced many of the design decisions for creating Skeleton, including our opinions on <a href="/guides/forms">form components</a>. It makes sense that Svelte Material UI would be popular, as it bridges the benefits of Material Design with the power of Svelte. However, Skeleton has chosen to shy away the look and feel or Material Design, and instead create a more unique aesthetic. Additionally, Skeleton features tight integration with Tailwind, to aid in building a fully realized design system. Allowing you to control every aspect of your interface from the ground up. If for some reason you’re adverse to Tailwind or you wish to lean into the Material Design style, then we would recommend Svelte Material UI. It also has the benefit of being one of the oldest and most mature UI component libraries available for Svelte today. The founding members of Skeleton are huge fans of Material Design and recognize its influence on modern web UI, UX, and component systems in general. Our team has extensive experience with <a
href="https://material.angular.io/"
target="_blank">Angular Material</a
>, which adapts the Material Design conventions for the <a href="https://angular.io/" target="_blank">Angular</a> framework. This has actually influenced many of the design decisions for
creating Skeleton, including our opinions on <a href="/guides/forms">form components</a>. It makes sense that Svelte Material UI would be popular, as it bridges the benefits of Material Design
with the power of Svelte. However, Skeleton has chosen to shy away the look and feel or Material Design, and instead create a more unique aesthetic. Additionally, Skeleton features tight
integration with Tailwind, to aid in building a fully realized design system. Allowing you to control every aspect of your interface from the ground up. If for some reason you’re adverse to
Tailwind or you wish to lean into the Material Design style, then we would recommend Svelte Material UI. It also has the benefit of being one of the oldest and most mature UI component libraries
available for Svelte today.
</p> </p>
</section> </section>
</div> </div>

53
src/routes/(inner)/docs/contributions/+page.svelte
View File

@@ -42,9 +42,16 @@
<h2>How to Contribute</h2> <h2>How to Contribute</h2>
<ul class="list-disc list-inside"> <ul class="list-disc list-inside">
<li> <li>
Pull requests are always welcome. Read this full guide, <a href="https://github.com/Brain-Bones/skeleton/issues" target="_blank">create or pick an issue</a>, stake your claim, and start helping! Pull requests are always welcome. Read this full guide, <a href="https://github.com/Brain-Bones/skeleton/issues" target="_blank">create or pick an issue</a>, stake your claim, and start
helping!
</li>
<li>
Let Skeleton contributors know what you would like to see added. See the <a
href="https://github.com/Brain-Bones/skeleton/wiki/%F0%9F%9B%A3%EF%B8%8F-The-Skeleton-Roadmap-(proposal)"
target="_blank">roadmap</a
>
and and review the current <a href="https://github.com/Brain-Bones/skeleton/discussions/79" target="_blank">discussion thread</a>.
</li> </li>
<li>Let Skeleton contributors know what you would like to see added. See the <a href="https://github.com/Brain-Bones/skeleton/wiki/%F0%9F%9B%A3%EF%B8%8F-The-Skeleton-Roadmap-(proposal)" target="_blank">roadmap</a> and and review the current <a href="https://github.com/Brain-Bones/skeleton/discussions/79" target="_blank">discussion thread</a>.</li>
<li>Help improve documentation. Send a pull request to fix typos, grammar issues, as well as correct outdated or incorrect information.</li> <li>Help improve documentation. Send a pull request to fix typos, grammar issues, as well as correct outdated or incorrect information.</li>
<li>Spread the word. Send Skeleton to your fellow developers or share on social media. This helps a lot more than you think!</li> <li>Spread the word. Send Skeleton to your fellow developers or share on social media. This helps a lot more than you think!</li>
</ul> </ul>
@@ -75,7 +82,8 @@
<li>If your PR meets all requirements it will be merged!</li> <li>If your PR meets all requirements it will be merged!</li>
</ol> </ol>
<p> <p>
The overwhelming majority of rejected pull requests come from submissions without prior discussion, do not meet the requirements for a feature, or otherwise conflict with ongoing efforts. To avoid rejection, be a team player, don't try to be a hero! The overwhelming majority of rejected pull requests come from submissions without prior discussion, do not meet the requirements for a feature, or otherwise conflict with ongoing efforts. To
avoid rejection, be a team player, don't try to be a hero!
</p> </p>
</section> </section>
@@ -85,7 +93,11 @@
<section class="space-y-4"> <section class="space-y-4">
<h2>Pull Requests</h2> <h2>Pull Requests</h2>
<p> <p>
Per common courtesy, please reach out to contributors before you start work on new features. If you're interested in creating a new feature, create a ticket on <a href="https://github.com/Brain-Bones/skeleton/issues" target="_blank">GitHub Issues</a>. This allows for open discourse and may help prevent redundant work. This includes but is not limited to: creating new components, adding new utilities, or notable alterations to existing work. Per common courtesy, please reach out to contributors before you start work on new features. If you're interested in creating a new feature, create a ticket on <a
href="https://github.com/Brain-Bones/skeleton/issues"
target="_blank">GitHub Issues</a
>. This allows for open discourse and may help prevent redundant work. This includes but is not limited to: creating new components, adding new utilities, or notable alterations to existing
work.
</p> </p>
<h4>Git Branches</h4> <h4>Git Branches</h4>
<DataTable headings={tableBranches.headings} source={tableBranches.source} /> <DataTable headings={tableBranches.headings} source={tableBranches.source} />
@@ -100,7 +112,8 @@
<section class="space-y-4"> <section class="space-y-4">
<h2>Dependencies</h2> <h2>Dependencies</h2>
<p> <p>
Skeleton aims to keep dependencies as lean as possible. Please be leery of introducing more. If you have a valid reason to add one, please discuss with core contributors before proceeding. This can help avoid conflicts and greatly benefits end users! Skeleton aims to keep dependencies as lean as possible. Please be leery of introducing more. If you have a valid reason to add one, please discuss with core contributors before proceeding. This
can help avoid conflicts and greatly benefits end users!
</p> </p>
</section> </section>
@@ -245,26 +258,35 @@ afterUpdate(() => {
<!-- Reactive Classes --> <!-- Reactive Classes -->
<h3>Reactive Classes</h3> <h3>Reactive Classes</h3>
<p>Reactive classes combine all base and dynamic classes. These are applied directly to each respective element.</p> <p>Reactive classes combine all base and dynamic classes. These are applied directly to each respective element.</p>
<CodeBlock language="typescript" code={` <CodeBlock
language="typescript"
code={`
$: classesCard = \`\${cBase} \${cOutlined}\`; // parent element $: classesCard = \`\${cBase} \${cOutlined}\`; // parent element
$: classesLabel = \`\${cBaseLabel}\`; // child element $: classesLabel = \`\${cBaseLabel}\`; // child element
`.trim()} /> `.trim()}
/>
<p> <p>
Apply the reactive classes as follows. Make sure to also include <code>$$props.classes</code> as a pass-through for additional classes. Note that the first class acts as an identifier for the element, Apply the reactive classes as follows. Make sure to also include <code>$$props.classes</code> as a pass-through for additional classes. Note that the first class acts as an identifier for the element,
which is useful for testing and DOM manipulation. which is useful for testing and DOM manipulation.
</p> </p>
<CodeBlock language="html" code={` <CodeBlock
language="html"
code={`
<div class="card {classesCard} {$$props.classes||''}"> <div class="card {classesCard} {$$props.classes||''}">
<label class="card-label {classesLabel}">My Label</label> <label class="card-label {classesLabel}">My Label</label>
</div> </div>
`.trim()} /> `.trim()}
/>
<p>Optionaly, we can use reactive classes to simply the dynamic classes example above.</p> <p>Optionaly, we can use reactive classes to simply the dynamic classes example above.</p>
<CodeBlock language="ts" code={` <CodeBlock
language="ts"
code={`
export let outlined: boolean; export let outlined: boolean;
$: classesOutlined = outlined ? 'border-2 border-primary-500' : 'border-none'; $: classesOutlined = outlined ? 'border-2 border-primary-500' : 'border-none';
$: classesCard = \`\${cBase} \${classesOutlined}\`; $: classesCard = \`\${cBase} \${classesOutlined}\`;
`.trim()} /> `.trim()}
/>
<p>This prevents the need for the <code>afterUpdate()</code> method.</p> <p>This prevents the need for the <code>afterUpdate()</code> method.</p>
</section> </section>
@@ -294,11 +316,13 @@ $: classesCard = \`\${cBase} \${classesOutlined}\`;
</p> </p>
<h4>Update Site Navigation</h4> <h4>Update Site Navigation</h4>
<p> <p>
Open <code>/src/lib/_documentation/SkeletonNavigation/links.ts</code> and document the new links under the appropriate section. General rule of thumb is simple components go under <em>Components</em>, while Svelte actions and complicated features go under <em>Utilities</em>. Open <code>/src/lib/_documentation/SkeletonNavigation/links.ts</code> and document the new links under the appropriate section. General rule of thumb is simple components go under
<em>Components</em>, while Svelte actions and complicated features go under <em>Utilities</em>.
</p> </p>
<h4>Interactive vs Static Demos</h4> <h4>Interactive vs Static Demos</h4>
<p> <p>
While interactive demos are preferred, static demos are welcome too. Just make sure to provide a variety of examples to illustrate potential use cases and showcase the feature set of the component. If require assistance in setting up an interactive demo, please contact any core contributor on the team. We're happy to help! While interactive demos are preferred, static demos are welcome too. Just make sure to provide a variety of examples to illustrate potential use cases and showcase the feature set of the
component. If require assistance in setting up an interactive demo, please contact any core contributor on the team. We're happy to help!
</p> </p>
</section> </section>
@@ -319,7 +343,8 @@ $: classesCard = \`\${cBase} \${classesOutlined}\`;
<section class="space-y-4"> <section class="space-y-4">
<h2>Automated Tests</h2> <h2>Automated Tests</h2>
<p> <p>
Tests are handled via <a href="https://vitest.dev/" target="_blank">Vitest</a>, which uses similar conventions and syntax to Jest. Please ensure you write and run tests before submitting a pull request. Bare minimum, these tests should test components with the minimum and maximum props. If you're unfamiliar with automated testing, contact a core contributor for help. Tests are handled via <a href="https://vitest.dev/" target="_blank">Vitest</a>, which uses similar conventions and syntax to Jest. Please ensure you write and run tests before submitting a pull
request. Bare minimum, these tests should test components with the minimum and maximum props. If you're unfamiliar with automated testing, contact a core contributor for help.
</p> </p>
<CodeBlock language="console" code={`npm run test`} /> <CodeBlock language="console" code={`npm run test`} />
</section> </section>

5
src/routes/(inner)/guides/astro/+page.svelte
View File

@@ -24,7 +24,7 @@
</div> </div>
<p>Skeleton now officially supports the Astro web framework. This guide provides a walkthrough for scaffolding a simple Astro application.</p> <p>Skeleton now officially supports the Astro web framework. This guide provides a walkthrough for scaffolding a simple Astro application.</p>
</header> </header>
<Divider /> <Divider />
<Alert> <Alert>
@@ -130,7 +130,8 @@ import WrapperExample from '../components/WrapperExample.svelte';
<p> <p>
Please note that dynamic components must be hydrated using <a href="https://docs.astro.build/en/reference/directives-reference/#client-directives" target="_blank">Astro's Client Directives</a>. Please note that dynamic components must be hydrated using <a href="https://docs.astro.build/en/reference/directives-reference/#client-directives" target="_blank">Astro's Client Directives</a>.
We opted for We opted for
<code>client:visible</code>, which loads and hydrates the JavaScript component only when it enters the user’s viewport. If we did not do this, the component would be rendered as only HTML/CSS and the <code>triggerMessage()</code> method would not function. <code>client:visible</code>, which loads and hydrates the JavaScript component only when it enters the user’s viewport. If we did not do this, the component would be rendered as only HTML/CSS
and the <code>triggerMessage()</code> method would not function.
</p> </p>
</section> </section>

19
src/routes/(inner)/guides/forms/+page.svelte
View File

@@ -20,9 +20,14 @@
impacting your ability to customize and style each input. impacting your ability to customize and style each input.
</p> </p>
<p> <p>
However, given Skeleton's tight integration with Tailwind, an elegant solution is available via the <a href="https://github.com/tailwindlabs/tailwindcss-forms" target="_blank">official Tailwind Forms plugin</a>. This provides a no-nonsense approach to applying clean and modern styling to <em>most</em> inputs. However, given Skeleton's tight integration with Tailwind, an elegant solution is available via the <a href="https://github.com/tailwindlabs/tailwindcss-forms" target="_blank"
>official Tailwind Forms plugin</a
>. This provides a no-nonsense approach to applying clean and modern styling to <em>most</em> inputs.
</p>
<p>
Tailwind provides an example page to <a href="https://tailwindcss-forms.vercel.app/kitchen-sink.html" target="_blank">preview the default styles here</a>. These default styles can then be
tailored to adapt your theme styling use Skeleton's modular stylesheet add-on for forms.
</p> </p>
<p>Tailwind provides an example page to <a href="https://tailwindcss-forms.vercel.app/kitchen-sink.html" target="_blank">preview the default styles here</a>. These default styles can then be tailored to adapt your theme styling use Skeleton's modular stylesheet add-on for forms.</p>
</header> </header>
<Divider /> <Divider />
@@ -69,11 +74,11 @@ module.exports = {
{#if $storeFramework === 'sveltekit'} {#if $storeFramework === 'sveltekit'}
<p>Import form element styles before your global stylesheet in <code>/src/routes/+layout.svelte</code>.</p> <p>Import form element styles before your global stylesheet in <code>/src/routes/+layout.svelte</code>.</p>
<CodeBlock language="typescript" code={`import '@brainandbones/skeleton/styles/forms.css'; // <--\nimport '../app.postcss';`} /> <CodeBlock language="typescript" code={`import '@brainandbones/skeleton/styles/forms.css'; // <--\nimport '../app.postcss';`} />
<!-- Framework: Vite (Svelte) --> <!-- Framework: Vite (Svelte) -->
{:else if $storeFramework === 'vite'} {:else if $storeFramework === 'vite'}
<p>Import form element styles before your global stylesheet in <code>/src/main.js</code>.</p> <p>Import form element styles before your global stylesheet in <code>/src/main.js</code>.</p>
<CodeBlock language="typescript" code={`import '@brainandbones/skeleton/styles/forms.css'; // <--\nimport '../app.css';`} /> <CodeBlock language="typescript" code={`import '@brainandbones/skeleton/styles/forms.css'; // <--\nimport '../app.css';`} />
<!-- Framework: Astro --> <!-- Framework: Astro -->
{:else if $storeFramework === 'astro'} {:else if $storeFramework === 'astro'}
<p>Import form element styles before your global stylesheet in <code>/src/layouts/LayoutBasic.astro</code>.</p> <p>Import form element styles before your global stylesheet in <code>/src/layouts/LayoutBasic.astro</code>.</p>
<CodeBlock language="typescript" code={`import '@brainandbones/skeleton/styles/forms.css'; // <--\nimport '../styles/base.css';`} /> <CodeBlock language="typescript" code={`import '@brainandbones/skeleton/styles/forms.css'; // <--\nimport '../styles/base.css';`} />
@@ -109,8 +114,10 @@ module.exports = {
<section class="space-y-4"> <section class="space-y-4">
<h2>Non-Supported Inputs</h2> <h2>Non-Supported Inputs</h2>
<p> <p>
While the Tailwind Forms plugin covers most common inputs, there are <a href="https://tailwindcss-forms.vercel.app/kitchen-sink.html" target="_blank">a few exceptions</a> (see page bottom). However, Skeleton provides a robust <a href="/components/range-sliders">Range Slider</a> While the Tailwind Forms plugin covers most common inputs, there are <a href="https://tailwindcss-forms.vercel.app/kitchen-sink.html" target="_blank">a few exceptions</a> (see page bottom).
alternative, as well as custom components for <a href="/components/slide-toggles">Slide Toggles</a> and <a href="/components/radio-groups">Radio Groups</a>. Expect to see more of these in the future. However, Skeleton provides a robust <a href="/components/range-sliders">Range Slider</a>
alternative, as well as custom components for <a href="/components/slide-toggles">Slide Toggles</a> and <a href="/components/radio-groups">Radio Groups</a>. Expect to see more of these in the
future.
</p> </p>
</section> </section>

170
src/routes/(inner)/guides/install/+page.svelte
View File

@@ -1,105 +1,113 @@
<script lang="ts"> <script lang="ts">
import { storeFramework } from '$lib/_documentation/stores'; import { storeFramework } from '$lib/_documentation/stores';
import { Card, Divider, Button, TabGroup, Tab } from '@brainandbones/skeleton'; import { Card, Divider, Button, TabGroup, Tab } from '@brainandbones/skeleton';
import CodeBlock from '$lib/CodeBlock/CodeBlock.svelte'; import CodeBlock from '$lib/CodeBlock/CodeBlock.svelte';
</script> </script>
<div class="space-y-10"> <div class="space-y-10">
<!-- Install -->
<section class="space-y-4">
<h1>Install Skeleton</h1>
<p>
Select your app framework of choice, then follow steps below. During this process you'll scaffold a project, install the Skeleton package, install and configure Tailwind, as well as implement a
custom theme. Make sure to follow each guide carefully.
</p>
<!-- Install --> <TabGroup selected={storeFramework} class="pt-4">
<section class="space-y-4"> <Tab value="sveltekit">SvelteKit</Tab>
<h1>Install Skeleton</h1> <Tab value="vite">Vite (Svelte)</Tab>
<p> <Tab value="astro">Astro</Tab>
Select your app framework of choice, then follow steps below. During this process you'll scaffold a project, install the Skeleton package, install and configure Tailwind, as well as implement a </TabGroup>
custom theme. Make sure to follow each guide carefully.
</p> <!-- Framework: SvelteKit -->
{#if $storeFramework === 'sveltekit'}
<TabGroup selected={storeFramework} class="pt-4"> <p>
<Tab value="sveltekit">SvelteKit</Tab> View the <a href="https://kit.svelte.dev/docs/introduction#getting-started" target="_blank">official documentation.</a>
<Tab value="vite">Vite (Svelte)</Tab> </p>
<Tab value="astro">Astro</Tab> <CodeBlock
</TabGroup> language="console"
code={`
<!-- Framework: SvelteKit -->
{#if $storeFramework === 'sveltekit'}
<p>
View the <a href="https://kit.svelte.dev/docs/introduction#getting-started" target="_blank">official documentation.</a>
</p>
<CodeBlock language="console" code={`
npm create svelte@latest sveltekit-skeleton-app npm create svelte@latest sveltekit-skeleton-app
- Create a barebones project - Create a barebones project
- Enable Typescript - Enable Typescript
cd sveltekit-skeleton-app cd sveltekit-skeleton-app
npm install npm install
npm run dev npm run dev
`.trim()} /> `.trim()}
<!-- Framework: Vite (Svelte) --> />
{:else if $storeFramework === 'vite'} <!-- Framework: Vite (Svelte) -->
<p> {:else if $storeFramework === 'vite'}
View the <a href="https://vitejs.dev/guide/#scaffolding-your-first-vite-project" target="_blank">official documentation</a>. <p>
</p> View the <a href="https://vitejs.dev/guide/#scaffolding-your-first-vite-project" target="_blank">official documentation</a>.
<CodeBlock language="console" code={` </p>
<CodeBlock
language="console"
code={`
npm create vite@latest my-app -- --template svelte-ts npm create vite@latest my-app -- --template svelte-ts
cd my-app cd my-app
npm install npm install
npm run dev npm run dev
`.trim()} /> `.trim()}
<!-- Framework: Astro --> />
{:else if $storeFramework === 'astro'} <!-- Framework: Astro -->
<p> {:else if $storeFramework === 'astro'}
View the <a href="https://docs.astro.build/en/install/auto/" target="_blank">official documentation</a>. Once setup of Skeleton is complete, please read the dedicated <a href="/guides/astro">Usage with Astro</a> guide. <p>
</p> View the <a href="https://docs.astro.build/en/install/auto/" target="_blank">official documentation</a>. Once setup of Skeleton is complete, please read the dedicated
<CodeBlock language="console" code={` <a href="/guides/astro">Usage with Astro</a> guide.
</p>
<CodeBlock
language="console"
code={`
npm create astro@latest astro-skeleton-app npm create astro@latest astro-skeleton-app
- Create an empty project - Create an empty project
- Install all depedencies - Install all depedencies
- Use 'Typescript: Strict' - Use 'Typescript: Strict'
cd astro-skeleton-app cd astro-skeleton-app
npm run dev npm run dev
`.trim()} /> `.trim()}
<!-- Svelte --> />
<h3>Install Svelte</h3> <!-- Svelte -->
<p> <h3>Install Svelte</h3>
Add Svelte integration via <a href="https://docs.astro.build/en/guides/integrations-guide/svelte/" target="_blank">@astrojs/svelte</a> <p>
</p> Add Svelte integration via <a href="https://docs.astro.build/en/guides/integrations-guide/svelte/" target="_blank">@astrojs/svelte</a>
<CodeBlock language="console" code={`npx astro add svelte`} /> </p>
<!-- Tailwind --> <CodeBlock language="console" code={`npx astro add svelte`} />
<h3>Install Tailwind</h3> <!-- Tailwind -->
<p> <h3>Install Tailwind</h3>
Add Tailwind integration via <a href="https://docs.astro.build/en/guides/integrations-guide/tailwind/" target="_blank">@astrojs/tailwind</a> <p>
</p> Add Tailwind integration via <a href="https://docs.astro.build/en/guides/integrations-guide/tailwind/" target="_blank">@astrojs/tailwind</a>
<CodeBlock language="console" code={`npx astro add tailwind`} /> </p>
<p>Add <code>/src/styles/base.css</code> to house global styles and define the following @tailwind directives:</p> <CodeBlock language="console" code={`npx astro add tailwind`} />
<CodeBlock language="css" code={`@tailwind base;\n@tailwind components;\n@tailwind utilities;`} /> <p>Add <code>/src/styles/base.css</code> to house global styles and define the following @tailwind directives:</p>
{/if} <CodeBlock language="css" code={`@tailwind base;\n@tailwind components;\n@tailwind utilities;`} />
</section> {/if}
</section>
<!-- Install Tailwind -->
{#if ['sveltekit', 'vite'].includes($storeFramework)}
<section class="space-y-4">
<h3>Install Tailwind</h3>
<p>
<a href="https://github.com/svelte-add/tailwindcss" target="_blank">Svelte-Add</a> makes installation a trivial process.
</p>
<CodeBlock language="console" code={`npx svelte-add@latest tailwindcss\nnpm install`} />
</section>
{/if}
<!-- Install Skeleton -->
<section class="space-y-4">
<h3>Install Skeleton</h3>
<p>
Install the core Skeleton package from <a href="https://www.npmjs.com/package/@brainandbones/skeleton" target="_blank">NPM</a>.
</p>
<CodeBlock language="console" code={`npm i @brainandbones/skeleton --save-dev`} />
</section>
<Divider />
<!-- Next Steps -->
<Card body="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4">
<p>Next, let's configure Tailwind to work with Skeleton.</p>
<Button variant="filled-accent" href="/guides/tailwind">Configure Tailwind</Button>
</Card>
</div> <!-- Install Tailwind -->
{#if ['sveltekit', 'vite'].includes($storeFramework)}
<section class="space-y-4">
<h3>Install Tailwind</h3>
<p>
<a href="https://github.com/svelte-add/tailwindcss" target="_blank">Svelte-Add</a> makes installation a trivial process.
</p>
<CodeBlock language="console" code={`npx svelte-add@latest tailwindcss\nnpm install`} />
</section>
{/if}
<!-- Install Skeleton -->
<section class="space-y-4">
<h3>Install Skeleton</h3>
<p>
Install the core Skeleton package from <a href="https://www.npmjs.com/package/@brainandbones/skeleton" target="_blank">NPM</a>.
</p>
<CodeBlock language="console" code={`npm i @brainandbones/skeleton --save-dev`} />
</section>
<Divider />
<!-- Next Steps -->
<Card body="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4">
<p>Next, let's configure Tailwind to work with Skeleton.</p>
<Button variant="filled-accent" href="/guides/tailwind">Configure Tailwind</Button>
</Card>
</div>

45
src/routes/(inner)/guides/styling/+page.svelte
View File

@@ -7,32 +7,22 @@
// Tables // Tables
const ghLibPathMaster: string = 'https://github.com/Brain-Bones/skeleton/tree/master/src/lib'; // master branch const ghLibPathMaster: string = 'https://github.com/Brain-Bones/skeleton/tree/master/src/lib'; // master branch
const tableStyleAddons: any = { const tableStyleAddons: any = {
headings: ['Stylesheet', 'Description', 'Plugin Required', 'Source', ], headings: ['Stylesheet', 'Description', 'Plugin Required', 'Source'],
source: [ source: [
[ [
'<code>tailwind.css</code>', '<code>tailwind.css</code>',
'Should proceed all other add-ons. Includes only the four primary <a href="https://tailwindcss.com/docs/functions-and-directives" target="_blank">@tailwind directives</a>.', 'Should proceed all other add-ons. Includes only the four primary <a href="https://tailwindcss.com/docs/functions-and-directives" target="_blank">@tailwind directives</a>.',
'-', '-',
`<a href="${ghLibPathMaster}/styles/tailwind.css" target="_blank">View</a>`, `<a href="${ghLibPathMaster}/styles/tailwind.css" target="_blank">View</a>`
],
[
'<code>core.css</code>',
'General styles for for body elements, scrollbars, and more.',
'-',
`<a href="${ghLibPathMaster}/styles/core.css" target="_blank">View</a>`,
],
[
'<code>typography.css</code>',
'Styles headings, paragraph, anchors, pre, code, and more.',
'-',
`<a href="${ghLibPathMaster}/styles/typography.css" target="_blank">View</a>`,
], ],
['<code>core.css</code>', 'General styles for for body elements, scrollbars, and more.', '-', `<a href="${ghLibPathMaster}/styles/core.css" target="_blank">View</a>`],
['<code>typography.css</code>', 'Styles headings, paragraph, anchors, pre, code, and more.', '-', `<a href="${ghLibPathMaster}/styles/typography.css" target="_blank">View</a>`],
[ [
'<code>forms.css</code>', '<code>forms.css</code>',
'Should only be used with the <a href="https://github.com/tailwindlabs/tailwindcss-forms" target="_blank">Tailwind Forms</a> plugin. See the <a href="/guides/forms">Forms</a> for details.', 'Should only be used with the <a href="https://github.com/tailwindlabs/tailwindcss-forms" target="_blank">Tailwind Forms</a> plugin. See the <a href="/guides/forms">Forms</a> for details.',
'&check;', '&check;',
`<a href="${ghLibPathMaster}/styles/forms.css" target="_blank">View</a>`, `<a href="${ghLibPathMaster}/styles/forms.css" target="_blank">View</a>`
], ]
] ]
}; };
</script> </script>
@@ -52,10 +42,12 @@
<p>Here's a few suggested best practices to follow when creating global styles:</p> <p>Here's a few suggested best practices to follow when creating global styles:</p>
<ul class="list-disc list-inside space-y-1"> <ul class="list-disc list-inside space-y-1">
<li> <li>
Ensure you wrap your core page elements within a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main" target="_blank">main element</a>. The <a href="/components/app-shell">App Shell</a> component handles this for you. Ensure you wrap your core page elements within a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main" target="_blank">main element</a>. The
<a href="/components/app-shell">App Shell</a> component handles this for you.
</li>
<li> <li>
The ideal use case for <a href="https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply" target="_blank">Tailwind @apply</a> is defining global styles. Please be leery of <a href="https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction" target="_blank">premature abstraction</a>. The ideal use case for <a href="https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply" target="_blank">Tailwind @apply</a> is defining global styles. Please be leery of
<a href="https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction" target="_blank">premature abstraction</a>.
</li> </li>
<li> <li>
Utilize the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" target="_blank">:not pseudo-class</a> to exclude and avoid conflicts with Skeleton component's inherit styles. Utilize the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" target="_blank">:not pseudo-class</a> to exclude and avoid conflicts with Skeleton component's inherit styles.
@@ -95,7 +87,8 @@
<Alert background="bg-accent-500/30"> <Alert background="bg-accent-500/30">
<svelte:fragment slot="message"> <svelte:fragment slot="message">
<span class="text-black dark:text-white"> <span class="text-black dark:text-white">
Ensure you import the <code>tailwind.css</code> add-on before all others. Remove the @tailwind directives from your global stylesheet if you choose to use these add-ons. Failure to do so will mean you have two instances of the directives in your project. Ensure you import the <code>tailwind.css</code> add-on before all others. Remove the @tailwind directives from your global stylesheet if you choose to use these add-ons. Failure to do so will
mean you have two instances of the directives in your project.
</span> </span>
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="trail"> <svelte:fragment slot="trail">
@@ -109,11 +102,11 @@
<!-- Per Component Styles --> <!-- Per Component Styles -->
<section class="space-y-4"> <section class="space-y-4">
<h2>Per Component Styles</h2> <h2>Per Component Styles</h2>
<p> <p>Skeleton components automatically inherit and utilize your theme colors. However, there may be cases where you want to overwrite or extend the styling on a single component.</p>
Skeleton components automatically inherit and utilize your theme colors. However, there may be cases where you want to overwrite or extend the styling on a single component.
</p>
<p>Special style properties are provided to customize each component. See each component's documentation for instruction.</p> <p>Special style properties are provided to customize each component. See each component's documentation for instruction.</p>
<CodeBlock language="html" code={` <CodeBlock
language="html"
code={`
<Button background="bg-accent-500">Prop Customized</Button> <Button background="bg-accent-500">Prop Customized</Button>
`.trim()} `.trim()}
/> />
@@ -129,8 +122,8 @@
</p> </p>
<CodeBlock language="html" code={`<Button class="!p-10">Big</Button>`} /> <CodeBlock language="html" code={`<Button class="!p-10">Big</Button>`} />
<p> <p>
Keep in mind that components are a single line HTML element and represent a set of HTML elements within. This means you should be mindful of your target, as the <code>class</code> attribute Keep in mind that components are a single line HTML element and represent a set of HTML elements within. This means you should be mindful of your target, as the <code>class</code> attribute is only
is only applied to the top-most parent element. In rare cases you may need to generate a chained class definition, though we advise using this technique sparingly. applied to the top-most parent element. In rare cases you may need to generate a chained class definition, though we advise using this technique sparingly.
</p> </p>
<CodeBlock language="css" code={`.my-custom-class .menu-content { @apply bg-red-500; }`} /> <CodeBlock language="css" code={`.my-custom-class .menu-content { @apply bg-red-500; }`} />
<CodeBlock language="html" code={`<Menu class="my-custom-class">...</Menu>`} /> <CodeBlock language="html" code={`<Menu class="my-custom-class">...</Menu>`} />

28
src/routes/(inner)/guides/themes/+page.svelte
View File

@@ -38,7 +38,6 @@
toastStore.trigger(t); toastStore.trigger(t);
} }
); );
} }
// Tables // Tables
@@ -59,12 +58,14 @@
<header class="space-y-4"> <header class="space-y-4">
<h1>Themes</h1> <h1>Themes</h1>
<p> <p>
Skeleton themes integrate with Tailwind using <a href="https://tailwindcss.com/docs/customizing-colors#using-css-variables" target="_blank">CSS custom properties</a> converted to RGB values. This enables the use of <a href="https://tailwindcss.com/docs/background-color#changing-the-opacity" target="_blank">background opacity</a> as well as support for <a href="https://tailwindcss.com/docs/dark-mode" target="_blank">dark mode</a>. Components intelligently implement each color from the theme's palette. Skeleton themes integrate with Tailwind using <a href="https://tailwindcss.com/docs/customizing-colors#using-css-variables" target="_blank">CSS custom properties</a> converted to RGB values.
This enables the use of <a href="https://tailwindcss.com/docs/background-color#changing-the-opacity" target="_blank">background opacity</a> as well as support for
<a href="https://tailwindcss.com/docs/dark-mode" target="_blank">dark mode</a>. Components intelligently implement each color from the theme's palette.
</p> </p>
</header> </header>
<Divider /> <Divider />
<!-- Presets --> <!-- Presets -->
<section class="space-y-4"> <section class="space-y-4">
<h2>Preset Themes</h2> <h2>Preset Themes</h2>
@@ -91,7 +92,14 @@
<p>Tap any theme below to automatically copy the import statement to your clipboard.</p> <p>Tap any theme below to automatically copy the import statement to your clipboard.</p>
<nav class="grid grid-cols-1 md:grid-cols-3 gap-4"> <nav class="grid grid-cols-1 md:grid-cols-3 gap-4">
{#each presets as preset} {#each presets as preset}
<div on:click={() => { copyThemeToClipboard(preset.name) }} class="theme-set" style:background={preset.surface} target="_blank"> <div
on:click={() => {
copyThemeToClipboard(preset.name);
}}
class="theme-set"
style:background={preset.surface}
target="_blank"
>
<span class="text-sm">{preset.name}</span> <span class="text-sm">{preset.name}</span>
<ul class="grid grid-cols-3 gap-2"> <ul class="grid grid-cols-3 gap-2">
{#each preset.colors as color} {#each preset.colors as color}
@@ -124,9 +132,7 @@
</span> </span>
{/if} {/if}
{#if $storeGenerator === 'hex'} {#if $storeGenerator === 'hex'}
<span class="block text-center"> <span class="block text-center"> For advanced users. Enterhex color values to generate a completely unique theme. </span>
For advanced users. Enterhex color values to generate a completely unique theme.
</span>
{/if} {/if}
<Divider class="opacity-30" /> <Divider class="opacity-30" />
<!-- Generator Components --> <!-- Generator Components -->
@@ -134,7 +140,11 @@
{#if $storeGenerator === 'hex'}<ThemeGenCustom />{/if} {#if $storeGenerator === 'hex'}<ThemeGenCustom />{/if}
<Divider class="opacity-30" /> <Divider class="opacity-30" />
</Card> </Card>
<p class="block">TIP: Use <a href="https://tailwind.simeongriggs.dev/blue/3B82F6" target="_blank">Palette Generator</a> to for complete custom palatte curation. The <a href="https://marketplace.visualstudio.com/items?itemName=dakshmiglani.hex-to-rgba" target="_blank">Hex-To-RGB extension</a> can convert colors from <strong>Hex &rarr; RGB</strong> in bulk within <strong>VS Code</strong>.</p> <p class="block">
TIP: Use <a href="https://tailwind.simeongriggs.dev/blue/3B82F6" target="_blank">Palette Generator</a> to for complete custom palatte curation. The
<a href="https://marketplace.visualstudio.com/items?itemName=dakshmiglani.hex-to-rgba" target="_blank">Hex-To-RGB extension</a>
can convert colors from <strong>Hex &rarr; RGB</strong> in bulk within <strong>VS Code</strong>.
</p>
<!-- Instructions --> <!-- Instructions -->
<TabGroup selected={storeFramework}> <TabGroup selected={storeFramework}>
<Tab value="sveltekit">SvelteKit</Tab> <Tab value="sveltekit">SvelteKit</Tab>
@@ -193,6 +203,6 @@
<style lang="postcss"> <style lang="postcss">
.theme-set { .theme-set {
@apply p-4 !no-underline !text-white flex justify-between items-center border border-white/10 rounded shadow cursor-pointer hover:border-white/50 ; @apply p-4 !no-underline !text-white flex justify-between items-center border border-white/10 rounded shadow cursor-pointer hover:border-white/50;
} }
</style> </style>

5
src/routes/(inner)/utilities/codeblocks/+page.svelte
View File

@@ -41,7 +41,10 @@
<CodeBlock language="typescript" code={`import 'highlight.js/styles/github-dark.css';`} /> <CodeBlock language="typescript" code={`import 'highlight.js/styles/github-dark.css';`} />
<p>Finally, import the CodeBlock's writable store and pass a referenced to Highlight.js.</p> <p>Finally, import the CodeBlock's writable store and pass a referenced to Highlight.js.</p>
<CodeBlock language="typescript" code={`import { storeHighlightJs } from '@brainandbones/skeleton';\nstoreHighlightJs.set(hljs);`} /> <CodeBlock language="typescript" code={`import { storeHighlightJs } from '@brainandbones/skeleton';\nstoreHighlightJs.set(hljs);`} />
<p>This will trigger highlighting only when a supported <a href="https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md" target="_blank">language alias</a> is provided to the CodeBlock's <code>language</code> prop.</p> <p>
This will trigger highlighting only when a supported <a href="https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md" target="_blank">language alias</a> is provided to the
CodeBlock's <code>language</code> prop.
</p>
</section> </section>
<!-- Usage --> <!-- Usage -->

65
src/routes/(inner)/utilities/drawers/+page.svelte
View File

@@ -9,7 +9,9 @@
let position: string = 'left'; let position: string = 'left';
function trigger(p: string): void { function trigger(p: string): void {
position = p; position = p;
setTimeout(() => { storeDrawer.set(true); }, 100) setTimeout(() => {
storeDrawer.set(true);
}, 100);
} }
const tableProps: any = { const tableProps: any = {
@@ -17,7 +19,7 @@
source: [ source: [
['open', 'Writable(boolean)', 'writable(false)', 'boolean', '&check;', 'Provide a store to manage visible state.'], ['open', 'Writable(boolean)', 'writable(false)', 'boolean', '&check;', 'Provide a store to manage visible state.'],
['position', 'string', 'left', 'left | right | top | bottom', '-', 'Set the anchor position.'], ['position', 'string', 'left', 'left | right | top | bottom', '-', 'Set the anchor position.'],
['duration', 'number', '150', 'milliseconds', '-', 'Define the Svelte transition animation duration.'], ['duration', 'number', '150', 'milliseconds', '-', 'Define the Svelte transition animation duration.']
] ]
}; };
const tablePropsBackdrop: any = { const tablePropsBackdrop: any = {
@@ -25,7 +27,7 @@
source: [ source: [
['bgBackdrop', 'string', 'bg-surface-400/70 dark:bg-surface-900/70', 'Provide classes to set the backdrop background color'], ['bgBackdrop', 'string', 'bg-surface-400/70 dark:bg-surface-900/70', 'Provide classes to set the backdrop background color'],
['display', 'string', '-', 'Provide a class to set the display (ex: <code>lg:hidden</code>)'], ['display', 'string', '-', 'Provide a class to set the display (ex: <code>lg:hidden</code>)'],
['blur', 'string', 'backdrop-blur-sm', 'Provide a class to set the blur style.'], ['blur', 'string', 'backdrop-blur-sm', 'Provide a class to set the blur style.']
] ]
}; };
const tablePropsDrawer: any = { const tablePropsDrawer: any = {
@@ -36,20 +38,18 @@
['rounded', 'string', '-', 'Provide a class to set border radius.'], ['rounded', 'string', '-', 'Provide a class to set border radius.'],
['width', 'string', '(based on position)', 'Provide a class to override the width.'], ['width', 'string', '(based on position)', 'Provide a class to override the width.'],
['height', 'string', '(based on position)', 'Provide a class to override the height.'], ['height', 'string', '(based on position)', 'Provide a class to override the height.'],
['margin', 'string', '-', 'Provide classes to set margins.'], ['margin', 'string', '-', 'Provide classes to set margins.']
] ]
}; };
const tableSlots: any = { const tableSlots: any = {
headings: ['Name', 'Description'], headings: ['Name', 'Description'],
source: [ source: [['default', 'Provide your Drawer content here.']]
['default', 'Provide your Drawer content here.'],
]
}; };
const tableA11y: any = { const tableA11y: any = {
headings: ['Prop', 'Type', 'Default', 'Description'], headings: ['Prop', 'Type', 'Default', 'Description'],
source: [ source: [
['labelledby', 'string', '-', 'Provide an ID of the element labeling the drawer.'], ['labelledby', 'string', '-', 'Provide an ID of the element labeling the drawer.'],
['describedby', 'string', '-', 'Provide an ID of the element describing the drawer.'], ['describedby', 'string', '-', 'Provide an ID of the element describing the drawer.']
] ]
}; };
</script> </script>
@@ -75,10 +75,30 @@
</Drawer> </Drawer>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 max-w-[600px] mx-auto"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 max-w-[600px] mx-auto">
<Button variant="ghost-primary" on:click={() => { trigger('left') }}>Left</Button> <Button
<Button variant="ghost-primary" on:click={() => { trigger('right') }}>Right</Button> variant="ghost-primary"
<Button variant="ghost-primary" on:click={() => { trigger('top') }}>Top</Button> on:click={() => {
<Button variant="ghost-primary" on:click={() => { trigger('bottom') }}>Bottom</Button> trigger('left');
}}>Left</Button
>
<Button
variant="ghost-primary"
on:click={() => {
trigger('right');
}}>Right</Button
>
<Button
variant="ghost-primary"
on:click={() => {
trigger('top');
}}>Top</Button
>
<Button
variant="ghost-primary"
on:click={() => {
trigger('bottom');
}}>Bottom</Button
>
</div> </div>
</Card> </Card>
@@ -86,16 +106,22 @@
<section class="space-y-4"> <section class="space-y-4">
<h2>Usage</h2> <h2>Usage</h2>
<p>Create a <a href="https://svelte.dev/tutorial/writable-stores" target="_blank">Svelte writable store</a> to manage the state of the drawer.</p> <p>Create a <a href="https://svelte.dev/tutorial/writable-stores" target="_blank">Svelte writable store</a> to manage the state of the drawer.</p>
<CodeBlock language="typescript" code={` <CodeBlock
language="typescript"
code={`
import { writable, type Writable } from 'svelte/store'; import { writable, type Writable } from 'svelte/store';
const storeDrawer: Writable<boolean> = writable(false); const storeDrawer: Writable<boolean> = writable(false);
`.trim()} /> `.trim()}
/>
<p>Implement the Drawer component, passing the store reference. For best results implement in your app's root layout for global scope.</p> <p>Implement the Drawer component, passing the store reference. For best results implement in your app's root layout for global scope.</p>
<CodeBlock language="html" code={` <CodeBlock
language="html"
code={`
<Drawer open={storeDrawer} position="left"> <Drawer open={storeDrawer} position="left">
(contents) (contents)
</Drawer> </Drawer>
`.trim()} /> `.trim()}
/>
<p>Set the store value to <code>true</code> or <code>false</code> to open or close the Drawer.</p> <p>Set the store value to <code>true</code> or <code>false</code> to open or close the Drawer.</p>
<CodeBlock language="typescript" code={`const drawerOpen: any = () => { storeDrawer.set(true) };`} /> <CodeBlock language="typescript" code={`const drawerOpen: any = () => { storeDrawer.set(true) };`} />
<CodeBlock language="typescript" code={`const drawerClose: any = () => { storeDrawer.set(false) };`} /> <CodeBlock language="typescript" code={`const drawerClose: any = () => { storeDrawer.set(false) };`} />
@@ -104,10 +130,13 @@ const storeDrawer: Writable<boolean> = writable(false);
<CodeBlock language="html" code={`<Button variant="filled-primary" on:click={drawerClose}>Close</Button>`} /> <CodeBlock language="html" code={`<Button variant="filled-primary" on:click={drawerClose}>Close</Button>`} />
<h2>Pairing with App Shell</h2> <h2>Pairing with App Shell</h2>
<p>Place the Drawer above and outside the App Shell in your root layout. This will prevent content shifting as the drawer opens.</p> <p>Place the Drawer above and outside the App Shell in your root layout. This will prevent content shifting as the drawer opens.</p>
<CodeBlock language="html" code={` <CodeBlock
language="html"
code={`
<Drawer></Drawer> <Drawer></Drawer>
<AppShell></AppShell> <AppShell></AppShell>
`.trim()} /> `.trim()}
/>
</section> </section>
<!-- Properties --> <!-- Properties -->
<section class="space-y-4"> <section class="space-y-4">

9
src/routes/+layout.svelte
View File

@@ -1,5 +1,4 @@
<!-- Layout: (root) --> <!-- Layout: (root) -->
<script lang="ts"> <script lang="ts">
import hljs from 'highlight.js'; import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.css'; import 'highlight.js/styles/github-dark.css';
@@ -14,7 +13,7 @@
import Dialog from '$lib/Notifications/Dialog.svelte'; import Dialog from '$lib/Notifications/Dialog.svelte';
import Toast from '$lib/Notifications/Toast.svelte'; import Toast from '$lib/Notifications/Toast.svelte';
// Doc-Only Components // Doc-Only Components
import SkeletonAppBar from '$lib/_documentation/SkeletonAppBar/SkeletonAppBar.svelte'; import SkeletonAppBar from '$lib/_documentation/SkeletonAppBar/SkeletonAppBar.svelte';
import SkeletonSidebar from '$lib/_documentation/SkeletonNavigation/SkeletonSidebar.svelte'; import SkeletonSidebar from '$lib/_documentation/SkeletonNavigation/SkeletonSidebar.svelte';
import SkeletonDrawer from '$lib/_documentation/SkeletonNavigation/SkeletonDrawer.svelte'; import SkeletonDrawer from '$lib/_documentation/SkeletonNavigation/SkeletonDrawer.svelte';
@@ -39,7 +38,9 @@
storeCurrentUrl.set($page.url.pathname); storeCurrentUrl.set($page.url.pathname);
// Scroll to top // Scroll to top
const elemPage = document.querySelector('#page'); const elemPage = document.querySelector('#page');
if (elemPage !== null) { elemPage.scrollTop = 0; } if (elemPage !== null) {
elemPage.scrollTop = 0;
}
}); });
// Disable left sidebar on homepage // Disable left sidebar on homepage
@@ -53,7 +54,6 @@
<!-- App Shell --> <!-- App Shell -->
<AppShell {sidebarLeftWidth}> <AppShell {sidebarLeftWidth}>
<!-- Header --> <!-- Header -->
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<SkeletonAppBar /> <SkeletonAppBar />
@@ -71,5 +71,4 @@
<svelte:fragment slot="pageFooter"> <svelte:fragment slot="pageFooter">
<SkeletonFooter /> <SkeletonFooter />
</svelte:fragment> </svelte:fragment>
</AppShell> </AppShell>

23
src/routes/+page.svelte
View File

@@ -14,25 +14,26 @@
async function getContributors(): Promise<any> { async function getContributors(): Promise<any> {
const http = await fetch('https://api.github.com/repos/Brain-Bones/skeleton/contributors'); const http = await fetch('https://api.github.com/repos/Brain-Bones/skeleton/contributors');
const res = await http.json(); const res = await http.json();
if (http.ok) { return res; } else { throw new Error(res); } if (http.ok) {
return res;
} else {
throw new Error(res);
}
} }
let contributors: Promise<any> = getContributors(); let contributors: Promise<any> = getContributors();
</script> </script>
<div> <div>
<!-- Alert: Beta --> <!-- Alert: Beta -->
<Alert> <Alert>
<svelte:fragment slot="lead">🚧</svelte:fragment> <svelte:fragment slot="lead">🚧</svelte:fragment>
<svelte:fragment slot="message"> <svelte:fragment slot="message">Skeleton is available as a public beta. Expect breaking changes prior to v1.0. If you encounter issues please report them on GitHub.</svelte:fragment>
Skeleton is available as a public beta. Expect breaking changes prior to v1.0. If you encounter issues please report them on GitHub.</svelte:fragment>
<svelte:fragment slot="trail"> <svelte:fragment slot="trail">
<Button variant="ghost" href="https://github.com/Brain-Bones/skeleton/issues">Report Issue</Button> <Button variant="ghost" href="https://github.com/Brain-Bones/skeleton/issues">Report Issue</Button>
</svelte:fragment> </svelte:fragment>
</Alert> </Alert>
<div class="container max-w-[1200px] mx-auto px-4 py-10 md:py-20 space-y-20"> <div class="container max-w-[1200px] mx-auto px-4 py-10 md:py-20 space-y-20">
<!-- Hero --> <!-- Hero -->
<header> <header>
<div class="space-y-6"> <div class="space-y-6">
@@ -59,7 +60,10 @@
<SvgIcon name="svelte" fill="fill-white" width="w-10" height="h-10" /> <SvgIcon name="svelte" fill="fill-white" width="w-10" height="h-10" />
</div> </div>
<h6>Svelte Integration</h6> <h6>Svelte Integration</h6>
<p>Tightly coupled with Svelte, including full support for <a href="https://kit.svelte.dev/" target="_blank">SvelteKit</a>, <a href="https://vitejs.dev/" target="_blank">Vite</a>, and <a href="https://astro.build/" target="_blank">Astro</a>.</p> <p>
Tightly coupled with Svelte, including full support for <a href="https://kit.svelte.dev/" target="_blank">SvelteKit</a>, <a href="https://vitejs.dev/" target="_blank">Vite</a>, and
<a href="https://astro.build/" target="_blank">Astro</a>.
</p>
</Card> </Card>
<Card body="space-y-4"> <Card body="space-y-4">
<div class="bg-sky-500 w-14 aspect-square flex justify-center items-center rounded-lg shadow"> <div class="bg-sky-500 w-14 aspect-square flex justify-center items-center rounded-lg shadow">
@@ -121,14 +125,13 @@
<!-- Shoutouts --> <!-- Shoutouts -->
<section class="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-20"> <section class="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-20">
<!-- Sponsors --> <!-- Sponsors -->
<div class="text-center space-y-8"> <div class="text-center space-y-8">
<h2>Sponsors</h2> <h2>Sponsors</h2>
<div class="flex flex-wrap justify-center space-x-4"> <div class="flex flex-wrap justify-center space-x-4">
<a href="https://www.brainandbonesllc.com/" target="_blank" class="opacity-90 hover:opacity-100 !no-underline"> <a href="https://www.brainandbonesllc.com/" target="_blank" class="opacity-90 hover:opacity-100 !no-underline">
<Card border="border border-surface-500/30" body="flex flex-col items-center space-y-4"> <Card border="border border-surface-500/30" body="flex flex-col items-center space-y-4">
<img src="https://www.brainandbonesllc.com/svg/logo.svg" alt="Brain & Bones" class="h-[32px] invert dark:invert-0"> <img src="https://www.brainandbonesllc.com/svg/logo.svg" alt="Brain & Bones" class="h-[32px] invert dark:invert-0" />
<p class="text-sm">Brain & Bones</p> <p class="text-sm">Brain & Bones</p>
</Card> </Card>
</a> </a>
@@ -158,10 +161,6 @@
<svelte:fragment slot="trail">&rarr;</svelte:fragment> <svelte:fragment slot="trail">&rarr;</svelte:fragment>
</Button> </Button>
</div> </div>
</section> </section>
</div> </div>
</div> </div>

2
svelte.config.js
View File

@@ -24,7 +24,7 @@ const config = {
package: { package: {
// strip test files from packaging // strip test files from packaging
files: (filepath) => { files: (filepath) => {
return filepath.indexOf('test') == -1 ? true : false return filepath.indexOf('test') == -1 ? true : false;
} }
} }
}; };

2
tsconfig.json
View File

@@ -40,5 +40,5 @@
"@brainandbones/skeleton": ["src/lib/index.ts"] "@brainandbones/skeleton": ["src/lib/index.ts"]
}, },
"outDir": "package" "outDir": "package"
}, }
} }

8
vite.config.js
View File

@@ -11,11 +11,9 @@ const pkg = JSON.parse(json);
/** @type {import('vite').UserConfig} */ /** @type {import('vite').UserConfig} */
const config = { const config = {
plugins: [ plugins: [sveltekit({ hot: !process.env.VITEST })],
sveltekit({ hot: !process.env.VITEST }),
],
define: { define: {
'__PACKAGE__': pkg __PACKAGE__: pkg
}, },
resolve: { resolve: {
alias: { alias: {
@@ -26,7 +24,7 @@ const config = {
globals: true, globals: true,
environment: 'jsdom', environment: 'jsdom',
exclude: [...configDefaults.exclude, '**/package/**', '**/build/**'] exclude: [...configDefaults.exclude, '**/package/**', '**/build/**']
}, }
}; };
export default config; export default config;