📦 @inspire11/storybook-theme
This package is a standardized branding-compliant theme for Inspire11 Storybook projects.
-
💼 Getting Started 1.1📚 Prerequisites 1.2📲 Installing -
🛠 Testing 2.1🔁 E2E 2.2🛁 Static Analysis 🛥 Deployment🧾 Important Dependencies- 🙌🏼 Contributing
🏷 Versioning📜 Authors📄 License📯 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 git@bitbucket.org: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 - robert.hameetman@inspire11.com
- Brian Duffey - brian.duffey@inspire11.com
- Michelle Kiss - michelle.kiss@inspire11.com
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