docs: Add Import Information for every component (#222)

Author: MarcusNotheis

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';
+```