Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add flowtype example again #1623

Merged
merged 1 commit into from
Aug 18, 2017
Merged

Add flowtype example again #1623

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions examples/cra-kitchen-sink/src/components/FlowTypeButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
// @flow
import React from 'react';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think our local .eslintrc has rules for flow so it's probably a good idea to disable it for this file. /* eslint-disable */

Copy link
Member

@Hypnosphi Hypnosphi Aug 8, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

or, even better, add a local .eslintrc

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. Let me sort that out

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems a bit much to add rules for flow just to support an example file but either way, I'll take it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just out of curiosity, how do you get the linting error? I think following this setup should be enough btw:
https://github.com/gajus/eslint-plugin-flowtype#shareable-configurations

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had it in Atom with the linter plugin that reads from the nearest .eslintrc.


type PropsType = {
/** The text to be rendered in the button */
label: string,
/** Function to be called when the button is clicked */
onClick?: Function,
/** Boolean representing wether the button is disabled */
disabled?: boolean,
};

/** Flow type button description */
const FlowTypeButton = ({ label, onClick, disabled }: PropsType) =>
<button onClick={onClick} disabled={disabled}>
{label}
</button>;

FlowTypeButton.defaultProps = {
disabled: false,
onClick: () => {},
};

export default FlowTypeButton;
8 changes: 8 additions & 0 deletions examples/cra-kitchen-sink/src/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import App from '../App';
import Logger from './Logger';
import Container from './Container';
import DocgenButton from '../components/DocgenButton';
import FlowTypeButton from '../components/FlowTypeButton';

const EVENTS = {
TEST_EVENT_1: 'test-event-1',
Expand Down Expand Up @@ -150,6 +151,13 @@ storiesOf('AddonInfo.DocgenButton', module).addWithInfo('DocgenButton', 'Some De
<DocgenButton onClick={action('clicked')} label="Docgen Button" />
);

storiesOf(
'AddonInfo.FlowTypeButton',
module
).addWithInfo('FlowTypeButton', 'Some Description', () =>
<FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />
);

storiesOf('App', module).add('full app', () => <App />);

storiesOf('Centered Button', module)
Expand Down