Merge pull request #117 from icaldana/release/0.0.21

Release/0.0.21

.gitignore

@@ -3,4 +3,5 @@ dist
 build
 coverage
 .DS_Store
-./package-lock.json
+./package-lock.json
+/.storybook/stories

.pre-commit-config.yaml

@@ -7,7 +7,7 @@ repos:
       - id: post_commit_hook
         stages: [post-commit]
   - repo: https://github.com/melisource/fury_datasec-git-hooks
-    rev: 1.2.0
+    rev: 1.2.2
     hooks:
       - id: pre_commit_hook
         stages: [commit]

.storybook/generate-stories.js

@@ -0,0 +1,59 @@
+const fs = require('fs');
+const path = require('path');
+
+const examplesDir = path.join(__dirname, '../examples');
+const storiesDir = path.join(__dirname, './stories');
+
+if (!fs.existsSync(storiesDir)) {
+  fs.mkdirSync(storiesDir, { recursive: true });
+}
+
+const storyTemplate = (componentPath, storyTitle, exportName) => `
+  import React, { useEffect, useState } from 'react';
+  import { Meta, StoryFn } from '@storybook/react';
+
+  const ExampleComponent = ({ file }) => {
+    const [component, setComponent] = useState<React.ReactElement | null>(null);
+    console.log('Loading component', \`../../examples/\${file}\`);
+
+    useEffect(() => {
+      
+      import(\`../../examples/\${file}\`).then(({ default: App }) => {
+        setComponent(
+          <React.StrictMode>
+            <App />
+          </React.StrictMode>
+        );
+      });
+    }, [file]);
+
+    return component;
+  };
+
+  export default {
+    title: '${storyTitle}',
+    component: ExampleComponent,
+  } as Meta;
+
+  export const ${exportName}: StoryFn = () => <ExampleComponent file="${componentPath}" />;
+`;
+
+const processDirectory = (currentDir) => {
+  fs.readdirSync(currentDir, { withFileTypes: true }).forEach((entry) => {
+    const fullPath = path.join(currentDir, entry.name);
+    if (entry.isDirectory()) {
+      processDirectory(fullPath);
+    } else if (entry.isFile() && fullPath.includes('/bricks/')) {
+      const relativePath = path.relative(examplesDir, fullPath).replace(/\\/g, '/');
+      const storyName = path.basename(entry.name, '.tsx').replace(/^\d+-|-/g, '');
+      const storyFileName = `${relativePath.split('/')[1]}-${storyName}.stories.tsx`;
+      const storyPath = path.join(storiesDir, storyFileName);
+      const storyTitle = relativePath.substring(0, relativePath.lastIndexOf('/'));
+
+      const storyContent = storyTemplate(relativePath, storyTitle, storyName);
+      fs.writeFileSync(storyPath, storyContent.trim());
+    }
+  });
+};
+
+processDirectory(examplesDir);

.storybook/main.ts

@@ -1,10 +1,14 @@
 module.exports = {
-  stories: ['./examples.stories.tsx'],
-  features: {
-    storyStoreV7: false,
-  },
+  stories: ['./stories/**/*.stories.tsx'],
+  addons: ['@storybook/addon-webpack5-compiler-babel'],
+  features: {},
+
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };

.storybook/preview.ts

@@ -1,5 +1,5 @@
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
+  actions: {},
   controls: {
     matchers: {
       color: /(background|color)$/i,