diff --git a/scripts/loaders/prop-loader.js b/scripts/loaders/prop-loader.js
new file mode 100644
index 000000000000..065d14de2946
--- /dev/null
+++ b/scripts/loaders/prop-loader.js
@@ -0,0 +1,404 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const ts = require('typescript');
+const { SyntaxKind } = require('typescript');
+const glob = require('glob');
+
+const files = glob.sync('src/**/*.{ts,tsx}', { absolute: true });
+
+/**
+ * To support extended interfaces and types from tsx files too.
+ */
+const options = {
+ jsx: ts.JsxEmit.React,
+ strict: true,
+};
+
+const program = ts.createProgram(files, options);
+
+module.exports = function(fileSource) {
+ const docsInfo = [];
+ const source = program.getSourceFile(this.resourcePath);
+ if (!source) return fileSource;
+ const checker = program.getTypeChecker();
+
+ // Get all the interfaces in the file
+ const interfaces = source
+ .getChildAt(0)
+ .getChildren()
+ .filter(child => {
+ if (child.kind !== SyntaxKind.InterfaceDeclaration) return false;
+ // verify this interface is exported
+ const isExported =
+ child.modifiers &&
+ child.modifiers.reduce((isExported, modifier) => {
+ if (isExported) return isExported;
+ if (modifier.kind === SyntaxKind.ExportKeyword) return true;
+ return false;
+ }, false);
+ return isExported;
+ });
+
+ // Get all the types in the file
+ const types = source
+ .getChildAt(0)
+ .getChildren()
+ .filter(child => {
+ if (child.kind !== SyntaxKind.TypeAliasDeclaration) return false;
+ const isExported =
+ child.modifiers &&
+ child.modifiers.reduce((isExported, modifier) => {
+ if (isExported) return isExported;
+ if (modifier.kind === SyntaxKind.ExportKeyword) return true;
+ return false;
+ }, false);
+ return isExported;
+ });
+
+ if (interfaces.length > 0) {
+ interfaces.map(interface => {
+ const displayName = interface.name.escapedText;
+ /**
+ * Get extended if interfaces extended props from a different interface.
+ * All the extended interfaces are available in the heritageClauses property.
+ */
+ const props = getExtendedProps(interface.heritageClauses, checker);
+ interface.members.map(member => {
+ if (member.name) {
+ let generatedType = {};
+ const propType = checker.getTypeAtLocation(member.type);
+ generatedType.name = checker.typeToString(propType);
+ /**
+ * If the type value is an enum or a type, the values are available in the types property
+ * If the number of types length is > 6 we could avoid expanding the type. Since it creates
+ * doesnt looks good in the props table
+ */
+ if (
+ propType.types &&
+ propType.types.length < 6 &&
+ propType.types.every(type => type.isStringLiteral())
+ ) {
+ generatedType = {
+ name: 'enum',
+ raw: generatedType.name,
+ value: propType.types.map(type => ({
+ value: type.isStringLiteral()
+ ? `"${type.value}"`
+ : this.checker.typeToString(type),
+ })),
+ };
+ }
+ const description = member.jsDoc ? member.jsDoc[0].comment : '';
+ const propName = member.name.escapedText
+ ? member.name.escapedText
+ : member.name.text;
+ props[propName] = setPropInfo(
+ generatedType,
+ propName,
+ !member.questionToken,
+ description
+ );
+ }
+ });
+ docsInfo.push(generateDocInfo(displayName, props));
+ });
+ }
+
+ if (types.length > 0) {
+ types.map(member => {
+ const displayName = member.name.escapedText;
+ const props = {};
+ const generatedTypes = [];
+ if (member.type && member.type.types) {
+ member.type.types.map(member => {
+ const type = checker.getTypeAtLocation(member);
+ const stringType = checker.typeToString(type);
+ generatedTypes.push(stringType);
+ });
+ }
+ props[displayName] = {
+ name: displayName,
+ type: {
+ name: generatedTypes.toString(),
+ },
+ };
+ docsInfo.push(generateDocInfo(displayName, props));
+ });
+ }
+ /**
+ * Append all the types and interfaces to the file as objects.
+ */
+ const logger = this.getLogger('props-loader');
+ try {
+ const result = generatePropsCodeBlock({
+ filename: this.resourcePath,
+ fileSource,
+ docsInfo,
+ });
+ return result;
+ } catch (e) {
+ logger.error(e);
+ }
+ return fileSource;
+};
+
+/**
+ *
+ * Returns doc info in the required structure
+ * @param {*} displayName
+ * @param {*} props
+ */
+const generateDocInfo = (displayName, props) => ({
+ displayName,
+ props,
+});
+
+/**
+ *
+ * Recursively search for all the interfaces for extended interfaces. Returns all
+ * the extended props.
+ * @param {*} interfaces
+ * @param {*} checker
+ */
+const getExtendedProps = (interfaces, checker) => {
+ let extendedProps = {};
+
+ // base case for recursion
+ if (!interfaces) return {};
+ interfaces.map(interface => {
+ const exportedInterface = checker.getTypeAtLocation(interface.types[0]);
+ if (exportedInterface.symbol) {
+ const heritageClauses =
+ exportedInterface.symbol.declarations[0].heritageClauses;
+ extendedProps = {
+ ...getPropsFromInterface(exportedInterface.symbol, checker),
+ ...getExtendedProps(heritageClauses, checker),
+ };
+ }
+ });
+ return extendedProps;
+};
+
+/**
+ *
+ * In case of extended interfaces the type info can be obtained from valueDeclaration
+ * of interface
+ * @param {*} interface
+ * @param {*} checker
+ */
+const getPropsFromInterface = (interface, checker) => {
+ const props = {};
+ interface.members.forEach(value => {
+ if (value.valueDeclaration) {
+ const declaration = value.valueDeclaration;
+ const type = checker.getTypeAtLocation(declaration.type);
+ const stringType = checker.typeToString(type);
+ const description = declaration.jsDoc ? declaration.jsDoc[0].comment : '';
+ const propName = declaration.name.escapedText
+ ? declaration.name.escapedText
+ : declaration.name.text;
+ props[propName] = setPropInfo(
+ { name: stringType },
+ propName,
+ !declaration.questionToken,
+ description
+ );
+ }
+ });
+ return props;
+};
+
+/**
+ *
+ * Returns data in required structure for the props table
+ * @param {*} type
+ * @param {*} name
+ * @param {*} required
+ * @param {*} description
+ */
+const setPropInfo = (type, name, required, description) => ({
+ name,
+ type,
+ required,
+ description,
+});
+
+const generatePropsCodeBlock = options => {
+ const sourceFile = ts.createSourceFile(
+ options.filename,
+ options.fileSource,
+ ts.ScriptTarget.ESNext
+ );
+
+ // create typescript object nodes for all interfaces and types that should be appended to node.
+ const codeBlocks = options.docsInfo
+ .map(d => createDocObject(d))
+ .filter(source => source !== null);
+
+ // To print the AST, we can use TypeScript's printer
+ const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
+
+ // print AST as string for source Node so that they can be added to the source file
+ const printNode = sourceNode =>
+ printer.printNode(ts.EmitHint.Unspecified, sourceNode, sourceFile);
+
+ return codeBlocks.map(node => printNode(node)).join('\n');
+};
+
+/**
+ * export var Interface = { __docgenInfo: DocInfo }
+ *
+ * @param {*} d interface definition
+ */
+const createDocObject = d => {
+ return ts.createVariableStatement(
+ // export var Interface = { __docgenInfo: {}}
+ [ts.createToken(ts.SyntaxKind.ExportKeyword)],
+ ts.createVariableDeclarationList([
+ ts.createVariableDeclaration(
+ ts.createIdentifier(d.displayName),
+ undefined,
+ ts.createObjectLiteral([
+ ts.createPropertyAssignment(
+ '__docgenInfo',
+ generateTypesDocgenInfo(d)
+ ),
+ ])
+ ),
+ ])
+ );
+};
+
+/**
+ * __docgenInfo = {
+ * displayName: interfaceName,
+ * props: props definition
+ * }
+ *
+ * @param {*} d interface definition
+ */
+const generateTypesDocgenInfo = d => {
+ // {displayName: InterfaceName, props: {}}
+ return ts.createObjectLiteral([
+ ts.createPropertyAssignment(
+ ts.createLiteral('displayName'),
+ ts.createLiteral(d.displayName)
+ ),
+ ts.createPropertyAssignment(
+ ts.createLiteral('props'),
+ ts.createObjectLiteral(
+ Object.entries(d.props).map(([propName, prop]) =>
+ createPropDefinition(propName, prop)
+ )
+ )
+ ),
+ ]);
+};
+
+/**
+ *
+ * __docgenInfo.props.propName = {
+ * name: propName,
+ * description: description,
+ * required: isRequired,
+ * type: {
+ * name: typeName,
+ * }
+ * }
+ *
+ * @param {*} propName name of the prop
+ * @param {*} prop prop definition
+ */
+const createPropDefinition = (propName, prop) => {
+ /**
+ * prop.type = {
+ * name: 'enum',
+ * value: [{ value: 'value' }]
+ * }
+ *
+ * @param {*} typeValue for enums
+ */
+ const setValue = typeValue =>
+ Array.isArray(typeValue) &&
+ typeValue.every(value => typeof value.value === 'string')
+ ? ts.createPropertyAssignment(
+ ts.createLiteral('value'),
+ ts.createArrayLiteral(
+ typeValue.map(value =>
+ ts.createObjectLiteral([
+ ts.createPropertyAssignment(
+ ts.createLiteral('value'),
+ ts.createLiteral(value.value || '')
+ ),
+ ])
+ )
+ )
+ )
+ : undefined;
+ /**
+ * prop.type = {
+ * name: typeName
+ * }
+ *
+ * @param {*} typeName type name
+ * @param {*} typeValue value for enums
+ */
+ const setType = (typeName, typeValue) => {
+ const objectFields = [
+ ts.createPropertyAssignment(
+ ts.createLiteral('name'),
+ ts.createLiteral(typeName)
+ ),
+ ];
+ const valueField = setValue(typeValue);
+
+ if (valueField) {
+ objectFields.push(valueField);
+ }
+
+ return ts.createPropertyAssignment(
+ ts.createLiteral('type'),
+ ts.createObjectLiteral(objectFields)
+ );
+ };
+ return ts.createPropertyAssignment(
+ ts.createLiteral(propName),
+ ts.createObjectLiteral([
+ // prop.description = "description"
+ ts.createPropertyAssignment(
+ ts.createLiteral('description'),
+ // or operator is used otherwise it will throw an error as cannot read emitNode of undefined
+ ts.createLiteral(prop.description || '')
+ ),
+ // prop.name = "name"
+ ts.createPropertyAssignment(
+ ts.createLiteral('name'),
+ ts.createLiteral(prop.name || '')
+ ),
+ // prop.required = "required"
+ ts.createPropertyAssignment(
+ ts.createLiteral('required'),
+ prop.required ? ts.createTrue() : ts.createFalse()
+ ),
+ setType(prop.type.name, prop.type.value),
+ ])
+ );
+};
diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js
index 8dab4fd5e130..b841e7739fef 100644
--- a/src-docs/src/views/color_picker/color_picker_example.js
+++ b/src-docs/src/views/color_picker/color_picker_example.js
@@ -13,10 +13,10 @@ import {
EuiText,
} from '../../../../src/components';
import {
- EuiColorPalettePickerPaletteText,
- EuiColorPalettePickerPaletteFixed,
- EuiColorPalettePickerPaletteGradient,
-} from './props';
+ EuiColorPalettePickerPaletteTextProps,
+ EuiColorPalettePickerPaletteFixedProps,
+ EuiColorPalettePickerPaletteGradientProps,
+} from '!!prop-loader!../../../../src/components/color_picker/color_palette_picker/color_palette_picker';
import ColorPicker from './color_picker';
const colorPickerSource = require('!!raw-loader!./color_picker');
@@ -358,9 +358,9 @@ export const ColorPickerExample = {
],
props: {
EuiColorPalettePicker,
- EuiColorPalettePickerPaletteText,
- EuiColorPalettePickerPaletteFixed,
- EuiColorPalettePickerPaletteGradient,
+ EuiColorPalettePickerPaletteTextProps,
+ EuiColorPalettePickerPaletteFixedProps,
+ EuiColorPalettePickerPaletteGradientProps,
},
snippet: colorPalettePickerSnippet,
demo: ,
diff --git a/src-docs/src/views/color_picker/props.tsx b/src-docs/src/views/color_picker/props.tsx
deleted file mode 100644
index 50ae7731d2f4..000000000000
--- a/src-docs/src/views/color_picker/props.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-import {
- EuiColorPalettePickerPaletteTextProps,
- EuiColorPalettePickerPaletteFixedProps,
- EuiColorPalettePickerPaletteGradientProps,
-} from '../../../../src/components/color_picker/color_palette_picker';
-
-export const EuiColorPalettePickerPaletteText: FunctionComponent = () => (
-
-);
-
-export const EuiColorPalettePickerPaletteFixed: FunctionComponent = () => (
-
-);
-
-export const EuiColorPalettePickerPaletteGradient: FunctionComponent = () => (
-
-);
diff --git a/src-docs/src/views/datagrid/datagrid_controlcolumns_example.js b/src-docs/src/views/datagrid/datagrid_controlcolumns_example.js
index 9b77f41e2796..1ec706a74c32 100644
--- a/src-docs/src/views/datagrid/datagrid_controlcolumns_example.js
+++ b/src-docs/src/views/datagrid/datagrid_controlcolumns_example.js
@@ -9,7 +9,7 @@ import DataGridControlColumns from './control_columns';
const dataGridControlColumnsSource = require('!!raw-loader!./control_columns');
const dataGridControlColumnsHtml = renderToHtml(DataGridControlColumns);
-import { DataGridControlColumn as EuiDataGridControlColumn } from './props';
+import { EuiDataGridControlColumn } from '!!prop-loader!../../../../src/components/datagrid/data_grid_types';
const gridSnippet = `
diff --git a/src-docs/src/views/datagrid/datagrid_memory_example.js b/src-docs/src/views/datagrid/datagrid_memory_example.js
index 6a073745d6f0..60aec1dee806 100644
--- a/src-docs/src/views/datagrid/datagrid_memory_example.js
+++ b/src-docs/src/views/datagrid/datagrid_memory_example.js
@@ -30,16 +30,17 @@ const inMemorySortingDataGridSource = require('!!raw-loader!./in_memory_sorting'
const inMemorySortingDataGridHtml = renderToHtml(InMemorySortingDataGrid);
import {
- DataGridColumn,
- DataGridPagination,
- DataGridSorting,
- DataGridInMemory,
- DataGridStyle,
- DataGridCellValueElement,
- DataGridSchemaDetector,
- DataGridToolbarVisibilityOptions,
- DataGridColumnVisibility,
-} from './props';
+ EuiDataGridColumn,
+ EuiDataGridPaginationProps,
+ EuiDataGridSorting,
+ EuiDataGridInMemory,
+ EuiDataGridStyle,
+ EuiDataGridToolBarVisibilityOptions,
+ EuiDataGridColumnVisibility,
+} from '!!prop-loader!../../../../src/components/datagrid/data_grid_types';
+
+import { EuiDataGridCellValueElementProps } from '!!prop-loader!../../../../src/components/datagrid/data_grid_cell';
+import { EuiDataGridSchemaDetector } from '!!prop-loader!../../../../src/components/datagrid/data_grid_schema';
export const DataGridMemoryExample = {
title: 'Data grid in-memory settings',
@@ -128,15 +129,15 @@ export const DataGridMemoryExample = {
),
props: {
EuiDataGrid,
- EuiDataGridInMemory: DataGridInMemory,
- EuiDataGridColumn: DataGridColumn,
- EuiDataGridColumnVisibility: DataGridColumnVisibility,
- EuiDataGridPagination: DataGridPagination,
- EuiDataGridSorting: DataGridSorting,
- EuiDataGridCellValueElement: DataGridCellValueElement,
- EuiDataGridSchemaDetector: DataGridSchemaDetector,
- EuiDataGridStyle: DataGridStyle,
- EuiDataGridToolbarVisibilityOptions: DataGridToolbarVisibilityOptions,
+ EuiDataGridInMemory,
+ EuiDataGridColumn,
+ EuiDataGridColumnVisibility,
+ EuiDataGridPaginationProps,
+ EuiDataGridSorting,
+ EuiDataGridCellValueElementProps,
+ EuiDataGridSchemaDetector,
+ EuiDataGridStyle,
+ EuiDataGridToolBarVisibilityOptions,
},
components: { InMemoryDataGrid },
demo: ,
@@ -166,15 +167,15 @@ export const DataGridMemoryExample = {
),
props: {
EuiDataGrid,
- EuiDataGridInMemory: DataGridInMemory,
- EuiDataGridColumn: DataGridColumn,
- EuiDataGridColumnVisibility: DataGridColumnVisibility,
- EuiDataGridPagination: DataGridPagination,
- EuiDataGridSorting: DataGridSorting,
- EuiDataGridCellValueElement: DataGridCellValueElement,
- EuiDataGridSchemaDetector: DataGridSchemaDetector,
- EuiDataGridStyle: DataGridStyle,
- EuiDataGridToolbarVisibilityOptions: DataGridToolbarVisibilityOptions,
+ EuiDataGridInMemory,
+ EuiDataGridColumn,
+ EuiDataGridColumnVisibility,
+ EuiDataGridPaginationProps,
+ EuiDataGridSorting,
+ EuiDataGridCellValueElementProps,
+ EuiDataGridSchemaDetector,
+ EuiDataGridStyle,
+ EuiDataGridToolBarVisibilityOptions,
},
components: { InMemoryEnhancementsDataGrid },
demo: ,
@@ -203,15 +204,15 @@ export const DataGridMemoryExample = {
),
props: {
EuiDataGrid,
- EuiDataGridInMemory: DataGridInMemory,
- EuiDataGridColumn: DataGridColumn,
- EuiDataGridColumnVisibility: DataGridColumnVisibility,
- EuiDataGridPagination: DataGridPagination,
- EuiDataGridSorting: DataGridSorting,
- EuiDataGridCellValueElement: DataGridCellValueElement,
- EuiDataGridSchemaDetector: DataGridSchemaDetector,
- EuiDataGridStyle: DataGridStyle,
- EuiDataGridToolbarVisibilityOptions: DataGridToolbarVisibilityOptions,
+ EuiDataGridInMemory,
+ EuiDataGridColumn,
+ EuiDataGridColumnVisibility,
+ EuiDataGridPaginationProps,
+ EuiDataGridSorting,
+ EuiDataGridCellValueElementProps,
+ EuiDataGridSchemaDetector,
+ EuiDataGridStyle,
+ EuiDataGridToolBarVisibilityOptions,
},
components: { InMemoryPaginationDataGrid },
demo: ,
@@ -239,15 +240,15 @@ export const DataGridMemoryExample = {
),
props: {
EuiDataGrid,
- EuiDataGridInMemory: DataGridInMemory,
- EuiDataGridColumn: DataGridColumn,
- EuiDataGridColumnVisibility: DataGridColumnVisibility,
- EuiDataGridPagination: DataGridPagination,
- EuiDataGridSorting: DataGridSorting,
- EuiDataGridCellValueElement: DataGridCellValueElement,
- EuiDataGridSchemaDetector: DataGridSchemaDetector,
- EuiDataGridStyle: DataGridStyle,
- EuiDataGridToolbarVisibilityOptions: DataGridToolbarVisibilityOptions,
+ EuiDataGridInMemory,
+ EuiDataGridColumn,
+ EuiDataGridColumnVisibility,
+ EuiDataGridPaginationProps,
+ EuiDataGridSorting,
+ EuiDataGridCellValueElementProps,
+ EuiDataGridSchemaDetector,
+ EuiDataGridStyle,
+ EuiDataGridToolBarVisibilityOptions,
},
components: { InMemorySortingDataGrid },
demo: ,
diff --git a/src-docs/src/views/datagrid/datagrid_schema_example.js b/src-docs/src/views/datagrid/datagrid_schema_example.js
index 5355b95ab3e3..250c816c0061 100644
--- a/src-docs/src/views/datagrid/datagrid_schema_example.js
+++ b/src-docs/src/views/datagrid/datagrid_schema_example.js
@@ -10,16 +10,17 @@ const dataGridSchemaSource = require('!!raw-loader!./schema');
const dataGridSchemaHtml = renderToHtml(DataGridSchema);
import {
- DataGridColumn,
- DataGridPagination,
- DataGridSorting,
- DataGridInMemory,
- DataGridStyle,
- DataGridCellValueElement,
- DataGridSchemaDetector,
- DataGridToolbarVisibilityOptions,
- DataGridColumnVisibility,
-} from './props';
+ EuiDataGridColumn,
+ EuiDataGridPaginationProps,
+ EuiDataGridSorting,
+ EuiDataGridInMemory,
+ EuiDataGridStyle,
+ EuiDataGridToolBarVisibilityOptions,
+ EuiDataGridColumnVisibility,
+} from '!!prop-loader!../../../../src/components/datagrid/data_grid_types';
+
+import { EuiDataGridCellValueElementProps } from '!!prop-loader!../../../../src/components/datagrid/data_grid_cell';
+import { EuiDataGridSchemaDetector } from '!!prop-loader!../../../../src/components/datagrid/data_grid_schema';
export const DataGridSchemaExample = {
title: 'Data grid schemas and popovers',
@@ -86,15 +87,15 @@ export const DataGridSchemaExample = {
components: { DataGridSchema },
props: {
EuiDataGrid,
- EuiDataGridColumn: DataGridColumn,
- EuiDataGridColumnVisibility: DataGridColumnVisibility,
- EuiDataGridInMemory: DataGridInMemory,
- EuiDataGridPagination: DataGridPagination,
- EuiDataGridSorting: DataGridSorting,
- EuiDataGridCellValueElement: DataGridCellValueElement,
- EuiDataGridSchemaDetector: DataGridSchemaDetector,
- EuiDataGridStyle: DataGridStyle,
- EuiDataGridToolbarVisibilityOptions: DataGridToolbarVisibilityOptions,
+ EuiDataGridInMemory,
+ EuiDataGridColumn,
+ EuiDataGridColumnVisibility,
+ EuiDataGridPaginationProps,
+ EuiDataGridSorting,
+ EuiDataGridCellValueElementProps,
+ EuiDataGridSchemaDetector,
+ EuiDataGridStyle,
+ EuiDataGridToolBarVisibilityOptions,
},
demo: ,
},
diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js
index 50b2a3a815ff..21dd614027b4 100644
--- a/src-docs/src/views/datagrid/datagrid_styling_example.js
+++ b/src-docs/src/views/datagrid/datagrid_styling_example.js
@@ -22,10 +22,10 @@ const dataGridColumnWidthsSource = require('!!raw-loader!./column_widths');
const dataGridColumnWidthsHtml = renderToHtml(DataGridColumnWidths);
import {
- DataGridStyle,
- DataGridToolbarVisibilityOptions,
- DataGridColumn,
-} from './props';
+ EuiDataGridColumn,
+ EuiDataGridStyle,
+ EuiDataGridToolBarVisibilityOptions,
+} from '!!prop-loader!../../../../src/components/datagrid/data_grid_types';
const gridSnippet = `,
},
@@ -255,7 +255,7 @@ export const DataGridStylingExample = {
snippet: widthsSnippet,
props: {
EuiDataGrid,
- EuiDataGridColumn: DataGridColumn,
+ EuiDataGridColumn,
},
demo: ,
},
diff --git a/src-docs/src/views/datagrid/props.tsx b/src-docs/src/views/datagrid/props.tsx
deleted file mode 100644
index 45e4932cf1ce..000000000000
--- a/src-docs/src/views/datagrid/props.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import {
- EuiDataGridColumn,
- EuiDataGridPaginationProps,
- EuiDataGridSorting,
- EuiDataGridInMemory,
- EuiDataGridStyle,
- EuiDataGridToolBarVisibilityOptions,
- EuiDataGridColumnVisibility,
- EuiDataGridPopoverContentProps,
- EuiDataGridControlColumn,
- EuiDataGridToolBarVisibilityColumnSelectorOptions,
-} from '../../../../src/components/datagrid/data_grid_types';
-import { EuiDataGridCellValueElementProps } from '../../../../src/components/datagrid/data_grid_cell';
-import { EuiDataGridSchemaDetector } from '../../../../src/components/datagrid/data_grid_schema';
-
-export const DataGridColumn: FunctionComponent = () => (
-
-);
-
-export const DataGridPagination: FunctionComponent = () => (
-
-);
-
-export const DataGridSorting: FunctionComponent = () => (
-
-);
-
-export const DataGridInMemory: FunctionComponent = () => (
-
-);
-
-export const DataGridStyle: FunctionComponent = () => ;
-
-export const DataGridToolbarVisibilityOptions: FunctionComponent = () => (
-
-);
-
-export const DataGridCellValueElement: FunctionComponent = () => (
-
-);
-
-export const DataGridSchemaDetector: FunctionComponent = () => (
-
-);
-
-export const DataGridColumnVisibility: FunctionComponent = () => (
-
-);
-
-export const DataGridPopoverContent: FunctionComponent = () => (
-
-);
-
-export const DataGridControlColumn: FunctionComponent = () => (
-
-);
-
-export const DataGridToolBarVisibilityColumnSelectorOptions: FunctionComponent = () => (
-
-);
diff --git a/src-docs/webpack.config.js b/src-docs/webpack.config.js
index d916ccabfbd2..66d1b2754ab5 100644
--- a/src-docs/webpack.config.js
+++ b/src-docs/webpack.config.js
@@ -40,6 +40,15 @@ const webpackConfig = {
extensions: ['.ts', '.tsx', '.js', '.json'],
},
+ resolveLoader: {
+ alias: {
+ 'prop-loader': path.resolve(
+ __dirname,
+ '../scripts/loaders/prop-loader.js'
+ ),
+ },
+ },
+
module: {
rules: [
{
diff --git a/src/custom_typings/prop-loader.d.ts b/src/custom_typings/prop-loader.d.ts
new file mode 100644
index 000000000000..77cea632a8aa
--- /dev/null
+++ b/src/custom_typings/prop-loader.d.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+declare module '!!prop-loader!*';