
I needed to add Storybook to an existing React project a few days ago. I ran into some issues with peer-dependencies, here is how I fixed them:


1. Check and see if the project has Typescript installed. It might, even if it's not being used. This is important for Storybook's initial configuration. Make sure to uninstall this dependency if it's not being used:
```shell
yarn remove typescript
```
2. Add this snippet to the end of `package.json` :
```json
"resolutions": {
    "babel-loader": "8.1.0"
  }
```
This is a [known issue.](https://github.com/storybookjs/storybook/issues/5183)

3. Remove node_modules and package-lock.json to clear up any conflicts:
```shell
rm -rf node_modules package-lock.json
```

4. Re-install everything:
```shell
yarn
```
Or if installing with npm you might need to run
```shell
npm install --legacy-peer-deps
```

Add Storybook to React


GitHub has deprecated their [password authentication](https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/) as of August 2021 and that means I'm having to switch over to SSH. I don't usually code on Windows machines anymore, but decided to take my Surface Go on a long-haul flight because of its compact size.  

Here I ran into an issue: while setting up the new connection, I **could not copy the generated public key from the WSL2 instance to the browser in Windows because `pbcopy` does not work.** 

The [instructions on GitHub](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account/) simply say to 'locate the hidden `.ssh` folder, open the file in your favorite text editor, and copy it to your clipboard.' Here's how I did this:

1. To view hidden files and directories within the folder -
```shell
ls -a
``` 
The `-a` flag stands for 'all' and literally shows all the files. Now we know we're in the correct folder.

2. Navigate into `.ssh`:
```shell
cd .ssh
```

3. Now let's open the key in a text editor:
```shell
vim id_ed25519.pub
```
SSH keys are generated in pairs, and you want the public one, the file with the `.pub` extension.

4. Copy the contents of that file and quit vim, easy! Juuust kidding, let's quit vim:
```shell
# press Esc
:q
# press Enter
```


Manually copy an SSH key in WSL2

I ran into an issue when running Docker on Mac, and got this error: `DNS_PROBE_FINISHED_NXDOMAIN`

You'll need to edit the hosts file to fix this, here are the steps:

1. Open a terminal and type 
```shell
sudo nano /etc/hosts
```

2. Find the #Added by Docker Section and add 
```shell
127.0.0.1 your_url_goes_here
```
3. Hit `Ctrl + O` to save, then `Enter`
4. Hit `Ctrl + X` to exit.

Now you're all set!

Docker DNS Error


Here's how to add Redux as a global decorator to Storybook in React:

1. Make sure the store is in a separate component.
2. Then in `.storybook/preview.js` add:
```jsx
import { Provider } from "react-redux";
import { MemoryRouter } from "react-router-dom";
import store from "../path/to/store";

export const decorators = [
  (Story) => (
    <Provider store={store}>
        <MemoryRouter>
          <Story />
        </MemoryRouter>
    </Provider>
  ),
];
```

**Bonus:**
the MemoryRouter component will resolve any issues your stories might have with Link and react-router-dom.

Add Redux Store to Storybook


I named a git branch incorrectly, so it was not recognized and attached to the Jira ticket I was working on. Here is what I did to correct this:



1. Made sure to checkout the branch locally:
```shell
git checkout current_branch_name
```

2. Renamed the branch locally:
```shell
git branch -m new_branch_name
```

3. Pushed the local branch to rename it remotely:
```shell
git push origin -u new_branch_name
```
4. Deleted the old branch:
```shell
git push origin --delete current_branch_name
```
Done!

How to: rename local & remote git branch


To add global styles to Storybook, import them into `.storybook/preview.js` :

```jsx
import "bootstrap/dist/css/bootstrap.min.css";
import "../path/to/app.css"
```
This is the way to connect a UI framework such as Bootstrap to Storybook.