Merge branch 'dev' into feature/#216-create-input-stepper-component

.github/workflows/cd.yml

@@ -0,0 +1,35 @@
+name: CD Workflow
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  cd:
+    environment:
+      name: Production
+      url: https://quickmock.net
+    runs-on: ubuntu-latest
+    name: Deploy Quickmock
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_FIELD_0DCD26F03 }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          action: "upload"
+          app_location: "/dist"
+          skip_app_build: true
+          skip_api_build: true
+        env:
+          NODE_VERSION: 20.17.0

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Lemoncode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,16 +1,28 @@
-# Quick mock 🎨
+# Quick mock
 
-**Work in progres... 🚧 **
+![Contributors](https://img.shields.io/github/contributors/Lemoncode/quickmock)
+![Forks](https://img.shields.io/github/forks/Lemoncode/quickmock)
+![Stars](https://img.shields.io/github/stars/Lemoncode/quickmock)
+![Licence](https://img.shields.io/github/license/Lemoncode/quickmock)
+![Issues](https://img.shields.io/github/issues/Lemoncode/quickmock)
 
-The goal of this project is to create an open source low fidelity UI mock tool 
+## 🌟 Project
 
-![quickmock](https://github.com/user-attachments/assets/a26e7302-0847-4377-80f0-39098791b371)
+Quick Mock is a free, open source online tool for quickly creating low fidelity UI mockups.
 
-# 🚀 Installation
+You can take a look at the desktop community preview at [Quick Mock](https://www.quickmock.net/)
 
-Clone this repository and run the following commands:
+[![Quick mock video tutorial](https://img.youtube.com/vi/NqswxUvXm4c/0.jpg)](https://www.youtube.com/watch?v=NqswxUvXm4c)
 
-Install dependencies
+## 🚀 Installation
+
+To install the project, clone the repository and run the following commands:
+
+```sh
+git clone https://github.com/Lemoncode/quickmock.git
+```
+
+Install the dependencies
 
 ```bash
 npm install
@@ -24,9 +36,54 @@ npm run dev
 
 Open your browser and go to http://localhost:5173 (if this port is busy it will be changed to the next available port)
 
+## 🤝 Contributing
+
+Your feedback and contributions are welcome! If you have ideas for new features or have found a bug, we would love to hear about it. Here's how you can contribute:
+
+**Report a Bug 🐛**
+
+If you encounter a bug in the project, please first check if it has already been reported in our GitHub Issues. If you don't find it there, feel free to open a new issue. Provide as many details as possible, including steps to reproduce the bug, the environment in which it occurs (operating system, project version, etc.), and any other relevant details.
+
+**Propose a New Feature ✨**
+
+Do you have an idea to improve the project? Great! Share your thoughts with us by opening a new GitHub Issue under the feature request label. Describe the feature you would like to see, how and why you think it would be a valuable addition to the project.
+
+## 🛠️ Technologies
+
+The application is being developed using the following technologies:
+
+- [React](https://react.dev/)
+- [React Konva](https://konvajs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) / [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) / [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
+- [Vite](https://vitejs.dev/)
+- [Vitest](https://vitest.dev/)
+
+## 💖 Sponsor Quick Mock
+
+Are you or your company interested in supporting Quick Mock? Sponsorship is a powerful way to contribute to the development and maintenance of our project, and we're always looking for partners who share our vision.
+
+Why Sponsor Quick Mock?
+
+- **Support Open Source:** Your sponsorship directly contributes to the open-source community, enabling us to maintain and improve our project.
+
+- **Visibility for Your Brand:** Sponsoring Quick Mock can provide visibility for your brand in the tech community. It's an excellent way to demonstrate your commitment to supporting innovative software development.
+
+- **Direct Impact:** Your support makes a tangible difference, allowing us to focus more on development, add new features, and improve the user experience.
+
+If you're interested in sponsoring this project, please feel free to reach out to us at: [email protected]
+
+Thank you for supporting open-source development!
+
+## 📐 Custom Component Libraries for Enterprise
+
+If your organization has its own design system and component library, we can create a custom set of low-fidelity mock components tailored to your palette and guidelines. This allows your team to create wireframes that align perfectly with your branding and design standards.
+
+For more information and to request a quote, feel free to contact us at: [email protected].
+
 ## 👥 Team
 
-Contributors to this project
+Team members participating in this project
 
 <p align="left">
   <a href="https://github.com/LourdesRsdp">

editor.html

@@ -1,6 +1,20 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-MC701CZYZ3"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-MC701CZYZ3');
+    </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Quickmock</title>

index.html

@@ -1,6 +1,20 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-MC701CZYZ3"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-MC701CZYZ3');
+    </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Quickmock</title>
@@ -136,17 +150,13 @@
         align-items: center;
         margin: 0 auto;
         border-radius: 10px;
-        /*Remove aspect-ratio when iframe uncomment*/
-        aspect-ratio: 16 / 9;
-        background-image: url(./quickmock-frame.png);
-        background-size: 100%;
-        background-repeat: no-repeat;
         border: 1px solid black;
       }
+
       iframe {
         width: 100%;
-        aspect-ratio: 14.35 / 9;
-        border-radius: 10px;
+        aspect-ratio: 16 / 9;
+        border-radius: 9px;
       }
       .content {
         display: grid;
@@ -242,7 +252,7 @@
         .title {
           top: 2vw;
           width: 60%;
-          max-width: 1000px;
+          max-width: 900px;
           margin-right: auto;
           padding-left: 1.5vw;
         }
@@ -306,11 +316,13 @@ <h1>
           </div>
           <div>
             <div class="video">
-              <!-- <iframe
-                src="https://www.youtube.com/embed/87ZZbDZLido?si=fanae_ZvATEOIkHZ"
+              <iframe
+                src="https://www.youtube.com/embed/NqswxUvXm4c?si=CouwMULhG-OBGlZT"
+                title="YouTube video player"
                 frameborder="0"
+                referrerpolicy="strict-origin-when-cross-origin"
                 allowfullscreen
-              ></iframe> -->
+              ></iframe>
             </div>
           </div>
           <div class="right">
@@ -322,7 +334,7 @@ <h1>
             </p>
           </div>
         </div>
-        <a href="./editor.html" class="link hide-mobile">START DESIGN</a>
+        <a href="editor.html" class="link hide-mobile">START DESIGN</a>
         <p class="mobile-text mobile-only">Now, only available on desktop.</p>
       </div>
     </main>

src/common/components/front-basic-sapes/circle-basic-shape.tsx

@@ -1,9 +1,11 @@
 import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef } from 'react';
 import { ShapeProps } from '../front-components/shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Circle, Group } from 'react-konva';
 import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook';
+import { useShapeProps } from '../shapes/use-shape-props.hook';
+import { BASIC_SHAPE } from '../front-components/shape.const';
 
 const circleShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 10,
@@ -29,20 +31,7 @@ export const CircleShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { handleSelection } = useShapeComponentSelection(props, shapeType);
 
-  const stroke = useMemo(
-    () => otherProps?.stroke ?? 'black',
-    [otherProps?.stroke]
-  );
-
-  const fill = useMemo(
-    () => otherProps?.backgroundColor ?? 'white',
-    [otherProps?.backgroundColor]
-  );
-
-  const strokeStyle = useMemo(
-    () => otherProps?.strokeStyle ?? [],
-    [otherProps?.strokeStyle]
-  );
+  const { stroke, fill, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
 
   return (
     <Group

src/common/components/front-basic-sapes/diamond-shape.tsx

@@ -1,9 +1,11 @@
 import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef } from 'react';
 import { ShapeProps } from '../front-components/shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Line } from 'react-konva';
 import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook';
+import { useShapeProps } from '../shapes/use-shape-props.hook';
+import { BASIC_SHAPE } from '../front-components/shape.const';
 
 const diamondShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 10,
@@ -50,20 +52,7 @@ export const DiamondShape = forwardRef<any, ShapeProps>((props, ref) => {
     halfHeight, // Left point
   ];
 
-  const stroke = useMemo(
-    () => otherProps?.stroke ?? 'black',
-    [otherProps?.stroke]
-  );
-
-  const fill = useMemo(
-    () => otherProps?.backgroundColor ?? 'white',
-    [otherProps?.backgroundColor]
-  );
-
-  const strokeStyle = useMemo(
-    () => otherProps?.strokeStyle ?? [],
-    [otherProps?.strokeStyle]
-  );
+  const { stroke, fill, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
 
   return (
     <Group