impaktapps-ui-builder 1.0.0 → 1.0.1-alpha.1

package/theme.ts

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

@@ -1,67 +0,0 @@
-// {
-//   "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

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

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

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

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

package/utils/DropDown/interface.ts

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

@@ -1,212 +0,0 @@
-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",
-  ])
-}