@e280/shiny 0.1.0-10 → 0.1.0-12

package/s/components/tabs/showcase.ts

@@ -0,0 +1,73 @@
+
+import {css, html} from "lit"
+import {lipsum} from "../../demo/lipsum.js"
+import {Showcase} from "../../demo/views/showcase/view.js"
+
+const lip1 = lipsum()
+const lip2 = lipsum()
+const lip3 = lipsum()
+
+const cssSnippet = `
+	shiny-tabs {
+		&::part(tabs) {}
+		&::part(panels) {}
+		> shiny-button {}
+	}
+`
+
+export const tabsShowcase = () => Showcase({
+	name: "tabs",
+	style: css`
+		.box {
+			place-content: start start;
+			p { margin-top: 0.5em; }
+		}
+	`,
+	exhibits: [
+		{
+			label: "tabs",
+			explain: html`<p>button bar. panels optional.</p>`,
+			snippets: [
+				{label: "html", code: `
+					<shiny-tabs>
+						<shiny-button>tab1</shiny-button>
+						<shiny-button>tab2</shiny-button>
+						<shiny-button>tab3</shiny-button>
+						<div slot=panel>panel1</div>
+						<div slot=panel>panel2</div>
+						<div slot=panel>panel3</div>
+					</shiny-tabs>
+				`},
+				{label: "view", code: `
+					ShinyTabs
+						.props()
+						.children(html\`
+							\${ShinyButton.props().children("tab1").render()}
+							\${ShinyButton.props().children("tab2").render()}
+							\${ShinyButton.props().children("tab3").render()}
+							<div slot=panel>panel1</div>
+							<div slot=panel>panel2</div>
+							<div slot=panel>panel3</div>
+						\`)
+						.render()
+				`},
+				{label: "css", code: cssSnippet},
+			],
+			style: css``,
+			presentation: views => html`
+				${views.ShinyTabs
+					.props()
+					.children(html`
+						${views.ShinyButton.props().children("tab1").render()}
+						${views.ShinyButton.props().children("tab2").render()}
+						${views.ShinyButton.props().children("tab3").render()}
+						<p slot=panel class=lipsum>${lip1}</p>
+						<p slot=panel class=lipsum>${lip2}</p>
+						<p slot=panel class=lipsum>${lip3}</p>
+					`)
+					.render()}
+			`,
+		},
+	],
+})
+

package/s/components/tabs/style.css.ts

@@ -2,5 +2,42 @@
 import {css} from "lit"
 export default css`@layer view {
 
-}`
+:host {
+	display: inline-flex;
+	flex-direction: column;
+}
+
+slot[part="tabs"] {
+	display: flex;
+
+	&::slotted(*) {
+		border-radius: 0.3em;
+	}
+
+	&::slotted([data-active]) {
+		opacity: 1;
+		color: currentColor;
+		text-decoration: underline;
+	}
+
+	&::slotted(:not([data-last], [data-next-is-active])) {
+		border-right: none;
+	}
+
+	&::slotted([data-active]:not([data-first])) {
+		border-left: none;
+	}
+
+	&::slotted(:not([data-last])) {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	&::slotted(:not([data-first])) {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+}
+
+} `
 

package/s/demo/demo.bundle.ts

@@ -1,26 +1,11 @@
 
-import {css, html} from "lit"
+import {css} from "lit"
 import {dom, view} from "@e280/sly"
-import {shiny} from "../shiny.js"
-import {auraViews} from "./aura-views.js"
-import {plain} from "../themes/plain.css.js"
-import {makeLipsumDispenser} from "./utils/lipsum.js"
-import {TabControl} from "../components/tabs/control.js"
-import {Demonstration} from "./views/demonstration/view.js"
-
-const viewsets = [
-	{label: "aura", views: auraViews},
-	{label: "plain", views: shiny({theme: plain}).views},
-]
-
-const labels = {
-	html: {button: "html", text: "html web component"},
-	view: {button: "view", text: "sly view"},
-	css: {button: "css", text: "custom css"},
-}
-
-const dispenser = makeLipsumDispenser()
-const lipsum = () => dispenser.takeFirst()
+import {lipsumDispenser} from "./lipsum.js"
+import {copyShowcase} from "../components/copy/showcase.js"
+import {tabsShowcase} from "../components/tabs/showcase.js"
+import {buttonShowcase} from "../components/button/showcase.js"
+import {drawerShowcase} from "../components/drawer/showcase.js"
 
 dom.register({ShinyDemo: view.component(use => {
 	use.styles(css`
@@ -42,191 +27,21 @@ dom.register({ShinyDemo: view.component(use => {
 				font-style: italic;
 			}
 
-			[view="shiny-tabs"] {
+			[view="demo-tabs"] {
 				display: flex;
 			}
 		}
 	`)
 
-	const tabControl = use.once(() => new TabControl(0))
-	const $viewset = use.derived(() => viewsets.at(tabControl.$index())!)
-	const views = $viewset().views
-	dispenser.takeAll()
-
-	const demonstrations = [
-		Demonstration({
-			name: "shiny-copy",
-			explain: html`
-				<p>click-to-copy text button.</p>
-			`,
-			snippets: [
-				[labels.html, `
-					<shiny-copy text="hello world"></shiny-copy>
-				`],
-				[labels.view, `
-					ShinyCopy("hello world")
-				`],
-				[labels.css, `
-					shiny-copy {
-						font-size: 1em;
-						--happy: #0fa;
-						--angry: #f50;
-						--lame: #8888;
-						--inactive-opacity: 0.5;
-					}
-				`],
-			],
-			content: views.ShinyCopy("hello world"),
-			style: css`
-				.content sly-view {
-					font-size: 4em;
-				}
-			`,
-		}),
-
-		Demonstration({
-			name: "shiny-drawer",
-			explain: html`
-				<p>slide-out panel. button optional.</p>
-			`,
-			snippets: [
-				[labels.html, `
-					<shiny-drawer button side=left>
-						<header>example</header>
-						<section slot=plate>
-							lorem kettlebell..
-						</section>
-					</shiny-drawer>
-				`],
-				[labels.view, `
-					ShinyDrawer
-						.props({button: true, side: "left"})
-						.children(html\`
-							<header>example</header>
-							<section slot=plate>
-								lorem kettlebell..
-							</section>
-						\`)
-						.render()
-				`],
-				[labels.css, `
-					shiny-drawer {
-						--button-size: 2em;
-						--anim-duration: 200ms;
-						--blanket-backdrop-filter: blur(0.5em);
-						--blanket-bg: color-mix(
-							in oklab,
-							transparent,
-							var(--bg)
-						);
-					}
-				`],
-			],
-			content: views.ShinyDrawer
-				.props({button: true})
-				.children(html`
-					<header>
-						<h2>example drawer</h2>
-						<p>you can put any content in here.</p>
-						<p class=lipsum>${lipsum()}</p>
-					</header>
-					<section slot=plate>
-						<p class=lipsum>${lipsum()}</p>
-						<p class=lipsum>${lipsum()}</p>
-					</section>
-				`)
-				.render(),
-			style: css`
-				.content sly-view {
-					border-radius: 0.5em;
-					overflow: hidden;
-					--button-size: 3em;
+	lipsumDispenser.takeAll()
 
-					header {
-						> * + * { margin-top: 0.5em; }
-					}
-
-					section {
-						display: flex;
-						flex-direction: column;
-						justify-content: center;
-						min-height: 100%;
-						padding: 1em;
-						padding-top: 3em;
-						> * + * { margin-top: 0.5em; }
-					}
-				}
-			`,
-		}),
-
-		Demonstration({
-			name: "shiny-tabs",
-			explain: html`
-				<p>button bar. panels optional.</p>
-			`,
-			snippets: [
-				[labels.html, `
-					<shiny-tabs>
-						<button>tab1</button>
-						<button>tab2</button>
-						<button>tab3</button>
-						<div slot=panel>panel1</div>
-						<div slot=panel>panel2</div>
-						<div slot=panel>panel3</div>
-					</shiny-tabs>
-				`],
-				[labels.view, `
-					ShinyTabs
-						.props()
-						.children(html\`
-							<button>tab1</button>
-							<button>tab2</button>
-							<button>tab3</button>
-							<div slot=panel>panel1</div>
-							<div slot=panel>panel2</div>
-							<div slot=panel>panel3</div>
-						\`)
-						.render()
-				`],
-				[labels.css, `
-					shiny-tabs::part(tabs) {}
-					shiny-tabs::part(panels) {}
-				`],
-			],
-			content: views.ShinyTabs
-				.props()
-				.children(html`
-					<button>tab1</button>
-					<button>tab2</button>
-					<button>tab3</button>
-					<p slot=panel class=lipsum>${lipsum()}</p>
-					<p slot=panel class=lipsum>${lipsum()}</p>
-					<p slot=panel class=lipsum>${lipsum()}</p>
-				`)
-				.render(),
-			style: css`
-				.content {
-					justify-content: start;
-					p { margin-top: 0.5em; }
-				}
-			`,
-		}),
+	return [
+		buttonShowcase(),
+		copyShowcase(),
+		drawerShowcase(),
+		tabsShowcase(),
 	]
-
-	return html`
-		<div class=themes>
-			<span>theme</span>
-			${auraViews.ShinyTabs
-				.props(tabControl)
-				.children(viewsets.map(viewset => html`
-					<button>${viewset.label}</button>
-				`))
-				.render()}
-		</div>
-
-		${demonstrations}
-	`
 })})
 
-console.log("✨shiny")
+console.log("✨shiny✨")
 

package/s/demo/demo.css

@@ -6,6 +6,7 @@
 		--bg: #333;
 		--color: #fff;
 		--prime: #d068ff;
+		--code: #3f1;
 		--link: cyan;
 
 		--selection: white;

package/s/demo/lipsum.ts

@@ -0,0 +1,6 @@
+
+import {makeLipsumDispenser} from "./utils/lipsum.js"
+
+export const lipsumDispenser = makeLipsumDispenser()
+export const lipsum = () => lipsumDispenser.takeFirst()
+

package/s/demo/utils/lipsum.ts

@@ -10,7 +10,7 @@ export const makeLipsumDispenser = () => new Dispenser(() => [
 
 	`lorem arch dolor sit amet, pacman -Syu elit rolling release tempor breakage. i3-gaps commodo tiling, bspwm magna culpa xinitrc. alias neovim configs in .dotfiles forest, r/unixporn veniam rice showcase perspiciatis.`,
 
-	`lorem authlocal dolor sit amet, user-sovereign identity elit, cryptographic tempor signatures. ed25519 magna keypair culpa, elliptic perspiciatis handshake ut zero-knowledge proof. decentralized login elit mnemonic seed tempor recovery phrase. DID magna alias culpa federation, lorem oauth2 perspiciatis antiquated.`,
+	`lorem authlocal dolor sit amet, user-sovereign identity elit, cryptographic tempor signatures. ed25519 magna keypair culpa, elliptic perspiciatis handshake ut zero-knowledge proof. decentralized login elit mnemonic seed tempor recovery phrase. did magna alias culpa federation, lorem oauth2 perspiciatis antiquated.`,
 
 	`lorem webgpu dolor sit amet, fragment shader elit vertex buffer tempor pipeline; bindgroup magna sampler culpa, wgsl perspiciatis alignment bug. compute pass workgroup barrier magna, mipmap cascade culpa drawcall instancing overflow. spir-v dolor sit wasm elit, canvas context lost magna; fallback webgl2 perspiciatis, polyfill slowpath dolore, glsl antique culpa extension hell 144hz tearing. command encoder perspiciatis out-of-memory, chromium nightly.`,
 

package/s/demo/views/demonstration/style.css.ts

@@ -53,6 +53,14 @@ p.lipsum {
 		color: var(--prime);
 	}
 
+	[view="shiny-tabs"] {
+		gap: 0.5em;
+		&::part(tabs) {
+			font-size: 0.8em;
+			opacity: 0.8;
+		}
+	}
+
 	.codes {
 		display: flex;
 		flex-direction: column;

package/s/demo/views/demonstration/view.ts

@@ -3,7 +3,7 @@ import {untab} from "@e280/stz"
 import {Content, view} from "@e280/sly"
 import {CSSResultGroup, html} from "lit"
 import styleCss from "./style.css.js"
-import {auraViews} from "../../aura-views.js"
+import {auraViews} from "../../viewsets.js"
 import {foundationCss} from "../../../components/foundation.css.js"
 
 export const Demonstration = view(use => (options: {
@@ -14,7 +14,7 @@ export const Demonstration = view(use => (options: {
 		style: CSSResultGroup
 	}) => {
 
-	use.name(options.name)
+	use.name(`demo-${options.name}`)
 	use.styles(foundationCss, styleCss, options.style)
 
 	function codeblock(heading: string, code: string) {
@@ -32,14 +32,18 @@ export const Demonstration = view(use => (options: {
 
 	return html`
 		<div class=meta>
-			<h2>✨ ${options.name}</h2>
+			<h2>✨ shiny-${options.name}</h2>
 			<div class=explain>${options.explain}</div>
 			${auraViews.ShinyTabs
 				.props()
 				.children(html`
-					${options.snippets.map(([label]) => html`
-						<button>${label.button}</button>
-					`)}
+					${options.snippets.map(([label]) => (
+						auraViews.ShinyButton
+							.props()
+							.attr("plain")
+							.children(label.button)
+							.render()
+					))}
 					${options.snippets.map(([label, code]) => codeblock(label.text, code))}
 				`)
 				.render()}

package/s/demo/views/exhibit/style.css.ts

@@ -0,0 +1,82 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+:host {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5em;
+
+	> * {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+}
+
+.meta {
+	display: flex;
+	flex-direction: column;
+	gap: 1em;
+}
+
+.snippet {
+	flex: 1 0 auto;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5em;
+	padding: 0.5em;
+
+	background: #0002;
+	box-shadow: inset 0.2em 0.3em 2em #0004;
+	border-radius: 0.5em;
+
+	> header {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+
+		[view="shiny-copy"] { font-size: 1.5em; }
+		[view="shiny-tabs"] {
+			flex: 1 1 auto;
+			font-size: 0.8em;
+			color: color-mix(in oklab, transparent, currentColor 50%);
+		}
+	}
+
+	> code {
+		display: block;
+
+		white-space: pre;
+		text-wrap: wrap;
+		tab-size: 2;
+		word-break: keep-all;
+		overflow: auto;
+
+		color: var(--code);
+		font-size: 0.8em;
+		font-family: monospace;
+	}
+}
+
+.box {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	align-content: center;
+
+	gap: 0.5em;
+	padding: 1em;
+
+	border-radius: 0.5rem;
+	border: 1px dashed color-mix(in oklab, transparent, currentColor 30%);
+
+	p.lipsum {
+		opacity: 0.7;
+		font-family: serif;
+		font-style: italic;
+	}
+}
+
+}`
+

package/s/demo/views/exhibit/view.ts

@@ -0,0 +1,59 @@
+
+import {untab} from "@e280/stz"
+import {Content, view} from "@e280/sly"
+import {CSSResultGroup, html} from "lit"
+
+import styleCss from "./style.css.js"
+import {auraViews} from "../../viewsets.js"
+import {ShinyViews} from "../../../shiny.js"
+import {TabControl} from "../../../components/tabs/control.js"
+import {foundationCss} from "../../../components/foundation.css.js"
+
+export type ExhibitParams = {
+	label: string
+	explain: Content
+	snippets: {label: string, code: string}[]
+	style: CSSResultGroup
+	presentation: (views: ShinyViews) => Content
+}
+
+export const Exhibit = view(use => (
+		exhibit: ExhibitParams,
+		views: ShinyViews,
+		showcaseStyle: CSSResultGroup,
+	) => {
+
+	use.name(`exhibit-${exhibit.label}`)
+	use.styles(foundationCss, styleCss, showcaseStyle, exhibit.style)
+
+	const snippetControl = use.once(() => new TabControl())
+	const snippet = exhibit.snippets.at(snippetControl.index)
+	const code = snippet ? untab(snippet.code).trim() : ""
+
+	return html`
+		<div class=meta>
+			${exhibit.explain}
+
+			<div class=snippet>
+				<header>
+					${auraViews.ShinyTabs.props(snippetControl)
+						.children(exhibit.snippets.map(s =>
+							auraViews.ShinyButton
+								.props()
+								.attr("plain")
+								.children(s.label)
+								.render()
+						))
+						.render()}
+					${auraViews.ShinyCopy(code)}
+				</header>
+				<code>${code}</code>
+			</div>
+		</div>
+
+		<div class=box>
+			${exhibit.presentation(views)}
+		</div>
+	`
+})
+

package/s/demo/views/showcase/style.css.ts

@@ -0,0 +1,50 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+:host {
+	position: relative;
+
+	display: flex;
+	flex-direction: column;
+
+	padding: 1em;
+	border-radius: 0.5em;
+	gap: 1em;
+
+	background: linear-gradient(to right top, #252dd985, #aa6affbd);
+	backdrop-filter: blur(0.5em);
+
+	box-shadow: 0 0 5em #5d1fadaa;
+	border-top: 2px solid #fff4;
+
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		inset: 0;
+		border-radius: 0.5em;
+		background: #0007;
+		width: calc(100% - 0.3em);
+		height: calc(100% - 0.3em);
+		margin: auto;
+		z-index: 0;
+	}
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+}
+
+header {
+	display: flex;
+
+	h2 {
+		flex: 1 1 auto;
+		color: var(--prime);
+	}
+}
+
+}`
+

package/s/demo/views/showcase/view.ts

@@ -0,0 +1,54 @@
+
+import {view} from "@e280/sly"
+import {CSSResultGroup, html} from "lit"
+import styleCss from "./style.css.js"
+import {auraViews, viewsets} from "../../viewsets.js"
+import {Exhibit, ExhibitParams} from "../exhibit/view.js"
+import {TabControl} from "../../../components/tabs/control.js"
+import {foundationCss} from "../../../components/foundation.css.js"
+
+export const Showcase = view(use => (options: {
+		name: string
+		style: CSSResultGroup
+		exhibits: ExhibitParams[]
+	}) => {
+
+	use.name(`showcase-${options.name}`)
+	use.styles(foundationCss, styleCss)
+
+	const exhibitTabControl = use.once(() => new TabControl())
+	const themeTabControl = use.once(() => new TabControl())
+
+	const exhibitViews = viewsets.at(themeTabControl.index)![1]
+	const exhibit = options.exhibits.at(exhibitTabControl.index)!
+
+	return html`
+		<header>
+			<h2>✨shiny-${options.name}✨</h2>
+			<nav>
+				${auraViews.ShinyTabs
+					.props(exhibitTabControl)
+					.children(options.exhibits.map(p =>
+						auraViews.ShinyButton
+							.props()
+							.attr("sad")
+							.children(p.label)
+							.render()
+					))
+					.render()}
+				${auraViews.ShinyTabs
+					.props(themeTabControl)
+					.children(viewsets.map(([theme]) =>
+						auraViews.ShinyButton
+							.props()
+							.children(theme)
+							.render()
+					))
+					.render()}
+			</nav>
+		</header>
+
+		${Exhibit(exhibit, exhibitViews, options.style)}
+	`
+})
+

package/s/demo/viewsets.ts

@@ -0,0 +1,12 @@
+
+import {aura} from "../themes/aura.css.js"
+import {plain} from "../themes/plain.css.js"
+import {shiny, ShinyViews} from "../shiny.js"
+
+export const auraViews = shiny({theme: aura}).views
+
+export const viewsets: [label: string, ShinyViews][] = [
+	["aura", auraViews],
+	["plain", shiny({theme: plain}).views],
+]
+