[pa] onboarding

a-type · Nov 12, 2024 · 6367298 · 6367298
1 parent 58bb968
commit 6367298
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 72 deletions.
diff --git a/apps/palette/web/src/components/projects/ColorBreakdown.tsx b/apps/palette/web/src/components/projects/ColorBreakdown.tsx
@@ -2,6 +2,8 @@
 import { Color } from '@dynamize/color-utilities';
 import { clsx } from '@a-type/ui';
 import { useBoundsCssVars } from '@a-type/ui/hooks';
+import { OnboardingTooltip } from '@biscuits/client';
+import { basicsOnboarding } from '@/onboarding/basics.js';
 
 export interface ColorBreakdownProps {
 	color: { r: number; g: number; b: number };
@@ -25,36 +27,42 @@ export function ColorBreakdown({ color, className }: ColorBreakdownProps) {
 	const hsl = convertible.hsl;
 
 	return (
-		<div className={clsx('flex flex-row gap-3 justify-around', className)}>
-			<PieChart
-				segments={[
-					{
-						label: 'R',
-						color: red,
-						percent: (100 * ryb.red) / rybTotal,
-					},
-					{
-						label: 'Y',
-						color: yellow,
-						percent: (100 * ryb.yellow) / rybTotal,
-					},
-					{
-						label: 'B',
-						color: blue,
-						percent: (100 * ryb.blue) / rybTotal,
-					},
-				]}
-			/>
-			<div className="h-100% w-32px flex-shrink-0 bg-gradient-to-b from-#000000 to-#ffffff relative">
-				<div
-					className="w-full h-5px absolute"
-					style={{
-						top: `${hsl.lightness}%`,
-						background: hsl.lightness > 50 ? 'black' : 'white',
-					}}
+		<OnboardingTooltip
+			onboarding={basicsOnboarding}
+			step="color"
+			content="This section shows the selected color and mixing helpers."
+		>
+			<div className={clsx('flex flex-row gap-3 justify-around', className)}>
+				<PieChart
+					segments={[
+						{
+							label: 'R',
+							color: red,
+							percent: (100 * ryb.red) / rybTotal,
+						},
+						{
+							label: 'Y',
+							color: yellow,
+							percent: (100 * ryb.yellow) / rybTotal,
+						},
+						{
+							label: 'B',
+							color: blue,
+							percent: (100 * ryb.blue) / rybTotal,
+						},
+					]}
 				/>
+				<div className="h-100% w-32px flex-shrink-0 bg-gradient-to-b from-#000000 to-#ffffff relative">
+					<div
+						className="w-full h-5px absolute"
+						style={{
+							top: `${hsl.lightness}%`,
+							background: hsl.lightness > 50 ? 'black' : 'white',
+						}}
+					/>
+				</div>
 			</div>
-		</div>
+		</OnboardingTooltip>
 	);
 }
 

diff --git a/apps/palette/web/src/components/projects/ProjectCanvas.tsx b/apps/palette/web/src/components/projects/ProjectCanvas.tsx
@@ -22,6 +22,8 @@ import {
 import { ref, useSnapshot } from 'valtio';
 import { toolState } from './state.js';
 import { preventDefault } from '@a-type/utils';
+import { OnboardingTooltip } from '@biscuits/client';
+import { basicsOnboarding } from '@/onboarding/basics.js';
 
 export interface ProjectCanvasProps {
 	project: Project;
@@ -41,18 +43,24 @@ export function ProjectCanvas({ project, className }: ProjectCanvasProps) {
 	});
 
 	return (
-		<div
-			className={clsx(
-				'relative flex flex-col w-full sm:(w-auto h-full)',
-				className,
-			)}
+		<OnboardingTooltip
+			onboarding={basicsOnboarding}
+			step="bubbles"
+			content="Tap and drag to pick a color. Pinch to zoom and pan."
 		>
-			<ViewportRoot viewport={viewport} className="flex-grow-1 h-auto">
-				<ColorPickerCanvas image={image} />
-				{showBubbles && !activelyPicking && <Bubbles colors={colors} />}
-				<PickingBubble />
-			</ViewportRoot>
-		</div>
+			<div
+				className={clsx(
+					'relative flex flex-col w-full sm:(w-auto h-full)',
+					className,
+				)}
+			>
+				<ViewportRoot viewport={viewport} className="flex-grow-1 h-auto">
+					<ColorPickerCanvas image={image} />
+					{showBubbles && !activelyPicking && <Bubbles colors={colors} />}
+					<PickingBubble />
+				</ViewportRoot>
+			</div>
+		</OnboardingTooltip>
 	);
 }
 

diff --git a/apps/palette/web/src/components/projects/ProjectPalette.tsx b/apps/palette/web/src/components/projects/ProjectPalette.tsx
@@ -5,6 +5,8 @@ import { useColorSelection, useSort } from './hooks.js';
 import { H3 } from '@a-type/ui/components/typography';
 // @ts-ignore
 import { Color } from '@dynamize/color-utilities';
+import { OnboardingTooltip } from '@biscuits/client';
+import { basicsOnboarding } from '@/onboarding/basics.js';
 
 export interface ProjectPaletteProps {
 	project: Project;
@@ -36,7 +38,13 @@ export function ProjectPalette({ project, className }: ProjectPaletteProps) {
 
 	return (
 		<div className={clsx('flex flex-col items-stretch m-1', className)}>
-			<H3>Saved Colors</H3>
+			<OnboardingTooltip
+				onboarding={basicsOnboarding}
+				step="palette"
+				content="Tap 'Save' on a color to add it to your palette"
+			>
+				<H3>Saved Colors</H3>
+			</OnboardingTooltip>
 			{!sorted.length && (
 				<span className="text-xs text-gray-5 italic m-auto">
 					Click the image to select colors

diff --git a/apps/palette/web/src/components/projects/ProjectsList.tsx b/apps/palette/web/src/components/projects/ProjectsList.tsx
@@ -1,46 +1,46 @@
 import { hooks } from '@/hooks.js';
 import { Project } from '@palette.biscuits/verdant';
 import {
-  CardRoot,
-  CardMain,
-  CardGrid,
-  CardImage,
+	CardRoot,
+	CardMain,
+	CardGrid,
+	CardImage,
 } from '@a-type/ui/components/card';
 import { InfiniteLoadTrigger } from '@a-type/ui/components/infiniteLoadTrigger';
 import { Link } from '@verdant-web/react-router';
 
 export interface ProjectsListProps {}
 
 export function ProjectsList({}: ProjectsListProps) {
-  const [items, { hasMore, loadMore }] = hooks.useAllProjectsInfinite({
-    index: {
-      where: 'createdAt',
-      order: 'desc',
-    },
-    pageSize: 20,
-  });
+	const [items, { hasMore, loadMore }] = hooks.useAllProjectsInfinite({
+		index: {
+			where: 'createdAt',
+			order: 'desc',
+		},
+		pageSize: 20,
+	});
 
-  return (
-    <>
-      <CardGrid>
-        {items.map((item, i) => (
-          <ProjectsListItem item={item} key={i} />
-        ))}
-      </CardGrid>
-      {hasMore && <InfiniteLoadTrigger onVisible={loadMore} />}
-    </>
-  );
+	return (
+		<>
+			<CardGrid>
+				{items.map((item, i) => (
+					<ProjectsListItem item={item} key={i} />
+				))}
+			</CardGrid>
+			{hasMore && <InfiniteLoadTrigger onVisible={loadMore} />}
+		</>
+	);
 }
 
 function ProjectsListItem({ item }: { item: Project }) {
-  const { id, image } = hooks.useWatch(item);
-  hooks.useWatch(image);
-  return (
-    <CardRoot className="h-240px">
-      <CardMain asChild>
-        <Link to={`/projects/${id}`} />
-      </CardMain>
-      <CardImage asChild>{image.url && <img src={image.url} />}</CardImage>
-    </CardRoot>
-  );
+	const { id, image } = hooks.useWatch(item);
+	hooks.useWatch(image);
+	return (
+		<CardRoot className="h-240px">
+			<CardMain asChild>
+				<Link to={`/projects/${id}`} />
+			</CardMain>
+			<CardImage asChild>{image.url && <img src={image.url} />}</CardImage>
+		</CardRoot>
+	);
 }
diff --git a/apps/palette/web/src/onboarding/basics.ts b/apps/palette/web/src/onboarding/basics.ts
@@ -0,0 +1,7 @@
+import { createOnboarding } from '@biscuits/client';
+
+export const basicsOnboarding = createOnboarding(
+	'basics',
+	['intro', 'bubbles', 'color', 'palette'],
+	true,
+);
diff --git a/apps/palette/web/src/pages/HomePage.tsx b/apps/palette/web/src/pages/HomePage.tsx
@@ -1,7 +1,8 @@
 import { CreateProject } from '@/components/projects/CreateProject.jsx';
 import { ProjectsList } from '@/components/projects/ProjectsList.jsx';
+import { basicsOnboarding } from '@/onboarding/basics.js';
 import { PageContent, PageFixedArea } from '@a-type/ui/components/layouts';
-import { usePageTitle, UserMenu } from '@biscuits/client';
+import { OnboardingBanner, usePageTitle, UserMenu } from '@biscuits/client';
 
 export interface HomePageProps {}
 
@@ -15,6 +16,14 @@ export function HomePage({}: HomePageProps) {
 					<UserMenu className="ml-auto" />
 				</div>
 			</PageFixedArea>
+			<OnboardingBanner
+				onboarding={basicsOnboarding}
+				step="intro"
+				className="max-w-400px mx-auto mb-4"
+			>
+				Palette is a painting tool which helps you analyze colors in reference
+				photos. Add an image to start a new project.
+			</OnboardingBanner>
 			<ProjectsList />
 			<CreateProject />
 		</PageContent>