Allow passing a prop type or interface directly to the props option…

… in the docs (#3771) * Add docgen from ts props babel plugin * Add a basic example for demo * Removed example * Remove props.tsx and use props directly * Expand types * Passed interfaces directly to props in color picker example * Fixed type value in extended props * Added props-loader to convert interfaces to props * removed logger for result * Add comments * Update the prop-loader script to output only the processed, exported types & interfaces; use the loader specifically when needed * Fixed relative path for loader * Removed props.tsx files and uncomment playground files * removed docgen from ts props * Declare module as any * Add prop-loader declaration to custom typings Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
elastic · Aug 18, 2020 · db36436 · db36436
1 parent 9706799
commit db36436
Show file tree

Hide file tree

Showing 11 changed files with 541 additions and 185 deletions.
diff --git a/scripts/loaders/prop-loader.js b/scripts/loaders/prop-loader.js
diff --git 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: <ColorPalettePicker />,

diff --git a/src-docs/src/views/color_picker/props.tsx b/src-docs/src/views/color_picker/props.tsx
diff --git 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 = `<EuiDataGrid
   {...usualProps}

diff --git a/src-docs/src/views/datagrid/datagrid_example.js b/src-docs/src/views/datagrid/datagrid_example.js
@@ -19,19 +19,20 @@ const dataGridSource = require('!!raw-loader!./datagrid');
 const dataGridHtml = renderToHtml(DataGrid);
 
 import {
-  DataGridColumn,
-  DataGridPagination,
-  DataGridSorting,
-  DataGridInMemory,
-  DataGridStyle,
-  DataGridCellValueElement,
-  DataGridSchemaDetector,
-  DataGridToolbarVisibilityOptions,
-  DataGridColumnVisibility,
-  DataGridPopoverContent,
-  DataGridControlColumn,
-  DataGridToolBarVisibilityColumnSelectorOptions,
-} from './props';
+  EuiDataGridColumn,
+  EuiDataGridPaginationProps,
+  EuiDataGridSorting,
+  EuiDataGridInMemory,
+  EuiDataGridStyle,
+  EuiDataGridToolBarVisibilityOptions,
+  EuiDataGridColumnVisibility,
+  EuiDataGridPopoverContentProps,
+  EuiDataGridControlColumn,
+  EuiDataGridToolBarVisibilityColumnSelectorOptions,
+} 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';
 
 const gridSnippet = `
   <EuiDataGrid
@@ -351,18 +352,18 @@ export const DataGridExample = {
       components: { DataGrid },
       props: {
         EuiDataGrid,
-        EuiDataGridColumn: DataGridColumn,
-        EuiDataGridColumnVisibility: DataGridColumnVisibility,
-        EuiDataGridControlColumn: DataGridControlColumn,
-        EuiDataGridInMemory: DataGridInMemory,
-        EuiDataGridPagination: DataGridPagination,
-        EuiDataGridSorting: DataGridSorting,
-        EuiDataGridCellValueElement: DataGridCellValueElement,
-        EuiDataGridSchemaDetector: DataGridSchemaDetector,
-        EuiDataGridStyle: DataGridStyle,
-        EuiDataGridToolbarVisibilityOptions: DataGridToolbarVisibilityOptions,
-        EuiDataGridToolBarVisibilityColumnSelectorOptions: DataGridToolBarVisibilityColumnSelectorOptions,
-        EuiDataGridPopoverContent: DataGridPopoverContent,
+        EuiDataGridColumn,
+        EuiDataGridColumnVisibility,
+        EuiDataGridControlColumn,
+        EuiDataGridInMemory,
+        EuiDataGridPaginationProps,
+        EuiDataGridSorting,
+        EuiDataGridCellValueElementProps,
+        EuiDataGridSchemaDetector,
+        EuiDataGridStyle,
+        EuiDataGridToolBarVisibilityOptions,
+        EuiDataGridToolBarVisibilityColumnSelectorOptions,
+        EuiDataGridPopoverContentProps,
       },
       demo: (
         <Fragment>

diff --git 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: <InMemoryDataGrid />,
@@ -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: <InMemoryEnhancementsDataGrid />,
@@ -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: <InMemoryPaginationDataGrid />,
@@ -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: <InMemorySortingDataGrid />,

diff --git 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: <DataGridSchema />,
     },

diff --git 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 = `<EuiDataGrid
   {...usualProps}
@@ -163,8 +163,8 @@ export const DataGridStylingExample = {
 
       props: {
         EuiDataGrid,
-        EuiDataGridStyle: DataGridStyle,
-        EuiDataGridToolbarVisibilityOptions: DataGridToolbarVisibilityOptions,
+        EuiDataGridStyle,
+        EuiDataGridToolBarVisibilityOptions,
       },
       demo: <DataGridStyling />,
     },
@@ -255,7 +255,7 @@ export const DataGridStylingExample = {
       snippet: widthsSnippet,
       props: {
         EuiDataGrid,
-        EuiDataGridColumn: DataGridColumn,
+        EuiDataGridColumn,
       },
       demo: <DataGridColumnWidths />,
     },

diff --git a/src-docs/src/views/datagrid/props.tsx b/src-docs/src/views/datagrid/props.tsx