upgrade to dndkit v6 (#11)

* chore: 🤖 yarn -> npm

* chore: 🤖 npx storybook@latest upgrade

* chore: 🤖 upgrade @dnd-kit/core ^6

close#6

* chore: 🤖 update example

* ci: 🎡 remove chromatic

close#9

Author: ThaddeusJiang

.github/workflows/chromatic.yml

@@ -3,20 +3,28 @@ module.exports = {
     '../src/**/*.stories.@(ts|tsx|js|jsx)',
     '../stories/**/*.stories.@(ts|tsx|js|jsx)',
   ],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
+
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', {
+    name: '@storybook/addon-postcss',
+    options: {
+      postcssLoaderOptions: {
+        implementation: require('postcss'),
       },
     },
-  ],
+  }, '@storybook/addon-webpack5-compiler-swc', '@chromatic-com/storybook'],
+
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
-    check: true, // type-check stories during Storybook build
+    // type-check stories during Storybook build
+    check: true,
+
+    reactDocgen: 'react-docgen-typescript'
+  },
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
   },
+
+  docs: {}
 };

.github/workflows/size.yml

@@ -5,3 +5,4 @@ export const parameters = {
   // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
   actions: { argTypesRegex: '^on.*' },
 };
+export const tags = ['autodocs'];

.storybook/main.js

@@ -20,7 +20,7 @@ You should focus the `features` of your app, not DnD boilerplate.
 ## Install
 
 ```sh
-yarn add @thaddeusjiang/react-sortable-list
+npm install @thaddeusjiang/react-sortable-list
 ```
 
 ## Usage
@@ -114,7 +114,6 @@ export const ChildrenExample: React.VFC = () => {
 ### Use Case: Custom Drag Handler
 
 ```jsx
-
 const DragHandler = (props) => (
   <div
     {...props}
@@ -165,7 +164,6 @@ export const DragHandlerExample: React.VFC = () => {
     </SortableList>
   );
 };
-
 ```
 
 ### Use Case: Complex Component
@@ -220,7 +218,6 @@ export const ComplexComponentExample: React.VFC = () => {
     </SortableList>
   );
 };
-
 ```
 
 ### Use Case: Horizontal Sortable List
@@ -243,7 +240,6 @@ export const HorizontalExample: React.VFC = () => {
     </div>
   );
 };
-
 ```
 
 ### Optional: disabled Drag and Drop
@@ -277,26 +273,26 @@ export const ItemRenderExample: React.VFC = () => {
 Run inside another terminal:
 
 ```bash
-yarn storybook
+npm run storybook
 ```
 
 ### Example
 
 Then run the example inside another:
 
 ```bash
-yarn link
+npm run link
 
 cd example
-yarn link "@thaddeusjiang/react-sortable-list"
-yarn # or yarn to install dependencies
-yarn start
+npm run link "@thaddeusjiang/react-sortable-list"
+npm install
+npm run start
 ```
 
 ### Run tests
 
 ```sh
-yarn run test
+npm run run test
 ```
 
 ## Author