Merge pull request #20 from webzard-io/runtime

add chakra-ui root component

packages/runtime/example/conditional-render/hidden.html

@@ -19,7 +19,7 @@
           components: [
             {
               id: "btn",
-              type: "chakra_ui/v1/button",
+              type: "plain/v1/button",
               properties: {
                 text: {
                   raw: "toggle text",

packages/runtime/example/delete-button/index.html

@@ -19,14 +19,12 @@
           components: [
             {
               id: "del_btn",
-              type: "chakra_ui/v1/button",
+              type: "plain/v1/button",
               properties: {
                 text: {
                   raw: `{{ del_btn.count > 0 ? 'CLICK TO CONFIRM' : '**DELETE** Button' }}`,
                   format: "md",
                 },
-                isLoading: false,
-                colorScheme: "twitter",
               },
               traits: [
                 {

packages/runtime/example/nested-components/index.html

@@ -17,6 +17,12 @@
         },
         spec: {
           components: [
+            {
+              id: "root",
+              type: "chakra_ui/v1/root",
+              properties: {},
+              traits: [],
+            },
             {
               id: "tabs",
               type: "chakra_ui/v1/tabs",
@@ -24,7 +30,17 @@
                 tabNames: ["Tab One", "Tab Two"],
                 initialSelectedTabIndex: 1,
               },
-              traits: [],
+              traits: [
+                {
+                  type: "core/v1/slot",
+                  properties: {
+                    container: {
+                      id: "root",
+                      slot: "root",
+                    },
+                  },
+                },
+              ],
             },
             {
               id: "btn",

packages/runtime/src/components/chakra-ui/Button.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { createComponent } from "@meta-ui/core";
 import { Static, Type } from "@sinclair/typebox";
-import { Button as BaseButton, ChakraProvider } from "@chakra-ui/react";
+import { Button as BaseButton } from "@chakra-ui/react";
 import Text, { TextProps, TextPropertySchema } from "../_internal/Text";
 import { ComponentImplementation } from "../../registry";
 import { useExpression } from "../../store";
@@ -34,11 +34,9 @@ const Button: ComponentImplementation<{
   }, []);
 
   return (
-    <ChakraProvider>
-      <BaseButton {...{ colorScheme, isLoading }} ref={ref} onClick={onClick}>
-        <Text value={{ ...text, raw }} />
-      </BaseButton>
-    </ChakraProvider>
+    <BaseButton {...{ colorScheme, isLoading }} ref={ref} onClick={onClick}>
+      <Text value={{ ...text, raw }} />
+    </BaseButton>
   );
 };
 

packages/runtime/src/components/chakra-ui/Root.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { ComponentImplementation } from "../../registry";
+import { createComponent } from "@meta-ui/core";
+import Slot from "../_internal/Slot";
+
+const Root: ComponentImplementation<{}> = ({ slotsMap }) => {
+  return (
+    <ChakraProvider>
+      <Slot slotsMap={slotsMap} slot="root" />
+    </ChakraProvider>
+  );
+};
+
+export default {
+  ...createComponent({
+    version: "chakra_ui/v1",
+    metadata: {
+      name: "root",
+      description: "chakra-ui provider",
+    },
+    spec: {
+      properties: [],
+      acceptTraits: [],
+      state: {},
+      methods: [],
+    },
+  }),
+  impl: Root,
+};

packages/runtime/src/components/chakra-ui/Tabs.tsx

@@ -6,7 +6,6 @@ import {
   Tab,
   TabPanels,
   TabPanel,
-  ChakraProvider,
 } from "@chakra-ui/react";
 import { Type, Static } from "@sinclair/typebox";
 import { ComponentImplementation } from "../../registry";
@@ -27,25 +26,23 @@ const Tabs: ComponentImplementation<{
   }, [selectedTabIndex]);
 
   return (
-    <ChakraProvider>
-      <BaseTabs
-        defaultIndex={initialSelectedTabIndex}
-        onChange={(idx) => setSelectedTabIndex(idx)}
-      >
-        <TabList>
-          {tabNames.map((name, idx) => (
-            <Tab key={idx}>{name}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {tabNames.map((_, idx) => (
-            <TabPanel key={idx}>
-              <Slot slotsMap={slotsMap} slot={`tab_content_${idx}`} />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </BaseTabs>
-    </ChakraProvider>
+    <BaseTabs
+      defaultIndex={initialSelectedTabIndex}
+      onChange={(idx) => setSelectedTabIndex(idx)}
+    >
+      <TabList>
+        {tabNames.map((name, idx) => (
+          <Tab key={idx}>{name}</Tab>
+        ))}
+      </TabList>
+      <TabPanels>
+        {tabNames.map((_, idx) => (
+          <TabPanel key={idx}>
+            <Slot slotsMap={slotsMap} slot={`tab_content_${idx}`} />
+          </TabPanel>
+        ))}
+      </TabPanels>
+    </BaseTabs>
   );
 };
 

packages/runtime/src/registry.tsx

@@ -3,8 +3,11 @@ import { RuntimeComponent, RuntimeTrait } from "@meta-ui/core";
 import { setStore } from "./store";
 import { SlotsMap } from "./App";
 // components
+/* --- plain --- */
 import PlainButton from "./components/plain/Button";
 import CoreText from "./components/core/Text";
+/* --- chakra-ui --- */
+import ChakraUIRoot from "./components/chakra-ui/Root";
 import ChakraUIButton from "./components/chakra-ui/Button";
 import ChakraUITabs from "./components/chakra-ui/Tabs";
 // traits
@@ -95,6 +98,7 @@ export const registry = new Registry();
 
 registry.registerComponent(PlainButton);
 registry.registerComponent(CoreText);
+registry.registerComponent(ChakraUIRoot);
 registry.registerComponent(ChakraUIButton);
 registry.registerComponent(ChakraUITabs);