Skip to content

Commit

Permalink
Format code
Browse files Browse the repository at this point in the history
  • Loading branch information
@PaulioRandall
PaulioRandall committed Oct 23, 2023
1 parent b0fde0b commit 3149276
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 99 deletions.
8 changes: 4 additions & 4 deletions packages/charts/src/data/dataScatter.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
declare const _default: {
year: number;
value: number;
alt: number;
group: string;
year: number;
value: number;
alt: number;
group: string;
}[];
export default _default;
25 changes: 12 additions & 13 deletions packages/eslint-config-custom/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
module.exports = {
parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'turbo', 'prettier'],
plugins: ['svelte', '@typescript-eslint'],
plugins: ['svelte', '@typescript-eslint'],
ignorePatterns: ['*.cjs'],
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
],
settings: {
},
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
],
settings: {},
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/lib/sidebar/NotSidebar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
// shrinks with the Sidebar.
//
// It is not required for use with the Sidebar component but useful when you
// don't want the Sidebar to cover your main content.
// don't want the Sidebar to cover your main content.
import { browser } from '$app/environment';
import { sidebarLayout, sidebarOpen } from './Sidebar.svelte';
export let hideContent = false;
export let classes = ""
export let classes = '';
let size = {
width: '100%',
Expand Down
142 changes: 68 additions & 74 deletions packages/ui/src/lib/sidebar/Sidebar.stories.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
<script>
import { onMount } from 'svelte'
import { onMount } from 'svelte';
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
import Sidebar, { sidebarOpen } from './Sidebar.svelte';
import NotSidebar from './NotSidebar.svelte'
import SidebarContent from './SidebarContent.svelte'
import SidebarHeader from './SidebarHeader.svelte'
import SidebarSection from './SidebarSection.svelte'
import NotSidebar from './NotSidebar.svelte';
import SidebarContent from './SidebarContent.svelte';
import SidebarHeader from './SidebarHeader.svelte';
import SidebarSection from './SidebarSection.svelte';
sidebarOpen.set(true)
sidebarOpen.set(true);
</script>

<Meta title="Ui/Sidebar" component={Sidebar} parameters={{
layout: 'fullscreen',
}}/>
<Meta
title="Ui/Sidebar"
component={Sidebar}
parameters={{
layout: 'fullscreen'
}}
/>

<Template let:args>
<Sidebar {...args} />
Expand All @@ -25,23 +29,22 @@
<Sidebar>
<div class="w-[300px] bg-core-blue-800 p-4 space-y-4 text-white text-sm">
<p>
<code>{"<Sidebar>"}</code> is a generic component with it's width,
height, and other layout attributes calculated based on it's content.
<code>{'<Sidebar>'}</code> is a generic component with it's width, height, and other layout attributes
calculated based on it's content.
</p>

<p>
The sidebar is a <code>{"<section>"}</code> so
<code>{"<header>"}</code> and <code>{"<footer>"}</code> are applicable.
But the user programmer needs to set all the content sizing, overflow
management, internal spacings, and other styling themselves. You'll
also notice the non-standard styling I've applied to show off the
sidebars flexibility.
The sidebar is a <code>{'<section>'}</code> so
<code>{'<header>'}</code> and <code>{'<footer>'}</code> are applicable. But the user programmer
needs to set all the content sizing, overflow management, internal spacings, and other styling
themselves. You'll also notice the non-standard styling I've applied to show off the sidebars
flexibility.
</p>

<p>
However, since nearly all sidebars will look the same the
<code>{"<SidebarContent>"}</code> component can be used to remove all
the boiler plate and provide a consistent looking sidebar across apps.
<code>{'<SidebarContent>'}</code> component can be used to remove all the boiler plate and provide
a consistent looking sidebar across apps.
</p>
</div>
</Sidebar>
Expand All @@ -52,26 +55,28 @@
<SidebarContent>
<p>
Nearly all sidebars will have the same style and layout. The
<code>{"<SidebarContent>"}</code> wraps your content within
<code>{"<Sidebar>"}</code> to provide the standard sizing, spacing, and
default footer content.
<code>{'<SidebarContent>'}</code> wraps your content within
<code>{'<Sidebar>'}</code> to provide the standard sizing, spacing, and default footer content.
</p>

<p>
You can change the footer using the named slot 'footer'. You should use
the <code>{"<footer>"}</code> tag and you'll need to style it yourself:
You can change the footer using the named slot 'footer'. You should use the <code
>{'<footer>'}</code
> tag and you'll need to style it yourself:
</p>

<pre><code>{[
"<SidebarContent>",
" <footer slot='footer'>",
" Custom footer content.",
" </footer>",
"</SidebarContent>"
].join("\n")}</code></pre>
<pre><code
>{[
'<SidebarContent>',
" <footer slot='footer'>",
' Custom footer content.',
' </footer>',
'</SidebarContent>'
].join('\n')}</code
></pre>

<footer slot="footer" class="flex justify-end pt-6">
<p>Custom <code>{"<footer>"}</code>.</p>
<p>Custom <code>{'<footer>'}</code>.</p>
</footer>
</SidebarContent>
</Sidebar>
Expand All @@ -81,9 +86,7 @@
<Sidebar>
<SidebarContent>
<SidebarHeader title="Sidebar Stores">
<p>
Two stores accompany the sidebar component
</p>
<p>Two stores accompany the sidebar component</p>
<ul class="-mt-2 ml-4 list-outside list-disc space-y-1">
<li><code>sidebarOpen</code></li>
<li><code>sidebarLayout</code></li>
Expand All @@ -92,29 +95,25 @@

<SidebarSection title="$sidebarOpen">
<p>
<code>$sidebarOpen</code> is true if the sidebar is open and false if
not.
<code>$sidebarOpen</code> is true if the sidebar is open and false if not.
</p>

<p>
Setting this store true or false will toggle the sidebar open or
closed respectively. Any reactive content using the store will receive
the change and update accordingly.
Setting this store true or false will toggle the sidebar open or closed respectively. Any
reactive content using the store will receive the change and update accordingly.
</p>
</SidebarSection>

<SidebarSection title="$sidebarLayout">
<p>
<code>$sidebarLayout</code> is an object contains information about
how the sidebar is laid out with a few utility functions to ensure
readable user code.
<code>$sidebarLayout</code> is an object contains information about how the sidebar is laid
out with a few utility functions to ensure readable user code.
</p>

<p>
A new object is set each time the sidebar is resized so any content
that needs to adapt based on the sidebar layout can do so. It
currently contains the following functions and field with more
functions likely to be added overtime:
A new object is set each time the sidebar is resized so any content that needs to adapt
based on the sidebar layout can do so. It currently contains the following functions and
field with more functions likely to be added overtime:
</p>

<ul class="-mt-2 ml-4 list-outside list-disc space-y-1">
Expand All @@ -131,9 +130,8 @@
</ul>

<p>
User programmers should prioritise use of the functions over fields
because they are less error prone and provide better intentionality
to readers.
User programmers should prioritise use of the functions over fields because they are less
error prone and provide better intentionality to readers.
</p>
</SidebarSection>
</SidebarContent>
Expand All @@ -145,16 +143,16 @@
<SidebarContent>
<SidebarHeader title="Sidebar header">
<p>
The <code>{"<SidebarHeader>"}</code> component should be the first
one in the sidebar. It uses the <code>{"<header>"}</code> tag.
The <code>{'<SidebarHeader>'}</code> component should be the first one in the sidebar. It
uses the <code>{'<header>'}</code> tag.
</p>
<p>
The title is provided using the <i>title</i> property which may
contain standard HTML tags, e.i. not Svelte components.
The title is provided using the <i>title</i> property which may contain standard HTML tags,
e.i. not Svelte components.
</p>
<p>
Supply the description as unamed slotted content. Use a series of
<code>{"<p>"}</code> tags unless you need something bespoke.
<code>{'<p>'}</code> tags unless you need something bespoke.
</p>
</SidebarHeader>
</SidebarContent>
Expand All @@ -166,24 +164,22 @@
<SidebarContent>
<SidebarHeader title="Sidebar section">
<p>
Sidebar sections are <code>{"<section>"}</code> elements for
splitting up sidebar content in to meaningful chunks that crawlers,
browsers, and accessibility can navigate meaningfully.
Sidebar sections are <code>{'<section>'}</code> elements for splitting up sidebar content in
to meaningful chunks that crawlers, browsers, and accessibility can navigate meaningfully.
</p>
</SidebarHeader>

<SidebarSection title="Section title">
<p>
A title is provided using the <i>title</i> property which may
contain standard HTML tags, e.i. not Svelte components. Section
titles are optional.
A title is provided using the <i>title</i> property which may contain standard HTML tags, e.i.
not Svelte components. Section titles are optional.
</p>
</SidebarSection>

<SidebarSection title="Section content">
<p>
The section content is spaced accordingly but may be modified via
local CSS, the style property, or utility classes.
The section content is spaced accordingly but may be modified via local CSS, the style
property, or utility classes.
</p>
</SidebarSection>
</SidebarContent>
Expand All @@ -194,31 +190,29 @@
<NotSidebar classes="p-6">
<h1 class="text-3xl">I am not the Sidebar.</h1>
<p class="mt-4">
I resize so the sidebar does not overlap me. Try toggling the sidebar
open and closed and watch this paragraph width grow and shrink in sync.
I resize so the sidebar does not overlap me. Try toggling the sidebar open and closed and
watch this paragraph width grow and shrink in sync.
</p>
</NotSidebar>

<Sidebar>
<SidebarContent>
<SidebarHeader title="I am the Sidebar">
<p>
The <code>{"<NotSidebar>"}</code> component can be used to contain
and resize non-sidebar content.
The <code>{'<NotSidebar>'}</code> component can be used to contain and resize non-sidebar content.
</p>
</SidebarHeader>

<SidebarSection>
<p>
Opening the <code>{"<Sidebar>"}</code> will partly cover main
application content. Wrapping the content in
<code>{"<NotSidebar>"}</code> will provide auto-resizing when the
sidebar opens and closes.
Opening the <code>{'<Sidebar>'}</code> will partly cover main application content.
Wrapping the content in
<code>{'<NotSidebar>'}</code> will provide auto-resizing when the sidebar opens and closes.
</p>

<p>
<code>{"<NotSidebar>"}</code> is great for use with maps and other
applications that are fixed to the users visible viewport.
<code>{'<NotSidebar>'}</code> is great for use with maps and other applications that are fixed
to the users visible viewport.
</p>
</SidebarSection>
</SidebarContent>
Expand All @@ -229,4 +223,4 @@
code {
@apply text-perceptual-orange-100;
}
</style>
</style>
2 changes: 1 addition & 1 deletion packages/ui/src/lib/sidebar/Sidebar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@
<aside> is not suitable here because the sidebar contains primary content and
sometimes primary controls, not just supplimentary stuff, e.g. title and
description.
-->
-->
<section
id="gla-sidebar"
class="fixed z-20 pointer-events-none"
Expand Down
12 changes: 7 additions & 5 deletions packages/ui/src/lib/sidebar/SidebarContent.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,14 @@

<SidebarSection title="Standard sidebar">
<p>
For most apps you should use this <code>{"<SidebarContent>"}</code> component with your own slotted content.
Optionally replace the sidebar hood containing the open/close toggle.
For most apps you should use this <code>{'<SidebarContent>'}</code> component with your own
slotted content. Optionally replace the sidebar hood containing the open/close toggle.
</p>

<p>
It will take care of applying the standard sidebar sizing, spacing for inner elements,
scrollbars when needed, and add the default footer. You can slot in your own footer if needed:
scrollbars when needed, and add the default footer. You can slot in your own footer if
needed:
</p>

<div class="italic flex flex-col">
Expand All @@ -56,7 +57,8 @@
<p>
In the rare event that a non-standard layout is essential you'll need to do all the
sizing, spacing, footer, and other styling manually, just omit the sidebar content
component. I recommend copying the <code>{"<SidebarContent>"}</code> code into a custom project component and modifying to suit.
component. I recommend copying the <code>{'<SidebarContent>'}</code> code into a custom project
component and modifying to suit.
</p>

<div class="italic flex flex-col">
Expand Down Expand Up @@ -86,4 +88,4 @@
code {
@apply text-perceptual-orange-100;
}
</style>
</style>

0 comments on commit 3149276

Please sign in to comment.