impaktapps-ui-builder 1.0.0 → 1.0.1

package/components/RecordEditor/index.tsx

@@ -1,212 +0,0 @@
-import { FC, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { CodeEditor } from "@/components/CodeEditor";
-import { CODE_LANG } from "@/components/CodeEditor/CodeMirror/extensions/interface";
-import { VALIDATION_TYPES } from "@/utils/validationFactory";
-import { RecordEditorProps } from "./interface";
-import {
-  applyRecordEditorContainerStyle,
-  recordEditorLabelStyle,
-  recordEditorStyle,
-  recordKeyStyle,
-  recordStyle,
-  subLabelStyle,
-} from "./style";
-import Button from "@mui/material/Button";
-import Input from "@mui/material/Input";
-import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
-import { useTheme } from "@mui/material";
-
-export const RecordEditor: FC<RecordEditorProps> = (props) => {
-  const {
-    fillOnly,
-    name,
-    records,
-    customRender,
-    label,
-    subLabel,
-    onSubLabelClick,
-    onDelete,
-    onAdd,
-    withoutCodeMirror,
-    onChangeKey,
-    onChangeValue,
-    valueInputType,
-  } = props;
-
-  const { t } = useTranslation();
-  const theme = useTheme()
-  const valueExpectedType = useMemo(
-    () =>
-      valueInputType
-        ? valueInputType === VALIDATION_TYPES.ANY
-          ? undefined
-          : valueInputType
-        : VALIDATION_TYPES.STRING,
-    [valueInputType]
-  );
-
-  const recordList = useMemo(() => {
-    return (
-      <>
-        {records?.map((record, index) => {
-          if (customRender) {
-            return (
-              <div css={recordStyle} key={index}>
-                {customRender(record, index, fillOnly)}
-                <Button
-                  type="button"
-                  variant="outlined"
-                  onClick={() => {
-                    onDelete?.(index, record, name);
-                  }}
-                  endIcon={<DeleteIcon />}
-                />
-              </div>
-            );
-          }
-          return (
-            <div css={recordStyle} key={index}>
-              {withoutCodeMirror ? (
-                <Input
-                  sx={{
-                    height: "32px",
-                    minW: "160px",
-                    bdRadius: "8px 0 0 8px",
-                    width: "0",
-                  }}
-                  placeholder="key"
-                  value={record.key}
-                  readOnly={fillOnly}
-                  onChange={(e) => {
-                    onChangeKey?.(
-                      index,
-                      e.target.value.trim(),
-                      record.value,
-                      name
-                    );
-                  }}
-                />
-              ) : (
-                <CodeEditor
-                  scopeOfAutoComplete="page"
-                wrapperCss={recordKeyStyle}
-                  // height="32px"
-                  maxHeight="208px"
-                  maxWidth="100%"
-                  editable={!fillOnly}
-                  value={record.key}
-                  lang={CODE_LANG.JAVASCRIPT}
-                  placeholder="key"
-                  expectValueType={VALIDATION_TYPES.STRING}
-                  onChange={(value) => {
-                    onChangeKey?.(index, value.trim(), record.value, name);
-                  }}
-                  singleLine
-                />
-              )}
-              {withoutCodeMirror ? (
-                <Input
-                  sx={{
-                    height: "32px",
-                    minW: "160px",
-                    bdRadius: fillOnly ? "0 8px 8px 0" : "0",
-                    width: "0",
-                    color: "techPurple",
-                  }}
-                  placeholder="value"
-                  value={record.value}
-                  onChange={(e) => {
-                    onChangeValue?.(
-                      index,
-                      record.key,
-                      e.target.value.trim(),
-                      name
-                    );
-                  }}
-                />
-              ) : (
-                <CodeEditor
-                scopeOfAutoComplete="page"
-                // wrapperCss={recordKeyStyle}
-                // height="32px"
-                maxHeight="208px"
-                maxWidth="100%"
-                  lang={CODE_LANG.JAVASCRIPT}
-                  placeholder="value"
-                  value={record.value}
-                  expectValueType={valueExpectedType}
-                  singleLine
-                  onChange={(value) => {
-                    onChangeValue?.(index, record.key, value.trim(), name);
-                  }}
-                />
-              )}
-              {!fillOnly && (
-                <Button
-                  type="button"
-                  sx={{ bdRadius: "0 8px 8px 0", color: "grayBlue" }}
-                  variant="outlined"
-                  onClick={() => {
-                    onDelete?.(index, record, name);
-                  }}
-                  endIcon={<DeleteIcon />}
-                />
-              )}
-            </div>
-          );
-        })}
-      </>
-    );
-  }, [
-    customRender,
-    fillOnly,
-    name,
-    onChangeKey,
-    onChangeValue,
-    onDelete,
-    records,
-    valueExpectedType,
-    withoutCodeMirror,
-  ]);
-
-  return (
-    <div css={applyRecordEditorContainerStyle(label)}>
-      {label != "" && (
-        <span css={recordEditorLabelStyle(theme)}>
-          <span>{label}</span>
-          {subLabel && (
-            <span css={subLabelStyle(theme)} onClick={onSubLabelClick}>
-              {subLabel}
-            </span>
-          )}
-        </span>
-      )}
-
-      <div css={recordEditorStyle}>
-        {recordList}
-        {!fillOnly && (
-          <span>
-            <Button
-              sx={{ mb: "8px", pd: "1px 8px", color: "techPurple" }}
-              type="button"
-              size="medium"
-              variant="text"
-              onClick={() => {
-                onAdd?.(name);
-              }}
-              startIcon={
-                <AddIcon color="primary" />
-              }
-            >
-              {t("editor.action.panel.btn.new")}
-            </Button>
-          </span>
-        )}
-      </div>
-    </div>
-  );
-};
-
-RecordEditor.displayName = "RecordEditor";

package/components/RecordEditor/interface.ts

@@ -1,33 +0,0 @@
-import { ReactNode } from "react"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
-import { Params } from "@/page/App/components/PublicTypes/action/restApi"
-
-export interface RecordEditorProps {
-  label: string
-  subLabel?: string
-  onSubLabelClick?: () => void
-  name?: string
-  fillOnly?: boolean
-  records: Params[] | null
-  onAdd?: (name?: string) => void
-  customRender?: (
-    record: Params,
-    index: number,
-    fillOnly?: boolean,
-  ) => ReactNode
-  withoutCodeMirror?: boolean
-  onDelete?: (index: number, record: Params, name?: string) => void
-  onChangeKey?: (
-    index: number,
-    key: string,
-    value: string,
-    name?: string,
-  ) => void
-  onChangeValue?: (
-    index: number,
-    key: string,
-    value: string,
-    name?: string,
-  ) => void
-  valueInputType?: VALIDATION_TYPES
-}

package/components/RecordEditor/style.ts

@@ -1,99 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { SerializedStyles, css } from "@emotion/react"
-import { Theme } from "@mui/material"
-
-export function applyRecordEditorContainerStyle(label: string) {
-  return css`
-    display: flex;
-    padding-right: ${label !== "" ? "16px" : "0"};
-    flex-direction: row;
-  `
-}
-
-export const recordEditorStyle = css`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  margin-top:10px;
-`
-
-export const recordStyle = css`
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  min-height: 48px;
-
-  & > button {
-    color: ${globalColor(`grayBlue-05`)};
-
-    :hover {
-      color: ${globalColor(`grayBlue-02`)};
-      transition: color 200ms ease-in-out;
-    }
-  }
-`
-
-export const recordKeyStyle = css`
-  min-width: 1px;
-  flex-grow: 1;
-  width: 0;
-  height: auto;
-
-  .ͼ1.cm-editor {
-    border-radius: 8px 0 0 8px;
-  }
-`
-
-export const recordValueStyle = css`
-  margin-left: -1px;
-  flex-grow: 1;
-  width: 0;
-  height: auto;
-
-  .ͼ1.cm-editor {
-    border-radius: 0;
-  }
-`
-
-export function applyRecordValueStyle(fillOnly?: boolean): SerializedStyles {
-  const fillStyle = fillOnly
-    ? css`
-        .ͼ1.cm-editor {
-          border-radius: 0 8px 8px 0;
-        }
-      `
-    : css`
-        .ͼ1.cm-editor {
-          border-radius: 0;
-        }
-      `
-
-  return css`
-    margin-left: -1px;
-    flex-grow: 1;
-    width: 0;
-    height: auto;
-    ${fillStyle};
-  `
-}
-
-export const recordEditorLabelStyle =(theme:Theme)=> css`
-  min-width: 160px;
-  margin-left: 16px;
-  margin-right: 16px;
-  height: 48px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: start;
-  font-size: 14px;
-  font-weight: 500;
-  color: ${theme.palette.text.secondary};
-`
-
-export const subLabelStyle =(theme:Theme)=> css`
-  line-height: 20px;
-  color: ${theme.palette.text.secondary};
-  font-size: 12px;
-  cursor: pointer;
-`

package/components/Tabs/constant.tsx

@@ -1,42 +0,0 @@
-// import { lazy } from "react"
-// import i18n from "@/i18n/config"
-// import ComponentPanel from "@/page/App/components/ComponentPanel"
-import i18n from "@/i18n/config";
-import { SimpleTabsItem } from "./interface"
-import ComponentPanel from "@/page/App/components/componentPanel"
-
-
-import ConfigPanel from "@/page/App/components/ConfigPanel"
-import PagePanel from "@/page/App/components/PagePanel";
-
-export const ACTION_PANEL_TABS: SimpleTabsItem[] = [
-  {
-    key: "general",
-    title:  i18n.t("editor.action.resource.db.title.general_option"),
-  },
-  {
-    key: "advanced",
-    title:i18n.t("editor.action.panel.label.advanced.advanced"),
-  },
-]
-
-export const COMPONENT_MANAGER_TABS: SimpleTabsItem[] = [
-  {
-    key: "Page",
-    title: "Page",
-    // i18n.t("editor.page.tab_title"),
-    element: <PagePanel />,
-  },
-  {
-    key: "Inspect",
-    title:"Inspect",
-    //  i18n.t("editor.inspect.tab_title"),
-    element: <ConfigPanel />,
-  },
-  {
-    key: "Insert",
-    title: 'Insert',
-    // i18n.t("editor.widget_picker.tab_title"),
-    element: <ComponentPanel />,
-  },
-]

package/components/Tabs/index.tsx

@@ -1,55 +0,0 @@
-import { FC, useCallback, useEffect, useState } from "react"
-import { SimpleTabsItem, SimpleTabsProps } from "./interface"
-import { applyTabsHeaderItemStyle, tabsHeaderContainerStyle } from "./style"
-import { useTheme } from "@mui/material"
-
-
-export const getRenderBody = (activeKey: string, items: SimpleTabsItem[]) => {
-
-  const item = items.find((item) => item.key === activeKey)
-  if (item) {
-    return item.element
-  }
-  return null
-}
-
-export const SimpleTabs: FC<SimpleTabsProps> = (props) => {
-  const { items, activeKey, containerStyle, handleClickChangeTab } = props
-  const theme = useTheme()
-  const [innerActiveKey, setInnerActiveKey] = useState(activeKey)
-  const handleChangeTab = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      const target = e.target as HTMLSpanElement
-      const key = target.dataset.key
-      if (key) {
-        handleClickChangeTab(key)
-        setInnerActiveKey(key)
-      }
-    },
-    [handleClickChangeTab],
-  )
-
-  useEffect(() => {
-    if (activeKey !== innerActiveKey) {
-      setInnerActiveKey(activeKey)
-    }
-  }, [activeKey, innerActiveKey])
-  return (
-    <>
-      <div
-        css={[tabsHeaderContainerStyle, containerStyle]}
-        onClick={handleChangeTab}
-      >
-        {items.map((item) => (
-          <span
-            key={item.key}
-            css={applyTabsHeaderItemStyle(innerActiveKey === item.key,theme)}
-            data-key={item.key}
-          >
-            {item.title}
-          </span>
-        ))}
-      </div>
-    </>
-  )
-}

package/components/Tabs/interface.ts

@@ -1,15 +0,0 @@
-import { SerializedStyles } from "@emotion/react"
-import { ReactNode } from "react"
-
-export interface SimpleTabsItem {
-  title: string
-  key: string
-  element?: ReactNode
-}
-
-export interface SimpleTabsProps {
-  items: SimpleTabsItem[]
-  activeKey: string
-  handleClickChangeTab: (activeKey: string) => void
-  containerStyle?: SerializedStyles
-}

package/components/Tabs/style.ts

@@ -1,26 +0,0 @@
-
-import { css } from "@emotion/react"
-import { Theme } from "@mui/material"
-
-export const tabsHeaderContainerStyle = css`
-  display: flex;
-  width: 100%;
-  padding: 12px 16px;
-  gap: 8px;
-`
-
-export const applyTabsHeaderItemStyle = (isActive: boolean,theme:Theme) => css`
-  padding: 1px 4px;
-  height: 24px;
-  line-height: 24px;
-  border-radius: 4px;
-  font-size: 14px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-weight: ${isActive ? 500 : 400};
-  color: ${isActive ? theme.palette.text.primary : theme.palette.action.active };
-  :hover {
-    background-color: ${theme.palette.action.focus};
-  }
-`

package/components/ThemedText.tsx

@@ -1,60 +0,0 @@
-import { Text, type TextProps, StyleSheet } from 'react-native';
-
-import { useThemeColor } from '@/hooks/useThemeColor';
-
-export type ThemedTextProps = TextProps & {
-  lightColor?: string;
-  darkColor?: string;
-  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
-};
-
-export function ThemedText({
-  style,
-  lightColor,
-  darkColor,
-  type = 'default',
-  ...rest
-}: ThemedTextProps) {
-  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
-
-  return (
-    <Text
-      style={[
-        { color },
-        type === 'default' ? styles.default : undefined,
-        type === 'title' ? styles.title : undefined,
-        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
-        type === 'subtitle' ? styles.subtitle : undefined,
-        type === 'link' ? styles.link : undefined,
-        style,
-      ]}
-      {...rest}
-    />
-  );
-}
-
-const styles = StyleSheet.create({
-  default: {
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  defaultSemiBold: {
-    fontSize: 16,
-    lineHeight: 24,
-    fontWeight: '600',
-  },
-  title: {
-    fontSize: 32,
-    fontWeight: 'bold',
-    lineHeight: 32,
-  },
-  subtitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  link: {
-    lineHeight: 30,
-    fontSize: 16,
-    color: '#0a7ea4',
-  },
-});

package/components/ThemedView.tsx

@@ -1,14 +0,0 @@
-// import { View, type ViewProps } from 'react-native';
-
-// import { useThemeColor } from '@/hooks/useThemeColor';
-
-// export type ThemedViewProps = ViewProps & {
-//   lightColor?: string;
-//   darkColor?: string;
-// };
-
-// export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
-//   const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
-
-//   return <View style={[{ backgroundColor }, style]} {...otherProps} />;
-// }

package/components/__tests__/ThemedText-test.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import renderer from 'react-test-renderer';
-
-import { ThemedText } from '../ThemedText';
-
-it(`renders correctly`, () => {
-  const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});

package/components/__tests__/__snapshots__/ThemedText-test.tsx.snap

@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-<Text
-  style={
-    [
-      {
-        "color": "#11181C",
-      },
-      {
-        "fontSize": 16,
-        "lineHeight": 24,
-      },
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-    ]
-  }
->
-  Snapshot test!
-</Text>
-`;

package/components/ui/IconSymbol.ios.tsx

@@ -1,32 +0,0 @@
-// import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
-// import { StyleProp, ViewStyle } from 'react-native';
-
-// export function IconSymbol({
-//   name,
-//   size = 24,
-//   color,
-//   style,
-//   weight = 'regular',
-// }: {
-//   name: SymbolViewProps['name'];
-//   size?: number;
-//   color: string;
-//   style?: StyleProp<ViewStyle>;
-//   weight?: SymbolWeight;
-// }) {
-//   return (
-//     <SymbolView
-//       weight={weight}
-//       tintColor={color}
-//       resizeMode="scaleAspectFit"
-//       name={name}
-//       style={[
-//         {
-//           width: size,
-//           height: size,
-//         },
-//         style,
-//       ]}
-//     />
-//   );
-// }

package/components/ui/IconSymbol.tsx

@@ -1,43 +0,0 @@
-// // This file is a fallback for using MaterialIcons on Android and web.
-
-// import MaterialIcons from '@expo/vector-icons/MaterialIcons';
-// import { SymbolWeight } from 'expo-symbols';
-// import React from 'react';
-// import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native';
-
-// // Add your SFSymbol to MaterialIcons mappings here.
-// const MAPPING = {
-//   // See MaterialIcons here: https://icons.expo.fyi
-//   // See SF Symbols in the SF Symbols app on Mac.
-//   'house.fill': 'home',
-//   'paperplane.fill': 'send',
-//   'chevron.left.forwardslash.chevron.right': 'code',
-//   'chevron.right': 'chevron-right',
-// } as Partial<
-//   Record<
-//     import('expo-symbols').SymbolViewProps['name'],
-//     React.ComponentProps<typeof MaterialIcons>['name']
-//   >
-// >;
-
-// export type IconSymbolName = keyof typeof MAPPING;
-
-// /**
-//  * An icon component that uses native SFSymbols on iOS, and MaterialIcons on Android and web. This ensures a consistent look across platforms, and optimal resource usage.
-//  *
-//  * Icon `name`s are based on SFSymbols and require manual mapping to MaterialIcons.
-//  */
-// export function IconSymbol({
-//   name,
-//   size = 24,
-//   color,
-//   style,
-// }: {
-//   name: IconSymbolName;
-//   size?: number;
-//   color: string | OpaqueColorValue;
-//   style?: StyleProp<ViewStyle>;
-//   weight?: SymbolWeight;
-// }) {
-//   return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
-// }

package/components/ui/TabBarBackground.ios.tsx

@@ -1,22 +0,0 @@
-// import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
-// import { BlurView } from 'expo-blur';
-// import { StyleSheet } from 'react-native';
-// import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-// export default function BlurTabBarBackground() {
-//   return (
-//     <BlurView
-//       // System chrome material automatically adapts to the system's theme
-//       // and matches the native tab bar appearance on iOS.
-//       tint="systemChromeMaterial"
-//       intensity={100}
-//       style={StyleSheet.absoluteFill}
-//     />
-//   );
-// }
-
-// export function useBottomTabOverflow() {
-//   const tabHeight = useBottomTabBarHeight();
-//   const { bottom } = useSafeAreaInsets();
-//   return tabHeight - bottom;
-// }