feat:Improvised component and added relevant templates (#11) (#12)

* Updated test files, storybook, readme and some code refactoring (#11)

* Renamed few functions and variables

* Updated storybook readme and test files

* Updated the codesandbox link and email

* Formatted the files and readme changes

* Added pull request template and style guidelines

* Added version and prettier config in package.json

* Fixed bug in the initial width calculation

* fix: package version change

Author: anjuca154

.eslintrc

@@ -15,7 +15,8 @@
   "plugins": [
     "@typescript-eslint",
     "react",
-    "react-hooks"
+    "react-hooks",
+    "import"
   ],
   "rules": {
     "no-console": "warn",
@@ -32,7 +33,21 @@
     "prefer-spread": ["off"],
     "react-hooks/exhaustive-deps": "off",
     "arrow-parens": "error",
-    "arrow-spacing": "error"
+    "arrow-spacing": "error",
+    "sort-imports": ["error", {"ignoreCase": true, "ignoreDeclarationSort": true}],
+    "import/order": [
+    "error", 
+    { "groups": 
+      [
+        "external",
+        "builtin",
+        "internal",
+        "parent",
+        "sibling",
+        "index"
+      ]
+    } 
+  ]
   },
   "settings": {
     "react": {

.gitignore

@@ -8,6 +8,7 @@ node_modules
 build
 dist
 .rpt2_cache
+coverage
 
 # misc
 .DS_Store

CODE_OF_CONDUCT.md

@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [email protected]. All
+reported by contacting the project team at [email protected]. All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.

PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,76 @@
+<!-- Thank you for contributing to @keyvaluesystems/react-dot-matrix-chart! -->
+<!-- Before submitting a pull request, please review our contributing guidelines. -->
+
+​
+
+## Pull Request Checklist
+
+​
+
+- [ ] **Read the contributing guidelines.**
+- [ ] **Linked to an issue:** Fixes # (replace with the issue number, if applicable)
+- [ ] **Branch is up-to-date with the base branch:** `main`
+- [ ] **Changes pass tests locally:** `npm test` or `yarn test`
+- [ ] **Documentation has been updated, if necessary**
+- [ ] **Code follows the style guide of the project**
+      ​
+
+## Description
+
+​
+
+<!-- Provide a brief description of your changes. -->
+
+​
+
+## Screenshots (if applicable)
+
+​
+
+<!-- Add screenshots or GIFs to help explain your changes. -->
+
+​
+
+## Additional Notes
+
+​
+
+<!-- Any additional information you want to provide that is not covered by the checklist or description. -->
+
+​
+
+## Related Issues or PRs
+
+​
+
+<!-- If your pull request is related to any issue(s) or other pull request(s), mention them here. -->
+
+​
+
+## Reviewer Guidelines
+
+​
+
+<!-- Suggest specific areas of the codebase that you would like the reviewer to focus on. -->
+
+​
+
+## Testing Instructions
+
+​
+
+<!-- Provide step-by-step instructions on how to test your changes. -->
+
+​
+
+## Checklist for Reviewers
+
+​
+
+- [ ] Code follows project conventions and style
+- [ ] Changes do not introduce new warnings or errors
+- [ ] Unit tests cover the changes
+- [ ] Documentation is updated
+      ​
+
+## By submitting this pull request, I confirm that my contribution is made under the terms of the MIT License.

README.md

@@ -1,7 +1,3 @@
-
-  
-  
-
 # React Dot Matrix Chart
 
 <a href="https://www.npmjs.com/package/@keyvaluesystems/react-dot-matrix-chart"><img src="https://badgen.net/npm/v/@keyvaluesystems/react-dot-matrix-chart?color=blue" alt="npm version"></a> <a href="https://www.npmjs.com/package/@keyvaluesystems/react-dot-matrix-chart" ><img src="https://img.shields.io/npm/dw/@keyvaluesystems/react-dot-matrix-chart?label=Downloads" /></a> <a href="https://github.com/KeyValueSoftwareSystems/react-dot-matrix-chart"><img src="https://github.com/KeyValueSoftwareSystems/react-dot-matrix-chart/actions/workflows/deploy.yml/badge.svg" alt="" /></a>
@@ -10,10 +6,9 @@
 <img src="./screenshot.png" alt="" width="573" height="199"/>
 </div>
 
- 
->A customizable ready to use Dot Matrix Chart Component for React
+> A customizable ready to use Dot Matrix Chart Component for React
 
-Try tweaking a dot matrix using this codesandbox link <a href="https://codesandbox.io/s/dot-matrix-chart-hqw9z0" >here</a>
+Try tweaking a dot matrix using this codesandbox link <a href="https://codesandbox.io/s/dot-matrix-chart-996cd3" >here</a>
 
 ## Installation
 
@@ -25,85 +20,64 @@ npm install @keyvaluesystems/react-dot-matrix-chart
 
 You’ll need to install React separately since it isn't included in the package.
 
-  
-
 ## Usage
 
-  
-
 React Dot Matrix Chart can run in a very basic mode by just providing the `dataPoints` like given below:
 
 ```jsx
+import DotMatrix from "@keyvaluesystems/react-dot-matrix-chart";
 
-import DotMatrix from '@keyvaluesystems/react-dot-matrix-chart';
-
-<DotMatrix
-  dataPoints={dataPointsArray}
-/>
-
+<DotMatrix dataPoints={dataPointsArray} />;
 ```
 
 The datapoints is an array of objects with the following keys:
 
--  `name` - a string that represents each category
--  `count` - a number to specify the count of each category present(used to find the number of dots to be displayed)
--  `color` - a string to specify which colour to be used to represent the category in the dot matrix
-
-  
+- `name` - a string that represents each category
+- `count` - a number to specify the count of each category present(used to find the number of dots to be displayed)
+- `color` - a string to specify which colour to be used to represent the category in the dot matrix
 
 An example for dataPoints array is shown below:
 
 ```jsx
 const dataPointsArray = [
   {
-    name: 'Category 1',
+    name: "Category 1",
     count: 10,
-    color: 'gray'
+    color: "gray"
   },
   {
-    name: 'Category 2',
+    name: "Category 2",
     count: 10,
-    color: 'black'
+    color: "black"
   },
   {
-    name: 'Category 3',
+    name: "Category 3",
     count: 10,
-    color: 'green'
+    color: "green"
   }
 ];
-
 ```
 
 You can specify the number of rows or columns to be present in the chart as well using the dimensions prop.
 
 ```jsx
 <DotMatrix
   dataPoints={dataPointsArray}
-  dimensions={
+  dimensions={{
     rows: 5,
     columns: 10
-  }
+  }}
 />
 ```
 
 If the count given in the dataPoints array results in a partial percentage (decimal value), a gradient dot will be displayed as shown below
+
 <div  align="center">
 <img  src="./screenshotPartial.png"  alt=""  width="208"  height="199"/>
 </div>
 
-We can also control the display of the legend consisting of the details regarding the colour distribution using the props 'showLegend' and 'legendPosition' as follows.
-
-```jsx
-<DotMatrix
-  dataPoints={dataPointsArray}
-  showLegend={true}
-  legendPosition="top"
-/>
-```
 ## Props
 
-  
-
 Props that can be passed to the component are listed below:
 
 <table>
@@ -130,11 +104,11 @@ Props that can be passed to the component are listed below:
       <td><code>{ rows: 5, columns: 12 }</code></td>
     </tr>
     <tr>
-      <td><code><b>styles?:</b> object</code></td>
+      <td><code><b>spaceBetweenDots?:</b> number</code></td>
       <td>
-      Provides you with a bunch of callback functions to override the default styles.
+         To specify the distance between each dot
       </td>
-      <td><code>undefined</code></td>
+      <td><code>4</code></td>
     </tr>
     <tr>
       <td><code><b>showLegend?:</b> boolean</code></td>
@@ -144,16 +118,22 @@ Props that can be passed to the component are listed below:
       <td><code>false</code></td>
     </tr>
     <tr>
-      <td><code><b>legendPosition?:</b> string</code></td>
+      <td><code><b>legendPosition?:</b> 'left' | 'left-start' | 'left-end | 'right' | 'right-start' | 'right-end' | 'top'| 'top-start' | 'top-bottom' | 'bottom' | 'bottom-start' | 'bottom-end' </code></td>
       <td>
-        To specify the position of the legend. The values that can be passed using this prop are 'left', 'right', 'top' and 'bottom'
+        To specify the position of the legend.
       </td>
-      <td><code>right</code></td>
+      <td><code>right-end</code></td>
+    </tr>
+      <tr>
+      <td><code><b>styles?:</b> object</code></td>
+      <td>
+      Provides you with a bunch of callback functions to override the default styles.
+      </td>
+      <td><code>undefined</code></td>
     </tr>
   </tbody>
 </table>
 
-
 ## Style Customizations
 
 All the default styles provided by this package are overridable using the `styles` prop.
@@ -163,20 +143,19 @@ the below code shows all the overridable styles:
 <DotMatrix
   dataPoints={dataPointsArray}
   styles={{
-    Container: () => ({...styles}),
-    DotsContainer: () => ({...styles}),
-    Dot: () => ({...styles}),
-    LegendContainer: () => ({...styles}),
-    LegendName: () => ({...styles}),
-    LegendDot: () => ({...styles})
+    Container: () => ({ ...styles }),
+    DotsContainer: () => ({ ...styles }),
+    Dot: () => ({ ...styles }),
+    LegendContainer: () => ({ ...styles }),
+    LegendName: () => ({ ...styles }),
+    LegendDot: () => ({ ...styles })
   }}
 />
-
 ```
 
--  `Container` - overrides the dot matrix chart container style
--  `DotsContainer` - overrides the dot matrix chart dots container style
--  `Dot` - overrides the style of each dot in the chart
--  `LegendContainer` - overrides the legend (details) container style
--  `LegendName` - overrides the legend name style
--  `LegendDot` - overrides the legend dot style
+- `Container` - overrides the dot matrix chart container style
+- `DotsContainer` - overrides the dot matrix chart dots container style
+- `Dot` - overrides the style of each dot in the chart
+- `LegendContainer` - overrides the legend (details) container style
+- `LegendName` - overrides the legend name style
+- `LegendDot` - overrides the legend dot style

STYLE_GUIDELINES.md

@@ -0,0 +1,23 @@
+## SCSS Style Guidelines for @keyvaluesystems/react-dot-matrix-chart
+
+**Introduction**
+
+As an open-source project utilizing SCSS, @keyvaluesystems/react-dot-matrix-chart strives to maintain a consistent and well-structured codebase. These SCSS style guidelines serve as a reference for contributors, ensuring that their SCSS code adheres to established conventions and best practices.
+
+**SCSS Coding Conventions**
+
+- Organize SCSS files into a logical structure.
+- Use meaningful and descriptive names for variables, mixins, and classes.
+- Use SCSS nesting judiciously to organize complex styles.
+- Include comments to explain non-obvious logic and complex styles.
+- Utilize SCSS variables to define reusable values.
+- Employ a SCSS linting tool.
+- Should support devices with all resolutions.
+- Follow CamelCase conventions for class names that concisely convey their purpose, enhancing code organization and readability.
+- Adhere to the practice of reusing style classes to improve code organization and maintainability.
+
+**Documentation Practices**
+
+- Provide clear documentation for exported mixins and variables.
+- Include a README file within the SCSS directory if necessary.
+- Add comments to SCSS files.

package-lock.json

@@ -77,7 +77,6 @@
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.5",
     "url-loader": "^4.1.1",
-    "uuid": "^9.0.0",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "4.11.1",
@@ -92,6 +91,9 @@
   "eslintConfig": {
     "extends": "./.eslintrc.json"
   },
+  "prettier": {
+    "trailingComma": "none"
+  },
   "jest": {
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/scripts/testMock.js",