impaktapps-ui-builder 0.0.382460 → 1.0.0

package/theme.ts

@@ -0,0 +1,206 @@
+// src/theme.ts
+// import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import { createTheme, ThemeOptions } from '@mui/material';
+const sharedThemeOptions: ThemeOptions = {
+   components: {
+      MuiButton: {
+         defaultProps: {
+            size: 'small'
+         }
+      },
+      MuiButtonGroup: {
+         defaultProps: {
+            size: 'small'
+         }
+      },
+      MuiCheckbox: {
+         defaultProps: {
+            size: 'small'
+         }
+      },
+      MuiFab: {
+         defaultProps: {
+            size: 'small'
+         }
+      },
+      MuiFormControl: {
+         defaultProps: {
+            size: 'small'
+         }
+      },
+      MuiFormHelperText: {
+         defaultProps: {
+            margin: 'dense'
+         }
+      },
+      MuiIconButton: {
+         defaultProps: {
+            size: 'small'
+         }
+      },
+      MuiInputBase: {
+         defaultProps: {
+            fullWidth: true
+         }
+      },
+      MuiInputLabel: {
+         defaultProps: {}
+      },
+      MuiRadio: {
+         defaultProps: {
+            size: 'small'
+         }
+      },
+      MuiSwitch: {
+         defaultProps: {
+            size: 'small'
+         }
+      },
+      MuiTextField: {
+         defaultProps: {
+            size: 'small',
+            fullWidth: true,
+            sx: { margin: '8px 0' }
+         }
+      },
+      MuiAutocomplete: {
+         defaultProps: {
+            size: 'small'
+         }
+      },
+      MuiAccordion: {
+         defaultProps: {
+            disableGutters: true,
+            elevation: 0,
+            square: true,
+            defaultExpanded: true
+         }
+      },
+      MuiAccordionSummary: {
+         defaultProps: {
+            //  expandIcon: <ArrowDownwardIcon />,
+            sx: { minHeight: 'auto' }
+         }
+      }
+   },
+   shape: {
+      borderRadius: 2
+   },
+   spacing: 4,
+   typography: {
+      fontSize: 12,
+      fontWeightBold: 400
+   }
+};
+const theme =  createTheme({
+   // palette:
+   //  {
+   //    mode: 'dark',
+   //     primary: {
+   //        main: '#0e639c' /* --theia-button-background */,
+   //        contrastText: '#ffffff' /* --theia-button-foreground */,
+   //        dark: '#1177bb' /* --theia-button-hoverBackground */,
+   //        light: '#3794ff' /* --theia-editorInfo-foreground */
+   //     },
+   //    secondary: {
+   //       main: '#3a3d41' /* --theia-button-secondaryBackground */,
+   //       contrastText: '#ffffff' /* --theia-button-secondaryForeground */,
+   //       dark: '#45494e' /* --theia-button-secondaryHoverBackground */,
+   //       light: 'rgba(238, 238, 238, 0.7)' /* --theia-editorHint-foreground */
+   //    },
+   //    background: {
+   //       default: '#1e1e1e' /* --theia-editor-background */,
+   //       paper: '#1e1e1e' /* --theia-editor-background */
+   //    },
+   //    text: {
+   //       primary: '#d4d4d4',
+   //    }
+   // },
+palette: {
+    "mode": "light",
+    "primary": {
+        "main": "#007acc",
+        "contrastText": "#ffffff",
+        "dark": "#0062a3",
+        "light": "#1a85ff"
+    },
+    "secondary": {
+        "main": "#5f6a79",
+        "contrastText": "#ffffff",
+        "dark": "#4c5561",
+        "light": "#6c6c6c"
+    },
+    "background": {
+        "default": "#ffffff",
+        "paper": "#ffffff"
+    },
+    "text": {
+        "primary": "#000000",
+        "secondary": "rgba(0, 0, 0, 0.6)",
+        "disabled": "rgba(0, 0, 0, 0.38)"
+    },
+    "common": {
+        "black": "#000",
+        "white": "#fff"
+    },
+    "error": {
+        "main": "#d32f2f",
+        "light": "#ef5350",
+        "dark": "#c62828",
+        "contrastText": "#fff"
+    },
+    "warning": {
+        "main": "#ed6c02",
+        "light": "#ff9800",
+        "dark": "#e65100",
+        "contrastText": "#fff"
+    },
+    "info": {
+        "main": "#0288d1",
+        "light": "#03a9f4",
+        "dark": "#01579b",
+        "contrastText": "#fff"
+    },
+    "success": {
+        "main": "#2e7d32",
+        "light": "#4caf50",
+        "dark": "#1b5e20",
+        "contrastText": "#fff"
+    },
+    "grey": {
+        "50": "#fafafa",
+        "100": "#f5f5f5",
+        "200": "#eeeeee",
+        "300": "#e0e0e0",
+        "400": "#bdbdbd",
+        "500": "#9e9e9e",
+        "600": "#757575",
+        "700": "#616161",
+        "800": "#424242",
+        "900": "#212121",
+        "A100": "#f5f5f5",
+        "A200": "#eeeeee",
+        "A400": "#bdbdbd",
+        "A700": "#616161"
+    },
+    "contrastThreshold": 3,
+    "tonalOffset": 0.2,
+    "divider": "rgba(0, 0, 0, 0.12)",
+    "action": {
+        "active": "rgba(0, 0, 0, 0.54)",
+        "hover": "rgba(0, 0, 0, 0.04)",
+        "hoverOpacity": 0.04,
+        "selected": "rgba(0, 0, 0, 0.08)",
+        "selectedOpacity": 0.08,
+        "disabled": "rgba(0, 0, 0, 0.26)",
+        "disabledBackground": "rgba(0, 0, 0, 0.12)",
+        "disabledOpacity": 0.38,
+        "focus": "rgba(0, 0, 0, 0.12)",
+        "focusOpacity": 0.12,
+        "activatedOpacity": 0.12
+    }
+ },
+   ...sharedThemeOptions
+ });
+
+export default theme;

package/tsconfig.json

@@ -0,0 +1,67 @@
+// {
+//   "extends": "expo/tsconfig.base",
+//   "compilerOptions": {
+//     "jsx": "react-jsx",
+  
+    
+//     "skipLibCheck": true,
+//     "sourceMap": true,
+//     "allowImportingTsExtensions": true,
+//     "resolveJsonModule": true,
+//     "isolatedModules": true,
+//     "noEmit": true,
+    
+
+//     /* Linting */
+//     "strict": true,
+//     "jsxImportSource": "@emotion/react",
+//     "noUnusedLocals": true,
+//     "noUnusedParameters": true,
+//     "noFallthroughCasesInSwitch": true,
+    
+    
+//     "paths": {
+//       "@/*": [
+//         "./*"
+//       ],
+     
+//     "@assets/*":["./assets/*"], // Ensure correct alias
+     
+//     }
+//   },
+//   "include": [
+//     "**/*.ts",
+//     "**/*.tsx",
+//     ".expo/types/**/*.ts",
+//     "expo-env.d.ts"
+//   ]
+// }
+
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "allowImportingTsExtensions": true,
+
+    "strict": false,
+    "jsxImportSource": "@emotion/react",
+    
+
+    "paths": {
+      "@/*": [
+        "./*"
+      ],
+     
+    "@assets/*":["./assets/*"], // Ensure correct alias
+     
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.json",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}

package/utils/DropDown/dropdown.tsx

@@ -0,0 +1,63 @@
+import { FC } from "react"
+import { DropdownProps } from "./interface"
+import { Trigger } from "../trigger"
+import { useMergeValue } from "./use-merge-value"
+
+export const Dropdown: FC<DropdownProps> = (props) => {
+  const {
+    onFocus,
+    onBlur,
+    children,
+    colorScheme = "white",
+    dropList,
+    disabled,
+    position = "bottom-start",
+    triggerProps,
+    trigger = "click",
+    defaultPopupVisible,
+    autoAlignPopupWidth,
+    popupVisible,
+    onVisibleChange,
+    ...otherProps
+  } = props
+ 
+  const [currentPopupVisible, setCurrentPopupVisible] = useMergeValue(false, {
+    defaultValue: defaultPopupVisible,
+    value: popupVisible,
+  })
+
+  const changePopupVisible = (visible: boolean) => {
+    if (popupVisible === undefined) {
+      setCurrentPopupVisible(visible)
+    }
+    onVisibleChange?.(visible)
+  }
+
+  return (
+    <Trigger
+      onFocus={onFocus}
+      onBlur={onBlur}
+      trigger={trigger}
+      colorScheme={colorScheme}
+      autoAlignPopupWidth={autoAlignPopupWidth}
+      withoutPadding={true}
+      clickOutsideToClose={true}
+      closeOnInnerClick={true}
+      position={position}
+      showArrow={false}
+      alignPoint={trigger === "contextmenu"}
+      popupVisible={currentPopupVisible}
+      content={dropList}
+      onVisibleChange={(visible: boolean) => {
+        changePopupVisible(visible)
+      }}
+      disabled={disabled}
+      {...triggerProps}
+      {...otherProps}
+    >
+      {children}
+    </Trigger>
+  )
+}
+
+Dropdown.displayName = "Dropdown"

package/utils/DropDown/droplist-item.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, useContext } from "react"
+import { DropListItemProps } from "./interface"
+import { DropListContext } from "./droplist"
+import { applyItemCss, deleteCssProps } from "./style"
+import { useTheme } from "@mui/material"
+
+
+
+export const DropListItem = forwardRef<HTMLDivElement, DropListItemProps>(
+  (props, ref) => {
+    const {
+      title,
+      children,
+      disabled,
+      onClick,
+      // hoverColorScheme,
+      deleted,
+      selected,
+      value,
+      isSelectOption = true,
+      ...otherProps
+    } = props
+const theme = useTheme()
+    const {
+      onClickItem,
+      // hoverColorScheme: contextHoverColorScheme = "grayBlue",
+    } = useContext(DropListContext)
+    // const finalHoverColorScheme = hoverColorScheme ?? contextHoverColorScheme
+
+    return (
+      <div
+        ref={ref}
+        css={applyItemCss(
+          theme,
+          disabled,
+          selected,
+          deleted,
+        )}
+        onClick={(event) => {
+          if (disabled) return
+          onClick?.(event)
+          if (isSelectOption) {
+            onClickItem?.(value, title ? title : children, event)
+          }
+        }}
+        {...deleteCssProps(otherProps)}
+      >
+        {title ? title : children}
+      </div>
+    )
+  },
+)
+
+DropListItem.displayName = "DropListItem"

package/utils/DropDown/droplist.tsx

@@ -0,0 +1,48 @@
+import { createContext, forwardRef, MouseEvent, ReactNode } from "react"
+import { DropListProps } from "./interface"
+import {applyListCss, deleteCssProps } from "./style"
+import { TriggerColorScheme } from "../trigger"
+import { applyBoxStyle } from "../model/src/style"
+import { useTheme } from "@mui/material"
+
+
+
+
+export const DropListContext = createContext<{
+  onClickItem?: (
+    key: string | number,
+    clickedNode: ReactNode,
+    event: MouseEvent,
+  ) => void
+  hoverColorScheme?: TriggerColorScheme
+}>({})
+
+export const DropList = forwardRef<HTMLDivElement, DropListProps>(
+  (props, ref) => {
+    const {
+      children,
+      onClickItem,
+      hoverColorScheme = "grayBlue",
+      ...otherProps
+    } = props
+ const theme = useTheme()
+    return (
+      <div
+        ref={ref}
+        css={[applyListCss(theme), applyBoxStyle(props,theme)]}
+        {...deleteCssProps(otherProps)}
+      >
+        <DropListContext.Provider
+          value={{
+            onClickItem,
+            hoverColorScheme,
+          }}
+        >
+          {children}
+        </DropListContext.Provider>
+      </div>
+    )
+  },
+)
+
+DropList.displayName = "DropList"

package/utils/DropDown/index.ts

@@ -0,0 +1,4 @@
+export * from "./dropdown"
+export * from "./droplist"
+export * from "./droplist-item"
+export * from "./interface"

package/utils/DropDown/interface.ts

@@ -0,0 +1,47 @@
+import { HTMLAttributes, MouseEvent,  ReactNode, SyntheticEvent } from "react"
+import { TriggerColorScheme, TriggerProps } from "../trigger"
+import { BoxProps } from "../model/src"
+
+
+
+export interface DropdownProps {
+  onBlur?: (e: SyntheticEvent) => void
+  onFocus?: (e: SyntheticEvent) => void
+  children?: ReactNode
+  colorScheme?: TriggerColorScheme
+  dropList?: ReactNode
+  position?: TriggerProps["position"]
+  trigger?: TriggerProps["trigger"]
+  disabled?: boolean
+  defaultPopupVisible?: boolean
+  popupVisible?: boolean
+  triggerProps?: Partial<TriggerProps>
+  autoAlignPopupWidth?: boolean
+  // events
+  onVisibleChange?: (visible: boolean) => void
+}
+
+export interface DropListProps
+  extends HTMLAttributes<HTMLDivElement>,
+    BoxProps {
+  disabled?: boolean
+  hoverColorScheme?: TriggerColorScheme
+  onClickItem?: (
+    key: string | number,
+    clickedNode: ReactNode,
+    event: MouseEvent,
+  ) => void
+}
+
+export interface DropListItemProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title">,
+    BoxProps {
+  value: string | number
+  colorScheme?: TriggerColorScheme
+  hoverColorScheme?: TriggerColorScheme
+  selected?: boolean
+  deleted?: boolean
+  isSelectOption?: boolean
+  title?: string | ReactNode
+  disabled?: boolean
+}

package/utils/DropDown/style.ts

@@ -0,0 +1,212 @@
+import { css, SerializedStyles } from "@emotion/react"
+import { BoxProps } from "../model/src"
+import { omit } from "../model/src/omit"
+
+import { globalColor } from "../colorBuilder"
+
+import { Theme } from "@mui/material"
+
+export function applyListCss(theme: Theme): SerializedStyles {
+  return css`
+    position: relative;
+    border-radius: 8px;
+    overflow: auto;
+    background-color:  ${theme.palette.secondary.main};
+    padding: 8px 0;
+  `
+}
+
+export function applyItemCss(
+  theme: Theme,
+  isDisabled?: boolean,
+  selected?: boolean,
+  deleted?: boolean,
+): SerializedStyles {
+  const hoverCss = css`
+    color: ${deleted ? globalColor("red-03") : theme.palette.text.secondary};
+    &:hover {
+      cursor: pointer;
+      color:${ theme.palette.text.primary};
+      background-color: ${deleted
+      ? "red"
+      : theme.palette.background.default
+    }
+  `
+
+  const disabledCss = css`
+    cursor: not-allowed;
+    color: ${globalColor(`grayBlue-05`)};
+  `
+
+  const selectedStyle = (theme: Theme) => css`
+     color: ${theme.palette.action.selected};
+     background:  ${theme.palette.action.focus};
+  `
+  let finalStyle
+
+  if (selected) {
+    finalStyle = selectedStyle(theme)
+  } else {
+    if (isDisabled) {
+      finalStyle = disabledCss
+    } else {
+      finalStyle = hoverCss
+    }
+  }
+
+  return css`
+    font-size: 14px;
+    line-height: 32px;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+    padding: 0 16px;
+    ${finalStyle};
+  `
+}
+/////
+
+export function applyBoxStyle(props: BoxProps, theme: Theme): SerializedStyles {
+  return css`
+    //SizeStyledProps
+    width: ${props.w};
+    min-width: ${props.minW};
+    max-width: ${props.maxW};
+    height: ${props.h};
+    min-height: ${props.minH};
+    max-height: ${props.maxH};
+    padding-top: ${props.pt};
+    padding-bottom: ${props.pb};
+    padding-left: ${props.pl};
+    padding-right: ${props.pr};
+    padding: ${props.pd};
+    margin-left: ${props.ml};
+    margin-right: ${props.mr};
+    margin-top: ${props.mt};
+    margin-bottom: ${props.mb};
+    margin: ${props.mg};
+    //ShapeStyledProps
+    border-top: ${props.bt};
+    border-bottom: ${props.bb};
+    border-left: ${props.bl};
+    border-right: ${props.br};
+    border-radius: ${props.bdRadius};
+    border: ${props.bd};
+    //ColorStyledProps
+    background: ${theme?.palette?.background?.default};
+    background-color: ${theme?.palette?.secondary?.main};
+    border-color: ${props.bdColor};
+     color: ${theme?.palette?.text?.secondary}
+    opacity: ${props.opac};
+    //PositionStyledProps
+    position: ${props.pos};
+    top: ${props.posT};
+    left: ${props.posL};
+    bottom: ${props.posB};
+    right: ${props.posR};
+    z-index: ${props.z};
+    overflow: ${props.ov};
+    overflow-x: ${props.ovX};
+    overflow-y: ${props.ovY};
+    // FlexStyledProps
+    display: ${props.disp};
+    align-items: ${props.alignItems};
+    align-content: ${props.alignContent};
+    justify-content: ${props.justifyContent};
+    justify-items: ${props.justifyItems};
+    flex-wrap: ${props.flexWrap};
+    flex-direction: ${props.flexDirection};
+    flex: ${props.flex};
+    flex-grow: ${props.flexGrow};
+    flex-shrink: ${props.flexShrink};
+    flex-basis: ${props.flexBasis};
+    justify-self: ${props.justifySelf};
+    align-self: ${props.alignSelf};
+    order: ${props.o};
+    //FontStyledProps
+    font-size: ${props.fs};
+    font-family: ${props.ff};
+    font-weight: ${props.fw};
+    visibility: ${props.v};
+    // UserProps
+    cursor: ${props.cur};
+    ${props._css};
+    // DisplayStyledProps
+    left: ${props.l};
+    top: ${props.t};
+    right: ${props.r};
+    bottom: ${props.b};
+  `
+}
+
+export function deleteCssProps(obj: object): object {
+  return omit(obj, [
+    //SizeStyledProps
+    "w",
+    "minW",
+    "maxW",
+    "h",
+    "minH",
+    "maxH",
+    "pt",
+    "pb",
+    "pl",
+    "pr",
+    "pd",
+    "ml",
+    "mr",
+    "mt",
+    "mb",
+    "mg",
+    //ShapeStyledProps
+    "bt",
+    "bb",
+    "bl",
+    "br",
+    "bdRadius",
+    "bd",
+    //ColorStyledProps
+    "bg",
+    "bgColor",
+    "bdColor",
+    "c",
+    "opac",
+    //PositionStyledProps
+    "pos",
+    "posT",
+    "posL",
+    "posB",
+    "posR",
+    "z",
+    "ov",
+    "ovX",
+    "ovY",
+    "v",
+    // FlexStyledProps
+    "disp",
+    "alignItems",
+    "alignContent",
+    "justifyContent",
+    "justifyItems",
+    "flexWrap",
+    "flexDirection",
+    "flex",
+    "flexGrow",
+    "flexShrink",
+    "flexBasis",
+    "justifySelf",
+    "alignSelf",
+    "o",
+    //FontStyledProps
+    "fs",
+    "ff",
+    "fw",
+    //UserProps
+    "cur",
+    "_css",
+    //DisplayStyledProps
+    "l",
+    "t",
+    "r",
+    "b",
+  ])
+}