@startupjs/docs 0.55.0 → 0.55.2

package/client/app/Layout/Sidebar/Content/Options/index.styl

@@ -1,6 +1,6 @@
 .header
   padding 1u 1u 1u 2u
-  background-color var(--color-bg)
+  background-color var(--color-bg-main)
 
 .content
   padding-top 2u

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ScrollView, Image } from 'react-native'
 import { pug, observer } from 'startupjs'
-import { Div, Row, Select } from '@startupjs/ui'
+import { Div, Select } from '@startupjs/ui'
 import { BASE_URL } from '@env'
 import { useLang } from '../../../../clientHelpers'
 import Options from './Options'
@@ -25,7 +25,7 @@ export default observer(function Content ({
       ScrollView
         Image.logo(testID='logo' source={ uri: baseUrl + '/img/docs.png' })
         Docs
-      Row.footer
+      Div.footer(row)
         Select.lang(
           testID='languagesSelect'
           options=LANGUAGES

package/client/app/Layout/Sidebar/Content/index.styl

@@ -1,5 +1,5 @@
 .root
-  background-color var(--color-bg)
+  background-color var(--color-bg-main)
   flex 1
 
 .main
@@ -16,14 +16,14 @@
   margin-bottom 4u
 
 .hr
-  border-bottom-color var(--color-border)
+  border-bottom-color var(--color-border-main)
 
 .footer
   padding-top 1u
   padding-bottom 1u
   padding-left 2u
   padding-right 0.5u
-  background-color var(--color-bg-dim)
+  background-color var(--color-bg-main-subtle)
 
 .lang
   // TODO: flex-grow 1 for some reason gets removed. Research.

package/client/app/Layout/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { pug, emit, observer, useModel, $ } from 'startupjs'
 import { pathFor, useLocation } from 'startupjs/app'
-import { AutoSuggest, Button, Div, Layout, Menu, Row, Span } from '@startupjs/ui'
+import { AutoSuggest, Button, Div, Layout, Menu, Span } from '@startupjs/ui'
 import { MDXProvider } from '@startupjs/mdx'
 import { ScrollableProvider } from '@startupjs/scrollable-anchors'
 import { faBars, faSearch } from '@fortawesome/free-solid-svg-icons'
@@ -77,7 +77,7 @@ const Topbar = observer(function Topbar () {
   }
 
   return pug`
-    Row.topbar
+    Div.topbar(row)
       Button(testID='button' variant='text' icon=faBars onPress=toggleSidebar color='text-description')
       Div.searchWrapper
         Search

package/client/app/Layout/index.styl

@@ -1,20 +1,20 @@
 @require '../constants.styl'
 
 .layout
-  background-color var(--color-bg-strong)
+  background-color var(--color-bg-main-strong)
 
 .topbar
   align-items center
   justify-content space-between
   border-bottom-width 1px
-  border-bottom-color var(--color-border-strong-alt)
+  border-bottom-color var(--color-border-main-strong-alt)
   height $TOPBAR_HEIGHT
   padding 0 1u
 
 .searchWrapper
   width 32u
   border-left-width 1px
-  border-left-color var(--color-border)
+  border-left-color var(--color-border-main)
   padding-left 2u
 
   +tablet()

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

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

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

@@ -1,4 +1,4 @@
-$input = var(--color-border)
+$input = var(--color-border-main)
 $header = var(--color-text-description)
 $darkHeader = var(--color-text-on-contrast)
 $value = var(--color-text-success)

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { pug, observer, useModel, useLocal } from 'startupjs'
-import { themed, Div, Span, Row } from '@startupjs/ui'
+import { themed, Div, Span } from '@startupjs/ui'
 import './index.styl'
 
 const GRID_SIZE = 8
@@ -17,16 +17,16 @@ export default observer(function GridVisualizer ({
   style,
   children
 }) {
-  let $componentSize = useModel('_session.Renderer.componentSize')
+  const $componentSize = useModel('_session.Renderer.componentSize')
 
   function onLayout (e) {
-    let { width, height } = e.nativeEvent.layout
+    const { width, height } = e.nativeEvent.layout
     $componentSize.setDiffDeep({ width, height })
   }
 
   // TODO: Bring back width check as an option. For now it's commented out.
   return pug`
-    Row.vertical
+    Div.vertical(row)
       LeftBar(
         allowHalfUnit=allowHalfUnit
         validate=validateHeight
@@ -45,13 +45,13 @@ export default observer(function GridVisualizer ({
 })
 
 const LeftBar = observer(themed(({ allowHalfUnit, validate, theme }) => {
-  let [height = 0] = useLocal('_session.Renderer.componentSize.height')
-  let units = toUnits(height)
-  let valid = validate ? validateGrid(height, allowHalfUnit) : true
+  const [height = 0] = useLocal('_session.Renderer.componentSize.height')
+  const units = toUnits(height)
+  const valid = validate ? validateGrid(height, allowHalfUnit) : true
 
   return pug`
     Div.leftBar
-      Row.leftBarWrapper(style={ width: height })
+      Div.leftBarWrapper(style={ width: height } row)
         Div.leftBarLine(styleName=[theme, { valid }])
         Span.leftBarText(styleName=[theme, { valid }])= units
         Div.leftBarLine(styleName=[theme, { valid }])

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { pug, observer } from 'startupjs'
-import { themed, Row, Div } from '@startupjs/ui'
+import { themed, Div } from '@startupjs/ui'
 import GridVisualizer from './GridVisualizer'
 
 export default observer(themed(function Renderer ({
@@ -19,12 +19,13 @@ export default observer(themed(function Renderer ({
   style
 }) {
   let Wrapper
-  let extraProps = {}
+  const extraProps = {}
   if (showSizes) {
     Wrapper = GridVisualizer
     extraProps.block = block
   } else {
-    Wrapper = block ? Div : Row
+    Wrapper = Div
+    extraProps.row = !block
   }
 
   return pug`

package/client/components/Props/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react'
 import { pug, observer, $root, useComponentId } from 'startupjs'
-import { themed, Button, Row, Div, ScrollView } from '@startupjs/ui'
+import { themed, Button, Div, ScrollView } from '@startupjs/ui'
 import parsePropTypesModule from 'parse-prop-types'
 import Constructor from './Constructor'
 import Renderer from './Renderer'
@@ -41,7 +41,7 @@ function useEntries ({ Component, props, extraParams }) {
 
 function parseEntries (entries) {
   return entries.map(entry => {
-    let meta = entry[1]
+    const meta = entry[1]
     return {
       name: entry[0],
       type: meta.type.name,
@@ -133,7 +133,7 @@ export default observer(themed(function PComponent ({
             showSizes=showSizes
             block=block
           )
-        Row.display(align='right')
+        Div.display(align='right' row)
           Button(
             size='s'
             variant='text'

package/client/components/Props/index.styl

@@ -5,14 +5,14 @@ $darkBottomBg = var(--color-bg-contrast-alt)
   margin-top 2u
 
 .top
-  background-color var(--color-bg)
+  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-dim)
+  background-color var(--color-bg-main-subtle)
   border-bottom-left-radius 1u
   border-bottom-right-radius 1u
 

package/package.json

@@ -4,14 +4,14 @@
     "access": "public"
   },
   "description": "MDX documentation generator",
-  "version": "0.55.0",
+  "version": "0.55.2",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@startupjs/mdx": "^0.55.0",
-    "@startupjs/scrollable-anchors": "^0.55.0",
-    "@startupjs/ui": "^0.55.0",
+    "@startupjs/mdx": "^0.55.2",
+    "@startupjs/scrollable-anchors": "^0.55.2",
+    "@startupjs/ui": "^0.55.2",
     "parse-prop-types": "^0.3.0"
   },
   "peerDependencies": {
@@ -19,5 +19,5 @@
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "96bd7446a242b5c096b03a25a99e8a1fae3bb9a7"
+  "gitHead": "402da5248667019425e0b9c535c20d7c48f8f772"
 }