diff --git a/.github/workflows/coolshapes.js.yml b/.github/workflows/coolshapes.js.yml new file mode 100644 index 0000000..389353d --- /dev/null +++ b/.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 diff --git a/CHANGELOG.md b/CHANGELOG.md index 83fabb8..83db601 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 @@ -15,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/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 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..74e3b77 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", @@ -15,7 +15,6 @@ "type": "module", "files": [ "./dist", - "!dist/**/*.map", "LICENSE", "README.md" ], @@ -48,7 +47,7 @@ "email": "realvjy@gmail.com" }, "engines": { - "node": ">=10" + "node": ">=14.0.0" }, "peerDependencies": { "react": ">=16.8", 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 };