feat: 包装成React组件

.gitignore

@@ -1,3 +1,5 @@
 .DS_Store
 bower_components/
 node_modules/
+*.log
+dist

.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  "stories": [
+    "../stories/*.stories.mdx",
+    "../stories/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ]
+}

.storybook/preview.js

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

README.md

@@ -1,13 +1,17 @@
-### Chrome Tabs in Chrome
+# React Chrome Tabs
 
-Exactly what you think this is. Go wild.
+## Usage
 
-Drag-and-drop support provided by [Draggabilly](https://github.com/desandro/draggabilly) by @desandro.
+```js
+import ChromeTabs from "@pansinm/react-chrome-tabs";
 
-### [Live demo](http://adamschwartz.co/chrome-tabs/)
-
-<img width=714 src=http://adamschwartz.co/chrome-tabs/chrome-tabs.gif>
-
-<br>
-
-[Older versions](older-versions.md)
+function YourComponent() {
+  const [tabs, setTabs] = useState({ id: "id", title: "title" });
+  return <ChromeTabs onChange={(newTabs, reason) => {
+      if (reason.type === 'close') {
+          // ...
+      }
+      setTabs(newTabs);
+  }}>
+}
+```

index.html

@@ -122,7 +122,7 @@
 
       el.addEventListener('activeTabChange', ({ detail }) => console.log('Active tab changed', detail.tabEl))
       el.addEventListener('tabAdd', ({ detail }) => console.log('Tab added', detail.tabEl))
-      el.addEventListener('tabRemove', ({ detail }) => console.log('Tab removed', detail.tabEl))
+      el.addEventListener('tabRemove', ({ detail }) => console.log('Tab removed', detail))
 
       document.querySelector('button[data-add-tab]').addEventListener('click', _ => {
         chromeTabs.addTab({

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "chrome-tabs",
-  "version": "5.4.0",
+  "name": "@pansinm/react-chrome-tabs",
+  "version": "1.0.0",
   "description": "Chrome-style tabs in HTML/CSS/JS",
-  "main": "js/chrome-tabs.js",
+  "main": "dist/index.js",
   "files": [
     "README.md",
-    "js/chrome-tabs.js",
+    "dist/*",
     "css/*.css"
   ],
   "repository": {
@@ -24,6 +24,23 @@
   },
   "homepage": "https://github.com/adamschwartz/chrome-tabs#readme",
   "dependencies": {
-    "draggabilly": "2.2.0"
+    "draggabilly": "2.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "typescript": "^4.2.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.3",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/react": "^6.2.9",
+    "@types/draggabilly": "^2.1.2",
+    "@types/react": "^17.0.8",
+    "babel-loader": "^8.2.2"
+  },
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   }
 }