Skip to content

Commit 30d7ea9

Browse files
realvjyrealvjy
authored
Merge pull request realvjy#5 from realvjy/dev
From Dev Branch
2 parents bcffcaf + 858d8a1 commit 30d7ea9

File tree

19 files changed

+960
-37
lines changed

19 files changed

+960
-37
lines changed

‎.github/workflows/coolshapes.js.yml

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
name: Node.js CI
2+
3+
on:
4+
push:
5+
branches: [ "dev" ]
6+
pull_request:
7+
branches: [ "dev" ]
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
strategy:
13+
matrix:
14+
node-version: [16.x, 18.x, 21.x]
15+
steps:
16+
- uses: actions/checkout@v3
17+
- name: Use Node.js ${{ matrix.node-version }}
18+
uses: actions/setup-node@v3
19+
with:
20+
node-version: ${{ matrix.node-version }}
21+
cache: 'npm'
22+
- run: npm ci
23+
- run: npm test

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# Changelog
22

3+
## 0.0.6-alpha.0
4+
- Add number type shapes, Total count 115
5+
- Change the index to start from 0
36
## 0.0.5-alpha.1
47
- Add more shapes. Total count 105
58
- Fix noise toggle
@@ -15,6 +18,7 @@
1518
- Added 90+ shapes from different categories
1619
`Coolshape`, `Ellipse`, `Flower`, `Misc`, `Moon`, `Polygon`, `Rectangle`, `Star`, `Triangle`
1720

21+
1822
## 0.0.3
1923

2024
- `react-coolshapes@0.0.3`

‎README.md

Lines changed: 120 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,6 @@ Implementation of the coolshapes icon library for react applications.
3535

3636
## How to use
3737

38-
It's built with ES modules so it's completely tree-shakable.
39-
Each icon can be imported as a react component.
40-
4138

4239
Implementation of the coolshapes icon library for web applications.
4340

@@ -52,46 +49,148 @@ yarn add coolshapes-react
5249
```
5350
### Example
5451

55-
You can pass additional props to adjust the icon.
52+
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.
5653

5754
```js
5855
import { Coolshape } from 'coolshapes-react';
5956

6057
const App = () => {
61-
return <Coolshape type="star" size={48} noise={true} />;
58+
return <Coolshape type="star" index={0} size={48} noise={true} />;
6259
};
6360

6461
export default App;
6562
```
6663

64+
You can import the component for specific category and simply pass the index of the shape.
6765
```js
68-
import { Star, Ellipse } from 'coolshapes-react';
66+
import { Star } from 'coolshapes-react';
6967

7068
const App = () => {
71-
return <Star index="1" size={48} noise={true} />;
69+
return <Star index={0} size={48} />;
7270
};
7371

7472
export default App;
7573
```
74+
#### Generating random shapes.
75+
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.
76+
```js
77+
// renders a random shape from any category
78+
const Component = () => {
79+
return <Coolshape random={true}/>;
80+
};
81+
// renders a shape from the category star
82+
const Component2 = () => {
83+
return <Coolshape type="star" random={true} />;
84+
};
85+
```
86+
87+
Using random shape function.
88+
```js
89+
import { getRandomShape } from 'coolshapes-react';
90+
```
91+
```js
92+
getRandomShape() // returns a random shape component
93+
```
94+
```js
95+
getRandomShape({type:"ellipse"}) // returns a random shape component from the category ellipse
96+
```
97+
```js
98+
getRandomShape({onlyId: true}) // returns shape identifier that can passed as props to the shape component
99+
// {shapeType, index}
100+
```
101+
```js
102+
getRandomShape({onlyId: true, type:"star"}) // returns shape identifier that can passed as props to the shape component
103+
// {shapeType: "star", index}
104+
```
105+
106+
#### others
107+
all the components are mapped from object that we have given you access to
108+
109+
```js
110+
const shapes = {
111+
star: [Star1, Star2, ...],
112+
ellipse: [Ellipse1, Ellipse2, ...],
113+
...
114+
}
115+
```
116+
117+
renders the shapes from all catagories
118+
```jsx
119+
import { shapes } from 'coolshapes-react'
120+
121+
const ShapeGrid = () => {
122+
return (
123+
<>
124+
{
125+
Object.keys(shapes).map((shapeType, _) =>{
126+
return shapes[shapeType].map((Shape, index)=>{
127+
return <Shape size={48}/>
128+
})
129+
})}
130+
</>
131+
)
132+
};
133+
134+
```
135+
###### syntax
136+
```js
137+
shapes[type][index]
138+
```
139+
```js
140+
const starComponents = shapes['star']
141+
const StarComponent1 = starComponents[0]
142+
```
76143

77144
### Props
78145

79-
| name | data type | default |
80-
| ------------- | -------- | ------------- |
81-
| `size` | _Number_ | 200 |
82-
| `type` | _String_ | currentColor |
83-
| `noise` | _Boolean_ | true |
84-
| `index` | _Number_ | random |
146+
| name | data type | default | description |
147+
| ------------- | -------- | ------------- | ------------- |
148+
| `size` | _Number_ | 200 | The dimension of shape |
149+
| [`type`](#categories) | _String_ | random | The category of shapes, if left empty it would randomly select a category. |
150+
| `noise` | _Boolean_ | true | Whether to add noise to the shape or not. |
151+
| `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 |
152+
| `random` | _Boolean_ | false | If set true it would select a random component |
85153

154+
Notes:
155+
- Index starts from number 0, so if you want to retrive the first shape of any category, you would use the index number 0.
86156

87-
### Props Value
157+
### Categories
88158

89-
If using
90-
```html
91-
<Coolshape type={star} index={1} size={48} noise={true} />
159+
| type | shapes |
160+
| ------------- | -------- |
161+
| `star` | 12 |
162+
| `ellipse` | 12 |
163+
164+
165+
### others
166+
we have have provide the `cjs`, `umd` and `es` build versions of the module,
167+
168+
#### cjs
169+
170+
```js
171+
const Coolshapes = reqiore("coolshapes-react")
92172
```
93-
| type | index | default |
94-
| ------------- | -------- | ------------- |
95-
| `star` | 1,2,..4 | random |
96-
| `ellipse` | 1,2,..12 | random |
173+
using with react in the browser
97174

175+
```html
176+
<!DOCTYPE html>
177+
<html>
178+
<head>
179+
<meta charset="UTF-8" />
180+
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
181+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
182+
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
183+
<script src="https://unpkg.com/coolshapes-react@0.0.5-alpha.1/dist/umd/coolshapes.js"></script>
184+
</head>
185+
<body>
186+
<div id="root"></div>
187+
<script type="text/babel">
188+
const domContainer = document.querySelector('#root');
189+
const root = ReactDOM.createRoot(domContainer);
190+
const coolshapes = window.coolshapes;
191+
const Coolshape = coolshapes.Coolshape;
192+
root.render(<Coolshape/>);
193+
</script>
194+
</body>
195+
</html>
196+
```

‎index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
6+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
7+
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
8+
<script src="https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js"></script>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="text/babel">
13+
const domContainer = document.querySelector('#root');
14+
const root = ReactDOM.createRoot(domContainer);
15+
const coolshapes = window.coolshapes;
16+
const Coolshapes = coolshapes.Coolshape;
17+
root.render(<Coolshapes/>);
18+
</script>
19+
</body>
20+
</html>

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "coolshapes-react",
3-
"version": "0.0.5-alpha.1",
3+
"version": "0.0.6-alpha.0",
44
"description": "A react component library for coolshapes",
55
"keywords": [
66
"coolshapes",
@@ -15,7 +15,6 @@
1515
"type": "module",
1616
"files": [
1717
"./dist",
18-
"!dist/**/*.map",
1918
"LICENSE",
2019
"README.md"
2120
],
@@ -48,7 +47,7 @@
4847
"email": "realvjy@gmail.com"
4948
},
5049
"engines": {
51-
"node": ">=10"
50+
"node": ">=14.0.0"
5251
},
5352
"peerDependencies": {
5453
"react": ">=16.8",

‎src/__tests__/shape.test.tsx

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import shapes, { componentId, getRandomShape, shapeTypes } from "../shapes";
66
import { ShapeType } from "../lib";
77
import { Coolshape, Star } from "../lib/shapes";
88

9-
describe("using every icons from the defined list", async () => {
9+
describe("using every icons from the defined component list", async () => {
1010
const shapeTypes = Object.keys(shapes) as Array<shapeTypes>;
1111
shapeTypes.forEach((type) => {
1212
shapes[type].forEach((Shape, i) => {
13-
const iconId = `${type}-${++i}`;
13+
const iconId = `${type}-${type === "number" ? i : ++i}`;
1414

1515
const props = {
1616
className: "shape",
@@ -21,9 +21,11 @@ describe("using every icons from the defined list", async () => {
2121
const { getByTestId } = render(<Shape {...props} />);
2222
const shapeElement = getByTestId(iconId);
2323
expect(shapeElement).toBeDefined();
24+
expect(shapeElement.classList).toContain(iconId);
2425
expect(
2526
shapeElement.querySelector(`#cs_noise_1_${iconId}`)
2627
).toBeTruthy();
28+
2729
});
2830
it(`Component is accepting custom class name and sizes `, () => {
2931
const { getByTestId } = render(<Shape {...props} />);
@@ -59,27 +61,31 @@ describe("using random shape function", () => {
5961
});
6062
});
6163

62-
describe("using the component for a shape type", () => {
64+
describe("using specific shape type components", () => {
6365
const props = {
6466
className: "customName",
6567
size: 20,
6668
noise: true,
6769
};
68-
it("it should render a valid random component with given information", () => {
69-
const testID = "component";
70+
it("it should render a valid random component with given props from that shape category", () => {
71+
const testID = "shape-component";
7072
const { getByTestId } = render(<Star data-testid={testID} {...props} />);
7173
const ShapeComponent = getByTestId(testID);
7274
expect(ShapeComponent).toBeDefined();
7375
expect(ShapeComponent.classList).toContain("coolshape");
7476
expect(ShapeComponent.getAttribute("width")).toBe(props.size.toString());
7577
});
7678
it("it should render a exact given component with index", () => {
77-
const testID = "component";
79+
const testID = "component-index";
7880
const { getByTestId } = render(
79-
<Star data-testid={testID} {...props} index={1} />
81+
<Star data-testid={testID} {...props} index={0} />
8082
);
8183
const ShapeComponent = getByTestId(testID);
8284
expect(ShapeComponent).toBeDefined();
85+
ShapeComponent.classList.forEach((classs)=>{
86+
console.log(classs)
87+
})
88+
console.log()
8389
expect(ShapeComponent.classList).toContain("coolshape");
8490
expect(ShapeComponent.classList).toContain("star-1");
8591
});
@@ -93,6 +99,9 @@ describe("Using coolshape component with noise prop", () => {
9399
index,
94100
type: shapeType,
95101
};
102+
const shouldAdd = shapeType === 'number'? 0 : 1;
103+
const shapeId = `${shapeType}-${shouldAdd + index}`
104+
96105
it("If noise is set to true, the noise should be visible ", () => {
97106
const testID = "coolshape";
98107
const { getByTestId } = render(
@@ -101,8 +110,9 @@ describe("Using coolshape component with noise prop", () => {
101110

102111
const ShapeComponent = getByTestId(testID);
103112
expect(ShapeComponent).toBeDefined();
113+
104114
expect(
105-
ShapeComponent.querySelector(`#cs_noise_1_${shapeType + "-" + index}`)
115+
ShapeComponent.querySelector(`#cs_noise_1_${shapeId}`)
106116
).toBeTruthy();
107117
});
108118
it("If noise is set to false, the noise should not be visible ", () => {
@@ -114,7 +124,7 @@ describe("Using coolshape component with noise prop", () => {
114124
expect(ShapeComponent).toBeDefined();
115125
expect(ShapeComponent.classList).toContain("coolshape");
116126
expect(
117-
ShapeComponent.querySelector(`#cs_noise_1_${shapeType + "-" + index}`)
127+
ShapeComponent.querySelector(`#cs_noise_1_${shapeId}`)
118128
).toBeFalsy();
119129
});
120130
});

0 commit comments

Comments
 (0)