@kaspernj/api-maker 1.0.400 → 1.0.402

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.400",
+  "version": "1.0.402",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -53,6 +53,6 @@
     "eslint-plugin-react": "^7.23.2",
     "i18n-on-steroids": "^1.0.15",
     "jest": "^29.0.1",
-    "jsdom": "^24.0.0"
+    "jsdom": "^25.0.0"
   }
 }

package/src/bootstrap/paginate.jsx

@@ -5,6 +5,7 @@ import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import qs from "qs"
 import {memo, useMemo} from "react"
+import {Text} from "react-native"
 import Result from "../result"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import urlEncode from "../url-encode.mjs"
@@ -113,21 +114,21 @@ export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends BaseC
         <ul className="pagination" data-pages-length={pages.length}>
           <li className={`page-item ${!showPreviousPage ? "disabled" : ""}`} key="page-first">
             {!showPreviousPage &&
-              "⇤"
+              <Text>⇤</Text>
             }
             {showPreviousPage &&
-              <Link className="page-link" to={this.pagePath(1)}>
-                ⇤
+              <Link dataSet={{class: "page-link"}} to={this.pagePath(1)}>
+                <Text>⇤</Text>
               </Link>
             }
           </li>
           <li className={`page-item ${!showFirstPage ? "disabled" : ""}`} key="page-previous">
             {!showFirstPage &&
-              "←"
+              <Text>←</Text>
             }
             {showFirstPage &&
-              <Link className="page-link" to={this.previousPagePath()}>
-                ←
+              <Link dataSet={{class: "page-link"}} to={this.previousPagePath()}>
+                <Text>←</Text>
               </Link>
             }
           </li>
@@ -147,8 +148,8 @@ export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends BaseC
                 page
               }
               {this.isPageActiveClass(page) == "not-active" &&
-                <Link className="page-link" to={this.pagePath(page)}>
-                  {page}
+                <Link dataSet={{class: "page-link"}} to={this.pagePath(page)}>
+                  <Text>{page}</Text>
                 </Link>
               }
             </li>
@@ -160,21 +161,21 @@ export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends BaseC
           }
           <li className={`page-item ${!showNextPage ? "disabled" : ""}`} key="page-next">
             {!showNextPage &&
-              "→"
+              <Text>→</Text>
             }
             {showNextPage &&
-              <Link className="page-link" to={this.nextPagePath()}>
-                →
+              <Link dataSet={{class: "page-link"}} to={this.nextPagePath()}>
+                <Text>→</Text>
               </Link>
             }
           </li>
           <li className={`page-item ${!showLastPage ? "disabled" : ""}`} key="page-last">
             {!showLastPage &&
-              "⇥"
+              <Text>⇥</Text>
             }
             {showLastPage &&
-              <Link className="page-link" to={this.pagePath(totalPages)}>
-                ⇥
+              <Link dataSet={{class: "page-link"}} to={this.pagePath(totalPages)}>
+                <Text>⇥</Text>
               </Link>
             }
           </li>

package/src/bootstrap/sort-link.jsx

@@ -3,6 +3,7 @@ import * as inflection from "inflection"
 import PropTypes from "prop-types"
 import qs from "qs"
 import {memo} from "react"
+import {Text} from "react-native"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import urlEncode from "../url-encode.mjs"
 
@@ -57,25 +58,22 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
 
     return (
       <LinkComponent
-        className={this.className()}
-        data-attribute={attribute}
-        data-sort-mode={this.sortMode()}
+        dataSet={{
+          attribute,
+          class: className,
+          component: "api-maker--bootstrap--sort-link",
+          sortMode: this.sortMode()
+        }}
         to={this.href()}
         {...restProps}
       >
-        {this.title()}
+        <Text>
+          {this.title()}
+        </Text>
       </LinkComponent>
     )
   }
 
-  className () {
-    const classNames = ["component-api-maker-bootstrap-sort-link"]
-
-    if (this.props.className) classNames.push(this.props.className)
-
-    return classNames.join(" ")
-  }
-
   linkComponent = () => this.props.linkComponent || Link
 
   qParams() {

package/src/data-set-to-attributes.mjs

@@ -0,0 +1,13 @@
+import * as inflection from "inflection"
+
+export default function dataSetToAttributes(dataSet) {
+  const result = {}
+
+  for (const key in dataSet) {
+    const dasherizedKey = `data-${inflection.dasherize(inflection.underscore(key))}`
+
+    result[dasherizedKey] = dataSet[key]
+  }
+
+  return result
+}

package/src/link.jsx

@@ -1,27 +1,61 @@
-import {PureComponent} from "react"
+import BaseComponent from "./base-component"
+import dataSetToAttributes from "./data-set-to-attributes.mjs"
+import {memo} from "react"
+import {Platform, Pressable} from "react-native"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
-export default class Link extends PureComponent {
+export default memo(shapeComponent(class Link extends BaseComponent {
   render() {
-    const {to, onClick, ...restProps} = this.props
+    const {dataSet, to, onClick, onPress, ...restProps} = this.props
+
+    if (Platform.OS == "web") {
+      return (
+        <a {...dataSetToAttributes(dataSet)} href={to} {...restProps} onClick={this.tt.onLinkClicked} />
+      )
+    }
 
     return (
-      <a href={to} {...restProps} onClick={this.onLinkClicked} />
+      <Pressable dataSet={dataSet} onPress={this.tt.onPress} {...restProps} />
     )
   }
 
   onLinkClicked = (e, ...restArgs) => {
-    const {onClick} = this.props
+    const {onClick, onPress} = this.props
 
-    if (onClick) onClick(e, ...restArgs)
+    if (onClick) {
+      onClick(e, ...restArgs)
+    }
+
+    if (onPress) {
+      onPress(e, ...restArgs)
+    }
 
     if (!e.defaultPrevented && !e.ctrlKey && !e.metaKey) {
       e.preventDefault()
 
-      const history = globalThis.apiMakerConfigGlobal?.history
+      this.redirect()
+    }
+  }
+
+  onPress() {
+    const {onClick, onPress} = this.props
 
-      if (!history) throw new Error("History hasn't been set in the API maker configuration")
+    if (onClick) {
+      onClick(e, ...restArgs)
+    }
 
-      history.push(this.props.to)
+    if (onPress) {
+      onPress(e, ...restArgs)
     }
+
+    this.redirect()
+  }
+
+  redirect() {
+    const history = globalThis.apiMakerConfigGlobal?.history
+
+    if (!history) throw new Error("History hasn't been set in the API maker configuration")
+
+    history.push(this.props.to)
   }
-}
+}))

package/src/router/route.jsx

@@ -20,13 +20,14 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
   }
 
   static propTypes = propTypesExact({
+    children: PropTypes.node,
     component: PropTypes.string,
     componentPath: PropTypes.string,
     exact: PropTypes.bool.isRequired,
     fallback: PropTypes.bool.isRequired,
     includeInPath: PropTypes.bool.isRequired,
     onMatch: PropTypes.func,
-    path: PropTypes.string
+    path: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])
   })
 
   match = null
@@ -39,17 +40,14 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
     const givenRoute = useContext(RouteContext)
     const {pathShown} = switchGroup.s
 
+    this.debug = false
+    this.log(() => ({givenRoute}))
+
     this.requireComponent = useContext(RequireComponentContext)
     this.currentParams = useContext(ParamsContext)
     this.currentPath = useContext(CurrentPathContext)
     this.switchGroup = switchGroup
-
-    this.routeParts = useMemo(() => {
-      let routeParts = givenRoute?.split("/")
-
-      return routeParts
-    }, [path, givenRoute])
-
+    this.routeParts = useMemo(() => givenRoute?.split("/"), [path, givenRoute])
     this.pathParts = useMemo(() => path?.split("/"), [path])
 
     this.newRouteParts = useMemo(
@@ -79,7 +77,9 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
           this.props.onMatch()
         }
 
-        this.loadComponent()
+        if ((!this.props.children && this.props.path) || this.props.component || this.props.componentPath) {
+          this.loadComponent()
+        }
       }
     }, [path, pathShown, this.s.matches])
   }
@@ -111,11 +111,14 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
     const params = {}
     const componentPathParts = [...this.currentPath]
 
+    this.log(() => [this.props.path, "Start generating component paths", JSON.stringify(componentPathParts)])
+
     for (const pathPartIndex in this.pathParts) {
       const pathPart = this.pathParts[pathPartIndex]
       const translatedPathPart = I18n.t(`routes.${pathPart}`, {defaultValue: pathPart})
 
       if (!(pathPartIndex in this.routeParts)) {
+        this.log(() => `No match for: ${pathPartIndex}`)
         matches = false
         break
       }
@@ -135,6 +138,7 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
     }
 
     if (exact && newRouteParts.length > 0) {
+      this.log(() => ["Exact and more route parts", {newRouteParts, pathParts: this.pathParts, routeParts: this.routeParts}])
       matches = false
     } else if (matches && path) {
       matches = true
@@ -148,6 +152,8 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
       matches = true
     }
 
+    this.log(() => [this.props.path, "End generating component paths", JSON.stringify(componentPathParts), {matches}])
+
     if (matches) {
       if (component && includeInPath) {
         componentPathParts.push(component)
@@ -169,6 +175,8 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
     const actualComponentPath = this.props.componentPath || this.tt.componentPathParts.join("/")
     let Component
 
+    this.log(() => ["loadComponent", {componentPath: this.props.componentPath, componentPathParts: this.componentPathParts, actualComponentPath}])
+
     try {
       const componentImport = await this.tt.requireComponent({routeDefinition: {component: actualComponentPath}})
 
@@ -182,9 +190,19 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
     this.setState({Component, componentNotFound: !Component})
   }
 
+  log(callbackArgs) {
+    if (this.debug) {
+      let args = callbackArgs()
+
+      if (!Array.isArray(args)) args = [args]
+
+      console.log(...args)
+    }
+  }
+
   render() {
     const {componentPathParts, match, newParams, newRouteParts} = this.tt
-    const {component, path} = this.props
+    const {children, component, path} = this.props
     const {Component, componentNotFound, matches} = this.s
 
     if (!matches || !this.hasSwitchMatch()) {
@@ -192,7 +210,7 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
       return null
     }
 
-    if (!Component && !componentNotFound) {
+    if (!Component && !children && !componentNotFound) {
       // Route is matching but hasn't been loaded yet.
       return (
         <div>
@@ -201,7 +219,7 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
       )
     }
 
-    if (!Component && componentNotFound) {
+    if (!Component && !children && componentNotFound) {
       // Don't render anything if the component couldn't be found.
       return null
     }
@@ -211,7 +229,8 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
         <RouteContext.Provider value={newRouteParts.join("/")}>
           <ParamsContext.Provider value={newParams}>
             <Switch name={`route-group-${path}`} single={false}>
-              <Component match={match} />
+              {Component && <Component match={match} />}
+              {children}
             </Switch>
           </ParamsContext.Provider>
         </RouteContext.Provider>

package/src/super-admin/index.jsx

@@ -1,3 +1,4 @@
+import {Pressable, Text} from "react-native"
 import BaseComponent from "../base-component"
 import EditPage from "./edit-page"
 import hasEditConfig from "./has-edit-config.js"
@@ -92,8 +93,10 @@ export default memo(shapeComponent(class ApiMakerSuperAdmin extends BaseComponen
         {modelClass && pageToShow == "index" &&
           <>
             {canCan?.can("new", modelClass) && hasEditConfig(modelClass) &&
-              <Link className="create-new-model-link" to={Params.withParams({model: modelName, mode: "new"})}>
-                Create new
+              <Link dataSet={{class: "create-new-model-link"}} to={Params.withParams({model: modelName, mode: "new"})}>
+                <Text>
+                  Create new
+                </Text>
               </Link>
             }
           </>
@@ -101,14 +104,18 @@ export default memo(shapeComponent(class ApiMakerSuperAdmin extends BaseComponen
         {model && pageToShow == "show" &&
           <>
             {model.can("edit") && hasEditConfig(modelClass) &&
-              <Link className="edit-model-link" to={Params.withParams({model: modelName, model_id: modelId, mode: "edit"})}>
-                Edit
+              <Link dataSet={{class: "edit-model-link"}} to={Params.withParams({model: modelName, model_id: modelId, mode: "edit"})}>
+                <Text>
+                  Edit
+                </Text>
               </Link>
             }
             {model.can("destroy") &&
-              <a className="destroy-model-link" href="#" onClick={this.tt.onDestroyClicked}>
-                Delete
-              </a>
+              <Pressable dataSet={{class: "destroy-model-link"}} onPress={this.tt.onDestroyClicked}>
+                <Text>
+                  Delete
+                </Text>
+              </Pressable>
             }
           </>
         }
@@ -151,9 +158,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdmin extends BaseComponen
     )
   }
 
-  onDestroyClicked = async (e) => {
-    e.preventDefault()
-
+  onDestroyClicked = async () => {
     if (!confirm("Are you sure?")) {
       return
     }

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

@@ -9,7 +9,7 @@ import PropTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import useCurrentUser from "../../../use-current-user"
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
-import {View} from "react-native"
+import {Text, View} from "react-native"
 
 export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseComponent {
   static propTypes = PropTypesExact({
@@ -33,8 +33,10 @@ export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseC
     return (
       <View dataSet={{component: "super-admin--layout--menu", triggered}}>
         <div className="menu-logo">
-          <Link className="menu-logo-link" to={Params.withParams({})}>
-            Admin
+          <Link dataSet={{class: "menu-logo-link"}} to={Params.withParams({})}>
+            <Text>
+              Admin
+            </Text>
           </Link>
         </div>
         <div className="menu-items-center">

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

@@ -5,6 +5,7 @@ import Link from "../../../../link"
 import {memo} from "react"
 import PropTypes from "prop-types"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {Text} from "react-native"
 
 export default memo(shapeComponent(class ComponentsAdminLayoutMenuMenuItem extends BaseComponent {
   static propTypes = {
@@ -14,20 +15,56 @@ export default memo(shapeComponent(class ComponentsAdminLayoutMenuMenuItem exten
     label: PropTypes.node
   }
 
+  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
-        className={classNames("components--admin--layout--menu--menu-item", className)}
-        data-active={active === true || active == identifier}
-        data-identifier={identifier}
+        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`} />
-        {children || label}
+        <i className={`fa fa-fw fa-${icon} menu-item-icon`} style={{color: textStyle.color}} />
+        {children || <Text style={textStyle}>{label}</Text>}
       </Link>
     )
   }
+
+  onPointerEnter = () => this.setState({hover: true})
+  onPointerLeave = () => this.setState({hover: false})
 }))

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

@@ -1,24 +1,4 @@
-.components--admin--layout--menu--menu-item {
-  display: flex;
-  width: 80%;
-  align-items: center;
-  padding: 10px 14px;
-  margin-right: auto;
-  margin-left: auto;
-  text-decoration: none;
-
-  &:link,
-  &:visited {
-    color: #6f6f71;
-  }
-
-  &[data-active="true"],
-  &:hover {
-    background: #323435;
-    border-radius: 7px;
-    color: #b9b9bb;
-  }
-
+[data-class="components--admin--layout--menu--menu-item"] {
   .menu-item-icon {
     margin-right: 4px;
     font-size: 12px;

package/src/super-admin/show-nav.jsx

@@ -7,7 +7,7 @@ import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import ShowReflectionLink from "./show-reflection-link"
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 import useQueryParams from "on-location-changed/src/use-query-params"
-import {View} from "react-native"
+import {Text, View} from "react-native"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminShowNav extends BaseComponent {
   static propTypes = PropTypesExact({
@@ -25,7 +25,9 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowNav extends BaseC
       <View dataSet={{component: "super-admin--show-nav"}}>
         <View>
           <Link to={Params.withParams({model: modelClass.modelClassData().name, model_id: queryParams.model_id})}>
-            {t(".general", {defaultValue: "General"})}
+            <Text>
+              {t(".general", {defaultValue: "General"})}
+            </Text>
           </Link>
         </View>
         {model && reflections.filter((reflection) => reflection.macro() == "has_many").map((reflection) =>

package/src/super-admin/show-page/belongs-to-attribute-row.jsx

@@ -5,6 +5,7 @@ import Link from "../../link"
 import {memo} from "react"
 import Params from "../../params"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {Text} from "react-native"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminShowPageBelongsToAttributeRow extends BaseComponent {
   render() {
@@ -16,8 +17,10 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowPageBelongsToAttr
       <AttributeRow label={modelClass.humanAttributeName(inflection.camelize(reflection.name(), true))}>
         {subModel &&
           <Link to={Params.withParams({model: subModel.modelClassData().name, model_id: subModel.primaryKey()})}>
-            {subModel && "name" in subModel && subModel.name()}
-            {subModel && !("name" in subModel) && subModel?.id()}
+            <Text>
+              {subModel && "name" in subModel && subModel.name()}
+              {subModel && !("name" in subModel) && subModel?.id()}
+            </Text>
           </Link>
         }
       </AttributeRow>

package/src/super-admin/show-reflection-actions.jsx

@@ -38,7 +38,7 @@ export default memo(shapeComponent(class SuperAdminShowReflectionActions extends
     return (
       <>
         {canCan?.can("new", reflection.modelClass()) &&
-          <Link className="create-new-model-link" to={Params.withParams(linkParams)}>
+          <Link dataSet={{class: "create-new-model-link"}} to={Params.withParams(linkParams)}>
             Create new
           </Link>
         }

package/src/super-admin/show-reflection-link.jsx

@@ -3,6 +3,7 @@ import {digg} from "diggerize"
 import Link from "../link"
 import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {Text} from "react-native"
 import {useMemo} from "react"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionLink extends BaseComponent {
@@ -28,7 +29,9 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionLink ex
 
     return (
       <Link to={Params.withParams({model: digg(modelClass.modelClassData(), "name"), model_id: model.primaryKey(), model_reflection: reflection.name()})}>
-        {modelClass.humanAttributeName(reflection.name())} ({count})
+        <Text>
+          {modelClass.humanAttributeName(reflection.name())} ({count})
+        </Text>
       </Link>
     )
   }

package/src/table/components/column.jsx

@@ -0,0 +1,12 @@
+import BaseComponent from "../../base-component"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {View} from "react-native"
+
+export default memo(shapeComponent(class SharedTableColumn extends BaseComponent {
+  render() {
+    return (
+      <View {...this.props} />
+    )
+  }
+}))

package/src/table/components/flat-list.jsx

@@ -0,0 +1,18 @@
+import BaseComponent from "../../base-component"
+import {FlatList} from "react-native"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class SharedTagble extends BaseComponent {
+  render() {
+    const {style, ...restProps} = this.props
+    const actualStyle = Object.assign(
+      {width: "100%"},
+      style
+    )
+
+    return (
+      <FlatList style={actualStyle} {...restProps} />
+    )
+  }
+}))

package/src/table/components/header.jsx

@@ -0,0 +1,12 @@
+import BaseComponent from "../../base-component"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {View} from "react-native"
+
+export default memo(shapeComponent(class SharedTableHeader extends BaseComponent {
+  render() {
+    return (
+      <View {...this.props} />
+    )
+  }
+}))

package/src/table/components/row.jsx

@@ -0,0 +1,20 @@
+import BaseComponent from "../../base-component"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {View} from "react-native"
+
+export default memo(shapeComponent(class SharedTableRow extends BaseComponent {
+  render() {
+    const {style, ...restProps} = this.props
+    const actualStyle = Object.assign(
+      {
+        flexDirection: "row"
+      },
+      style
+    )
+
+    return (
+      <View style={actualStyle} {...restProps} />
+    )
+  }
+}))