chore: ci

.github/workflows/ci.yaml

@@ -0,0 +1,31 @@
+name: CI
+
+on:
+  push
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22.x"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install dependencies
+        run: |
+          pnpm install
+
+      - name: Check code formatting
+        run: | 
+          pnpm run format:check 

.github/workflows/semantic-pr.yaml

@@ -0,0 +1,21 @@
+name: "Semantic PR"
+
+on:
+    pull_request_target:
+        types:
+            - opened
+            - reopened
+            - edited
+            - synchronize
+
+permissions:
+    pull-requests: read
+
+jobs:
+    validate-pr-title:
+        name: Validate PR title
+        runs-on: ubuntu-latest
+        steps:
+            - uses: amannn/action-semantic-pull-request@v5
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -1,11 +1,11 @@
 # React SVG Shape
 
-
 <img src="https://github.com/user-attachments/assets/3a473b65-cdd9-4a00-abbd-66fcd9b52644" width="200px" style="margin: auto;"/>
 
-
 # Installation
+
 [NPM](https://www.npmjs.com/package/react-svg-shape)
+
 ```bash
 npm i react-svg-shape
 ```
@@ -16,17 +16,18 @@ npm i react-svg-shape
 import { generatePath, SvgShape } from "react-svg-shape";
 
 const svgPath = generatePath({ complexity: 16, contrast: 4 });
-          
+
 const SvgBlobComponent = () => {
-    return (
-      <SvgShape width={100} height={100}>
-        <SvgShape.Path svgPath={svgPath} colors={["#f87537", "#fba81f"]} />
-      </SvgShape>
-    );
-}
+  return (
+    <SvgShape width={100} height={100}>
+      <SvgShape.Path svgPath={svgPath} colors={["#f87537", "#fba81f"]} />
+    </SvgShape>
+  );
+};
 ```
 
 ## Animated Blob
+
 > [!IMPORTANT]
 > SVG animations are supported only in Chromium based browsers
 
@@ -37,7 +38,7 @@ import { generatePath, SvgShape } from "react-svg-shape";
 const INTERVAL_DURATION = 1_000;
 const generateShapePath = () => generatePath({ complexity: 16, contrast: 4 });
 
-const SvgBlobAnimatedComponent = () => { 
+const SvgBlobAnimatedComponent = () => {
   const [svgPath, setSvgPath] = useState(generateShapePath());
 
   useEffect(() => {
@@ -51,20 +52,21 @@ const SvgBlobAnimatedComponent = () => {
   }, [setSvgPath]);
 
   return (
-  <SvgShape width={100} height={100}>
-    <SvgShape.Path 
-      svgPath={svgPath}
-      colors={["#f87537", "#fba81f"]}
-      style={{
-        transition: `all ${INTERVAL_DURATION / 1000}s linear`,
-      }}
-    />
-  </SvgShape>
+    <SvgShape width={100} height={100}>
+      <SvgShape.Path
+        svgPath={svgPath}
+        colors={["#f87537", "#fba81f"]}
+        style={{
+          transition: `all ${INTERVAL_DURATION / 1000}s linear`,
+        }}
+      />
+    </SvgShape>
   );
-}
+};
 ```
 
 <img src="https://github.com/user-attachments/assets/bf581601-d02e-4b5c-9eb9-8badac486634" alt="Animated Blob" width="100%"/>
 
 ## Honorable Mention
-https://www.softr.io/tools/svg-shape-generator
+
+https://www.softr.io/tools/svg-shape-generator

apps/docs/src/components/AnimatedBlob.tsx

@@ -16,7 +16,7 @@ export const AnimatedBlob = ({ className }: { className?: string }) => {
       generatePath({ complexity: 16, contrast: 4 }),
       generatePath({ complexity: 16, contrast: 6 }),
     ],
-    []
+    [],
   );
 
   const [shapes, setShapes] = useState<string[]>(handleGenerateShapes);

apps/docs/src/lib/utils/downloadSVG.utils.ts

@@ -1,6 +1,6 @@
 export function downloadSVG(
   svgContent: string,
-  filename: string = "generated-shape.svg"
+  filename: string = "generated-shape.svg",
 ): void {
   const blob = new Blob([svgContent], { type: "image/svg+xml" });
   const url = window.URL.createObjectURL(blob);

apps/docs/src/main.tsx

@@ -6,5 +6,5 @@ import "./index.css";
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
 );

apps/docs/src/sections/SvgGeneratorSection.tsx

@@ -29,7 +29,7 @@ const SvgGeneratorSection: FC<SvgGeneratorProps> = () => {
         contrast: curve,
       });
     },
-    []
+    [],
   );
 
   const generateRandomShape = useCallback(() => {

package.json

@@ -3,9 +3,12 @@
   "scripts": {
     "build": "turbo run build",
     "preview": "turbo run preview",
-    "dev": "turbo run dev"
+    "dev": "turbo run dev",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
+    "prettier": "^3.6.2",
     "turbo": "^2.5.8"
   },
   "packageManager": "[email protected]"

packages/react-svg-shape/src/shape-generator.ts

@@ -7,7 +7,7 @@ export function roundPath(path: string, precision: number = 0.1): string {
   if (!path) return "";
   const query = /[\d.-][\d.e-]*/g;
   return path.replace(query, (n: string) =>
-    String(Math.round(Number(n) * (1 / precision)) / (1 / precision))
+    String(Math.round(Number(n) * (1 / precision)) / (1 / precision)),
   );
 }
 
@@ -49,7 +49,7 @@ export function createSVGContent(
   path: string,
   color1: string,
   color2?: string,
-  stroke: boolean = false
+  stroke: boolean = false,
 ): string {
   const fillColor = stroke ? "none" : color2 ? "url(#gradient)" : color1;
 
@@ -79,7 +79,7 @@ export function createSimpleSVGContent(
   path: string,
   color1: string,
   color2?: string,
-  stroke: boolean = false
+  stroke: boolean = false,
 ): string {
   const fillColor = stroke ? "none" : color2 ? "url(#gradient)" : color1;