File tree Expand file tree Collapse file tree 14 files changed +691
-392
lines changed
get-started/team/[team_slug]/create-project
create-project-onboarding
components/settings/ApiKeys/Create Expand file tree Collapse file tree 14 files changed +691
-392
lines changed Original file line number Diff line number Diff line change @@ -77,7 +77,7 @@ export function AccountHeader(props: {
77
77
isOpen : false ,
78
78
} )
79
79
}
80
- onCreateAndComplete = { ( ) => {
80
+ onCreate = { ( ) => {
81
81
// refresh projects
82
82
router . refresh ( ) ;
83
83
} }
Original file line number Diff line number Diff line change
1
+ import { getTeamBySlug } from "@/api/team" ;
2
+ import { notFound } from "next/navigation" ;
3
+ import { CreateProjectPage } from "../../../../login/onboarding/create-project-onboarding/create-project-page" ;
4
+
5
+ export default async function Page ( props : {
6
+ params : Promise < { team_slug : string } > ;
7
+ } ) {
8
+ const params = await props . params ;
9
+ const team = await getTeamBySlug ( params . team_slug ) ;
10
+
11
+ if ( ! team ) {
12
+ notFound ( ) ;
13
+ }
14
+
15
+ return (
16
+ < CreateProjectPage
17
+ enableNebulaServiceByDefault = { team . enabledScopes . includes ( "nebula" ) }
18
+ teamSlug = { team . slug }
19
+ teamId = { team . id }
20
+ />
21
+ ) ;
22
+ }
Original file line number Diff line number Diff line change
1
+ import type { Meta , StoryObj } from "@storybook/react" ;
2
+ import { projectStub } from "../../../../stories/stubs" ;
3
+ import { CreateProjectPageUI } from "./CreateProjectPageUI" ;
4
+
5
+ const meta = {
6
+ title : "Onboarding/CreateProject" ,
7
+ component : Story ,
8
+ parameters : {
9
+ nextjs : {
10
+ appDirectory : true ,
11
+ } ,
12
+ } ,
13
+ } satisfies Meta < typeof Story > ;
14
+
15
+ export default meta ;
16
+ type Story = StoryObj < typeof meta > ;
17
+
18
+ export const Variants : Story = {
19
+ args : { } ,
20
+ } ;
21
+
22
+ function Story ( ) {
23
+ return (
24
+ < CreateProjectPageUI
25
+ createProject = { async ( ) => {
26
+ await new Promise ( ( resolve ) => setTimeout ( resolve , 1000 ) ) ;
27
+ return {
28
+ project : projectStub ( "foo" , "bar" ) ,
29
+ secret : "secret" ,
30
+ } ;
31
+ } }
32
+ teamSlug = "foo"
33
+ enableNebulaServiceByDefault = { false }
34
+ />
35
+ ) ;
36
+ }
Original file line number Diff line number Diff line change
1
+ "use client" ;
2
+
3
+ import type { Project } from "@/api/projects" ;
4
+ import { useState } from "react" ;
5
+ import {
6
+ CreateProjectForm ,
7
+ CreatedProjectDetails ,
8
+ } from "../../../../components/settings/ApiKeys/Create" ;
9
+ import { CreateProjectOnboardingLayout } from "../onboarding-layout" ;
10
+
11
+ export function CreateProjectPageUI ( props : {
12
+ createProject : ( param : Partial < Project > ) => Promise < {
13
+ project : Project ;
14
+ secret : string ;
15
+ } > ;
16
+ enableNebulaServiceByDefault : boolean ;
17
+ teamSlug : string ;
18
+ } ) {
19
+ const [ screen , setScreen ] = useState <
20
+ { id : "create" } | { id : "api-details" ; project : Project ; secret : string }
21
+ > ( { id : "create" } ) ;
22
+ return (
23
+ < CreateProjectOnboardingLayout currentStep = { screen . id === "create" ? 1 : 2 } >
24
+ < div className = "overflow-hidden rounded-lg border bg-card" >
25
+ { screen . id === "create" && (
26
+ < CreateProjectForm
27
+ showTitle = { false }
28
+ closeModal = { undefined }
29
+ createProject = { props . createProject }
30
+ onProjectCreated = { ( params ) => {
31
+ setScreen ( {
32
+ id : "api-details" ,
33
+ project : params . project ,
34
+ secret : params . secret ,
35
+ } ) ;
36
+ } }
37
+ enableNebulaServiceByDefault = { props . enableNebulaServiceByDefault }
38
+ />
39
+ ) }
40
+
41
+ { screen . id === "api-details" && (
42
+ < CreatedProjectDetails
43
+ project = { screen . project }
44
+ secret = { screen . secret }
45
+ teamSlug = { props . teamSlug }
46
+ />
47
+ ) }
48
+ </ div >
49
+ </ CreateProjectOnboardingLayout >
50
+ ) ;
51
+ }
Original file line number Diff line number Diff line change
1
+ "use client" ;
2
+
3
+ import { createProjectClient } from "@3rdweb-sdk/react/hooks/useApi" ;
4
+ import { CreateProjectPageUI } from "./CreateProjectPageUI" ;
5
+
6
+ export function CreateProjectPage ( props : {
7
+ enableNebulaServiceByDefault : boolean ;
8
+ teamSlug : string ;
9
+ teamId : string ;
10
+ } ) {
11
+ return (
12
+ < CreateProjectPageUI
13
+ enableNebulaServiceByDefault = { props . enableNebulaServiceByDefault }
14
+ teamSlug = { props . teamSlug }
15
+ createProject = { async ( params ) => {
16
+ const res = await createProjectClient ( props . teamId , params ) ;
17
+ return {
18
+ project : res . project ,
19
+ secret : res . secret ,
20
+ } ;
21
+ } }
22
+ />
23
+ ) ;
24
+ }
Original file line number Diff line number Diff line change @@ -4,6 +4,7 @@ import { cn } from "@/lib/utils";
4
4
import { useMutation } from "@tanstack/react-query" ;
5
5
import {
6
6
BoxIcon ,
7
+ KeyRoundIcon ,
7
8
LogOutIcon ,
8
9
MailIcon ,
9
10
UserIcon ,
@@ -99,6 +100,36 @@ export function TeamOnboardingLayout(props: {
99
100
) ;
100
101
}
101
102
103
+ const createProjectOnboardingSteps : OnboardingStep [ ] = [
104
+ {
105
+ icon : BoxIcon ,
106
+ title : "Configure Project" ,
107
+ description : "Provide project details" ,
108
+ number : 1 ,
109
+ } ,
110
+ {
111
+ icon : KeyRoundIcon ,
112
+ title : "Store Secret Key" ,
113
+ description : "Store your secret key" ,
114
+ number : 2 ,
115
+ } ,
116
+ ] ;
117
+
118
+ export function CreateProjectOnboardingLayout ( props : {
119
+ children : React . ReactNode ;
120
+ currentStep : 1 | 2 ;
121
+ } ) {
122
+ return (
123
+ < OnboardingLayout
124
+ steps = { createProjectOnboardingSteps }
125
+ currentStep = { props . currentStep }
126
+ title = "Create a project"
127
+ >
128
+ { props . children }
129
+ </ OnboardingLayout >
130
+ ) ;
131
+ }
132
+
102
133
function OnboardingLayout ( props : {
103
134
steps : OnboardingStep [ ] ;
104
135
currentStep : number ;
Original file line number Diff line number Diff line change @@ -104,7 +104,7 @@ export function InviteTeamMembers(props: {
104
104
< InviteTeamMembersUI
105
105
trackEvent = { trackEvent }
106
106
onComplete = { ( ) => {
107
- router . replace ( `/team/${ props . team . slug } ` ) ;
107
+ router . replace ( `/get-started/ team/${ props . team . slug } /create-project ` ) ;
108
108
} }
109
109
getTeam = { async ( ) => {
110
110
const res = await apiServerProxy < {
Original file line number Diff line number Diff line change @@ -6,10 +6,8 @@ import { subDays } from "date-fns";
6
6
import { redirect } from "next/navigation" ;
7
7
import { getAuthToken } from "../../../api/lib/getAuthToken" ;
8
8
import { loginRedirect } from "../../../login/loginRedirect" ;
9
- import {
10
- type ProjectWithAnalytics ,
11
- TeamProjectsPage ,
12
- } from "./~/projects/TeamProjectsPage" ;
9
+ import { TeamProjectsPage } from "./~/projects/TeamProjectsPage" ;
10
+ import type { ProjectWithAnalytics } from "./~/projects/TeamProjectsTable" ;
13
11
14
12
export default async function Page ( props : {
15
13
params : Promise < { team_slug : string } > ;
You can’t perform that action at this time.
0 commit comments