Merge branch 'development' into feature/buttons-top-bar

@types/images.d.ts

@@ -10,12 +10,12 @@ declare module '*.png' {
   export default content;
 }
 
-declare module '*.svg' {
+declare module '*.svg?component' {
   const content: React.FC<React.SVGProps<SVGSVGElement>>;
   export default content;
 }
 
-declare module '*.svg?url' {
+declare module '*.svg' {
   const content: any;
   export default content;
 }

jest.config.ts

@@ -23,9 +23,6 @@ const config = {
     '!<rootDir>/src/**/*.d.ts',
     '!**/node_modules/**',
   ],
-  moduleNameMapper: {
-    '\\.svg': '@svgr/webpack',
-  },
   coverageReporters: ['html', 'text', 'text-summary', 'cobertura'],
   setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
 };

next.config.js

 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  webpack(config) {
-    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.('.svg'));
-    config.module.rules.push(
-      {
-        ...fileLoaderRule,
-        test: /\.svg$/i,
-        resourceQuery: /url/,
-      },
-      {
-        test: /\.svg$/i,
-        issuer: /\.[jt]sx?$/,
-        resourceQuery: { not: /url/ },
-        use: ['@svgr/webpack'],
-      },
-    );
-    fileLoaderRule.exclude = /\.svg$/i;
-
-    return config;
-  },
   experimental: {
     fontLoaders: [{ loader: '@next/font/google', options: { subsets: ['latin'] } }],
   },

package.json

@@ -43,7 +43,6 @@
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@typescript-eslint/eslint-plugin": "^6.7.0",

src/assets/vectors/icons/AdminIcon.tsx

+interface AdminIconProps {
+  className?: string;
+}
+
+export const AdminIcon = ({ className }: AdminIconProps): JSX.Element => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2028_6408)">
+      <path d="M9.62979 11.9854V13.5727C8.37738 13.5727 7.17627 14.0744 6.29068 14.9675C5.40509 15.8605 4.90757 17.0717 4.90757 18.3346H3.3335C3.3335 16.6507 3.99685 15.0358 5.17764 13.8451C6.35842 12.6544 7.95991 11.9854 9.62979 11.9854ZM9.62979 11.1918C7.02076 11.1918 4.90757 9.06082 4.90757 6.42987C4.90757 3.79892 7.02076 1.66797 9.62979 1.66797C12.2388 1.66797 14.352 3.79892 14.352 6.42987C14.352 9.06082 12.2388 11.1918 9.62979 11.1918ZM9.62979 9.60448C11.3691 9.60448 12.7779 8.18384 12.7779 6.42987C12.7779 4.6759 11.3691 3.25527 9.62979 3.25527C7.89044 3.25527 6.48164 4.6759 6.48164 6.42987C6.48164 8.18384 7.89044 9.60448 9.62979 9.60448ZM16.7131 14.3664H17.5002V18.3346H11.2039V14.3664H11.9909V13.5727C11.9909 12.9413 12.2397 12.3357 12.6825 11.8891C13.1253 11.4426 13.7258 11.1918 14.352 11.1918C14.9782 11.1918 15.5788 11.4426 16.0216 11.8891C16.4644 12.3357 16.7131 12.9413 16.7131 13.5727V14.3664ZM15.1391 14.3664V13.5727C15.1391 13.3622 15.0561 13.1604 14.9085 13.0115C14.7609 12.8627 14.5608 12.7791 14.352 12.7791C14.1433 12.7791 13.9431 12.8627 13.7955 13.0115C13.6479 13.1604 13.565 13.3622 13.565 13.5727V14.3664H15.1391Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2028_6408">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

src/assets/vectors/icons/ArrowIcon.tsx

+interface ArrowIconProps {
+  className?: string;
+}
+
+export const ArrowIcon = ({ className }: ArrowIconProps): JSX.Element => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2014_6288)">
+      <path d="M9.91683 7L5.8335 10.5V3.5L9.91683 7Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2014_6288">
+        <rect width="14" height="14" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

src/assets/vectors/icons/ChevronDownIcon.tsx

+interface ChevronDownIconProps {
+  className?: string;
+}
+
+export const ChevronDownIcon = ({ className }: ChevronDownIconProps): JSX.Element => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2005_6461)">
+      <path d="M6.99958 7.68437L9.88708 4.79687L10.7119 5.62171L6.99958 9.33404L3.28725 5.62171L4.11208 4.79687L6.99958 7.68437Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2005_6461">
+        <rect width="14" height="14" fill="white" transform="translate(14) rotate(90)" />
+      </clipPath>
+    </defs>
+  </svg>
+);

src/assets/vectors/icons/ChevronLeftIcon.tsx

+interface ChevronLeftIconProps {
+  className?: string;
+}
+
+export const ChevronLeftIcon = ({ className }: ChevronLeftIconProps): JSX.Element => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2005_6475)">
+      <path d="M6.31611 6.9986L9.20361 9.8861L8.37878 10.7109L4.66645 6.9986L8.37878 3.28627L9.20361 4.1111L6.31611 6.9986Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2005_6475">
+        <rect width="14" height="14" fill="white" transform="translate(14 14) rotate(-180)" />
+      </clipPath>
+    </defs>
+  </svg>
+);

src/assets/vectors/icons/ChevronRightIcon.tsx

+interface ChevronRightIconProps {
+  className?: string;
+}
+
+export const ChevronRightIcon = ({ className }: ChevronRightIconProps): JSX.Element => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2005_6453)">
+      <path
+        d="M7.68389 7.0014L4.79639 4.1139L5.62122 3.28906L9.33355 7.0014L5.62122 10.7137L4.79639 9.8889L7.68389 7.0014Z"
+        fill="#070130"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2005_6453">
+        <rect width="14" height="14" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

src/assets/vectors/icons/ChevronUpIcon.tsx

+interface ChevronUpIconProps {
+  className?: string;
+}
+
+export const ChevronUpIcon = ({ className }: ChevronUpIconProps): JSX.Element => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2005_6483)">
+      <path d="M7.00042 6.31563L4.11292 9.20312L3.28809 8.37829L7.00042 4.66596L10.7128 8.37829L9.88792 9.20312L7.00042 6.31563Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2005_6483">
+        <rect width="14" height="14" fill="white" transform="translate(0 14) rotate(-90)" />
+      </clipPath>
+    </defs>
+  </svg>
+);

src/assets/vectors/icons/DotsIcon.tsx

+interface DotsIconProps {
+  className?: string;
+}
+
+export const DotsIcon = ({ className }: DotsIconProps): JSX.Element => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M5.83317 7.00065C5.83317 7.64498 6.35551 8.16732 6.99984 8.16732C7.64417 8.16732 8.1665 7.64498 8.1665 7.00065C8.1665 6.35632 7.64417 5.83398 6.99984 5.83398C6.35551 5.83398 5.83317 6.35632 5.83317 7.00065Z" />
+    <path d="M5.83317 2.91667C5.83317 3.561 6.35551 4.08333 6.99984 4.08333C7.64417 4.08333 8.1665 3.561 8.1665 2.91667C8.1665 2.27233 7.64417 1.75 6.99984 1.75C6.35551 1.75 5.83317 2.27233 5.83317 2.91667Z" />
+    <path d="M5.83317 11.0827C5.83317 11.727 6.35551 12.2493 6.99984 12.2493C7.64417 12.2493 8.1665 11.727 8.1665 11.0827C8.1665 10.4384 7.64417 9.91602 6.99984 9.91602C6.35551 9.91602 5.83317 10.4383 5.83317 11.0827Z" />
+  </svg>
+);

src/assets/vectors/icons/ExportIcon.tsx

+interface ExportIconProps {
+  className?: string;
+}
+
+export const ExportIcon = ({ className }: ExportIconProps): JSX.Element => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M14.0134 6.01583L10.4149 1.66797L6.81641 6.01583H9.6952V13.9869H11.1346V6.01583H14.0134Z" />
+    <path d="M17.6138 18.3383H3.21985C3.10918 18.3384 2.99999 18.3127 2.90078 18.2633C2.80157 18.2139 2.71501 18.1422 2.64782 18.0536C2.58063 17.9651 2.53463 17.8621 2.51338 17.7528C2.49214 17.6434 2.49623 17.5306 2.52534 17.4231L4.68443 9.45203C4.72597 9.29862 4.81646 9.16323 4.94197 9.06671C5.06747 8.9702 5.22102 8.91794 5.37894 8.91797H7.53804V10.3673H5.92879L4.16265 16.889H16.671L14.9049 10.3673H13.2956V8.91797H15.4547C15.6127 8.91794 15.7662 8.9702 15.8917 9.06671C16.0172 9.16323 16.1077 9.29862 16.1492 9.45203L18.3083 17.4231C18.3374 17.5306 18.3415 17.6434 18.3203 17.7528C18.299 17.8621 18.253 17.9651 18.1859 18.0536C18.1187 18.1422 18.0321 18.2139 17.9329 18.2633C17.8337 18.3127 17.7245 18.3384 17.6138 18.3383Z" />
+  </svg>
+);

src/assets/vectors/icons/InfoIcon.tsx

+interface InfoIconProps {
+  className?: string;
+}
+
+export const InfoIcon = ({ className }: InfoIconProps): JSX.Element => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2005_6409)">
+      <path d="M9.99984 18.3346C5.39734 18.3346 1.6665 14.6038 1.6665 10.0013C1.6665 5.3988 5.39734 1.66797 9.99984 1.66797C14.6023 1.66797 18.3332 5.3988 18.3332 10.0013C18.3332 14.6038 14.6023 18.3346 9.99984 18.3346ZM9.99984 16.668C11.7679 16.668 13.4636 15.9656 14.7139 14.7153C15.9641 13.4651 16.6665 11.7694 16.6665 10.0013C16.6665 8.23319 15.9641 6.5375 14.7139 5.28726C13.4636 4.03701 11.7679 3.33464 9.99984 3.33464C8.23173 3.33464 6.53603 4.03701 5.28579 5.28726C4.03555 6.5375 3.33317 8.23319 3.33317 10.0013C3.33317 11.7694 4.03555 13.4651 5.28579 14.7153C6.53603 15.9656 8.23173 16.668 9.99984 16.668ZM9.1665 5.83464H10.8332V7.5013H9.1665V5.83464ZM9.1665 9.16797H10.8332V14.168H9.1665V9.16797Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2005_6409">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

src/assets/vectors/icons/LegendIcon.tsx

+interface LegendIconProps {
+  className?: string;
+}
+
+export const LegendIcon = ({ className }: LegendIconProps): JSX.Element => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2028_6411)">
+      <path d="M2.5 14.168H17.5V15.8346H2.5V14.168ZM2.5 9.16797H5V11.668H2.5V9.16797ZM6.66667 9.16797H9.16667V11.668H6.66667V9.16797ZM2.5 4.16797H5V6.66797H2.5V4.16797ZM10.8333 4.16797H13.3333V6.66797H10.8333V4.16797ZM15 4.16797H17.5V6.66797H15V4.16797ZM10.8333 9.16797H13.3333V11.668H10.8333V9.16797ZM15 9.16797H17.5V11.668H15V9.16797ZM6.66667 4.16797H9.16667V6.66797H6.66667V4.16797Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2028_6411">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

src/assets/vectors/icons/PageIcon.tsx

+interface PageIconProps {
+  className?: string;
+}
+
+export const PageIcon = ({ className }: PageIconProps): JSX.Element => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2028_6398)">
+      <path d="M3.50002 6.81797L7.83552 2.66797H15.7764C16.175 2.66797 16.5 2.98268 16.5 3.3541V15.8152C16.4998 15.9972 16.4242 16.1717 16.2897 16.3004C16.1552 16.429 15.9729 16.5013 15.7829 16.5013H4.21718C4.12234 16.5007 4.02856 16.4822 3.94118 16.4468C3.85381 16.4115 3.77457 16.36 3.70797 16.2953C3.64138 16.2306 3.58874 16.154 3.55305 16.0699C3.51737 15.9857 3.49935 15.8956 3.50002 15.8048V6.81797ZM8.55557 4.0513V7.50964H4.94446V15.118H15.0556V4.0513H8.55557Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2028_6398">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

src/assets/vectors/icons/PluginIcon.tsx

+interface PluginIconProps {
+  className?: string;
+}
+
+export const PluginIcon = ({ className }: PluginIconProps): JSX.Element => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15.5563 9.30382C15.3111 9.30382 15.0799 9.35382 14.8618 9.4316V5.13715H10.5674C10.6452 4.9191 10.6952 4.68785 10.6952 4.44271C10.6952 4.16912 10.6413 3.89821 10.5366 3.64545C10.4319 3.39269 10.2784 3.16302 10.085 2.96957C9.8915 2.77611 9.66184 2.62266 9.40907 2.51796C9.15631 2.41326 8.8854 2.35938 8.61182 2.35938C8.33823 2.35938 8.06732 2.41326 7.81456 2.51796C7.5618 2.62266 7.33213 2.77611 7.13868 2.96957C6.94522 3.16302 6.79177 3.39269 6.68707 3.64545C6.58237 3.89821 6.52848 4.16912 6.52848 4.44271C6.52848 4.68785 6.57848 4.9191 6.65626 5.13715H2.36182V9.30382C2.6354 9.30382 2.90631 9.35771 3.15907 9.4624C3.41184 9.5671 3.6415 9.72056 3.83496 9.91401C4.02841 10.1075 4.18187 10.3371 4.28657 10.5899C4.39126 10.8427 4.44515 11.1136 4.44515 11.3872C4.44515 11.6607 4.39126 11.9316 4.28657 12.1844C4.18187 12.4372 4.02841 12.6668 3.83496 12.8603C3.6415 13.0537 3.41184 13.2072 3.15907 13.3119C2.90631 13.4166 2.6354 13.4705 2.36182 13.4705V17.6372H6.52848C6.52848 17.0846 6.74798 16.5547 7.13868 16.164C7.52938 15.7733 8.05928 15.5538 8.61182 15.5538C9.16435 15.5538 9.69426 15.7733 10.085 16.164C10.4757 16.5547 10.6952 17.0846 10.6952 17.6372H14.8618V13.3427C15.0799 13.4205 15.3111 13.4705 15.5563 13.4705C15.8298 13.4705 16.1008 13.4166 16.3535 13.3119C16.6063 13.2072 16.8359 13.0537 17.0294 12.8603C17.2229 12.6668 17.3763 12.4372 17.481 12.1844C17.5857 11.9316 17.6396 11.6607 17.6396 11.3872C17.6396 11.1136 17.5857 10.8427 17.481 10.5899C17.3763 10.3371 17.2229 10.1075 17.0294 9.91401C16.8359 9.72056 16.6063 9.5671 16.3535 9.4624C16.1008 9.35771 15.8298 9.30382 15.5563 9.30382V9.30382Z"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="square"
+    />
+  </svg>
+);

src/assets/vectors/icons/PlusIcon.tsx

+interface PlusIconProps {
+  className?: string;
+}
+
+export const PlusIcon = ({ className }: PlusIconProps): JSX.Element => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2014_6319)">
+      <path d="M6.4165 6.41602V2.91602H7.58317V6.41602H11.0832V7.58268H7.58317V11.0827H6.4165V7.58268H2.9165V6.41602H6.4165Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2014_6319">
+        <rect width="14" height="14" rx="4" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

src/assets/vectors/icons/arrow.svg

-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2014_6288)">
-<path d="M9.91683 7L5.8335 10.5V3.5L9.91683 7Z" />
-</g>
-<defs>
-<clipPath id="clip0_2014_6288">
-<rect width="14" height="14" fill="white"/>
-</clipPath>
-</defs>
-</svg>