Shared UI/icones

package.json

@@ -25,8 +25,7 @@
 	"dependencies": {
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
-		"react-is": "18.3.1",
-		"styled-components": "5.3.6"
+		"react-is": "18.3.1"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.25.7",
@@ -54,6 +53,7 @@
 		"@radix-ui/themes": "^3.1.4",
 		"@storybook/addon-essentials": "8.3.4",
 		"@storybook/addon-interactions": "^8.2.8",
+		"@storybook/addon-storysource": "^8.3.5",
 		"@storybook/core-server": "8.3.4",
 		"@storybook/jest": "^0.2.3",
 		"@storybook/react-vite": "8.3.4",
@@ -95,6 +95,7 @@
 		"react-router-dom": "^6.26.2",
 		"remove": "^0.1.5",
 		"storybook": "8.3.4",
+		"styled-components": "5.3.6",
 		"ts-jest": "^29.1.0",
 		"ts-node": "10.9.1",
 		"tslib": "^2.3.0",

shared-ui/.storybook/main.ts

@@ -2,7 +2,11 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
 	stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
-	addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+	addons: [
+		'@storybook/addon-essentials',
+		'@storybook/addon-storysource',
+		'@storybook/addon-interactions',
+	],
 	framework: {
 		name: '@storybook/react-vite',
 		options: {
@@ -11,6 +15,9 @@ const config: StorybookConfig = {
 			},
 		},
 	},
+	docs: {
+		autodocs: true,
+	},
 };
 
 export default config;

shared-ui/.storybook/preview.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+import { GlobalStyle } from '../src/lib/styles/GlobalStyle';
+
+const withGlobalStyle = (storyFn: () => JSX.Element) => (
+	<>
+		<GlobalStyle />
+		{storyFn()}
+	</>
+);
+
+const preview: Preview = {
+	globalTypes: {
+		theme: {
+			description: 'Global theme for components',
+			toolbar: {
+				// The label to show for this toolbar item
+				title: 'Theme',
+				icon: 'circlehollow',
+				// Array of plain string values or MenuItem shape (see below)
+				items: ['light', 'dark'],
+				// Change title based on selected value
+				dynamicTitle: true,
+			},
+		},
+	},
+	initialGlobals: {
+		theme: 'light',
+	},
+	decorators: [withGlobalStyle],
+};
+
+export default preview;

shared-ui/src/index.ts

@@ -15,6 +15,7 @@ export * from './lib/Main/MainContent';
 export * from './lib/Menu/index';
 export * from './lib/Navigation/MenuItem/index';
 export * from './lib/styles';
+export * from './lib/styles/utiles/index';
 export * from './lib/Text/index';
 export * from './lib/styles/styled.d';
 export * from './lib/styles/GlobalStyle';

shared-ui/src/lib/Head/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import { fontUrl } from '../styles';
 interface HeadProps {
 	title: string;
 	description: string;
@@ -11,10 +12,7 @@ export const Head = ({ title, description, keywords }: HeadProps) => {
 			<title>{title}</title>
 			<meta name="description" content={description} />
 			<meta name="keywords" content={keywords} />
-			<link
-				rel="stylesheet"
-				href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
-			/>
+			<link rel="stylesheet" href={fontUrl} />
 		</Helmet>
 	);
 };

shared-ui/src/lib/Icones/Icon.stories.tsx

@@ -0,0 +1,88 @@
+import styled, { css } from 'styled-components';
+import { Icon, IconProps } from './Icon';
+import { icons } from './paths';
+
+const Meta = styled.div`
+	color: #666;
+	font-size: 12px;
+`;
+
+const Item = styled.li<{ minimal?: boolean }>`
+	display: inline-flex;
+	flex-direction: row;
+	align-items: center;
+	flex: 0 1 16%;
+	min-width: 120px;
+	margin: 16px;
+
+	svg {
+		margin-right: 6px;
+		width: 14px;
+		height: 14px;
+	}
+
+	${(props) =>
+		props.minimal &&
+		css`
+			flex: none;
+			min-width: auto;
+			padding: 0;
+			background: #fff;
+			margin: 16px;
+
+			svg {
+				display: block;
+				margin-right: 0;
+				width: 14px;
+				height: 14px;
+			}
+		`};
+`;
+
+const List = styled.ul`
+	display: flex;
+	flex-flow: row wrap;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+`;
+
+const Header = styled.h2`
+	font-size: 16px;
+	margin: 16px;
+`;
+
+export default {
+	title: 'Icon',
+	component: Icon,
+};
+
+export const Basic = (args: IconProps) => <Icon {...args} />;
+Basic.args = { icon: 'watch' };
+
+export const Labels = () => (
+	<>
+		<Header>{Object.keys(icons).length} icons</Header>
+		<List>
+			{Object.keys(icons).map((key) => (
+				<Item key={key}>
+					<Icon icon={key as keyof typeof icons} aria-hidden />
+					<Meta>{key}</Meta>
+				</Item>
+			))}
+		</List>
+	</>
+);
+
+export const NoLabels = () => (
+	<>
+		<Header>{Object.keys(icons).length} icons</Header>
+		<List>
+			{Object.keys(icons).map((key) => (
+				<Item minimal key={key}>
+					<Icon icon={key as keyof typeof icons} aria-label={key} />
+				</Item>
+			))}
+		</List>
+	</>
+);

shared-ui/src/lib/Icones/Icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+import { icons } from './paths';
+export type IconType = keyof typeof icons;
+
+export interface IconProps {
+	icon: IconType;
+}
+
+const Svg = styled.svg`
+	display: inline-block;
+	shape-rendering: inherit;
+	transform: translate3d(0, 0, 0);
+	vertical-align: middle;
+
+	path {
+		fill: currentColor;
+	}
+`;
+
+export const Icon: React.FC<IconProps> = ({ icon, ...props }: IconProps) => {
+	return (
+		<Svg viewBox="0 0 16 16" width="16px" height="16px" {...props}>
+			{icons[icon]}
+		</Svg>
+	);
+};