@startupjs/docs 0.38.1 → 0.38.5

package/client/app/Layout/Sidebar/Content/Docs/index.js

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import { observer, useModel, useSession, useLocal } from 'startupjs'
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { observer, useModel, useLocal } from 'startupjs'
 import { pathFor } from 'startupjs/app'
 import { useMedia, Menu, Collapse } from '@startupjs/ui'
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
@@ -7,33 +7,63 @@ import { getTitle, useLang } from '../../../../../clientHelpers'
 import { useDocsContext } from '../../../../../../docsContext'
 import './index.styl'
 
-export default observer(function DocsRoot () {
-  const docs = useDocsContext()
+const MenuItem = observer(function MenuItemComponent ({
+  active,
+  doc,
+  docName,
+  docPath,
+  nestingLevel,
+  superPath
+}) {
   const [lang] = useLang()
-  const [path] = useLocal('$render.params.path')
+  const { desktop } = useMedia()
+  const $mainSidebar = useModel('_session.Sidebar.mainSidebar')
+  const $openedCollapses = useModel('_session.SidebarCollapses')
 
-  // NOTE
-  // since layout renders before page loads
-  // and $render is created when page loads
-  // we need to wait for the 'path' to appear
-  // in the params
-  if (!path) return null
+  const menuItemStyle = useMemo(() => ({ paddingLeft: nestingLevel * 24 }), [nestingLevel])
+  const title = useMemo(() => getTitle(doc, lang), [doc, lang])
+  const rootPath = useMemo(() => pathFor('docs:doc', { lang, path: docPath }), [lang, docPath])
+
+  if (doc.type === 'collapse') {
+    return pug`
+      Collapse(
+        variant='pure'
+        $open=$openedCollapses.at(docPath)
+      )
+        Collapse.Header.header(
+          iconPosition='right'
+          icon=faAngleRight
+          iconStyleName='collapse-icon'
+        )
+          Menu.Item.item(
+            style=menuItemStyle
+            active=active
+            to=doc.component ? rootPath : null
+            bold
+            icon=doc.icon
+          )= title
+        Collapse.Content
+          Docs(
+            docs=doc.items
+            superPath=docPath
+            nestingLevel=nestingLevel + 1
+          )
+    `
+  }
 
   return pug`
-    Docs(docs=docs lang=lang)
+    Menu.Item.item(
+      style=menuItemStyle
+      active=active
+      to=rootPath
+      onPress=desktop ? undefined : () => $mainSidebar.set(false)
+    )= title
   `
 })
 
-const Docs = observer(function DocsComponent ({
-  docs,
-  lang,
-  superPath,
-  nestingLevel = 1
-}) {
+const Docs = observer(function DocsComponent ({ docs, superPath, nestingLevel = 1 }) {
   const [path] = useLocal('$render.params.path')
-  const { desktop } = useMedia()
-  const [, $openedCollapses] = useSession('SidebarCollapses')
-  const $mainSidebar = useModel('_session.Sidebar.mainSidebar')
+  const $openedCollapses = useModel('_session.SidebarCollapses')
 
   // HACK: open parent collapse on initial render
   useEffect(() => {
@@ -42,47 +72,47 @@ const Docs = observer(function DocsComponent ({
     }
   }, [])
 
-  const menuItemStyle = { paddingLeft: nestingLevel * 24 }
+  const getDocPath = useCallback(
+    docName => {
+      return superPath ? superPath + '/' + docName : docName
+    },
+    [superPath]
+  )
+
+  const getActive = useCallback(
+    docName => {
+      return getDocPath(docName) === path
+    },
+    [path]
+  )
 
   return pug`
     Menu
-      each aDocName in Object.keys(docs)
-        React.Fragment(key=aDocName)
-          - const doc = docs[aDocName]
-          - const title = getTitle(doc, lang)
-          - const docPath = superPath ? superPath + '/' + aDocName : aDocName
-          - const rootPath = pathFor('docs:doc', { lang, path: docPath })
-          - const isActive = docPath === path
-          if ['mdx', 'sandbox'].includes(doc.type)
-            Menu.Item.item(
-              style=menuItemStyle
-              active=isActive
-              to=rootPath
-              onPress=desktop ? undefined : () => $mainSidebar.set(false)
-            )= title
-          if doc.type === 'collapse'
-            Collapse(
-              variant='pure'
-              $open=$openedCollapses.at(docPath)
-            )
-              Collapse.Header.header(
-                iconPosition='right'
-                icon=faAngleRight
-                iconStyleName='collapse-icon'
-              )
-                Menu.Item.item(
-                  style=menuItemStyle
-                  active=isActive
-                  to=doc.component ? rootPath : null
-                  bold
-                  icon=doc.icon
-                )= title
-              Collapse.Content
-                Docs(
-                  docs=doc.items
-                  superPath=docPath
-                  lang=lang
-                  nestingLevel=nestingLevel + 1
-                )
+      each docName in Object.keys(docs)
+        MenuItem(
+          key=docName
+          active=getActive(docName)
+          doc=docs[docName]
+          docName=docName
+          docPath=getDocPath(docName)
+          nestingLevel=nestingLevel
+          superPath=superPath
+        )
+  `
+})
+
+export default observer(function DocsRoot () {
+  const docs = useDocsContext()
+  const [path] = useLocal('$render.params.path')
+
+  // NOTE
+  // since layout renders before page loads
+  // and $render is created when page loads
+  // we need to wait for the 'path' to appear
+  // in the params
+  if (!path) return null
+
+  return pug`
+    Docs(docs=docs)
   `
 })

package/client/components/Props/Constructor/ValueCell/index.js

@@ -15,7 +15,7 @@ const IconSelect = observer(function ({ $value, value }) {
     () =>
       keys(omit(icons, ['fas', 'prefix'])).map(key => ({
         label: key,
-        value: JSON.stringify(icons[key])
+        value: icons[key]
       })),
     []
   )
@@ -25,8 +25,8 @@ const IconSelect = observer(function ({ $value, value }) {
       options=_icons
       size='s'
       type='select'
-      value=JSON.stringify(value)
-      onChange=value => $value.set(JSON.parse(value))
+      value=value
+      onChange=value => $value.set(value)
     )
 `
 })
@@ -78,13 +78,13 @@ const JSONInput = observer(function ({ $value, type }) {
   `
 })
 
-const PropInput = observer(function ({ $value, extraParams, options, type, value }) {
+const PropInput = observer(function ({ $value, extraParams = {}, options, type, value }) {
   switch (type) {
     case 'array':
     case 'object':
       // custom Select for icon objects instead of JSONInput
       // when extraParams.showIconSelect is true
-      if (extraParams?.showIconSelect) {
+      if (extraParams.showIconSelect) {
         return pug`
           IconSelect($value=$value value=value)
         `
@@ -103,6 +103,7 @@ const PropInput = observer(function ({ $value, extraParams, options, type, value
           type='text'
           value=value
           onChangeText=value => $value.set(value)
+          ...extraParams
         )
       `
     case 'number':
@@ -112,6 +113,7 @@ const PropInput = observer(function ({ $value, extraParams, options, type, value
           type='number'
           value=value
           onChangeNumber=value => $value.set(value)
+          ...extraParams
         )
       `
     case 'bool':
@@ -125,12 +127,13 @@ const PropInput = observer(function ({ $value, extraParams, options, type, value
     case 'oneOf':
       return pug`
         Input(
-            options=options
-            size='s'
-            type='select'
-            value=value
-            onChange=value => $value.set(value)
-          )
+          options=options
+          size='s'
+          type='select'
+          value=value
+          onChange=value => $value.set(value)
+          ...extraParams
+        )
       `
     default:
       return null

package/package.json

@@ -4,14 +4,14 @@
     "access": "public"
   },
   "description": "MDX documentation generator",
-  "version": "0.38.1",
+  "version": "0.38.5",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@startupjs/mdx": "^0.38.1",
-    "@startupjs/scrollable-anchors": "^0.38.1",
-    "@startupjs/ui": "^0.38.1",
+    "@startupjs/mdx": "^0.38.5",
+    "@startupjs/scrollable-anchors": "^0.38.5",
+    "@startupjs/ui": "^0.38.5",
     "parse-prop-types": "^0.3.0"
   },
   "peerDependencies": {
@@ -19,5 +19,5 @@
     "react-native": ">= 0.61.4 < 0.64.0",
     "startupjs": ">= 0.33.0"
   },
-  "gitHead": "502ba26ce42a4f3d43cd3a6aa3e0b94d6887dc43"
+  "gitHead": "3b435b1413049770136e08bf380f34d198d15826"
 }