I’ve received HTML pages from a design company to integrate into my Angular application.
These pages are structured with assets located in an app_files directory. I need to showcase them in Storybook. Typically, Storybook looks for *.stories.ts files, but my files are pure HTML.
I prefer not to modify these HTML files directly to maintain compatibility with updates from the design company. How can I serve these HTML pages in Storybook?
Do I need to create a separate stories file for each HTML page, or is there a more efficient approach?
Code and structure:
project-root/
│
├── .storybook/
│ └── main.js
│
├── src/
│ ├── app/
│ │ ├── components/
│ │ │ ├── ...
│ │ │ ├── foo.component.ts
│ │ │ └── ...
│ │ └── ...
│ │
│ └── htmls/
│ ├── ...
│ ├── app_files/
│ │ ├── css/
│ │ │ ├── normalize.min.css
│ │ │ ├── base.css
│ │ │ └── style.css
│ │ ├── svg/
│ │ ├── img/
│ │ ├── fonts/
│ │ └── ...
│ │
│ ├── homepage.html
│ ├── page1.html
│ └── ...
│
└── ...
Sample HTML structure (e.g., homepage.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>APP cheatsheet</title>
<link rel="stylesheet" href="app_files/css/normalize.min.css">
<link rel="stylesheet" href="app_files/css/base.css">
<link rel="stylesheet" href="app_files/css/style.css">
</head>
<body>
<main class="container-bg" style="background-image: none;">
..........
</main>
</body>
</html>