feat: add stories test example for Image component (#31)

* feat(SkillsTag): establish component testing architecture based on storybook lib

* refactor: refactor the structure of kawa-ui&kawa-foundation

* feat: info components

* feat: 初步完成技术栈组件，todo把skilltag的api抽到techstack层

* merge :package.json

* feat(SkillsTag): establish component testing architecture based on storybook lib

* refactor: refactor the structure of kawa-ui&kawa-foundation

* feat: info components

* feat: 初步完成技术栈组件，todo把skilltag的api抽到techstack层

* merge :package.json

* fetch and merge from the upstream

* refactor: 迁移kawa-ui至新架构

* chore: 删除init时的无效stories

* feat: 完成skillList组件，teckstack组件

* feat: add storybook test example for Image component

---------

Co-authored-by: dundun003 <[email protected]>

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log

package.json

@@ -21,4 +21,4 @@
       "echo"
     ]
   }
-}
+}

packages/components/.storybook/main.js

@@ -0,0 +1,28 @@
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+};
+export default config;

packages/components/.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/components/package.json

@@ -15,7 +15,9 @@
   ],
   "scripts": {
     "build": "farm build",
-    "clean": "farm clean"
+    "clean": "farm clean",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@farmfe/js-plugin-dts": "^0.6.4",
@@ -24,19 +26,29 @@
     "react-dom": "18"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "3.2.2",
     "@farmfe/cli": "^1.0.2",
     "@farmfe/core": "^1.3.0",
     "@farmfe/plugin-react": "^1.2.0",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-onboarding": "8.4.7",
+    "@storybook/blocks": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/react-vite": "8.4.7",
+    "@storybook/test": "8.4.7",
     "@types/react": "18",
     "@types/react-dom": "18",
     "core-js": "^3.36.1",
-    "react-refresh": "^0.14.0"
+    "prop-types": "15.8.1",
+    "react-refresh": "^0.14.0",
+    "storybook": "8.4.7"
   },
   "exports": {
     ".": {
-        "import": "./dist/index.js",
-        "require": "./dist/index.js",
-        "types": "./dist/index.d.ts"
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     }
   }
 }

packages/components/stories/image.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Image from "../image/Image";
+import type { Meta, StoryFn } from "@storybook/react";
+
+export default {
+  title: "Example/Image",
+  component: Image,
+  argTypes: {
+    onClick: { action: "clicked" },
+  },
+} as Meta;
+
+const Template: StoryFn = (args) => <Image userData={undefined} {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  src: "https://picsum.photos/200/200",
+  alt: "示例图片",
+  width: 200,
+  height: 200,
+  style: { border: "2px solid black" },
+  className: "custom-class",
+  userData: {},
+};
+
+export const WithUserData = Template.bind({});
+WithUserData.args = {
+  src: "xxxxx",
+  alt: "示例图片",
+  width: 200,
+  height: 200,
+  style: { border: "2px solid black" },
+  className: "custom-class",
+  userData: {
+    photoUri: "https://picsum.photos/200/300",
+  },
+};