react-grid-select - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

.storybook/main.js

 module.exports = {
-  "stories": [
+  stories: [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  "addons": [
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials"
-  ]
+  ],
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
 }

.storybook/preview.js

@@ -0,4 +1,8 @@
+import { themes } from '@storybook/theming';
 
+// or global addParameters
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-}
+  docs: {
+    theme: themes.dark,
+  },
+};

package.json

 {
   "name": "react-grid-select",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "./build/index.js",
@@ -52,8 +52,8 @@ "module": "./build/index.es.js",
     "@rollup/plugin-node-resolve": "^11.2.1",
-    "@storybook/addon-actions": "^6.1.21",
-    "@storybook/addon-essentials": "^6.1.21",
-    "@storybook/addon-links": "^6.1.21",
-    "@storybook/addons": "^6.1.21",
-    "@storybook/react": "^6.1.21",
-    "@storybook/theming": "^6.1.21",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/addons": "^6.2.9",
+    "@storybook/react": "^6.2.9",
+    "@storybook/theming": "^6.2.9",
     "@testing-library/jest-dom": "^5.11.4",
@@ -67,3 +67,5 @@ "@testing-library/react": "^11.2.5",
     "jest": "^26.6.3",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
+    "react-docgen-typescript": "^1.22.0",
     "react-dom": "^17.0.2",
@@ -77,6 +79,3 @@ "react-jss": "^10.6.0",
     "typescript": "^4.2.3"
-  },
-  "dependencies": {
-    "lodash": "^4.17.21"
   }
 }

README.md

 # react-grid-select
 
-WIP grid selection component
+A React component to select a grid size from an available space
 
-In order to develop locally, link the component library to the app like below:
-Assuming myapp and mylib are sibling folders, run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.
-https://github.com/HarveyD/react-component-library/issues/33#issuecomment-772388249
+[![version][version-badge]][package] [![Monthly downloads][npmstats-badge]][npmstats] ![gzip size][gzip-badge] [![All Contributors](https://img.shields.io/badge/all_contributors-20-green.svg?style=flat-square)](#contributors) [![Build Status][build-badge]][build-page] [![MIT License][license-badge]][license] [![PRs Welcome][prs-badge]][prs]
+
+## Demo
+
+Check out the examples:
+
+- [Basic example](https://hacksore.github.io/react-grid-select/?path=/story/region-selection--basic-example)
+- [Example with bounds](https://hacksore.github.io/react-grid-select/?path=/story/region-selection--bounds-example)
+- [Example with large grid](https://hacksore.github.io/react-grid-select/?path=/story/region-selection--large-grid)
+
+## Installation
+
+```shell
+yarn add react-grid-select
+```
+
+or
+
+```shell
+npm install react-grid-select
+```
+
+## Basic usage
+
+```js
+import GridSelect from "react-grid-select";
+
+const Demo = () => {
+  const [selectedArea, setSelectedArea] = useState({ width: null, height: null });
+
+  return (
+    <GridSelect
+      cols={5}
+      rows={5}
+      onRegionUpdate={setSelectedArea}
+    />
+  );
+};
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| :- | :- | :- | :- |
+| `rows`  | number  | 5 | The number of rows in the grid  |
+| `cols`  | number  | 5 | The number of columns in the grid  |
+| `onRegionUpdate` | Function | Log to console | Function describing what to do with the selected area information. Probably set this to a state variable |
+| `cellSize` | number | 25 | Size of each grid cell in pixels |
+| `bounds` | `{ maxWidthBlock: { width: number; height: number; }; maxHeightBlock: { width: number; height: number; }; };` | None | Enabled area of the grid. By default the whole grid is enabled |
+| `disabled` | boolean | false | Whether or not the grid is currently disabled. Disabling will pause the grid in it's current state and apply the disabled style |
+| `styles` | object | See below| Custom styles to apply to the grid |
+
+## Styles
+
+All default styles can be overridden by using the styles prop which accepts the below options
+
+| Styles | Defaults |
+| :----- | :----- |
+| active    | `{ border: "1px solid #4d6cdd", background: "#4d6cdd" }` |
+| hover     | `{ border: "1px solid #fff" }`|
+| cell      | `{ width: cellSize, height: cellSize, background: "#bababa", cursor: "pointer", borderRadius: 3, border: "1px solid #bababa" }`|
+| grid      | `{ position: "relative", display: "grid", color: "#444", margin: "25px 0", gridGap: "4px 6px", gridTemplateColumns: Array(cols).fill(`${cellSize}px`).join(" ") }`|
+| disabled  | `{ filter: "brightness(0.7)" }` |
+
+## License
+
+[MIT](https://github.com/ricardo-ch/react-grid-select/blob/master/LICENSE)
+
+[npm]: https://www.npmjs.com/
+[node]: https://nodejs.org
+[version-badge]: https://img.shields.io/npm/v/react-grid-select.svg?style=flat-square
+[package]: https://www.npmjs.com/package/react-grid-select
+[downloads-badge]: https://img.shields.io/npm/dm/react-grid-select.svg?style=flat-square
+[npmstats]: http://npm-stat.com/charts.html?package=react-grid-select&from=2018-06-18
+[npmstats-badge]: https://img.shields.io/npm/dm/react-grid-select.svg?style=flat-square
+[gzip-badge]: http://img.badgesize.io/https://unpkg.com/react-grid-select/umd/react-grid-select.min.js?compression=gzip&style=flat-square&1
+[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
+[license]: https://github.com/ricardo-ch/react-grid-select/blob/master/LICENSE
+[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs]: http://makeapullrequest.com
+[build-badge]: https://circleci.com/gh/ricardo-ch/react-grid-select/tree/master.svg?style=svg
+[build-page]: https://circleci.com/gh/ricardo-ch/react-grid-select/tree/master

No alert changes

Improved metrics

Total package byte prevSize

37453

increased by15.87%

Dependency count

0

decreased by-100%

Lines of code

398

increased by13.07%

Number of lines in readme file

87

increased by1142.86%

Worsened metrics

Dev dependency count

28

increased by7.69%

Dependency changes

• - Removedlodash@^4.17.21

• - Removedlodash@4.17.21(transitive)