Skip to content

Commit 575e2dd

Browse files
author
ci-bot
committed
connect screens statefully. update zeppelin wizard code
1 parent 52db1e7 commit 575e2dd

14 files changed

+322
-77
lines changed

‎libs/remix-ui/template-explorer-modal/context/template-explorer-context.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,11 @@ export const TemplateExplorerProvider = (props: { plugin: TemplateExplorerModalP
2626
dispatch({ type: TemplateExplorerWizardAction.SET_METADATA, payload: metadata })
2727
}, [])
2828

29+
useEffect(() => {
30+
console.log('state context', state)
31+
}, [state])
32+
2933
const setSearchTerm = (term: string) => {
30-
console.log('check status', { term, dedupedTemplates, state })
3134
dispatch({ type: TemplateExplorerWizardAction.SET_SEARCH_TERM, payload: term })
3235
}
3336

@@ -126,7 +129,14 @@ export const TemplateExplorerProvider = (props: { plugin: TemplateExplorerModalP
126129
return (filteredTemplates || []).map((group: any) => ({
127130
...group,
128131
items: makeUniqueItems(group && group.items ? group.items : [])
129-
})).filter((g: any) => g && g.items && g.items.length > 0)
132+
})).filter((g: any) => {
133+
// Keep categories that have items OR special functionality (like Cookbook)
134+
return g && (
135+
(g.items && g.items.length > 0) ||
136+
(g.name === 'Cookbook' && g.onClick) ||
137+
(g.hasOptions && g.name !== 'Cookbook')
138+
)
139+
})
130140
}, [filteredTemplates, recentTemplates])
131141

132142
const handleTagClick = (tag: string) => {
@@ -153,7 +163,7 @@ export const TemplateExplorerProvider = (props: { plugin: TemplateExplorerModalP
153163
}
154164
}
155165

156-
const contextValue = { templateRepository: state.templateRepository, metadata: state.metadata, selectedTag: state.selectedTag, recentTemplates, filteredTemplates, dedupedTemplates, handleTagClick, clearFilter, addRecentTemplate, RECENT_KEY, allTags, plugin, setSearchTerm }
166+
const contextValue = { templateRepository: state.templateRepository, metadata: state.metadata, selectedTag: state.selectedTag, recentTemplates, filteredTemplates, dedupedTemplates, handleTagClick, clearFilter, addRecentTemplate, RECENT_KEY, allTags, plugin, setSearchTerm, dispatch, state }
157167

158168
return (
159169
<TemplateExplorerContext.Provider value={contextValue}>

‎libs/remix-ui/template-explorer-modal/reducers/template-explorer-reducer.tsx‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react'
2-
import { MetadataType, TemplateExplorerWizardAction, TemplateExplorerWizardState, TemplateRepository } from '../types/template-explorer-types'
2+
import { MetadataType, TemplateExplorerWizardAction, TemplateExplorerWizardState, TemplateRepository, WizardStep } from '../types/template-explorer-types'
33
import { metadata, templatesRepository } from '../src/utils/helpers'
44

55
export const initialState: TemplateExplorerWizardState = {
66
workspaceTemplateChosen: '',
77
workspaceTemplateGroupChosen: '',
8-
workspaceName: '',
8+
workspaceName: 'workspace Name',
99
defaultWorkspaceName: '',
1010
topLeftNagivationName: '',
1111
initializeAsGitRepo: false,
@@ -14,7 +14,10 @@ export const initialState: TemplateExplorerWizardState = {
1414
metadata: metadata as MetadataType,
1515
templateRepository: templatesRepository as TemplateRepository || [],
1616
selectedTag: null,
17-
setSearchTerm: (term: string) => {}
17+
setSearchTerm: (term: string) => {},
18+
wizardStep: 'template',
19+
setWizardStep: (step: WizardStep) => {},
20+
recentBump: 0
1821
}
1922

2023
export const templateExplorerReducer = (state: TemplateExplorerWizardState, action: any) => {
@@ -23,31 +26,41 @@ export const templateExplorerReducer = (state: TemplateExplorerWizardState, acti
2326
return { ...state, templateRepository: action.payload }
2427
case TemplateExplorerWizardAction.SET_METADATA:
2528
return { ...state, metadata: action.payload }
26-
case TemplateExplorerWizardAction.SELECT_TEMPLATE:
27-
return action.payload
28-
case TemplateExplorerWizardAction.SET_WORKSPACE_TEMPLATE_GROUP:
29-
return action.payload
30-
case TemplateExplorerWizardAction.SET_WORKSPACE_NAME:
31-
return action.payload
29+
case TemplateExplorerWizardAction.SELECT_TEMPLATE:{
30+
return { ...state, workspaceTemplateChosen: action.payload }
31+
}
32+
case TemplateExplorerWizardAction.SET_WORKSPACE_TEMPLATE_GROUP:{
33+
return { ...state, workspaceTemplateGroupChosen: action.payload.templateGroupChosen }
34+
}
35+
case TemplateExplorerWizardAction.SET_WORKSPACE_NAME:{
36+
return { ...state, workspaceName: action.payload }
37+
}
3238
case TemplateExplorerWizardAction.SET_DEFAULT_WORKSPACE_NAME:
33-
return action.payload
39+
return { ...state, defaultWorkspaceName: action.payload }
3440
case TemplateExplorerWizardAction.SET_TOP_LEFT_NAVIGATION_NAME:
35-
return action.payload
41+
return { ...state, topLeftNagivationName: action.payload }
3642
case TemplateExplorerWizardAction.SET_INITIALIZE_AS_GIT_REPO:
37-
return action.payload
43+
return { ...state, initializeAsGitRepo: action.payload }
3844
case TemplateExplorerWizardAction.SET_WORKSPACE_GENERATED_WITH_AI:
39-
return action.payload
45+
return { ...state, workspaceGeneratedWithAi: action.payload }
4046
case TemplateExplorerWizardAction.END_WORKSPACE_WIZARD:
41-
return action.payload
47+
return { ...state, wizardStep: 'finishSetup' }
4248
case TemplateExplorerWizardAction.SET_SELECTED_TAG: {
4349
return { ...state, selectedTag: action.payload }
4450
}
51+
case TemplateExplorerWizardAction.SET_RECENT_BUMP: {
52+
return { ...state, recentBump: action.payload }
53+
}
4554
case TemplateExplorerWizardAction.CLEAR_SELECTED_TAG: {
4655
return { ...state, selectedTag: null }
4756
}
4857
case TemplateExplorerWizardAction.SET_SEARCH_TERM: {
4958
return { ...state, searchTerm: action.payload }
5059
}
60+
case TemplateExplorerWizardAction.SET_WIZARD_STEP: {
61+
console.log('action.payload wizardStep', action.payload)
62+
return { ...state, wizardStep: action.payload }
63+
}
5164
default:
5265
return state
5366
}

‎libs/remix-ui/template-explorer-modal/src/components/contract-wizard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export function ContractWizard () {
153153
<Editor
154154
height="460px"
155155
defaultLanguage="typescript"
156-
options={{ readOnly: true, minimap: { enabled: false } }}
156+
options={{ readOnly: true, minimap: { enabled: false }, theme: 'vs-dark' }}
157157
value={strategy.contractCode as string}
158158
/>
159159
</div>

‎libs/remix-ui/template-explorer-modal/src/components/generateWorkspaceWithAi.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { useReducer } from 'react'
2+
import { TemplateExplorerWizardAction } from '../../types/template-explorer-types'
3+
import { initialState, templateExplorerReducer } from '../../reducers/template-explorer-reducer'
4+
5+
export function GenerateWorkspaceWithAi() {
6+
const [state, dispatch] = useReducer(templateExplorerReducer, initialState)
7+
return (
8+
<section>
9+
<div className="d-flex flex-column bg-light" style={{ height: '80%' }}>
10+
<div>
11+
<label className="form-label text-uppercase small mb-1">Workspace description</label>
12+
</div>
13+
<div>
14+
<textarea className="form-control text-dark" onChange={(e) => dispatch({ type: TemplateExplorerWizardAction.SET_WORKSPACE_NAME, payload: e.target.value })}
15+
placeholder="I want to create a decentralized voting platform with Solidity"
16+
rows={10}
17+
/>
18+
</div>
19+
</div>
20+
</section>
21+
)
22+
}

‎libs/remix-ui/template-explorer-modal/src/components/genericWorkspaceTemplate.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { useReducer } from 'react'
2+
import { initialState, templateExplorerReducer } from '../../reducers/template-explorer-reducer'
3+
import { TemplateExplorerWizardAction } from '../../types/template-explorer-types'
4+
5+
export function GenericWorkspaceTemplate() {
6+
const [state, dispatch] = useReducer(templateExplorerReducer, initialState)
7+
return (
8+
<section>
9+
<div className="d-flex flex-column gap-3 bg-light" style={{ height: '80%' }}>
10+
<div>
11+
<label className="form-label text-uppercase small mb-1">Workspace name</label>
12+
</div>
13+
<div>
14+
<input type="text" className="form-control text-dark" value={state.workspaceName} onChange={(e) => dispatch({ type: TemplateExplorerWizardAction.SET_WORKSPACE_NAME, payload: e.target.value })} />
15+
</div>
16+
</div>
17+
</section>
18+
)
19+
}

‎libs/remix-ui/template-explorer-modal/src/components/template-explorer-body.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useContext } from 'react'
1+
import React, { useContext, useEffect, useReducer } from 'react'
22
import { TemplateExplorer } from './template-explorer'
33
import { TopCards } from './topCards'
44
import { TemplateExplorerContext } from '../../context/template-explorer-context'
@@ -9,9 +9,13 @@ export interface TemplateExplorerBodyProps {
99
}
1010

1111
export function TemplateExplorerBody({ plugin }: TemplateExplorerBodyProps) {
12-
const { selectedTag, allTags, handleTagClick, clearFilter, dedupedTemplates } = useContext(TemplateExplorerContext)
12+
const { selectedTag, allTags, handleTagClick, clearFilter, dedupedTemplates, state } = useContext(TemplateExplorerContext)
1313

1414
const filterTheseTags = tag => tag !== 'Circom' && tag !== 'All' && tag !== 'Noir' && tag !== 'AI'
15+
16+
useEffect(() => {
17+
console.log('state template explorer body', state)
18+
}, [state])
1519
return (
1620
<section>
1721
<TopCards />

‎libs/remix-ui/template-explorer-modal/src/components/template-explorer.tsx‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import isElectron from 'is-electron'
22
import React, { useContext, useEffect } from 'react'
3-
import { TemplateCategory, TemplateExplorerProps, TemplateItem } from '../../types/template-explorer-types'
3+
import { TemplateCategory, TemplateExplorerProps, TemplateExplorerWizardAction, TemplateItem } from '../../types/template-explorer-types'
44
import { TemplateExplorerContext } from '../../context/template-explorer-context'
5+
import { CookbookStrategy, GenAiStrategy, GenericStrategy, RemixDefaultStrategy, TemplateCateogryStrategy, WizardStrategy } from '../../stategies/templateCategoryStrategy'
56

67
export function TemplateExplorer() {
78

8-
const { metadata, dedupedTemplates, addRecentTemplate, plugin } = useContext(TemplateExplorerContext)
9+
const { metadata, dedupedTemplates, addRecentTemplate, plugin, dispatch, state } = useContext(TemplateExplorerContext)
910

1011
return (
1112
<div className="template-explorer-container overflow-y-auto" style={{ height: '350px', padding: '1rem' }}>
@@ -54,8 +55,27 @@ export function TemplateExplorer() {
5455
flexDirection: 'column'
5556
}}
5657
onClick={() => {
57-
console.log('Template selected:', item.value, item.opts)
58-
addRecentTemplate(item)
58+
const strategy = new TemplateCateogryStrategy()
59+
dispatch({ type: TemplateExplorerWizardAction.SELECT_TEMPLATE, payload: item.value })
60+
dispatch({ type: TemplateExplorerWizardAction.SET_WORKSPACE_TEMPLATE_GROUP, payload: template.name })
61+
dispatch({ type: TemplateExplorerWizardAction.SET_WORKSPACE_NAME, payload: item.value })
62+
if (template.name.toLowerCase() === 'generic' && !item.value.toLowerCase().includes('remixaitemplate') && item.value !== 'remixDefault') {
63+
strategy.setStrategy(new GenericStrategy())
64+
strategy.switchScreen(dispatch)
65+
} else if (template.name.toLowerCase() === 'generic' && item.value.toLowerCase().includes('remixaitemplate')) {
66+
strategy.setStrategy(new GenAiStrategy())
67+
strategy.switchScreen(dispatch)
68+
} else if (template.name.toLowerCase() === 'generic' && item.value === 'remixDefault') {
69+
console.log('remixdefault')
70+
strategy.setStrategy(new RemixDefaultStrategy())
71+
strategy.switchScreen(dispatch)
72+
} else if (template.name.toLowerCase().includes('zeppelin')) {
73+
strategy.setStrategy(new WizardStrategy())
74+
strategy.switchScreen(dispatch)
75+
} else if (template.name.toLowerCase().includes('cookbook')) {
76+
strategy.setStrategy(new CookbookStrategy())
77+
strategy.switchScreen(dispatch)
78+
}
5979
}}
6080
onMouseEnter={(e) => {
6181
e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)'
@@ -153,7 +173,6 @@ export function TemplateExplorer() {
153173
)
154174
})}
155175
</div>
156-
157176
{template.name === 'Cookbook' && (
158177
<div className="cookbook-special-card" style={{
159178
border: '1px solid #e0e0e0',

‎libs/remix-ui/template-explorer-modal/src/components/workspaceDetails.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export function WorkspaceDetails(props: WorkspaceDetailsProps) {
2828
readOnly: true,
2929
minimap: { enabled: false },
3030
lineNumbers: 'off',
31+
theme: 'vs-dark',
3132
scrollbar: {
3233
vertical: 'hidden',
3334
horizontal: 'hidden'

0 commit comments

Comments
 (0)