@thaddeusjiang/react-sortable-list - npm Package Compare versions

Comparing version 0.0.5 to 0.1.0

dist/index.d.ts

@@ -1,3 +0,3 @@
-import { SortableItem } from './components/SortableList/SortableItem';
-import { SortableList, SortableItemProps, ItemRenderProps, ChildrenProps } from './components/SortableList/SortableList';
+import { SortableItem } from './components/SortableItem';
+import { SortableList, SortableItemProps, ItemRenderProps, ChildrenProps } from './components/SortableList';
 export { SortableList, SortableItem, SortableItemProps, ItemRenderProps, ChildrenProps, };

package.json

 {
   "name": "@thaddeusjiang/react-sortable-list",
   "author": "Thaddeus Jiang",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
+  "module": "dist/react-sortable-list.esm.js",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "start": "tsdx watch",
-    "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
-    "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "build-tailwind": "NODE_ENV=production npx tailwindcss -o ./dist/index.css --minify",
+    "build": "tsdx build && yarn build-tailwind",
+    "prepare": "yarn build"
   },
@@ -37,3 +38,2 @@ "peerDependencies": {
   },
-  "module": "dist/react-sortable-list.esm.js",
   "size-limit": [
@@ -40,0 +40,0 @@ {

README.md

@@ -1,26 +0,11 @@
-<h1 align="center">@thaddeusjiang/react-sortable-list 👋</h1>
-<p>
-  <a href="https://www.npmjs.com/package/@thaddeusjiang/react-sortable-list" target="_blank">
-    <img alt="Version" src="https://img.shields.io/npm/v/@thaddeusjiang/react-sortable-list.svg">
-  </a>
-  <a href="https://github.com/ThaddeusJiang/react-sortable-list#readme" target="_blank">
-    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
-  </a>
-  <a href="https://github.com/ThaddeusJiang/react-sortable-list/graphs/commit-activity" target="_blank">
-    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" />
-  </a>
-  <a href="https://github.com/ThaddeusJiang/react-sortable-list/blob/main/LICENSE" target="_blank">
-    <img alt="License: MIT" src="https://img.shields.io/github/license/ThaddeusJiang/react-sortable-list" />
-  </a>
-  <a href="https://twitter.com/ThaddeusJiang" target="_blank">
-    <img alt="Twitter: ThaddeusJiang" src="https://img.shields.io/twitter/follow/ThaddeusJiang.svg?style=social" />
-  </a>
-</p>
+# Welcome to @thaddeusjiang/react-sortable-list 👋
 
-> You should focus the `features` of your app, not DnD boilerplate.
+You should focus the `features` of your app, not DnD boilerplate.
 
-### 🏠 [Homepage](https://github.com/ThaddeusJiang/react-sortable-list#readme)
+[![Version](https://img.shields.io/npm/v/@thaddeusjiang/react-sortable-list.svg)](https://www.npmjs.com/package/@thaddeusjiang/react-sortable-list)
+[![Documentation](https://img.shields.io/badge/documentation-yes-brightgreen.svg)](https://github.com/thaddeusjiang/react-sortable-list#readme)
+[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/thaddeusjiang/react-sortable-list/graphs/commit-activity)
+[![License: MIT](https://img.shields.io/github/license/thaddeusjiang/react-sortable-list)](https://github.com/thaddeusjiang/react-sortable-list/blob/dev/LICENSE)
+[![Twitter: ThaddeusJiang](https://img.shields.io/twitter/follow/ThaddeusJiang.svg?style=social)](https://twitter.com/ThaddeusJiang)
 
-### ✨ [Demo](https://main--6255853aaf9d91003a12d67f.chromatic.com/)
-
 ## Features
@@ -33,2 +18,4 @@
 
+### 🏠 [Homepage](https://github.com/ThaddeusJiang/react-sortable-list#readme)
+
 ## Install
@@ -42,2 +29,40 @@
 
+## Usage
+
+if you don't use [Tailwind CSS](https://tailwindcss.com/)
+
+```ts
+import { SortableList } from '@thaddeusjiang/react-sortable-list';
+import '@thaddeusjiang/react-sortable-list/dist/index.css';
+
+<SortableList ... />
+```
+
+if you use [Tailwind CSS](https://tailwindcss.com/)
+
+```ts
+import { SortableList } from '@thaddeusjiang/react-sortable-list';
+
+<SortableList ...>
+```
+
+modify tailwind.config.js
+
+```diff
+// tailwind.config.js
++ const path = require("path");
+
+module.exports = {
+  content: [
+    "./src/**/*{js,ts,jsx,tsx}",
++    path.join(
++      require.resolve("@thaddeusjiang/react-sortable-list"),
++      "../**/*.{js,ts,jsx,tsx}"
++    ),
+  ],
+  theme: {},
+  plugins: [],
+};
+```
+
 ### Use Case 1: ItemRender
@@ -180,2 +205,3 @@
 ## Development
+
 ### Storybook
@@ -189,3 +215,2 @@
 
-
 ### Example
@@ -214,5 +239,5 @@
 
-* Website: https://thaddeusjiang.com/
-* Twitter: [@ThaddeusJiang](https://twitter.com/ThaddeusJiang)
-* Github: [@ThaddeusJiang](https://github.com/ThaddeusJiang)
+- Website: https://thaddeusjiang.com/
+- Twitter: [@ThaddeusJiang](https://twitter.com/ThaddeusJiang)
+- Github: [@ThaddeusJiang](https://github.com/ThaddeusJiang)
 
@@ -232,3 +257,4 @@ ## 🤝 Contributing
 
-***
-_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
+---
+
+_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

Fixed alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41472

increased by6.26%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

255

increased by11.84%

Worsened metrics

Number of package files

14

decreased by-12.5%

Lines of code

190

decreased by-40.25%

No dependency changes