wip(#7): add TextRenderer base component

close #13

Author: khatastroffik

src/components/AbstractRenderer/AbrstractRenderer.tsx

@@ -8,6 +8,7 @@ export interface IAbstractRendererProps {
 }
 
 export interface IDateValue { value: Date }
+export interface ITextValue { value: string }
 
 export abstract class AbstractRenderer<IRendererValueType = string, IRendererProps extends IAbstractRendererProps = IAbstractRendererProps> extends React.Component<IRendererProps> {
 

src/components/TextRenderer/TextRenderer.mdx

@@ -0,0 +1,37 @@
+import { Primary, Canvas, Source, Meta, ArgTypes, Description, Controls } from '@storybook/blocks';
+import * as TextRendererStories from './TextRenderer.stories';
+
+<Meta of={TextRendererStories} name="TextRenderer Documentation"  />
+
+# TextRenderer
+
+<Description of={TextRendererStories} />
+
+### Preview
+
+<Primary />
+
+### Properties
+
+The text representation can be customized using the appropriates tag attributes i.e. component properties, as described below.
+
+<Controls of={TextRendererStories.Playground} />
+{/* <ArgTypes of={TextRendererStories} sort="requiredFirst" /> */}
+
+Notes:
+
+- This component is rendering text transformed by predefined, standard functions like "lowercase", "uppercase", "camelcase", "kebabcase" etc. 
+- The values and options used/available within the "Control" column are for demonstration purpose only.
+- Use the "Reset controls" button on the top right side of the table in order to restore the initial demo values and options. Alternatively, you could reload the page.
+
+### Usage
+
+<Source dark type={"jsx"} code={`
+import { TextRenderer } from 'react-text-renderer-components';
+
+const Example = () => {
+    return <TextRenderer value={"SOME TEXT"} transform="lowercase" />
+}`
+} />
+
+Back to the [Github Repository](https://github.com/khatastroffik/react-text-renderer-components)

src/components/TextRenderer/TextRenderer.spec.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { render } from '@testing-library/react';
+import { TextRenderer } from "./TextRenderer";
+
+describe("TextRenderer component", () => {
+
+    it("should render a text value to lowercase", () => {
+        const sourceText = "SOURCE TEXT";
+        const r = render(<TextRenderer value={sourceText} transform="lowercase" pure />);
+        expect(r.container.innerHTML).toEqual(sourceText.toLowerCase());
+    });
+
+    it("should render a spanned, lowercased text", () => {
+        const sourceText = "SOURCE TEXT";
+        const r = render(<TextRenderer value={sourceText} transform="lowercase" />);
+        expect(r.container.innerHTML).toEqual(`<span>${sourceText.toLowerCase()}</span>`);
+    });
+
+    it("should render a text value to uppercase", () => {
+        const sourceText = "source text";
+        const r = render(<TextRenderer value={sourceText} transform="uppercase" pure />);
+        expect(r.container.innerHTML).toEqual(sourceText.toUpperCase());
+    });
+
+    it("should render an empty text when value is undefined", () => {
+        const sourceText = undefined;
+        const r = render(<TextRenderer value={sourceText} transform="noop" pure />);
+        expect(r.container.innerHTML).toEqual("");
+    });
+
+    it("should render an empty text when value is null", () => {
+        const sourceText = null;
+        const r = render(<TextRenderer value={sourceText} transform="noop" pure />);
+        expect(r.container.innerHTML).toEqual("");
+    });
+
+    it("should render an umodified text value when transformation is 'noop' (no-operation)", () => {
+        const sourceText = "SOURCE text";
+        const r = render(<TextRenderer value={sourceText} transform="noop" pure />);
+        expect(r.container.innerHTML).toEqual(sourceText);
+    });
+
+    it("should render an umodified text value when transformation is null", () => {
+        const sourceText = null;
+        const r = render(<TextRenderer value={sourceText} transform={null} pure />);
+        expect(r.container.innerHTML).toEqual("");
+    });
+
+    it("should render an umodified text value when transformation is undefined", () => {
+        const sourceText = null;
+        const r = render(<TextRenderer value={sourceText} transform={undefined} pure />);
+        expect(r.container.innerHTML).toEqual("");
+    });
+
+    it("protected method 'getFormatedText()' should return a string", () => {
+        const sourceText = "SOURCE text";
+        class TextRendererWrapper extends TextRenderer {
+            public getFormatedText() {
+                return super.getFormatedText();
+            }
+        }
+        const component = new TextRendererWrapper({ value: sourceText, transform: "noop" });
+        expect(component.getFormatedText()).toEqual(sourceText);
+    });
+
+});

src/components/TextRenderer/TextRenderer.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { TextRenderer } from './TextRenderer';
+import { RemoveKeyAttribute } from "../../../.storybook/utils";
+
+const testtext = "some text";
+
+// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+const meta = {
+  title: 'Components/TextRenderer',
+  component: TextRenderer,
+  argTypes: {
+    value: {
+      control: "text",
+      description: "The text **value** (string) which should be transformed and rendered.",
+    },
+    pure: {
+      control: "boolean",
+      description: "If **pure** is set/defined, then the component will render nothing but the 'pure' text representation of the value. Otherwise, the text representation is embeded within a *<span></span>* tag.",
+    },
+    transform: {
+      control: "select",
+      description: "The type of transformation to be applied to the input values.",
+      options: ["noop", "lowercase", "uppercase"],
+    }
+  },
+  parameters: {
+    docs: {
+      controls: { sort: "requiredFirst" },
+      source: { language: 'tsx', type: 'auto', transform: RemoveKeyAttribute },
+      description: { component: "The **TextRenderer** component renders an input *value* of type `string` to a pure/spanned representation showing the transformed text as defined by the `transform` attribute of the component." },
+    },
+    layout: 'centered'
+  },
+  render: RenderTextRenderer
+} satisfies Meta<typeof TextRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+function RenderTextRenderer(args) {
+  return <TextRenderer key={Math.random()} {...args} />
+}
+
+// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    value: testtext,
+    pure: true,
+    transform: "noop"
+  },
+  tags: ['!dev']
+} satisfies Story;

src/components/TextRenderer/TextRenderer.tsx

@@ -0,0 +1,26 @@
+import { AbstractRenderer, IAbstractRendererProps, ITextValue, ModifyValueType } from "../AbstractRenderer";
+
+export type TextRendererTransformation = "noop" | "lowercase" | "uppercase";
+export interface ITextRendererProps extends ModifyValueType<IAbstractRendererProps, ITextValue> {
+    transform: TextRendererTransformation
+}
+
+export class TextRenderer extends AbstractRenderer<string, ITextRendererProps> {
+    protected getFormatedText(): string {
+        const sourceText = this.value ?? "";
+        switch (this.props.transform ?? "noop") {
+            case 'lowercase':
+                return sourceText.toLowerCase();
+                break;
+            case 'uppercase':
+                return sourceText.toUpperCase();
+                break;
+            case 'noop':
+                return sourceText;
+                break;
+            default:
+                return sourceText;
+                break;
+        }        
+    }
+}

src/components/TextRenderer/index.ts

@@ -0,0 +1 @@
+export * from './TextRenderer';

src/components/introduction.mdx

@@ -4,6 +4,7 @@ import { TimeRenderer } from "./TimeRenderer";
 import { DateTimeRenderer } from "./DateTimeRenderer";
 import { WeekRenderer } from "./WeekRenderer";
 import { QuarterRenderer } from "./QuarterRenderer";
+import { TextRenderer } from "./TextRenderer";
 import banner from '../../docs/johannes-plenio-2QUvkQTBh5s-unsplash.jpg';
 
 <style>
@@ -86,6 +87,16 @@ import banner from '../../docs/johannes-plenio-2QUvkQTBh5s-unsplash.jpg';
     .accordion > input[type="checkbox"]:checked ~ .handle label:after {
         content: "↓";
     }
+    .previewoutput table {
+        margin-left:auto; 
+        margin-right:auto;    
+    }
+    .previewoutput table tbody tr {
+        background-color: transparent!important;
+    }
+    .previewoutput table thead {
+        background: #f5f5f5;
+    }
 `}
 </style>
 
@@ -248,6 +259,29 @@ import banner from '../../docs/johannes-plenio-2QUvkQTBh5s-unsplash.jpg';
   <p>Note: the Date value passed as property to the WeekRenderer component should be a **UTC** date</p>
 </section>
 
+### TextRenderer
+
+<div className="previewoutput centeredtable">
+    | Input value string | Transformation function | Rendering Output |
+    |---|---|---|
+    | some text | noop | <TextRenderer value="some text" transform="noop" /> |
+    | SOME TEXT | lowercase | <TextRenderer value="SOME TEXT" transform="lowercase" /> |
+    | some text | uppercase | <TextRenderer value="some text" transform="uppercase" /> |
+</div>
+<section className="accordion">
+  <input type="checkbox" name="collapse6" id="preview6" tabIndex="0" />
+  <div className="handle" >
+    <label htmlFor="preview6">source code</label>
+  </div>
+  <div className="content">
+    <Source code={`
+<TextRenderer value={"some text"} transform="noop" />
+<TextRenderer value={"SOME TEXT"} transform="lowercase" />
+<TextRenderer value={"some text"} transform="uppercase" />
+    `} dark />
+  </div>
+</section>
+
 <hr />
 
 <div className="right">Visit the [Github Repository](https://github.com/khatastroffik/react-text-renderer-components)</div>

src/index.ts

@@ -4,3 +4,4 @@ export * from './components/TimeRenderer';
 export * from './components/DateTimeRenderer';
 export * from './components/WeekRenderer';
 export * from './components/QuarterRenderer';
+export * from './components/TextRenderer';