update 4 files and delete 1 file

package.json

@@ -24,6 +24,7 @@
     "react": "17",
     "react-apexcharts": "^1.3.9",
     "react-beautiful-dnd": "^13.1.0",
+    "react-circular-progressbar": "^2.0.4",
     "react-dom": "17",
     "react-hook-form": "^7.30.0",
     "react-icons": "^4.3.1",

src/components/Checkbox/index.js

@@ -0,0 +1,46 @@
+// it has style inside index.scss ---> // Start  CheckBox Component && end CheckBox Component
+
+import React from "react";
+
+export default function Checkbox(props) {
+  return (
+    <div>
+      <svg className="w-0 h-0 absolute pointer-events-none select-none">
+        <symbol id="check" viewBox="0 0 12 10">
+          <polyline
+            points="1.5 6 4.5 9 10.5 1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+          ></polyline>
+        </symbol>
+      </svg>
+
+      <div
+        className="checkbox-container flex flex-wrap justify-center items-center hover:bg-inherit border-box"
+        style={{ color: "#000", height: "30px" }}
+      >
+        <input
+          className="checkbox-input absolute hidden"
+          id="apples"
+          type="checkbox"
+          checked={props.checked}
+        />
+        <label
+          className="checkbox flex rounded-sm transition-all duration-100 cursor-pointer select-none overflow-hidden"
+          style={{ padding: "6px 8px" }}
+          htmlFor="apples"
+        >
+          <span
+            className="align-bottom"
+            style={{ transform: "translate3d(0, 0, 0)" }}
+          >
+            <svg width="12px" height="10px">
+              <use xlinkHref="#check"></use>
+            </svg>
+          </span>
+        </label>
+      </div>
+    </div>
+  );
+}

src/components/ProgressBar/CircularProgressbar/index.js

@@ -0,0 +1,39 @@
+import React from "react";
+import {
+  CircularProgressbar,
+  buildStyles,
+  CircularProgressbarWithChildren,
+} from "react-circular-progressbar";
+
+function CustomCircularProgressbar() {
+  const percentage = 66;
+
+  return (
+    <>
+      <h2>درست کار نکرد!!!</h2>
+      <div style={{ width: 200, height: 200 }}>
+        <CircularProgressbar value={percentage} text={percentage} />
+      </div>
+      <div className="" style={{ width: 200, height: 200, marginTop: 20 }}>
+        <CircularProgressbarWithChildren
+          value={80}
+          styles={buildStyles({
+            pathColor: "#f00",
+            trailColor: "transparent",
+            // strokeLinecap: "butt",
+          })}
+        >
+          <CircularProgressbar
+            value={70}
+            styles={buildStyles({
+              trailColor: "transparent",
+              // strokeLinecap: "butt",
+            })}
+          />
+        </CircularProgressbarWithChildren>
+      </div>
+    </>
+  );
+}
+
+export default CustomCircularProgressbar;

src/components/ProgressBar/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import CircularProgressbar from "./CircularProgressbar";
+
+function ProgressBar() {
+  const list = {
+    1: <CircularProgressbar />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="w-20 bg-gray-200 mb-10"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default ProgressBar;

src/index.scss

@@ -1031,6 +1031,66 @@ $white: #fff;
 
 // * end vodProductDesign Component
 
+// TODO  Start CheckBox Component
+
+.checkbox-container * {
+  box-sizing: border-box;
+}
+
+.checkbox:not(:last-child) {
+  margin-right: 6px;
+}
+
+.checkbox span:first-child {
+  position: relative;
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  transform: scale(1);
+  border: 1px solid #cccfdb;
+  transition: all 0.3s ease;
+}
+
+.checkbox span:first-child svg {
+  position: absolute;
+  top: 3px;
+  left: 2px;
+  fill: none;
+  stroke: #fff;
+  stroke-dasharray: 16px;
+  stroke-dashoffset: 16px;
+  transition: all 0.3s ease;
+  transform: translate3d(0, 0, 0);
+}
+
+.checkbox span:last-child {
+  padding-left: 8px;
+  line-height: 18px;
+}
+
+.checkbox:hover span:first-child {
+  border-color: #0077ff;
+}
+
+.checkbox-input:checked + .checkbox span:first-child {
+  background: #0077ff;
+  border-color: #0077ff;
+  animation: zoom-in-out 0.3s ease;
+}
+
+.checkbox-input:checked + .checkbox span:first-child svg {
+  stroke-dashoffset: 0;
+}
+
+@keyframes zoom-in-out {
+  50% {
+    transform: scale(0.9);
+  }
+}
+
+// * end CheckBox Component
+
 // ? class for selectbox inside -->> CustomSelectBox  <<--
 .customizeSelect {
   background-position: left 0.5rem center;

src/redux/data.js

@@ -9,9 +9,11 @@ import Banners from "../components/Banners";
 import Blog from "../components/Blog";
 import CardTrelloDesign from "../components/CardTrelloDesign";
 import ChartDesign from "../components/ChartDesign";
+import ProgressBar from "../components/ProgressBar";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
+import Checkbox from "../components/Checkbox";
 
 // import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 // import ProductDesign from "./components/productDesign/ProductDesign";
@@ -213,6 +215,26 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Checkbox",
+    author: "Ashrafi",
+    props: [],
+    content: {
+      name: "Checkbox",
+      component: <Checkbox />,
+      code: null,
+    },
+  },
+  {
+    name: "Progress Bar",
+    author: "Ashrafi-Andalib",
+    props: [],
+    content: {
+      name: "Progress Bar",
+      component: <ProgressBar />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",

yarn.lock

@@ -7657,6 +7657,11 @@ react-beautiful-dnd@^13.1.0:
     redux "^4.0.4"
     use-memo-one "^1.1.1"
 
+react-circular-progressbar@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-circular-progressbar/-/react-circular-progressbar-2.0.4.tgz#5b04a9cf6be8c522c180e4e99ec6db63677335b0"
+  integrity sha512-OfX0ThSxRYEVGaQSt0DlXfyl5w4DbXHsXetyeivmoQrh9xA9bzVPHNf8aAhOIiwiaxX2WYWpLDB3gcpsDJ9oww==
+
 react-date-object@^2.1.5:
   version "2.1.5"
   resolved "https://registry.npmjs.org/react-date-object/-/react-date-object-2.1.5.tgz"