feat: implement initial markdown component

3 files changed, 108 insertions, 0 deletions

diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx
new file mode 100644
index 0000000..a3ffc38
--- /dev/null
+++ b/src/lib/Markdown/Markdown.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import ContentSection from '../ContentSection/ContentSection';
+
+
+interface PropTypes {
+  data: string;
+}
+
+interface RawLinesPropType {
+  rawLines: string[];
+  level?: number;
+}
+
+const header = (level: number): string => {
+  return `^#{${level}} .*$`;
+};
+
+const Content: React.FC<RawLinesPropType> = ({ rawLines }) => {
+  const plainText = rawLines.join();
+  return <p> {plainText} </p>;
+}
+
+const Level: React.FC<RawLinesPropType> = ({ rawLines, level = 0 }) => {
+  const name = rawLines[0].slice(level);
+  const contentSize = rawLines.findIndex(line => line.match(header(level + 1)));
+
+  const rawContent = (contentSize > 0) ? rawLines.slice(1, contentSize) : rawLines.slice(1);
+  const rawChildren = rawLines.slice(contentSize);
+
+  const childrenLineGroups = rawChildren.reduce((acc: any[], cur: string) => {
+    if (cur.match(header(level + 1))) acc.push([]);
+    if (acc.length) acc[acc.length - 1].push(cur);
+    return acc;
+  }, []);
+  const children = childrenLineGroups.map(lineGroup => <Level rawLines={lineGroup} level={level + 1}/>)
+
+  return level ? (
+    <ContentSection sectionName={name}>
+      <Content rawLines={rawContent} />
+      {children}
+    </ContentSection>
+  ) : (
+    <>
+      {children}
+    </>
+  );
+}
+
+const Markdown: React.FC<PropTypes> = ({ data }) => {
+  const rawLines = data.split('\n');
+  return <Level rawLines={rawLines} />
+};
+
+
+export default Markdown;
+
diff --git a/src/lib/Markdown/example.md b/src/lib/Markdown/example.md
new file mode 100644
index 0000000..abc0910
--- /dev/null
+++ b/src/lib/Markdown/example.md
@@ -0,0 +1,50 @@
+# Getting started
+## Installation
+You can easily add **BENZIN** to your project with `npm`:
+```bash
+$ npm install react-benzin
+```
+**BENZIN** works best in kick-starting new projects and allows you to focus on the functionality, while all the beauty will be maintained by our library.
+
+**TIP:** *Create-React-App with Typescript* is your GO-TO in most of the cases. [Learn more.](https://create-react-app.dev/docs/adding-typescript/)
+
+![Preview screenshot](https://user-images.githubusercontent.com/51545008/73991116-46b04f00-495c-11ea-9733-865bcc6c8807.png)
+
+You can find a minimal usage example [here](src/index.tsx).
+
+## Functionality
+**BENZIN** provides you with a bunch of cool components that greatly integrate with each other. 
+
+[Explore](src/lib) `src/lib/` folder to see what's available. Documentation is yet to come, but for now you can enjoy type definitons.
+
+[Chrono-Cube](https://github.com/eug-vs/chrono-cube/) will also be a great example of usage, since it's the actual project which inspired us to create **BENZIN**.
+ 
+ 
+# Explore NPM package online
+https://www.npmjs.com/package/react-benzin 
+
+
+# Development
+## Running live demo
+To run a live example, clone a repo and execute following commands:
+```bash
+$ npm i
+$ npm start
+```
+It's worth noticing that presence of React-App in this repo forces us to split some configurations. For example, we have 2 `Typescript` configs: one for `react-scripts` to run live-demo, and the other one to build *distribution files*.
+
+## Running tests
+```bash
+$ npm test
+```
+**NOTE**: this command assures that `ESlint` does not throw any warnings and exits with a *non-zero status code* otherwise. That means `CircleCI` tests would fail *even if a single warning is present*. Therefore, you should always locally test your changes before publishing them.
+
+## Building
+We've decided to use `Typescript compiler` to transpile our code, since we think `Babel` is a bit of an overkill here.
+```bash
+$ npm run build
+``` 
+This command will generate `dist/` folder ready for distribution, which you of course can explore. Note that `tsc` creates type definitions (`.d.ts`) for every corresponding `.js` file. It's very useful because consumers also get access to them.
+
+## Deploying
+Deploying to `npm` is fully automated through **CircleCI**: simply tag a commit as a Release and it will do the job.
diff --git a/src/lib/index.ts b/src/lib/index.ts
index a41dd39..121c908 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -4,3 +4,4 @@ export { default as ContentSection } from './ContentSection/ContentSection';
 export { default as SmartList } from './SmartList/SmartList';
 export { default as BenzinThemeProvider } from './BenzinThemeProvider/BenzinThemeProvider';
 export { default as Button } from './Button/Button';
+export { default as Markdown } from './Markdown/Markdown';