@kaspernj/api-maker 1.0.2052 → 1.0.2054

package/src/super-admin/layout/header/index.jsx

@@ -1,144 +0,0 @@
-// import "../../../../src/super-admin/layout/header/style"
-import React, {useRef} from "react"
-import BaseComponent from "../../../base-component"
-import Icon from "../../../utils/icon"
-import memo from "set-state-compare/src/memo"
-import PropTypes from "prop-types"
-import PropTypesExact from "prop-types-exact"
-import {shapeComponent} from "set-state-compare/src/shape-component"
-import Text from "../../../utils/text"
-import {Pressable, View} from "react-native"
-import useBreakpoint from "../../../use-breakpoint"
-import useEventListener from "../../../use-event-listener"
-
-export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends BaseComponent {
-  static propTypes = PropTypesExact({
-    actions: PropTypes.any,
-    onTriggerMenu: PropTypes.func.isRequired,
-    title: PropTypes.string
-  })
-
-  setup() {
-    const {name: breakpoint, mdUp} = useBreakpoint()
-
-    this.headerActionsRef = useRef()
-    this.setInstance({breakpoint, mdUp})
-    this.useStates({
-      headerActionsActive: false
-    })
-
-    useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
-  }
-
-  render() {
-    const {breakpoint, mdUp} = this.tt
-    const {actions, onTriggerMenu, title} = this.props
-
-    const headerStyle = {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      zIndex: 9,
-      height: 100,
-      paddingRight: 30,
-      paddingLeft: 30,
-      backgroundColor: "#fff"
-    }
-
-    const headerActionsContainerStyle = {}
-    const headerActionsStyle = {}
-
-    if (breakpoint == "xs" || breakpoint == "sm") {
-      headerStyle.position = "absolute"
-      headerStyle.width = "100%"
-
-      Object.assign(headerActionsContainerStyle, {
-        position: "fixed",
-        top: 0,
-        left: 0,
-
-        display: "flex",
-        width: "100vw",
-        height: "100vh",
-        alignItems: "center",
-        justifyContent: "center",
-
-        background: "rgba(#000, .8)"
-      })
-
-      if (!this.s.headerActionsActive) {
-        headerActionsContainerStyle.display = "none"
-      }
-
-      Object.assign(headerActionsStyle, {
-        minWidth: "80vw",
-        maxWidth: "100vw",
-        backgroundColor: "#fff"
-      })
-    } else if (breakpoint == "md") {
-      headerStyle.position = "fixed"
-      headerStyle.left = 250
-      headerStyle.width = "calc(100% - 250px)"
-    } else if (breakpoint == "lg" || breakpoint == "xl" || breakpoint == "xxl") {
-      headerStyle.position = "fixed"
-      headerStyle.left = 290
-      headerStyle.width = "calc(100% - 290px)"
-    }
-
-    if (breakpoint == "md" || breakpoint == "lg" || breakpoint == "xl" || breakpoint == "xxl") {
-      headerActionsContainerStyle.marginLeft = "auto"
-    }
-
-    return (
-      <View dataSet={this.rootViewDataSet ||= {component: "super-admin--layout--header"}} style={headerStyle}>
-        <View dataSet={this.headerTitleViewDataSet ||= {class: "header-title-container"}}>
-          <Text style={this.headerTitleTextStyle ||= {color: "#282a33", fontSize: 22}}>
-            {title}
-          </Text>
-        </View>
-        {actions &&
-          <View dataSet={{active: this.s.headerActionsActive, class: "header-actions-container"}} style={headerActionsContainerStyle}>
-            <View
-              dataSet={this.headerActionsViewDataSet ||= {class: "header-actions"}}
-              ref={this.tt.headerActionsRef}
-              style={headerActionsStyle}
-            >
-              {actions}
-            </View>
-          </View>
-        }
-        {!mdUp &&
-          <View
-            dataSet={this.burgerMenuContainerDataSet ||= {class: "burger-menu-container"}}
-            style={this.burgerMenuContainerStyle ||= {
-              flexDirection: "row",
-              marginLeft: "auto"
-            }}
-          >
-            {actions &&
-              <Pressable
-                dataSet={this.actionsLinkDataSet ||= {class: "actions-link"}}
-                onPress={this.tt.onGearsClicked}
-                style={this.actionsLinkStyle ||= {marginRight: 8, fontSize: 22}}
-              >
-                <Icon name="gear" size={20} />
-              </Pressable>
-            }
-            <Pressable dataSet={this.burgerMenuLinkDataSet ||= {class: "burger-menu-link"}} onPress={onTriggerMenu}>
-              <Icon name="bars" size={20} />
-            </Pressable>
-          </View>
-        }
-      </View>
-    )
-  }
-
-  onGearsClicked = () => this.setState({headerActionsActive: !this.s.headerActionsActive})
-
-  onWindowMouseUp = (e) => {
-    // Close the header actions menu if clicked happened outside
-    if (this.s.headerActionsActive && this.tt.headerActionsRef.current && !this.tt.headerActionsRef.current.contains(e.target)) {
-      this.setState({headerActionsActive: false})
-    }
-  }
-}))

package/src/super-admin/layout/header/style.scss

@@ -1,45 +0,0 @@
-@use "@kaspernj/api-maker/src/super-admin/stylesheets/variables" as *;
-
-[data-component="super-admin--layout--header"] {
-  @media (max-width: $sm-to) {
-    [data-class="header-actions"] {
-      .action-button {
-        display: block;
-        padding: 11px;
-
-        + .action-button {
-          border-top: 1px solid #c9c9c9;
-        }
-
-        &:link,
-        &:visited {
-          color: #000;
-        }
-
-        &:active,
-        &:hover {
-          background: #dddcf0;
-        }
-      }
-    }
-  }
-
-  @media (min-width: $md-from) {
-    [data-class="header-actions"] {
-      .action-button {
-        display: inline-block;
-        padding: 7px 10px;
-        border: 1px solid #cbd5e1;
-        margin-right: 4px;
-        margin-bottom: 4px;
-        border-radius: 5px;
-        font-size: 13px;
-
-        &:link,
-        &:visited {
-          color: #000;
-        }
-      }
-    }
-  }
-}

package/src/super-admin/layout/index.jsx

@@ -1,154 +0,0 @@
-import React, {useMemo} from "react"
-import {StyleSheet, View} from "react-native"
-import BaseComponent from "../../base-component"
-import CommandsPool from "../../commands-pool"
-import config from "super-admin/config"
-import Header from "./header"
-import memo from "set-state-compare/src/memo"
-import Menu from "./menu"
-import PropTypes from "prop-types"
-import PropTypesExact from "prop-types-exact"
-import {shapeComponent} from "set-state-compare/src/shape-component"
-import Text from "../../utils/text"
-import useBreakpoint from "../../use-breakpoint"
-import useCurrentUser from "../../use-current-user"
-import useI18n from "i18n-on-steroids/src/use-i18n"
-
-const NoAccess = React.lazy(() => import("./no-access"))
-
-const styles = StyleSheet.create({
-  appLayoutContentContainer: {
-    base: {
-      minHeight: "100vh",
-      backgroundColor: "#f7f7f7"
-    },
-    mdDown: {
-      paddingTop: 130,
-      paddingRight: 30,
-      paddingBottom: 30
-    },
-    mdUp: {
-      paddingTop: 130,
-      paddingRight: 30,
-      paddingBottom: 30,
-      paddingLeft: 280
-    },
-    lgUp: {
-      paddingTop: 130,
-      paddingRight: 30,
-      paddingBottom: 30,
-      paddingLeft: 320
-    }
-  },
-  mb15: {
-    marginBottom: 15
-  },
-  rootView: {
-    width: "100%",
-    minHeight: "100vh",
-    backgroundColor: "#fff",
-    color: "#000"
-  }
-})
-
-export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseComponent {
-  static propTypes = PropTypesExact({
-    actions: PropTypes.any,
-    active: PropTypes.string,
-    children: PropTypes.any,
-    className: PropTypes.string,
-    currentCustomer: PropTypes.object,
-    currentCustomerId: PropTypes.string,
-    currentUser: PropTypes.object,
-    headTitle: PropTypes.string,
-    headerTitle: PropTypes.string
-  })
-
-  setup() {
-    const currentUser = useCurrentUser()
-    const {locale, t} = useI18n({namespace: "js.api_maker.super_admin.layout"})
-    const {lgUp, mdUp, mdDown} = useBreakpoint()
-
-    this.useStates({menuTriggered: false})
-    this.setInstance({currentUser, lgUp, mdUp, mdDown, t})
-
-    useMemo(() => {
-      CommandsPool.current().globalRequestData.layout = "admin"
-      CommandsPool.current().globalRequestData.locale = locale
-    }, [locale])
-  }
-
-  render() {
-    const {currentUser, lgUp, mdUp, mdDown, t} = this.tt
-    const {
-      actions,
-      active,
-      children,
-      className,
-      currentCustomer,
-      currentCustomerId,
-      headTitle,
-      headerTitle,
-      menu,
-      ...restProps
-    } = this.props
-    const actualHeadTitle = headTitle || headerTitle
-
-    if (actualHeadTitle) {
-      document.title = actualHeadTitle
-    } else {
-      document.title = "Super Admin"
-    }
-
-    const noAccess = !currentUser
-    const appLayoutContentContainerStyles = [styles.appLayoutContentContainer.base]
-
-    if (mdDown) appLayoutContentContainerStyles.push(styles.appLayoutContentContainer.mdDown)
-    if (mdUp) appLayoutContentContainerStyles.push(styles.appLayoutContentContainer.mdUp)
-    if (lgUp) appLayoutContentContainerStyles.push(styles.appLayoutContentContainer.lgUp)
-
-    return (
-      <View
-        dataSet={{component: "super-admin--layout", class: className, menuTriggered: this.s.menuTriggered}}
-        style={styles.rootView}
-        {...restProps}>
-        <Menu
-          active={active}
-          noAccess={noAccess}
-          onRequestMenuClose={this.tt.onRequestMenuClose}
-          triggered={this.s.menuTriggered}
-        />
-        <Header actions={actions} onTriggerMenu={this.tt.onTriggerMenu} title={headerTitle} />
-        <View dataSet={{class: "app-layout-content-container"}} style={appLayoutContentContainerStyles}>
-          {noAccess &&
-            <>
-              <NoAccess />
-              {currentUser &&
-                <>
-                  <Text style={styles.mb15}>
-                    {t(".try_signing_out_and_in_with_a_different_user", {defaultValue: "Try signing in with a different user."})}
-                  </Text>
-                </>
-              }
-              {!currentUser &&
-                <>
-                  <Text style={styles.mb15}>
-                    {t(".try_signing_in", {defaultValue: "Try signing in."})}
-                  </Text>
-                  {config.signInContent()}
-                </>
-              }
-            </>
-          }
-          {!noAccess && children}
-        </View>
-      </View>
-    )
-  }
-
-  onRequestMenuClose = () => this.setState({menuTriggered: false})
-  onTriggerMenu = (e) => {
-    e.preventDefault()
-    this.setState({menuTriggered: !this.s.menuTriggered})
-  }
-}))

package/src/super-admin/layout/menu/index.jsx

@@ -1,173 +0,0 @@
-import {StyleSheet, View} from "react-native"
-import BaseComponent from "../../../base-component"
-import Devise from "../../../devise"
-import {FlashNotifications} from "flash-notifications"
-import Icon from "../../../utils/icon"
-import memo from "set-state-compare/src/memo"
-import Link from "../../../link"
-import MenuContent from "./menu-content"
-import MenuItem from "./menu-item"
-import Params from "../../../params"
-import PropTypes from "prop-types"
-import PropTypesExact from "prop-types-exact"
-import React from "react"
-import {shapeComponent} from "set-state-compare/src/shape-component"
-import Text from "../../../utils/text"
-import useBreakpoint from "../../../use-breakpoint"
-import useCurrentUser from "../../../use-current-user"
-import useI18n from "i18n-on-steroids/src/use-i18n"
-import {WithDefaultStyle} from "../../../utils/default-style"
-
-const styles = StyleSheet.create({
-  root: {
-    base: {
-      position: "fixed",
-      zIndex: 9,
-      overflowY: "auto",
-      overflowX: "hidden",
-      top: 0,
-      left: 0,
-      height: "100%",
-      flexDirection: "column",
-      backgroundColor: "#1b1c1e"
-    },
-    mdDown: {
-      width: "100%",
-      maxWidth: 250,
-      maxHeight: "100vh",
-      overflowY: "auto"
-    },
-    mdUp: {
-      width: 250
-    },
-    lgUp: {
-      width: 290
-    }
-  },
-  userName: {
-    flexShrink: 1,
-    marginLeft: 8
-  },
-  userNameContainer: {
-    overflow: "hidden",
-    maxWidth: 140
-  }
-})
-
-export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseComponent {
-  static propTypes = PropTypesExact({
-    active: PropTypes.string,
-    noAccess: PropTypes.bool.isRequired,
-    onRequestMenuClose: PropTypes.func.isRequired,
-    triggered: PropTypes.bool.isRequired
-  })
-
-  setup() {
-    const {lgUp, mdDown, mdUp} = useBreakpoint()
-    const {t} = useI18n({namespace: "js.api_maker.super_admin.layout.menu"})
-    const currentUser = useCurrentUser()
-
-    this.setInstance({currentUser, lgUp, mdDown, mdUp, t})
-  }
-
-  render() {
-    const {currentUser, lgUp, mdDown, mdUp, t} = this.tt
-    const {active, noAccess, triggered} = this.props
-
-    const style = [styles.root.base]
-
-    if (mdDown) style.push(styles.root.mdDown)
-    if (mdUp) style.push(styles.root.mdUp)
-    if (lgUp) style.push(styles.root.lgUp)
-
-    if (mdDown && !triggered) {
-      return null
-    }
-
-    return (
-      <View dataSet={this.rootViewDataSet ||= {component: "super-admin--layout--menu", triggered}} style={style}>
-        <WithDefaultStyle style={this.withDefaultStyleStyle ||= {Text: {color: "#fff"}}}>
-          <View
-            dataSet={this.menuLogoViewDataSet ||= {class: "menu-logo"}}
-            style={this.menuLogoViewStyle ||= {
-              overflow: "hidden",
-              marginTop: 25,
-              marginRight: "auto",
-              marginLeft: "auto"
-            }}
-          >
-            <Link dataSet={this.menuLogoLinkDataSet ||= {class: "menu-logo-link"}} to={Params.withParams({})}>
-              <Text
-                style={this.menuLogoLinkTextStyle ||= {
-                  fontSize: 42,
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                }}
-              >
-                Admin
-              </Text>
-            </Link>
-          </View>
-          <View dataSet={{class: "menu-items-center"}} style={{marginTop: 25}}>
-            {!noAccess &&
-              <MenuContent active={active} />
-            }
-          </View>
-          <View dataSet={{class: "menu-items-bottom"}} style={{marginTop: "auto", marginBottom: 25}}>
-            {currentUser &&
-              <View
-                dataSet={{class: "menu-user-section"}}
-                style={{
-                  flexDirection: "row",
-                  alignItems: "center",
-                  marginRight: 25,
-                  marginBottom: 25,
-                  marginLeft: 25
-                }}
-              >
-                <View
-                  dataSet={{class: "menu-user-icon"}}
-                  style={{
-                    width: 44,
-                    height: 44,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    backgroundColor: "#abbcd0",
-                    borderRadius: "50%"
-                  }}
-                >
-                  <Icon name="user" size={12} />
-                </View>
-                <View className="menu-user-name" style={styles.userName}>
-                  <Text dataSet={{class: "menu-user-name-container"}} style={styles.userNameContainer}>
-                    {currentUser.name()}
-                  </Text>
-                </View>
-              </View>
-            }
-            {currentUser &&
-              <MenuItem
-                active
-                className="sign-out-menu-item"
-                icon="sign-out-alt"
-                label={t(".sign_out", {defaultValue: "Sign out"})}
-                onClick={this.tt.onSignOutClicked}
-              />
-            }
-          </View>
-        </WithDefaultStyle>
-      </View>
-    )
-  }
-
-  onSignOutClicked = async (e) => {
-    e.preventDefault()
-
-    try {
-      await Devise.signOut()
-      FlashNotifications.success(this.t(".you_have_been_signed_out", {defaultValue: "You have been signed out"}))
-    } catch (error) {
-      FlashNotifications.errorResponse(error)
-    }
-  }
-}))

package/src/super-admin/layout/menu/menu-content.jsx

@@ -1,43 +0,0 @@
-import React, {useMemo} from "react"
-import BaseComponent from "../../../base-component"
-import {digg} from "diggerize"
-import memo from "set-state-compare/src/memo"
-import MenuItem from "./menu-item"
-import models from "../../models"
-import Params from "../../../params"
-import PropTypes from "prop-types"
-import PropTypesExact from "prop-types-exact"
-import {shapeComponent} from "set-state-compare/src/shape-component"
-import useCanCan from "../../../use-can-can"
-import useI18n from "i18n-on-steroids/src/use-i18n"
-
-export default memo(shapeComponent(class ComponentsAdminLayoutMenuContent extends BaseComponent {
-  static propTypes = PropTypesExact({
-    active: PropTypes.string
-  })
-
-  render() {
-    const {locale} = useI18n({namespace: "js.api_maker.super_admin.layout.menu.menu_content"})
-    const {active} = this.p
-    const canCan = useCanCan(() => models.map((modelClass) => [modelClass, ["index"]]))
-    const sortedModels = useMemo(
-      () => models.sort((a, b) => a.modelName().human({count: 2}).toLowerCase().localeCompare(b.modelName().human({count: 2}).toLowerCase())),
-      [locale]
-    )
-
-    return (
-      <>
-        {sortedModels.map((model) => canCan?.can("index", model) &&
-          <MenuItem
-            active={active}
-            icon="sitemap"
-            identifier={digg(model.modelClassData(), "name")}
-            label={model.modelName().human({count: 2})}
-            key={model.modelClassData().name}
-            to={Params.withParams({model: model.modelClassData().name})}
-          />
-        )}
-      </>
-    )
-  }
-}))

package/src/super-admin/layout/menu/menu-item.jsx

@@ -1,70 +0,0 @@
-import BaseComponent from "../../../base-component"
-import classNames from "classnames"
-import Link from "../../../link"
-import memo from "set-state-compare/src/memo"
-import PropTypes from "prop-types"
-import React from "react"
-import {shapeComponent} from "set-state-compare/src/shape-component"
-import Text from "../../../utils/text"
-
-export default memo(shapeComponent(class ComponentsAdminLayoutMenuMenuItem extends BaseComponent {
-  static propTypes = {
-    active: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    className: PropTypes.string,
-    icon: PropTypes.string.isRequired,
-    label: PropTypes.any
-  }
-
-  setup() {
-    this.useStates({
-      hover: false
-    })
-  }
-
-  render() {
-    const {active, children, className, icon, identifier, label, to, ...restProps} = this.props
-    const {hover} = this.s
-    const textStyle = {}
-    const style = {
-      display: "flex",
-      width: "80%",
-      alignItems: "center",
-      paddingTop: 10,
-      paddingRight: 14,
-      paddingBottom: 10,
-      paddingLeft: 14,
-      marginLeft: "auto",
-      marginRight: "auto"
-    }
-    const isActive = active === true || active == identifier
-
-    if (isActive || hover) {
-      style.background = "#323435"
-      style.borderRadius = 7
-      textStyle.color = "#b9b9bb"
-    } else {
-      textStyle.color = "#6f6f71"
-    }
-
-    return (
-      <Link
-        dataSet={{
-          active: isActive,
-          class: classNames("components--admin--layout--menu--menu-item", className),
-          identifier
-        }}
-        onPointerEnter={this.tt.onPointerEnter}
-        onPointerLeave={this.tt.onPointerLeave}
-        style={style}
-        to={to || "#"}
-        {...restProps}
-      >
-        <i className={`fa fa-fw fa-${icon} menu-item-icon`} style={{color: textStyle.color, marginRight: 4, fontSize: 12}} />
-        {children || <Text style={textStyle}>{label}</Text>}
-      </Link>
-    )
-  }
-
-  onPointerEnter = () => this.setState({hover: true})
-  onPointerLeave = () => this.setState({hover: false})
-}))

package/src/super-admin/layout/menu/style.scss

@@ -1,11 +0,0 @@
-@use "@kaspernj/api-maker/src/super-admin/stylesheets/variables" as *;
-
-[data-component="super-admin--layout--menu"] {
-  .menu-logo-link {
-    &:link,
-    &:visited {
-      color: #dededf;
-      text-decoration: none;
-    }
-  }
-}

package/src/super-admin/layout/no-access.jsx

@@ -1,26 +0,0 @@
-import BaseComponent from "../../base-component"
-import memo from "set-state-compare/src/memo"
-import React from "react"
-import {View} from "react-native"
-import {shapeComponent} from "set-state-compare/src/shape-component"
-import Text from "../../utils/text"
-import useCurrentUser from "../../use-current-user"
-import useI18n from "i18n-on-steroids/src/use-i18n"
-
-export default memo(shapeComponent(class ComponentsAdminLayoutNoAccess extends BaseComponent {
-  render() {
-    const currentUser = useCurrentUser()
-    const {t} = useI18n({namespace: "js.api_maker.super_admin.layout.no_access"})
-
-    return (
-      <View
-        dataSet={{
-          component: "super-admin--layout--no-access",
-          userRoles: currentUser?.userRoles()?.loaded()?.map((userRole) => userRole.role()?.identifier()).join(", ")
-        }}
-      >
-        <Text>{t(".you_dont_have_no_access_to_this_page", {defaultValue: "You don't have access to this page."})}</Text>
-      </View>
-    )
-  }
-}))