refactor(_meta): replace with build time JSON (#2840)

* feat(docs): generate individual *.docs.json files

* chore(src): remove static _meta

* docs(CONTRIBUTING.md): remove _meta instructions

* typo(docs): fix docblock casing

* refactor(componentInfo): from _meta to docs.json

* refactor(subComponent): casing to subcomponent

* refactor(commonTests): work with *.info.json

* fix(implementsShorthandProp): remove _meta

* refactor(withDocInfo): to use *.info.json files

* wip DocsRoot dynamic require

* refactor(ComponentDoc): use *.info.json files

* refactor(Sidebar): use *.info.json files

* fix(DocsRoot): handle info.description

* feat(ComponentProps): closed by default

* fix(ComponentDoc): use *.info.json and simplify

* fix(ComponentDocLinks): add suiName

* fix(ComponentSidebarSection): update menu json

* component menu and example menu json, fix maximize

* feat(DocsRoot): async load component info

* wip props and bugs

* remove cruft, cleanup

* fix dockblock typo, docblock

* fix(ComponentTable): use props.name for key

* fix(ComponentProp): displayName to name

* fix(ComponentProps): clear active state on change

* fix clicking subcomponent props

* fix(ExternalExampleLayout): use example path name

* fix tests

* rebuild json files on change, rework build tasks

* fix tsd:test script

* fix(ComponentDoc): missing descriptions

* wip split example menu json

* prettier ignore generated json

* normalize imports

* chore(package): add yarn ci command

* chore(package): add babel plugin dynamic import

Author: levithomason

.babelrc

@@ -7,6 +7,7 @@
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-export-default-from",
     "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-syntax-dynamic-import",
     "lodash",
     "transform-react-handled-props",
     ["transform-react-remove-prop-types", {

.github/CONTRIBUTING.md

@@ -11,7 +11,6 @@ CONTRIBUTING
   - [Commands](#commands)
 - [Workflow](#workflow)
   - [Create a Component](#create-a-component)
-  - [Define _meta](#define-_meta)
   - [Using propTypes](#using-proptypes)
   - [Conformance Test](#conformance-test)
   - [Open A PR](#open-a-pr)
@@ -80,6 +79,8 @@ Please follow the [Angular Git Commit Guidelines][8] format.
 ```sh
 yarn start                 // run doc site
 
+yarn ci                    // run all checks CI runs
+
 yarn test                  // test once
 yarn test:watch            // test on file change
 
@@ -98,7 +99,6 @@ yarn lint:watch            // lint on file change
 ## Workflow
 
 - [Create a Component](#create-a-component)
-- [Define _meta](#define-_meta)
 - [Conformance Test](#conformance-test)
 - [Open A PR](#open-a-pr)
 - [Spec out the API](#spec-out-the-api)
@@ -127,41 +127,6 @@ class Dropdown extends Component {
 
 >You probably need to extend our [`AutoControlledComponent`](#autocontrolledcomponent) to support both [controlled][2] and [uncontrolled][3] component patterns.
 
-### Define _meta
-
-Every component has a static property called `_meta`. This object defines the component. The values here are used for generated documentation, generated test cases and some utilities.
-
-Here's an example `_meta` object:
-
-```js
-import { META } from '../../lib'
-
-const _meta = {
-  name: 'MyComponent',
-  type: META.TYPES.MODULE,
-}
-```
-
-Assuming the above `_meta` is in scope, here's how you should expose it:
-
-```js
-function MyComponent() {
-  return <div>Hello World</div>
-}
-
-MyComponent._meta = _meta
-```
-
-```js
-class MyComponent {
-  static _meta = _meta
-
-  render() {
-    return <div>Hello World</div>
-  }
-}
-```
-
 ### Using propTypes
 
 Every component must have fully described `propTypes`.
@@ -390,7 +355,7 @@ There are many common things to test for.  Because of this, we have [`test/specs
 ```js
 common.isConformant()
 common.hasUIClassName()
-common.hasSubComponents()
+common.hasSubcomponents()
 common.isTabbable()
 common.rendersChildren()
 
@@ -420,7 +385,7 @@ describe('Menu', () => {
   common.isConformant(Menu)
   common.hasUIClassName(Menu)
   common.rendersChildren(Menu)
-  common.hasSubComponents(Menu, [MenuItem]) // some take additional arguments
+  common.hasSubcomponents(Menu, [MenuItem]) // some take additional arguments
 })
 ```
 
@@ -445,7 +410,6 @@ This is the only required test.  It ensures a consistent baseline for the framew
 
 >This list is not updated, check the [source][1] for the latest assertions.
 
-1. The [static `_meta`](#_meta) object is valid
 1. Component and filename are correct
 1. Events are properly handled
 1. Extra `props` are spread
@@ -489,7 +453,7 @@ TODO
 - [Props](#props)
 - [Examples](#examples)
 
-Our docs are generated from doc block comments, `propTypes`, and hand written examples.
+Our docs are generated from docblock comments, `propTypes`, and hand written examples.
 
 ### Website
 
@@ -501,7 +465,7 @@ yarn start
 
 ### Components
 
-A doc block should appear above a component class or function to describe it:
+A docblock should appear above a component class or function to describe it:
 
 ```js
 /**
@@ -515,7 +479,7 @@ function Select(props) {
 
 ### Props
 
-A doc block should appear above each prop in `propTypes` to describe them:
+A docblock should appear above each prop in `propTypes` to describe them:
 
 >Limited props shown for brevity.
 
@@ -539,7 +503,7 @@ Label.propTypes = {
   /** Place the label in one of the upper corners . */
   corner: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(Label._meta.props.corner),
+    PropTypes.oneOf(['left', 'right']),
   ]),
 
   /** Add an icon by icon className or pass an <Icon /> */

.gitignore

@@ -7,8 +7,9 @@
 
 coverage/
 dist/
-docs/app/docgenInfo.json
-docs/app/menuInfo.json
+docs/app/componentInfo
+docs/app/componentMenu.json
+docs/app/exampleMenus
 docs/build/
 dll/
 node_modules/

.prettierignore

@@ -9,8 +9,9 @@ coverage/
 
 dist/
 dll/
-docs/app/docgenInfo.json
-docs/app/menuInfo.jso
+docs/app/componentInfo
+docs/app/componentMenu.json
+docs/app/exampleMenus
 docs/build/
 
 package.json

config.js

@@ -20,7 +20,6 @@ const envConfig = {
   dir_dll: 'dll',
   dir_docs_dist: 'docs/build',
   dir_docs_src: 'docs/app',
-  dir_umd_dist: 'dist/umd',
 }
 
 // ------------------------------------
@@ -35,7 +34,6 @@ const paths = {
   dll: base.bind(null, envConfig.dir_dll),
   docsDist: base.bind(null, envConfig.dir_docs_dist),
   docsSrc: base.bind(null, envConfig.dir_docs_src),
-  umdDist: base.bind(null, envConfig.dir_umd_dist),
 }
 
 const config = {

docs/app/Components/ComponentDoc/ComponentControls/ComponentControls.js

@@ -9,7 +9,16 @@ import ComponentControlsMaximize from './ComponentControlsMaximize'
 import ComponentControlsShowHtml from './ComponentControlsShowHtml'
 
 const ComponentControls = (props) => {
-  const { anchorName, showHTML, showCode, onCopyLink, onShowHTML, onShowCode, visible } = props
+  const {
+    anchorName,
+    examplePath,
+    showHTML,
+    showCode,
+    onCopyLink,
+    onShowHTML,
+    onShowCode,
+    visible,
+  } = props
 
   return (
     <Transition duration={200} visible={!!visible} unmountOnHide>
@@ -20,7 +29,7 @@ const ComponentControls = (props) => {
       <div>
         <Menu color='green' compact icon size='small' text>
           <ComponentControlsCopyLink anchorName={anchorName} onClick={onCopyLink} />
-          <ComponentControlsMaximize anchorName={anchorName} />
+          <ComponentControlsMaximize examplePath={examplePath} />
           <ComponentControlsShowHtml active={showHTML} onClick={onShowHTML} />
           <ComponentControlsEditCode active={showCode} onClick={onShowCode} />
         </Menu>
@@ -30,6 +39,7 @@ const ComponentControls = (props) => {
 }
 
 ComponentControls.propTypes = {
+  examplePath: PropTypes.string,
   anchorName: PropTypes.string,
   onCopyLink: PropTypes.func,
   onShowCode: PropTypes.func,

docs/app/Components/ComponentDoc/ComponentControls/ComponentControlsMaximize.js

@@ -1,25 +1,24 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Icon, Menu } from 'semantic-ui-react'
 
 import { neverUpdate } from 'docs/app/HOC'
 import ComponentControlsToolTip from './ComponentControlsToolTip'
 
-const ComponentControlsMaximize = ({ anchorName }) => (
-  <ComponentControlsToolTip content='Full Screen'>
-    <Menu.Item href={`/maximize/${anchorName}`} target='_blank'>
-      <Icon
-        color='grey'
-        fitted
-        name='window maximize'
-        size='large'
-      />
-    </Menu.Item>
-  </ComponentControlsToolTip>
-)
+const ComponentControlsMaximize = ({ examplePath }) => {
+  const href = `/maximize/${_.kebabCase(examplePath.split('/').slice(-1))}`
 
+  return (
+    <ComponentControlsToolTip content='Full Screen'>
+      <Menu.Item href={href} target='_blank'>
+        <Icon color='grey' fitted name='window maximize' size='large' />
+      </Menu.Item>
+    </ComponentControlsToolTip>
+  )
+}
 ComponentControlsMaximize.propTypes = {
-  anchorName: PropTypes.string,
+  examplePath: PropTypes.string.isRequired,
 }
 
 export default neverUpdate(ComponentControlsMaximize)