@startupjs/docs 0.60.0-canary.0 → 0.60.0-canary.11

package/client/app/Layout/index.js

@@ -1,8 +1,7 @@
 import React, { useState } from 'react'
-import { pug, emit, observer, useModel, $ } from 'startupjs'
+import { pug, emit, observer, useModel } from 'startupjs'
 import { pathFor, useLocation } from 'startupjs/app'
 import { AutoSuggest, Button, Div, Layout, Menu, Span } from '@startupjs/ui'
-import { MDXProvider } from '@startupjs/mdx'
 import { ScrollableProvider } from '@startupjs/scrollable-anchors'
 import { faBars } from '@fortawesome/free-solid-svg-icons/faBars'
 import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch'
@@ -89,11 +88,10 @@ export default observer(function StyleguideLayout ({ children }) {
   // Note: Topbar height is compensated in PDoc
   //       to achieve a semi-transparent effect
   return pug`
-    MDXProvider(key=$.session.theme.get())
-      Layout.layout(testID="Layout")
-        Sidebar
-          Topbar
-          ScrollableProvider
-            = children
+    Layout.layout(testID="Layout")
+      Sidebar
+        Topbar
+        ScrollableProvider
+          = children
   `
 })

package/client/clientHelpers/hooks/useLocalWithDefault.js

@@ -1,18 +1,18 @@
-import { useLocal, useSyncEffect, useComponentId } from 'startupjs'
+import { $, useSyncEffect, useId } from 'startupjs'
 
 export default function useLocalWithDefault (path, defaultValue) {
   if (defaultValue == null) {
     throw new Error('useLocalWithDefault: default value is required')
   }
 
-  const componentId = useComponentId()
+  const componentId = useId()
   if (!path) path = `_session.${componentId}`
-  const [value, $value] = useLocal(path)
+  const $value = path.split('.').reduce((acc, part) => acc[part], $)
 
   useSyncEffect(() => {
-    if (!(value == null)) return
-    throw $value.set('', defaultValue)
+    if (!($value.get() == null)) return
+    throw $value.set(defaultValue)
   }, [])
 
-  return [value, $value]
+  return [$value.get(), $value]
 }

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

@@ -1,21 +1,21 @@
 import React, { useCallback, useMemo } from 'react'
-import { pug, observer, useValue } from 'startupjs'
+import { pug, observer, $ } from 'startupjs'
 import { Button, Span, themed } from '@startupjs/ui'
 import '../index.styl'
 
 const MAX_ITEMS = 10
 
 export default observer(themed(function TypeCell ({ possibleValues, theme, type }) {
-  const [collapsed, $collapsed] = useValue(true)
+  const $collapsed = $(true)
 
   const values = useMemo(() => {
     if (!Array.isArray(possibleValues)) return []
-    return collapsed ? possibleValues.slice(0, MAX_ITEMS) : possibleValues
-  }, [collapsed, possibleValues])
+    return $collapsed.get() ? possibleValues.slice(0, MAX_ITEMS) : possibleValues
+  }, [$collapsed, possibleValues])
 
   const toggleList = useCallback(() => {
-    $collapsed.setDiff(!collapsed)
-  }, [collapsed])
+    $collapsed.set(!$collapsed.get())
+  }, [$collapsed])
 
   const renderButton = useCallback(() => {
     if (possibleValues?.length <= MAX_ITEMS) return null
@@ -26,9 +26,9 @@ export default observer(themed(function TypeCell ({ possibleValues, theme, type
         size='s'
         variant='text'
         onPress=toggleList
-      )= collapsed ? 'More...' : 'Less'
+      )= $collapsed.get() ? 'More...' : 'Less'
     `
-  }, [collapsed, possibleValues])
+  }, [$collapsed, possibleValues, toggleList]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return pug`
     if type === 'oneOf'

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react'
-import { pug, batch, observer, useValue } from 'startupjs'
+import { pug, batch, observer, $ } from 'startupjs'
 import { Br, Input, Span } from '@startupjs/ui'
 import debounce from 'lodash/debounce'
 import isPlainObject from 'lodash/isPlainObject'
@@ -10,7 +10,7 @@ import omit from 'lodash/omit'
 import * as icons from '@fortawesome/free-solid-svg-icons'
 import '../index.styl'
 
-const EDITABLE_TYPES = ['string', 'number', 'bool', 'oneOf', 'array', 'object']
+const EDITABLE_TYPES = ['string', 'number', 'boolean', 'oneOf', 'array', 'object']
 
 const IconSelect = observer(function ({ $value, value }) {
   const _icons = useMemo(
@@ -39,10 +39,10 @@ const JSONInput = observer(function ({ $value, type }) {
     return value ? JSON.stringify(value) : ''
   }, [$value])
 
-  const [tempJSON, $tempJSON] = useValue(_JSONValue)
-  const [badJSON, $badJSON] = useValue(false)
+  const $tempJSON = $(_JSONValue)
+  const $badJSON = $(false)
 
-  const validateJson = useCallback(
+  const validateJson = useCallback( // eslint-disable-line react-hooks/exhaustive-deps
     debounce(text => {
       try {
         if (!text) {
@@ -52,13 +52,13 @@ const JSONInput = observer(function ({ $value, type }) {
           const isValidValue = parsedValue && validateByType(type, parsedValue)
           if (isValidValue) {
             $value.set(parsedValue)
-            $badJSON.setDiff(false)
+            $badJSON.set(false)
           } else {
-            $badJSON.setDiff(true)
+            $badJSON.set(true)
           }
         }
       } catch (error) {
-        $badJSON.setDiff(true)
+        $badJSON.set(true)
       }
     }, 300),
     [$badJSON, $value]
@@ -71,10 +71,10 @@ const JSONInput = observer(function ({ $value, type }) {
 
   return pug`
     Input(
-      inputStyleName={ badJSON }
+      inputStyleName={ badJSON: $badJSON.get() }
       size='s'
       type='text'
-      value=tempJSON || ''
+      value=$tempJSON.get() || ''
       onChangeText=onChangeJSON
     )
   `
@@ -118,7 +118,7 @@ const PropInput = observer(function ({ $value, extraParams = {}, options, type,
           ...extraParams
         )
       `
-    case 'bool':
+    case 'boolean':
       return pug`
         Input.checkbox(
           type='checkbox'
@@ -159,8 +159,8 @@ const TypesSelect = observer(function ({
       ),
     [possibleValues]
   )
-  const [selectedValue, $selectedValue] = useValue(names[0])
-  const $value = $props.at(name)
+  const $selectedValue = $(names[0])
+  const $value = $props[name]
   const value = $value.get()
 
   function onChange (value) {
@@ -181,15 +181,15 @@ const TypesSelect = observer(function ({
         showEmptyValue=false
         size='s'
         type='select'
-        value=selectedValue
+        value=$selectedValue.get()
         onChange=onChange
       )
       Br(half)
       PropInput(
         $value=$value
         extraParams=extraParams
-        options=options[selectedValue]
-        type=selectedValue
+        options=options[$selectedValue.get()]
+        type=$selectedValue.get()
         value=value
       )
     else
@@ -199,7 +199,7 @@ const TypesSelect = observer(function ({
 
 export default observer(function ValueCell ({ $props, entry }) {
   const { extraParams, name, possibleValues, type } = entry
-  const $value = $props.at(name)
+  const $value = $props[name]
   const value = $value.get()
 
   if (/^\$/.test(name)) { // hide Input for model prop
@@ -230,7 +230,7 @@ function validateByType (type, value) {
       return Array.isArray(value)
     case 'object':
       return isPlainObject(value)
-    case 'bool':
+    case 'boolean':
       return typeof value === 'boolean'
     case 'number':
       return typeof value === 'number'

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Platform } from 'react-native'
-import { pug, observer } from 'startupjs'
-import { Span, Tag, themed } from '@startupjs/ui'
+import { pug, observer, $ } from 'startupjs'
+import { Span, Tag, themed, Div } from '@startupjs/ui'
 import Table from './Table'
 import Tbody from './Tbody'
 import Thead from './Thead'
@@ -13,37 +13,69 @@ import './index.styl'
 
 export default observer(themed(function Constructor ({
   Component,
+  extendedFrom,
   entries,
   $props,
   style
 }) {
+  const $showExtends = $()
+  function renderEntry (entry) {
+    const { name, type, defaultValue, possibleValues, isRequired } = entry
+    return pug`
+      Tr(key=name)
+        Td
+          Span.name(
+            style={
+              fontFamily: Platform.OS === 'ios' ? 'Menlo-Regular' : 'monospace'
+            }
+          )= name
+          if isRequired
+            Tag.required(
+              variant='outlined'
+              size='s'
+              color='error'
+              shape='rounded'
+            ) Required
+          if defaultValue != null
+            Span.valueDefault
+              Span(description) =#{' '}
+              Span.value= JSON.stringify(defaultValue)
+        Td: Span(description italic)= entry.description || '-'
+        Td: TypeCell(possibleValues=possibleValues type=type)
+        Td.vCenter: ValueCell(entry=entry $props=$props)
+    `
+  }
   return pug`
     Table.table(style=style)
       Thead.thead
         Tr
           Td: Span.header PROP
+          Td: Span.header DESCRIPTION
           Td: Span.header TYPE
-          Td: Span.header DEFAULT
           Td: Span.header.right VALUE
       Tbody
+        if extendedFrom
+          Div.extends
+            Div.collapsibleHeader(onPress=() => $showExtends.set(!$showExtends.get()))
+              Span(italic style={
+                fontFamily: Platform.OS === 'ios' ? 'Menlo-Regular' : 'monospace'
+              })
+                if $showExtends.get()
+                  | -#{' '}
+                else
+                  | +#{' '}
+                | Extends component props from#{' '}
+                Span(bold)= extendedFrom + ' '
+                if $showExtends.get()
+                  | (tap to collapse)
+                else
+                  | (tap to expand)
+            if $showExtends.get()
+              each entry, index in entries
+                if entry.extendedFrom === extendedFrom
+                  = renderEntry(entry)
         each entry, index in entries
-          - const { name, type, defaultValue, possibleValues, isRequired } = entry
-          Tr(key=index)
-            Td
-              Span.name(
-                style={
-                  fontFamily: Platform.OS === 'ios' ? 'Menlo-Regular' : 'monospace'
-                }
-              )= name
-              if isRequired
-                Tag.required(
-                  variant='outlined'
-                  size='s'
-                  color='error'
-                  shape='rounded'
-                ) Required
-            Td: TypeCell(possibleValues=possibleValues type=type)
-            Td: Span.value= JSON.stringify(defaultValue)
-            Td.vCenter: ValueCell(entry=entry $props=$props)
+          if !entry.extendedFrom
+            = renderEntry(entry)
   `
 }))

package/client/components/Props/Constructor/index.styl

@@ -12,6 +12,14 @@ $type = var(--color-text-info)
   &.right
     text-align right
 
+.extends
+  border-bottom-width 2px
+  border-bottom-color var(--color-border-main)
+  background-color rgba(black, 0.03)
+
+.collapsibleHeader
+  padding 1u 1u 1u 2u
+
 .possibleValue
   flex-direction row
 
@@ -19,6 +27,9 @@ $type = var(--color-text-info)
   color $value
   font-style italic
 
+.valueDefault
+  padding-left 4u
+
 .type
   color $type
   font-style italic

package/client/components/Props/Renderer/GridVisualizer/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { pug, observer, useModel, useLocal } from 'startupjs'
+import { pug, observer, $ } from 'startupjs'
 import { themed, Div, Span } from '@startupjs/ui'
 import './index.styl'
 
@@ -17,11 +17,11 @@ export default observer(function GridVisualizer ({
   style,
   children
 }) {
-  const $componentSize = useModel('_session.Renderer.componentSize')
+  const $componentSize = $.session.Renderer.componentSize
 
   function onLayout (e) {
     const { width, height } = e.nativeEvent.layout
-    $componentSize.setDiffDeep({ width, height })
+    $componentSize.set({ width, height })
   }
 
   // TODO: Bring back width check as an option. For now it's commented out.
@@ -45,7 +45,8 @@ export default observer(function GridVisualizer ({
 })
 
 const LeftBar = observer(themed(({ allowHalfUnit, validate, theme }) => {
-  const [height = 0] = useLocal('_session.Renderer.componentSize.height')
+  const $height = $.session.Renderer.componentSize.height
+  const height = $height.get() || 0
   const units = toUnits(height)
   const valid = validate ? validateGrid(height, allowHalfUnit) : true
 

package/client/components/Props/index.js

@@ -1,18 +1,14 @@
 import React, { useMemo, useState } from 'react'
-import { pug, observer, $root, useComponentId } from 'startupjs'
+import { pug, observer, $, useId } from 'startupjs'
 import { themed, Button, Div, ScrollView } from '@startupjs/ui'
-import parsePropTypesModule from 'parse-prop-types'
 import Constructor from './Constructor'
 import Renderer from './Renderer'
 import './index.styl'
 
-const parsePropTypes = parsePropTypesModule.default || parsePropTypesModule
-if (!parsePropTypes) throw Error('> Can\'t load parse-prop-types module. Issues with bundling')
-
-function useEntries ({ Component, props, extraParams }) {
+function useEntries ({ Component, props, extraParams, propsJsonSchema }) {
   return useMemo(() => {
-    const propTypes = parsePropTypes(Component)
-    const entries = Object.entries(propTypes)
+    if (!propsJsonSchema?.properties) return []
+    const entries = Object.entries(propsJsonSchema.properties)
 
     const res = parseEntries(entries)
       .filter(entry => entry.name[0] !== '_') // skip private properties
@@ -36,33 +32,43 @@ function useEntries ({ Component, props, extraParams }) {
     }
 
     return res
-  }, [])
+  }, [extraParams, props, propsJsonSchema])
 }
 
 function parseEntries (entries) {
   return entries.map(entry => {
+    const name = entry[0]
     const meta = entry[1]
+    let type = meta.type
+    if (meta.enum) type = 'oneOf'
+    if (meta.$comment && meta.$comment.startsWith('(')) type = 'function'
+    if (!type) type = 'any'
+    let extendedFrom = meta.extendedFrom
+    // children prop is special, it should not be marked as extendedFrom
+    if (name === 'children') extendedFrom = undefined
     return {
-      name: entry[0],
-      type: meta.type.name,
-      defaultValue: meta.defaultValue && meta.defaultValue.value,
-      possibleValues: meta.type.value,
-      isRequired: meta.required
+      name,
+      type,
+      defaultValue: meta.default,
+      possibleValues: meta.enum,
+      isRequired: meta.required,
+      description: meta.description,
+      extendedFrom
     }
   })
 }
 
 async function useInitDefaultProps ({ entries, $theProps }) {
   if ($theProps.get()) return
-  $theProps.setDiff({})
+  $theProps.set({})
 
   const promises = []
 
   for (const { name, value, defaultValue } of entries) {
     if (value !== undefined) {
-      promises.push($theProps.set(name, value, null))
+      promises.push($theProps[name].set(value))
     } else if (defaultValue !== undefined) {
-      promises.push($theProps.set(name, defaultValue, null))
+      promises.push($theProps[name].set(defaultValue))
     }
   }
   if (promises.length) throw await Promise.all(promises)
@@ -74,6 +80,7 @@ export default observer(themed(function PComponent ({
   Component,
   $props,
   props,
+  propsJsonSchema,
   extraParams,
   componentName,
   showGrid,
@@ -83,17 +90,17 @@ export default observer(themed(function PComponent ({
   block: defaultBlock
 }) {
   const [block, setBlock] = useState(!!defaultBlock)
-  const componentId = useComponentId()
+  const componentId = useId()
 
   const $theProps = useMemo(() => {
     if (!$props) {
-      return $root.scope(`_session.Props.${componentId}`)
+      return $.session.Props[componentId]
     } else {
       return $props
     }
-  }, [$props])
+  }, [$props, componentId])
 
-  const entries = useEntries({ Component, props, extraParams })
+  const entries = useEntries({ Component, props, extraParams, propsJsonSchema })
   useInitDefaultProps({ entries, $theProps })
 
   function Wrapper ({ children }) {
@@ -117,6 +124,7 @@ export default observer(themed(function PComponent ({
       Div.top
         Constructor(
           Component=Component
+          extendedFrom=propsJsonSchema?.extendedFrom
           $props=$theProps
           entries=entries
         )

package/client/components/Sandbox/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import { pug, observer, $root } from 'startupjs'
-import { H4 } from '@startupjs/ui'
+import { pug, observer, $, useId } from 'startupjs'
+import { H4, Alert } from '@startupjs/ui'
 import Props from '../Props'
 import {
   useShowGrid,
@@ -13,12 +13,14 @@ const MODELS = new WeakMap()
 
 export default observer(function Sandbox ({
   Component,
+  propsJsonSchema,
   $props,
   ...otherProps
 }) {
   const [showGrid] = useShowGrid()
   const [showSizes] = useShowSizes()
   const [validateWidth] = useValidateWidth()
+  const uniqId = useId()
 
   if (!Component) {
     return pug`
@@ -26,10 +28,25 @@ export default observer(function Sandbox ({
     `
   }
 
+  if (typeof propsJsonSchema !== 'object' || Object.keys(propsJsonSchema).length === 0) {
+    return pug`
+      Alert(variant='error')
+        | No propsJsonSchema provided for the Sandbox component (or it's an empty object).
+        | Make sure that:
+        |   1. your component file has the magic 'const export _PropsJsonSchema = ' declaration;
+        |   2. your component file has 'export interface' with props interface declared;
+        |   3. you import the '_PropsJsonSchema' from the component file
+        |        and pass it to the Sandbox as 'propsJsonSchema' prop;
+        |   4. 'babel-preset-startupjs' must have an option 'docgen: true' enabled
+        |        to transform the TS interface to JSON schema at build time.
+    `
+  }
+
   return pug`
     Props.root(
       Component=Component
-      $props=$props || getUniqModel(Component)
+      propsJsonSchema=propsJsonSchema
+      $props=$props || getUniqModel(Component, uniqId)
       showSizes=showSizes
       showGrid=showGrid
       validateWidth=validateWidth
@@ -38,10 +55,9 @@ export default observer(function Sandbox ({
   `
 })
 
-function getUniqModel (Component) {
+function getUniqModel (Component, uniqId) {
   if (MODELS.has(Component)) return MODELS.get(Component)
-  const uniqId = $root.id()
-  const $uniqModel = $root.scope('_session.Props.' + uniqId)
+  const $uniqModel = $.session.Props[uniqId]
   MODELS.set(Component, $uniqModel)
   return $uniqModel
 }

package/index.js

@@ -1,12 +1,13 @@
-import { routes, Layout } from './client/app'
-import { wrapDocsContext } from './docsContext'
+// TODO: refactor docs app to work with the new expo app structure
+// import { routes, Layout } from './client/app'
+// import { wrapDocsContext } from './docsContext'
 
-// Wrap Layout into context
-export default function (docs) {
-  return {
-    routes,
-    Layout: wrapDocsContext(Layout, docs)
-  }
-}
+// // Wrap Layout into context
+// export default function (docs) {
+//   return {
+//     routes,
+//     Layout: wrapDocsContext(Layout, docs)
+//   }
+// }
 
 export * from './client/components'

package/package.json

@@ -4,14 +4,13 @@
     "access": "public"
   },
   "description": "MDX documentation generator",
-  "version": "0.60.0-canary.0",
+  "version": "0.60.0-canary.11",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@startupjs/mdx": "^0.60.0-canary.0",
-    "@startupjs/scrollable-anchors": "^0.60.0-canary.0",
-    "parse-prop-types": "^0.3.0"
+    "@startupjs/mdx": "^0.60.0-canary.9",
+    "@startupjs/scrollable-anchors": "^0.60.0-canary.7"
   },
   "peerDependencies": {
     "@startupjs/ui": "*",
@@ -19,5 +18,5 @@
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "4c5baa750402d0beb02921a38413620b348bd374"
+  "gitHead": "98f7cc4f4c26816b15366986e81de0a4b996f8b1"
 }