Skip to content

Commit

Permalink
Use react wrapper to make toasts appear in demo scenes.
Browse files Browse the repository at this point in the history
  • Loading branch information
MichaelMauderer committed Dec 22, 2023
1 parent 902752f commit 15e206b
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 14 deletions.
1 change: 1 addition & 0 deletions app/gui2/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
"semver": "^7.5.4",
"sucrase": "^3.34.0",
"vue": "^3.3.4",
"vue-react-wrapper": "^0.3.1",
"ws": "^8.13.0",
"y-codemirror.next": "^0.3.2",
"y-protocols": "^1.0.5",
Expand Down
8 changes: 0 additions & 8 deletions app/gui2/src/createApp.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import '@/assets/main.css'
import type { ApplicationConfig } from '@/util/config'
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import Vue3Toastify, { type ToastContainerOptions } from 'vue3-toastify'

export function mountProjectApp(rootProps: {
config: ApplicationConfig
Expand All @@ -13,13 +12,6 @@ export function mountProjectApp(rootProps: {
}) {
const app = createApp(App, rootProps)
app.use(createPinia())
app.use(Vue3Toastify, {
position: 'top-center',
theme: 'light',
closeOnClick: false,
draggable: false,
toastClassName: 'text-sm leading-170 bg-frame-selected rounded-2xl backdrop-blur-3xl',
} as ToastContainerOptions)
app.mount('#app')
return app
}
20 changes: 19 additions & 1 deletion app/gui2/stories/GraphEditor.story.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
<script setup lang="ts">
import { ref } from 'vue'
import { reactive, ref } from 'vue'
import GraphEditor from '@/components/GraphEditor.vue'
import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import { createReactWrapper } from 'vue-react-wrapper'
import MockProjectStoreWrapper from './MockProjectStoreWrapper.vue'
import HstCode from './histoire/HstCode.vue'
Expand Down Expand Up @@ -32,6 +35,20 @@ main =
result = run_main benches
third_node = 2 + 2
`)
/// Note: These props should be synced with the props in
// `app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx`.
// We need this here, as the rect component is not part of the dashboard and not usually available in the demo scenes.
// Using this wrapper enables us to see toasts in the absence of the dashboard/React.
const toastProps = reactive({
position: 'top-center',
theme: 'light',
closeOnClick: false,
draggable: false,
toastClassName: 'text-sm leading-170 bg-frame-selected rounded-2xl backdrop-blur-3xl',
limit: 3,
})
const JSONView = createReactWrapper(ToastContainer, toastProps)
</script>

<template>
Expand All @@ -47,6 +64,7 @@ main =
responsiveDisabled
autoPropsDisabled
>
<JSONView />
<MockProjectStoreWrapper v-model="text">
<Suspense><GraphEditor /></Suspense>
</MockProjectStoreWrapper>
Expand Down
32 changes: 29 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
},
"dependencies": {
"chromedriver": "^106.0.1",
"tslib": "^2.6.2",
"vue3-toastify": "^0.1.14"
"tslib": "^2.6.2"
},
"name": "root",
"scripts": {
Expand Down

0 comments on commit 15e206b

Please sign in to comment.