feat: added storybook support

Author: Sly777

.hayde.json

@@ -22,6 +22,7 @@
         "propList": ["testProp", "testProp2"]
       }
     },
+    "storybook",
     "materialUI",
     {
       "name": "chakraUI",

src/features/storybook/index.ts

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  PluginInitParams,
+  PluginInitReturn,
+  PluginRunParams,
+  PluginRunReturn,
+} from "../../creatorSettings/creatorSettings.type";
+import { IPluginOptions, ISettings, OutAnswers } from "./interfaces";
+import inquirer from "inquirer";
+import { questions } from "./questions";
+import { compileTemplate } from "@/internalFeatures/templatesLibrary";
+import { createFile } from "@/internalFeatures/fsLibrary";
+
+export { questions } from "./questions";
+export { defaultSettings } from "./interfaces";
+
+export const pluginName = "storybook";
+
+export async function initPlugin({
+  options,
+  globalOptions,
+}: PluginInitParams<IPluginOptions>): Promise<
+  PluginInitReturn<IPluginOptions>
+> {
+  const answers = (await inquirer.prompt(
+    questions,
+    options
+  )) as Required<ISettings>;
+
+  return {
+    answers,
+  };
+}
+
+export async function runPlugin({
+  pluginSettings,
+  globalSettings,
+  allAnswers,
+}: PluginRunParams<ISettings, OutAnswers>): Promise<PluginRunReturn> {
+  const answers = allAnswers.storybook?.answers as Required<ISettings>;
+  const cssContent = await compileTemplate(
+    answers.templateName,
+    answers.templateFolder,
+    globalSettings,
+    allAnswers
+  );
+
+  createFile(allAnswers, `.stories.tsx`, cssContent);
+}

src/features/storybook/interfaces.ts

@@ -0,0 +1,19 @@
+import { PluginInitReturn } from "@/creatorSettings/creatorSettings.type";
+
+export interface IPluginOptions {
+  storybookSupport?: boolean;
+}
+
+export interface ISettings extends IPluginOptions {
+  templateName: string;
+  templateFolder: string;
+}
+
+export type OutAnswers = {
+  storybook: PluginInitReturn<ISettings>;
+};
+
+export const defaultSettings: ISettings = {
+  templateName: "main",
+  templateFolder: "storybook",
+};

src/features/storybook/questions.ts

@@ -0,0 +1,4 @@
+import { Question } from "inquirer";
+// import { IPluginOptions } from "./interfaces";
+
+export const questions: Question[] = [];

src/features/storybook/readme.md

@@ -0,0 +1,26 @@
+## Storybook module
+
+### Usage
+
+Please create a new json file called `.hayde.json` in your project root. This file will be used to configure the Hayde.
+
+And then add `storybook` to the plugins array.
+
+```json
+{
+  "plugins": [
+    "general",
+    "storybook",
+    "reactJS",
+    "materialUI",
+    "chakraUI"
+  ]
+}
+```
+
+### Options
+
+| Option         | Description | Default   | Type   |
+| -------------- | ----------- | --------- | ------ |
+| templateName   | -           | cssModule | string |
+| templateFolder | -           | css       | string |

templates/storybook/main.hbs

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {{ general.answers.componentName }} from "./{{ general.answers.componentName }}";
+
+const meta: Meta<typeof {{ general.answers.componentName }}> = {
+  component: {{ general.answers.componentName }},
+};
+
+export default meta;
+type Story = StoryObj<typeof {{ general.answers.componentName }}>;
+
+export const General: Story = {
+  render: () => <{{ general.answers.componentName }} />,
+};