From 9cfc449afe3378e339f3107ca37475f434db7b78 Mon Sep 17 00:00:00 2001 From: Green apple <0xgreenapple@gmail.com> Date: Mon, 15 Apr 2024 13:48:53 +0530 Subject: [PATCH 1/4] update readme and add publish action --- .github/workflows/coolshapes.js.yml | 2 +- .github/workflows/release.js.yml | 19 ++ .idea/.gitignore | 5 + .idea/codeStyles/Project.xml | 69 +++++++ .idea/codeStyles/codeStyleConfig.xml | 5 + .idea/coolshapes-react.iml | 12 ++ .idea/inspectionProfiles/Project_Default.xml | 6 + .idea/modules.xml | 8 + .idea/vcs.xml | 6 + README.md | 183 +++++++++++-------- tests/shape.test.tsx | 4 +- 11 files changed, 236 insertions(+), 83 deletions(-) create mode 100644 .github/workflows/release.js.yml create mode 100644 .idea/.gitignore create mode 100644 .idea/codeStyles/Project.xml create mode 100644 .idea/codeStyles/codeStyleConfig.xml create mode 100644 .idea/coolshapes-react.iml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.github/workflows/coolshapes.js.yml b/.github/workflows/coolshapes.js.yml index 8c106e8..912190f 100644 --- a/.github/workflows/coolshapes.js.yml +++ b/.github/workflows/coolshapes.js.yml @@ -12,7 +12,7 @@ jobs: steps: - uses: actions/checkout@v3 - - name: Builds and t + - name: Builds and test uses: actions/setup-node@v3 with: node-version: 16.x diff --git a/.github/workflows/release.js.yml b/.github/workflows/release.js.yml new file mode 100644 index 0000000..3ddc44e --- /dev/null +++ b/.github/workflows/release.js.yml @@ -0,0 +1,19 @@ +name: Publish Package +on: + release: + types: [published] +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: '20.x' + registry-url: 'https://registry.npmjs.org' + - run: npm ci + - run: npm run test + - run: npm run build + - run: npm publish + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} \ No newline at end of file diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 0000000..afdbaf0 --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..79ee123 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/coolshapes-react.iml b/.idea/coolshapes-react.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/coolshapes-react.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..d8fc738 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index 96f15c2..fda1207 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,36 @@ -[![Coolshapes](https://coolshap.es/react-preview.jpg)](https://coolshap.es) + #

Coolshapes

license npm package -

-A simple, fun project for the sake of creating some cool-looking abstract shapes with little grainy gradients crafted by [@realvjy](https://x.com/realvjy). Coolshapes is a completely open-source set of 100+ abstract shapes crafted for any design and development projects. Free for both commercial and personal use. Licensed under MIT. +A simple, fun project for the sake of creating some cool-looking abstract shapes with little grainy gradients crafted +by [@realvjy](https://x.com/realvjy). Coolshapes is a completely open-source set of 100+ abstract shapes crafted for any +design and development projects. Free for both commercial and personal use. Licensed under MIT. ### Table of Contents - [Coolshapes](#coolshapes) - - [Table of Contents](#table-of-contents) - - [Installation](#installation) - - [How to use](#how-to-use) - - [Global component example](#global-component-example) - - [Component with shape category example](#component-with-shape-category-example) - - [Generating random shapes](#generating-random-shapes) - - [Using random shape function](#using-random-shape-function) - - [Other Methods](#other-methods) - - [Renders the shapes from all catagories](#renders-the-shapes-from-all-catagories) - - [syntax](#syntax) - - [Props](#props) - - [Categories](#categories) - - [Others](#others) - - [cjs](#cjs) - - [Figma File](#figma-file) - - [Contributing](#contributing) - - [Support \& Donation](#support--donation) + - [Table of Contents](#table-of-contents) + - [Installation](#installation) + - [How to use](#how-to-use) + - [Global component example](#global-component-example) + - [Shape category components example](#component-with-shape-category-example) + - [Generating random shapes](#generating-random-shapes) + - [Random shape function](#using-random-shape-function) + - [Other Methods](#other-methods) + - [Accessing the shapes object](#renders-the-shapes-from-all-catagories) + - [Props](#props) + - [Categories](#categories) + - [Others](#others) + - [Classname and css](#classnames-and-css) + - [Builds](#builds) + - [Figma File](#figma-file) + - [Contributing](#contributing) + - [Support \& Donation](#support--donation) ## Installation @@ -45,7 +46,8 @@ yarn add coolshapes-react ## How to use -There are two types of components available in **Coolshapes**, which you can use: **Global component** and **Component with a category of shapes**. Then, you can pass additional [props](#props) to adjust the shapes and their properties available on Coolshapes SVG elements. +There are two types of components available in **Coolshapes**, which you can use: **Global component** and **Component +for each category of shapes**. and, you can pass additional [props](#props) to adjust the shapes. #### Global component example @@ -55,7 +57,7 @@ Just import the Global component `Coolshape` and it will work. import { Coolshape } from "coolshapes-react"; const App = () => { - return ; + return ; }; export default App; @@ -69,30 +71,29 @@ You can import the component for specific category - `Star`,`Ellipse`... etc - a 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. +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 ; + return ; }; // renders a shape from the category star const Component2 = () => { - return ; + return ; }; ``` #### Using random shape function - ```js import { getRandomShape } from "coolshapes-react"; ``` @@ -127,7 +128,7 @@ const shapes = { } ``` -#### Renders the shapes from all catagories +#### Renders the shapes from all categories ```jsx import { shapes } from "coolshapes-react"; @@ -135,9 +136,10 @@ import { shapes } from "coolshapes-react"; const ShapeGrid = () => { return ( <> - {Object.keys(shapes).map((shapeType, _) => { - return shapes[shapeType].map((Shape, index) => { - return ; + { + Object.keys(shapes).map((shapeType, _) => { + return shapes[shapeType].map((Shape, index) => { + return ; }); })} @@ -158,44 +160,61 @@ const StarComponent1 = starComponents[0]; ### Props -| 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. Start from 0. | -| `random` | _Boolean_ | false | If set true it would select a random component | +| name | data type | default | description | +|-----------------------|-----------|---------|----------------------------------------------------------------------------------------------------------------------------------------------------------| +| `size` | _Number_ | 200 | The dimension of shape | +| [`type`](#categories) | _String_ | random | The category of shapes, if left empty it will 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 would randomly select a shape from the category if type prop given. index starts from 0. | +| `random` | _Boolean_ | false | If set true it will 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. +#### notes +> Index starts from number 0, so if you want to retrieve the first shape of any category, you would use the index number 0. +> The shapes are SVG components behind the hood, so it's also supports all the props that can be passed in a svg element. ### Categories There are a total of **115** shapes available in Coolshapes under the following categories. -| name | count | -| ------------- | -------- | -| `star` | 13 | -| `triangle` | 14 | -| `moon` | 15 | -| `polygon` | 8 | -| `flower` | 16 | -| `rectangle` | 9 | -| `ellipse` | 12 | -| `wheel` | 7 | -| `misc` | 11 | -| `number` | 10 | - -**Note:** When importing the components the name would be capitalized, but when passing as prop, the name would be lower case. +| name | count | +|-------------|-------| +| `star` | 13 | +| `triangle` | 14 | +| `moon` | 15 | +| `polygon` | 8 | +| `flower` | 16 | +| `rectangle` | 9 | +| `ellipse` | 12 | +| `wheel` | 7 | +| `misc` | 11 | +| `number` | 10 | + +**Note:** While passing the category name in the component, the name will be in lower case. ### Others -#### Name & Class -All components have inbuilt name starting 1. But, index starts from 0. -*Example: `` when rendered it's component name and class name is `Star1`* +#### ClassNames and css + +all the components have classname `coolshapes` assigned as default, but you can also pass custom classname of yours. +```jsx +import { Star } from 'coolshapes-react'; + +export const Shape = () => { + return( + + ) +} +``` +```scss +// make the shapes size responsive similar to img elements. +.coolshapes{ + width: 100%; + max-height: 48px; +} +``` +#### Builds -#### umd & es -There are `umd` and `es` included in bundled version of the module, +We have given `umd`, `es` and `cjs` versions of the build. #### cjs @@ -203,30 +222,34 @@ There are `umd` and `es` included in bundled version of the module, const Coolshapes = require("coolshapes-react"); ``` -using with react in the browser +Using with react in the browser ```html - - - - - - - - -
- - + + + + + + + + +
+ + ``` +##### unpkg +``` +https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js +``` ## Figma File @@ -234,9 +257,9 @@ Figma file coming soon on community ## Contributing -Created by realvjy. You are always welcome to share your feedback on twitter or any social media platform. +Created by realvjy. You are always welcome to share your feedback on twitter or any other social media platform. -If you want to contribute. Just create a [pull request](https://github.com/realvjy/coolshapes-react/pulls). +If you want to contribute, just create a [pull request](https://github.com/realvjy/coolshapes-react/pulls). ## Support & Donation diff --git a/tests/shape.test.tsx b/tests/shape.test.tsx index 974cefc..590c96f 100644 --- a/tests/shape.test.tsx +++ b/tests/shape.test.tsx @@ -4,9 +4,9 @@ import { render } from "@testing-library/react"; import React, { ForwardRefExoticComponent } from "react"; import shapes, { componentId, getRandomShape, shapeTypes } from "../src/shapes"; import { ShapeType } from "../src/lib"; -import { Coolshape, Star } from "../src/lib/shapes"; +import { Coolshape, Star } from "../src"; -describe("using every icons from the defined component list", async () => { +describe("using every icons from the defined component list", () => { const shapeTypes = Object.keys(shapes) as Array; shapeTypes.forEach((type) => { shapes[type].forEach((Shape, i) => { From 9577d6006eec3815bda0555cf6f3bf082b54f6bc Mon Sep 17 00:00:00 2001 From: Green apple <0xgreenapple@gmail.com> Date: Mon, 15 Apr 2024 13:49:03 +0530 Subject: [PATCH 2/4] change readme --- README.md | 9 +++++---- package.json | 1 - 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index fda1207..85c0248 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ design and development projects. Free for both commercial and personal use. Lice - [Classname and css](#classnames-and-css) - [Builds](#builds) - [Figma File](#figma-file) + - [Credits](#credits) - [Contributing](#contributing) - [Support \& Donation](#support--donation) @@ -255,11 +256,11 @@ https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js Figma file coming soon on community -## Contributing - -Created by realvjy. You are always welcome to share your feedback on twitter or any other social media platform. +## Credits +Crafted by realvjy. You are always welcome to share your feedback on twitter or any other social media platform. -If you want to contribute, just create a [pull request](https://github.com/realvjy/coolshapes-react/pulls). +## Contributing +If you want to contribute, create a [pull request](https://github.com/realvjy/coolshapes-react/pulls). ## Support & Donation diff --git a/package.json b/package.json index fa16f81..8526178 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ { "name": "0xgreenapple", "url": "https://greenapple.one", - "twitter": "https://x.com/0xgreenapple", "email": "0xgreenapple@gmail.com" } ], From 7b65dd215f4ca14e7fa74d85db979323edcb4236 Mon Sep 17 00:00:00 2001 From: Green apple <0xgreenapple@gmail.com> Date: Mon, 15 Apr 2024 14:04:46 +0530 Subject: [PATCH 3/4] remove .idea folder and update dir in ignore --- .idea/.gitignore | 5 -- .idea/codeStyles/Project.xml | 69 -------------------- .idea/codeStyles/codeStyleConfig.xml | 5 -- .idea/coolshapes-react.iml | 12 ---- .idea/inspectionProfiles/Project_Default.xml | 6 -- .idea/modules.xml | 8 --- .idea/vcs.xml | 6 -- 7 files changed, 111 deletions(-) delete mode 100644 .idea/.gitignore delete mode 100644 .idea/codeStyles/Project.xml delete mode 100644 .idea/codeStyles/codeStyleConfig.xml delete mode 100644 .idea/coolshapes-react.iml delete mode 100644 .idea/inspectionProfiles/Project_Default.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index b58b603..0000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -# Default ignored files -/shelf/ -/workspace.xml -# Editor-based HTTP Client requests -/httpRequests/ diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml deleted file mode 100644 index afdbaf0..0000000 --- a/.idea/codeStyles/Project.xml +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml deleted file mode 100644 index 79ee123..0000000 --- a/.idea/codeStyles/codeStyleConfig.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/coolshapes-react.iml b/.idea/coolshapes-react.iml deleted file mode 100644 index 24643cc..0000000 --- a/.idea/coolshapes-react.iml +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml deleted file mode 100644 index 03d9549..0000000 --- a/.idea/inspectionProfiles/Project_Default.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index d8fc738..0000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 35eb1dd..0000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file From a021d87a5500bc0ebda191cac47bb2bfd85bf59f Mon Sep 17 00:00:00 2001 From: Green apple <0xgreenapple@gmail.com> Date: Mon, 15 Apr 2024 14:05:05 +0530 Subject: [PATCH 4/4] remove .idea folder and update dir in ignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index fd10abd..4691766 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ .DS_Store node_modules dist/ +.idea +*.env \ No newline at end of file