13 |
18 |
14 | Onboarding Demo
15 |
17 | 14 | A tiny headless onboarding library with form validation, schema 15 | validation using Zod and persistance with unstorage. 16 |
17 |
18 |
21 |
25 |
28 |
29 |
30 |
16 | Thank you for checking out ONBOARDING_LIB
17 |
25 |
26 |
18 | Thank you for checking us out, and giving feedback. We really hope to
19 | make this a really solid onboarding library, so people don't have
20 | to write this same flimsy code over and over again. Please{" "}
21 |
27 | PS. Got production bugs?
28 |
36 |
29 | We're building Flytrap, a debugging tool that helps you find the
30 | root causes of your production bugs fast. You can{" "}
31 |
41 | Define your step completion handler
42 |
49 | 43 | To create conversion funnels for your onboarding flows, you can use 44 | the `onStepCompleted` prop as shown below. If the step has 45 | `validateFormFields` values, those will be validated upon calling the 46 | `next` function, after which the callback will be called. 47 |
48 |
16 | A small introduction to ONBOARDING_LIB
17 |
23 |
24 | 18 | ONBOARDING_LIB is a onboarding library for React apps, that makes it 19 | easy to implement fully accessible, customizable and persisted 20 | onboarding flows. 21 |
22 |
25 | Persistance using unstorage
26 |
40 |
41 |
27 | We use the great{" "}
28 |
42 | Forms using `react-hook-form`
43 |
53 |
54 |
44 | ONBOARDING_LIB is built on top of{" "}
45 |
55 | Walkthrough of ONBOARDING_LIB
56 |
62 | 57 | What follows behind the "Next" button is an onboarding flow, 58 | that will walk you though the ONBOARDING_LIB library, and show how we 59 | built this very onboarding. Very meta, right? 60 |
61 |
31 |
32 | Please help us improve `ONBOARDING_LIB` by answering some questions.
33 |
34 |
38 |
39 | 35 | This will be used with `react-hook-form`. 36 |
37 |
65 | Define your form data with Zod
66 |
70 | 67 | This will be used with `react-hook-form`. 68 |
69 |
73 | Create your onboarding instance
74 |
80 | 75 | This gives you the `Onboarding` wrapper component as well as a `Step` 76 | component with type-safety with `react-hook-form` forms, and the data 77 | in the onboarding. This will be used with `react-hook-form`. 78 |
79 |82 | As you can see, the above code is the code used by this very onboarding 83 | flow. Let's dive deeper into how to define steps. 84 |
85 |
38 |
80 |
101 |
102 | )
103 | }
104 |
--------------------------------------------------------------------------------
/packages/lib/README.md:
--------------------------------------------------------------------------------
1 | goto(stepId)}
41 | >
42 |
43 | {isMarkedAsCompleted && (
44 |
52 |
54 | )}
55 | {isMarkedAsCompleted === false && (
56 |
64 |
66 | )}
67 |
68 | {title}
69 |
70 |
71 |
81 | {children}
82 |
100 |
83 | {previous && (
84 |
87 | )}
88 | {next && (
89 |
92 | )}
93 | {skip && (
94 |
97 | )}
98 |
99 |
2 | 
3 |
167 | {body} 168 |
169 | ) 170 | }) 171 | FormMessage.displayName = "FormMessage" 172 | 173 | export { 174 | useFormField, 175 | Form, 176 | FormItem, 177 | FormLabel, 178 | FormControl, 179 | FormDescription, 180 | FormMessage, 181 | FormField, 182 | } 183 | -------------------------------------------------------------------------------- /apps/website/components/code-block.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import React, { useCallback, useState } from "react" 4 | import copy from "copy-to-clipboard" 5 | import { AnimatePresence, MotionConfig, motion } from "framer-motion" 6 | import { Highlight } from "prism-react-renderer" 7 | import useMeasure from "react-use-measure" 8 | import { twMerge } from "tailwind-merge" 9 | 10 | const variants = { 11 | visible: { opacity: 1, scale: 1 }, 12 | hidden: { opacity: 0, scale: 0.5 }, 13 | } 14 | 15 | const theme = { 16 | plain: { 17 | color: "var(--gray12)", 18 | fontSize: 12, 19 | fontFamily: "var(--font-mono)", 20 | }, 21 | styles: [ 22 | { 23 | types: ["comment"], 24 | style: { 25 | color: "var(--gray9)", 26 | }, 27 | }, 28 | { 29 | types: ["atrule", "keyword", "attr-name", "selector"], 30 | style: { 31 | color: "var(--gray10)", 32 | }, 33 | }, 34 | { 35 | types: ["punctuation", "operator"], 36 | style: { 37 | color: "var(--gray9)", 38 | }, 39 | }, 40 | { 41 | types: ["class-name", "function", "tag"], 42 | style: { 43 | color: "var(--gray12)", 44 | }, 45 | }, 46 | ], 47 | } 48 | 49 | export const CodeBlock = ({ 50 | children, 51 | initialHeight = 0, 52 | copyFromAnywhere, 53 | copyContent, 54 | }: { 55 | children: string 56 | initialHeight?: number 57 | copyFromAnywhere?: true 58 | copyContent?: string 59 | }) => { 60 | const [ref, bounds] = useMeasure() 61 | const [copying, setCopying] = useState(false) 62 | 63 | const onCopy = useCallback(() => { 64 | copy(copyContent ?? children) 65 | setCopying(true) 66 | setTimeout(() => { 67 | setCopying(false) 68 | }, 2000) 69 | }, [copyContent, children]) 70 | 71 | return ( 72 | {
78 | if (copyFromAnywhere) {
79 | onCopy()
80 | }
81 | }}
82 | >
83 |
138 |
139 |
140 | {({ className, tokens, getLineProps, getTokenProps }) => (
141 |
145 |
163 | )}
164 |
165 |
166 | )
167 | }
168 |
--------------------------------------------------------------------------------
/apps/website/components/onboarding/creating-steps.tsx:
--------------------------------------------------------------------------------
1 | import { type OnboardingStepRenderProps } from "onboarding_lib"
2 |
3 | import { Subtitle } from "@/components/subtitle"
4 |
5 | import { CodeBlock } from "../code-block"
6 | import { onboardingSchema } from "../demo"
7 | import { OnboardingStepContainer } from "./onboarding-step"
8 |
9 | const onboardingStepPropDefinition = `export type OnboardingStepProps
146 |
147 | {tokens.map((line, i) => {
148 | const { key: lineKey, ...rest } = getLineProps({ line, key: i })
149 | return (
150 |
162 |
151 | {line.map((token, key) => {
152 | const { key: tokenKey, ...rest } = getTokenProps({
153 | token,
154 | key,
155 | })
156 | return
157 | })}
158 |
159 | )
160 | })}
161 |
104 | Define your step options
105 |
109 | 106 | Each step can be defined with different options. 107 |
108 |
112 | The render prop
113 |
118 | 114 | We use a `render` prop to render the onboarding steps. Here's the 115 | props that get passed to the `render` function. 116 |
117 |
121 | Enforcing form valudation
122 |
129 | 123 | By default, the form only gets submitted when a submit button is 124 | clicked, and not between step transitions. To validate certain form 125 | fields, you can pass in an array to `validateFormFields` prop, with 126 | the keys of the fields you want to validate. 127 |
128 |
132 | Running side-effects / marking a step as completed
133 |
145 |
134 | For marking a step as completed, or optionally running side-effects
135 | before letting the user continue, the `markAsCompleted` prop can be
136 | used. Your onboarding form data will get passed to the function, and
137 | you can use it to run async side-effects, or just validate the
138 | existance of form data.
139 |
140 | In the below example, the step only gets marked as completed, once the
141 | user has said that they would be "very-disappointed" without
142 | ONBOARDING_LIB ;)
143 |