From 92e086d6554e4b41d1179d0010eeb3fd1249102a Mon Sep 17 00:00:00 2001 From: Dzaki Izza Date: Fri, 2 Jun 2023 17:58:03 +0700 Subject: [PATCH 1/2] feat: enable useLinkTo editor --- apps/batiq-editor | 2 +- packages/expo-runtime/src/AppContext.tsx | 110 +++++++++++++++++- packages/expo-runtime/src/Navigation.tsx | 70 +++--------- packages/runtime/src/schema.json | 136 +++++++++++------------ 4 files changed, 193 insertions(+), 125 deletions(-) diff --git a/apps/batiq-editor b/apps/batiq-editor index fdf53e6..06e1d24 160000 --- a/apps/batiq-editor +++ b/apps/batiq-editor @@ -1 +1 @@ -Subproject commit fdf53e6b8a907c05d4010b2a9cf5ce4385c54328 +Subproject commit 06e1d245d07385c1d199c8def68e3486ee3c648b diff --git a/packages/expo-runtime/src/AppContext.tsx b/packages/expo-runtime/src/AppContext.tsx index 68bb521..970dd72 100644 --- a/packages/expo-runtime/src/AppContext.tsx +++ b/packages/expo-runtime/src/AppContext.tsx @@ -1,5 +1,8 @@ -import React from "react"; -import { createBatiq, BaseBatiqCore, AppSchema } from "@batiq/core"; +import React, { PropsWithChildren } from "react"; +import { createBatiq, BaseBatiqCore, AppSchema, PageSchema } from "@batiq/core"; +import { NavigationContainer, PathConfigMap } from "@react-navigation/native"; +import { Runtime } from "./middlewares/runtimeMiddleware"; +import { navigationRef } from "./Navigation"; const AppContext = React.createContext( // @ts-ignore @@ -19,6 +22,7 @@ export const AppProvider = ( props: React.PropsWithChildren<{ schema: AppSchema; middlewares?: Parameters[1]; + importMaps?: Record; }> ) => { const app = React.useMemo( @@ -31,7 +35,107 @@ export const AppProvider = ( [props.schema, props.middlewares] ); return ( - {props.children} + + {props.children} + + ); +}; + +type Page = { + name: string; + route: string; +}; + +type Tab = { + tab: NonNullable; + page: Page | Page[]; +}; + +type Navigation = { + tabs: Record; + stack: Page[]; +}; + +export const toNavigation = (pages: PageSchema[]): Navigation => + pages.reduce( + (navigation: Navigation, page: PageSchema): Navigation => { + if (!page.navigation.tab) { + return { + ...navigation, + stack: [ + ...navigation.stack, + { name: page.name, route: page.navigation.path }, + ], + }; + } + const tab = navigation.tabs[page.navigation.tab.label]; + return { + ...navigation, + tabs: { + ...navigation.tabs, + [page.navigation.tab.label]: tab + ? { + ...tab, + page: [ + ...(Array.isArray(tab.page) ? tab.page : [tab.page]), + { + name: page.name, + route: page.navigation.path, + }, + ], + } + : { + tab: page.navigation.tab, + page: { + name: page.name, + route: page.navigation.path, + }, + }, + }, + }; + }, + { tabs: {}, stack: [] } + ); + +const AppNavigationContainer: React.FC = ({ children }) => { + const batiq = useBatiq(); + const schema = useBatiqSchema(); + const { tabs, stack } = React.useMemo(() => { + return toNavigation(schema.pages); + }, [schema.pages]); + + return ( + [ + label, + Array.isArray(tab.page) + ? ({ + screens: Object.fromEntries( + tab.page.map((page) => [page.name, page.route]) + ), + } as const) + : tab.page.route, + ]) + ), + }, + ...(Object.fromEntries( + stack.map((page) => [page.name, page.route]) + ) as PathConfigMap<{}>), + } as any, + }, + }} + onStateChange={(state) => state && batiq.onNavigate(state)} + onReady={() => batiq.onNavigate(navigationRef.getRootState())} + > + {children} + ); }; diff --git a/packages/expo-runtime/src/Navigation.tsx b/packages/expo-runtime/src/Navigation.tsx index 0f0489d..be52fae 100644 --- a/packages/expo-runtime/src/Navigation.tsx +++ b/packages/expo-runtime/src/Navigation.tsx @@ -1,14 +1,9 @@ import React from "react"; -import { BaseBatiqCore, PageSchema } from "@batiq/core"; -import { - createNavigationContainerRef, - NavigationContainer, - PathConfigMap, -} from "@react-navigation/native"; +import { PageSchema } from "@batiq/core"; +import { createNavigationContainerRef } from "@react-navigation/native"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; -import { useBatiq, useBatiqSchema } from "./AppContext"; -import { Runtime } from "./middlewares/runtimeMiddleware"; +import { useBatiqSchema } from "./AppContext"; type Page = { component: React.ComponentType; @@ -121,7 +116,6 @@ export const navigationRef = createNavigationContainerRef(); export const Navigation = (props: { importMaps: Record; }) => { - const batiq = useBatiq(); const schema = useBatiqSchema(); const { tabs, stack } = React.useMemo(() => { return toNavigation(schema.pages, props.importMaps); @@ -131,51 +125,21 @@ export const Navigation = (props: { const Tab = React.useCallback(() => createTabs(tabs), [tabs]); return ( - [ - label, - Array.isArray(tab.page) - ? ({ - screens: Object.fromEntries( - tab.page.map((page) => [page.name, page.route]) - ), - } as const) - : tab.page.route, - ]) - ), - }, - ...(Object.fromEntries( - stack.map((page) => [page.name, page.route]) - ) as PathConfigMap<{}>), - } as any, - }, - }} - onStateChange={(state) => state && batiq.onNavigate(state)} - onReady={() => batiq.onNavigate(navigationRef.getRootState())} - > - + + + {stack.map((page) => ( - {stack.map((page) => ( - - ))} - - + ))} + ); }; diff --git a/packages/runtime/src/schema.json b/packages/runtime/src/schema.json index b8cac03..35199d6 100644 --- a/packages/runtime/src/schema.json +++ b/packages/runtime/src/schema.json @@ -5,40 +5,68 @@ }, "platform": "web", "config": { - "link_prefixes": ["http://localhost:4400/", "app://"] + "link_prefixes": ["http://127.0.0.1:5174/", "app://"] }, - "datasource": { - "qore": { - "type": "qore", - "config": { - "endpoint": "https://batiq.qorebase.io" + "datasource": {}, + "components": { + "ButtonGroup": { + "inputs": {}, + "component": { + "type": "component", + "from": "@batiq/components", + "name": "Container", + "id": "ContainerButtonGroup", + "properties": { + "p": "4", + "direction": "horizontal", + "w": "full", + "gap": "2", + "bg": "white" + }, + "children": [ + { + "type": "component", + "from": "@batiq/components", + "name": "Button", + "id": "PrimaryButton", + "properties": { + "bg": "blue.500", + "flex": 1 + }, + "children": [ + { + "type": "component", + "from": "@batiq/components", + "name": "Text", + "id": "PrimaryText", + "properties": {}, + "children": ["Primary"] + } + ] + }, + { + "type": "component", + "from": "@batiq/components", + "name": "Button", + "id": "SecondaryButton", + "properties": { + "bg": "blue.100", + "flex": 1 + }, + "children": [ + { + "type": "component", + "from": "@batiq/components", + "name": "Text", + "id": "PrimaryText", + "properties": {}, + "children": ["Primary"] + } + ] + } + ] } }, - "qore2": { - "type": { - "from": "@batiq/data", - "name": "CustomDataSource" - }, - "config": { - "endpoint": "https://batiq.qorebase.io" - }, - "authenticatedRoutes": ["/users", "/posts/*"] - }, - "petstore": { - "type": { - "from": "@batiq/data", - "name": "OpenAPI" - }, - "config": { - "definition": "https://petstore3.swagger.io/api/v3/openapi.json", - "auth": { - "apiKey": null - } - }, - "authenticatedRoutes": ["/page-1"] - } - }, - "components": { "CompoundButton": { "inputs": {}, "component": { @@ -170,44 +198,13 @@ } ] }, - { - "type": "data", - "data": "petstore", - "name": "pet", - "query": { - "operationId": "getPetById", - "parameters": { - "petId": 1 - } - }, - "children": [ - { - "type": "component", - "from": "@batiq/components", - "name": "Text", - "properties": { - "text": { - "type": "expression", - "expression": "pet.id" - } - }, - "children": [] - } - ] - }, { "type": "component", - "from": "@batiq/components", - "name": "Text", - "properties": { - "onPress": { - "type": "action", - "from": "@batiq/actions", - "name": "navigate", - "arguments": ["/page-2"] - } - }, - "children": ["Page 2"] + "from": "local", + "name": "ButtonGroup", + "properties": {}, + "overrideProperties": {}, + "children": [] } ] } @@ -216,7 +213,10 @@ { "name": "page 2", "navigation": { - "path": "/page-2" + "path": "/page-2", + "tab": { + "label": "Element" + } }, "children": [ { From 7260ece59dd970391d6fc1640a4dbbfaaadc0ab5 Mon Sep 17 00:00:00 2001 From: Dzaki Izza Date: Tue, 6 Jun 2023 16:35:35 +0700 Subject: [PATCH 2/2] fix image children --- apps/batiq-editor | 2 +- packages/components/src/Image.tsx | 3 +- yarn.lock | 384 ++---------------------------- 3 files changed, 17 insertions(+), 372 deletions(-) diff --git a/apps/batiq-editor b/apps/batiq-editor index 06e1d24..1951410 160000 --- a/apps/batiq-editor +++ b/apps/batiq-editor @@ -1 +1 @@ -Subproject commit 06e1d245d07385c1d199c8def68e3486ee3c648b +Subproject commit 195141057a76ef6f9ee403d16fdd01dd29f2abb7 diff --git a/packages/components/src/Image.tsx b/packages/components/src/Image.tsx index 07d6275..b7607ec 100644 --- a/packages/components/src/Image.tsx +++ b/packages/components/src/Image.tsx @@ -4,7 +4,8 @@ import { Image as Image_ } from "native-base"; import { Image as ImageDefinition } from "."; export const Image = (props: Static) => { - const { src, fallbackSrc, ...rest } = props; + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { src, fallbackSrc, children, ...rest } = props; return (