feat: add minimal flat Cloud shape component #94

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

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

src/lib/shapes/cloudshape.tsx

+  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}


The CloudProps interface has inconsistent type signatures compared to other shapes in the codebase. The zIndex should be typed as string (not number), and width/height should support responsive arrays (string | string[]) to be consistent with the BaseShape pattern used by all other shapes. This breaks API consistency across the shape library.

Suggested change

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}

width?: string | string[];

height?: string | string[];

color?: string;

zIndex?: string;

}

const resolveResponsiveValue = (

value?: string | string[]

): string | undefined => {

if (Array.isArray(value)) {

return value[0];

}

return value;

};

const Cloud: React.FC<CloudProps> = ({

width = '220px',

height = '120px',

color = '#E5E7EB',

zIndex = '1'

}) => {

return (

<svg

aria-label="Minimal flat cloud shape"

height={resolveResponsiveValue(height)}

role="img"

style={{ zIndex }}

viewBox="0 0 220 120"

width={resolveResponsiveValue(width)}

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

src/lib/index.tsx

 export { SquareDonut } from './shapes/squareDonut';
 export { Arrow } from './shapes/arrow';
 export { Message } from './shapes/message';
+export { default as Cloud } from './shapes/cloudshape';


The export pattern for Cloud is inconsistent with all other shapes in the library. All other shapes use named exports (e.g., export { Circle }, export { Star }), but Cloud uses a default export. This breaks the consistent import pattern established throughout the codebase and should be changed to a named export for consistency.

Suggested change

export { default as Cloud } from './shapes/cloudshape';

export { Cloud } from './shapes/cloudshape';

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.

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

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true


These configuration changes (.npmrc, .vscode/settings.json, lint-check.yml, .eslintrc.json, package.json) appear unrelated to adding the Cloud shape component. While they may address existing project setup issues, they should ideally be in a separate PR focused on project configuration and build improvements. This makes it harder to review and understand what changes are actually needed for the Cloud shape feature.

Suggested change

legacy-peer-deps=true

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

	export { default as Cloud } from './shapes/cloudshape';
	export { Cloud } from './shapes/cloudshape';

		@@ -0,0 +1 @@
		legacy-peer-deps=true No newline at end of file

Uh oh!

feat: add minimal flat Cloud shape component #94

Are you sure you want to change the base?

feat: add minimal flat Cloud shape component #94

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!

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 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