React App Shell: port os-chrome #303
Conversation
| interface SidebarProps { | ||
| homeRef: any; | ||
| linkedCharms: any[]; | ||
| workingSpec: string; | ||
| focusedCharm: any; | ||
| handlePublish: () => void; | ||
| recipeId: string; | ||
| } | ||
|
|
||
| const Sidebar: React.FC< | ||
| SidebarProps & { | ||
| query: any; | ||
| onQueryChanged: (value: string) => void; | ||
| schema: any; | ||
| copyRecipeLink: () => void; | ||
| argument: any; | ||
| data: any; | ||
| onDataChanged: (value: string) => void; | ||
| onSpecChanged: (value: string) => void; | ||
| } | ||
| > = ({ |
There was a problem hiding this comment.
Messy and bloated, we need to work out where all this stuff comes from still
|
|
||
| import * as osUi from "@commontools/os-ui"; | ||
| import { OsChrome } from "@commontools/os-ui/src/components/os-chrome"; | ||
| console.log(osUi); |
There was a problem hiding this comment.
I have to use the variable or else it gets 'cleaned up' during build 🙃
| <WebComponent | ||
| slot="overlay" | ||
| as="os-fabgroup" | ||
| className="pin-br" | ||
| onSubmit={() => { | ||
| console.log("submitted"); | ||
| }} | ||
| /> |
There was a problem hiding this comment.
we can define interfaces and thin components for commonly used webcomponents using this same abstraction
it's a little bit automagical in terms of handling event names but... it works!
|
AMAZE! Thank you for doing all of this! -- I just tried it locally, I ran into a minor issue with a dependency issue for |
Screen.Recording.2025-02-03.at.1.20.38.pm.mov