feat: add custom icons (#6)

packages/react-front-kit/src/1-styleGuide/Icons.stories.tsx

@@ -0,0 +1,64 @@
+import type { Icon, IconProps } from '@phosphor-icons/react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Center, Grid, Text } from '@mantine/core';
+
+import { customIcons, icons, phosphorIcons } from '../icons';
+
+const meta = {
+  argTypes: {
+    size: {
+      control: { max: 48, min: 8, step: 1, type: 'range' },
+    },
+    weight: {
+      control: 'select',
+      options: ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'],
+    },
+  },
+  component: icons.Activity,
+  title: '1-StyleGuide/Icons',
+} satisfies Meta<typeof icons.Activity>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+function render(icons: Record<string, Icon>) {
+  return function Render(props: IconProps): JSX.Element {
+    return (
+      <Grid>
+        {Object.entries(icons).map(([key, IconCmp]) => {
+          return (
+            <Grid.Col key={key} span={1} title={key}>
+              <Center sx={{ flexDirection: 'column' }}>
+                <Text fz="xs" lineClamp={1} sx={{ maxWidth: '100%' }}>
+                  {key}
+                </Text>
+                <IconCmp {...props} />
+              </Center>
+            </Grid.Col>
+          );
+        })}
+      </Grid>
+    );
+  };
+}
+
+export const CustomIcons: IStory = {
+  args: {
+    color: '#000',
+    mirrored: false,
+    size: 32,
+    weight: 'regular',
+  },
+  render: render(customIcons),
+};
+
+export const PhosphorIcons: IStory = {
+  args: {
+    color: '#000',
+    mirrored: false,
+    size: 32,
+    weight: 'regular',
+  },
+  render: render(phosphorIcons),
+};

packages/react-front-kit/src/1-styleGuide/Icons/ColumnPlus.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import type { Icon, IconProps, IconWeight } from '@phosphor-icons/react';
+import type { ReactElement } from 'react';
+
+import { IconBase } from '@phosphor-icons/react';
+import { forwardRef } from 'react';
+
+const weights = new Map<IconWeight, ReactElement>([
+  [
+    'regular',
+    <>
+      <path
+        d="M3 1.86005V10.11"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.99988 1.875V10.125"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.0083 1.88995V6.76495"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.9812 8.63989V10.8899"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.8562 9.76489H10.1062"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </>,
+  ],
+]);
+
+export const ColumnPlus: Icon = forwardRef<SVGSVGElement, IconProps>(
+  function ColumnPlus(props, ref) {
+    return (
+      <IconBase
+        ref={ref}
+        {...props}
+        fill="none"
+        viewBox="0 0 12 12"
+        weights={weights}
+      />
+    );
+  },
+);

packages/react-front-kit/src/1-styleGuide/Icons/FolderMove.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import type { Icon, IconProps, IconWeight } from '@phosphor-icons/react';
+import type { ReactElement } from 'react';
+
+import { IconBase } from '@phosphor-icons/react';
+import { forwardRef } from 'react';
+
+const weights = new Map<IconWeight, ReactElement>([
+  [
+    'regular',
+    <>
+      <path
+        d="M3.58333 10H1.41667C1.30616 10 1.20018 9.95564 1.12204 9.87668C1.0439 9.79771 1 9.69062 1 9.57895V2.42105C1 2.30938 1.0439 2.20229 1.12204 2.12332C1.20018 2.04436 1.30616 2 1.41667 2H4.19271C4.2828 2.00037 4.37041 2.02988 4.44271 2.08421L5.89062 3.17895C5.96292 3.23327 6.05053 3.26278 6.14062 3.26316H10.5833C10.6938 3.26316 10.7998 3.30752 10.878 3.38648C10.9561 3.46544 11 3.57254 11 3.68421V5.36842"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6 9H11"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 7L11 9L9 11"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </>,
+  ],
+]);
+
+export const FolderMove: Icon = forwardRef<SVGSVGElement, IconProps>(
+  function FolderMove(props, ref) {
+    return (
+      <IconBase
+        ref={ref}
+        {...props}
+        fill="none"
+        viewBox="0 0 12 12"
+        weights={weights}
+      />
+    );
+  },
+);

packages/react-front-kit/src/1-styleGuide/Icons/index.ts

@@ -0,0 +1,3 @@
+/* eslint react-refresh/only-export-components: 0 */
+export * from './ColumnPlus';
+export * from './FolderMove';

packages/react-front-kit/src/icons.tsx

@@ -1,14 +1,19 @@
+/* eslint-disable react-refresh/only-export-components */
 import type { Icon } from '@phosphor-icons/react';
 
-import * as Icons from '@phosphor-icons/react';
+import * as ppIcons from '@phosphor-icons/react';
+
+import * as customIcons from './1-styleGuide/Icons';
 
 const iconsToIgnore = ['IconBase', 'IconContext'];
-const iconEntries = Object.entries(Icons).filter(
+const phosphorIconsEntries = Object.entries(ppIcons).filter(
   ([key]) => !iconsToIgnore.includes(key),
 ) as [string, Icon][];
 
-export const icons = Object.fromEntries(iconEntries);
+export * as customIcons from './1-styleGuide/Icons';
+export const phosphorIcons = Object.fromEntries(phosphorIconsEntries);
+export const icons: Record<string, Icon> = { ...customIcons, ...phosphorIcons };
 
 export const iconsElements = Object.fromEntries(
-  iconEntries.map(([key, Icon]) => [key, <Icon key={key} />]),
+  Object.entries(icons).map(([key, Icon]) => [key, <Icon key={key} />]),
 );

packages/react-front-kit/src/index.tsx

@@ -1,5 +1,6 @@
-/* eslint react-refresh/only-export-components: 0 */
+/* eslint-disable react-refresh/only-export-components */
 // component exports
+export * from './1-styleGuide/Icons';
 export * from './3-custom/Components/Breadcrumbs/Breadcrumbs';
 export * from './3-custom/Components/CollapseButton/CollapseButton';
 export * from './3-custom/Components/SidebarMenu/SidebarMenu';