Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@storybook/ember-cli-storybook
Advanced tools
📒 Ember storybook adapter
ember install @storybook/ember-cli-storybook
This will be triggered automatically as a post build action when running ember build
package.json options (defaults)
"storybook": {
"ignoreTestFiles": true,
"config": {}
}
ember-cli-build options (defaults)
"ember-cli-storybook": {
"componentFilePathPatterns": [],
"enableAddonDocsIntegration": true, // enables yuidoc generation
}
It's recommended to add the following commands in package.json
to build, test and deploy Storybook with Ember:
"storybook": "start-storybook -p 6006 -s dist --ci",
"storybook-dev": "npm-run-all --continue-on-error --parallel start storybook",
"prebuild-storybook": "ember build",
"build-storybook": "build-storybook -s dist"
The config object represents anything that could be parsed from an index.html
file. This must be in the format as below:
{
"meta": [{
"attributes": ["name", "content"]
}, {
"attributes": ["name", "content"]
}, {
"attributes": ["name", "content", "id"]
}],
"link": [{
"selector": "link",
"attributes": ["rel", "href"]
}],
"script": [{
"selector": "script",
"attributes": ["src"]
}]
}
So in order to add a script tag to the generated preview-head.html
a potential config would look like:
"storybook": {
"config": {
"script": {
"src": "./assets/foo.js"
}
}
}
It is important to note that storybook will by default serve any files out of the
public
folder. If you have custom files you would like to serve they need to exist there.
If you want to use YUIDoc with Embroider, you will need to modify your ember-cli-build.js
to be able to compile the documentation.
const { Webpack } = require('@embroider/webpack');
- return require('@embroider/compat').compatBuild(app, Webpack);
+ const compiledApp = require('@embroider/compat').compatBuild(app, Webpack);
+
+ return require('@storybook/ember-cli-storybook').prerender(app, compiledApp);
The Storybook integration for Ember renders stories into a custom component in a router-less environment. This works for many situations but is insufficient when you have a story that requires query parameters, like a component that persists sorting or pagination information to the URL. There’s no official way to accomplish this as of yet, but you can work around it by dynamically adding a route, visiting it using the private startRouting
API, and injecting a pseudo-controller, such as in this utility function:
function injectRoutedController(controllerClass) {
return on('init', function() {
let container = getOwner(this);
container.register('controller:storybook', controllerClass);
let routerFactory = container.factoryFor('router:main');
routerFactory.class.map(function() {
this.route('storybook');
});
let router = container.lookup('router:main');
router.initialURL = 'storybook';
router.startRouting(true);
this.set('controller', container.lookup('controller:storybook'));
});
}
Then you can use it in a story like this:
export let SortableColumns = () => {
return {
template: hbs`
<ListTable @source={{sortedShortList}} @sortProperty={{controller.sortProperty}} @sortDescending={{controller.sortDescending}} as |t|>
<t.head>
<t.sort-by @prop="name">Name</t.sort-by>
<t.sort-by @prop="lang">Language</t.sort-by>
</t.head>
<t.body @key="model.name" as |row|>
<tr>
<td>{{row.model.name}}</td>
<td>{{row.model.lang}}</td>
</tr>
</t.body>
</ListTable>
`,
context: {
injectRoutedController: injectRoutedController(
Controller.extend({
queryParams: ['sortProperty', 'sortDescending'],
sortProperty: 'name',
sortDescending: false,
})
),
sortedShortList: computed('controller.sortProperty', 'controller.sortDescending', function() {
let sorted = productMetadata.sortBy(this.get('controller.sortProperty') || 'name');
return this.get('controller.sortDescending') ? sorted.reverse() : sorted;
}),
},
};
};
As said above, Storybook integration for Ember renders stories into a custom component, that are store-less. If your component relies on an Ember model, for example, you can work around with the same way you would do for query params.
function createUser() {
return on('init', function () {
this.user = getOwner(this)
.lookup('service:store')
.createRecord('user', { lastName: 'Doe', email: 'john.doe@qonto.eu' });
});
}
And then in your story:
export const storeExample = () => {
return {
template: hbs`
<SomeComponent
@model={{this.user}}
/>
`,
context: {
createUser: createUser(),
},
};
};
Because Ember uses a mapping to resolve import like @ember/array
or @ember/object
for example, they may not work in Storybook.
However, and because the module is already declared in the babel preset for ember, you should be able to make them work by adding
babel-plugin-ember-modules-api-polyfill to our package.json
.
preview-head
generation race conditionThe .storybook/preview-head.html
file is auto-generated and changes based on your config/environment.js
and whether it’s a static or live-updating build of Storybook. This means that you’ll often see version control diffs for it, which can be bothersome.
Since the file is auto-generated, it would be nice to add it to .gitignore
so it no longer shows up in diffs. Unfortunately, the documented way of starting a live-updating Storybook launches Ember CLI and Storybook in parallel, which means that in many cases, the preview-head
file will not have been generated by the time Storybook needs it. To work around this if you want to ignore preview-head
, you could either start Ember CLI and Storybook separately or create a script to launch them in sequence.
In some situations, components don’t render properly in stories, such as when dynamically-calculated container widths are zero or contents are blank. The cause for this is as-yet unknown, but an unfortunate workaround like this utility class can help in the meantime, by delaying the insertion of the component until the container element has been fully rendered:
import EmberObject from '@ember/object';
import { next } from '@ember/runloop';
export default EmberObject.extend({
init() {
this._super(...arguments);
this.set('complete', false);
next(this, () => {
this.set('complete', true);
});
},
});
Here’s an example of it being used in a story:
export let Standard = () => {
return {
template: hbs`
<div class="block" style="height:50px; width:200px;">
{{#if delayedTruth.complete}}
<DistributionBar @data={{distributionBarData}} />
{{/if}}
</div>
`,
context: {
delayedTruth: DelayedTruth.create(),
distributionBarData: [
{ label: 'one', value: 10 },
{ label: 'two', value: 20 },
],
},
};
};
See the Contributing guide for details.
This project is licensed under the MIT License.
0.6.1 (08/16/203)
FAQs
📒 Ember storybook adapter
The npm package @storybook/ember-cli-storybook receives a total of 3,592 weekly downloads. As such, @storybook/ember-cli-storybook popularity was classified as popular.
We found that @storybook/ember-cli-storybook demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 31 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.