fix(component): add AspectText component

src/aspects/AspectText.stories.tsx

@@ -0,0 +1,29 @@
+import styled from "@emotion/styled";
+import {Story} from "@storybook/react";
+import React from "react";
+import {AspectText, AspectTextProps} from "./AspectText";
+
+export default {
+  title: 'AspectText',
+  component: AspectText
+};
+
+export const Default: Story<AspectTextProps & {children?: string}> = (args) => <div style={{height: '50vh'}}>
+  <AspectText {...args}/>
+</div>;
+Default.args = {
+  children: 'Text'
+}
+
+export const Styled: Story<AspectTextProps & {children?: string}> = (args) => <div style={{height: '50vh'}}>
+  <StyledAspectText {...args}/>
+</div>;
+Styled.args = {
+  ratio: 70,
+  children: 'Text'
+}
+
+const StyledAspectText = styled(AspectText)`
+  border: 1em solid #000066;
+  padding: 5em 0;
+`

src/aspects/AspectText.tsx

@@ -0,0 +1,44 @@
+import {css} from "@emotion/react";
+import styled from "@emotion/styled";
+import React, {FC, useEffect, useRef, useState} from "react";
+
+export type AspectTextProps = {
+  ratio?: number
+  className?: string;
+}
+
+/**
+ * Change fontSize from height
+ * @param {number | undefined} ratio
+ * @param {string | undefined} className
+ * @param {React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined} children
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const AspectText: FC<AspectTextProps> = ({ratio = 100, className, children}) => {
+  const ref = useRef<HTMLParagraphElement>(null);
+  const [fontSize, setFontSize] = useState<number | null>(null);
+  const _ratio = ratio > 100 ? 100 : ratio < 0 ? 0 : ratio;
+
+  useEffect(() => {
+    if (ref.current) {
+      setFontSize(ref.current.clientHeight * (_ratio / 100));
+    }
+  }, [ref.current?.clientHeight, _ratio]);
+
+  return <Box className={className}>
+    <Text ref={ref} fontSize={fontSize}>
+      {children}
+    </Text>
+  </Box>;
+};
+
+const Box = styled.div`
+  height: 100%;
+`;
+
+const Text = styled.p<{ fontSize: number | null }>`
+  box-sizing: content-box;
+  height: 100%;
+  ${({fontSize}) => fontSize && css`font-size: ${fontSize}px`};
+`;

src/aspects/index.ts

@@ -1 +1,2 @@
 export * from './Aspect';
+export * from './AspectText';