@startupjs-ui/docs 0.1.3

package/client/clientHelpers/hooks/index.js

@@ -0,0 +1,6 @@
+export { default as useLocalWithDefault } from './useLocalWithDefault'
+export { default as useShowGrid } from './useShowGrid'
+export { default as useShowSizes } from './useShowSizes'
+export { default as useValidateWidth } from './useValidateWidth'
+export { default as useLocalStorage } from './useLocalStorage'
+export { default as useLang } from './useLang'

package/client/clientHelpers/hooks/useLang.js

@@ -0,0 +1,12 @@
+import { useSession } from 'startupjs'
+import useLocalStorage from './useLocalStorage'
+import { DEFAULT_LANGUAGE } from './../../const'
+
+export default function useLang () {
+  const [lang, setLang] = useLocalStorage('lang', DEFAULT_LANGUAGE)
+  const [sessionLang, $sessionLang] = useSession('lang')
+  return [sessionLang || lang, newValue => {
+    setLang(newValue)
+    $sessionLang.setDiff(newValue)
+  }]
+}

package/client/clientHelpers/hooks/useLocalStorage.js

@@ -0,0 +1,37 @@
+// ref: https://usehooks.com/useLocalStorage/
+import { useState } from 'react'
+
+// Hook
+export default function useLocalStorage (key, initialValue) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key)
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue
+    } catch (error) {
+      // If error also return initialValue
+      return initialValue
+    }
+  })
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = value => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value
+      // Save state
+      setStoredValue(valueToStore)
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore))
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+    }
+  }
+
+  return [storedValue, setValue]
+}

package/client/clientHelpers/hooks/useLocalWithDefault.js

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

package/client/clientHelpers/hooks/useShowGrid.js

@@ -0,0 +1,6 @@
+import useLocalWithDefault from './useLocalWithDefault'
+const PATH = '_session.Props.showGrid'
+
+export default function useShowGrid () {
+  return useLocalWithDefault(PATH, false)
+}

package/client/clientHelpers/hooks/useShowSizes.js

@@ -0,0 +1,6 @@
+import useLocalWithDefault from './useLocalWithDefault'
+const PATH = '_session.Props.showSizes'
+
+export default function useShowSizes () {
+  return useLocalWithDefault(PATH, true)
+}

package/client/clientHelpers/hooks/useValidateWidth.js

@@ -0,0 +1,6 @@
+import useLocalWithDefault from './useLocalWithDefault'
+const PATH = '_session.Props.validateWidth'
+
+export default function useValidateWidth () {
+  return useLocalWithDefault(PATH, false)
+}

package/client/clientHelpers/index.js

@@ -0,0 +1,2 @@
+export * from './hooks'
+export { default as getTitle } from './getTitle'

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

@@ -0,0 +1,10 @@
+import React from 'react'
+import { pug, observer } from 'startupjs'
+import Div from '@startupjs-ui/div'
+import './index.styl'
+
+export default observer(function Table ({ children, style }) {
+  return pug`
+    Div.root(style=style)= children
+  `
+})

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

@@ -0,0 +1,2 @@
+.root
+  width 100%

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

@@ -0,0 +1,9 @@
+import React from 'react'
+import { pug, observer } from 'startupjs'
+import Div from '@startupjs-ui/div'
+
+export default observer(function Tbody ({ children, style }) {
+  return pug`
+    Div(style=style)= children
+  `
+})

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

@@ -0,0 +1,10 @@
+import React from 'react'
+import { pug, observer } from 'startupjs'
+import Div from '@startupjs-ui/div'
+import './index.styl'
+
+export default observer(function Td ({ children, style }) {
+  return pug`
+    Div.root(style=style)= children
+  `
+})

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

@@ -0,0 +1,4 @@
+.root
+  padding 1u
+  flex 1
+  justify-content center

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

@@ -0,0 +1,9 @@
+import React from 'react'
+import { pug, observer } from 'startupjs'
+import Div from '@startupjs-ui/div'
+
+export default observer(function Thead ({ children, style }) {
+  return pug`
+    Div(style=style)= children
+  `
+})

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

@@ -0,0 +1,11 @@
+import React from 'react'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import './index.styl'
+
+export default observer(themed(function Tr ({ children, style }) {
+  return pug`
+    Div.root(style=style)= children
+  `
+}))

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

@@ -0,0 +1,6 @@
+.root
+  flex-direction row
+  border-color var(--color-border-main)
+  border-bottom-width 1px
+  padding-left 1u
+  padding-right 1u

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

@@ -0,0 +1,55 @@
+import React, { useCallback, useMemo } from 'react'
+import { pug, observer, $ } from 'startupjs'
+import Button from '@startupjs-ui/button'
+import Span from '@startupjs-ui/span'
+import { themed } from '@startupjs-ui/core'
+import '../index.styl'
+
+const MAX_ITEMS = 10
+
+export default observer(themed(function TypeCell ({ possibleValues, theme, type }) {
+  const $collapsed = $(true)
+
+  const values = useMemo(() => {
+    if (!Array.isArray(possibleValues)) return []
+    return $collapsed.get() ? possibleValues.slice(0, MAX_ITEMS) : possibleValues
+  }, [$collapsed, possibleValues])
+
+  const toggleList = useCallback(() => {
+    $collapsed.set(!$collapsed.get())
+  }, [$collapsed])
+
+  const renderButton = useCallback(() => {
+    if (possibleValues?.length <= MAX_ITEMS) return null
+    return pug`
+      Span &nbsp&nbsp
+      Button(
+        color='primary'
+        size='s'
+        variant='text'
+        onPress=toggleList
+      )= $collapsed.get() ? 'More...' : 'Less'
+    `
+  }, [$collapsed, possibleValues, toggleList]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return pug`
+    if type === 'oneOf'
+      Span.possibleValue
+        each value, index in values
+          Span(key=index)
+            if index
+              Span.separator(styleName=[theme]) #{' | '}
+            Span.value(styleName=[theme])= JSON.stringify(value)
+        = renderButton()
+    else if type === 'oneOfType'
+      Span.possibleType
+        each value, index in values
+          React.Fragment(key=index)
+            if index
+              Span.separator #{' | '}
+            Span.type(styleName=[theme])= value && value.name
+        = renderButton()
+    else
+      Span.type(styleName=[theme])= type
+  `
+}))

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

@@ -0,0 +1,246 @@
+import React, { useCallback, useMemo } from 'react'
+import { pug, batch, observer, $ } from 'startupjs'
+import Br from '@startupjs-ui/br'
+import Input from '@startupjs-ui/input'
+import Span from '@startupjs-ui/span'
+import debounce from 'lodash/debounce'
+import isPlainObject from 'lodash/isPlainObject'
+import keys from 'lodash/keys'
+import omit from 'lodash/omit'
+// TODO: IMPORTANT! Refactor this to NOT import all icons
+//       since it HUGELY bloats the bundle size
+import * as icons from '@fortawesome/free-solid-svg-icons'
+import '../index.styl'
+
+const EDITABLE_TYPES = ['string', 'number', 'boolean', 'oneOf', 'array', 'object']
+
+const IconSelect = observer(function ({ $value, value }) {
+  const _icons = useMemo(
+    () =>
+      keys(omit(icons, ['fas', 'prefix'])).map(key => ({
+        label: key,
+        value: icons[key]
+      })),
+    []
+  )
+
+  return pug`
+    Input(
+      options=_icons
+      size='s'
+      type='select'
+      value=value
+      onChange=value => $value.set(value)
+    )
+`
+})
+
+const JSONInput = observer(function ({ $value, type }) {
+  const _JSONValue = useMemo(() => {
+    const value = $value.get()
+    return value ? JSON.stringify(value) : ''
+  }, [$value])
+
+  const $tempJSON = $(_JSONValue)
+  const $badJSON = $(false)
+
+  const validateJson = useCallback( // eslint-disable-line react-hooks/exhaustive-deps
+    debounce(text => {
+      try {
+        if (!text) {
+          $value.del() // clear value if no text
+        } else {
+          const parsedValue = JSON.parse(text)
+          const isValidValue = parsedValue && validateByType(type, parsedValue)
+          if (isValidValue) {
+            $value.set(parsedValue)
+            $badJSON.set(false)
+          } else {
+            $badJSON.set(true)
+          }
+        }
+      } catch (error) {
+        $badJSON.set(true)
+      }
+    }, 300),
+    [$badJSON, $value]
+  )
+
+  function onChangeJSON (text) {
+    $tempJSON.set(text)
+    validateJson(text)
+  }
+
+  return pug`
+    Input(
+      inputStyleName={ badJSON: $badJSON.get() }
+      size='s'
+      type='text'
+      value=$tempJSON.get() || ''
+      onChangeText=onChangeJSON
+    )
+  `
+})
+
+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) {
+        return pug`
+          IconSelect($value=$value value=value)
+        `
+      }
+      return pug`
+        JSONInput(
+          type=type
+          value=value
+          $value=$value
+        )
+      `
+    case 'string':
+      return pug`
+        Input(
+          size='s'
+          type='text'
+          value=value
+          onChangeText=value => $value.set(value)
+          ...extraParams
+        )
+      `
+    case 'number':
+      return pug`
+        Input(
+          size='s'
+          type='number'
+          value=value
+          onChangeNumber=value => $value.set(value)
+          ...extraParams
+        )
+      `
+    case 'boolean':
+      return pug`
+        Input.checkbox(
+          type='checkbox'
+          value=!!value
+          onChange=value => $value.set(value)
+        )
+      `
+    case 'oneOf':
+      return pug`
+        Input(
+          options=options
+          size='s'
+          type='select'
+          value=value
+          onChange=value => $value.set(value)
+          ...extraParams
+        )
+      `
+    default:
+      return null
+  }
+})
+
+const TypesSelect = observer(function ({
+  $props,
+  entry: { name, defaultValue, possibleValues, extraParams = {} }
+}) {
+  const { names, options } = useMemo(
+    () =>
+      possibleValues.reduce(
+        (acc, { name, value }) => {
+          if (!EDITABLE_TYPES.includes(name)) return acc
+          acc.names.push(name)
+          acc.options[name] = Array.isArray(value) ? value : []
+          return acc
+        },
+        { names: [], options: {} }
+      ),
+    [possibleValues]
+  )
+  const $selectedValue = $(names[0])
+  const $value = $props[name]
+  const value = $value.get()
+
+  function onChange (value) {
+    batch(() => {
+      if (defaultValue !== undefined && validateByType(value, defaultValue)) {
+        $value.set(defaultValue)
+      } else {
+        $value.del()
+      }
+      $selectedValue.set(value)
+    })
+  }
+
+  return pug`
+    if names.length
+      Input(
+        options=names
+        showEmptyValue=false
+        size='s'
+        type='select'
+        value=$selectedValue.get()
+        onChange=onChange
+      )
+      Br(half)
+      PropInput(
+        $value=$value
+        extraParams=extraParams
+        options=options[$selectedValue.get()]
+        type=$selectedValue.get()
+        value=value
+      )
+    else
+      Span.unsupported -
+  `
+})
+
+export default observer(function ValueCell ({ $props, entry }) {
+  const { extraParams, name, possibleValues, type } = entry
+  const $value = $props[name]
+  const value = $value.get()
+
+  if (/^\$/.test(name)) { // hide Input for model prop
+    return pug`
+      Span.unsupported -
+    `
+  }
+
+  return pug`
+    if EDITABLE_TYPES.includes(type)
+      PropInput(
+        $value=$value
+        extraParams=extraParams
+        options=possibleValues
+        type=type
+        value=value
+      )
+    else if type === 'oneOfType'
+      TypesSelect($props=$props entry=entry)
+    else
+      Span.unsupported -
+  `
+})
+
+function validateByType (type, value) {
+  switch (type) {
+    case 'array':
+      return Array.isArray(value)
+    case 'object':
+      return isPlainObject(value)
+    case 'boolean':
+      return typeof value === 'boolean'
+    case 'number':
+      return typeof value === 'number'
+    case 'string':
+      return typeof value === 'string'
+    case 'oneOf':
+      return true
+    default:
+      return false
+  }
+}

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

@@ -0,0 +1,84 @@
+import React from 'react'
+import { Platform } from 'react-native'
+import { pug, observer, $ } from 'startupjs'
+import Span from '@startupjs-ui/span'
+import Tag from '@startupjs-ui/tag'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Table from './Table'
+import Tbody from './Tbody'
+import Thead from './Thead'
+import Tr from './Tr'
+import Td from './Td'
+import TypeCell from './TypeCell'
+import ValueCell from './ValueCell'
+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.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
+          if !entry.extendedFrom
+            = renderEntry(entry)
+  `
+}))

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

@@ -0,0 +1,55 @@
+$input = var(--color-border-main)
+$header = var(--color-text-description)
+$value = var(--color-text-success)
+$type = var(--color-text-info)
+
+.header
+  font-size 12px
+  letter-spacing 1px
+  fontFamily('normal', 600)
+  color $header
+
+  &.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
+
+.value
+  color $value
+  font-style italic
+
+.valueDefault
+  padding-left 4u
+
+.type
+  color $type
+  font-style italic
+
+.checkbox
+  align-self flex-end
+
+.unsupported
+  color var(--color-text-description)
+  text-align right
+
+.separator
+  color var(--color-text-placeholder)
+
+.vCenter
+  justify-content center
+
+.required
+  margin-top 0.5u
+  align-self flex-start
+
+.badJSON
+  color var(--color-text-error)