Merge pull request #69 from Gkuzin13/dev

Dev

apps/client/src/components/Elements/Icon/ExtraLarge/ExtraLarge.styled.ts

@@ -0,0 +1,11 @@
+import { styled } from 'shared';
+
+export const Root = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  svg: {
+    margin: '0 -$1',
+    padding: '1px',
+  },
+});

apps/client/src/components/Elements/Icon/ExtraLarge/ExtraLarge.tsx

@@ -0,0 +1,14 @@
+import { TbLetterL, TbLetterX } from 'react-icons/tb';
+import * as Styled from './ExtraLarge.styled';
+import type { IconBaseProps } from 'react-icons';
+
+const ExtraLarge = (props: IconBaseProps) => {
+  return (
+    <Styled.Root>
+      <TbLetterX {...props} name="letterX" size="lg" />
+      <TbLetterL {...props} name="letterL" size="lg" />
+    </Styled.Root>
+  );
+};
+
+export default ExtraLarge;

apps/client/src/components/Elements/Icon/FilledSolid/FilledSolid.styled.ts

@@ -0,0 +1,6 @@
+import { TbSquaresFilled } from 'react-icons/tb';
+import { styled } from 'shared';
+
+export const Root = styled(TbSquaresFilled, {
+  transform: 'rotate(-90deg)',
+});

apps/client/src/components/Elements/Icon/FilledSolid/FilledSolid.tsx

@@ -0,0 +1,8 @@
+import * as Styled from './FilledSolid.styled';
+import type { IconBaseProps } from 'react-icons';
+
+const FilledSolid = (props: IconBaseProps) => {
+  return <Styled.Root {...props} />;
+};
+
+export default FilledSolid;

apps/client/src/components/Elements/Icon/Icon.tsx

@@ -1,5 +1,9 @@
-import type { IconBaseProps } from 'react-icons';
 import * as Icons from 'react-icons/tb';
+import ExtraLarge from './ExtraLarge/ExtraLarge';
+import FilledSolid from './FilledSolid/FilledSolid';
+import { getIconSize, getIconStrokeWidth } from './getIconProps';
+import type { SIZE, STROKE } from './getIconProps';
+import type { IconBaseProps } from 'react-icons';
 
 export type IconName = keyof typeof ICONS;
 export type IconSize = keyof typeof SIZE;
@@ -23,20 +27,17 @@ const ICONS = {
   circle: Icons.TbCircle,
   filledNone: Icons.TbLayersIntersect,
   filledSemi: Icons.TbLayersSubtract,
-  filledSolid: (props: IconBaseProps) =>
-    Icons.TbSquaresFilled({ transform: 'rotate(-90)', ...props }),
+  filledSolid: FilledSolid,
   lineDashed: Icons.TbLineDashed,
   lineDotted: Icons.TbLineDotted,
   plus: Icons.TbPlus,
   minus: Icons.TbMinus,
-  slash: Icons.TbSlash,
   handStop: Icons.TbHandStop,
   pointer: Icons.TbPointer,
   scribble: Icons.TbScribble,
   square: Icons.TbSquare,
   text: Icons.TbTypography,
   x: Icons.TbX,
-  shapeSize: Icons.TbSlash,
   spinner: Icons.TbLoader2,
   dots: Icons.TbDots,
   link: Icons.TbLink,
@@ -48,34 +49,22 @@ const ICONS = {
   moon: Icons.TbMoon,
   moonStars: Icons.TbMoonStars,
   laser: Icons.TbNorthStar,
-  book: Icons.TbBook
+  book: Icons.TbBook,
+  letterS: Icons.TbLetterS,
+  letterM: Icons.TbLetterM,
+  letterL: Icons.TbLetterL,
+  extraLarge: ExtraLarge,
 } as const;
 
-export const SIZE = {
-  xs: 12,
-  sm: 16,
-  md: 18,
-  lg: 20,
-  xl: 24,
-};
-
-const STROKE = {
-  sm: 1.5,
-  md: 1.75,
-  lg: 2,
-  xl: 2.5,
-};
-
 const Icon = (props: IconProps) => {
   const { name, stroke, size, ...rest } = props;
 
-  const Icon = ICONS[name];
+  const sizeValue = getIconSize(size);
+  const strokeValue = getIconStrokeWidth(stroke);
 
-  const sizeValue = SIZE[size ?? 'md'];
-  const strokeValue =
-    typeof stroke === 'number' ? stroke : STROKE[stroke ?? 'md'];
+  const Component = ICONS[name];
 
-  return <Icon size={sizeValue} strokeWidth={strokeValue} {...rest} />;
+  return <Component size={sizeValue} strokeWidth={strokeValue} {...rest} />;
 };
 
 export default Icon;

apps/client/src/components/Elements/Icon/getIconProps.ts

@@ -0,0 +1,24 @@
+import type { IconProps } from './Icon';
+
+export const SIZE = {
+  xs: 12,
+  sm: 16,
+  md: 18,
+  lg: 20,
+  xl: 24,
+} as const;
+
+export const STROKE = {
+  sm: 1.5,
+  md: 1.75,
+  lg: 2,
+  xl: 2.5,
+} as const;
+
+export function getIconSize(value: IconProps['size']) {
+  return SIZE[value ?? 'md'];
+}
+
+export function getIconStrokeWidth(value: IconProps['stroke']) {
+  return typeof value === 'number' ? value : STROKE[value ?? 'md'];
+}

apps/client/src/components/Panels/ControlPanel/ControlPanel.styled.ts

@@ -0,0 +1,6 @@
+import { styled } from 'shared';
+import { Panel } from '../Panels.styled';
+
+export const Container = styled(Panel, {
+  marginRight: 'auto',
+});

apps/client/src/components/Panels/ControlPanel/ControlPanel.tsx

@@ -1,8 +1,9 @@
 import { memo } from 'react';
 import { CONTROL } from '@/constants/panels/control';
 import { createKeyTitle } from '@/utils/string';
-import * as PanelStyled from '../Panels.styled';
 import Icon from '@/components/Elements/Icon/Icon';
+import * as PanelStyled from '../Panels.styled';
+import * as Styled from './ControlPanel.styled';
 
 export type ControlActionKey = (typeof CONTROL)[number]['value'];
 
@@ -30,7 +31,7 @@ const ControlPanel = ({ enabledControls, onControl }: Props) => {
   };
 
   return (
-    <PanelStyled.Panel>
+    <Styled.Container>
       {CONTROL.map((control) => {
         return (
           <PanelStyled.Button
@@ -46,7 +47,7 @@ const ControlPanel = ({ enabledControls, onControl }: Props) => {
           </PanelStyled.Button>
         );
       })}
-    </PanelStyled.Panel>
+    </Styled.Container>
   );
 };
 

apps/client/src/components/Panels/Panels.styled.ts

@@ -42,9 +42,7 @@ export const TopPanel = styled('div', {
   gap: '$2',
 });
 
-export const TopPanelRightContainer = styled(Panel, {
-  marginLeft: 'auto'
-});
+export const TopPanelRightContainer = styled(Panel);
 
 export const BottomPanel = styled('div', {
   position: 'relative',

apps/client/src/components/Panels/StylePanel/SizeSection.tsx

@@ -3,7 +3,6 @@ import type { NodeSize } from 'shared';
 import { SIZE } from '@/constants/panels/style';
 import { createTitle } from '@/utils/string';
 import Icon from '@/components/Elements/Icon/Icon';
-import { getSizeValue } from '@/utils/shape';
 import * as Styled from './StylePanel.styled';
 
 type Props = {
@@ -33,7 +32,7 @@ const SizeSection = ({ value, onSizeChange }: Props) => {
                 size.value === value ? 'secondary-dark' : 'secondary-light'
               }
             >
-              <Icon name={size.icon} stroke={getSizeValue(size.value)} />
+              <Icon name={size.icon} stroke="lg" />
             </Styled.Item>
           );
         })}

apps/client/src/components/Panels/StylePanel/StylePanel.tsx

@@ -62,7 +62,9 @@ const StylePanel = ({
   const enabledOptions = useMemo(() => {
     const selectedNodesTypes = selectedNodes.map(({ type }) => type);
 
-    if (selectedNodesTypes.includes('text')) {
+    const onlyTextNodes = selectedNodesTypes.every((type) => type === 'text');
+
+    if(onlyTextNodes) {
       return { line: false, size: true };
     }
 
@@ -118,6 +120,9 @@ const StylePanel = ({
         onValueChange={handleOpacityChange}
         onValueCommit={handleOpacityCommit}
       />
+      {enabledOptions.size && (
+        <SizeSection value={style.size} onSizeChange={handleSizeSelect} />
+      )}
       <FillSection value={fillSectionValue} onFillChange={handleFillChange} />
       {enabledOptions.line && (
         <>
@@ -129,9 +134,6 @@ const StylePanel = ({
           />
         </>
       )}
-      {enabledOptions.size && (
-        <SizeSection value={style.size} onSizeChange={handleSizeSelect} />
-      )}
     </Styled.Container>
   );
 };

apps/client/src/constants/panels/style.ts

@@ -53,21 +53,21 @@ export const SIZE: Entity<NodeSize>[] = [
   {
     value: 'small',
     name: 'Small',
-    icon: 'shapeSize',
+    icon: 'letterS',
   },
   {
     value: 'medium',
     name: 'Medium',
-    icon: 'shapeSize',
+    icon: 'letterM',
   },
   {
     value: 'large',
     name: 'Large',
-    icon: 'shapeSize',
+    icon: 'letterL',
   },
   {
     value: 'extra-large',
     name: 'Extra Large',
-    icon: 'shapeSize',
+    icon: 'extraLarge',
   },
 ];

apps/client/src/constants/shape.ts

@@ -21,8 +21,8 @@ export const ARROW_TRANSFORMER = {
 };
 
 export const ARROW = {
-  HEAD_WIDTH: 7,
-  HEAD_LENGTH: 7,
+  HEAD_WIDTH: 6,
+  HEAD_LENGTH: 6,
 };
 
 export const FREE_PATH = {