Storybook & Atomic Design - 1.2. - Getting Started with Storybook

GitHub - whatjackhasmade/storybook-atomic-design-react

Contribute to whatjackhasmade/storybook-atomic-design-react development by creating an account on GitHub.

So the quickest way of getting our Storybook React project setup is to create a directory for your project, I'll be using the directory `Storybook'on my desktop but you can initialise the project anywhere you feel appropriate.

Within your project directory, we need to create a `package.json'file for our dependencies to be managed. We can do this by running the following -

npm init

Following the interactive questions to configure the `package.json'file.

After setting up your package file, within your directory, you'll want to run the command -

npx -p @storybook/cli sb init --type react

This command will install the required dependencies and configuration files we need for Storybook to run on our machine.

If for any reason this fails, please refer to the official Storybook documentation on how to complete a manual installation - https://storybook.js.org/docs/guides/guide-react/

If everything went well, you'll see some new directories in your project, these directories contain the core config files for the global project.

As well as these config files, we have access to some example stories and components to give us a structure to follow when composing our own stories.

With the new assets and files, you'll then need to run the following to start a local development server -

npm run storybook

You should now have a React Storybook instance development server available at

[https://localhost:6006](https://localhost:6006)

I won't be going into how we compose stories just yet, that will come up in a following lesson of this course, for now, take reference of how to navigate to the development server and how we run our storybook instance in development mode.

Finally, we will want to create a Github repository for our Storybook project.

Some developers may want to tightly couple the storybook instance with their product repository but I invite you to hold off on doing so as separating the two allows the design system to be used across many products and not isolated to a single system or site.

So to create a git instance, we first need to run the following within the root directory of our project (

ce-storybook/

git init

Our project is now a git initialised project, but before we go about committing our project to a git repository, we first want to ignore specific directories related to our packages.

This is because by committing directories such as

node_modules'to our repository, we are potentially committing tens of thousands of files which are expected to change frequently. Insteadm we will use the 

To ignore common directories I use the following tool - https://www.gitignore.io/ to generate a file placed in the root directory of my project called

.gitignore

Alternatively, you can copy and paste the settings to a `.gitignore'file which I get when entering windows, macOS, node on the site https://www.gitignore.io/ -

# Created by <http://www.gitignore.io/api/node,macos,windows>
# Edit at <http://www.gitignore.io/?templates=node,macos,windows>

### macOS ###
# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \\r
Icon

# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (<http://nodejs.org/api/report.html>)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (<http://gruntjs.com/creating-plugins#storing-task-files>)
.grunt

# Bower dependency directory (<http://bower.io/>)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (<http://nodejs.org/api/addons.html>)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (<http://parceljs.org/>)
.cache

# next.js build output
.next

# nuxt.js build output
.nuxt

# react / gatsby
public/

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

### Windows ###
# Windows thumbnail cache files
Thumbs.db
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db

# Dump file
*.stackdump

# Folder config file
[Dd]esktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp

# Windows shortcuts
*.lnk

# End of <http://www.gitignore.io/api/node,macos,windows>

Now although git and Github may share similar names they are not the same.

Git is version control, it is the core technology used to track, manage and edit your codebase.

Github is one of many platforms used to host the git information and host project files.

You can use git across Github, Bitbucket, Gitlab and more git hosting providers. In this course, we will use Github to create free public and private repositories but the same concepts can be applied to your platform of choice.

With a Github account, you can create a new repository or repo for short by navigating to - https://github.com/new

You'll be asked to set a repository name, for which I will use the name 'storybook-atomic-design-react'.

Next, you can set an optional description.

I'll be setting my repository privacy to public for the sakes of this course but you can set yours to private if you are working on a sensitive project or commercial product.

I'll skip over setting up a readme.md for now, but it's helpful to use one to document your installation process to ease the onboarding process for those contributing to the project.

You'll then be presented with a quick start guide by Github.

We can use a slightly modified command-line example to help us get our code pushed to the repository.

git remote add origin git@github.com:<github-username>/<project-name>.git
git add -A
git commit -m "Initialise Repository"
git push -u origin master

Now you should see a success message in your command line and have access to your Storybook project on Github.

We now have a version-controlled Storybook React project, ready for us to start customising with our own React components and story files to document our components.

In the next lesson, we'll be removing the default stories that come with our system, setting up a custom directory structure, before we create our first story.