@e280/shiny 0.1.0-11 → 0.1.0-12

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`
@@ -48,268 +33,15 @@ dom.register({ShinyDemo: view.component(use => {
 		}
 	`)
 
-	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: "button",
-			explain: html`
-				<p>clicky-clacky pressy button.</p>
-			`,
-			snippets: [
-				[labels.html, `
-					<shiny-button>hello</shiny-button>
-				`],
-				[labels.view, `
-					ShinyButton
-						.props()
-						.children("hello")
-						.render()
-				`],
-				[labels.css, `
-					shiny-button {
-						font-size: 1em;
-						--happy: #0fa;
-						--angry: #f50;
-						--lame: #8888;
-						--inactive-opacity: 0.5;
-					}
-				`],
-			],
-			content: [
-				views.ShinyButton.props()
-					.children("button")
-					.render(),
-				views.ShinyButton.props()
-					.attr("gradient", true)
-					.children("gradient")
-					.render(),
-				views.ShinyButton.props()
-					.attr("angry", true)
-					.attr("gradient", true)
-					.children("angry")
-					.render(),
-				views.ShinyButton.props()
-					.attr("happy", true)
-					.attr("gradient", true)
-					.children("happy")
-					.render(),
-				views.ShinyButton.props()
-					.attr("zesty", true)
-					.attr("gradient", true)
-					.children("zesty")
-					.render(),
-				views.ShinyButton.props()
-					.attr("sad", true)
-					.attr("gradient", true)
-					.children("sad")
-					.render(),
-				views.ShinyButton.props()
-					.attr("quirky", true)
-					.attr("gradient", true)
-					.children("quirky")
-					.render(),
-				views.ShinyButton.props()
-					.attr("plain", true)
-					.children("plain")
-					.render(),
-			],
-			style: css`
-				.content {
-					flex-direction: row;
-					flex-wrap: wrap;
-					align-content: center;
-					gap: 0.5em;
-
-					sly-view {
-						font-size: 1.2em;
-					}
-				}
-			`,
-		}),
-
-		Demonstration({
-			name: "tabs",
-			explain: html`
-				<p>button bar. panels optional.</p>
-			`,
-			snippets: [
-				[labels.html, `
-					<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>
-				`],
-				[labels.view, `
-					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()
-				`],
-				[labels.css, `
-					shiny-tabs {
-						&::part(tabs) {}
-						&::part(panels) {}
-						> shiny-button {}
-					}
-				`],
-			],
-			content: 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>${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; }
-				}
-			`,
-		}),
+	lipsumDispenser.takeAll()
 
-		Demonstration({
-			name: "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: "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;
-
-					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; }
-					}
-				}
-			`,
-		}),
+	return [
+		buttonShowcase(),
+		copyShowcase(),
+		drawerShowcase(),
+		tabsShowcase(),
 	]
-
-	return html`
-		<div class=themes>
-			<span>theme</span>
-			${auraViews.ShinyTabs
-				.props(tabControl)
-				.children(viewsets.map(viewset => html`
-					${auraViews.ShinyButton.props().children(viewset.label).render()}
-				`))
-				.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/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: {
@@ -40,7 +40,7 @@ export const Demonstration = view(use => (options: {
 					${options.snippets.map(([label]) => (
 						auraViews.ShinyButton
 							.props()
-							.attr("plain", true)
+							.attr("plain")
 							.children(label.button)
 							.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],
+]
+

package/s/index.html.ts

@@ -1,23 +1,20 @@
 
 import {ssg, html} from "@e280/scute"
 
-const title = "shiny"
-const description = "✨ web ui components"
-const domain = "shiny.e280.org"
 const favicon = "/assets/favicon.png"
 
 export default ssg.page(import.meta.url, async orb => ({
-	title,
+	title: "shiny",
 	js: "demo/demo.bundle.min.js",
 	css: "demo/demo.css",
 	favicon,
 	dark: true,
 	socialCard: {
 		themeColor: "#d068ff",
-		title,
-		description,
 		siteName: "@e280/shiny",
-		image: "https://" + domain + favicon,
+		title: "✨shiny✨",
+		description: "web ui components",
+		image: "https://shiny.e280.org" + favicon,
 	},
 
 	body: html`

package/s/themes/aura.css.ts

@@ -57,10 +57,10 @@ export const aura = css`@layer overlay {
 	}
 }
 
-:host([view="shiny-drawer"]) {
+:host([view="shiny-drawer"]:not([plain])) {
 	display: block;
 
-	&::part(tray) {
+	&::part(slate) {
 		padding: 1em;
 		background: linear-gradient(
 			to top right,
@@ -71,13 +71,13 @@ export const aura = css`@layer overlay {
 }
 
 :host([view="shiny-drawer"]:state(left)) {
-	&::part(tray) {
+	&::part(slate) {
 		border-bottom-right-radius: 0.5em;
 	}
 }
 
 :host([view="shiny-drawer"]:state(right)) {
-	&::part(tray) {
+	&::part(slate) {
 		border-bottom-left-radius: 0.5em;
 	}
 }

package/s/themes/infra/css-vars.ts

@@ -5,7 +5,6 @@ export type CssVars = {
 	"bg": string
 	"alpha": string
 	"lame": string
-	"inactive-opacity": string
 
 	// normative color vibes
 	"angry": string // red
@@ -14,13 +13,16 @@ export type CssVars = {
 	"calm": string // cyan
 	"sad": string // blue
 	"quirky": string // magenta
+
+	"inactive-opacity": string
+	"anim-duration": string
 }
 
 export function defaultCssVars(): CssVars {
 	return {
 		"bg": "#111",
 		"alpha": "#def",
-		"inactive-opacity": "0.5",
+
 		"lame": "#8888",
 		"angry": "#f50",
 		"zesty": "#cf0",
@@ -28,6 +30,9 @@ export function defaultCssVars(): CssVars {
 		"calm": "#0af",
 		"sad": "#74f",
 		"quirky": "#f49",
+
+		"inactive-opacity": "0.5",
+		"anim-duration": "300ms",
 	}
 }