@e280/shiny 0.1.0-15 → 0.1.0-16

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

@@ -2,15 +2,15 @@
 import {css} from "lit"
 export default css`@layer view {
 
-:host {
+section.showcase {
 	position: relative;
 
 	display: flex;
 	flex-direction: column;
 
 	padding: 1em;
-	border-radius: 0.5em;
-	gap: 1em;
+	border-radius: var(--rounded);
+	gap: var(--padding);
 
 	background: linear-gradient(to right top, #252dd985, #aa6affbd);
 	backdrop-filter: blur(0.5em);
@@ -19,29 +19,29 @@ export default css`@layer view {
 	border-top: 2px solid #fff4;
 
 	&::before {
+		z-index: 0;
 		content: "";
 		display: block;
 		position: absolute;
 		inset: 0;
-		border-radius: 0.5em;
-		background: #0007;
-		width: calc(100% - 0.3em);
-		height: calc(100% - 0.3em);
+		border-radius: var(--rounded);
+		background: #0006;
+		width: calc(100% - var(--padding));
+		height: calc(100% - var(--padding));
 		margin: auto;
-		z-index: 0;
 	}
 
 	> * {
-		position: relative;
 		z-index: 1;
+		position: relative;
 	}
 }
 
 header {
 	display: flex;
 	flex-wrap: wrap;
-	place-content: center center;
-	gap: 0.5em;
+	place-content: center;
+	gap: var(--padding);
 
 	h2 {
 		flex: 1 1 auto;
@@ -49,5 +49,36 @@ header {
 	}
 }
 
+.sides {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--padding);
+
+	> * {
+		flex: 1 1 0;
+	}
+
+}
+
+.codezone {
+	display: flex;
+	flex-direction: column;
+	gap: var(--padding);
+
+	> * {
+		flex: 1 1 auto;
+	}
+}
+
+.stage {
+	display: flex;
+	flex-direction: column;
+	justify-content: start;
+	align-items: center;
+	padding: calc(var(--padding) * 2) var(--padding);
+	border: 1px dashed color-mix(in oklch, transparent, currentColor 50%);
+	border-radius: var(--rounded);
+}
+
 }`
 

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

@@ -1,54 +1,50 @@
 
-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"
+import {css, html} from "lit"
+import {shadow, useCss, useName, useOnce} from "@e280/sly"
 
-export const Showcase = view(use => (options: {
-		name: string
-		style: CSSResultGroup
-		exhibits: ExhibitParams[]
-	}) => {
+import showcaseCss from "./style.css.js"
+import {Codebox} from "../codebox/view.js"
+import {Stylebox} from "../stylebox/view.js"
+import {Exhibit} from "../../parts/exhibit.js"
+import {themeCss} from "../../../theme/theme.css.js"
+import {ShinyTabs} from "../../../views/tabs/view.js"
+import {ShinyButton} from "../../../views/button/view.js"
+import {TabsControl} from "../../../views/tabs/control.js"
 
-	use.name(`showcase-${options.name}`)
-	use.styles(foundationCss, styleCss)
+export const Showcase = shadow((title: string, exhibits: Exhibit[]) => {
+	useName("showcase")
+	useCss(themeCss, showcaseCss)
 
-	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)!
+	const control = useOnce(() => new TabsControl())
+	const exhibit = exhibits.at(control.index)
 
 	return html`
-		<header>
-			<h2>✨shiny-${options.name}✨</h2>
-			${auraViews.ShinyTabs
-				.props(exhibitTabControl)
-				.attr("snug")
-				.children(options.exhibits.map(p =>
-					auraViews.ShinyButton
-						.props()
-						.attr("sad")
-						.children(p.label)
-						.render()
-				))
-				.render()}
-			${auraViews.ShinyTabs
-				.props(themeTabControl)
-				.attr("snug")
-				.children(viewsets.map(([theme]) =>
-					auraViews.ShinyButton
-						.props()
-						.children(theme)
-						.render()
-				))
-				.render()}
-		</header>
-
-		${Exhibit(exhibit, exhibitViews, options.style)}
+		<section class=showcase>
+			<header>
+				<h2>✨${title}✨</h2>
+				<nav>
+					${ShinyTabs.with({
+						props: [{control, snug: true}],
+						children: exhibits.map(exhibit => ShinyButton(exhibit.name)),
+					})}
+				</nav>
+			</header>
+
+			${exhibit && html`
+				<div class=explain>${exhibit.explain}</div>
+
+				<div class=sides>
+					<div class=codezone>
+						${Codebox("lit-html", "js", exhibit.js)}
+						${exhibit.css && Codebox("css", "css", exhibit.css.toString())}
+					</div>
+
+					<div class=stage>
+						${Stylebox(exhibit.styleboxCss, exhibit.css ?? css``, exhibit.render())}
+					</div>
+				</div>
+			`}
+		</section>
 	`
 })
 

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

@@ -0,0 +1,21 @@
+
+import {CSSResult, html, unsafeCSS} from "lit"
+import {Content, shadow, useCss, useName} from "@e280/sly"
+import {themeCss} from "../../../theme/theme.css.js"
+
+export const Stylebox = shadow((
+		styleboxCss: CSSResult,
+		styles: CSSResult,
+		content: Content,
+	) => {
+
+	useName("stylebox")
+	useCss(themeCss, styleboxCss, styles)
+
+	return html`
+		<style>${unsafeCSS(styleboxCss)}</style>
+		<style>${unsafeCSS(styles)}</style>
+		${content}
+	`
+})
+

package/s/index.html.ts

@@ -1,34 +1,47 @@
 
-import {ssg, html} from "@e280/scute"
+import {template, html, socialCard} from "@e280/scute"
+import {themeString} from "./theme/theme-string.js"
 
 const favicon = "/assets/favicon.png"
 
-export default ssg.page(import.meta.url, async orb => ({
-	title: "shiny",
-	js: "demo/demo.bundle.min.js",
-	css: "demo/demo.css",
-	favicon,
-	dark: true,
-	socialCard: {
-		themeColor: "#d068ff",
-		siteName: "@e280/shiny",
-		title: "✨shiny✨",
-		description: "web ui components",
-		image: "https://shiny.e280.org" + favicon,
-	},
-
-	body: html`
-		<h1>
-			<strong>✨shiny✨</strong>
-			<small>v${orb.packageVersion()}</small>
-		</h1>
-
-		<section>
-			<p>web ui components</p>
-			<p><a href="https://github.com/e280/shiny#readme">readme for installation</a></p>
-		</section>
-
-		<shiny-demo></shiny-demo>
-	`,
-}))
+export default template(import.meta.url, async orb => html`
+	<!doctype html>
+	<html>
+		<head>
+			<meta charset="utf-8"/>
+			<meta name="viewport" content="width=device-width,initial-scale=1"/>
+			<meta name="darkreader-lock"/>
+			<style>@layer base{html{background:#000;color:#aaa;}}</style>
+
+			<title>shiny</title>
+			<link rel="icon" href="${favicon}"/>
+			<script type="module" src="${orb.hashurl("demo/main.bundle.min.js")}"></script>
+
+			<style>${themeString}</style>
+			<style>${orb.inject("demo/main.css")}</style>
+			<style data-prism>${orb.inject("$/node_modules/prismjs/themes/prism-tomorrow.css")}</style>
+
+			${socialCard({
+				themeColor: "#d068ff",
+				siteName: "@e280/shiny",
+				title: "✨shiny✨",
+				description: "web ui library",
+				image: "https://shiny.e280.org" + favicon,
+			})}
+		</head>
+		<body>
+			<h1>
+				<strong>✨shiny✨</strong>
+				<small>v${orb.packageVersion()}</small>
+			</h1>
+
+			<section>
+				<p>e280's web ui library</p>
+				<p><a href="https://github.com/e280/shiny#readme">readme for installation</a></p>
+			</section>
+
+			<div class="gallery"></div>
+		</body>
+	</html>
+`)
 

package/s/index.ts

@@ -1,19 +1,3 @@
 
-export * from "./themes/index.js"
-
-export * from "./components/copy/component.js"
-
-export * from "./components/drawer/component.js"
-export * from "./components/drawer/control.js"
-
-export * from "./components/example/component.js"
-
-export * from "./components/tabs/component.js"
-export * from "./components/tabs/control.js"
-
-export * from "./components/foundation.css.js"
-export * from "./components/framework.js"
-export * from "./components/raw-components.js"
-
-export * from "./shiny.js"
+export * from "./views/copy/view.js"
 

package/s/test.ts

@@ -0,0 +1,5 @@
+
+import {run} from "@e280/science"
+
+await run({})
+

package/s/theme/parts/core.ts

@@ -0,0 +1,34 @@
+
+import {templateString as css} from "@e280/stz"
+export const coreString = css`@layer core {
+
+::selection {
+	color: var(--selection);
+	background-color: var(--selection-bg);
+}
+
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #444; border-radius: 1em; }
+::-webkit-scrollbar-thumb:hover { background: #666; }
+
+a {
+	color: var(--link);
+	text-decoration: none;
+
+	&:visited {
+		color: color-mix(in srgb, purple, var(--link) 70%);
+	}
+
+	&:hover {
+		color: color-mix(in srgb, white, var(--link) 90%);
+		text-decoration: underline;
+	}
+
+	&:active {
+		color: color-mix(in srgb, white, var(--link) 50%);
+	}
+}
+
+}`
+

package/s/theme/parts/reset.ts

@@ -0,0 +1,20 @@
+
+import {templateString as css} from "@e280/stz"
+export const resetString = css`@layer reset {
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+
+	scrollbar-width: thin;
+	scrollbar-color: #888 transparent;
+}
+
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #888; border-radius: 1em; }
+::-webkit-scrollbar-thumb:hover { background: #999; }
+
+}`
+

package/s/theme/parts/vars.ts

@@ -0,0 +1,41 @@
+
+import {templateString as css} from "@e280/stz"
+export const varsString = css`@layer vars {
+
+:is(:root, :host) {
+	${renderVars({
+		"bg": "#111",
+		"alpha": "#def",
+
+		"rounded": "0.5em",
+		"padding": "0.5em",
+
+		"prime": "#d068ff",
+		"code": "#3f1",
+		"link": "cyan",
+		"selection": "white",
+		"selection-bg": "#f70",
+
+		"lame": "#8888",
+		"angry": "#f50",
+		"zesty": "#cf0",
+		"happy": "#0fa",
+		"calm": "#0af",
+		"sad": "#74f",
+		"quirky": "#f49",
+
+		"inactive-opacity": "0.5",
+		"anim-duration": "300ms",
+	})}
+}
+
+}`
+
+function renderVar([name, value]: [string, string]) {
+	return `--${name}: var(--shiny-${name}, ${value});`
+}
+
+function renderVars(varsObject: Record<string, string>) {
+	return Object.entries(varsObject).map(renderVar).join("\n")
+}
+

package/s/theme/theme-string.ts

@@ -0,0 +1,15 @@
+
+import {templateString as css} from "@e280/stz"
+import {coreString} from "./parts/core.js"
+import {varsString} from "./parts/vars.js"
+import {resetString} from "./parts/reset.js"
+export const themeString = css`
+
+@layer vars, reset, core, underlay, view, overlay;
+
+${varsString}
+${resetString}
+${coreString}
+
+`
+

package/s/theme/theme.css.ts

@@ -0,0 +1,7 @@
+
+import {themeString} from "./theme-string.js"
+
+export const themeCss = new CSSStyleSheet()
+
+themeCss.replaceSync(themeString)
+

package/s/views/button/showcase.ts

@@ -0,0 +1,43 @@
+
+import {css} from "lit"
+import {ShinyButton} from "./view.js"
+import {exhibit} from "../../demo/parts/exhibit.js"
+import {Showcase} from "../../demo/views/showcase/view.js"
+
+export const buttonShowcase = () => Showcase("ShinyButton", [
+	exhibit({
+		name: "catalog",
+		explain: "click-to-copy button.",
+		render: () => [
+			ShinyButton("e280"),
+			ShinyButton("e280", {vibe: "happy"}),
+			ShinyButton("e280", {vibe: "sad"}),
+			ShinyButton("e280", {vibe: "angry"}),
+			ShinyButton("e280", {vibe: "zesty"}),
+			ShinyButton("e280", {vibe: "quirky"}),
+			ShinyButton("e280", {vibe: "lame"}),
+		],
+		styleboxCss: css`
+			:host {
+				font-size: 1.5em;
+				display: flex;
+				justify-content: center;
+				flex-wrap: wrap;
+				gap: calc(var(--padding) / 2);
+			}
+		`,
+		js: `
+			[
+			ShinyButton("e280"),
+			ShinyButton("e280", {vibe: "happy"}),
+			ShinyButton("e280", {vibe: "sad"}),
+			ShinyButton("e280", {vibe: "angry"}),
+			ShinyButton("e280", {vibe: "zesty"}),
+			ShinyButton("e280", {vibe: "quirky"}),
+			ShinyButton("e280", {vibe: "lame"}),
+			]
+		`,
+		css: undefined,
+	}),
+])
+

package/s/views/button/style.css.ts

@@ -0,0 +1,110 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+:host {
+	display: inline-flex;
+	width: max-content;
+	height: max-content;
+
+	cursor: pointer;
+	background: transparent;
+	user-select: none;
+
+	--button-padding: 0.3em 0.7em;
+	--button-color: var(--calm);
+}
+
+slot {
+	z-index: 1;
+	position: relative;
+	display: block;
+}
+
+button {
+	opacity: 0.8;
+	position: relative;
+
+	font: inherit;
+	cursor: inherit;
+	text-shadow: inherit;
+	font-weight: medium;
+
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+
+	width: 100%;
+	height: 100%;
+	padding: var(--button-padding);
+
+	border-radius: 2em;
+	background: var(--button-color);
+	text-shadow: 0.1em 0.1em 0.1em #0004;
+	box-shadow: 0.1em 0.2em 0.3em #0002;
+
+	color: white;
+	border: none;
+	background: linear-gradient(
+		to bottom right,
+		color-mix(in oklab, var(--button-color), white 40%),
+		color-mix(in oklab, var(--button-color), black 20%)
+	);
+
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: 0;
+		inset: 0.15em;
+		border-radius: inherit;
+		background: color-mix(in oklab, var(--button-color), #0004 50%);
+	}
+
+	&:not([disabled]):is(:hover, :focus-visible) { opacity: 1; }
+	&:not([disabled]):active { opacity: 0.6; }
+
+	&[data-vibe="lame"] { --button-color: var(--lame); }
+	&[data-vibe="angry"] { --button-color: var(--angry); }
+	&[data-vibe="zesty"] { --button-color: var(--zesty); }
+	&[data-vibe="happy"] { --button-color: var(--happy); }
+	&[data-vibe="calm"] { --button-color: var(--calm); }
+	&[data-vibe="sad"] { --button-color: var(--sad); }
+	&[data-vibe="quirky"] { --button-color: var(--quirky); }
+	&[data-vibe="tabbed"] { --button-color: var(--tabbed); }
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+
+	&[disabled] {
+		cursor: default;
+	}
+
+	&[hidden] {
+		display: none !important;
+	}
+}
+
+:host([data-tabbed]) > button {
+	opacity: 1;
+	filter: brightness(120%);
+}
+
+:host(:not([data-tabbed])) > button[disabled] {
+	--button-color: var(--lame);
+}
+
+:host([data-snug]:not([data-last])) > button {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+:host([data-snug]:not([data-first])) > button {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+}`
+

package/s/views/button/view.ts

@@ -0,0 +1,30 @@
+
+import {html} from "lit"
+import {Content, shadow, useCss, useName, useAttrs} from "@e280/sly"
+
+import styleCss from "./style.css.js"
+import {themeCss} from "../../theme/theme.css.js"
+
+export const ShinyButton = shadow((content?: Content, options: {
+		vibe?: "calm" | "lame" | "happy" | "sad" | "angry" | "zesty" | "quirky"
+	} = {}) => {
+
+	useName("shiny-button")
+	useCss(themeCss, styleCss)
+
+	const attrs = useAttrs({
+		hidden: Boolean,
+		disabled: Boolean,
+	})
+
+	return html`
+		<button
+			part=button
+			data-vibe="${options.vibe ?? "calm"}"
+			?disabled="${attrs.disabled}"
+			?hidden="${attrs.hidden}">
+			<slot>${content}</slot>
+		</button>
+	`
+})
+

package/s/views/copy/parts/copy-status.ts

@@ -0,0 +1,3 @@
+
+export type CopyStatus = "neutral" | "good" | "bad" | "invalid"
+

package/s/views/copy/parts/determine-base-status.ts

@@ -0,0 +1,7 @@
+
+export function determineBaseStatus(text: string | undefined) {
+	return text === undefined
+		? "invalid"
+		: "neutral"
+}
+

package/s/views/copy/parts/use-copier.ts

@@ -0,0 +1,20 @@
+
+import {debounce} from "@e280/stz"
+import {useOnce, useSignal} from "@e280/sly"
+
+import {CopyStatus} from "./copy-status.js"
+import {determineBaseStatus} from "./determine-base-status.js"
+
+export function useCopier(text: string | undefined, ms: number) {
+	const $status = useSignal<CopyStatus>(determineBaseStatus(text))
+
+	const reset = useOnce(() => debounce(ms, () => $status.set(determineBaseStatus(text))))
+
+	const flash = useOnce(() => async(status: CopyStatus) => {
+		await $status.set(status)
+		await reset()
+	})
+
+	return {reset, flash, status: $status()}
+}
+