Added source for storybook. Fixed regression in box background color (g…

…rommet#2329) * Added source for storybook. Fixed regression in box background color * Removes unexisting reset call in accordion stories * Removed box fix. removed warning webpack * Reverted disabling lint entirely for stories.
vaishnavyogesh · Oct 9, 2018 · 9f5aa2c · 9f5aa2c
1 parent 8f06e06
commit 9f5aa2c
Show file tree

Hide file tree

Showing 43 changed files with 1,059 additions and 2,107 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,3 @@
 node_modules/**
 dist/**
-coverage/**
+coverage/**
diff --git a/.eslintrc b/.eslintrc
@@ -55,5 +55,14 @@
     "object-curly-newline": 0,
     "prefer-destructuring": 0,
     "jsx-a11y/mouse-events-have-key-events": 0
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.stories.js"],
+      "rules": {
+        "import/no-unresolved": 0,
+        "import/extensions": 0
+      }
+    }
+  ]
 }
diff --git a/package.json b/package.json
@@ -52,6 +52,8 @@
     "recompose": "^0.27.0"
   },
   "devDependencies": {
+    "@storybook/addon-options": "^3.4.11",
+    "@storybook/addon-storysource": "^3.4.11",
     "@storybook/react": "4.0.0-alpha.20",
     "babel-cli": "^6.22.2",
     "babel-core": "^6.26.0",
@@ -118,4 +120,4 @@
     "lint",
     "test"
   ]
-}
+}
diff --git a/src/js/components/Accordion/accordion.stories.js b/src/js/components/Accordion/accordion.stories.js
@@ -18,8 +18,8 @@ import {
   Text,
   TextInput,
   ThemeContext,
-} from '../../';
-import { grommet } from '../../themes';
+} from 'grommet';
+import { grommet } from 'grommet/themes';
 
 const richAccordionTheme = {
   accordion: {
@@ -141,7 +141,7 @@ class RichAccordion extends Component {
                   if (activeIndexes.includes(1)) {
                     // give sometime to emulate an async call
                     setTimeout(() => {
-                      this.setState({ highlightLoaded: true }, this.reset);
+                      this.setState({ highlightLoaded: true });
                     }, 1000);
                   }
                 }}

diff --git a/src/js/components/Anchor/anchor.stories.js b/src/js/components/Anchor/anchor.stories.js
@@ -3,8 +3,8 @@ import { storiesOf } from '@storybook/react';
 
 import { Add } from 'grommet-icons';
 
-import { Anchor, Grommet } from '../';
-import { grommet } from '../../themes';
+import { Anchor, Grommet } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 storiesOf('Anchor', module)
   .add('Default', () => (

diff --git a/src/js/components/Button/button.stories.js b/src/js/components/Button/button.stories.js
@@ -2,8 +2,8 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Add } from 'grommet-icons';
 
-import { Box, Button, Grommet, RoutedButton, Text } from '../';
-import { grommet } from '../../themes';
+import { Box, Button, Grommet, RoutedButton, Text } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 const SimpleButton = props => (
   <Grommet theme={grommet}>

diff --git a/src/js/components/Calendar/calendar.stories.js b/src/js/components/Calendar/calendar.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Calendar } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Calendar } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class SimpleCalendar extends Component {
   state = {}

diff --git a/src/js/components/Carousel/carousel.stories.js b/src/js/components/Carousel/carousel.stories.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 import { Attraction, Car, TreeOption } from 'grommet-icons';
 
-import { Grommet, Box, Carousel } from '../';
+import { Grommet, Box, Carousel } from 'grommet';
 
 class SimpleCarousel extends Component {
   render() {

diff --git a/src/js/components/Chart/chart.stories.js b/src/js/components/Chart/chart.stories.js
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Box, Chart, Stack, Text } from '../';
+import { Grommet, Box, Chart, Stack, Text } from 'grommet';
+import { grommet } from 'grommet/themes';
+
 import { calcs } from '../Chart/calcs';
-import { grommet } from '../../themes';
 
 class BarChart extends Component {
   render() {

diff --git a/src/js/components/CheckBox/checkbox.stories.js b/src/js/components/CheckBox/checkbox.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, CheckBox } from '../';
-import { grommet } from '../../themes';
+import { Grommet, CheckBox } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class SimpleCheckBox extends Component {
   state = { checked: false }

diff --git a/src/js/components/Clock/clock.stories.js b/src/js/components/Clock/clock.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Clock } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Clock } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class DigitalClock extends Component {
   render() {

diff --git a/src/js/components/Collapsible/collapsible.stories.js b/src/js/components/Collapsible/collapsible.stories.js
@@ -3,8 +3,8 @@ import { storiesOf } from '@storybook/react';
 
 import { FormDown, FormNext, Notification } from 'grommet-icons';
 
-import { Box, Button, Collapsible, Heading, Grommet, Text } from '../';
-import { grommet } from '../../themes';
+import { Box, Button, Collapsible, Heading, Grommet, Text } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class SimpleCollapsible extends Component {
   state = {

diff --git a/src/js/components/DataTable/datatable.stories.js b/src/js/components/DataTable/datatable.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Box, DataTable, Meter, Text } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Box, DataTable, Meter, Text } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 const amountFormatter = new Intl.NumberFormat('en-US', {
   style: 'currency',

diff --git a/src/js/components/Diagram/diagram.stories.js b/src/js/components/Diagram/diagram.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Box, Diagram, Stack } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Box, Diagram, Stack } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 const Node = ({ id, ...rest }) => (
   <Box

diff --git a/src/js/components/Distribution/distribution.stories.js b/src/js/components/Distribution/distribution.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Box, Distribution, Text } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Box, Distribution, Text } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class SimpleDistribution extends Component {
   render() {

diff --git a/src/js/components/Drop/drop.stories.js b/src/js/components/Drop/drop.stories.js
@@ -1,9 +1,9 @@
 import React, { Component, Fragment } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Box, Drop, Grommet, Text } from '../';
-import { grommet } from '../../themes';
-import { ThemeContext } from '../../contexts';
+import { Box, Drop, Grommet, Text } from 'grommet';
+import { grommet } from 'grommet/themes';
+import { ThemeContext } from 'grommet/contexts';
 
 class SimpleDrop extends Component {
   targetRef = React.createRef()

diff --git a/src/js/components/DropButton/dropbutton.stories.js b/src/js/components/DropButton/dropbutton.stories.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 import { Close, FormDown } from 'grommet-icons';
 
-import { Grommet, Box, Button, Calendar, DropButton, Heading, Text } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Box, Button, Calendar, DropButton, Heading, Text } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 const DropContent = ({ onClose }) => (
   <Box pad='small'>

diff --git a/src/js/components/FormField/formfield.stories.js b/src/js/components/FormField/formfield.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Box, CheckBox, FormField, Select, TextArea, TextInput } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Box, CheckBox, FormField, Select, TextArea, TextInput } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 const allSuggestions = Array(100).fill().map((_, i) => `suggestion ${i + 1}`);
 

diff --git a/src/js/components/Grid/grid.stories.js b/src/js/components/Grid/grid.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Box, Button, Grid, Text } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Box, Button, Grid, Text } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class AppGrid extends Component {
   state = { sidebar: true }

diff --git a/src/js/components/Heading/heading.stories.js b/src/js/components/Heading/heading.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Grid, Heading } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Grid, Heading } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 const H = ({ level, size }) => (
   <Heading level={level} size={size}>

diff --git a/src/js/components/InfiniteScroll/infinitescroll.stories.js b/src/js/components/InfiniteScroll/infinitescroll.stories.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Box, InfiniteScroll, Text } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Box, InfiniteScroll, Text } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 const items = Array(200).fill().map((_, i) => `item ${i + 1}`);
 

diff --git a/src/js/components/Layer/layer.stories.js b/src/js/components/Layer/layer.stories.js
@@ -19,8 +19,8 @@ import {
   Select,
   Text,
   TextInput,
-} from '../';
-import { grommet } from '../../themes';
+} from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class CenterLayer extends Component {
   state = {}

diff --git a/src/js/components/Markdown/markdown.stories.js b/src/js/components/Markdown/markdown.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Markdown } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Markdown } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 const CONTENT = `
   # Out of Breath

diff --git a/src/js/components/Menu/menu.stories.js b/src/js/components/Menu/menu.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Box, Menu } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Box, Menu } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class SimpleMenu extends Component {
   render() {

diff --git a/src/js/components/Meter/meter.stories.js b/src/js/components/Meter/meter.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Meter } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Meter } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class BarMeter extends Component {
   render() {

diff --git a/src/js/components/Paragraph/paragraph.stories.js b/src/js/components/Paragraph/paragraph.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Paragraph } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Paragraph } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 const sizes = ['xlarge', 'large', 'medium', 'small'];
 

diff --git a/src/js/components/RadioButton/radiobutton.stories.js b/src/js/components/RadioButton/radiobutton.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, RadioButton } from '../';
-import { grommet } from '../../themes';
+import { Grommet, RadioButton } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class SimpleRadioButton extends Component {
   render() {

diff --git a/src/js/components/RangeInput/rangeinput.stories.js b/src/js/components/RangeInput/rangeinput.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, RangeInput } from '../';
-import { grommet } from '../../themes';
+import { Grommet, RangeInput } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class SimpleRangeInput extends Component {
   state = { value: 5 }

diff --git a/src/js/components/RangeSelector/rangeselector.stories.js b/src/js/components/RangeSelector/rangeselector.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Box, RangeSelector, Stack, Text } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Box, RangeSelector, Stack, Text } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class SimpleRangeSelector extends Component {
   state = { values: [2, 8] }

diff --git a/src/js/components/Select/stories/select.stories.js b/src/js/components/Select/stories/select.stories.js
@@ -11,12 +11,12 @@ import {
   Grommet,
   Select,
   Text,
-} from '../../';
-import { grommet } from '../../../themes';
+} from 'grommet';
+import { grommet } from 'grommet/themes';
+import { deepMerge } from 'grommet/utils';
 
 import { theme as customSearchTheme } from './theme';
 import { SearchInputContext } from './components/SearchInputContext';
-import { deepMerge } from '../../../utils';
 
 const customRoundedTheme = deepMerge(
   grommet,

diff --git a/src/js/components/Stack/stack.stories.js b/src/js/components/Stack/stack.stories.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Grommet, Box, Stack } from '../';
-import { grommet } from '../../themes';
+import { Grommet, Box, Stack } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 class SimpleStack extends Component {
   render() {

diff --git a/src/js/components/Table/table.stories.js b/src/js/components/Table/table.stories.js
@@ -1,10 +1,17 @@
 import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow } from '../';
-import { Text } from '../Text';
-import { Grommet } from '../Grommet';
-import { grommet } from '../../themes';
+import {
+  Grommet,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHeader,
+  TableRow,
+  Text,
+} from 'grommet';
+import { grommet } from 'grommet/themes';
 
 // Always should store amount in cents to avoid precision errors
 const DATA = [

diff --git a/src/js/components/Tabs/tabs.stories.js b/src/js/components/Tabs/tabs.stories.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 import { Attraction, Car, CircleInformation, Currency, TreeOption } from 'grommet-icons';
 
-import { Box, Grommet, FormField, Tab, Tabs, Text, TextInput } from '../';
-import { grommet } from '../../themes';
+import { Box, Grommet, FormField, Tab, Tabs, Text, TextInput } from 'grommet';
+import { grommet } from 'grommet/themes';
 
 const UncontrolledTabs = () => (
   <Grommet theme={grommet}>