📦 @inspire11/storybook-theme

This package is a standardized branding-compliant theme for Inspire11 Storybook projects.

1. 💼 Getting Started 1.1 📚 Prerequisites 1.2 📲 Installing
2. 🛠 Testing 2.1 🔁 E2E 2.2 🛁 Static Analysis
3. 🛥 Deployment
4. 🧾 Important Dependencies
5. 🙌🏼 Contributing
6. 🏷 Versioning
7. 📜 Authors
8. 📄 License
9. 📯 Acknowledgments

💼 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

📚 Prerequisites

What things you need to install the software and how to install them

Give examples

📲 Installing

To install the package, clone and build the repo, then use npm to install dependencies.

git clone [email protected]:inspire11/banners.git
cd banners
npm i

🛥 Deployment

To push changes and use new banners, update the package version and publish to NPM:

git version patch
npm publish --access=public

🧾 Important Dependencies

• TypeScript - Implementation language
• NPM - Dependency Management
• Webpack - The build pipeline used
• Babel - JavaScript/TypeScript transpiler

🙌🏼 Contributing

To add a banner to this package, create a text file with the format {{bannerName}}.txt:

touch {{bannerName}}.txt

You can find ideas for your banner here, or use your own. Once you've got a banner, add it to {{bannerName}}.txt. Then, add the following to index.ts:

import {{bannerName}} from './{{bannerName}}.txt';

Webpack uses raw-loader to inject the contents imported from {{bannerName}}.txt into the distributed compiled JavaScript so that we don't have to read or import {{bannerName}}.txt at runtime.

In order to easily access your banner in other projects, you should include at least 3 exports:

• 1 export of the text imported from './{{bannerName}}.txt'
• 1 export of a function which returns the text imported from './{{bannerName}}.txt'
• 1 export of a function which logts the text imported from './{{bannerName}}.txt'

export const {{bannerName}}Banner: string = {{bannerName}};
export const get{{bannerName}}Banner = (): string => {{bannerName}};
export const log{{bannerName}}Banner = (): void => console.log({{bannerName}});

Finally, add these exports to the default export object at the bottom of index.ts:

export default {
  defaultBanner,
  getDefaultBanner,
  logDefaultBanner,
  {{bannerName}}Banner,
  get{{bannerName}}Banner,
  log{{bannerName}}Banner,
};

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

🏷 Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

📜 Authors

• Robert Hameetman - [email protected]
• Brian Duffey - [email protected]
• Michelle Kiss - [email protected]

See also the list of contributors who participated in this project.

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details

📯 Acknowledgments

• Hat tip to anyone whose code was used
• Inspiration
• etc