feat: Migrate < Link />, < StoryDescription /> to ts (#83)

Co-authored-by: Sergey Roytman <[email protected]>

src/components/deprecated-warning/deprecated-warning.tsx

@@ -1,22 +1,22 @@
-import { FC } from 'react';
-import Link from '../link/link';
-import Tip from '../tip/tip';
-
-interface DeprecatedWarningProps {
-  alternativeName: string;
-  alternativeLink?: string;
-}
-
-const DeprecatedWarning: FC<DeprecatedWarningProps> = ({ alternativeName, alternativeLink }) => (
-  <Tip emoji="🚨" title="Deprecated component" type={Tip.types.DANGER}>
-    <>
-      This is a legacy component and will be deprecated in the next major version. Please consider using the
-      <Link href={alternativeLink} size={Link.sizes.SMALL}>
-        {alternativeName}
-      </Link>
-      component for your needs instead.
-    </>
-  </Tip>
-);
-
-export default DeprecatedWarning;
+import { FC } from 'react';
+import Link from '../link/link';
+import Tip from '../tip/tip';
+
+interface DeprecatedWarningProps {
+  alternativeName: string;
+  alternativeLink: string;
+}
+
+const DeprecatedWarning: FC<DeprecatedWarningProps> = ({ alternativeName, alternativeLink }) => (
+  <Tip emoji="🚨" title="Deprecated component" type={Tip.types.DANGER}>
+    <>
+      This is a legacy component and will be deprecated in the next major version. Please consider using the
+      <Link href={alternativeLink} size={Link.sizes.SMALL}>
+        {alternativeName}
+      </Link>
+      component for your needs instead.
+    </>
+  </Tip>
+);
+
+export default DeprecatedWarning;

src/components/link/LinkConstants.ts

@@ -0,0 +1,4 @@
+export enum LinkSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+}

src/components/link/link.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import cx from 'classnames';
+import CoreLink from '../../helpers/components/Link/Link';
+import styles from './link.module.scss';
+import { LinkSize } from './LinkConstants';
+import { withStaticProps } from '../../types';
+
+type LinkProps = {
+  className?: string;
+  children: string;
+  href: string;
+  size?: LinkSize;
+  withoutSpacing?: boolean;
+};
+
+const Link: FC<LinkProps> & { sizes?: typeof LinkSize } = ({
+  children,
+  href,
+  size = Link.sizes?.MEDIUM,
+  withoutSpacing = false,
+  className,
+}) => (
+  <CoreLink
+    text={children}
+    href={href}
+    className={cx(styles.compsLink, className, {
+      [styles.small]: size === Link.sizes?.SMALL,
+      [styles.medium]: size === Link.sizes?.MEDIUM,
+      [styles.withSpacing]: !withoutSpacing,
+    })}
+  />
+);
+
+export default withStaticProps(Link, { sizes: LinkSize });

src/components/story-description/story-description.tsx

@@ -0,0 +1,67 @@
+import { FC, useMemo } from 'react';
+import cx from 'classnames';
+import styles from './story-description.module.scss';
+import { ElementContent, withStaticProps } from '../../types';
+import { FlexAlign, FlexDirection, FlexGap, FlexJustify } from '../../helpers/components/Flex/FlexConstants';
+import Flex from '../../helpers/components/Flex/Flex';
+
+type StoryDescriptionProps = {
+  align?: FlexAlign;
+  description?: ElementContent;
+  children: ElementContent;
+  className: string;
+  headerAlign?: FlexAlign;
+  headerJustify?: FlexJustify;
+  headerStyle: React.CSSProperties;
+  justify?: FlexJustify;
+  vertical?: boolean;
+};
+
+const StoryDescription: FC<StoryDescriptionProps> & {
+  justify?: typeof FlexJustify;
+  align?: typeof FlexAlign;
+  gaps?: typeof FlexGap;
+  directions?: typeof FlexDirection;
+} = ({
+  description = '',
+  headerStyle,
+  children,
+  vertical = false,
+  className,
+  align,
+  justify = StoryDescription.justify?.START,
+  headerAlign,
+  headerJustify,
+}) => {
+  const direction = useMemo(
+    () => (vertical ? StoryDescription.directions?.COLUMN : StoryDescription.directions?.ROW),
+    [vertical],
+  );
+
+  return (
+    <Flex
+      direction={direction}
+      gap={StoryDescription.gaps?.MEDIUM}
+      justify={justify}
+      align={align || undefined}
+      className={className}
+    >
+      <Flex
+        className={cx(styles.description, { [styles.vertical]: vertical })}
+        style={{ width: '120px', ...headerStyle }}
+        justify={headerJustify}
+        align={headerAlign || StoryDescription.align?.CENTER}
+      >
+        {description}
+      </Flex>
+      {children}
+    </Flex>
+  );
+};
+
+export default withStaticProps(StoryDescription, {
+  justify: FlexJustify,
+  align: FlexAlign,
+  gaps: FlexGap,
+  directions: FlexDirection,
+});