@startupjs-ui/docs 0.1.3

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

@@ -0,0 +1,88 @@
+import React from 'react'
+import { pug, observer, $ } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import './index.styl'
+
+const GRID_SIZE = 8
+const VALIDATE_WIDTH = false
+const VALIDATE_HEIGHT = true
+const ALLOW_HALF_UNIT = true
+
+export default observer(function GridVisualizer ({
+  validateWidth = VALIDATE_WIDTH,
+  validateHeight = VALIDATE_HEIGHT,
+  allowHalfUnit = ALLOW_HALF_UNIT,
+  showGrid,
+  block,
+  style,
+  children
+}) {
+  const $componentSize = $.session.Renderer.componentSize
+
+  function onLayout (e) {
+    const { width, height } = e.nativeEvent.layout
+    $componentSize.set({ width, height })
+  }
+
+  // TODO: Bring back width check as an option. For now it's commented out.
+  return pug`
+    Div.vertical(row)
+      LeftBar(
+        allowHalfUnit=allowHalfUnit
+        validate=validateHeight
+      )
+      // TopBar(allowHalfUnit=allowHalfUnit validate=validateWidth)
+      // it's style for component wrapper!!!
+      Div.content(
+        style=style
+        styleName={ block }
+        onLayout=onLayout
+      )
+        | #{children}
+        if showGrid
+          Div.gridVisualizer(pointerEvents='none')
+`
+})
+
+const LeftBar = observer(themed(({ allowHalfUnit, validate, theme }) => {
+  const $height = $.session.Renderer.componentSize.height
+  const height = $height.get() || 0
+  const units = toUnits(height)
+  const valid = validate ? validateGrid(height, allowHalfUnit) : true
+
+  return pug`
+    Div.leftBar
+      Div.leftBarWrapper(style={ width: height } row)
+        Div.leftBarLine(styleName=[theme, { valid }])
+        Span.leftBarText(styleName=[theme, { valid }])= units
+        Div.leftBarLine(styleName=[theme, { valid }])
+  `
+}))
+
+// TODO: Bring back width check as an option. For now it's commented out.
+// const TopBar = observer(themed(({ allowHalfUnit, validate, theme }) => {
+//   let [width = 0] = useLocal('_session.Renderer.componentSize.width')
+//   let units = toUnits(width)
+//   let valid = validate ? validateGrid(width, allowHalfUnit) : true
+
+//   return pug`
+//     View.topBar
+//       View.topBarLine(styleName=[theme, { valid }])
+//       View.topBarUnits
+//         Text.topBarText(styleName=[theme, { valid }])= NBSP + units + NBSP
+//       View.topBarLine(styleName=[theme, { valid }])
+//   `
+// }))
+
+function toUnits (pixels) {
+  return Math.floor(pixels / GRID_SIZE * 10) / 10
+}
+
+function validateGrid (pixels, allowHalfUnit) {
+  return (
+    pixels % GRID_SIZE === 0 ||
+    (allowHalfUnit && pixels % (GRID_SIZE / 2) === 0)
+  )
+}

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

@@ -0,0 +1,108 @@
+$major = rgba(green, 0.15)
+$minor = rgba(black, 0.05)
+$size = 1u
+$double = $size * 2
+$bar = 2u
+$barMargin = 1u
+$valid = rgba(black, 0.2)
+$validLine = rgba(black, 0.1)
+$invalid = red
+$bg = #f5f5f5
+
+$darkBg = #333333
+$darkValid = rgba(white, 0.3)
+$darkInvalid = lighten(red, 40%)
+$darkValidLine = rgba(white, 0.2)
+
+grid(direction, color, size)
+  return linear-gradient(direction, color 0px, color 1px, transparent 1px, transparent size)
+
+.gridVisualizer
+  position absolute
+  top 0
+  right 0
+  bottom 0
+  left 0
+  +web()
+    pointer-events none
+    background-image grid(to right, $major, $double), grid(to bottom, $major, $double), grid(to right, $minor, $double), grid(to bottom, $minor, $double)
+    background-size $double $double, $double $double, $double $double, $double $double
+    background-position 0 0, 0 0, $size $size, $size $size
+    background-repeat repeat, repeat, repeat, repeat
+
+.filler
+  height $bar + $barMargin
+  width $bar
+
+.content
+  margin-left 2u
+
+  &.block
+    flex-grow 1
+
+.leftBar
+  align-items center
+  justify-content center
+
+  &Wrapper
+    align-items center
+    transform rotate(-90deg)
+    position absolute
+
+  &Text
+    font-size 10px
+    color $invalid
+    margin 0 .5u
+
+    &.valid
+      color $valid
+    &.dark
+      background-color $darkBg
+      color $darkInvalid
+      &.valid
+        color $darkValid
+
+  &Line
+    flex 1
+    height 0.5u
+    background-color $invalid
+    &.valid
+      height 1px
+      background-color $validLine
+    &.dark
+      background-color $darkInvalid
+      &.valid
+        background-color $darkValidLine
+
+.topBar
+  flex-direction row
+  height $bar
+  margin-bottom $barMargin
+  align-items center
+
+  &Units
+    z-index 1
+
+  &Text
+    font-size 10px
+    color $invalid
+    background-color $bg
+    &.valid
+      color $valid
+    &.dark
+      background-color $darkBg
+      color $darkInvalid
+      &.valid
+        color $darkValid
+
+  &Line
+    flex 1
+    height 0.5u
+    background-color $invalid
+    &.valid
+      height 1px
+      background-color $validLine
+    &.dark
+      background-color $darkInvalid
+      &.valid
+        background-color $darkValidLine

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

@@ -0,0 +1,44 @@
+import React from 'react'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import GridVisualizer from './GridVisualizer'
+
+export default observer(themed(function Renderer ({
+  Component,
+  props: {
+    children,
+    ...props
+  },
+  showSizes = true,
+  showGrid,
+  validateWidth,
+  validateHeight,
+  allowHalfUnit,
+  theme,
+  block,
+  style
+}) {
+  let Wrapper
+  const extraProps = {}
+  if (showSizes) {
+    Wrapper = GridVisualizer
+    extraProps.block = block
+  } else {
+    Wrapper = Div
+    extraProps.row = !block
+  }
+
+  return pug`
+    Wrapper(
+      ...extraProps
+      style=style
+      validateWidth=validateWidth
+      validateHeight=validateHeight
+      allowHalfUnit=allowHalfUnit
+      showGrid=showGrid
+    )
+      Component(...props)
+        = children
+  `
+}))

package/client/components/Props/index.js

@@ -0,0 +1,160 @@
+import React, { useMemo, useState } from 'react'
+import { pug, observer, $, useId } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Button from '@startupjs-ui/button'
+import Div from '@startupjs-ui/div'
+import ScrollView from '@startupjs-ui/scroll-view'
+import Constructor from './Constructor'
+import Renderer from './Renderer'
+import './index.styl'
+
+function useEntries ({ Component, props, extraParams, propsJsonSchema }) {
+  return useMemo(() => {
+    if (!propsJsonSchema?.properties) return []
+    const entries = Object.entries(propsJsonSchema.properties)
+
+    const res = parseEntries(entries)
+      .filter(entry => entry.name[0] !== '_') // skip private properties
+
+    for (const key in props) {
+      const item = res.find(item => item.name === key)
+      if (item) {
+        item.value = props[key]
+      } else {
+        res.push({
+          name: key,
+          type: typeof props[key],
+          value: props[key]
+        })
+      }
+    }
+
+    for (const key in extraParams) {
+      const item = res.find(item => item.name === key)
+      if (item) item.extraParams = extraParams[key]
+    }
+
+    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,
+      type,
+      defaultValue: meta.default,
+      possibleValues: meta.enum,
+      isRequired: meta.required,
+      description: meta.description,
+      extendedFrom
+    }
+  })
+}
+
+function useInitDefaultProps ({ entries, $theProps }) {
+  if ($theProps.get()) return
+  $theProps.set({})
+
+  for (const { name, value, defaultValue } of entries) {
+    // When accessing property which starts with '$' it gets removed by Signal's Proxy
+    // that's why we need to add an extra '$' at the beginning to access the original name
+    const $prop = name.startsWith('$') ? $theProps['$' + name] : $theProps[name]
+    if (value !== undefined) {
+      $prop.set(value)
+    } else if (defaultValue !== undefined) {
+      $prop.set(defaultValue)
+    }
+  }
+}
+
+export default observer(themed(function PComponent ({
+  style,
+  rendererStyle,
+  Component,
+  $props,
+  props,
+  propsJsonSchema,
+  extraParams,
+  componentName,
+  showGrid,
+  validateWidth,
+  showSizes,
+  noScroll,
+  block: defaultBlock
+}) {
+  const [block, setBlock] = useState(!!defaultBlock)
+  const componentId = useId()
+
+  const $theProps = useMemo(() => {
+    if (!$props) {
+      return $.session.Props[componentId]
+    } else {
+      return $props
+    }
+  }, [$props, componentId])
+
+  const entries = useEntries({ Component, props, extraParams, propsJsonSchema })
+  useInitDefaultProps({ entries, $theProps })
+
+  function Wrapper ({ children }) {
+    if (noScroll) {
+      return pug`
+        Div.scroll.scrollContent
+          = children
+      `
+    }
+
+    return pug`
+      ScrollView.scroll(
+        contentContainerStyleName='scrollContent'
+        horizontal
+      )= children
+    `
+  }
+
+  return pug`
+    Div.root(style=style)
+      Div.top
+        Constructor(
+          Component=Component
+          extendedFrom=propsJsonSchema?.extendedFrom
+          $props=$theProps
+          entries=entries
+        )
+
+      Div.bottom
+        Wrapper
+          Renderer(
+            style=rendererStyle
+            Component=Component
+            props=$theProps.get()
+            showGrid=showGrid
+            validateWidth=validateWidth
+            showSizes=showSizes
+            block=block
+          )
+        Div.display(align='right' row)
+          Button(
+            size='s'
+            variant='text'
+            color=block ? undefined : 'primary'
+            onPress=() => setBlock(false)
+          ) inline
+          Button(
+            size='s'
+            variant='text'
+            color=block ? 'primary' : undefined
+            onPress=() => setBlock(true)
+          ) block
+  `
+}))

package/client/components/Props/index.styl

@@ -0,0 +1,25 @@
+.root
+  margin-top 2u
+
+.top
+  background-color var(--color-bg-main)
+  border-top-left-radius 1u
+  border-top-right-radius 1u
+  padding-top 1u
+
+.bottom
+  padding-top 4u
+  background-color var(--color-bg-main-subtle)
+  border-bottom-left-radius 1u
+  border-bottom-right-radius 1u
+
+.scroll
+  padding-bottom 2u
+
+  &Content
+    flex-direction column
+    flex-grow 1
+    padding 0 2u
+
+.display
+  margin .5u 2u

package/client/components/Sandbox/index.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import { pug, observer, $, useId } from 'startupjs'
+import Span from '@startupjs-ui/span'
+import Alert from '@startupjs-ui/alert'
+import Props from '../Props'
+import {
+  useShowGrid,
+  useShowSizes,
+  useValidateWidth
+} from '../../clientHelpers'
+import './index.styl'
+
+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`
+      Span.error(h4) ERROR! Sandbox Component not specified
+    `
+  }
+
+  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
+      propsJsonSchema=propsJsonSchema
+      $props=$props || getUniqModel(Component, uniqId)
+      showSizes=showSizes
+      showGrid=showGrid
+      validateWidth=validateWidth
+      ...otherProps
+    )
+  `
+})
+
+function getUniqModel (Component, uniqId) {
+  if (MODELS.has(Component)) return MODELS.get(Component)
+  const $uniqModel = $.session.Props[uniqId]
+  MODELS.set(Component, $uniqModel)
+  return $uniqModel
+}

package/client/components/Sandbox/index.styl

@@ -0,0 +1,2 @@
+.error
+  color var(--color-text-error)

package/client/components/index.js

@@ -0,0 +1,2 @@
+export { default as Props } from './Props'
+export { default as Sandbox } from './Sandbox'

package/client/const/index.js

@@ -0,0 +1,2 @@
+export const DEFAULT_LANGUAGE = 'en'
+export const LANGUAGES = ['en', 'ru']

package/docsContext.js

@@ -0,0 +1,17 @@
+import { useContext, createContext } from 'react'
+
+const DocsContext = createContext()
+
+export function wrapDocsContext (Component, docs = {}) {
+  return function DocsContextWrapper (props) {
+    return (
+      <DocsContext.Provider value={docs}>
+        <Component {...props} />
+      </DocsContext.Provider>
+    )
+  }
+}
+
+export function useDocsContext () {
+  return useContext(DocsContext)
+}

package/index.js

@@ -0,0 +1,13 @@
+// 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)
+//   }
+// }
+
+export * from './client/components'

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@startupjs-ui/docs",
+  "description": "MDX documentation generator",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "index.js",
+  "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@startupjs-ui/alert": "^0.1.3",
+    "@startupjs-ui/br": "^0.1.3",
+    "@startupjs-ui/button": "^0.1.3",
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/input": "^0.1.3",
+    "@startupjs-ui/scroll-view": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3",
+    "@startupjs-ui/tag": "^0.1.3",
+    "lodash": "^4.17.20"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}