enso/app/gui2/stories/setup.ts
Ilya Bogdanov 41cb4e32c4
Doc panel improvements (#8530)
Fixes parts of #8135

- Fixed rendering of the documentation panel when no entry is selected.
- Multiple improvements of tags in the documentation panel:
- Group color for `GROUP` tag
- Custom styling for `DEPRECATED`, `UNSTABLE`, and `ADVANCED` tags.
- Sorting
- Collapsing tags that exceed one line with a button
- Filtering out some tags (`ICON` and `TEXT_ONLY` for now)
- Filtering out private items from the documentation
- Fixing group colors (was incorrectly assuming unique group names) and fallback color (was incorrectly replacing every character in the name with `-` before hashing, which was hilarious).
- Fixing ComponentBrowser demo scene.
- Minor fixes for mock database in demo scenes (removed duplicated entry, added an additional one for testing tags)


https://github.com/enso-org/enso/assets/6566674/10f4f5d0-9332-40c6-93c6-8263eb5fd85a
2023-12-15 14:58:57 +00:00

123 lines
3.9 KiB
TypeScript

import '@/assets/base.css'
import { provideGuiConfig } from '@/providers/guiConfig'
import { provideVisualizationConfig } from '@/providers/visualizationConfig'
import { Vec2 } from '@/util/data/vec2'
import { MockTransport } from '@/util/net'
import type { QualifiedName } from '@/util/qualifiedName'
import { defineSetupVue3 } from '@histoire/plugin-vue'
import * as random from 'lib0/random'
import { createPinia } from 'pinia'
import type { LibraryComponentGroup, Uuid, response } from 'shared/languageServerTypes'
import type {
SuggestionEntry,
SuggestionsDatabaseUpdate,
} from 'shared/languageServerTypes/suggestions'
import { ref } from 'vue'
import mockDb from './mockSuggestions.json' assert { type: 'json' }
import './story.css'
const mockProjectId = random.uuidv4() as Uuid
const standardBase = 'Standard.Base' as QualifiedName
export function placeholderGroups(): LibraryComponentGroup[] {
return [
{ color: '#4D9A29', name: 'Input', library: standardBase, exports: [] },
{ color: '#B37923', name: 'Web', library: standardBase, exports: [] },
{ color: '#9735B9', name: 'Parse', library: standardBase, exports: [] },
{ color: '#4D9A29', name: 'Select', library: standardBase, exports: [] },
{ color: '#B37923', name: 'Join', library: standardBase, exports: [] },
{ color: '#9735B9', name: 'Transform', library: standardBase, exports: [] },
{ color: '#4D9A29', name: 'Output', library: standardBase, exports: [] },
]
}
MockTransport.addMock('engine', async (method, data, transport) => {
switch (method) {
case 'session/initProtocolConnection':
return {
contentRoots: [{ type: 'Project', id: mockProjectId }],
} satisfies response.InitProtocolConnection
case 'executionContext/create':
setTimeout(
() => transport.emit('executionContext/executionComplete', { contextId: data.contextId }),
100,
)
return {
contextId: data.contextId,
}
case 'search/getSuggestionsDatabase':
// We first send the empty database, and then update it 200 ms later, mimicking the real LS.
setTimeout(() => {
const updates: SuggestionsDatabaseUpdate[] = mockDb.map((suggestion, id) => ({
type: 'Add',
id,
suggestion: suggestion as SuggestionEntry,
}))
transport.emit('search/suggestionsDatabaseUpdates', { updates, currentVersion: 2 })
}, 200)
return {
entries: [],
currentVersion: 1,
} satisfies response.GetSuggestionsDatabase
case 'runtime/getComponentGroups':
return { componentGroups: placeholderGroups() } satisfies response.GetComponentGroups
case 'file/list':
return { paths: [] } satisfies response.FileList
case 'executionContext/push':
case 'executionContext/pop':
case 'executionContext/recompute':
case 'capability/acquire':
return {}
default:
return Promise.reject(`Method not mocked: ${method}`)
}
})
export const setupVue3 = defineSetupVue3(({ app }) => {
app.use(createPinia())
provideGuiConfig._mock(
ref({
startup: {
project: 'Mock Project',
displayedProjectName: 'Mock Project',
},
engine: { rpcUrl: 'mock://engine', dataUrl: 'mock://data' },
}),
app,
)
// Required for visualization stories.
provideVisualizationConfig._mock(
{
fullscreen: false,
scale: 1,
width: 200,
height: 150,
hide() {},
isCircularMenuVisible: false,
isBelowToolbar: false,
nodeSize: new Vec2(200, 150),
currentType: {
module: { kind: 'Builtin' },
name: 'Current Type',
},
icon: 'braces',
types: [
{
module: { kind: 'Builtin' },
name: 'Example',
},
{
module: { kind: 'Builtin' },
name: 'Types',
},
{
module: { kind: 'Builtin' },
name: 'Here',
},
],
updateType() {},
},
app,
)
})