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.

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

Feature/storybook #2

Open
wants to merge 3 commits into
base: master
from
Open
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.
+5,997 −157
Diff settings

Always

Just for now

Copy path View file
@@ -22,3 +22,6 @@
/.node_modules.ember-try/
/bower.json.ember-try
/package.json.ember-try

.storybook/preview-head.html
.out
Copy path View file
@@ -0,0 +1,5 @@
import '@storybook/addon-notes/register';
import '@storybook/addon-viewport/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-storysource/register';
Copy path View file
@@ -0,0 +1,13 @@
import { configure, addDecorator } from '@storybook/ember';
import { configureViewport } from '@storybook/addon-viewport';
import { withNotes } from '@storybook/addon-notes';

const req = require.context('../stories', true, /.stories.js$/); // <- import all the stories at once

function loadStories() {
req.keys().forEach(filename => req(filename));
}

addDecorator(withNotes);
configureViewport();
configure(loadStories, module);
Copy path View file
@@ -0,0 +1,14 @@
const path = require('path');

module.exports = {
module: {
rules: [
{
test: [/\.stories\.js$/, /index\.js$/],
loaders: [require.resolve('@storybook/addon-storysource/loader')],
include: [path.resolve(__dirname, '../')],
enforce: 'pre',
},
],
},
};
@@ -0,0 +1,4 @@
import Component from '@ember/component';

export default Component.extend({
});
@@ -0,0 +1,5 @@
<article class="blog-post">
<h1>{{this.title}}</h1>
<p>{{yield}}</p>
<p>Edit title: {{input type="text" value=this.title}}</p>
</article>
Copy path View file
@@ -0,0 +1,5 @@
import Component from '@ember/component';

export default Component.extend({
tagName: 'button',
});
@@ -0,0 +1,4 @@
import Component from '@ember/component';

export default Component.extend({
});
@@ -0,0 +1,4 @@
<div style="background-color: {{backgroundColor}}">
<h1 style="color: {{titleColor}};">{{title}}</h1>
<p style="color: {{subTitleColor}};">{{subtitle}}</p>
</div>
@@ -0,0 +1 @@
foo bar {{name}}
Copy path View file
@@ -0,0 +1,22 @@
const puppeteer = require('puppeteer');

describe('Button', () => {
test('visually looks correct', async () => {
// APIs from jest-puppeteer
const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.goto('http://localhost:9001/iframe.html?selectedKind=Demo&selectedStory=button&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel');
try {
const image = await page.screenshot({fullPage: true});
// API from jest-image-snapshot
expect(image).toMatchImageSnapshot();
} catch (e) {
console.error(e);
}

await page.close();
await browser.close();

});
});
Copy path View file
@@ -0,0 +1,22 @@
const puppeteer = require('puppeteer');

describe('Welcome', () => {
test('visually looks correct', async () => {
// APIs from jest-puppeteer
const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.goto('http://localhost:9001/iframe.html?selectedKind=Addons%2FKnobs&selectedStory=with%20text&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel');
try {
const image = await page.screenshot({fullPage: true});
// API from jest-image-snapshot
expect(image).toMatchImageSnapshot();
} catch (e) {
console.error(e);
}

await page.close();
await browser.close();

});
});
Copy path View file
@@ -0,0 +1,5 @@
module.exports = {
preset: 'jest-puppeteer',
testRegex: './*\\.test\\.js$',
setupTestFrameworkScriptFile: './setupTests.js'
};
Copy path View file
@@ -0,0 +1,3 @@
const { toMatchImageSnapshot } = require('jest-image-snapshot');

expect.extend({ toMatchImageSnapshot });
Copy path View file
@@ -15,11 +15,25 @@
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
"test": "ember test",
"build-storybook": "ember build && build-storybook -p 9001 -s dist",
"storybook:dist": "ember build && build-storybook -c .storybook -o .out -s dist",
"storybook": "start-storybook -p 9001 -s dist",
"jest:integration": "jest -c integration/jest.config.js",
"test:integration": "start-server-and-test storybook http-get://localhost:9001 jest:integration"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@ember/jquery": "^0.5.2",
"@ember/optional-features": "^0.6.3",
"@storybook/addon-actions": "^4.1.7",
"@storybook/addon-knobs": "^4.1.7",
"@storybook/addon-notes": "^4.1.7",
"@storybook/addon-storysource": "^4.1.7",
"@storybook/addon-viewport": "^4.1.7",
"@storybook/addons": "^4.1.7",
"@storybook/ember": "^4.1.7",
"babel-loader": "^8.0.0-beta.6",
"broccoli-asset-rev": "^2.7.0",
"ember-ajax": "^3.1.0",
"ember-cli": "~3.7.1",
@@ -31,6 +45,7 @@
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-sri": "^2.1.1",
"ember-cli-storybook": "^0.0.1",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-data": "~3.7.0",
@@ -42,8 +57,13 @@
"ember-source": "~3.7.0",
"ember-welcome-page": "^3.2.0",
"eslint-plugin-ember": "^5.2.0",
"jest": "^23.6.0",
"jest-image-snapshot": "^2.7.0",
"jest-puppeteer": "^3.9.0",
"loader.js": "^4.7.0",
"qunit-dom": "^0.8.0"
"puppeteer": "^1.11.0",
"qunit-dom": "^0.8.0",
"start-server-and-test": "^1.7.11"
},
"engines": {
"node": "6.* || 8.* || >= 10.*"
Copy path View file
@@ -0,0 +1,28 @@
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import { withKnobs, text, color } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';

storiesOf('Addons/Knobs', module)
.addDecorator(withKnobs)
.addParameters({ options: { selectedAddonPanel: 'storybooks/storybook-addon-knobs' } })
.add('with text', () => ({
template: hbs`
{{welcome-banner
backgroundColor=backgroundColor
titleColor=titleColor
subTitleColor=subTitleColor
title=title
subtitle=subtitle
click=(action onClick)
}}
`,
context: {
backgroundColor: color('backgroundColor', '#FDF4E7'),
titleColor: color('titleColor', '#DF4D37'),
subTitleColor: color('subTitleColor', '#B8854F'),
title: text('title', 'Welcome to storybook'),
subtitle: text('subtitle', 'This environment is completely editable'),
onClick: action('clicked'),
},
}));
Copy path View file
@@ -0,0 +1,43 @@
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';

storiesOf('Blog Post', module)
.add('Demo 1', () => {
return {
template: hbs`
{{#blog-post title=post.title}}
{{post.body}}
{{/blog-post}}
`,
context: {
post: {
title: 'Demo 1',
body: 'This is body 1',
},
onClick: (e) => console.log(e)
}
}
}, {
notes: {
markdown: `
# Markdown!
> Notes can be done via markdown,
`
}
})
.add('Emojis', () => {
return {
template: hbs`
{{#blog-post title=post.title}}
{{post.body}}
{{/blog-post}}
`,
context: {
post: {
title: 'Emojis',
body: '🤔😳😯😮😄😩😓😱🤓😑😶😊',
},
onClick: (e) => console.log(e)
}
}
})
Copy path View file
@@ -0,0 +1,28 @@
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import { action } from '@storybook/addon-actions';

storiesOf('Demo', module)
.add('heading', () => hbs`<h1>Hello World</h1>`)
.add('button', () => {
return {
template: hbs`<button {{action onClick}}>
Hello Button
</button>`,
context: {
onClick: action('clicked')
}
}
})
.add('component', () => {
return {
template: hbs`{{foo-bar
name=name
click=onClick
}}`,
context: {
name: 'FOO BAR',
onClick: (e) => console.log(e)
}
}
});
@@ -0,0 +1,26 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Integration | Component | blog-post', function(hooks) {
setupRenderingTest(hooks);

test('it renders', async function(assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.set('myAction', function(val) { ... });

await render(hbs`{{blog-post}}`);

assert.equal(this.element.textContent.trim(), '');

// Template block usage:
await render(hbs`
{{#blog-post}}
template block text
{{/blog-post}}
`);

assert.equal(this.element.textContent.trim(), 'template block text');
});
});
@@ -0,0 +1,26 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Integration | Component | foo-bar', function(hooks) {
setupRenderingTest(hooks);

test('it renders', async function(assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.set('myAction', function(val) { ... });

await render(hbs`{{foo-bar}}`);

assert.equal(this.element.textContent.trim(), '');

// Template block usage:
await render(hbs`
{{#foo-bar}}
template block text
{{/foo-bar}}
`);

assert.equal(this.element.textContent.trim(), 'template block text');
});
});
@@ -0,0 +1,26 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Integration | Component | welcome-banner', function(hooks) {
setupRenderingTest(hooks);

test('it renders', async function(assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.set('myAction', function(val) { ... });

await render(hbs`{{welcome-banner}}`);

assert.equal(this.element.textContent.trim(), '');

// Template block usage:
await render(hbs`
{{#welcome-banner}}
template block text
{{/welcome-banner}}
`);

assert.equal(this.element.textContent.trim(), 'template block text');
});
});
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.