@aflorithmic/aflr-storybook v0.2.35

⚠️ Important Setup Notes

This repo uses React 17.0.1. The parent repository MUST be the same version.

If using create-react-app:

1. Change your package.json to

    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.3",

2. Update your index.js to use the old syntax

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

3. As this repo uses styled component themes, they must be imported with ThemeProvider

yarn add styled-components

import theme from "@aflorithmic/aflr-storybook/dist/themes/theme";
import { ThemeProvider } from "styled-components";

<ThemeProvider theme={theme}>
  <App goes here />
</ThemeProvider>;

🚅 Quick start

1. Install the dependencies.

   Navigate into your new site’s directory and install the necessary dependencies.

   # Navigate to the directory
   cd aflr-storybook/
   
   # Install the dependencies
   yarn install
   
   # Run storybook
   yarn storybook

   Storybook will open on http://localhost:6006

2. Open the source code and start editing!

   Open the aflr-storybook directory in your code editor of choice and building your first component!

🔎 What's inside?

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

.
├── node_modules
├── public
├── src
├── .gitignore
├── .env
├── LICENSE
├── package.json
├── yarn.lock
└── README.md

1. node_modules: This directory contains all of the modules of code that your project depends on (npm packages).

2. public: This directory will contain the development and production build of the site.

3. src: This directory will contain all of the code related to what you will see on your application.

4. .env: This file will contain the necessary environment variables for your application.

5. .gitignore: This file tells git which files it should not track or maintain during the development process of your project.

6. LICENSE: The storybook is licensed under the MIT licence.

7. 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.

8. 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).

9. README.md: A text file containing useful reference information about the project.

Running Tests

1. Run tests using jest

   yarn test

2. Run tests and get the code coverage

   yarn coverage

Contribute

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

Learning Storybook

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

Releases

We should tag all future PRs with one of the labels: major, minor, patch, skip-release, prerelease, internal, documentation before merging them:

https://github.com/aflorithmic/aflr-storybook/labels

```bash
# Release a new version
yarn release

```

Publishing Commands

1. Create .env file project root and add your credentials

SKIP_PREFLIGHT_CHECK=true
CHROMATIC_PROJECT_TOKEN=
NPM_TOKEN=
GITHUB_TOKEN=

2. Login with npm

npm adduser

3. Push the new build to chromatic

yarn chromatic

4. Publish the code to npm

yarn publish

5. Create a release on github... TBD

yarn auto release