Use component src in the Storybook (#723)

* Tweak divider story and component

* use publishConfig

* disable stories

* rename displayName

* enable stories

* remove explisit displayName (where possible)

* remove test-component

* remove react-docgen

* fix rollup config

* fix Divider and story

* remove docgen plugin

apps/storybook-react/.storybook/main.js

@@ -1,5 +1,11 @@
 module.exports = {
-  stories: ['../docs/**/*.story.mdx', '../stories/**/*.stor(y|ies).(jsx|mdx)'],
+  // typescript: {
+  //   reactDocgen: 'react-docgen',
+  // },
+  stories: [
+    '../docs/**/*.story.mdx',
+    '../stories/**/*.stor(y|ies).(jsx|mdx|tsx)',
+  ],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',

apps/storybook-react/stories/Divider.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Divider, DividerProps } from '@equinor/eds-core-react'
+import { Story, Meta } from '@storybook/react/types-6-0'
+
+export default {
+  title: 'Components/Divider',
+  component: Divider,
+  argTypes: {
+    color: {
+      control: {
+        type: 'radio',
+        options: ['lighter', 'light', 'medium'],
+      },
+    },
+    variant: {
+      control: {
+        type: 'radio',
+        options: ['medium', 'small'],
+      },
+    },
+  },
+} as Meta
+
+type WrapperProps = React.HTMLAttributes<HTMLDivElement>
+
+const Wrapper = styled.div<WrapperProps>`
+  padding: 32px;
+  background-color: #999;
+`
+
+export const Default: Story<DividerProps> = (args) => <Divider {...args} />
+
+export const Small: Story<DividerProps> = () => (
+  <Wrapper>
+    <Divider color="lighter" variant="small" />
+    <Divider color="light" variant="small" />
+    <Divider variant="small" />
+  </Wrapper>
+)
+
+export const Medium: Story<DividerProps> = () => (
+  <Wrapper>
+    <Divider color="lighter" />
+    <Divider color="light" />
+    <Divider />
+  </Wrapper>
+)

libraries/core-react/package.json

@@ -2,10 +2,13 @@
   "name": "@equinor/eds-core-react",
   "version": "0.6.2",
   "description": "The React implementation of the Equinor Design System",
-  "main": "dist/core-react.cjs.js",
-  "module": "dist/core-react.es.js",
-  "browser": "dist/core-react.umd.js",
-  "types": "dist/types/index.d.ts",
+  "main": "src/index.ts",
+  "publishConfig": {
+    "main": "dist/core-react.cjs.js",
+    "module": "dist/core-react.es.js",
+    "browser": "dist/core-react.umd.js",
+    "types": "dist/types/index.d.ts"
+  },
   "license": "AGPL-3.0-or-later",
   "author": {
     "name": "EDS Core Team",
@@ -26,8 +29,8 @@
   "scripts": {
     "prepare": "npm run build",
     "build": "rollup -c",
-    "build:for-storybook": "rollup -c --environment STORYBOOK",
-    "dev": "rollup -c -w --environment STORYBOOK",
+    "build:for-storybook": "rollup -c",
+    "dev": "rollup -c -w",
     "test": "jest",
     "test:watch": "jest --watch"
   },
@@ -54,7 +57,6 @@
     "@types/react-dom": "^16.9.8",
     "@types/styled-components": "^5.1.2",
     "@types/testing-library__jest-dom": "^5.9.2",
-    "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-styled-components": "^1.10.7",
     "jest": "^26.0.1",
     "jest-styled-components": "^6.3.4",