From ea08b0dc942568cc5868ae95ac8922a3d36b1ab6 Mon Sep 17 00:00:00 2001
From: MarcosPierasNL <pieras.marcos@gmail.com>
Date: Wed, 3 Jul 2024 11:45:28 +0200
Subject: [PATCH] feat: add Carbon icons
---
.../lib/assets/carbonIcons/carbonIcons.tsx | 56 +++++++++++++++++++
.../lib/components/CardToolTipVis/index.tsx | 25 ++++++++-
.../lib/components/icon/icon.stories.tsx | 13 +++--
libs/shared/lib/components/icon/index.tsx | 34 +++++++++--
4 files changed, 118 insertions(+), 10 deletions(-)
create mode 100644 libs/shared/lib/assets/carbonIcons/carbonIcons.tsx
diff --git a/libs/shared/lib/assets/carbonIcons/carbonIcons.tsx b/libs/shared/lib/assets/carbonIcons/carbonIcons.tsx
new file mode 100644
index 000000000..de379ae1d
--- /dev/null
+++ b/libs/shared/lib/assets/carbonIcons/carbonIcons.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+
+export function CarbonStringInteger(props: SVGProps<SVGSVGElement>) {
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 32 32" {...props}>
+ <path
+ fill="currentColor"
+ d="M26 12h-4v2h4v2h-3v2h3v2h-4v2h4a2.003 2.003 0 0 0 2-2v-6a2 2 0 0 0-2-2m-7 10h-6v-4a2 2 0 0 1 2-2h2v-2h-4v-2h4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2v2h4zM8 20v-8H6v1H4v2h2v5H4v2h6v-2z"
+ ></path>
+ </svg>
+ );
+}
+
+export function CarbonStringText(props: SVGProps<SVGSVGElement>) {
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 32 32" {...props}>
+ <path
+ fill="currentColor"
+ d="M29 22h-5a2.003 2.003 0 0 1-2-2v-6a2 2 0 0 1 2-2h5v2h-5v6h5zM18 12h-4V8h-2v14h6a2.003 2.003 0 0 0 2-2v-6a2 2 0 0 0-2-2m-4 8v-6h4v6zm-6-8H3v2h5v2H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h6v-8a2 2 0 0 0-2-2m0 8H4v-2h4z"
+ ></path>
+ </svg>
+ );
+}
+
+export function CarbonCalendar(props: SVGProps<SVGSVGElement>) {
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 32 32" {...props}>
+ <path
+ fill="currentColor"
+ d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 22H6V12h20zm0-16H6V6h4v2h2V6h8v2h2V6h4z"
+ ></path>
+ </svg>
+ );
+}
+
+export function CarbonBoolean(props: SVGProps<SVGSVGElement>) {
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 32 32" {...props}>
+ <path fill="currentColor" d="M23 23a7 7 0 1 1 7-7a7.01 7.01 0 0 1-7 7m0-12a5 5 0 1 0 5 5a5.006 5.006 0 0 0-5-5"></path>
+ <circle cx={9} cy={16} r={7} fill="currentColor"></circle>
+ </svg>
+ );
+}
+
+export function CarbonUndefined(props: SVGProps<SVGSVGElement>) {
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 32 32" {...props}>
+ <path fill="currentColor" d="M11 14h10v4H11z"></path>
+ <path
+ fill="currentColor"
+ d="M29.391 14.527L17.473 2.609A2.08 2.08 0 0 0 16 2c-.533 0-1.067.203-1.473.609L2.609 14.527C2.203 14.933 2 15.466 2 16s.203 1.067.609 1.473L14.526 29.39c.407.407.941.61 1.474.61s1.067-.203 1.473-.609L29.39 17.474c.407-.407.61-.94.61-1.474s-.203-1.067-.609-1.473M16 28.036L3.965 16L16 3.964L28.036 16z"
+ ></path>
+ </svg>
+ );
+}
diff --git a/libs/shared/lib/components/CardToolTipVis/index.tsx b/libs/shared/lib/components/CardToolTipVis/index.tsx
index 7a274cdeb..6adfd9abb 100644
--- a/libs/shared/lib/components/CardToolTipVis/index.tsx
+++ b/libs/shared/lib/components/CardToolTipVis/index.tsx
@@ -1,8 +1,15 @@
import React from 'react';
import { Icon } from '@graphpolaris/shared/lib/components/icon';
-import { AbcOutlined, Settings, Numbers } from '@mui/icons-material';
+import { Numbers } from '@mui/icons-material';
import styles from './cardtooltipvis.module.scss';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip';
+import {
+ CarbonStringInteger,
+ CarbonStringText,
+ CarbonCalendar,
+ CarbonBoolean,
+ CarbonUndefined,
+} from '@graphpolaris/shared/lib/assets/carbonIcons/carbonIcons';
export type CardToolTipVisProps = {
type: string;
@@ -79,7 +86,21 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
{type === 'schema' ? (
<Icon
className="ml-auto text-right"
- component={v === 'int' ? <Settings /> : <AbcOutlined />}
+ component={
+ v === 'int' || v === 'float' ? (
+ <CarbonStringInteger />
+ ) : v === 'string' ? (
+ <CarbonStringText />
+ ) : v === 'boolean' ? (
+ <CarbonBoolean />
+ ) : v === 'date' ? (
+ <CarbonCalendar />
+ ) : v === 'undefined' ? (
+ <CarbonUndefined />
+ ) : (
+ <CarbonUndefined />
+ )
+ }
color="hsl(var(--clr-sec--400))"
size={24}
/>
diff --git a/libs/shared/lib/components/icon/icon.stories.tsx b/libs/shared/lib/components/icon/icon.stories.tsx
index cad42fd6e..9277a7c9f 100644
--- a/libs/shared/lib/components/icon/icon.stories.tsx
+++ b/libs/shared/lib/components/icon/icon.stories.tsx
@@ -1,7 +1,7 @@
import { StoryObj, Meta } from '@storybook/react';
import { Icon } from '../icon';
-import { ArrowBack, DeleteOutline, KeyboardArrowLeft, Settings } from '@mui/icons-material';
-
+import { ArrowBack } from '@mui/icons-material';
+import { CarbonStringInteger } from '@graphpolaris/shared/lib/assets/carbonIcons/carbonIcons';
const Component: Meta<typeof Icon> = {
title: 'Components/Icon',
component: Icon,
@@ -21,8 +21,13 @@ const Component: Meta<typeof Icon> = {
export default Component;
type Story = StoryObj<typeof Component>;
-export const BaseIcon: Story = (args: any) => {
+export const MUIIcon: Story = (args: any) => {
return <Icon component={<ArrowBack />} size={24} {...args} />;
};
-BaseIcon.args = {};
+export const CarbonIcon: Story = (args: any) => {
+ return <Icon component={<CarbonStringInteger />} size={24} {...args} />;
+};
+
+MUIIcon.args = {};
+CarbonIcon.args = {};
diff --git a/libs/shared/lib/components/icon/index.tsx b/libs/shared/lib/components/icon/index.tsx
index 16d82c18e..aa206f3a0 100644
--- a/libs/shared/lib/components/icon/index.tsx
+++ b/libs/shared/lib/components/icon/index.tsx
@@ -1,18 +1,44 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
import { SVGProps } from 'react';
+// Define Sizes and IconProps types
export type Sizes = 12 | 14 | 16 | 20 | 24 | 28 | 32 | 40;
export type IconProps = SVGProps<SVGSVGElement> & {
- component: ReactElement<any>;
+ component: ReactNode | ReactElement<any>;
size?: Sizes;
color?: string;
};
+// Icon component definition
export const Icon: React.FC<IconProps> = ({ component, size = 24, color, ...props }) => {
if (!component) {
- console.error(`No icon found`);
+ console.error('No icon found');
return <div></div>;
}
- return React.cloneElement(component, { style: { fontSize: size, color: color }, width: size, height: size, ...props });
+ const style = { fontSize: size, color };
+
+ // Check if component is a valid React element
+ if (React.isValidElement(component)) {
+ return React.cloneElement(component as ReactElement<any>, {
+ style: { ...style, ...(component as ReactElement<any>).props.style },
+ width: size,
+ height: size,
+ ...props,
+ });
+ }
+
+ // Check if component is a function (assume it's a custom SVG component)
+ if (typeof component === 'function') {
+ // Render the custom SVG component directly
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 32 32" style={style} {...props}>
+ {(component as () => ReactNode)()}
+ </svg>
+ );
+ }
+
+ // Default case: render null or fallback
+ console.error('Unsupported icon type');
+ return null;
};
--
GitLab