chromaui / learnstorybook-code Goto Github PK

View Code? Open in Web Editor NEW

392.0 16.0 1.2K 4.64 MB

Code for Learn Storybook

Home Page: https://learnstorybook.com

License: MIT License

JavaScript 63.34% HTML 0.77% CSS 24.24% MDX 11.65%

storybook learning design-system

learnstorybook-code's Introduction

Chromatic's Intro to Storybook React template

This template ships with the main React and Storybook configuration files you'll need to get up and running fast.

🚅 Quick start

Create the application.

Use degit to get this template.

# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox

Install the dependencies.

Navigate into your new site’s directory and install the necessary dependencies.
```
# Navigate to the directory
cd taskbox/

# Install the dependencies
yarn
```
Open the source code and start editing!

Open the taskbox directory in your code editor of choice and building your first component!
Browse your stories!

Run yarn storybook to see your component's stories at http://localhost:6006

🔎 What's inside?

A quick look at the top-level files and directories included with this template.

.
├── .storybook
├── node_modules
├── public
├── src
├── .gitignore
├── .index.html
├── LICENSE
├── package.json
├── yarn.lock
├── vite.config.js
└── README.md

.storybook: This directory contains Storybook's configuration files.
node_modules: This directory contains all of the modules of code that your project depends on (npm packages).
public: This directory will contain the development and production build of the site.
src: This directory will contain all of the code related to what you will see on your application.
.gitignore: This file tells git which files it should not track or maintain during the development process of your project.
.index.html: This is the HTML page that is served when generating a development or production build.
LICENSE: The template is licensed under the MIT licence.
package.json: Standard manifest file for Node.js projects, which typically includes project specific metadata (such as the project's name, the author among other information). It's based on this file that npm will know which packages are necessary to the project.
yarn.lock: This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (Do not change it manually).
vite.config.js: This is the configuration file for Vite, a build tool that aims to provide a faster and leaner development experience for modern web projects.
README.md: A text file containing useful reference information about the project.

Contribute

If you encounter an issue with the template, we encourage you to open an issue in this template's repository.

Learning Storybook

Read our introductory tutorial at Learn Storybook.
Learn how to transform your component libraries into design systems in our Design Systems for Developers tutorial.
See our official documentation at Storybook.

learnstorybook-code's People

Stargazers

Watchers

Forkers

ryan258 dannypule baucucu thiskevinwang krothenbaum dburles mdhalse ammaralaa-dev marcin-wiglusz nathanieldavis kanumuri9593 slavon360 polguixe phironaka monika-stempniak ronnyrd patrickbaldwinsi dazynizhy cbeard87 chidoneto katsisaac50 alterx laurepeu marvisdan dswami earthtone tchappel vladtomsa kennethashworth npascetti yonikid15 henrynguyenvn brian-cooney brittmmendez kwosei fabianmagrini sonusasankan kaynewang mrcelo tranceyos2419 nick722 ryanpisuena leecoder3962 stanleyyylau eloisarpc pennwu1 y21314d andrew-godfrey agnesaziza epereyra77 fullflavedave annie-huang ericaca nazmid wangfeiixang andihaki hazardoushazik jelenakalaba blowjohan dulinrain88 chadfurman eidellev hironorikawakami jaybyron virtualmason lars-bo-colourbox leo-esp cilavery luonstreak drterpentin ktjooho ninamorena ahebwa49 elehas nat-me chocopuff2020 andersonsousapereira c2chen1994 droidthings domind mariaperhaps bhagasan minusthebear02 grootfish vishak-kavalur sam-park gulshankumardev eduardlio b4r05 rajeevmaster nowhy izzi-ink gizmocn mikeps34 steddybear eran-or jbrencis flolege tonymichaelhead noeliasabando

learnstorybook-code's Issues

Update stories to use Component Story Format

This would make the tutorial even easier to follow! 🎉

React/Data Section fails due to not having a Provider/store configured

The React version of the tutorial doesn't include any information of wiring in the Provider and its store; therefore the TaskList (PureTaskList) does not work on its own.

I noticed in the diff check that you included the Provider and store into the App.js, but this was not covered anywhere in the tutorial, and also wouldn't work for the stories.js and test.js

I tried to work around this issue, but cannot, so will try continue on in the tutorial and see if it is possible to continue

Dead reference to createTask?

Following the guide currently, arrived at this page and I noticed a paragraph referencing code which I think changed since:

createTask() is a helper function that generates shape of a Task that we created and exported from the Task.stories.js file. Similarly, actions exported from Task.stories.js defined the actions (mocked callbacks) that a Task component expects, which the TaskList also needs.

Couldn't find any reference to a createTask so I'm assuming this was changed after this was written

app.component.spec fails from Angular 'Screens' chapter

Installing commit 8cb73c6 and executing npm run test fails, at least for me.

I have the following versions installed:

E:\learnstorybook-code [(8cb73c6...)]> node -v
v14.19.0
E:\learnstorybook-code [(8cb73c6...)]> npm -v 
6.14.16

It would be helpful to elaborate on this note section of 'Screens' chapter:

Don't forget to update the test file src/app/app.component.spec.ts. Or the next time you run your tests they will fail.

Because that's where the test is failing. Perhaps updating dependencies first will be a start.

Hope that helps.

[Security] Potential Secret Leak

It has been noticed that while using chromaui/action@v1 your projectToken injbe7ej2u is present in plaintext. Please ensure that secrets are encrypted or not passed as plain text in github workflows.

Docs InboxScreen shows only Error stories

When I freshly clone this repo and run yarn storybook then click on the "Docs" of my InboxScreen story I then only see Error stories for both Default & Error (as expected) story

Vuex configuration does not propagate to its child component's vuex store

Thank you for the great tutorial. I have one question regarding Vuex injection.

https://www.learnstorybook.com/vue/en/screen/
Supplying context to stories

I did exactly that (it was a little bit trickier because I was also using vuex modules), but then I found it doesn't govern its child components' vuex store. For example,

component-a uses component-b1 and component-b2.
component-b1 and component-b2 are vuex-aware.
I make story for component-a, and provide mock store for component-b1 and component-b2.
Component-b1 and component-b2's mapState function does not recognize the mock I provided on component-a.

Does this sound right to you? If so, I think it might be good to include that limitation in the tutorial.

Thank you.

Missing jest.config.js

In the section about Snapshot testing, it says We also need to make a small tweak to our jest.config.js, but there's no instruction before this about creating a jest.config.js file, and I also don't see it in this code base. Am I missing something?

Update tutorial to match the latest version of Storybook.

add prettier to devDependencies

How do you handle changes (like this) that should be applied to all branches? Do you follow a specific Git Workflow?

document which Node.js and Yarn versions should be used

I couldn't install dependencies (on branch angular) using the latest LTS version of Node.js (12.19.0) and yarn 1.22.10. I got

gyp ERR! build error

due to V8 header file issues, e.g.

In file included from ../../nan/nan.h:2657:
../../nan/nan_object_wrap.h:124:26: error: no member named 'IsNearDeath' in 'Nan::Persistent<v8::Object, v8::NonCopyablePersistentTraits<v8::Object> >'
    assert(wrap->handle_.IsNearDeath());
           ~~~~~~~~~~~~~ ^

It worked with a previous LTS version of Node.js (10.15.3).

Please document which Node.js and Yarn versions work or should be used. I personally prefer .nvmrc (see Node Version Manager) and .yvmrc files (see Yarn Version Manager).

Add assets error in React tutorial

There is an issue in the React tutorial during the second step.

After modifying .storybook/main.js and .storybook/preview.js in the Config section, there is a build error:

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/icon/percolate.eot?-5w3um4' in '/home/user/taskbox/src'

The error can be resolved by placing the public directory under the src directory, rather than in the high-level taskbox directory, and modifying lines 392-398 of the src/index.css as following:

@font-face {
  font-family: "percolate";
  src: url("./public/icon/percolate.eot?-5w3um4");
  src: url("./public/icon/percolate.eot?#iefix5w3um4") format("embedded-opentype"), url("./public/icon/percolate.woff?5w3um4") format("woff"), url("./public/icon/percolate.ttf?5w3um4") format("truetype"), url("./public/icon/percolate.svg?5w3um4") format("svg");
  font-weight: normal;
  font-style: normal;
}

Is this the intended directory structure? Otherwise, is there a recommended fix for this issue?

Vue jest snapshot fails

Running the unit tests fails (presumably because babel doesn't transpile js anymore?)

$ yarn test:unit
yarn run v1.12.3
$ vue-cli-service test:unit
 FAIL  tests/unit/storybook.spec.js
  ● Test suite failed to run

    /Users/farcaller/src/sb-test/tests/unit/storybook.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import initStoryshots from '@storybook/addon-storyshots';
                                                                                                    ^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

which is the react native branch?

following this tutorial:

https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/

which is the react-native branch?

yarn test, yarn start Not Work

Hello Dear

I am learning https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/

Among the contents of learning, yarn start and yarn run* are not executed.
I can't find any related scripts anywhere in package.json.

intro-storybook-react-template
leanstorybook-code

Thank you

icon problem

I am following the Storybook for React tutorial,and seem to have hit a problem.

ERROR in ./src/index.css (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Module build failed (from ./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js):
Error: Can't resolve './assets/icon/percolate.eot?-5w3um4' in '/Users/mac/react-learn/taskbox/src'

what can I do ?

Angular: Use service instead of ngxs to share state

The Angular documentation suggests to use a service to communicate and share state between parent and child components. It is unnecessary to introduce a library like ngxs to the tutorial. The reader may not be familiar with ngxs, but a service is a basic building block that every reader should know.

Missing components for React Native tutorial

Hi!

It may be me, but it looks like the tutorial for React Native is missing a couple of things, namely:

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';

Couldn't find those anywhere and would appreciate it if you could point me in the right direction.

Nunito fonts are also not included in the folder linked in the tutorial, though these can be downloaded from Google.

I'm assuming this could be because the tutorial is a translation of an older guide?

TypeError: require.context is not a function

I'm getting this every time I run the tests

Missing diff on pure-task-list.component

While going through the Angular documentation I ran into an issue where I was getting a compilation error saying

Error: src/app/components/task-list/task-list.component.html:1:105 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'string'.

While going through and determining what went wrong, I compared against the commit referenced (eb8da4c#diff-72eb450fab0a83eb8601422853c51299c37422e60f976305fcbae9776d44e2e6) and saw that there was a change that wasn't listed in the pure-task-list.component.ts diff on the tutorial page https://storybook.js.org/tutorials/intro-to-storybook/angular/en/data/.
Essentially, on the tutorial page the only instruction was to rename task-list to pure-task-list. But in addition to that you need to remove the typecasting of <Event> on the onPinTask and onArchiveTask outputs. When you look at the previous step, you define those outputs like this:

 @Output()
  onPinTask = new EventEmitter<Event>();

But what is required on the next step is this

 @Output()
onPinTask = new EventEmitter();

No percolate font

title covers the issue, following from the start and getting 404 errors for the percolate font, no icon directory either.

Interactions in Vue example not working correctly

I was following the Vue tutorial and stumbled upon a small issue with the interactions - they don't really do anything.

As I've managed to figure out, it's the mocked Vuex store - its actions don't update the state:

learnstorybook-code/src/components/PureInboxScreen.stories.js

Lines 25 to 31 in c58dc1c

    
           actions: { 
        
             pinTask(context, id) { 
        
               action("pin-task")(id); 
        
             }, 
        
             archiveTask(context, id) { 
        
               action("archive-task")(id); 
        
             },

I've managed to fix this by simply using the same code as in the normal store, i.e.:

actions: {
    archiveTask({ commit }, id) {
      commit('ARCHIVE_TASK', id);
    },
    pinTask({ commit }, id) {
      commit('PIN_TASK', id);
    },
},

However, now With Interactions story affects other stories, so they are not really isolated correctly.
I'm just starting learning Storybook, though, so I couldn't come up with a better way to fix that.

Missing app.j changes

In the section about data I believe you are missing the steps to modify the app.js file to get the redux to work (or maybe I'm just tired and missed it) =)

Update - spoke to soon, I was just going off the files in the commit and notice app.js file changes but none were mentioned in the tutorial itself. I am still getting:

Could not find "store" in the context of "Connect(PureTaskList)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(PureTaskList) in connect options.

How can I open a pull request?

I would like to suggest a change in the code. I can't push my feature branch to your repo in order to create a pull request. What would you suggest I do?

Problems used in typescript

I have a question. When using interface in a component, the data type can be defined very well. In my practice, it really performs well in the storybook. but! , When I switch to the app itself, I even only see a blank page. How can I make the component itself be able to use this type to render in the browser?
Should I comment it out? Assign value again?

Short example component.tsx

interface props {
  value: string
}
export default function({value}:props){
   retutn(
      <div>{value}<div>
   )
}

Error installing yarn -D identity-object-proxy

I'm currently in this step: https://www.learnstorybook.com/angular/en/simple-component/

however, i can't proceed because this line fails.

yarn add -D @storybook/addon-storyshots identity-object-proxy jest jest-preset-angular

I install them one by one and found out that there is an error in installing identity-object-proxy.

This is what my package.json looks like:

"dependencies": {
	"@angular/animations": "~7.2.0",
	"@angular/common": "~7.2.0",
	"@angular/compiler": "~7.2.0",
	"@angular/core": "~7.2.0",
	"@angular/forms": "~7.2.0",
	"@angular/platform-browser": "~7.2.0",
	"@angular/platform-browser-dynamic": "~7.2.0",
	"@angular/router": "~7.2.0",
	"core-js": "^2.5.4",
	"rxjs": "~6.3.3",
	"tslib": "^1.9.0",
	"zone.js": "~0.8.26"
},
"devDependencies": {
	"@angular-devkit/build-angular": "~0.13.0",
	"@angular/cli": "~7.3.2",
	"@angular/compiler-cli": "~7.2.0",
	"@angular/language-service": "~7.2.0",
	"@babel/core": "^7.3.3",
	"@storybook/addon-actions": "^4.1.12",
	"@storybook/addon-links": "^4.1.12",
	"@storybook/addon-notes": "^4.1.12",
	"@storybook/addon-storyshots": "^4.1.12",
	"@storybook/addons": "^4.1.12",
	"@storybook/angular": "^4.1.12",
	"@types/jasmine": "~2.8.8",
	"@types/jasminewd2": "~2.0.3",
	"@types/node": "~8.9.4",
	"babel-loader": "^8.0.5",
	"codelyzer": "~4.5.0",
	"css-loader": "^2.1.0",
	"jasmine-core": "~2.99.1",
	"jasmine-spec-reporter": "~4.2.1",
	"jest": "^24.1.0",
	"jest-preset-angular": "^6.0.2",
	"karma": "~3.1.1",
	"karma-chrome-launcher": "~2.2.0",
	"karma-coverage-istanbul-reporter": "~2.0.1",
	"karma-jasmine": "~1.1.2",
	"karma-jasmine-html-reporter": "^0.2.2",
	"less-loader": "^4.1.0",
	"protractor": "~5.4.0",
	"style-loader": "^0.23.1",
	"ts-node": "~7.0.0",
	"tslint": "~5.11.0",
	"typescript": "~3.2.2"
},
"jest": {
    "coveragePathIgnorePatterns": [
      "/jest-config/",
      "/node_modules/"
    ],
    ...
}

How to fix this?

Thanks a lot.

Asterisk (*) issue in index.css

I came across this warning when running yarn build-storybook. I am using Vite for development.

rendering chunks (29)...warnings when minifying css:
▲ [WARNING] Expected identifier but found "*" [css-syntax-error]

    <stdin>:36:2:
      36 │   *vertical-align: middle;
         ╵   ^


▲ [WARNING] Expected identifier but found "*" [css-syntax-error]

    <stdin>:38:2:
      38 │   *overflow: visible;
         ╵   ^

Not sure why those * are written

h1,
p,
label {
  ...
  vertical-align: baseline;
  *vertical-align: middle;
  line-height: normal;
  *overflow: visible;
  ...
}

How to add unit testing to this vuejs project?

I found a addon @storybook/addon-jest, but it can not run under vuejs. So I want to know ,how to add unit testing in storybook. I want to see testing result in storybook . Thanks.

Inconsistency between github repo learnstorybook-code and Create addons chapter of storybook tutorial

I've been through the tutorial as far as the end of Create Addons chapter, and have noticed that the repo code differs markedly in the '.storybook' folder from the actual tutorial code. I am trying to bring in the image assets to display them as shown in 'Displaying the actual assets' section, but can't figure out how to use a config.js file and addons.js file, which are present in this repo. I must have missed something because there is a marked difference between the two examples.
Could you provide some explanation of how to display the image assets as shown?

Add assets error

I'm following this tutorial from learn storybook:
https://www.learnstorybook.com/intro-to-storybook/react/en/get-started/

For some reason when completing lesson 2, my storybook does not display the icons that should be displayed. I do not see any errors in the browser console or in the shell.

Can someone help me? Pls

Question on component contains smart component doing async call

I wonder how you write storybook for this case

<A>
    <B />
</A>

B is smart component which in its componentDidMount, it fetch data from endpoint using axios or rxjs ajax. How do you intercept the request to return fake data. I do not want it to hit the real endpoint

Inaccuracies in tutorial

Just started going through the learn Storybook tutorial and it's proving quite frustrating.

When prompted to modify the config file to:

// .storybook/main.js module.exports = { stories: ['../src/components/**/*.stories.js'], addons: ['@storybook/addon-actions', '@storybook/addon-links'], };

It turns out that the path for stories should actually be '../src/components/*.stories.js' (since that's where we've just created stories).

After getting over this hurdle, now, none of the icons seem to work. It seems like the CSS is relying on a font that's not available (Percolate ?).

Angular tests fail

Some tests on the current branch angular fail. I get the following output, when I run yarn run jest:

yarn run v1.22.10
$ jest
 PASS  src/app/tasks/components/pure-task-list.component.spec.ts
 PASS  src/app/app.component.spec.ts
 FAIL  src/angularshots.test.ts
  ● Storyshots › InboxScreen › default

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "Storyshots InboxScreen default 1".

    - Snapshot
    + Received

    @@ -3,194 +3,202 @@
        data={[Function Object]}
        target={[Function ViewContainerRef_]}
      >
        <ng-component>
          <inbox-screen>
    -
    -
    -       <div
    -         class="page lists-show"
    +       <pure-inbox-screen
    +         ng-reflect-error=""
            >
    -         <nav>
    -           <h1
    -             class="title-page"
    -           >
    -             <span
    -               class="title-wrapper"
    +
    +
    +         <div
    +           class="page lists-show"
    +         >
    +           <nav>
    +             <h1
    +               class="title-page"
                  >
    -               Taskbox
    -             </span>
    -           </h1>
    -         </nav>
    -         <task-list>
    -           <pure-task-list
    -             ng-reflect-tasks="[object Object],[object Object"
    -           >
    -             <div
    -               class="list-items"
    +               <span
    +                 class="title-wrapper"
    +               >
    +                 Taskbox
    +               </span>
    +             </h1>
    +           </nav>
    +           <task-list>
    +             <pure-task-list
    +               ng-reflect-tasks="[object Object],[object Object"
                  >
    -
    -               <task-item
    -                 ng-reflect-task="[object Object]"
    +               <div
    +                 class="list-items"
                    >
    -                 <div
    -                   class="list-item TASK_INBOX"
    +
    +                 <task-item
    +                   ng-reflect-task="[object Object]"
                      >
    -                   <label
    -                     class="checkbox"
    -                   >
    -                     <input
    -                       disabled="true"
    -                       name="checked"
    -                       type="checkbox"
    -                     />
    -                     <span
    -                       class="checkbox-custom"
    -                     />
    -                   </label>
                        <div
    -                     class="title"
    +                     class="list-item TASK_INBOX"
    +                     id="1"
                        >
    -                     <input
    -                       placeholder="Input title"
    -                       readonly="true"
    -                       type="text"
    -                     />
    -                   </div>
    -                   <div
    -                     class="actions"
    -                   >
    -
    -                     <a>
    +                     <label
    +                       class="checkbox"
    +                     >
    +                       <input
    +                         disabled="true"
    +                         name="checked"
    +                         type="checkbox"
    +                       />
                            <span
    -                         class="icon-star"
    +                         class="checkbox-custom"
                            />
    -                     </a>
    +                     </label>
    +                     <div
    +                       class="title"
    +                     >
    +                       <input
    +                         placeholder="Input title"
    +                         readonly="true"
    +                         type="text"
    +                       />
    +                     </div>
    +                     <div
    +                       class="actions"
    +                     >
    +
    +                       <a>
    +                         <span
    +                           class="icon-star"
    +                         />
    +                       </a>
    +                     </div>
                        </div>
    -                 </div>
    -               </task-item>
    -               <task-item
    -                 ng-reflect-task="[object Object]"
    -               >
    -                 <div
    -                   class="list-item TASK_INBOX"
    +                 </task-item>
    +                 <task-item
    +                   ng-reflect-task="[object Object]"
                      >
    -                   <label
    -                     class="checkbox"
    -                   >
    -                     <input
    -                       disabled="true"
    -                       name="checked"
    -                       type="checkbox"
    -                     />
    -                     <span
    -                       class="checkbox-custom"
    -                     />
    -                   </label>
                        <div
    -                     class="title"
    +                     class="list-item TASK_INBOX"
    +                     id="2"
                        >
    -                     <input
    -                       placeholder="Input title"
    -                       readonly="true"
    -                       type="text"
    -                     />
    -                   </div>
    -                   <div
    -                     class="actions"
    -                   >
    -
    -                     <a>
    +                     <label
    +                       class="checkbox"
    +                     >
    +                       <input
    +                         disabled="true"
    +                         name="checked"
    +                         type="checkbox"
    +                       />
                            <span
    -                         class="icon-star"
    +                         class="checkbox-custom"
                            />
    -                     </a>
    +                     </label>
    +                     <div
    +                       class="title"
    +                     >
    +                       <input
    +                         placeholder="Input title"
    +                         readonly="true"
    +                         type="text"
    +                       />
    +                     </div>
    +                     <div
    +                       class="actions"
    +                     >
    +
    +                       <a>
    +                         <span
    +                           class="icon-star"
    +                         />
    +                       </a>
    +                     </div>
                        </div>
    -                 </div>
    -               </task-item>
    -               <task-item
    -                 ng-reflect-task="[object Object]"
    -               >
    -                 <div
    -                   class="list-item TASK_INBOX"
    +                 </task-item>
    +                 <task-item
    +                   ng-reflect-task="[object Object]"
                      >
    -                   <label
    -                     class="checkbox"
    -                   >
    -                     <input
    -                       disabled="true"
    -                       name="checked"
    -                       type="checkbox"
    -                     />
    -                     <span
    -                       class="checkbox-custom"
    -                     />
    -                   </label>
                        <div
    -                     class="title"
    +                     class="list-item TASK_INBOX"
    +                     id="3"
                        >
    -                     <input
    -                       placeholder="Input title"
    -                       readonly="true"
    -                       type="text"
    -                     />
    -                   </div>
    -                   <div
    -                     class="actions"
    -                   >
    -
    -                     <a>
    +                     <label
    +                       class="checkbox"
    +                     >
    +                       <input
    +                         disabled="true"
    +                         name="checked"
    +                         type="checkbox"
    +                       />
                            <span
    -                         class="icon-star"
    +                         class="checkbox-custom"
                            />
    -                     </a>
    +                     </label>
    +                     <div
    +                       class="title"
    +                     >
    +                       <input
    +                         placeholder="Input title"
    +                         readonly="true"
    +                         type="text"
    +                       />
    +                     </div>
    +                     <div
    +                       class="actions"
    +                     >
    +
    +                       <a>
    +                         <span
    +                           class="icon-star"
    +                         />
    +                       </a>
    +                     </div>
                        </div>
    -                 </div>
    -               </task-item>
    -               <task-item
    -                 ng-reflect-task="[object Object]"
    -               >
    -                 <div
    -                   class="list-item TASK_INBOX"
    +                 </task-item>
    +                 <task-item
    +                   ng-reflect-task="[object Object]"
                      >
    -                   <label
    -                     class="checkbox"
    -                   >
    -                     <input
    -                       disabled="true"
    -                       name="checked"
    -                       type="checkbox"
    -                     />
    -                     <span
    -                       class="checkbox-custom"
    -                     />
    -                   </label>
                        <div
    -                     class="title"
    +                     class="list-item TASK_INBOX"
    +                     id="4"
                        >
    -                     <input
    -                       placeholder="Input title"
    -                       readonly="true"
    -                       type="text"
    -                     />
    -                   </div>
    -                   <div
    -                     class="actions"
    -                   >
    -
    -                     <a>
    +                     <label
    +                       class="checkbox"
    +                     >
    +                       <input
    +                         disabled="true"
    +                         name="checked"
    +                         type="checkbox"
    +                       />
                            <span
    -                         class="icon-star"
    +                         class="checkbox-custom"
                            />
    -                     </a>
    +                     </label>
    +                     <div
    +                       class="title"
    +                     >
    +                       <input
    +                         placeholder="Input title"
    +                         readonly="true"
    +                         type="text"
    +                       />
    +                     </div>
    +                     <div
    +                       class="actions"
    +                     >
    +
    +                       <a>
    +                         <span
    +                           class="icon-star"
    +                         />
    +                       </a>
    +                     </div>
                        </div>
    -                 </div>
    -               </task-item>
    -
    -
    -             </div>
    -           </pure-task-list>
    -         </task-list>
    -       </div>
    +                 </task-item>
    +
    +
    +               </div>
    +             </pure-task-list>
    +           </task-list>
    +         </div>
    +       </pure-inbox-screen>
          </inbox-screen>
        </ng-component>
      </storybook-dynamic-app-root>

      at match (node_modules/@storybook/addon-storyshots/dist/test-bodies.js:25:22)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:388:26)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:128:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:387:32)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:138:43)
      at node_modules/zone.js/dist/zone.js:872:34
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (node_modules/zone.js/dist/zone.js:421:31)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (node_modules/zone.js/dist/proxy.js:159:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (node_modules/zone.js/dist/zone.js:420:36)
      at Zone.Object.<anonymous>.Zone.runTask (node_modules/zone.js/dist/zone.js:188:47)
      at drainMicroTaskQueue (node_modules/zone.js/dist/zone.js:595:35)

  ● Storyshots › InboxScreen › error

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "Storyshots InboxScreen error 1".

    - Snapshot
    + Received

    @@ -2,11 +2,13 @@
        cfr={[Function CodegenComponentFactoryResolver]}
        data={[Function Object]}
        target={[Function ViewContainerRef_]}
      >
        <ng-component>
    -     <inbox-screen>
    +     <pure-inbox-screen
    +       ng-reflect-error="Something!"
    +     >

            <div
              class="page lists-show"
            >
              <div
    @@ -26,8 +28,8 @@
                  Something went wrong
                </div>
              </div>
            </div>

    -     </inbox-screen>
    +     </pure-inbox-screen>
        </ng-component>
      </storybook-dynamic-app-root>

      at match (node_modules/@storybook/addon-storyshots/dist/test-bodies.js:25:22)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:388:26)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:128:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:387:32)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:138:43)
      at node_modules/zone.js/dist/zone.js:872:34
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (node_modules/zone.js/dist/zone.js:421:31)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (node_modules/zone.js/dist/proxy.js:159:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (node_modules/zone.js/dist/zone.js:420:36)
      at Zone.Object.<anonymous>.Zone.runTask (node_modules/zone.js/dist/zone.js:188:47)
      at drainMicroTaskQueue (node_modules/zone.js/dist/zone.js:595:35)

Test Suites: 1 failed, 2 passed, 3 total
Tests:       2 failed, 10 passed, 12 total
Snapshots:   0 total
Time:        4.227s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

	actions: {
	pinTask(context, id) {
	action("pin-task")(id);
	},
	archiveTask(context, id) {
	action("archive-task")(id);
	},