From 440e5abe7531a68d3140956fd4247940a786e2b3 Mon Sep 17 00:00:00 2001 From: realvjy Date: Wed, 28 Feb 2024 03:31:37 +0530 Subject: [PATCH 1/6] package update --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index f3bee04..34ea16c 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ } ], "license": "MIT", + "license": "MIT", "homepage": "https://www.coolshap.es/", "repository": { "type": "git", From 347decdf20ce791d9e143c859d610efaa838eabd Mon Sep 17 00:00:00 2001 From: Green apple <0xgreenapple@gmail.com> Date: Wed, 27 Mar 2024 23:13:05 +0530 Subject: [PATCH 2/6] change pkg --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 34ea16c..f3bee04 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ } ], "license": "MIT", - "license": "MIT", "homepage": "https://www.coolshap.es/", "repository": { "type": "git", From 0a926b7fc97c61f2d0635b1c8cea43c1df45a1ec Mon Sep 17 00:00:00 2001 From: Green apple <0xgreenapple@gmail.com> Date: Thu, 28 Mar 2024 17:33:18 +0530 Subject: [PATCH 3/6] add number shapes and change index --- CHANGELOG.md | 3 ++ package-lock.json | 4 +- package.json | 2 +- src/__tests__/shape.test.tsx | 28 ++++++++---- src/lib/shapes.tsx | 11 ++++- src/shapes/index.tsx | 22 ++++++++++ src/shapes/numbers/n_0.tsx | 77 +++++++++++++++++++++++++++++++++ src/shapes/numbers/n_1.tsx | 61 +++++++++++++++++++++++++++ src/shapes/numbers/n_2.tsx | 65 ++++++++++++++++++++++++++++ src/shapes/numbers/n_3.tsx | 81 +++++++++++++++++++++++++++++++++++ src/shapes/numbers/n_4.tsx | 73 ++++++++++++++++++++++++++++++++ src/shapes/numbers/n_5.tsx | 68 ++++++++++++++++++++++++++++++ src/shapes/numbers/n_6.tsx | 82 ++++++++++++++++++++++++++++++++++++ src/shapes/numbers/n_7.tsx | 76 +++++++++++++++++++++++++++++++++ src/shapes/numbers/n_8.tsx | 78 ++++++++++++++++++++++++++++++++++ src/shapes/numbers/n_9.tsx | 78 ++++++++++++++++++++++++++++++++++ 16 files changed, 795 insertions(+), 14 deletions(-) create mode 100644 src/shapes/numbers/n_0.tsx create mode 100644 src/shapes/numbers/n_1.tsx create mode 100644 src/shapes/numbers/n_2.tsx create mode 100644 src/shapes/numbers/n_3.tsx create mode 100644 src/shapes/numbers/n_4.tsx create mode 100644 src/shapes/numbers/n_5.tsx create mode 100644 src/shapes/numbers/n_6.tsx create mode 100644 src/shapes/numbers/n_7.tsx create mode 100644 src/shapes/numbers/n_8.tsx create mode 100644 src/shapes/numbers/n_9.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 83fabb8..a28caa1 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 21069dc..b6c947f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coolshapes-react", - "version": "0.0.5-alpha.0", + "version": "0.0.5-alpha.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coolshapes-react", - "version": "0.0.5-alpha.0", + "version": "0.0.5-alpha.1", "license": "MIT", "devDependencies": { "@rollup/plugin-commonjs": "^25.0.7", diff --git a/package.json b/package.json index f3bee04..b451f90 100644 --- a/package.json +++ b/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", diff --git a/src/__tests__/shape.test.tsx b/src/__tests__/shape.test.tsx index f59cb4e..45d189e 100644 --- a/src/__tests__/shape.test.tsx +++ b/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.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(); 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(); @@ -59,14 +61,14 @@ 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(); const ShapeComponent = getByTestId(testID); expect(ShapeComponent).toBeDefined(); @@ -74,12 +76,16 @@ describe("using the component for a shape type", () => { 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( - + ); 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(); }); }); diff --git a/src/lib/shapes.tsx b/src/lib/shapes.tsx index eb23869..e1562db 100644 --- a/src/lib/shapes.tsx +++ b/src/lib/shapes.tsx @@ -19,10 +19,14 @@ interface BaseShapeOptions extends ShapeProps { const Coolshape: ForwardRefExoticComponent = forwardRef( (options, ref) => { const { type, index, random, ...rest } = options; - const initialShape = index && type ? shapes[type][index - 1] : null; + + let initialShape = null; + if (index !== undefined && type){ + initialShape = shapes[type][index] + } const [Shape, setShape] = useState(initialShape); useEffect(() => { - if (random || !type || !index) { + if (random || !type || index === undefined) { const shape = getRandomShape({ type }) as ShapeType; setShape(shape); } @@ -55,6 +59,8 @@ const Moon = getComponentWithShape("moon"); const Triangle = getComponentWithShape("triangle"); const Rectangle = getComponentWithShape("rectangle"); const Polygon = getComponentWithShape("polygon"); +const Number = getComponentWithShape("number"); + export { Coolshape, @@ -66,4 +72,5 @@ export { Triangle, Rectangle, Polygon, + Number }; diff --git a/src/shapes/index.tsx b/src/shapes/index.tsx index 238f1b1..81f534c 100644 --- a/src/shapes/index.tsx +++ b/src/shapes/index.tsx @@ -106,6 +106,16 @@ import { Rectangle9 } from "./rectangles/r_9"; import { Misc11 } from "./miscs/m_11"; import { Ellipse12 } from "./ellipses/e_12"; import { Wheel7 } from "./wheels/w_7"; +import { Number0 } from "./numbers/n_0"; +import { Number1 } from "./numbers/n_1"; +import { Number2 } from "./numbers/n_2"; +import { Number3 } from "./numbers/n_3"; +import { Number4 } from "./numbers/n_4"; +import { Number5 } from "./numbers/n_5"; +import { Number6 } from "./numbers/n_6"; +import { Number7 } from "./numbers/n_7"; +import { Number8 } from "./numbers/n_8"; +import { Number9 } from "./numbers/n_9"; const shapes = { star: [ @@ -223,6 +233,18 @@ const shapes = { Rectangle8, Rectangle9, ], + number: [ + Number0, + Number1, + Number2, + Number3, + Number4, + Number5, + Number6, + Number7, + Number8, + Number9 + ] }; // used to autocomplete types diff --git a/src/shapes/numbers/n_0.tsx b/src/shapes/numbers/n_0.tsx new file mode 100644 index 0000000..adc293c --- /dev/null +++ b/src/shapes/numbers/n_0.tsx @@ -0,0 +1,77 @@ +import React, { forwardRef } from "react"; +import { ShapeBase, ShapeType } from "../../lib"; + +const Number0: ShapeType = forwardRef((props, ref) => { + const shapeId = "number-0"; + const clipId = `cs_clip_1_${shapeId}`; + const maskId = `cs_mask_1_${shapeId}`; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}); + +Number0.displayName = "Number0"; +export { Number0 }; diff --git a/src/shapes/numbers/n_1.tsx b/src/shapes/numbers/n_1.tsx new file mode 100644 index 0000000..3946b85 --- /dev/null +++ b/src/shapes/numbers/n_1.tsx @@ -0,0 +1,61 @@ +import React, { forwardRef } from "react"; +import { ShapeBase, ShapeType } from "../../lib"; + +const Number1: ShapeType = forwardRef((props, ref) => { + const shapeId = "number-1"; + const maskId = `cs_mask_1_${shapeId}`; + + return ( + + + + + + + + + + + + + + + + + + + + + + ); +}); + +Number1.displayName = "Number1"; +export { Number1 }; diff --git a/src/shapes/numbers/n_2.tsx b/src/shapes/numbers/n_2.tsx new file mode 100644 index 0000000..2461776 --- /dev/null +++ b/src/shapes/numbers/n_2.tsx @@ -0,0 +1,65 @@ +import React, { forwardRef } from "react"; +import { ShapeBase, ShapeType } from "../../lib"; + +const Number2: ShapeType = forwardRef((props, ref) => { + const shapeId = "number-2"; + const maskId = `cs_mask_1_${shapeId}`; + + return ( + + + + + + + + + + + + + + + + + + + + + + ); +}); + +Number2.displayName = "Number2"; +export { Number2 }; diff --git a/src/shapes/numbers/n_3.tsx b/src/shapes/numbers/n_3.tsx new file mode 100644 index 0000000..bd4c04e --- /dev/null +++ b/src/shapes/numbers/n_3.tsx @@ -0,0 +1,81 @@ +import React, { forwardRef } from "react"; +import { ShapeBase, ShapeType } from "../../lib"; + +const Number3: ShapeType = forwardRef((props, ref) => { + const shapeId = "number-3"; + const maskId = `cs_mask_1_${shapeId}`; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}); + +Number3.displayName = "Number3"; +export { Number3 }; diff --git a/src/shapes/numbers/n_4.tsx b/src/shapes/numbers/n_4.tsx new file mode 100644 index 0000000..8e47b43 --- /dev/null +++ b/src/shapes/numbers/n_4.tsx @@ -0,0 +1,73 @@ +import React, { forwardRef } from "react"; +import { ShapeBase, ShapeType } from "../../lib"; + +const Number4: ShapeType = forwardRef((props, ref) => { + const shapeId = "number-4"; + const maskId = `cs_mask_1_${shapeId}`; + + return ( + + + + + + + + + + + + + + + + + + + + + + ); +}); + +Number4.displayName = "Number4"; +export { Number4 }; diff --git a/src/shapes/numbers/n_5.tsx b/src/shapes/numbers/n_5.tsx new file mode 100644 index 0000000..8dff238 --- /dev/null +++ b/src/shapes/numbers/n_5.tsx @@ -0,0 +1,68 @@ +import React, { forwardRef } from "react"; +import { ShapeBase, ShapeType } from "../../lib"; + +const Number5: ShapeType = forwardRef((props, ref) => { + const shapeId = "number-5"; + const maskId = `cs_mask_1_${shapeId}`; + + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +}); + +Number5.displayName = "Number5"; +export { Number5 }; diff --git a/src/shapes/numbers/n_6.tsx b/src/shapes/numbers/n_6.tsx new file mode 100644 index 0000000..5c6462b --- /dev/null +++ b/src/shapes/numbers/n_6.tsx @@ -0,0 +1,82 @@ +import React, { forwardRef } from "react"; +import { ShapeBase, ShapeType } from "../../lib"; + +const Number6: ShapeType = forwardRef((props, ref) => { + const shapeId = "number-6"; + const maskId = `cs_mask_1_${shapeId}`; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}); + +Number6.displayName = "number6"; +export { Number6 }; diff --git a/src/shapes/numbers/n_7.tsx b/src/shapes/numbers/n_7.tsx new file mode 100644 index 0000000..6e77b13 --- /dev/null +++ b/src/shapes/numbers/n_7.tsx @@ -0,0 +1,76 @@ +import React, { forwardRef } from "react"; +import { ShapeBase, ShapeType } from "../../lib"; + +const Number7: ShapeType = forwardRef((props, ref) => { + const shapeId = "number-7"; + const maskId = `cs_mask_1_${shapeId}`; + + return ( + + + + + + + + + + + + + + + + + + + + + + ); +}); + +Number7.displayName = "Number7"; +export { Number7 }; diff --git a/src/shapes/numbers/n_8.tsx b/src/shapes/numbers/n_8.tsx new file mode 100644 index 0000000..bd6f421 --- /dev/null +++ b/src/shapes/numbers/n_8.tsx @@ -0,0 +1,78 @@ +import React, { forwardRef } from "react"; +import { ShapeBase, ShapeType } from "../../lib"; + +const Number8: ShapeType = forwardRef((props, ref) => { + const shapeId = "number-8"; + const maskId = `cs_mask_1_${shapeId}`; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); +}); + +Number8.displayName = "Number8"; +export { Number8 }; diff --git a/src/shapes/numbers/n_9.tsx b/src/shapes/numbers/n_9.tsx new file mode 100644 index 0000000..a059b78 --- /dev/null +++ b/src/shapes/numbers/n_9.tsx @@ -0,0 +1,78 @@ +import React, { forwardRef } from "react"; +import { ShapeBase, ShapeType } from "../../lib"; + +const Number9: ShapeType = forwardRef((props, ref) => { + const shapeId = "number-9"; + const maskId = `cs_mask_1_${shapeId}`; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}); + +Number9.displayName = "Number9"; +export { Number9 }; From 14289cb1b903a85627013759ba5d7bf6402a5d89 Mon Sep 17 00:00:00 2001 From: Green apple <0xgreenapple@gmail.com> Date: Thu, 28 Mar 2024 21:24:59 +0530 Subject: [PATCH 4/6] update readme --- CHANGELOG.md | 1 + README.md | 141 +++++++++++++++++++++++++++++++++++++++++++-------- package.json | 1 - 3 files changed, 121 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a28caa1..83db601 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ - Added 90+ shapes from different categories `Coolshape`, `Ellipse`, `Flower`, `Misc`, `Moon`, `Polygon`, `Rectangle`, `Star`, `Triangle` + ## 0.0.3 - `react-coolshapes@0.0.3` diff --git a/README.md b/README.md index f21fdb3..39954f2 100644 --- a/README.md +++ b/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 ; + return ; }; 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 ; + return ; }; 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 ; +}; +// renders a shape from the category star +const Component2 = () => { + return ; +}; +``` + +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 + }) + })} + + ) +}; + +``` +###### 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 - +| 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 + + + + + + + + + + +
+ + + +``` diff --git a/package.json b/package.json index b451f90..f5fbcb9 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,6 @@ "type": "module", "files": [ "./dist", - "!dist/**/*.map", "LICENSE", "README.md" ], From 0e479d2a114aa437a66f680870a9ea067ffadbc0 Mon Sep 17 00:00:00 2001 From: Green apple <0xgreenapple@gmail.com> Date: Thu, 28 Mar 2024 23:01:12 +0530 Subject: [PATCH 5/6] added tests workflow --- .github/workflows/node.js.yml | 23 +++++++++++++++++++++++ index.html | 20 ++++++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 .github/workflows/node.js.yml create mode 100644 index.html diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 0000000..3619085 --- /dev/null +++ b/.github/workflows/node.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: [14.x, 16.x, 18.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 diff --git a/index.html b/index.html new file mode 100644 index 0000000..daa2f63 --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + +
+ + + \ No newline at end of file From 858d8a1048bdfb020207e8d827c7dd0de2a88cee Mon Sep 17 00:00:00 2001 From: Green apple <0xgreenapple@gmail.com> Date: Fri, 29 Mar 2024 00:06:08 +0530 Subject: [PATCH 6/6] fix workflow --- .github/workflows/{node.js.yml => coolshapes.js.yml} | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename .github/workflows/{node.js.yml => coolshapes.js.yml} (90%) diff --git a/.github/workflows/node.js.yml b/.github/workflows/coolshapes.js.yml similarity index 90% rename from .github/workflows/node.js.yml rename to .github/workflows/coolshapes.js.yml index 3619085..389353d 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/coolshapes.js.yml @@ -11,7 +11,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: [14.x, 16.x, 18.x] + node-version: [16.x, 18.x, 21.x] steps: - uses: actions/checkout@v3 - name: Use Node.js ${{ matrix.node-version }} diff --git a/package.json b/package.json index f5fbcb9..74e3b77 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "email": "realvjy@gmail.com" }, "engines": { - "node": ">=10" + "node": ">=14.0.0" }, "peerDependencies": { "react": ">=16.8",