From beec1d92e7b64eb2fcf608dcad4bf8c91856ee57 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <augustin.mauroy@outlook.fr>
Date: Mon, 23 Dec 2024 11:38:47 +0100
Subject: [PATCH 1/6] feat(icons): introduce package manager

-npm

-pnpm

-yarn
---
 apps/site/components/.DS_Store                | Bin 0 -> 6148 bytes
 .../components/Icons/PackageManager/Npm.tsx   |  21 +++++++++++++++++
 .../components/Icons/PackageManager/Pnpm.tsx  |  22 ++++++++++++++++++
 .../components/Icons/PackageManager/Yarn.tsx  |  19 +++++++++++++++
 .../__design__/package-manager.stories.tsx    |  17 ++++++++++++++
 5 files changed, 79 insertions(+)
 create mode 100644 apps/site/components/.DS_Store
 create mode 100644 apps/site/components/Icons/PackageManager/Npm.tsx
 create mode 100644 apps/site/components/Icons/PackageManager/Pnpm.tsx
 create mode 100644 apps/site/components/Icons/PackageManager/Yarn.tsx
 create mode 100644 apps/site/components/__design__/package-manager.stories.tsx

diff --git a/apps/site/components/.DS_Store b/apps/site/components/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..ef9939cee6fcac97eefccb501b0d72c7498e093c
GIT binary patch
literal 6148
zcmeHKI|>3Z5S{S@f{mqRuHX%VXkqOI1O*#eLD70E&*jm4^J$jFP7CD?OkOgXmylQN
z?1+diZ-<4*OhhJdLwVTHH`_Pw*&rhdgyW3seS2w6=jPbUeHSq9ST?ekvosyP?a-(I
z6`%rCfC^B7Pb-iWb~63+!90%&P=TLUz`hR!ZdeoBK>u`L@D>0#Lf8#+?<Ii60>GNs
z1|kB}paO%c*<xtW5igln6WhR`i)Qnod9!ARqJBHhFP<)1136LwD$rG67|WT}|26zg
z|KBBXMFpt9Un!uY)poVSld`t<9%r?-z;|%VdBV*wcM1kC$3QQ~SXeopds5^Tn`6Hw
Uwt-GZ-0496445u7D)4OuUMe#bwEzGB

literal 0
HcmV?d00001

diff --git a/apps/site/components/Icons/PackageManager/Npm.tsx b/apps/site/components/Icons/PackageManager/Npm.tsx
new file mode 100644
index 0000000000000..5c895597c7f68
--- /dev/null
+++ b/apps/site/components/Icons/PackageManager/Npm.tsx
@@ -0,0 +1,21 @@
+import type { FC, SVGProps } from 'react';
+
+const NpmIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g fill="none" fill-rule="evenodd">
+      <rect width="24" height="24" fill="#D40001" />
+      <path
+        fill="#fff"
+        d="M16.7179487,7.92840493 L12.2051282,7.92840493 L12.2051282,20.2494172 L4,20.2494172 L4,3 L12.2051282,3 L20,3 L20,7.92840493 L20,20.2494172 L16.7179487,20.2494172 L16.7179487,7.92840493 Z"
+      />
+    </g>
+  </svg>
+);
+
+export default NpmIcon;
diff --git a/apps/site/components/Icons/PackageManager/Pnpm.tsx b/apps/site/components/Icons/PackageManager/Pnpm.tsx
new file mode 100644
index 0000000000000..7e7e25a048258
--- /dev/null
+++ b/apps/site/components/Icons/PackageManager/Pnpm.tsx
@@ -0,0 +1,22 @@
+import type { FC, SVGProps } from 'react';
+
+const PnpmIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M30,10.75H21.251V2H30Z" fill="#f9ad00" />
+    <path d="M20.374,10.75h-8.75V2h8.75Z" fill="#f9ad00" />
+    <path d="M10.749,10.75H2V2h8.749Z" fill="#f9ad00" />
+    <path d="M30,20.375H21.251v-8.75H30Z" fill="#f9ad00" />
+    <path d="M20.374,20.375h-8.75v-8.75h8.75Z" fill="#4e4e4e" />
+    <path d="M20.374,30h-8.75V21.25h8.75Z" fill="#4e4e4e" />
+    <path d="M30,30H21.251V21.25H30Z" fill="#4e4e4e" />
+    <path d="M10.749,30H2V21.25h8.749Z" fill="#4e4e4e" />
+  </svg>
+);
+
+export default PnpmIcon;
diff --git a/apps/site/components/Icons/PackageManager/Yarn.tsx b/apps/site/components/Icons/PackageManager/Yarn.tsx
new file mode 100644
index 0000000000000..1f58af505b1a6
--- /dev/null
+++ b/apps/site/components/Icons/PackageManager/Yarn.tsx
@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from 'react';
+
+/**
+ * @see https://github.com/yarnpkg/assets/blob/master/yarn-kitten-circle.svg
+ */
+const YarnIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 518 518" {...props}>
+    <path
+      fill="#2c8ebb"
+      d="M259 0c143 0 259 116 259 259S402 518 259 518 0 402 0 259 116 0 259 0z"
+    />
+    <path
+      fill="#fff"
+      d="M435.2 337.5c-1.8-14.2-13.8-24-29.2-23.8-23 .3-42.3 12.2-55.1 20.1-5 3.1-9.3 5.4-13 7.1.8-11.6.1-26.8-5.9-43.5-7.3-20-17.1-32.3-24.1-39.4 8.1-11.8 19.2-29 24.4-55.6 4.5-22.7 3.1-58-7.2-77.8-2.1-4-5.6-6.9-10-8.1-1.8-.5-5.2-1.5-11.9.4C293.1 96 289.6 93.8 286.9 92c-5.6-3.6-12.2-4.4-18.4-2.1-8.3 3-15.4 11-22.1 25.2-1 2.1-1.9 4.1-2.7 6.1-12.7.9-32.7 5.5-49.6 23.8-2.1 2.3-6.2 4-10.5 5.6h.1c-8.8 3.1-12.8 10.3-17.7 23.3-6.8 18.2.2 36.1 7.1 47.7-9.4 8.4-21.9 21.8-28.5 37.5-8.2 19.4-9.1 38.4-8.8 48.7-7 7.4-17.8 21.3-19 36.9-1.6 21.8 6.3 36.6 9.8 42 1 1.6 2.1 2.9 3.3 4.2-.4 2.7-.5 5.6.1 8.6 1.3 7 5.7 12.7 12.4 16.3 13.2 7 31.6 10 45.8 2.9 5.1 5.4 14.4 10.6 31.3 10.6h1c4.3 0 58.9-2.9 74.8-6.8 7.1-1.7 12-4.7 15.2-7.4 10.2-3.2 38.4-12.8 65-30 18.8-12.2 25.3-14.8 39.3-18.2 13.6-3.3 22.1-15.7 20.4-29.4zm-23.8 14.7c-16 3.8-24.1 7.3-43.9 20.2-30.9 20-64.7 29.3-64.7 29.3s-2.8 4.2-10.9 6.1c-14 3.4-66.7 6.3-71.5 6.4-12.9.1-20.8-3.3-23-8.6-6.7-16 9.6-23 9.6-23s-3.6-2.2-5.7-4.2c-1.9-1.9-3.9-5.7-4.5-4.3-2.5 6.1-3.8 21-10.5 27.7-9.2 9.3-26.6 6.2-36.9.8-11.3-6 .8-20.1.8-20.1s-6.1 3.6-11-3.8c-4.4-6.8-8.5-18.4-7.4-32.7 1.2-16.3 19.4-32.1 19.4-32.1s-3.2-24.1 7.3-48.8c9.5-22.5 35.1-40.6 35.1-40.6s-21.5-23.8-13.5-45.2c5.2-14 7.3-13.9 9-14.5 6-2.3 11.8-4.8 16.1-9.5 21.5-23.2 48.9-18.8 48.9-18.8s13-39.5 25-31.8c3.7 2.4 17 32 17 32s14.2-8.3 15.8-5.2c8.6 16.7 9.6 48.6 5.8 68-6.4 32-22.4 49.2-28.8 60-1.5 2.5 17.2 10.4 29 43.1 10.9 29.9 1.2 55 2.9 57.8.3.5.4.7.4.7s12.5 1 37.6-14.5c13.4-8.3 29.3-17.6 47.4-17.8 17.5-.3 18.4 20.2 5.2 23.4z"
+    />
+  </svg>
+);
+
+export default YarnIcon;
diff --git a/apps/site/components/__design__/package-manager.stories.tsx b/apps/site/components/__design__/package-manager.stories.tsx
new file mode 100644
index 0000000000000..6707083b4f510
--- /dev/null
+++ b/apps/site/components/__design__/package-manager.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import NpmIcon from '@/components/Icons/PackageManager/Npm';
+import PnpmIcon from '@/components/Icons/PackageManager/Pnpm';
+import YarnIcon from '@/components/Icons/PackageManager/Yarn';
+
+export const PackageManager: StoryObj = {
+  render: () => (
+    <div className="flex space-x-4">
+      <NpmIcon width={64} height={64} />
+      <PnpmIcon width={64} height={64} />
+      <YarnIcon width={64} height={64} />
+    </div>
+  ),
+};
+
+export default { title: 'Design System' } as MetaObj;

From 11a1aaaf1656b744f07b95037658e4fec4cd7342 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <augustin.mauroy@outlook.fr>
Date: Mon, 23 Dec 2024 11:43:29 +0100
Subject: [PATCH 2/6] fix: svg in tsx

---
 apps/site/components/Icons/PackageManager/Npm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/site/components/Icons/PackageManager/Npm.tsx b/apps/site/components/Icons/PackageManager/Npm.tsx
index 5c895597c7f68..989ece9979787 100644
--- a/apps/site/components/Icons/PackageManager/Npm.tsx
+++ b/apps/site/components/Icons/PackageManager/Npm.tsx
@@ -8,7 +8,7 @@ const NpmIcon: FC<SVGProps<SVGSVGElement>> = props => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <g fill="none" fill-rule="evenodd">
+    <g fill="none" fillRule="evenodd">
       <rect width="24" height="24" fill="#D40001" />
       <path
         fill="#fff"

From ea631998bb5d3962e82eb2fbf2669b9306eb8e0e Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <augustin.mauroy@outlook.fr>
Date: Mon, 23 Dec 2024 11:56:13 +0100
Subject: [PATCH 3/6] add jsdoc for provenance

---
 apps/site/components/Icons/PackageManager/Npm.tsx  | 3 +++
 apps/site/components/Icons/PackageManager/Pnpm.tsx | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/apps/site/components/Icons/PackageManager/Npm.tsx b/apps/site/components/Icons/PackageManager/Npm.tsx
index 989ece9979787..24911afb459a7 100644
--- a/apps/site/components/Icons/PackageManager/Npm.tsx
+++ b/apps/site/components/Icons/PackageManager/Npm.tsx
@@ -1,5 +1,8 @@
 import type { FC, SVGProps } from 'react';
 
+/**
+ * @see https://github.com/npm/logos/blob/master/npm%20square/n.svg
+ */
 const NpmIcon: FC<SVGProps<SVGSVGElement>> = props => (
   <svg
     width="800px"
diff --git a/apps/site/components/Icons/PackageManager/Pnpm.tsx b/apps/site/components/Icons/PackageManager/Pnpm.tsx
index 7e7e25a048258..f2a85a5c2174a 100644
--- a/apps/site/components/Icons/PackageManager/Pnpm.tsx
+++ b/apps/site/components/Icons/PackageManager/Pnpm.tsx
@@ -1,5 +1,8 @@
 import type { FC, SVGProps } from 'react';
 
+/**
+ * @see https://pnpm.io/logos
+ */
 const PnpmIcon: FC<SVGProps<SVGSVGElement>> = props => (
   <svg
     width="800px"

From 939ebe3ad6ec6daf1164e665f329e730a02510f8 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <augustin.mauroy@outlook.fr>
Date: Mon, 23 Dec 2024 23:03:39 +0100
Subject: [PATCH 4/6] use righ size

---
 apps/site/components/Icons/PackageManager/Npm.tsx  | 4 ++--
 apps/site/components/Icons/PackageManager/Pnpm.tsx | 4 ++--
 apps/site/components/Icons/PackageManager/Yarn.tsx | 8 +++++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/site/components/Icons/PackageManager/Npm.tsx b/apps/site/components/Icons/PackageManager/Npm.tsx
index 24911afb459a7..b59d06d75e024 100644
--- a/apps/site/components/Icons/PackageManager/Npm.tsx
+++ b/apps/site/components/Icons/PackageManager/Npm.tsx
@@ -5,8 +5,8 @@ import type { FC, SVGProps } from 'react';
  */
 const NpmIcon: FC<SVGProps<SVGSVGElement>> = props => (
   <svg
-    width="800px"
-    height="800px"
+    width="32px"
+    height="32px"
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
diff --git a/apps/site/components/Icons/PackageManager/Pnpm.tsx b/apps/site/components/Icons/PackageManager/Pnpm.tsx
index f2a85a5c2174a..ec789e6e44722 100644
--- a/apps/site/components/Icons/PackageManager/Pnpm.tsx
+++ b/apps/site/components/Icons/PackageManager/Pnpm.tsx
@@ -5,8 +5,8 @@ import type { FC, SVGProps } from 'react';
  */
 const PnpmIcon: FC<SVGProps<SVGSVGElement>> = props => (
   <svg
-    width="800px"
-    height="800px"
+    width="32px"
+    height="32px"
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
diff --git a/apps/site/components/Icons/PackageManager/Yarn.tsx b/apps/site/components/Icons/PackageManager/Yarn.tsx
index 1f58af505b1a6..eb59c278f344f 100644
--- a/apps/site/components/Icons/PackageManager/Yarn.tsx
+++ b/apps/site/components/Icons/PackageManager/Yarn.tsx
@@ -4,7 +4,13 @@ import type { FC, SVGProps } from 'react';
  * @see https://github.com/yarnpkg/assets/blob/master/yarn-kitten-circle.svg
  */
 const YarnIcon: FC<SVGProps<SVGSVGElement>> = props => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 518 518" {...props}>
+  <svg
+    width="32px"
+    height="32px"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 518 518"
+    {...props}
+  >
     <path
       fill="#2c8ebb"
       d="M259 0c143 0 259 116 259 259S402 518 259 518 0 402 0 259 116 0 259 0z"

From 5aa21df1763b95d53025d3acf14fbbdf67163231 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <augustin.mauroy@outlook.fr>
Date: Mon, 23 Dec 2024 23:19:17 +0100
Subject: [PATCH 5/6] Delete .DS_Store

---
 apps/site/components/.DS_Store | Bin 6148 -> 0 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 apps/site/components/.DS_Store

diff --git a/apps/site/components/.DS_Store b/apps/site/components/.DS_Store
deleted file mode 100644
index ef9939cee6fcac97eefccb501b0d72c7498e093c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHKI|>3Z5S{S@f{mqRuHX%VXkqOI1O*#eLD70E&*jm4^J$jFP7CD?OkOgXmylQN
z?1+diZ-<4*OhhJdLwVTHH`_Pw*&rhdgyW3seS2w6=jPbUeHSq9ST?ekvosyP?a-(I
z6`%rCfC^B7Pb-iWb~63+!90%&P=TLUz`hR!ZdeoBK>u`L@D>0#Lf8#+?<Ii60>GNs
z1|kB}paO%c*<xtW5igln6WhR`i)Qnod9!ARqJBHhFP<)1136LwD$rG67|WT}|26zg
z|KBBXMFpt9Un!uY)poVSld`t<9%r?-z;|%VdBV*wcM1kC$3QQ~SXeopds5^Tn`6Hw
Uwt-GZ-0496445u7D)4OuUMe#bwEzGB


From 509311a2cd2a6d763f823dad6443d6f03c476e96 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@gnome.org>
Date: Tue, 24 Dec 2024 19:01:27 +0000
Subject: [PATCH 6/6] chore: remove unnecessary see tags

---
 apps/site/components/Icons/PackageManager/Npm.tsx  | 3 ---
 apps/site/components/Icons/PackageManager/Pnpm.tsx | 3 ---
 apps/site/components/Icons/PackageManager/Yarn.tsx | 3 ---
 3 files changed, 9 deletions(-)

diff --git a/apps/site/components/Icons/PackageManager/Npm.tsx b/apps/site/components/Icons/PackageManager/Npm.tsx
index b59d06d75e024..88b3d3b3fd738 100644
--- a/apps/site/components/Icons/PackageManager/Npm.tsx
+++ b/apps/site/components/Icons/PackageManager/Npm.tsx
@@ -1,8 +1,5 @@
 import type { FC, SVGProps } from 'react';
 
-/**
- * @see https://github.com/npm/logos/blob/master/npm%20square/n.svg
- */
 const NpmIcon: FC<SVGProps<SVGSVGElement>> = props => (
   <svg
     width="32px"
diff --git a/apps/site/components/Icons/PackageManager/Pnpm.tsx b/apps/site/components/Icons/PackageManager/Pnpm.tsx
index ec789e6e44722..d5607de90a3db 100644
--- a/apps/site/components/Icons/PackageManager/Pnpm.tsx
+++ b/apps/site/components/Icons/PackageManager/Pnpm.tsx
@@ -1,8 +1,5 @@
 import type { FC, SVGProps } from 'react';
 
-/**
- * @see https://pnpm.io/logos
- */
 const PnpmIcon: FC<SVGProps<SVGSVGElement>> = props => (
   <svg
     width="32px"
diff --git a/apps/site/components/Icons/PackageManager/Yarn.tsx b/apps/site/components/Icons/PackageManager/Yarn.tsx
index eb59c278f344f..90635eea6ccca 100644
--- a/apps/site/components/Icons/PackageManager/Yarn.tsx
+++ b/apps/site/components/Icons/PackageManager/Yarn.tsx
@@ -1,8 +1,5 @@
 import type { FC, SVGProps } from 'react';
 
-/**
- * @see https://github.com/yarnpkg/assets/blob/master/yarn-kitten-circle.svg
- */
 const YarnIcon: FC<SVGProps<SVGSVGElement>> = props => (
   <svg
     width="32px"