Merge pull request #5 from realvjy/dev

From Dev Branch

.github/workflows/coolshapes.js.yml

@@ -0,0 +1,23 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "dev" ]
+  pull_request:
+    branches: [ "dev" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x, 21.x]
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm test

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 0.0.6-alpha.0
+- Add number type shapes, Total count 115
+- Change the index to start from 0
 ## 0.0.5-alpha.1
 - Add more shapes. Total count 105
 - Fix noise toggle
@@ -15,6 +18,7 @@
 - Added 90+ shapes from different categories
 `Coolshape`, `Ellipse`, `Flower`, `Misc`, `Moon`, `Polygon`, `Rectangle`, `Star`, `Triangle`
 
+
 ## 0.0.3
 
 - `[email protected]`

README.md

@@ -35,9 +35,6 @@ Implementation of the coolshapes icon library for react applications.
 
 ## How to use
 
-It's built with ES modules so it's completely tree-shakable.
-Each icon can be imported as a react component.
-
 
 Implementation of the coolshapes icon library for web applications.
 
@@ -52,46 +49,148 @@ yarn add coolshapes-react
 ```
 ### Example
 
-You can pass additional props to adjust the icon.
+There's a global component and component for each category of shapes. You can pass additional props to adjust the shape. These components extend from SVG elements, so they support all the props available in a SVG element.
 
 ```js
 import { Coolshape } from 'coolshapes-react';
 
 const App = () => {
-  return <Coolshape type="star" size={48} noise={true} />;
+  return <Coolshape type="star" index={0} size={48} noise={true} />;
 };
 
 export default App;
 ```
 
+You can import the component for specific category and simply pass the index of the shape.
 ```js
-import { Star, Ellipse } from 'coolshapes-react';
+import { Star } from 'coolshapes-react';
 
 const App = () => {
-  return <Star index="1" size={48} noise={true} />;
+  return <Star index={0} size={48} />;
 };
 
 export default App;
 ```
+#### Generating random shapes.
+ setting the `random` [prop](#props)  to true or leaving the `index` or `type` prop empty would replace the shape with a random shape every time it renders.
+```js
+// renders a random shape from any category
+const Component = () => {
+  return <Coolshape random={true}/>;
+};
+// renders a shape from the category star
+const Component2 = () => {
+  return <Coolshape type="star" random={true} />;
+};
+```
+
+Using random shape function.
+```js
+import { getRandomShape } from 'coolshapes-react';
+```
+```js
+getRandomShape() // returns a random shape component
+```
+```js
+getRandomShape({type:"ellipse"}) // returns a random shape component from the category ellipse
+```
+```js
+getRandomShape({onlyId: true}) // returns shape identifier that can passed as props to the shape component
+// {shapeType, index}
+```
+```js
+getRandomShape({onlyId: true, type:"star"}) // returns shape identifier that can passed as props to the shape component
+// {shapeType: "star", index}
+```
+
+#### others
+all the components are mapped from object that we have given you access to
+
+```js
+const shapes = {
+  star: [Star1, Star2, ...],
+  ellipse: [Ellipse1, Ellipse2, ...],
+  ...
+}
+```
+
+renders the shapes from all catagories
+```jsx
+import { shapes } from 'coolshapes-react'
+
+const ShapeGrid = () => {
+  return (
+    <>
+      { 
+        Object.keys(shapes).map((shapeType, _) =>{
+        return shapes[shapeType].map((Shape, index)=>{
+          return <Shape size={48}/>
+        })
+      })}
+    </>
+  )
+};
+
+```
+###### syntax
+```js
+shapes[type][index]
+```
+```js
+const starComponents = shapes['star']
+const StarComponent1 = starComponents[0]
+```
 
 ### Props
 
-| name          | data type | default       |
-| ------------- | --------  | ------------- |
-| `size`        | _Number_  | 200           |
-| `type`        | _String_  | currentColor  |
-| `noise`       | _Boolean_ | true          |
-| `index`       | _Number_  | random        |
+| name          | data type | default       | description   |
+| ------------- | --------  | ------------- | ------------- |
+| `size`        | _Number_  | 200           | The dimension of shape   |
+| [`type`](#categories)        | _String_  | random        | The category of shapes, if left empty it would randomly select a category. |
+| `noise`       | _Boolean_ | true          | Whether to add noise to the shape or not. |
+| `index`       | _Number_  | random        | The index of shape within the shape [category](#categories), it will randomly select a shape from the category if type prop given  |
+| `random`     | _Boolean_ | false          | If set true it would select a random component |
 
+Notes:
+- Index starts from number 0, so if you want to retrive the first shape of any category, you would use the index number 0.
 
-### Props Value
+### Categories
 
-If using 
-```html
-<Coolshape type={star} index={1} size={48} noise={true} />
+| type          | shapes    |
+| ------------- | --------  |
+| `star`        | 12        |  
+| `ellipse`     | 12        |  
+
+
+### others
+we have have provide the `cjs`, `umd` and `es` build versions of the module,
+
+#### cjs
+
+```js
+const Coolshapes = reqiore("coolshapes-react")
 ```
-| type          | index    |   default      |
-| ------------- | -------- |  ------------- |
-| `star`        | 1,2,..4  |  random        |
-| `ellipse`     | 1,2,..12 |  random        |
+using with react in the browser
 
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/umd/coolshapes.js"></script>
+  </head>
+  <body>
+  <div id="root"></div>
+  <script type="text/babel">
+    const domContainer = document.querySelector('#root');
+    const root = ReactDOM.createRoot(domContainer);
+    const coolshapes = window.coolshapes;
+    const Coolshape = coolshapes.Coolshape;
+    root.render(<Coolshape/>);
+  </script>
+  </body>
+</html>
+```

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js"></script>
+  </head>
+  <body>
+  <div id="root"></div>
+  <script type="text/babel">
+    const domContainer = document.querySelector('#root');
+    const root = ReactDOM.createRoot(domContainer);
+    const coolshapes = window.coolshapes;
+    const Coolshapes = coolshapes.Coolshape;
+    root.render(<Coolshapes/>);
+  </script>
+  </body>
+</html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coolshapes-react",
-  "version": "0.0.5-alpha.1",
+  "version": "0.0.6-alpha.0",
   "description": "A react component library for coolshapes",
   "keywords": [
     "coolshapes",
@@ -15,7 +15,6 @@
   "type": "module",
   "files": [
     "./dist",
-    "!dist/**/*.map",
     "LICENSE",
     "README.md"
   ],
@@ -48,7 +47,7 @@
     "email": "[email protected]"
   },
   "engines": {
-    "node": ">=10"
+    "node": ">=14.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8",

src/__tests__/shape.test.tsx

@@ -6,11 +6,11 @@ import shapes, { componentId, getRandomShape, shapeTypes } from "../shapes";
 import { ShapeType } from "../lib";
 import { Coolshape, Star } from "../lib/shapes";
 
-describe("using every icons from the defined list", async () => {
+describe("using every icons from the defined component list", async () => {
   const shapeTypes = Object.keys(shapes) as Array<shapeTypes>;
   shapeTypes.forEach((type) => {
     shapes[type].forEach((Shape, i) => {
-      const iconId = `${type}-${++i}`;
+      const iconId = `${type}-${type === "number" ? i : ++i}`;
 
       const props = {
         className: "shape",
@@ -21,9 +21,11 @@ describe("using every icons from the defined list", async () => {
         const { getByTestId } = render(<Shape {...props} />);
         const shapeElement = getByTestId(iconId);
         expect(shapeElement).toBeDefined();
+        expect(shapeElement.classList).toContain(iconId);
         expect(
           shapeElement.querySelector(`#cs_noise_1_${iconId}`)
         ).toBeTruthy();
+
       });
       it(`Component is accepting custom class name and sizes `, () => {
         const { getByTestId } = render(<Shape {...props} />);
@@ -59,27 +61,31 @@ describe("using random shape function", () => {
   });
 });
 
-describe("using the component for a shape type", () => {
+describe("using specific shape type components", () => {
   const props = {
     className: "customName",
     size: 20,
     noise: true,
   };
-  it("it should render a valid random component with given information", () => {
-    const testID = "component";
+  it("it should render a valid random component with given props from that shape category", () => {
+    const testID = "shape-component";
     const { getByTestId } = render(<Star data-testid={testID} {...props} />);
     const ShapeComponent = getByTestId(testID);
     expect(ShapeComponent).toBeDefined();
     expect(ShapeComponent.classList).toContain("coolshape");
     expect(ShapeComponent.getAttribute("width")).toBe(props.size.toString());
   });
   it("it should render a exact given component with index", () => {
-    const testID = "component";
+    const testID = "component-index";
     const { getByTestId } = render(
-      <Star data-testid={testID} {...props} index={1} />
+      <Star data-testid={testID} {...props} index={0} />
     );
     const ShapeComponent = getByTestId(testID);
     expect(ShapeComponent).toBeDefined();
+    ShapeComponent.classList.forEach((classs)=>{
+      console.log(classs)
+    })
+    console.log()
     expect(ShapeComponent.classList).toContain("coolshape");
     expect(ShapeComponent.classList).toContain("star-1");
   });
@@ -93,6 +99,9 @@ describe("Using coolshape component with noise prop", () => {
     index,
     type: shapeType,
   };
+  const shouldAdd = shapeType === 'number'? 0 : 1;
+  const shapeId = `${shapeType}-${shouldAdd + index}`
+
   it("If noise is set to true, the noise should be visible ", () => {
     const testID = "coolshape";
     const { getByTestId } = render(
@@ -101,8 +110,9 @@ describe("Using coolshape component with noise prop", () => {
 
     const ShapeComponent = getByTestId(testID);
     expect(ShapeComponent).toBeDefined();
+
     expect(
-      ShapeComponent.querySelector(`#cs_noise_1_${shapeType + "-" + index}`)
+      ShapeComponent.querySelector(`#cs_noise_1_${shapeId}`)
     ).toBeTruthy();
   });
   it("If noise is set to false, the noise should not be visible ", () => {
@@ -114,7 +124,7 @@ describe("Using coolshape component with noise prop", () => {
     expect(ShapeComponent).toBeDefined();
     expect(ShapeComponent.classList).toContain("coolshape");
     expect(
-      ShapeComponent.querySelector(`#cs_noise_1_${shapeType + "-" + index}`)
+      ShapeComponent.querySelector(`#cs_noise_1_${shapeId}`)
     ).toBeFalsy();
   });
 });