docs: Add import information for components

package.json

@@ -23,7 +23,8 @@
     "@storybook/addons": "5.2.3",
     "@storybook/cli": "5.2.3",
     "@storybook/react": "5.2.3",
-    "@storybook/theming": "5.2.3"
+    "@storybook/theming": "5.2.3",
+    "react-docgen-typescript-loader": "3.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",
@@ -79,10 +80,9 @@
     "qs": "^6.7.0",
     "react": "^16.8.6",
     "react-app-polyfill": "^1.0.2",
-    "react-docgen-typescript-loader": "^3.1.0",
     "react-dom": "^16.8.6",
     "react-highlight.js": "^1.0.7",
-    "rimraf": "^2.6.3",
+    "rimraf": "^3.0.0",
     "rollup": "^1.19.4",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -99,7 +99,7 @@
     "tslint": "^5.15.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-react": "^4.0.0",
-    "typescript": "^3.4.3",
+    "typescript": "^3.7.2",
     "util": "^0.12.0",
     "uuid": "^3.3.2",
     "webpack": "^4.39.1",

packages/charts/src/components/BarChart/BarChart.md

@@ -0,0 +1,3 @@
+```jsx
+import { BarChart } from '@ui5/webcomponents-react/lib/BarChart';
+```

packages/charts/src/components/BarChart/demo.stories.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
-import { BarChart } from './index';
+import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
+import React, { useState } from 'react';
+import notes from './BarChart.md';
 
 const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 const datasets = [
@@ -36,7 +37,8 @@ const options = {
 
 export default {
   title: 'Charts | BarChart',
-  component: BarChart
+  component: BarChart,
+  parameters: { notes }
 };
 
 function Demo() {

packages/charts/src/components/ColumnChart/ColumnChart.md

@@ -0,0 +1,3 @@
+```jsx
+import { ColumnChart } from '@ui5/webcomponents-react/lib/ColumnChart';
+```

packages/charts/src/components/ColumnChart/demo.stories.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import { boolean } from '@storybook/addon-knobs';
-import { ColumnChart } from './index';
+import { ColumnChart } from '@ui5/webcomponents-react-charts/lib/ColumnChart';
+import React from 'react';
+import notes from './ColumnChart.md';
 
 const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 const datasets = [
@@ -69,7 +70,8 @@ const growthLineOptions = {
 
 export default {
   title: 'Charts | ColumnChart',
-  component: ColumnChart
+  component: ColumnChart,
+  parameters: { notes }
 };
 
 export const defaultStory = () => (

packages/charts/src/components/DonutChart/DonutChart.md

@@ -0,0 +1,3 @@
+```jsx
+import { DonutChart } from '@ui5/webcomponents-react/lib/DonutChart';
+```

packages/charts/src/components/DonutChart/demo.stories.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
 import { boolean } from '@storybook/addon-knobs';
-import { DonutChart } from './index';
+import { DonutChart } from '@ui5/webcomponents-react-charts/lib/DonutChart';
+import React from 'react';
+import notes from './DonutChart.md';
 
 const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 const dataset = [{ data: [65, 59, 80, 81, 56, 55, 40] }];
 
 export default {
   title: 'Charts | DonutChart',
-  component: DonutChart
+  component: DonutChart,
+  parameters: { notes }
 };
 
 export const defaultStory = () => (

packages/charts/src/components/LineChart/LineChart.md

@@ -0,0 +1,3 @@
+```jsx
+import { LineChart } from '@ui5/webcomponents-react/lib/LineChart';
+```

packages/charts/src/components/LineChart/demo.stories.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import { boolean } from '@storybook/addon-knobs';
-import { LineChart } from './index';
+import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';
+import React from 'react';
+import notes from './LineChart.md';
 
 const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 const datasets = [
@@ -9,6 +10,7 @@ const datasets = [
     data: [65, 59, 80, 81, 56, 55, 40]
   }
 ];
+
 function renderStory() {
   return <LineChart labels={labels} datasets={datasets} loading={boolean('loading', false)} />;
 }
@@ -30,7 +32,8 @@ const renderStoryWithCustomColors = () => (
 
 export default {
   title: 'Charts | Line Chart',
-  component: LineChart
+  component: LineChart,
+  parameters: { notes }
 };
 
 export const defaultStory = renderStory;

packages/charts/src/components/MicroBarChart/MicroBarChart.md

@@ -0,0 +1,3 @@
+```jsx
+import { MicroBarChart } from '@ui5/webcomponents-react/lib/MicroBarChart';
+```

packages/charts/src/components/MicroBarChart/demo.stories.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
-import { MicroBarChart } from './index';
 import { array, number, text } from '@storybook/addon-knobs';
+import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart';
+import React from 'react';
+import notes from './MicroBarChart.md';
+
 const dataset = [
   { value: 10, label: 'Bar Number One' },
   { value: 100, label: 'Bar Number Two' },
@@ -14,7 +16,8 @@ const labelFormatter = (value) => `${value} in Dollar`;
 
 export default {
   title: 'Charts | Micro Bar Chart',
-  component: MicroBarChart
+  component: MicroBarChart,
+  parameters: { notes }
 };
 
 export const defaultStory = () => <MicroBarChart dataset={dataset} />;

packages/charts/src/components/PieChart/PieChart.md

@@ -0,0 +1,3 @@
+```jsx
+import { PieChart } from '@ui5/webcomponents-react/lib/PieChart';
+```

packages/charts/src/components/PieChart/demo.stories.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import { boolean } from '@storybook/addon-knobs';
-import { PieChart } from './index';
+import { PieChart } from '@ui5/webcomponents-react-charts/lib/PieChart';
+import notes from './PieChart.md';
 
 const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 const datasets = [{ data: [65, 59, 80, 81, 56, 55, 40] }];
 
 export default {
   title: 'Charts | PieChart',
-  component: PieChart
+  component: PieChart,
+  parameters: { notes }
 };
 
 export const defaultStory = () => <PieChart labels={labels} datasets={datasets} loading={boolean('loading', false)} />;

packages/charts/src/components/RadarChart/RadarChart.md

@@ -0,0 +1,3 @@
+```jsx
+import { RadarChart } from '@ui5/webcomponents-react/lib/RadarChart';
+```

packages/charts/src/components/RadarChart/demo.stories.tsx

@@ -1,5 +1,6 @@
+import { RadarChart } from '@ui5/webcomponents-react-charts/lib/RadarChart';
 import React from 'react';
-import { RadarChart } from './index';
+import notes from './RadarChart.md';
 
 const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 const datasets = [
@@ -16,7 +17,8 @@ const datasets = [
 
 export default {
   title: 'Charts | RadarChart',
-  component: RadarChart
+  component: RadarChart,
+  parameters: { notes }
 };
 
 export const defaultStory = () => <RadarChart labels={labels} datasets={datasets} />;

packages/charts/src/components/RadialChart/RadialChart.md

@@ -0,0 +1,3 @@
+```jsx
+import { RadialChart } from '@ui5/webcomponents-react/lib/RadialChart';
+```

packages/charts/src/components/RadialChart/demo.stories.tsx

@@ -1,10 +1,12 @@
 import { number, text } from '@storybook/addon-knobs';
+import { RadialChart } from '@ui5/webcomponents-react-charts/lib/RadialChart';
 import React from 'react';
-import { RadialChart } from './index';
+import notes from './RadialChart.md';
 
 export default {
   title: 'Charts | RadialChart',
-  component: RadialChart
+  component: RadialChart,
+  parameters: { notes }
 };
 
 export const defaultStory = () => (

packages/docs/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

packages/main/scripts/wrapperGeneration/index.js

@@ -3,6 +3,7 @@ const fileUrl = require('file-url');
 const { createWrapperForComponent } = require('./steps/createWrapper');
 const { createDemoForComponent } = require('./steps/createDemo');
 const { createTestForComponent } = require('./steps/createTest');
+const { createDocForComponent } = require('./steps/createDocs');
 
 let pattern;
 let onlyStopForMerge = false;
@@ -27,6 +28,7 @@ async function executeQueue() {
         await createWrapperForComponent(dto, { onlyStopForMerge });
         createTestForComponent(dto);
         createDemoForComponent(dto);
+        createDocForComponent(dto);
       }
     } catch (e) {
       console.error(e.message);

packages/main/scripts/wrapperGeneration/steps/createDemo.js

@@ -138,10 +138,14 @@ function createDemoForComponent(dto) {
   ${Object.keys(imports).join('\n')}
   ${getStorybookImports()}
   import { ${componentName} } from '@ui5/webcomponents-react/lib/${componentName}';
+  import notes from './${componentName}.md';
 
   export default {
     title: 'UI5 Web Components | ${componentName}',
-    component: ${componentName}
+    component: ${componentName},
+    parameters: {
+      notes
+    }
   };
 
   export const generatedDefaultStory = () => (

packages/main/scripts/wrapperGeneration/steps/createDocs.js

@@ -0,0 +1,65 @@
+const fs = require('fs');
+const path = require('path');
+const dedent = require('dedent');
+const prettier = require('prettier');
+const PATHS = require('../../../../../config/paths');
+
+const WEB_COMPONENTS_ROOT_DIR = path.join(PATHS.packages, 'main', 'src', 'webComponents');
+
+const UI5_PLAYGROUND_WHITELIST = [
+  'Badge',
+  'BusyIndicator',
+  'Button',
+  'Card',
+  'CheckBox',
+  'DatePicker',
+  'Dialog',
+  'Icon',
+  'Input',
+  'Label',
+  'Link',
+  'List',
+  'MessageStrip',
+  'MultiComboBox',
+  'Panel',
+  'RadioButton',
+  'Select',
+  'ShellBar',
+  'Switch',
+  'TabContainer',
+  'Table',
+  'TextArea',
+  'Timeline',
+  'Title',
+  'ToggleButton'
+];
+
+function createDocForComponent(dto) {
+  const componentName = dto.componentName;
+
+  const docPath = path.resolve(WEB_COMPONENTS_ROOT_DIR, componentName, `${componentName}.md`);
+
+  if (fs.existsSync(docPath)) {
+    return;
+  }
+
+  const mdContent = dedent`
+  ${
+    UI5_PLAYGROUND_WHITELIST.includes(componentName)
+      ? `[Link to UI5 Web Components Playground](https://sap.github.io/ui5-webcomponents/playground/components/${componentName}/)`
+      : ''
+  }
+
+  \`\`\`jsx
+  import { ${componentName} } from '@ui5/webcomponents-react/lib/${componentName}';
+  \`\`\`
+
+  `;
+
+  fs.writeFileSync(docPath, mdContent);
+  console.log(`Docs created for component ${componentName}`);
+}
+
+module.exports = {
+  createDocForComponent
+};

packages/main/src/components/ActionSheet/ActionSheet.md

@@ -0,0 +1,3 @@
+```jsx
+import { ActionSheet } from '@ui5/webcomponents-react/lib/ActionSheet';
+```

packages/main/src/components/ActionSheet/demo.stories.tsx

@@ -3,10 +3,12 @@ import React from 'react';
 import { ActionSheet } from '@ui5/webcomponents-react/lib/ActionSheet';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
+import notes from './ActionSheet.md';
 
 export default {
   title: 'Components | ActionSheet',
-  component: ActionSheet
+  component: ActionSheet,
+  parameters: { notes }
 };
 
 export const defaultStory = () => (

packages/main/src/components/AnalyticalCard/AnalyticalCard.md

@@ -0,0 +1,3 @@
+```jsx
+import { AnalyticalCard } from '@ui5/webcomponents-react/lib/AnalyticalCard';
+```

packages/main/src/components/AnalyticalCard/demo.stories.tsx

@@ -6,10 +6,12 @@ import { AnalyticalCard } from '@ui5/webcomponents-react/lib/AnalyticalCard';
 import { AnalyticalCardHeader } from '@ui5/webcomponents-react/lib/AnalyticalCardHeader';
 import { DeviationIndicator } from '@ui5/webcomponents-react/lib/DeviationIndicator';
 import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
+import notes from './AnalyticalCard.md';
 
 export default {
   title: 'Components | Analytical Card',
-  component: AnalyticalCard
+  component: AnalyticalCard,
+  parameters: { notes }
 };
 
 export const defaultStory = () => (

packages/main/src/components/AnalyticalTable/AnalyticalTable.md

@@ -0,0 +1,3 @@
+```jsx
+import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
+```

packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx

@@ -5,6 +5,7 @@ import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import React from 'react';
+import notes from '../AnalyticalTable.md';
 import generateData from './generateData';
 
 const columns = [
@@ -173,5 +174,6 @@ tableWithCustomTitle.story = {
 
 export default {
   title: 'Components | Analytical Table',
-  component: AnalyticalTable
+  component: AnalyticalTable,
+  parameters: { notes }
 };

packages/main/src/components/Avatar/Avatar.md

@@ -0,0 +1,3 @@
+```jsx
+import { Avatar } from '@ui5/webcomponents-react/lib/Avatar';
+```

packages/main/src/components/Bar/Bar.md

@@ -0,0 +1,3 @@
+```jsx
+import { Bar } from '@ui5/webcomponents-react/lib/Bar';
+```