impaktapps-ui-builder 0.0.382457 → 1.0.0

package/components/RecordEditor/index.tsx

@@ -0,0 +1,212 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1,42 @@
+// 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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,26 @@
+
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,14 @@
+// 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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,24 @@
+// 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

@@ -0,0 +1,32 @@
+// 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

@@ -0,0 +1,43 @@
+// // 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

@@ -0,0 +1,22 @@
+// 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;
+// }