@startupjs/docs 0.55.0-alpha.9 → 0.55.1

package/README.md

@@ -90,6 +90,6 @@ startupjs: >= 0.33.0
     />
     ```
 
-## Licence
+## License
 
 MIT

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

@@ -35,7 +35,7 @@ const MenuItem = observer(function MenuItemComponent ({
           icon=faAngleRight
           iconStyleName='collapse-icon'
         )
-          Menu.Item.item(
+          Menu.Item(
             style=menuItemStyle
             active=active
             to=doc.component ? rootPath : null

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { pug, observer, useValue, $ } from 'startupjs'
-import { Br, Input, Button, Modal, CssVariables, Palette, Colors } from '@startupjs/ui'
+import { Br, Input, Button, Modal } from '@startupjs/ui'
 import { faSlidersH } from '@fortawesome/free-solid-svg-icons'
 import {
   useShowGrid,
@@ -9,18 +9,6 @@ import {
 } from '../../../../../clientHelpers'
 import './index.styl'
 
-const palette = new Palette()
-const { Color, generateColors } = palette
-
-const THEMES = {
-  dark: generateColors({
-    [Colors.bg]: Color('coolGray', 0),
-    [Colors.text]: Color('coolGray', 9),
-    [Colors.border]: Color('coolGray', 2),
-    [Colors.secondary]: Color('coolGray', 9)
-  })
-}
-
 export default observer(function Options ({
   style
 }) {
@@ -42,8 +30,6 @@ export default observer(function Options ({
   }
 
   return pug`
-    if theme !== 'light'
-      CssVariables(meta=THEMES[theme])
     Button(
       style=style
       icon=faSlidersH

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/index.js

@@ -1,11 +1,10 @@
 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'
-import { APP_ENV } from '@env'
 import Sidebar, { SIDEBAR_PATH } from './Sidebar'
 import { useDocsContext } from '../../../docsContext'
 import { useLang, getTitle } from '../../clientHelpers'
@@ -57,14 +56,6 @@ const Search = observer(function Search () {
     emit('url', value.value)
   }
 
-  function onChangeText (value) {
-    const testComponentUrlRegExp = /^\/test\//
-
-    if (testComponentUrlRegExp.test(value)) {
-      return emit('url', value)
-    }
-  }
-
   return pug`
     AutoSuggest.search(
       testID='searchInput'
@@ -74,7 +65,6 @@ const Search = observer(function Search () {
       inputIcon=faSearch
       renderItem=item => renderItem(item, pathname)
       onChange=onChange
-      onChangeText=APP_ENV === 'detox' ? onChangeText : undefined
     )
   `
 })
@@ -87,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/components/Props/Constructor/Tr/index.styl

@@ -7,4 +7,4 @@
 
 .dark
   &.root
-    border-color var(--color-border-inverse)
+    border-color var(--color-border-contrast)

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

@@ -1,6 +1,6 @@
 $input = var(--color-border)
 $header = var(--color-text-description)
-$darkHeader = var(--color-text-inverse)
+$darkHeader = var(--color-text-on-contrast)
 $value = var(--color-text-success)
 $type = var(--color-text-info)
 $valueDark = var(--color-text-success-strong)

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

@@ -1,5 +1,5 @@
-$darkTopBg = var(--color-bg-inverse)
-$darkBottomBg = var(--color-bg-inverse-alt)
+$darkTopBg = var(--color-bg-contrast)
+$darkBottomBg = var(--color-bg-contrast-alt)
 
 .root
   margin-top 2u

package/package.json

@@ -4,14 +4,14 @@
     "access": "public"
   },
   "description": "MDX documentation generator",
-  "version": "0.55.0-alpha.9",
+  "version": "0.55.1",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@startupjs/mdx": "^0.55.0-alpha.9",
-    "@startupjs/scrollable-anchors": "^0.55.0-alpha.9",
-    "@startupjs/ui": "^0.55.0-alpha.1",
+    "@startupjs/mdx": "^0.55.1",
+    "@startupjs/scrollable-anchors": "^0.55.1",
+    "@startupjs/ui": "^0.55.1",
     "parse-prop-types": "^0.3.0"
   },
   "peerDependencies": {
@@ -19,5 +19,5 @@
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "2c8a2d6d1f32741c62c5d4e85edc7c599d07dad7"
+  "gitHead": "88d13d7c882487c160d0d416b1b04bba28e6298d"
 }

package/startupjs.config.cjs

@@ -2,8 +2,7 @@ module.exports = {
   type: 'plugin',
   bundler: {
     forceCompile: {
-      web: true,
-      server: true
+      web: true
     }
   }
 }