[EuiDataGrid] Docs and autodocs

scripts/babel/proptypes-from-ts-props/index.js

@@ -74,6 +74,66 @@ function resolveArrayToPropTypes(node, state) {
   }
 }
 
+function stripDoubleQuotes(value) {
+  return value.replace(/^"?(.*?)"?$/, '$1');
+}
+
+/**
+ * Converts an Omit<X, Y> type to resolveIdentifierToPropTypes(X) with Y removed
+ * @param node
+ * @param state
+ * @returns AST node representing matching proptypes
+ */
+function resolveOmitToPropTypes(node, state) {
+  const types = state.get('types');
+
+  const { typeParameters } = node;
+
+  if (typeParameters == null) return null;
+
+  const {
+    params: [sourceType, toRemove],
+  } = typeParameters;
+
+  const sourcePropTypes = getPropTypesForNode(sourceType, true, state);
+  // validate that this resulted in a shape, otherwise we don't know how to extract/merge the values
+  if (
+    !types.isCallExpression(sourcePropTypes) ||
+    !types.isMemberExpression(sourcePropTypes.callee) ||
+    sourcePropTypes.callee.object.name !== 'PropTypes' ||
+    sourcePropTypes.callee.property.name !== 'shape'
+  ) {
+    return null;
+  }
+
+  const toRemovePropTypes = getPropTypesForNode(toRemove, true, state);
+  // validate that this resulted in a oneOf, otherwise we don't know how to use the values
+  if (
+    !types.isCallExpression(toRemovePropTypes) ||
+    !types.isMemberExpression(toRemovePropTypes.callee) ||
+    toRemovePropTypes.callee.object.name !== 'PropTypes' ||
+    toRemovePropTypes.callee.property.name !== 'oneOf'
+  ) {
+    return null;
+  }
+
+  // extract the string values of keys to remove
+  const keysToRemove = new Set(
+    toRemovePropTypes.arguments[0].elements
+      .map(keyToRemove =>
+        types.isStringLiteral(keyToRemove) ? keyToRemove.value : null
+      )
+      .filter(x => x !== null)
+  );
+
+  // filter out omitted properties
+  sourcePropTypes.arguments[0].properties = sourcePropTypes.arguments[0].properties.filter(
+    ({ key: { name } }) => keysToRemove.has(stripDoubleQuotes(name)) === false
+  );
+
+  return sourcePropTypes;
+}
+
 /**
  * Converts an X[] type to PropTypes.arrayOf(X)
  * @param node
@@ -160,9 +220,16 @@ function resolveIdentifierToPropTypes(node, state) {
         types.identifier('PropTypes'),
         types.identifier('node')
       );
+
+    case 'JSXElementConstructor':
+      return types.memberExpression(
+        types.identifier('PropTypes'),
+        types.identifier('func') // this is more accurately `elementType` but our peerDependency version of prop-types doesn't have it
+      );
   }
 
   if (identifier.name === 'Array') return resolveArrayToPropTypes(node, state);
+  if (identifier.name === 'Omit') return resolveOmitToPropTypes(node, state);
   if (identifier.name === 'MouseEventHandler')
     return buildPropTypePrimitiveExpression(types, 'func');
   if (identifier.name === 'Function')
@@ -356,10 +423,39 @@ function getPropTypesForNode(node, optional, state) {
       propType = getPropTypesForNode(node.typeAnnotation, true, state);
       break;
 
+    // Foo['bar']
+    case 'TSIndexedAccessType':
+      // verify the type of index access
+      if (types.isTSLiteralType(node.indexType) === false) break;
+
+      const indexedName = node.indexType.literal.value;
+      const objectPropType = getPropTypesForNode(node.objectType, true, state);
+
+      // verify this came out as a PropTypes.shape(), which we can pick the indexed property off of
+      if (
+        types.isCallExpression(objectPropType) &&
+        types.isMemberExpression(objectPropType.callee) &&
+        types.isIdentifier(objectPropType.callee.object) &&
+        objectPropType.callee.object.name === 'PropTypes' &&
+        types.isIdentifier(objectPropType.callee.property) &&
+        objectPropType.callee.property.name === 'shape'
+      ) {
+        const shapeProps = objectPropType.arguments[0].properties;
+        for (let i = 0; i < shapeProps.length; i++) {
+          const prop = shapeProps[i];
+          if (prop.key.name === indexedName) {
+            propType = makePropTypeOptional(types, prop.value);
+            break;
+          }
+        }
+      }
+
+      break;
+
     // translates intersections (Foo & Bar & Baz) to a shape with the types' members (Foo, Bar, Baz) merged together
     case 'TSIntersectionType':
-      const usableNodes = node.types.filter(node => {
-        const nodePropTypes = getPropTypesForNode(node, true, state);
+      const usableNodes = [...node.types].filter(node => {
+        let nodePropTypes = getPropTypesForNode(node, true, state);
 
         if (
           types.isMemberExpression(nodePropTypes) &&
@@ -369,12 +465,12 @@ function getPropTypesForNode(node, optional, state) {
           return false;
         }
 
-        // validate that this resulted in a shape, otherwise we don't know how to extract/merge the values
+        // validate that this resulted in a shape or oneOfType, otherwise we don't know how to extract/merge the values
         if (
           !types.isCallExpression(nodePropTypes) ||
           !types.isMemberExpression(nodePropTypes.callee) ||
           nodePropTypes.callee.object.name !== 'PropTypes' ||
-          nodePropTypes.callee.property.name !== 'shape'
+          (nodePropTypes.callee.property.name !== 'shape' && nodePropTypes.callee.property.name !== 'oneOfType')
         ) {
           return false;
         }
@@ -384,7 +480,49 @@ function getPropTypesForNode(node, optional, state) {
 
       // merge the resolved proptypes for each intersection member into one object, mergedProperties
       const mergedProperties = usableNodes.reduce((mergedProperties, node) => {
-        const nodePropTypes = getPropTypesForNode(node, true, state);
+        let nodePropTypes = getPropTypesForNode(node, true, state);
+
+        // if this is a `oneOfType` extract those properties into a `shape`
+        if (
+          types.isCallExpression(nodePropTypes) &&
+          types.isMemberExpression(nodePropTypes.callee) &&
+          nodePropTypes.callee.object.name === 'PropTypes' &&
+          nodePropTypes.callee.property.name === 'oneOfType'
+        ) {
+          const properties = nodePropTypes.arguments[0].elements
+            .map(propType => {
+              // This exists on a oneOfType which must be expressed as an optional proptype
+              propType = makePropTypeOptional(types, propType);
+
+              // validate we're working with a shape, otherwise we can't merge properties
+              if (
+                !types.isCallExpression(propType) ||
+                !types.isMemberExpression(propType.callee) ||
+                propType.callee.object.name !== 'PropTypes' ||
+                propType.callee.property.name !== 'shape'
+              ) {
+                return null;
+              }
+
+              // extract all of the properties from this group and make them optional
+              return propType.arguments[0].properties.map(property => {
+                property.value = makePropTypeOptional(types, property.value);
+                return property;
+              });
+            })
+            .filter(x => x !== null)
+            .reduce((allProperties, properties) => {
+              return [...allProperties, ...properties];
+            }, []);
+
+          nodePropTypes = types.callExpression(
+            types.memberExpression(
+              types.identifier('PropTypes'),
+              types.identifier('shape')
+            ),
+            [types.objectExpression(properties)]
+          );
+        }
 
         // iterate over this type's members, adding them (and their comments) to `mergedProperties`
         const typeProperties = nodePropTypes.arguments[0].properties; // properties on the ObjectExpression passed to PropTypes.shape()
@@ -1062,7 +1200,7 @@ function getPropTypesNodeFromAST(node, types) {
 const buildPropTypes = babelTemplate('COMPONENT_NAME.propTypes = PROP_TYPES');
 
 /**
- * Called with a type definition and a React component node path, `processComponentDeclaration` translates that definiton
+ * Called with a type definition and a React component node path, `processComponentDeclaration` translates that definition
  * to an AST of PropType.* calls and attaches those prop types to the component.
  * @param typeDefinition
  * @param path

scripts/babel/proptypes-from-ts-props/index.test.js

@@ -849,6 +849,28 @@ FooComponent.propTypes = {
 };`);
         });
 
+        it('understands JSXElementConstructor', () => {
+          const result = transform(
+            `
+import React from 'react';
+const FooComponent: React.SFC<{foo: JSXElementConstructor<any>}> = () => {
+  return (<div>Hello World</div>);
+}`,
+            babelOptions
+          );
+
+          expect(result.code).toBe(`import React from 'react';
+import PropTypes from "prop-types";
+
+const FooComponent = () => {
+  return <div>Hello World</div>;
+};
+
+FooComponent.propTypes = {
+  foo: PropTypes.func.isRequired
+};`);
+        });
+
       });
 
       describe('node propType', () => {
@@ -2051,6 +2073,33 @@ FooComponent.propTypes = {
 
     });
 
+    describe('indexed property access', () => {
+      it('follows indexed properties', () => {
+        const result = transform(
+          `
+import React from 'react';
+interface Foo {
+  foo: () => {};
+}
+const FooComponent: React.SFC<{bar: Foo['foo']}> = () => {
+  return (<div>Hello World</div>);
+}`,
+          babelOptions
+        );
+
+        expect(result.code).toBe(`import React from 'react';
+import PropTypes from "prop-types";
+
+const FooComponent = () => {
+  return <div>Hello World</div>;
+};
+
+FooComponent.propTypes = {
+  bar: PropTypes.func.isRequired
+};`);
+      });
+    });
+
     describe('supported component declarations', () => {
 
       it('annotates React.SFC components', () => {

src-docs/src/components/guide_components.scss

@@ -247,3 +247,11 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
     }
   }
 }
+
+.euiDataGridRowCell--favoriteFranchise {
+  background: transparentize($color: #800080, $amount: .95) !important;
+}
+
+.euiDataGridHeaderCell--favoriteFranchise {
+  background: transparentize($color: #800080, $amount: .9) !important;
+}

src-docs/src/components/guide_section/_guide_section.scss

@@ -7,13 +7,3 @@
 .guideSection__space {
   height: $euiSizeL;
 }
-
-.guideSectionPropsTable {
-  width: auto;
-  min-width: 50%;
-
-  th,
-  td {
-    max-width: none;
-  }
-}

src-docs/src/components/guide_section/guide_section.js

@@ -200,7 +200,7 @@ export class GuideSection extends Component {
     const docgenInfo = Array.isArray(component.__docgenInfo)
       ? component.__docgenInfo[0]
       : component.__docgenInfo;
-    const { _euiObjectType, description, props } = docgenInfo;
+    const { description, props } = docgenInfo;
 
     if (!props && !description) {
       return;
@@ -271,12 +271,7 @@ export class GuideSection extends Component {
       return <EuiTableRow key={propName}>{cells}</EuiTableRow>;
     });
 
-    const title =
-      _euiObjectType === 'type' ? (
-        <EuiCode id={componentName}>{componentName}</EuiCode>
-      ) : (
-        <EuiText>{componentName}</EuiText>
-      );
+    const title = <span id={componentName}>{componentName}</span>;
 
     let descriptionElement;
 
@@ -295,18 +290,23 @@ export class GuideSection extends Component {
 
     if (rows.length) {
       table = (
-        <EuiTable
-          className="guideSectionPropsTable"
-          compressed
-          key={`propsTable-${componentName}`}>
+        <EuiTable compressed key={`propsTable-${componentName}`}>
           <EuiTableHeader>
-            <EuiTableHeaderCell>Prop</EuiTableHeaderCell>
+            <EuiTableHeaderCell style={{ Width: '20%' }}>
+              Prop
+            </EuiTableHeaderCell>
 
-            <EuiTableHeaderCell>Type</EuiTableHeaderCell>
+            <EuiTableHeaderCell style={{ width: '15%' }}>
+              Type
+            </EuiTableHeaderCell>
 
-            <EuiTableHeaderCell>Default</EuiTableHeaderCell>
+            <EuiTableHeaderCell style={{ width: '15%' }}>
+              Default
+            </EuiTableHeaderCell>
 
-            <EuiTableHeaderCell>Note</EuiTableHeaderCell>
+            <EuiTableHeaderCell style={{ width: '50%' }}>
+              Note
+            </EuiTableHeaderCell>
           </EuiTableHeader>
 
           <EuiTableBody>{rows}</EuiTableBody>
@@ -422,6 +422,7 @@ export class GuideSection extends Component {
       <div className="guideSection" id={this.props.id}>
         {chrome}
         {this.renderContent()}
+        {this.props.extraContent}
       </div>
     );
   }

src-docs/src/routes.js

@@ -68,6 +68,9 @@ import { ContextMenuExample } from './views/context_menu/context_menu_example';
 import { CopyExample } from './views/copy/copy_example';
 
 import { DataGridExample } from './views/datagrid/datagrid_example';
+import { DataGridMemoryExample } from './views/datagrid/datagrid_memory_example';
+import { DataGridSchemaExample } from './views/datagrid/datagrid_schema_example';
+import { DataGridStylingExample } from './views/datagrid/datagrid_styling_example';
 
 import { DatePickerExample } from './views/date_picker/date_picker_example';
 
@@ -312,6 +315,16 @@ const navigation = [
       TabsExample,
     ].map(example => createExample(example)),
   },
+  {
+    name: 'Tabular content',
+    items: [
+      DataGridExample,
+      DataGridMemoryExample,
+      DataGridSchemaExample,
+      DataGridStylingExample,
+      TableExample,
+    ].map(example => createExample(example)),
+  },
   {
     name: 'Display',
     items: [
@@ -320,7 +333,6 @@ const navigation = [
       CallOutExample,
       CardExample,
       CodeExample,
-      DataGridExample,
       DescriptionListExample,
       DragAndDropExample,
       EmptyPromptExample,
@@ -331,7 +343,6 @@ const navigation = [
       LoadingExample,
       ProgressExample,
       StatExample,
-      TableExample,
       TextExample,
       TitleExample,
       ToastExample,