feat: add minimal flat Cloud shape component by shreyashpatel5506 · Pull Request #94 · ashutosh1919/react-awesome-shapes

shreyashpatel5506 · 2025-12-21T18:04:19Z

✨ What’s added

Introduced a new Cloud shape with a clean, minimal flat SVG design
Fully typed with TypeScript
Accessible with aria-label
Follows the existing shape API and styling patterns

🧪 Testing

Tested locally in development mode
Rendered correctly in the shapes demo

📌 Notes

This PR focuses only on adding the Cloud shape
Existing Theme UI / lint issues in the demo are unrelated and untouched
⚠️ Note: The project currently has a known npm peer dependency conflict
(framework-related). This PR does not introduce or modify dependencies
and focuses only on adding the Cloud shape component.

netlify · 2025-12-21T18:04:25Z

✅ Deploy Preview for awesomeshapes ready!

Name	Link
🔨 Latest commit	`9113f08`
🔍 Latest deploy log	https://app.netlify.com/projects/awesomeshapes/deploys/694a1e29b6c0390008717e54
😎 Deploy Preview	https://deploy-preview-94--awesomeshapes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

ashutosh1919 · 2025-12-22T17:25:06Z

@shreyashpatel5506 Deploy preview fails

shreyashpatel5506 · 2025-12-22T17:42:21Z

@shreyashpatel5506 Deploy preview fails

Yes, the dependency conflict exists on main as well.
Locally tested using npm install --legacy-peer-deps.
Happy to help with a separate dependency-fix PR if needed.

shreyashpatel5506 · 2025-12-23T04:48:22Z

@shreyashpatel5506 Deploy preview fails
Please check ,the preview is displaying correctly now.

shreyashpatel5506 · 2025-12-26T16:31:38Z

@shreyashpatel5506 Deploy preview fails
Please check ,the preview is displaying correctly now.

If everything looks good, please review.

shreyashpatel5506 · 2025-12-29T10:51:05Z

@ashutosh1919 please check my pr

Copilot

Pull request overview

This PR attempts to add a new Cloud shape component to the react-awesome-shapes library. However, the implementation does not follow the established patterns used by all other shapes in the codebase, creating significant API inconsistencies and maintainability concerns.

Changes:

Added a new Cloud shape component using direct SVG rendering (instead of the BaseShape wrapper pattern)
Exported Cloud component from library index
Added Cloud to the shapes demo constants and display
Included unrelated changes to footer component, configuration files, and build setup

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/lib/shapes/cloudshape.tsx	New Cloud component with non-standard implementation pattern
src/lib/index.tsx	Exports Cloud using default export (inconsistent with other shapes)
src/constants/shapes.constant.ts	Adds Cloud to scope and example (with invalid gradient color)
src/components/demo/shapesdemos.tsx	Adds Cloud to demo display
src/components/layout/footer.tsx	Unrelated: Updates deprecated Themed.a to Link with security attributes
.npmrc	Unrelated: Adds legacy-peer-deps configuration
.vscode/settings.json	Unrelated: Adds VS Code PR settings
.github/workflows/lint-check.yml	Unrelated: Updates Node version and install command
.eslintrc.json	Unrelated: Adds ESLint rule for sx prop
package.json	Unrelated: Adds Babel plugin dependency

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-18T17:52:22Z

src/lib/shapes/cloudshape.tsx

+import React from 'react';
+
+interface CloudProps {
+  width?: number | string;
+  height?: number | string;
+  color?: string;
+  zIndex?: number;
+}
+
+const Cloud: React.FC<CloudProps> = ({
+  width = '220px',
+  height = '120px',
+  color = '#E5E7EB',
+  zIndex = 1
+}) => {
+  return (
+    <svg
+      aria-label="Minimal flat cloud shape"
+      height={height}
+      role="img"
+      style={{ zIndex }}
+      viewBox="0 0 220 120"
+      width={width}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="
+          M60 90
+          H150
+          C175 90 190 75 190 60
+          C190 45 175 35 160 38
+          C155 22 138 15 122 22
+          C112 8 90 10 82 25
+          C65 25 50 38 50 55
+          C35 58 30 70 30 80
+          C30 88 40 90 60 90
+          Z
+        "
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default Cloud;


The Cloud component does not follow the established pattern used by other shapes in this codebase. All other shapes (Circle, Star, Heart, Arrow, Message, etc.) use the BaseShape wrapper component with styled-components and clip-path. This inconsistency creates maintenance issues and API incompatibility.

The Cloud component should:

Use BaseShape wrapper for consistent positioning and responsive behavior

Accept the standard ShapeProps or ShapeWithSize interface properties (top, left, right, bottom, position, className, breakpoints, zIndex as string)

Use styled-components with clip-path or background for the shape rendering

Follow the same pattern as other shapes for consistency

src/lib/shapes/cloudshape.tsx

src/lib/index.tsx

Copilot · 2026-01-18T17:52:23Z

src/constants/shapes.constant.ts

+export const cloudExample = `<Cloud
+  width="220px"
+  height="120px"
+  color="linear-gradient(135deg, #c7d2fe, #a5b4fc)"


The color value uses a CSS linear-gradient which is incompatible with the SVG fill attribute. SVG fill only accepts solid colors (like hex, rgb, or named colors), not CSS gradient syntax. The gradient will not render as expected. Use a solid color value like "#c7d2fe" instead, or implement gradient support using SVG gradient elements (linearGradient/radialGradient) if gradient rendering is desired.

.npmrc

shreyashpatel5506 · 2026-02-10T13:51:55Z

can you merge it ?

Copilot

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

package.json

.github/workflows/lint-check.yml

.vscode/settings.json

src/lib/shapes/cloudshape.tsx

Copilot · 2026-03-01T17:03:20Z

src/lib/shapes/cloudshape.tsx

+          C30 88 40 90 60 90
+          Z
+        "
+        fill={color}


The color prop is passed as the SVG fill attribute, so CSS gradient strings such as "linear-gradient(135deg, #c7d2fe, #a5b4fc)" (used in cloudExample) will have no visual effect. The SVG fill attribute does not support CSS gradient syntax — gradients in SVG must be defined using <linearGradient> or <radialGradient> defs. As a result, the demo example in shapes.constant.ts will render the Cloud as transparent/missing color instead of showing the intended gradient. Either the color prop should only accept plain CSS color values (and the demo example corrected), or the component needs to support SVG gradient defs to render gradients correctly.

ashutosh1919 · 2026-03-01T19:36:09Z

@shreyashpatel5506 can you look at issues raised by copilot?

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

netlify · 2026-03-06T14:24:21Z

❌ Deploy Preview for awesomeshapes failed.

Name	Link
🔨 Latest commit	`a813f93`
🔍 Latest deploy log	https://app.netlify.com/projects/awesomeshapes/deploys/69ad9b74c4e2f50008152694

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

shreyashpatel5506 · 2026-03-06T14:29:58Z

@copilot open a new pull request to apply changes based on the comments in this thread

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

shreyashpatel5506 · 2026-03-06T15:27:53Z

almost all are solved

Copilot

Pull request overview

Copilot reviewed 9 out of 10 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

webpack.config.js

src/lib/shapes/cloudshape.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

shreyashpatel5506 · 2026-03-08T15:55:10Z

@copilot open a new pull request to apply changes based on the comments in this thread

CloudShape added

c6c8d57

shreyashpatel5506 added 3 commits December 23, 2025 04:23

fix linting errors and align CI with project engines

eded9f0

build: add .npmrc to handle peer dependency conflicts in CI

e48ee1d

fix: resolve theme-ui export and prettier formatting

9113f08

ashutosh1919 requested a review from Copilot January 18, 2026 17:48

Copilot started reviewing on behalf of ashutosh1919 January 18, 2026 17:48 View session

Copilot AI reviewed Jan 18, 2026

View reviewed changes

ashutosh1919 requested a review from Copilot March 1, 2026 16:59

Copilot started reviewing on behalf of ashutosh1919 March 1, 2026 17:00 View session

Copilot AI reviewed Mar 1, 2026

View reviewed changes

Apply suggestion from @Copilot

56a8f0e

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

shreyashpatel5506 and others added 5 commits March 6, 2026 19:57

Apply suggestion from @Copilot

82bee40

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Copilot

40459d4

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Copilot

b9d46c9

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Copilot

76d03d8

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Copilot

ce5f354

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

shreyashpatel5506 and others added 2 commits March 6, 2026 20:01

Update package.json

2d11281

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Refactor Cloud component and update Webpack plugins

06b1c12

shreyashpatel5506 requested a review from Copilot March 6, 2026 16:30

Copilot started reviewing on behalf of shreyashpatel5506 March 6, 2026 16:30 View session

Copilot AI reviewed Mar 6, 2026

View reviewed changes

webpack.config.js Outdated Show resolved Hide resolved

src/lib/shapes/cloudshape.tsx Show resolved Hide resolved

src/lib/shapes/cloudshape.tsx Show resolved Hide resolved

src/lib/shapes/cloudshape.tsx Show resolved Hide resolved

Update webpack.config.js

a813f93

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Uh oh!

Conversation

shreyashpatel5506 commented Dec 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ What’s added

🧪 Testing

📌 Notes

Uh oh!

netlify bot commented Dec 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for awesomeshapes ready!

Uh oh!

ashutosh1919 commented Dec 22, 2025

Uh oh!

shreyashpatel5506 commented Dec 22, 2025

Uh oh!

shreyashpatel5506 commented Dec 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shreyashpatel5506 commented Dec 26, 2025

Uh oh!

shreyashpatel5506 commented Dec 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

shreyashpatel5506 commented Feb 10, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 1, 2026

Choose a reason for hiding this comment

Uh oh!

ashutosh1919 commented Mar 1, 2026

Uh oh!

netlify bot commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for awesomeshapes failed.

Uh oh!

shreyashpatel5506 commented Mar 6, 2026

Uh oh!

shreyashpatel5506 commented Mar 6, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

shreyashpatel5506 commented Mar 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

shreyashpatel5506 commented Dec 21, 2025 •

edited

Loading

netlify bot commented Dec 21, 2025 •

edited

Loading

shreyashpatel5506 commented Dec 23, 2025 •

edited

Loading

shreyashpatel5506 commented Dec 29, 2025 •

edited

Loading

netlify bot commented Mar 6, 2026 •

edited

Loading