diff --git a/packages/runtime/example/tooltip/index.html b/packages/runtime/example/tooltip/index.html new file mode 100644 index 00000000..d89153f7 --- /dev/null +++ b/packages/runtime/example/tooltip/index.html @@ -0,0 +1,72 @@ + + + + + + meta-ui runtime example: tooltip + + + +
+ + + diff --git a/packages/runtime/src/App.tsx b/packages/runtime/src/App.tsx index c23fad8e..150d8756 100644 --- a/packages/runtime/src/App.tsx +++ b/packages/runtime/src/App.tsx @@ -1,16 +1,8 @@ -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { Application, - ComponentTrait, createApplication, RuntimeApplication, - Trait, } from '@meta-ui/core'; import { merge } from 'lodash'; import { registry, TraitResult } from './registry'; diff --git a/packages/runtime/src/components/chakra-ui/Button.tsx b/packages/runtime/src/components/chakra-ui/Button.tsx index c6d46686..582e2680 100644 --- a/packages/runtime/src/components/chakra-ui/Button.tsx +++ b/packages/runtime/src/components/chakra-ui/Button.tsx @@ -4,6 +4,7 @@ import { Static, Type } from '@sinclair/typebox'; import { Button as BaseButton } from '@chakra-ui/react'; import Text, { TextProps, TextPropertySchema } from '../_internal/Text'; import { ComponentImplementation } from '../../registry'; +import { ColorSchemePropertySchema } from './Types/ColorScheme'; const Button: ComponentImplementation<{ text: TextProps['value']; @@ -40,30 +41,6 @@ const Button: ComponentImplementation<{ ); }; -const ColorSchemePropertySchema = Type.Optional( - Type.KeyOf( - Type.Object({ - whiteAlpha: Type.String(), - blackAlpha: Type.String(), - gray: Type.String(), - red: Type.String(), - orange: Type.String(), - yellow: Type.String(), - green: Type.String(), - teal: Type.String(), - blue: Type.String(), - cyan: Type.String(), - purple: Type.String(), - pink: Type.String(), - linkedin: Type.String(), - facebook: Type.String(), - messenger: Type.String(), - whatsapp: Type.String(), - twitter: Type.String(), - telegram: Type.String(), - }) - ) -); const IsLoadingPropertySchema = Type.Optional(Type.Boolean()); const StateSchema = Type.Object({ diff --git a/packages/runtime/src/components/chakra-ui/Checkbox.tsx b/packages/runtime/src/components/chakra-ui/Checkbox.tsx index 61a44e1d..65cdcddb 100644 --- a/packages/runtime/src/components/chakra-ui/Checkbox.tsx +++ b/packages/runtime/src/components/chakra-ui/Checkbox.tsx @@ -4,33 +4,10 @@ import { Static, Type } from '@sinclair/typebox'; import { Checkbox as BaseCheckbox } from '@chakra-ui/react'; import { ComponentImplementation } from '../../registry'; import Text, { TextProps, TextPropertySchema } from '../_internal/Text'; +import { ColorSchemePropertySchema } from './Types/ColorScheme'; const DefaultIsCheckedSchema = Type.Optional(Type.Boolean()); export const IsDisabledSchema = Type.Optional(Type.Boolean()); -export const ColorSchemePropertySchema = Type.Optional( - Type.KeyOf( - Type.Object({ - whiteAlpha: Type.String(), - blackAlpha: Type.String(), - gray: Type.String(), - red: Type.String(), - orange: Type.String(), - yellow: Type.String(), - green: Type.String(), - teal: Type.String(), - blue: Type.String(), - cyan: Type.String(), - purple: Type.String(), - pink: Type.String(), - linkedin: Type.String(), - facebook: Type.String(), - messenger: Type.String(), - whatsapp: Type.String(), - twitter: Type.String(), - telegram: Type.String(), - }) - ) -); export const SizePropertySchema = Type.KeyOf( Type.Object({ sm: Type.String(), diff --git a/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx b/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx index 2a42741d..3a341a13 100644 --- a/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx +++ b/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx @@ -1,14 +1,11 @@ -import React, { useState, useEffect } from "react"; -import { createComponent } from "@meta-ui/core"; -import { Static, Type } from "@sinclair/typebox"; -import { CheckboxGroup as BaseCheckboxGroup } from "@chakra-ui/react"; -import { ComponentImplementation } from "../../registry"; -import Slot from "../_internal/Slot"; -import { - ColorSchemePropertySchema, - SizePropertySchema, - IsDisabledSchema, -} from "./Checkbox"; +import React, { useState, useEffect } from 'react'; +import { createComponent } from '@meta-ui/core'; +import { Static, Type } from '@sinclair/typebox'; +import { CheckboxGroup as BaseCheckboxGroup } from '@chakra-ui/react'; +import { ComponentImplementation } from '../../registry'; +import Slot from '../_internal/Slot'; +import { SizePropertySchema, IsDisabledSchema } from './Checkbox'; +import { ColorSchemePropertySchema } from './Types/ColorScheme'; const DefaultValueSchema = Type.Optional( Type.Array(Type.Union([Type.String(), Type.Number()])) @@ -38,8 +35,7 @@ const CheckboxGroup: ComponentImplementation<{ size={size} defaultValue={defaultValue} isDisabled={isDisabled} - onChange={(val) => setValue(val)} - > + onChange={val => setValue(val)}> ); @@ -47,27 +43,27 @@ const CheckboxGroup: ComponentImplementation<{ export default { ...createComponent({ - version: "chakra_ui/v1", + version: 'chakra_ui/v1', metadata: { - name: "checkbox_group", - description: "chakra-ui checkbox group", + name: 'checkbox_group', + description: 'chakra-ui checkbox group', }, spec: { properties: [ { - name: "colorScheme", + name: 'colorScheme', ...ColorSchemePropertySchema, }, { - name: "size", + name: 'size', ...SizePropertySchema, }, { - name: "isDisabled", + name: 'isDisabled', ...IsDisabledSchema, }, { - name: "defaultValue", + name: 'defaultValue', ...DefaultValueSchema, }, ], diff --git a/packages/runtime/src/components/chakra-ui/Tooltip.tsx b/packages/runtime/src/components/chakra-ui/Tooltip.tsx new file mode 100644 index 00000000..45a61769 --- /dev/null +++ b/packages/runtime/src/components/chakra-ui/Tooltip.tsx @@ -0,0 +1,115 @@ +import React from 'react'; +import { createComponent } from '@meta-ui/core'; +import { Static, Type } from '@sinclair/typebox'; +import { Tooltip } from '@chakra-ui/react'; +import { TextProps, TextPropertySchema } from '../_internal/Text'; +import { ComponentImplementation } from '../../registry'; +import Slot from '../_internal/Slot'; +import { ColorSchemePropertySchema } from './Types/ColorScheme'; + +const TooltipImpl: ComponentImplementation<{ + text: TextProps['value']; + shouldWrapChildren: boolean; + placement: Static; + isOpen: boolean; + hasArrow: boolean; + isDisabled: boolean; + defaultIsOpen: boolean; +}> = ({ + text, + shouldWrapChildren, + placement = 'auto', + isOpen, + hasArrow, + isDisabled, + defaultIsOpen, + slotsMap, +}) => { + return ( + /* + Chakra tooltip requires children to be created by forwardRef. + If not, should add shouldWrapChildren. + */ + + + + ); +}; +export const PlacementPropertySchema = Type.Optional( + Type.KeyOf( + Type.Object({ + top: Type.String(), + right: Type.String(), + bottom: Type.String(), + left: Type.String(), + auto: Type.String(), + 'auto-start': Type.String(), + 'auto-end': Type.String(), + 'top-start': Type.String(), + 'top-end': Type.String(), + 'bottom-start': Type.String(), + 'bottom-end': Type.String(), + 'right-start': Type.String(), + 'right-end': Type.String(), + 'left-start': Type.String(), + 'left-end': Type.String(), + }) + ) +); + +export default { + ...createComponent({ + version: 'chakra_ui/v1', + metadata: { + name: 'tooltip', + description: 'chakra-ui tooltip', + }, + spec: { + properties: [ + { + name: 'text', + ...TextPropertySchema, + }, + { + name: 'colorScheme', + ...ColorSchemePropertySchema, + }, + { + name: 'shouldWrapChildren', + ...Type.Boolean(), + }, + { + name: 'defaultIsOpen', + ...Type.Boolean(), + }, + { + name: 'hasArrow', + ...Type.Boolean(), + }, + { + name: 'isDisabled', + ...Type.Boolean(), + }, + { + name: 'isOpen', + ...Type.Boolean(), + }, + { + name: 'placement', + ...PlacementPropertySchema, + }, + ], + acceptTraits: [], + state: {}, + methods: [], + }, + }), + impl: TooltipImpl, +}; diff --git a/packages/runtime/src/components/chakra-ui/Types/ColorScheme.ts b/packages/runtime/src/components/chakra-ui/Types/ColorScheme.ts new file mode 100644 index 00000000..5e66efb9 --- /dev/null +++ b/packages/runtime/src/components/chakra-ui/Types/ColorScheme.ts @@ -0,0 +1,26 @@ +import { Type } from '@sinclair/typebox'; + +export const ColorSchemePropertySchema = Type.Optional( + Type.KeyOf( + Type.Object({ + whiteAlpha: Type.String(), + blackAlpha: Type.String(), + gray: Type.String(), + red: Type.String(), + orange: Type.String(), + yellow: Type.String(), + green: Type.String(), + teal: Type.String(), + blue: Type.String(), + cyan: Type.String(), + purple: Type.String(), + pink: Type.String(), + linkedin: Type.String(), + facebook: Type.String(), + messenger: Type.String(), + whatsapp: Type.String(), + twitter: Type.String(), + telegram: Type.String(), + }) + ) +); diff --git a/packages/runtime/src/registry.tsx b/packages/runtime/src/registry.tsx index e827648d..c4874627 100644 --- a/packages/runtime/src/registry.tsx +++ b/packages/runtime/src/registry.tsx @@ -19,6 +19,7 @@ import ChakraUINumberInput from './components/chakra-ui/NumberInput'; import ChakraUICheckboxGroup from './components/chakra-ui/CheckboxGroup'; import ChakraUICheckbox from './components/chakra-ui/Checkbox'; import ChakraUIStack from './components/chakra-ui/Stack'; +import ChakraUITooltip from './components/chakra-ui/Tooltip'; import ChakraUIHStack from './components/chakra-ui/HStack'; import ChakraUIVStack from './components/chakra-ui/VStack'; import ChakraUIImage from './components/chakra-ui/Image'; @@ -139,6 +140,7 @@ registry.registerComponent(ChakraUINumberInput); registry.registerComponent(ChakraUICheckbox); registry.registerComponent(ChakraUICheckboxGroup); registry.registerComponent(ChakraUIStack); +registry.registerComponent(ChakraUITooltip); registry.registerComponent(ChakraUIHStack); registry.registerComponent(ChakraUIVStack); registry.registerComponent(ChakraUIImage);