feat: radioset (#82)

- `Radioset` component - `Main`, `Nav`, `Header`, `Footer`, `Aside` components - complete `Button`/`ButtonAnchor` appearances from Material 3 - rename `ButtonAnchor` to `AnchorButton` - extract color-scheme from official Material 3 values - updated website with default color-scheme and latest components
ninja · Dec 24, 2021 · 6e17566 · 6e17566
1 parent 4ca14d9
commit 6e17566
Show file tree

Hide file tree

Showing 61 changed files with 3,218 additions and 856 deletions.
diff --git a/.vscode/ninjakit.code-workspace b/.vscode/ninjakit.code-workspace
@@ -15,7 +15,6 @@
 			"**/.git": true,
 			"build": true,
 			"coverage": true,
-			"dist": true,
 			"node_modules": true
 		}
 	}

diff --git a/package.json b/package.json
@@ -94,13 +94,14 @@
 	"sideEffects": false,
 	"scripts": {
 		"build": "run-p build:**",
-		"build:head": "tsc --project src/lib/head",
+		"build:color-scheme": "tsc --project tsconfig-color-scheme.json",
 		"build:lib": "vite build --mode=lib",
 		"build:types": "tsc --emitDeclarationOnly --project tsconfig-types.json",
 		"check": "run-p check:**",
 		"check:config": "prettier --check .",
 		"check:scripts": "eslint --ext .ts,.tsx .",
 		"check:types": "tsc --noEmit",
+		"extract:color-scheme": "node src/lib/color-scheme/extract.mjs",
 		"fix": "run-s fix:scripts fix:config",
 		"fix:config": "prettier --write .",
 		"fix:scripts": "eslint --ext .ts,.tsx --fix .",

diff --git a/src/docs/app.tsx b/src/docs/app.tsx
@@ -1,18 +1,20 @@
 import { init } from "@sentry/react";
 import { BrowserTracing } from "@sentry/tracing";
 import {
-	ButtonAnchor,
-	Grid,
-	GridArticle,
-	GridFill,
-	GridHeader,
-	GridNav,
+	AnchorButton,
+	Article,
+	Aside,
+	FloatingActionButton,
+	Footer,
+	Header,
+	Main,
+	Nav,
 } from "ninjakit";
 import { StrictMode } from "react";
 import { render } from "react-dom";
 import { FaToriiGate } from "react-icons/fa";
 import { GiKatana, GiStarShuriken } from "react-icons/gi";
-import { MdSettings } from "react-icons/md";
+import { MdEdit } from "react-icons/md";
 import { SiGithub, SiNetlify, SiNpm } from "react-icons/si";
 import {
 	BrowserRouter,
@@ -26,102 +28,103 @@ import {
 import { Icon } from "./components/icon";
 import { Logo } from "./components/logo";
 import { ReloadPrompt } from "./components/reload-prompt";
-import { Components } from "./pages/components";
-import { Dojo } from "./pages/dojo";
-import { Hooks } from "./pages/hooks";
-import { Settings } from "./pages/settings";
+import { ColorScheme, Examples } from "./pages/examples";
+import { Overview } from "./pages/overview";
+import { Sandbox } from "./pages/sandbox";
 
 function App() {
-	const resolved = useResolvedPath("/");
-	const home = useMatch({ end: true, path: resolved.pathname });
+	const home = useMatch({ end: true, path: useResolvedPath("/").pathname });
+	const examples = useMatch({
+		end: true,
+		path: useResolvedPath("/examples").pathname,
+	});
 	const year = new Date().getFullYear();
 
 	return (
-		<Grid>
-			<GridHeader>
-				{!home && (
-					<ButtonAnchor appearance="text" href="/">
+		<Main>
+			<Header>
+				{home ? (
+					<section />
+				) : (
+					<AnchorButton appearance="text" href="/">
 						<Icon />
 						<Logo />
-					</ButtonAnchor>
+					</AnchorButton>
 				)}
-				<GridFill />
-				<ButtonAnchor
-					appearance="text"
-					href="https://www.npmjs.com/package/ninjakit"
-					target="_blank"
-				>
-					<SiNpm />
-					package
-				</ButtonAnchor>
-				<ButtonAnchor
-					appearance="text"
-					href="https://github.com/ninja/ninjakit"
-					target="_blank"
-				>
-					<SiGithub />
-					repository
-				</ButtonAnchor>
-			</GridHeader>
-			<GridNav>
+				<section>
+					<AnchorButton
+						appearance="text"
+						href="https://www.npmjs.com/package/ninjakit"
+						target="_blank"
+					>
+						<SiNpm />
+						npm
+					</AnchorButton>
+					<AnchorButton
+						appearance="text"
+						href="https://github.com/ninja/ninjakit"
+						target="_blank"
+					>
+						<SiGithub />
+						git
+					</AnchorButton>
+				</section>
+			</Header>
+			<Nav>
 				<NavLink to="/">
-					<span>
-						<FaToriiGate />
-					</span>
-					<span>Home</span>
-				</NavLink>
-				<NavLink to="/components">
-					<span>
-						<GiKatana />
-					</span>
-					<span>Components</span>
+					<FaToriiGate />
+					Overview
 				</NavLink>
-				<NavLink to="/hooks">
-					<span>
-						<GiStarShuriken />
-					</span>
-					<span>Hooks</span>
+				<NavLink to="/examples">
+					<GiKatana />
+					Examples
 				</NavLink>
-				<NavLink to="/settings">
-					<span>
-						<MdSettings />
-					</span>
-					<span>Settings</span>
+				<NavLink to="/sandbox">
+					<GiStarShuriken />
+					Sandbox
 				</NavLink>
-			</GridNav>
-			<GridArticle>
-				<main>
+			</Nav>
+			<Article>
+				<Article>
 					<Routes>
-						<Route element={<Dojo />} path="/" />
-						<Route element={<Components />} path="components" />
-						<Route element={<Hooks />} path="hooks" />
-						<Route element={<Settings />} path="settings" />
+						<Route element={<Overview />} path="/" />
+						<Route element={<Examples />} path="examples" />
+						<Route element={<Sandbox />} path="sandbox" />
 					</Routes>
-				</main>
-				<div />
-				<footer>
-					<span>&copy; {year} Jamie Hoover</span>
-					{home ? (
-						<ButtonAnchor
-							appearance="text"
-							href="https://github.com/ninja/ninjakit/blob/master/LICENSE.md"
-							target="_blank"
-						>
-							Apache 2.0 licensed
-						</ButtonAnchor>
-					) : (
-						<ButtonAnchor
-							appearance="text"
-							href="https://www.netlify.com"
-							target="_blank"
-						>
-							<SiNetlify />
-							deploys by netlify
-						</ButtonAnchor>
+					<Footer>
+						<section>&copy; {year} Jamie Hoover</section>
+						{home ? (
+							<AnchorButton
+								appearance="text"
+								href="https://github.com/ninja/ninjakit/blob/master/LICENSE.md"
+								target="_blank"
+							>
+								Apache 2.0 licensed
+							</AnchorButton>
+						) : (
+							<AnchorButton
+								appearance="text"
+								href="https://www.netlify.com"
+								target="_blank"
+							>
+								<SiNetlify />
+								deploys by netlify
+							</AnchorButton>
+						)}
+					</Footer>
+					{examples && (
+						<FloatingActionButton>
+							<MdEdit />
+						</FloatingActionButton>
 					)}
-				</footer>
-			</GridArticle>
-		</Grid>
+				</Article>
+				{examples && (
+					<Aside>
+						<ColorScheme />
+					</Aside>
+				)}
+			</Article>
+		</Main>
 	);
 }
 

diff --git a/src/docs/components/logo.module.css b/src/docs/components/logo.module.css
@@ -5,6 +5,5 @@
 }
 
 .ninjaKit > strong {
-	color: #c00;
 	font-weight: 500;
 }
diff --git a/src/docs/head.ts b/src/docs/head.ts
@@ -1,5 +1,5 @@
 import "@fontsource/roboto/latin-400.css";
 import "@fontsource/roboto/latin-500.css";
-import "ninjakit/style.css";
+import "ninjakit/color-scheme/default.css";
 import "ninjakit/color-scheme";
 import "./style.css";
diff --git a/src/docs/pages/examples/anchor-button.tsx b/src/docs/pages/examples/anchor-button.tsx
@@ -0,0 +1,26 @@
+import { AnchorButton, Card } from "ninjakit";
+import { FunctionComponent } from "react";
+import { MdThumbUp } from "react-icons/md";
+
+export const AnchorButtonExamples: FunctionComponent = () => (
+	<Card appearance="elevated" title="AnchorButton">
+		<section>
+			<AnchorButton appearance="elevated" href="#">
+				Elevated
+			</AnchorButton>
+			<AnchorButton href="#">Filled</AnchorButton>
+			<AnchorButton href="#">
+				<MdThumbUp /> With Icon
+			</AnchorButton>
+			<AnchorButton href="#" target="_blank">
+				With External Target
+			</AnchorButton>
+			<AnchorButton appearance="outlined" href="#">
+				Outlined
+			</AnchorButton>
+			<AnchorButton appearance="text" href="#">
+				Text
+			</AnchorButton>
+		</section>
+	</Card>
+);
diff --git a/src/docs/pages/examples/button.tsx b/src/docs/pages/examples/button.tsx
@@ -0,0 +1,32 @@
+import { Button, Card } from "ninjakit";
+import { FunctionComponent } from "react";
+import { MdThumbUp } from "react-icons/md";
+
+export const ButtonExamples: FunctionComponent = () => (
+	<Card appearance="elevated" title="Button">
+		<section>
+			<Button appearance="elevated">Elevated</Button>
+			<Button>Filled</Button>
+			<Button>
+				<MdThumbUp /> With Icon
+			</Button>
+			<Button appearance="outlined">Outlined</Button>
+			<Button appearance="text">Text</Button>
+		</section>
+		<section>
+			<Button appearance="elevated" disabled>
+				Elevated
+			</Button>
+			<Button disabled>Filled</Button>
+			<Button disabled>
+				<MdThumbUp /> With Icon
+			</Button>
+			<Button appearance="outlined" disabled>
+				Outlined
+			</Button>
+			<Button appearance="text" disabled>
+				Text
+			</Button>
+		</section>
+	</Card>
+);
diff --git a/src/docs/pages/examples/color-scheme.tsx b/src/docs/pages/examples/color-scheme.tsx
@@ -0,0 +1,25 @@
+import { Card, useColorScheme } from "ninjakit";
+import { FunctionComponent } from "react";
+
+export const ColorScheme: FunctionComponent = () => {
+	const { colorScheme, setColorScheme } = useColorScheme();
+
+	return (
+		<Card>
+			<label htmlFor="color-scheme">Color Scheme</label>
+			<section>
+				<select
+					id="color-scheme"
+					onChange={(event) =>
+						setColorScheme(event.target.value as "light" | "dark" | "system")
+					}
+					value={colorScheme}
+				>
+					<option value="light">Light</option>
+					<option value="dark">Dark</option>
+					<option value="system">System default</option>
+				</select>
+			</section>
+		</Card>
+	);
+};
diff --git a/src/docs/pages/examples/index.tsx b/src/docs/pages/examples/index.tsx
@@ -0,0 +1,15 @@
+import { FunctionComponent } from "react";
+
+import { AnchorButtonExamples } from "./anchor-button";
+import { ButtonExamples } from "./button";
+import { RadiosetExamples } from "./radioset";
+
+export const Examples: FunctionComponent = () => (
+	<>
+		<ButtonExamples />
+		<AnchorButtonExamples />
+		<RadiosetExamples />
+	</>
+);
+
+export { ColorScheme } from "./color-scheme";
diff --git a/src/docs/pages/examples/radioset.tsx b/src/docs/pages/examples/radioset.tsx
@@ -0,0 +1,28 @@
+import { Card, Radioset } from "ninjakit";
+import { FunctionComponent } from "react";
+
+export const RadiosetExamples: FunctionComponent = () => (
+	<Card appearance="elevated">
+		<Radioset<"apple" | "banana" | "grapes">
+			defaultValue="banana"
+			label="Choose a fruit:"
+			name="test"
+			options={[
+				{
+					label: "🍎 Apple",
+					value: "apple",
+				},
+				{ label: "🍌 Banana", value: "banana" },
+				{
+					children: (
+						<span>
+							🍇 <span>Grapes</span>
+						</span>
+					),
+					label: "Grapes",
+					value: "grapes",
+				},
+			]}
+		/>
+	</Card>
+);
diff --git a/src/docs/pages/hooks/index.tsx b/src/docs/pages/hooks/index.tsx
diff --git a/src/docs/pages/dojo/dojo.module.css → src/docs/pages/overview/dojo.module.css b/src/docs/pages/dojo/dojo.module.css → src/docs/pages/overview/dojo.module.css
@@ -37,6 +37,10 @@
 	font-size: 8rem;
 }
 
+.card > section > h1 > strong {
+	color: #c00;
+}
+
 .card > section > h2 {
 	align-items: center;
 	display: flex;