feat(#7): implement the TextRenderer component (#14)

Author: khatastroffik

.github/workflows/publish-storybook.yml

@@ -32,7 +32,7 @@ jobs:
       - name: Generate test reports
         run: npm run test:ci
       - name: Build Storybook
-        run: npm run build:storybook
+        run: npm run storybook:build
       - name: Configure GH pages
         uses: actions/configure-pages@v5
       - name: Upload Storybook Documentation

.parcelrc

@@ -0,0 +1,4 @@
+{
+  "extends": "@parcel/config-default",
+  "bundler": "@parcel/bundler-library"
+}

.storybook/main.ts

@@ -1,22 +1,38 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
+import remarkGfm from 'remark-gfm';
 
 const config: StorybookConfig = {
   stories: ["../src/components/introduction.mdx", "../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+
   addons: [
     "@storybook/addon-webpack5-compiler-swc",
     "@storybook/addon-links",
-    "@storybook/addon-essentials"
+    "@storybook/addon-essentials",
+    {
+        name: '@storybook/addon-docs',
+        options: {
+          mdxPluginOptions: {
+            mdxCompileOptions: {
+              remarkPlugins: [remarkGfm],
+            },
+          },
+        },
+      },    
   ],
+
   framework: {
     name: "@storybook/react-webpack5",
     options: { builder: { useSWC: true } }
   },
+
   core: {
     disableTelemetry: true, 
   },
+
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
+
   build: {
     test: {
       disableBlocks: false,
@@ -28,7 +44,10 @@ const config: StorybookConfig = {
       disableTreeShaking: false      
     }
   },
-  staticDirs: ["../test-reports"]
+
+  staticDirs: ["../test-reports"],
+
+  docs: {}
 };
 
 export default config; 

.storybook/preview.ts

@@ -1,5 +1,7 @@
 import type { Preview } from "@storybook/react";
 
-const preview: Preview = {};
+const preview: Preview = {
+//   tags: ["autodocs"]
+};
 
 export default preview;

README.md

@@ -1,6 +1,6 @@
 # react-text-renderer-components
 
-! MANAGE YOUR DATA, NOT THEIR STRING REPRESENTATION !
+⚡ MANAGE YOUR DATA OBJECTS, NOT THEIR STRING REPRESENTATION ⚡
 
 This is a zero-dependencies component library providing a set of (pure) text rendering utility components. Those components are accepting common and custom data/field types as input and are rendering their text representation _automatically_.
 
@@ -12,7 +12,14 @@ e.g. to render the text corresponding to a `DateOfBirth` field (Date type) withi
 ![GitHub Issues](https://img.shields.io/github/issues/khatastroffik/react-text-renderer-components)
 ![Package size (minified)](<https://img.shields.io/bundlejs/size/%40khatastroffik%2Freact-text-renderer-components?label=Package%20size%20(minified)>)
 
-## Documentation: Storybook, Changelog and Release note
+## Documentation: Demo, Storybook, Changelog and Release note
+
+### Demo Webapp
+
+A webapp demonstrating the usage of this library is available:
+
+- Demo web app &rarr; [Demo - react-text-renderer-components](https://khatastroffik.github.io/react-text-renderer-components-demo)
+- Demo source code &rarr; [Github - react-text-renderer-components-demo](https://github.com/khatastroffik/react-text-renderer-components-demo)
 
 ### Storybook documentation
 
@@ -31,6 +38,7 @@ Please read the [CHANGELOG](./CHANGELOG.md) (all changes since the beginning) an
 - `DateTimeRenderer` component ([Storybook &rarr; DateTimeRenderer](https://khatastroffik.github.io/react-text-renderer-components/?path=/docs/components-datetimerenderer--datetimerenderer-documentation))
 - `WeekRenderer` component ([Storybook &rarr; WeekRenderer](https://khatastroffik.github.io/react-text-renderer-components/?path=/docs/components-weekrenderer--weekrenderer-documentation))
 - `QuarterRenderer` component ([Storybook &rarr; QuarterRenderer](https://khatastroffik.github.io/react-text-renderer-components/?path=/docs/components-quarterrenderer--quarterrenderer-documentation))
+- `TextRenderer` component ([Storybook &rarr; TextRenderer](https://khatastroffik.github.io/react-text-renderer-components/?path=/docs/components-textrenderer--textrenderer-documentation))
 
 more components to come... (see the ToDos below)
 
@@ -105,7 +113,7 @@ This design allows to avoid repetitions, reduce the size of the compiled code us
 
 - ✅ `WeekRenderer` component
 - ✅ `QuarterRenderer` component
-- ⬛ `TextRenderer` component (with text manipulation like UpperCase, LowerCase, Replace...)
+- ✅ `TextRenderer` component (with text manipulation like UpperCase, LowerCase, SnakeCase, KebabCase, CamelCase, PascalCase, toBase64, fromBase64...)
 - ⬛ `CurrencyRenderer` component
 - ⬛ `CustomRenderer` component i.e the text formating function may be provided from the parent application/component using the CustomRenderer.
 
@@ -294,6 +302,12 @@ npm install -D jest @testing-library/react ts-jest @types/jest ts-node @testing-
 - https://github.com/inttter/md-badges
 - https://shields.io/badges/dynamic-json-badge
 
+### Base64
+
+- https://developer.mozilla.org/de/docs/Web/API/Window/btoa#unicode-zeichenfolgen
+- https://developer.mozilla.org/de/docs/Web/API/DOMException#invalidcharactererror
+- https://web.dev/articles/base64-encoding?hl=de#put_it_all_together
+
 ### Divers
 
 - https://www.pluralsight.com/resources/blog/guides/how-to-return-plain-text-from-a-react-component