Add index, convert default to named exports

shilman · shilman · commit d3f9f2285eac · 2019-05-14T12:22:37.000+08:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,3 +1,7 @@
+// const error = 2;
+// const warn = 1;
+const ignore = 0;
+
 module.exports = {
   root: true,
   parser: 'babel-eslint',
@@ -15,6 +19,7 @@ module.exports = {
         jsxBracketSameLine: false,
       },
     ],
+    'import/prefer-default-export': ignore,
     'react/jsx-filename-extension': [
       1,
       {
diff --git a/src/components/basics/Avatar.js b/src/components/basics/Avatar.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { color, typography } from './shared/styles';
 import { glow } from './shared/animation';
-import Icon from './Icon';
+import { Icon } from './Icon';
 
 export const sizes = {
   large: 40,
@@ -91,7 +91,7 @@ const Initial = styled.div`
   `}
 `;
 
-function Avatar({ loading, username, src, size, ...props }) {
+export function Avatar({ loading, username, src, size, ...props }) {
   let avatarFigure = <Icon icon="useralt" />;
 
   if (!loading) {
@@ -122,5 +122,3 @@ Avatar.defaultProps = {
   src: null,
   size: 'medium',
 };
-
-export default Avatar;
diff --git a/src/components/basics/Avatar.stories.js b/src/components/basics/Avatar.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-import Avatar from './Avatar';
+import { Avatar } from './Avatar';
 
 storiesOf('basics/Avatar', module)
   .addParameters({ component: Avatar })
diff --git a/src/components/basics/Badge.js b/src/components/basics/Badge.js
@@ -48,8 +48,6 @@ const BadgeWrapper = styled.div`
     `};
 `;
 
-function Badge({ ...props }) {
+export function Badge({ ...props }) {
   return <BadgeWrapper {...props} />;
 }
-
-export default Badge;
diff --git a/src/components/basics/Badge.stories.js b/src/components/basics/Badge.stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import Badge from './Badge';
+import { Badge } from './Badge';
 
 storiesOf('basics/Badge', module)
   .add('all badges', () => (
diff --git a/src/components/basics/Button.js b/src/components/basics/Button.js
@@ -306,7 +306,7 @@ const ButtonWrapper = styled.button`
 
 const ButtonLink = ButtonWrapper.withComponent('a');
 
-function Button({ loading, loadingText, isLink, children, ...props }) {
+export function Button({ loading, loadingText, isLink, children, ...props }) {
   if (isLink) {
     return (
       <ButtonLink loading={loading} {...props}>
@@ -335,5 +335,3 @@ Button.defaultProps = {
   loadingText: null,
   isLink: false,
 };
-
-export default Button;
diff --git a/src/components/basics/Button.stories.js b/src/components/basics/Button.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import Button from './Button';
-import Icon from './Icon';
+import { Button } from './Button';
+import { Icon } from './Icon';
 
 storiesOf('basics/Button', module).add('all buttons', () => (
   <div>
diff --git a/src/components/basics/Checkbox.js b/src/components/basics/Checkbox.js
@@ -74,7 +74,7 @@ const Input = styled.input.attrs({ type: 'checkbox' })`
   }
 `;
 
-function Checkbox({ label, error, ...props }) {
+export function Checkbox({ label, error, ...props }) {
   return (
     <Label>
       <Input {...props} type="checkbox" />
@@ -95,5 +95,3 @@ Checkbox.defaultProps = {
   label: null,
   error: null,
 };
-
-export default Checkbox;
diff --git a/src/components/basics/Checkbox.stories.js b/src/components/basics/Checkbox.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import Checkbox from './Checkbox';
+import { Checkbox } from './Checkbox';
 
 const onChange = action('change');
 storiesOf('basics/Checkbox', module)
diff --git a/src/components/basics/FormState.js b/src/components/basics/FormState.js
@@ -27,7 +27,7 @@ function defaultBindings({ field, props, $try }) {
   return bindings;
 }
 
-export default class FormData extends MobxReactForm {
+export class FormData extends MobxReactForm {
   constructor(fields, { plugins = { dvr: validatorjs }, hooks, options }) {
     super(fields, { plugins, hooks, options });
   }
diff --git a/src/components/basics/Icon.js b/src/components/basics/Icon.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { color } from './shared/styles';
-import icons from './shared/icons';
+import { icons } from './shared/icons';
 
 const Svg = styled.svg`
   display: inline-block;
@@ -13,7 +13,7 @@ const Path = styled.path`
   fill: ${color.darkest};
 `;
 
-function Icon({ icon, ...props }) {
+export function Icon({ icon, ...props }) {
   return (
     <Svg viewBox="0 0 1024 1024" width="20px" height="20px" {...props}>
       <Path d={icons[icon]} />
@@ -24,5 +24,3 @@ function Icon({ icon, ...props }) {
 Icon.propTypes = {
   icon: PropTypes.string.isRequired,
 };
-
-export default Icon;
diff --git a/src/components/basics/Icon.stories.js b/src/components/basics/Icon.stories.js
@@ -2,8 +2,8 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { storiesOf } from '@storybook/react';
 
-import Icon from './Icon';
-import icons from './shared/icons';
+import { Icon } from './Icon';
+import { icons } from './shared/icons';
 
 const Meta = styled.div`
   color: #999;
diff --git a/src/components/basics/Input.js b/src/components/basics/Input.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { color, typography } from './shared/styles';
 import { jiggle } from './shared/animation';
-import Icon from './Icon';
+import { Icon } from './Icon';
 
 // prettier-ignore
 const Label = styled.span`
@@ -223,7 +223,7 @@ const InputContainer = styled.div`
   `}
 `;
 
-function Input({
+export function Input({
   value,
   label,
   orientation,
@@ -285,5 +285,3 @@ Input.defaultProps = {
   focused: false,
   lastErrorValue: null,
 };
-
-export default Input;
diff --git a/src/components/basics/Input.stories.js b/src/components/basics/Input.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import Input from './Input';
+import { Input } from './Input';
 
 const onChange = action('change');
 storiesOf('basics/Input', module)
diff --git a/src/components/basics/LazyLoad.js b/src/components/basics/LazyLoad.js
@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactLazyLoad from 'react-lazyload';
 
-function LazyLoad({ children, ...props }) {
+export function LazyLoad({ children, ...props }) {
   if (LazyLoad.disabled) {
     return children;
   }
@@ -17,5 +17,3 @@ LazyLoad.propTypes = {
 };
 
 LazyLoad.disabled = false;
-
-export default LazyLoad;
diff --git a/src/components/basics/ListItem.js b/src/components/basics/ListItem.js
@@ -112,7 +112,7 @@ const Item = styled.a`
     `};
 `;
 
-export default function ListItem({
+export function ListItem({
   loading,
   left,
   title,
diff --git a/src/components/basics/ListItem.stories.js b/src/components/basics/ListItem.stories.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import ListItem from './ListItem';
 
-import Icon from './Icon';
+import { ListItem } from './ListItem';
+import { Icon } from './Icon';
 
 storiesOf('basics/ListItem', module)
   .add('all', () => (
diff --git a/src/components/basics/ProgressDots.js b/src/components/basics/ProgressDots.js
@@ -43,7 +43,7 @@ const Dot = styled.div`
     `};
 `;
 
-function ProgressDots({ loading, steps, progress, className, size }) {
+export function ProgressDots({ loading, steps, progress, className, size }) {
   const dots = [];
   for (let i = 0; i < steps; i += 1) {
     dots.push(<Dot loading={loading} active={i === progress - 1} key={i} size={size} />);
@@ -70,5 +70,3 @@ ProgressDots.defaultProps = {
   className: null,
   size: 'small',
 };
-
-export default ProgressDots;
diff --git a/src/components/basics/ProgressDots.stories.js b/src/components/basics/ProgressDots.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-import ProgressDots from './ProgressDots';
+import { ProgressDots } from './ProgressDots';
 
 storiesOf('basics/ProgressDots', module)
   .add('loading', () => <ProgressDots loading />)
diff --git a/src/components/basics/SocialGraph.js b/src/components/basics/SocialGraph.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 
-export default function SocialGraph({ title, desc, url, image }) {
+export function SocialGraph({ title, desc, url, image }) {
   return (
     <Helmet title={title}>
       <meta name="description" content={desc} />
diff --git a/src/components/basics/Subheading.js b/src/components/basics/Subheading.js
@@ -9,6 +9,4 @@ const Heading = styled.span`
   font-size: ${typography.size.s2 - 1}px;
 `;
 
-const Subheading = props => <Heading {...props} />;
-
-export default Subheading;
+export const Subheading = props => <Heading {...props} />;
diff --git a/src/components/basics/Subheading.stories.js b/src/components/basics/Subheading.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import Subheading from './Subheading';
+import { Subheading } from './Subheading';
 
 storiesOf('basics/Subheading', module).add('subheading', () => <Subheading>Subheading</Subheading>);
diff --git a/src/components/basics/Video.js b/src/components/basics/Video.js
@@ -8,7 +8,7 @@ const StyledVideo = styled.video`
   height: auto;
 `;
 
-const Video = ({ src, shouldChangeSize, alt, ...props }) => {
+export const Video = ({ src, shouldChangeSize, alt, ...props }) => {
   const videoSize = shouldChangeSize && window.innerWidth < 600 ? 'sm' : 'lg';
   const videoSrc = videoSize === 'sm' ? src.replace('lg', 'sm') : src;
 
@@ -28,5 +28,3 @@ Video.propTypes = {
 Video.defaultProps = {
   shouldChangeSize: false,
 };
-
-export default Video;
diff --git a/src/components/basics/Video.stories.js b/src/components/basics/Video.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import styled from 'styled-components';
 
-import Video from './Video';
+import { Video } from './Video';
 
 const VideoWrapper = styled('div')`
   width: 45%
diff --git a/src/components/basics/index.js b/src/components/basics/index.js
@@ -5,19 +5,19 @@ import * as icons from './shared/icons';
 
 export { styles, global, animation, icons };
 
-export { default as Avatar } from './Avatar';
-export { default as Badge } from './Badge';
-export { default as Button } from './Button';
-export { default as Icon } from './Icon';
-export { default as LazyLoad } from './LazyLoad';
-export { default as Subheading } from './Subheading';
-export { default as ProgressDots } from './ProgressDots';
+export * from './Avatar';
+export * from './Badge';
+export * from './Button';
+export * from './Icon';
+export * from './LazyLoad';
+export * from './Subheading';
+export * from './ProgressDots';
 
-export { default as Checkbox } from './Checkbox';
-export { default as Input } from './Input';
-export { default as FormState } from './FormState';
+export * from './Checkbox';
+export * from './Input';
+export * from './FormState';
 
-export { default as SocialGraph } from './SocialGraph';
-export { default as Video } from './Video';
+export * from './SocialGraph';
+export * from './Video';
 
 // export { default as Modal } from './modal/Modal';
diff --git a/src/components/basics/shared/icons.js b/src/components/basics/shared/icons.js
diff --git a/src/components/lib/StoryLinkWrapper.js b/src/components/lib/StoryLinkWrapper.js
@@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions';
 
 const onLinkClick = action('onLinkClick');
 
-export default function StoryLinkWrapper({ href, passHref, children }) {
+export function StoryLinkWrapper({ href, passHref, children }) {
   const child = Children.only(children);
 
   return React.cloneElement(child, {
diff --git a/src/index.js b/src/index.js
@@ -1,12 +1 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import styles from './styles.css';
-
-const ExampleComponent = ({ text }) => <div className={styles.test}>Example Component: {text}</div>;
-
-ExampleComponent.propTypes = {
-  text: PropTypes.string.isRequired,
-};
-
-export default ExampleComponent;
+export * from './components/basics';
diff --git a/src/index.stories.js b/src/index.stories.js
diff --git a/src/index.stories.mdx b/src/index.stories.mdx

Original file line number	Diff line number	Diff line change
@@ -48,8 +48,6 @@ const BadgeWrapper = styled.div`
`48`	`48`	`};
`49`	`49`	`;
`50`	`50`
`51`		`-function Badge({ ...props }) {`
	`51`	`+export function Badge({ ...props }) {`
`52`	`52`	`return <BadgeWrapper {...props} />;`
`53`	`53`	`}`
`54`		`-`
`55`		`-export default Badge;`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ function defaultBindings({ field, props, $try }) {`
`27`	`27`	`return bindings;`
`28`	`28`	`}`
`29`	`29`
`30`		`-export default class FormData extends MobxReactForm {`
	`30`	`+export class FormData extends MobxReactForm {`
`31`	`31`	`constructor(fields, { plugins = { dvr: validatorjs }, hooks, options }) {`
`32`	`32`	`super(fields, { plugins, hooks, options });`
`33`	`33`	`}`