Kaiserin Storybook

Table of Contents

• Kaiser
• Overview
• Technologies
• Getting Started Storybook
  • Development
  • Production
• Naming Conventions

Overview

Kaiserin storybook is a project based on the Kaiserin design that has been implemented as a library component.

Technologies

• language: Typescript
• framework: React
• lintins: ESlint
• module bundler: Vite
• css framework: Tailwindcss
• storybook: Storybook

Folder Structuring

in this project we follow the folder structuring based on component categories

note: for more information about component categories please visit full-documentation

.
└── src/
    ├── components/
    │   ├── Input/
    │   │   └── Button/
    │   │       ├── story/
    │   │       │   ├── button.stories.tsx
    │   │       │   └── template.tsx
    │   │       ├── prototype/
    │   │       │   └── buttonProto.ts
    │   │       ├── button.tsx
    │   │       └── style.ts
    │   └── Surface/
    │       └── app-bar/
    │           ├── story/
    │           │   ├── AppBar.stories.tsx
    │           │   └── template
    │           ├── prototype/
    │           │   └── appBarProto.ts
    │           ├── AppBar.tsx
    │           └── AppBar.module.css
    └── utils/
        ├── assets/
        │   └── icons
        ├── configs
        ├── helpers
        └── static-data

Getting Started Storybook

you can start storybook of the library project in two ways: running simple, running with Docker

Development

 yarn dev | npm run dev

Production

Build and Run with Docker

  docker-compose -f docker-compose.yml up [-d] [--build] [--foce-recreate]

naming convetions:

1. all folders follow the kebab-case convention for naming.
2. all files follow the camelCase convention for naming.
3. all variables and functions follow the camelCase convention for naming.