This project combines StencilJS for building web components and Storybook for documenting and testing those components. It uses TypeScript for type safety.
Before you begin, ensure you have met the following requirements:
- Node.js installed on your local machine.
- Yarn package manager installed. If not, you can install it using
npm install -g yarn.
Follow these steps to get the project up and running:
-
Clone the repository:
git clone <repository-url> cd your-stencil-storybook-project
-
Install Dependencies:
yarn install
-
Build the StencilJS components:
To compile and build the StencilJS components, use the following command:
yarn build
-
Start Storybook:
Start the Storybook development server:
yarn storybook
Storybook will run on http://localhost:6006 by default.
-
Start StencilJS Development Server (Optional):
If you want to run the StencilJS components in a development environment, you can do so using the StencilJS development server:
yarn start
Your StencilJS components will be available at http://localhost:3333 by default.
Here's a brief overview of the project's directory structure:
/src: Contains your StencilJS component source files./stories: Contains Storybook stories for documenting your components./storybook: Configuration files for Storybook./www: The output directory for the StencilJS build.
- Create your StencilJS components in the
/src/componentsdirectory. - Each component should have its own directory with a
.tsxfile for the component and a.cssfile for styling. - Don't forget to export your component using
export, e.g.,export const MyComponent.
- Create Storybook stories for your components in the
/storiesdirectory. - Use
.stories.tsxfiles for writing stories. - Refer to the Storybook documentation for guidance on writing stories.
yarn test: Run tests (if you've added tests to your components).yarn lint: Run linters to ensure code quality.
Feel free to contribute to this project by opening issues or pull requests.