Merge pull request repath-project#1 from mfoulks3200/mfoulks/wip

Migrated to storybook docs

Author: mfoulks3200

.gitignore

@@ -9,17 +9,13 @@
 
 # production
 /dist
-/docs/dist
+/storybook-static
 
 # misc
 .DS_Store
 
-# umi
-.umi
-.umi-production
-.umi-test
-.env.local
-
 # ide
 /.vscode
 /.idea
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,66 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          // Replaces existing CSS rules to support CSS Modules
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: {
+                  modules: {
+                    localIdentName: '[name]__[local]--[hash:base64:5]',
+                  },
+                },
+              },
+            ],
+          },
+          {
+            test: /\.less$/i,
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: {
+                  sourceMap: true,
+                  modules: {
+                    localIdentName: '[name]__[local]--[hash:base64:5]',
+                  },
+                },
+              },
+              'less-loader',
+            ],
+          },
+        ],
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  webpackFinal: async (config) => {
+    config.resolve!.alias = {
+      ...config.resolve!.alias,
+      '@/*': path.resolve(__dirname, '../src/*'),
+    };
+
+    config.resolve?.extensions?.push('.less', '.css');
+
+    return config;
+  },
+};
+export default config;

.storybook/preview.ts

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

README.md

@@ -1,10 +1,10 @@
 # React Timeline Editor
-[![npm version](https://img.shields.io/npm/v/@xzdarcy/react-timeline-editor.svg?style=flat-square)](https://www.npmjs.com/package/@xzdarcy/react-timeline-editor)
-[![npm downloads](https://img.shields.io/npm/dm/@xzdarcy/react-timeline-editor.svg?style=flat-square)](https://www.npmjs.com/package/@xzdarcy/react-timeline-editor)
+[![npm version](https://img.shields.io/npm/v/@mfoulks3200/react-timeline-editor.svg?style=flat-square)](https://www.npmjs.com/package/@mfoulks3200/react-timeline-editor)
+[![npm downloads](https://img.shields.io/npm/dm/@mfoulks3200/react-timeline-editor.svg?style=flat-square)](https://www.npmjs.com/package/@mfoulks3200/react-timeline-editor)
 
-**[React Timeline Editor](https://zdarcy.com/)** is a react component used to quickly build a timeline animation editor.
+**[React Timeline Editor](https://react-timeline-editor-docs.vercel.app/)** is a react component used to quickly build a timeline animation editor.
 
-![example](https://github.com/xzdarcy/react-timeline-editor/blob/f79d85eee8a723e5210c04232daf2c51888418c0/public/assets/timeline.gif)
+![example](https://github.com/mfoulks3200/react-timeline-editor/blob/f79d85eee8a723e5210c04232daf2c51888418c0/public/assets/timeline.gif)
 ## Getting Started
 
 ```bash
@@ -60,5 +60,7 @@ const TimelineEditor = () => {
 ```
 
 ## Documention
-Checkout the [Docs](https://zdarcy.com/) for a demonstration of some basic and advanced features.
+Checkout the [Docs](https://react-timeline-editor-docs.vercel.app/) for a demonstration of some basic and advanced features.
 
+## Attribution
+This project is a fork of the awesome original package [@xzdarcy/react-timeline-editor](https://github.com/xzdarcy/react-timeline-editor).