Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add component API to built docs + Add Checkbox, CheckboxList, & CheckboxVirtualList

Browse Source
This commit is contained in:
venashial 2022-03-29 22:06:43 -07:00
parent 1da281de8a
commit 1d7949ded6
15 changed files with 374 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -22,7 +22,6 @@
"@poppanator/sveltekit-svg": "^0.3.1",
"@sveltejs/adapter-static": "^1.0.0-next.29",
"@sveltejs/kit": "next",
"@types/prismjs": "^1.26.0",
"@typescript-eslint/eslint-plugin": "^5.10.1",
"@typescript-eslint/parser": "^5.10.1",
"autoprefixer": "^10.4.2",
@ -69,7 +68,9 @@
},
"homepage": "https://omorphia.modrinth.com",
"dependencies": {
"lodash.uniqueid": "^4.0.1",
"sanitize.css": "^13.0.0",
"svelte-tiny-virtual-list": "^2.0.0",
"svelte-use-click-outside": "^1.0.0",
"throttle-debounce": "^3.0.1"
}

47
plugins/sveld.js
View File

@ -1,6 +1,8 @@
import { ComponentParser } from 'sveld'
import {ComponentParser} from 'sveld'
import sveltePreprocess from 'svelte-preprocess'
import * as svelte from 'svelte/compiler'
import fs from 'fs/promises'
import path from 'path'
export default function sveld() {
return {
@ -9,22 +11,43 @@ export default function sveld() {
if (id.endsWith('?raw&sveld')) {
const raw = JSON.parse(src.split('export default ')[1])
let { code } = await svelte.preprocess(raw, sveltePreprocess({ postcss: true }), {
filename: id
})
const data = new ComponentParser({
verbose: false
}).parseSvelteComponent(code, {
filePath: id,
moduleName: id
})
const data = await parseRaw(raw, id)
return {
code: `export default ${JSON.stringify(data)}`,
map: null
}
}
}
},
// This generates a `COMPONENT_API.json` with sveld in the `/_app` folder on build, which is used by the docs about components (only when built statically)
async generateBundle(options, bundle) {
const output = {};
const componentFiles = await fs.readdir(path.resolve('./src/lib/components'))
for (const fileName of componentFiles) {
const filePath = path.resolve('./src/lib/components', fileName)
const raw = (await fs.readFile(filePath)).toString()
output[fileName] = await parseRaw(raw, filePath)
}
this.emitFile({
type: 'asset',
fileName: 'COMPONENT_API.json',
source: JSON.stringify(output),
})
},
}
}
async function parseRaw(raw, filePath) {
let { code } = await svelte.preprocess(raw, sveltePreprocess({ postcss: true }), {
filename: filePath
})
return new ComponentParser({
verbose: false
}).parseSvelteComponent(code, {
filePath,
moduleName: filePath
})
}

18
pnpm-lock.yaml generated
View File

@ -7,7 +7,6 @@ specifiers:
'@poppanator/sveltekit-svg': ^0.3.1
'@sveltejs/adapter-static': ^1.0.0-next.29
'@sveltejs/kit': next
'@types/prismjs': ^1.26.0
'@typescript-eslint/eslint-plugin': ^5.10.1
'@typescript-eslint/parser': ^5.10.1
autoprefixer: ^10.4.2
@ -15,6 +14,7 @@ specifiers:
eslint: ^7.32.0
eslint-config-prettier: ^8.3.0
eslint-plugin-svelte3: ^3.2.1
lodash.uniqueid: ^4.0.1
mdsvex: ^0.10.5
mdsvexamples: ^0.0.8
nodemon: ^2.0.15
@ -32,6 +32,7 @@ specifiers:
svelte: ^3.44.0
svelte-check: ^2.2.6
svelte-preprocess: ^4.10.1
svelte-tiny-virtual-list: ^2.0.0
svelte-use-click-outside: ^1.0.0
svelte2tsx: ^0.5.5
throttle-debounce: ^3.0.1
@ -40,7 +41,9 @@ specifiers:
unplugin-icons: ^0.13.3
dependencies:
lodash.uniqueid: 4.0.1
sanitize.css: 13.0.0
svelte-tiny-virtual-list: 2.0.0
svelte-use-click-outside: 1.0.0
throttle-debounce: 3.0.1
@ -51,7 +54,6 @@ devDependencies:
'@poppanator/sveltekit-svg': 0.3.1_svelte@3.46.4
'@sveltejs/adapter-static': 1.0.0-next.29
'@sveltejs/kit': 1.0.0-next.303_svelte@3.46.4
'@types/prismjs': 1.26.0
'@typescript-eslint/eslint-plugin': 5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98
'@typescript-eslint/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2
autoprefixer: 10.4.2_postcss@8.4.8
@ -410,10 +412,6 @@ packages:
resolution: {integrity: sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==}
dev: true
/@types/prismjs/1.26.0:
resolution: {integrity: sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==}
dev: true
/@types/pug/2.0.6:
resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
dev: true
@ -2095,6 +2093,10 @@ packages:
resolution: {integrity: sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=}
dev: true
/lodash.uniqueid/4.0.1:
resolution: {integrity: sha1-MmjyanyI5PSxdY1nknGBTjH6WyY=}
dev: false
/lower-case/2.0.2:
resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
dependencies:
@ -3603,6 +3605,10 @@ packages:
typescript: 4.6.2
dev: true
/svelte-tiny-virtual-list/2.0.0:
resolution: {integrity: sha512-6HxqgUaBICWV/Mm/x1Mr1L6G6EYJM3rcYhRWqYzKpv59e3s9rWifOwP7fLNKtblr16l2Gec0iBtUCOCPiYDmeQ==}
dev: false
/svelte-use-click-outside/1.0.0:
resolution: {integrity: sha512-tOWeMPxeIoW9RshS0WbogRhdYdbxcJV0ebkzSh1lwR7Ihl0hSZMmB4YyCHHoXJK4xcbxCCFh0AnQ1vkzGZfLVQ==}
dev: false

3
src/lib/components/Button.svelte
View File

@ -1,4 +1,7 @@
<script lang="ts">
// TODO: sizes
// TODO: icon only buttons should have uniform padding
import { classCombine } from '$lib/utils/classCombine'
/** The element to be styled as a button */

66
src/lib/components/Checkbox.svelte Normal file
View File

@ -0,0 +1,66 @@
<script lang="ts">
import uniqueId from 'lodash.uniqueid'
import IconCheck from 'virtual:icons/heroicons-outline/check'
export let checked = false;
const id = `checkbox-${uniqueId()}`
</script>
<div class="checkbox">
<input type="checkbox" bind:checked={checked} on:change id={id} name={id}>
<label for={id} class="checkbox__label">
<span class="checkbox__label__box">
<IconCheck />
</span>
<slot/>
</label>
</div>
<style lang="postcss">
.checkbox {
input {
display: none;
}
display: inline-flex;
align-items: center;
grid-gap: 0.5rem;
&__label {
display: flex;
align-items: center;
gap: 8px;
> :global(.icon) {
width: 1.1rem;
margin-right: -0.1rem;
}
&__box {
height: 1rem;
width: 1rem;
display: flex;
border-radius: 0.25rem;
background-color: var(--color-button-bg);
justify-content: center;
align-items: center;
> :global(.icon) {
display: none;
width: 1rem;
height: 1rem;
color: var(--color-raised-bg)
}
}
}
[type=checkbox]:checked + label span {
background-color: var(--color-brand);
:global(.icon) {
display: unset;
}
}
}
</style>

47
src/lib/components/CheckboxList.svelte Normal file
View File

@ -0,0 +1,47 @@
<script lang="ts">
import Checkbox from './Checkbox.svelte'
import type { SvelteComponent } from 'svelte'
interface Option {
label: string;
/** The element that will be in the `value` array while the option is checked */
value: string | number;
icon: SvelteComponent;
}
export let value = []
export let options: Option[] = []
const handleChange = (e, key) => {
if (e.target.checked) {
if (!value) value = []
value = [key, ...value]
} else {
value = value.filter((it) => key !== it)
}
}
</script>
<div class="checkbox-list">
{#each options as option}
<Checkbox on:change={(e) => handleChange(e, option.value)}>
{#if option.icon}
<svelte:component this={option.icon}/>
{/if}
{option.label}
</Checkbox>
{/each}
</div>
<style lang="postcss">
.checkbox-list {
display: flex;
flex-direction: column;
&.wrap {
flex-direction: row;
flex-wrap: wrap;
grid-gap: 2rem;
}
}
</style>

56
src/lib/components/CheckboxVirtualList.svelte Normal file
View File

@ -0,0 +1,56 @@
<script lang="ts">
import Checkbox from './Checkbox.svelte'
import type { SvelteComponent } from 'svelte'
import VirtualList from 'svelte-tiny-virtual-list'
interface Option {
label: string;
/** The element that will be in the `value` array while the option is checked */
value: string | number;
icon: SvelteComponent;
}
/** Height in pixels of list */
export let height = 200
export let value = []
export let options: Option[] = []
const handleChange = (e, key) => {
if (e.target.checked) {
if (!value) value = []
value = [key, ...value]
} else {
value = value.filter((it) => key !== it)
}
}
</script>
<VirtualList
width="100%"
{height}
itemCount={options.length}
itemSize={30}>
<div slot="item" let:index let:style {style} style:padding-bottom={(options.length) - 1 === index ? '2.5rem' : ''}>
{@const option = options[index]}
<Checkbox checked={value.includes(option.value)} on:change={(e) => handleChange(e, option.value)}>
{#if option.icon}
<svelte:component this={option.icon}/>
{/if}
{option.label}
</Checkbox>
</div>
</VirtualList>
<style lang="postcss">
.checkbox-list {
display: flex;
flex-direction: column;
&.wrap {
flex-direction: row;
flex-wrap: wrap;
grid-gap: 2rem;
}
}
</style>

53
src/lib/components/Input.svelte Normal file
View File

@ -0,0 +1,53 @@
<script lang="ts">
// TODO: Move to TextInput.svelte & simplify options for text
import { SvelteComponent } from 'svelte'
export let key = ''
export let label = ''
export let placeholder = ''
export let icon: string | SvelteComponent = ''
export let type: 'text' | 'textarea'
export let options: [
{
label: string;
value: string | number;
icon: string;
}
] = []
export let value = undefined
export let wrap = false
</script>
{#if label}
<div class="input__label">
{label}
</div>
{/if}
{#if type === 'text'}
<input type="text" name={key} class="input-box" {placeholder} bind:value={value}/>
{:else if type === 'textarea'}
<textarea name={key} class="input-box input-box--fill" {placeholder} bind:value={value}/>
{/if}
<style lang="postcss">
.input-box {
border-radius: var(--rounded-sm);
box-shadow: var(--shadow-inset-sm);
background-color: var(--color-button-bg);
border: none;
padding: 0.25rem 0.75rem;
width: 20rem;
max-width: 100%;
&--fill {
width: 100%;
padding: 0.5rem 0.75rem;
}
}
textarea {
min-height: 2.5rem;
}
</style>

3
src/routes/_internal/components/Example.svelte
View File

@ -3,7 +3,7 @@
import IconMoon from 'virtual:icons/heroicons-outline/moon'
import IconSun from 'virtual:icons/heroicons-outline/sun'
let theme = 'light'
let theme = 'dark'
let background: 'var(--color-raised-bg)' | 'var(--color-bg)' = 'var(--color-bg)'
</script>
@ -51,6 +51,7 @@
&__code {
margin: 0;
border-radius: var(--rounded-sm-bottom) !important;
background: hsl(220, 13%, 22%);
}
}
</style>

16
src/routes/_internal/layout/page.svelte
View File

@ -11,7 +11,11 @@
let api
if ($page.url.pathname.includes('components')) {
import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
if (import.meta.env.DEV) {
import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
} else {
fetch('/_app/COMPONENT_API.json').then(res => res.json()).then(output => api = output[`${title}.svelte`])
}
}
</script>
@ -42,9 +46,9 @@
<tbody>
{#each api.props as prop}
<tr>
<td>{prop.name}</td>
<td><code>{prop.name}</code></td>
<td><code>{prop.type ?? ''}</code></td>
<td>{prop.value ?? ''}</td>
<td><code>{prop.value ?? ''}</code></td>
<td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
</tr>
{/each}
@ -64,7 +68,7 @@
<tbody>
{#each api.events as event}
<tr>
<td>{event.name}</td>
<td><code>{event.name}</code></td>
<td>{!!event.parent}</td>
<td>{event.description?.replace('null', '') || ''}</td>
</tr>
@ -84,8 +88,8 @@
<tbody>
{#each api.slots as slot}
<tr>
<td>{slot.name}</td>
<td>{slot.fallback}</td>
<td><code>{slot.name}</code></td>
<td>{slot.fallback ?? 'None'}</td>
</tr>
{/each}
</tbody>

20
src/routes/components/Checkbox.md Normal file
View File

@ -0,0 +1,20 @@
### Text-only Example
```svelte example
<script lang="ts">
import Checkbox from "omorphia/components/Checkbox.svelte";
</script>
<Checkbox>Extra components</Checkbox>
```
### Text with Icon Example
```svelte example
<script lang="ts">
import Checkbox from "omorphia/components/Checkbox.svelte";
import IconCarrot from 'virtual:icons/lucide/carrot'
</script>
<Checkbox><IconCarrot /> Food </Checkbox>
```

33
src/routes/components/CheckboxList.md Normal file
View File

@ -0,0 +1,33 @@
```svelte example
<script lang="ts">
import CheckboxList from "omorphia/components/CheckboxList.svelte";
import IconSquare from 'virtual:icons/lucide/square'
import IconCircle from 'virtual:icons/lucide/circle'
import IconTriangle from 'virtual:icons/lucide/triangle'
let selected = []
</script>
<CheckboxList
bind:value={selected}
options={[
{
label: 'Circle',
icon: IconCircle,
value: 'CIR',
},
{
label: 'Triangle',
icon: IconTriangle,
value: 'TRI',
},
{
label: 'Square',
icon: IconSquare,
value: 'SQU',
},
]}
/>
Selected: {selected}
```

23
src/routes/components/CheckboxVirtualList.md Normal file
View File

@ -0,0 +1,23 @@
```svelte example
<script lang="ts">
import CheckboxVirtualList from "omorphia/components/CheckboxVirtualList.svelte";
import IconStar from 'virtual:icons/heroicons-outline/star'
import uniqueId from 'lodash.uniqueid'
let options = Array(100).fill({})
.map(option => ({
label: 'Star-' + uniqueId(),
icon: IconStar,
value: uniqueId(),
}))
let selected = ['2', '6']
</script>
<CheckboxVirtualList
bind:value={selected}
{options}
/>
Selected: {selected}
```

4
src/routes/components/NavRow.md
View File

@ -13,8 +13,8 @@
label: 'Button'
},
{
href: '/Link',
label: 'Link'
href: '/Chips',
label: 'Chips'
},
{
href: '/NavRow',

38
svelte.config.js
View File

@ -22,6 +22,10 @@ const config = {
kit: {
adapter: adapter(),
prerender: {
default: true,
onError: 'continue',
},
vite: {
plugins: [
svelteSvg(),
@ -31,34 +35,6 @@ const config = {
}),
examples,
sveld(),
// {
// name: "sveltedoc-parser",
// async transform(src, id) {
// const query = id.split('?')[1]
//
// if ((query || '').includes('raw&api')) {
// const raw = JSON.parse(src.split('export default ')[1])
//
// let {code} = await svelte.preprocess(raw, sveltePreprocess(), {
// filename: id
// })
//
// const data = await parse({
// fileContent: code,
// encoding: 'ascii',
// features: ['data', 'computed', 'events', 'slots'],
// ignoredVisibilities: ['private'],
// includeSourceLocations: true,
// version: 3
// })
//
// return {
// code: `export default ${JSON.stringify(data)}`,
// map: null
// }
// }
// }
// },
],
resolve: {
@ -68,6 +44,12 @@ const config = {
omorphia: path.resolve('./src/lib'),
},
},
build: {
rollupOptions: {
external: '/_app/COMPONENT_API.json'
}
}
},
},
};