https://github.com/aaronksaunders/storybookv7-ionic-angular
Simple demonstration of using storybook v7 with ionic framework
https://github.com/aaronksaunders/storybookv7-ionic-angular
ionic-angular storybook storybook-angular storybook-ionic-angular storybook-v7
Last synced: 11 months ago
JSON representation
Simple demonstration of using storybook v7 with ionic framework
- Host: GitHub
- URL: https://github.com/aaronksaunders/storybookv7-ionic-angular
- Owner: aaronksaunders
- Created: 2023-05-15T06:44:04.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-15T07:04:57.000Z (almost 3 years ago)
- Last Synced: 2025-03-27T16:49:47.518Z (11 months ago)
- Topics: ionic-angular, storybook, storybook-angular, storybook-ionic-angular, storybook-v7
- Language: TypeScript
- Homepage: https://www.youtube.com/watch?v=8rVCbD_8oDs
- Size: 388 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Simple Storybook v7 Angular Ionic Integration
Simple demonstration of using storybook v7 with ionic framework
## Video
- https://www.youtube.com/watch?v=8rVCbD_8oDs
## Setup
In project directory
```
npx storybook@latest init
```
Changes to `angular.json`
```json
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
"configDir": ".storybook",
"browserTarget": "app:build",
"compodoc": false,
"port": 6006,
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
"src/theme/variables.scss",
"src/global.scss"
]
}
},
```
Specific Change to a basic story to support Angular & Ionic Framework
```javascript
decorators: [
// include IonicModule
applicationConfig({
providers: [importProvidersFrom([IonicModule.forRoot()])],
}),
// declare the component
moduleMetadata({
declarations: [MemberCardComponent],
}),
// wrap in ion-app
componentWrapperDecorator((story) => `${story}`),
],
```
### More Information
- [Github For Storybook Angular](https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular#getting-started)
- [Storybook Website - Angular](https://storybook.js.org/docs/angular/get-started/install)
## Issues
### Compile Error
```
Error: node_modules/webpack/types.d.ts:10934:41 - error TS2315: Type 'ServerOptions' is not generic.
10934 > = SecureContextOptions & TlsOptions & ServerOptionsImport;
```
I resolved it by using "skipLibCheck": true in your `tsconfig.app.json` under "compilerOptions"