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

Create component for Recipe card, Add storybook support #41

Merged
merged 11 commits into from
Jul 10, 2018
Merged

Create component for Recipe card, Add storybook support #41

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d5d5003
Progress
vreddi Jun 18, 2018
2f88a47
Add like component, update card design
vreddi Jun 19, 2018
bb4425f
Fix like component, organize content in recipe card component
vreddi Jun 20, 2018
45f158e
Fixed issues with Like component and set text colors on Recipe card
vreddi Jun 21, 2018
c65ab01
Made some improvements to the like component
vreddi Jun 28, 2018
640ffd5
Fix like component, add storybook
vreddi Jul 4, 2018
714aeaf
Add tests
vreddi Jul 4, 2018
d74d2a1
Resolving PR comments
vreddi Jul 9, 2018
6cf540a
Resolving PR comments - part 2
vreddi Jul 9, 2018
dcf83b3
Correct line ending
vreddi Jul 9, 2018
3c4b7f2
Merge branch 'develop' into vreddi/AddRecipeCard
vreddi Jul 10, 2018
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
2 changes: 1 addition & 1 deletion .storybook/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { configure } from '@storybook/react';

function loadStories() {
require('../src/stories');
require('../src/storybook');
Copy link
Contributor

Choose a reason for hiding this comment

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

Sorry, I didn't mean we should just scope the folders. I mean't to decouple storybook from src completely. So the stories should live in the stories folder as a sibling to src.

- package.json
- src/
- stories/
- .storybook/

This repo is a good example. https://github.com/airbnb/react-dates

Copy link
Member Author

@vreddi vreddi Jul 9, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

That might not be the move. I have seen plenty of repos that keep the stories in the src. Following our existing convention of __test__ being in src which utilizes the components, stories should also be in src as they too utilize components.

Further-more:
Here is what the official doc says:

"There’s no hard and fast rule for this. But, keeping stories close to your components is a good idea.

For example, let’s say your UI components live in a directory called: src/components. Then you can write stories inside the src/stories directory.

This is just one way to do that. You can always edit your storybook config file and ask it to load stories from anywhere you want."

https://storybook.js.org/basics/writing-stories/

Copy link
Contributor

Choose a reason for hiding this comment

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

Our tests aren't in src. And I personally prefer things to be decoupled as much as possible. In fact, since our tests are decoupled outside of src, it would make more sense to decouple the stories too.

Copy link
Member Author

Choose a reason for hiding this comment

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

#47

}

configure(loadStories, module);
2 changes: 1 addition & 1 deletion __tests__/ReactElementType.js → __tests__/ReactElementType.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const ReactElementType = {
};

describe('ReactElementType', () => {
it('map contains alltest types', () => {
it('map contains all test types', () => {
expect(ReactElementType.div).toBe('div');
expect(ReactElementType.span).toBe('span');
});
Expand Down
2 changes: 1 addition & 1 deletion __tests__/components/RecipeCard.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import renderer from 'react-test-renderer';
import { shallow } from 'enzyme';

import RecipeCard from 'components/RecipeCard/RecipeCard';
import ReactElementType from '../ReactElementType';
import ReactElementType from '../ReactElementType.test';

describe('RecipeCard', () => {
const title = 'Spicy Hotdogs';
Expand Down
9 changes: 7 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"start": "webpack-dev-server --open",
"build": "webpack",
"test": "jest",
"clean": "rm -rf node_modules",
"clean": "rm -rf node_modules && npm cache clean --force",
"reinstall": "npm run clean && npm install",
Copy link
Contributor

Choose a reason for hiding this comment

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

should also probably add npm cache clean here so we dont have any persisting modules from cache

"lint": "eslint . --ext .js --ext .jsx || exit 0",
"lint:fix": "eslint --fix . --ext .js --ext .jsx || exit 0",
Expand Down Expand Up @@ -96,7 +96,12 @@
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.2"
"webpack-dev-server": "^2.11.2",
"@storybook/react": "^3.4.8",
"@storybook/addon-actions": "^3.4.8",
"@storybook/addon-links": "^3.4.8",
"@storybook/addons": "^3.4.8",
"babel-runtime": "^6.26.0"
},
"husky": {
"hooks": {
Expand Down
6 changes: 4 additions & 2 deletions src/components/Like/Like.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
font-size: 1em;
color: #7c8a94;

&:focus {outline:0;}
&:focus {
outline:0;
}

.like-area {
cursor: pointer;
Expand Down Expand Up @@ -49,4 +51,4 @@
@keyframes heart-burst {
from {background-position:left;}
to { background-position:right;}
}
}
35 changes: 0 additions & 35 deletions src/components/RecipeCard/RecipeCard.stories.jsx
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions src/stories/index.js
View file
Open in desktop

This file was deleted.

7 changes: 7 additions & 0 deletions src/storybook/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import './stories/Chip.story';
import './stories/CardContainer.story';
import './stories/IngredientCard.story';
import './stories/RecipeCard.story';
import './stories/Header.story';
import './stories/SearchBox.story';
import '../base.scss';
38 changes: 0 additions & 38 deletions ...s/CardContainer/CardContainer.stories.jsx → ...storybook/stories/CardContainer.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,8 @@ import { storiesOf } from '@storybook/react';
import React from 'react';

import CardContainer from 'components/CardContainer/CardContainer';
import Chip from 'components/Chip/Chip';
import IngredientCard from 'components/IngredientCard/IngredientCard';
import RecipeCard from 'components/RecipeCard/RecipeCard';

import Milk from 'images/ingredients/milk.png';
import Themes from 'assets/json/themes.json';
import Yogurt from 'images/ingredients/yogurt.png';

storiesOf('CardContainer', module)
.add('Container of RecipeCards', () => (
<CardContainer>
Expand Down Expand Up @@ -38,36 +32,4 @@ storiesOf('CardContainer', module)
authorImage="https://pbs.twimg.com/profile_images/738617909153390593/jVbWhQCd_400x400.jpg"
/>
</CardContainer>
))
.add('Container of IngredientCards', () => (
<CardContainer>
<IngredientCard
name="Milk"
image={Milk}
theme={Themes.teal}
>
<Chip name="calcium" />
<Chip name="vitamin B12" />
<Chip name="riboflavin" />
</IngredientCard>
<IngredientCard
name="Yogurt"
image={Yogurt}
theme={Themes.lime}
>
<Chip name="calcium" />
<Chip name="vitamin B2" />
<Chip name="potassium" />
</IngredientCard>
</CardContainer>
))
.add('Container of Chips', () => (
<CardContainer>
<Chip name="calcium" />
<Chip name="sugar" />
<Chip name="iron" />
<Chip name="zinc" />
<Chip name="vitamin B2" />
<Chip name="potassium" />
</CardContainer>
));
3 changes: 0 additions & 3 deletions src/components/Chip/Chip.stories.jsx → src/storybook/stories/Chip.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,4 @@ import Chip from 'components/Chip/Chip';
storiesOf('Chip', module)
.add('Calcium', () => (
<Chip name="calcium" />
))
.add('Vitamin B2', () => (
<Chip name="vitamin B2" />
));
0 src/components/Header/Header.stories.jsx → src/storybook/stories/Header.story.jsx
View file
Open in desktop
File renamed without changes.
12 changes: 0 additions & 12 deletions ...IngredientCard/IngredientCard.stories.jsx → ...torybook/stories/IngredientCard.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import IngredientCard from 'components/IngredientCard/IngredientCard';

import Milk from 'images/ingredients/milk.png';
import Themes from 'assets/json/themes.json';
import Yogurt from 'images/ingredients/yogurt.png';

storiesOf('IngredientCard', module)
.add('Milk', () => (
Expand All @@ -19,15 +18,4 @@ storiesOf('IngredientCard', module)
<Chip name="vitamin B12" />
<Chip name="riboflavin" />
</IngredientCard>
))
.add('Yogurt', () => (
<IngredientCard
name="Yogurt"
image={Yogurt}
theme={Themes.lime}
>
<Chip name="calcium" />
<Chip name="vitamin B2" />
<Chip name="potassium" />
</IngredientCard>
));
15 changes: 15 additions & 0 deletions src/storybook/stories/RecipeCard.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import RecipeCard from 'components/RecipeCard/RecipeCard';

storiesOf('RecipeCard', module)
.add('Spicy Hotdogs', () => (
<RecipeCard
title="Spicy Hotdogs"
image="https://cdn.cnn.com/cnnnext/dam/assets/171027052520-processed-foods-exlarge-tease.jpg"
cooktime={20}
description="Pork and beef are the traditional meats used in hot dogs. Less expensive hot dogs are often made from chicken or turkey, using low-cost mechanically separated poultry. Hot dogs often have high sodium, fat and nitrite content, ingredients linked to health problems."
authorName="Rebecca Jones"
authorImage="http://www.attractivepartners.co.uk/wp-content/uploads/2017/06/profile.jpg"
/>
));
0 ...omponents/SearchBox/SearchBox.stories.jsx → src/storybook/stories/SearchBox.story.jsx
View file
Open in desktop
File renamed without changes.