feat(striker-ui): add SensitiveText

striker-ui/components/Text/InlineMonoText.tsx

@@ -3,12 +3,7 @@ import { FC } from 'react';
 import { BodyTextProps } from './BodyText';
 import SmallText from './SmallText';
 
-type InlineMonoTextProps = BodyTextProps;
-
-const InlineMonoText: FC<InlineMonoTextProps> = ({
-  sx,
-  ...bodyTextRestProps
-}) => (
+const InlineMonoText: FC<BodyTextProps> = ({ sx, ...bodyTextRestProps }) => (
   <SmallText
     {...{
       ...bodyTextRestProps,
@@ -23,6 +18,4 @@ const InlineMonoText: FC<InlineMonoTextProps> = ({
   />
 );
 
-export type { InlineMonoTextProps };
-
 export default InlineMonoText;

striker-ui/components/Text/MonoText.tsx

@@ -3,9 +3,7 @@ import { FC } from 'react';
 import { BodyTextProps } from './BodyText';
 import SmallText from './SmallText';
 
-type MonoTextProps = BodyTextProps;
-
-const MonoText: FC<MonoTextProps> = ({ sx, ...bodyTextRestProps }) => (
+const MonoText: FC<BodyTextProps> = ({ sx, ...bodyTextRestProps }) => (
   <SmallText
     monospaced
     sx={{ alignItems: 'center', display: 'flex', height: '100%', ...sx }}
@@ -13,6 +11,4 @@ const MonoText: FC<MonoTextProps> = ({ sx, ...bodyTextRestProps }) => (
   />
 );
 
-export type { MonoTextProps };
-
 export default MonoText;

striker-ui/components/Text/SensitiveText.tsx

@@ -0,0 +1,64 @@
+import { createElement, FC, ReactNode, useMemo, useState } from 'react';
+
+import BodyText from './BodyText';
+import FlexBox from '../FlexBox';
+import IconButton from '../IconButton';
+import MonoText from './MonoText';
+
+const SensitiveText: FC<SensitiveTextProps> = ({
+  children,
+  monospaced: isMonospaced = false,
+  revealInitially: isRevealInitially = false,
+  textProps,
+}) => {
+  const [isReveal, setIsReveal] = useState<boolean>(isRevealInitially);
+
+  const textElementType = useMemo(
+    () => (isMonospaced ? MonoText : BodyText),
+    [isMonospaced],
+  );
+  const contentElement = useMemo(() => {
+    let content: ReactNode;
+
+    if (isReveal) {
+      content =
+        typeof children === 'string'
+          ? createElement(
+              textElementType,
+              {
+                sx: {
+                  lineHeight: 2.8,
+                  maxWidth: '20em',
+                  overflowY: 'scroll',
+                  whiteSpace: 'nowrap',
+                },
+                ...textProps,
+              },
+              children,
+            )
+          : children;
+    } else {
+      content = createElement(textElementType, textProps, '*****');
+    }
+
+    return content;
+  }, [children, isReveal, textElementType, textProps]);
+
+  return (
+    <FlexBox row spacing=".5em">
+      {contentElement}
+      <IconButton
+        edge="end"
+        mapPreset="visibility"
+        onClick={() => {
+          setIsReveal((previous) => !previous);
+        }}
+        state={String(isReveal)}
+        sx={{ marginRight: '-.2em', padding: '.2em' }}
+        variant="normal"
+      />
+    </FlexBox>
+  );
+};
+
+export default SensitiveText;

striker-ui/components/Text/SmallText.tsx

@@ -2,12 +2,8 @@ import { FC } from 'react';
 
 import BodyText, { BodyTextProps } from './BodyText';
 
-type SmallTextProps = BodyTextProps;
-
-const SmallText: FC<SmallTextProps> = ({ ...bodyTextRestProps }) => (
+const SmallText: FC<BodyTextProps> = ({ ...bodyTextRestProps }) => (
   <BodyText {...{ variant: 'body2', ...bodyTextRestProps }} />
 );
 
-export type { SmallTextProps };
-
 export default SmallText;

striker-ui/components/Text/index.tsx

@@ -2,8 +2,16 @@ import BodyText, { BodyTextProps } from './BodyText';
 import HeaderText from './HeaderText';
 import InlineMonoText from './InlineMonoText';
 import MonoText from './MonoText';
+import SensitiveText from './SensitiveText';
 import SmallText from './SmallText';
 
 export type { BodyTextProps };
 
-export { BodyText, HeaderText, InlineMonoText, MonoText, SmallText };
+export {
+  BodyText,
+  HeaderText,
+  InlineMonoText,
+  MonoText,
+  SensitiveText,
+  SmallText,
+};

striker-ui/types/SensitiveText.d.ts

@@ -0,0 +1,7 @@
+type SensitiveTextOptionalProps = {
+  monospaced?: boolean;
+  revealInitially?: boolean;
+  textProps?: import('../components/Text').BodyTextProps;
+};
+
+type SensitiveTextProps = SensitiveTextOptionalProps;