FLOW-952 FLOW-953 Stories are organized based on priority, with an 'A…

…bout' story included for each package. (#199)

* FLOW-952 FLOW_952 FLOW-953 stories sorted as per priority+ About story added for each package

* FLOW-952 FLOW_952 FLOW-953 stories sorted as per priority+ About story added for each package

.storybook/manager.js

@@ -36,7 +36,7 @@ export const theme = create({
 
 	// Brand assets
 	brandTitle: "Flow",
-	brandUrl: "https://flow.cldcvr.com/v2/index.html"
+	brandUrl: "https://flow.ollion.com/v2/index.html"
 });
 
 addons.setConfig({

.storybook/preview.ts

@@ -48,7 +48,29 @@ export const parameters = {
 	},
 	options: {
 		storySort: {
-			order: ["About", "Foundation", "@cldcvr"]
+			order: [
+				"About",
+				"foundation",
+				"@cldcvr",
+				[
+					"flow-core",
+					["About", "Release Notes"],
+					"flow-form-builder",
+					["About", "Release Notes", "Properties", "*", "Examples"],
+					"flow-table",
+					["About", "Release Notes"],
+					"flow-lineage",
+					["About", "Release Notes", "Properties", "*", "Examples", "Debug"],
+					"flow-code-editor",
+					["About", "Release Notes"],
+					"flow-md-editor",
+					["About", "Release Notes"],
+					"flow-log",
+					["About", "Release Notes"]
+				],
+				"templates",
+				"icons"
+			]
 		}
 	},
 	previewTabs: {

README.md

@@ -4,16 +4,16 @@
 
 Flow-core is the base library required by any flow dependecies. It consists mostly of building blocks such design + system tokens, atoms, molecules, base themes, etc.
 
-- [Website](https://flow.cldcvr.com/)
+- [Website](https://flow.ollion.com/)
 - [Learn More](https://github.com/cldcvr/flow-core/blob/main/ABOUT.md)
 
 ## Table of contents
 
 - [Starter-kits](#starter-kits)
 - [Install for an existing project](#existing-project)
 - [VScode Plugin and debuggers](#vscode-plugin-and-debuggers)
-- [Components](https://flow.cldcvr.com/v2/index.html)
-- [Templates](https://flow.cldcvr.com/templates/index.html)
+- [Components](https://flow.ollion.com/v2/index.html)
+- [Templates](https://flow.ollion.com/templates/index.html)
 - [Resources](#resources)
 - [Figma for designers](https://www.figma.com/community/file/1240565037876928288/Flow-UI-Kit)
 - [Get in touch](#get-in-touch)
@@ -30,7 +30,7 @@ For a new project, Flow has put together starter kits with basic dependencies to
 - [Aungular](https://github.com/cldcvr/flow-starterkit-angular)
 - [React](https://github.com/cldcvr/flow-starterkit-react)
 
-If you would like to contribute to an existing starter kit or write a new one for a different framework, write to <flow@cldcvr.com> or ping on our slack channel.
+If you would like to contribute to an existing starter kit or write a new one for a different framework, write to <flow@ollion.com> or ping on our slack channel.
 
 **VScode Plugin**: [Install Flow's Plugin](https://marketplace.visualstudio.com/items?itemName=dev-vikas.flow-intellisense-vscode) to access components, icons, values, etc, and documentation inside of VScode.
 
@@ -102,7 +102,7 @@ import "@cldcvr/flow-system-icon";
 ```
 
 - [Icons Github repo](https://github.com/cldcvr/flow-icon)
-- [View icons](https://flow.cldcvr.com/icons/index.html)
+- [View icons](https://flow.ollion.com/icons/index.html)
 
 ## VScode Plugin and debuggers
 
@@ -112,11 +112,11 @@ import "@cldcvr/flow-system-icon";
 
 ## Components
 
-Visit the [Flow components Storybook](https://flow.cldcvr.com/v2/index.html)
+Visit the [Flow components Storybook](https://flow.ollion.com/v2/index.html)
 
 ## Templates
 
-Visit the [Flow templates Storybook](https://flow.cldcvr.com/templates/index.html)
+Visit the [Flow templates Storybook](https://flow.ollion.com/templates/index.html)
 
 ## Dependencies
 

package.json

@@ -39,22 +39,22 @@
     "@cldcvr/custom-elements-manifest-to-types": "workspace:*",
     "@cldcvr/prettier-config": "^2.1.0",
     "@faker-js/faker": "^7.6.0",
-    "@storybook/addon-actions": "^7.4.6",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/addon-mdx-gfm": "^7.4.6",
-    "@storybook/addon-storysource": "^7.4.6",
-    "@storybook/blocks": "^7.4.6",
-    "@storybook/web-components": "^7.4.6",
-    "@storybook/web-components-vite": "^7.4.6",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-mdx-gfm": "^7.5.3",
+    "@storybook/addon-storysource": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/web-components": "^7.5.3",
+    "@storybook/web-components-vite": "^7.5.3",
     "@types/eslint": "^8.4.3",
     "@types/jest": "29.5.5",
     "@types/prettier": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.6.15",
     "fs-extra": "^11.1.1",
     "husky": "^8.0.1",
     "lint-staged": "^14.0.1",
@@ -64,7 +64,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.52.3",
-    "storybook": "^7.4.6",
+    "storybook": "^7.5.3",
     "typescript": "^5.2.2",
     "vite": "^4.4.11"
   },

packages/flow-code-editor/README.md

@@ -1,6 +1,6 @@
 # Flow Code Editor
 
-The Flow code editor is built on the Flow design framework ([website](https://flow.cldcvr.com/) / [github](https://github.com/cldcvr/flow-core)) using [Monaco Editor](https://microsoft.github.io/monaco-editor/)
+The Flow code editor is built on the Flow design framework ([website](https://flow.ollion.com/) / [github](https://github.com/cldcvr/flow-core)) using [Monaco Editor](https://microsoft.github.io/monaco-editor/)
 
 # Installation
 

packages/flow-core/README.md

@@ -4,16 +4,16 @@
 
 Flow-core is the base library required by any flow dependecies. It consists mostly of building blocks such design + system tokens, atoms, molecules, base themes, etc.
 
-- [Website](https://flow.cldcvr.com/)
+- [Website](https://flow.ollion.com/)
 - [Learn More](https://github.com/cldcvr/flow-core/blob/main/ABOUT.md)
 
 ## Table of contents
 
 - [Starter-kits](#starter-kits)
 - [Install for an existing project](#existing-project)
 - [VScode Plugin and debuggers](#vscode-plugin-and-debuggers)
-- [Components](https://flow.cldcvr.com/v2/index.html)
-- [Templates](https://flow.cldcvr.com/templates/index.html)
+- [Components](https://flow.ollion.com/v2/index.html)
+- [Templates](https://flow.ollion.com/templates/index.html)
 - [Resources](#resources)
 - [Figma for designers](https://www.figma.com/community/file/1240565037876928288/Flow-UI-Kit)
 - [Get in touch](#get-in-touch)
@@ -102,7 +102,7 @@ import "@cldcvr/flow-system-icon";
 ```
 
 - [Icons Github repo](https://github.com/cldcvr/flow-icon)
-- [View icons](https://flow.cldcvr.com/icons/index.html)
+- [View icons](https://flow.ollion.com/icons/index.html)
 
 ## VScode Plugin and debuggers
 
@@ -112,11 +112,11 @@ import "@cldcvr/flow-system-icon";
 
 ## Components
 
-Visit the [Flow components Storybook](https://flow.cldcvr.com/v2/index.html)
+Visit the [Flow components Storybook](https://flow.ollion.com/v2/index.html)
 
 ## Templates
 
-Visit the [Flow templates Storybook](https://flow.cldcvr.com/templates/index.html)
+Visit the [Flow templates Storybook](https://flow.ollion.com/templates/index.html)
 
 ## Dependencies
 

packages/flow-form-builder/README.md

@@ -2,7 +2,7 @@
 
 ![npm](https://badgen.net/npm/v/@cldcvr/flow-form-builder) ![license](https://badgen.net/npm/license/@cldcvr/flow-form-builder) ![types](https://badgen.net/npm/types/@cldcvr/flow-form-builder) ![downloads](https://badgen.net//npm/dw/@cldcvr/flow-form-builder)
 
-The Flow form builder is built on the Flow design framework ([website](https://flow.cldcvr.com/) / [github](https://github.com/cldcvr/flow-core))
+The Flow form builder is built on the Flow design framework ([website](https://flow.ollion.com/) / [github](https://github.com/cldcvr/flow-core))
 
 ## Benefits / Features
 
@@ -44,13 +44,13 @@ Structural correlation involves defining the data structure that will be transmi
 
 # Demo
 
-Head over to [Flow form builder Storybook](https://flow.cldcvr.com/v2/index.html) for a demo.
+Head over to [Flow form builder Storybook](https://flow.ollion.com/v2/index.html) for a demo.
 
 <br/>
 
 # Getting started
 
-Flow form builder is built on [Flow](https://flow.cldcvr.com/), an open source design framework. To run form builder, please make sure that you have [Flow core](https://github.com/cldcvr/flow-core) as part of your project.
+Flow form builder is built on [Flow](https://flow.ollion.com/), an open source design framework. To run form builder, please make sure that you have [Flow core](https://github.com/cldcvr/flow-core) as part of your project.
 
 <!-- During installation if you run into any issues, head over to our [known issues + solutions document](https://github.com/cldcvr/flow-core/blob/main/packages/flow-form-builder/KNOWN_SOLUTIONS.md) to see if a solution already exists. -->
 
@@ -332,4 +332,4 @@ Once it's running, you will see a rendered form like the image below.
 
 # Properties
 
-Head over to [Flow form builder Storybook](https://flow.cldcvr.com/form-builder/index.html?path=/story/components-f-form-builder--playground) for all properties and playground.
+Head over to [Flow form builder Storybook](https://flow.ollion.com/form-builder/index.html?path=/story/components-f-form-builder--playground) for all properties and playground.

packages/flow-lineage/README.md

@@ -8,7 +8,7 @@ A lineage chart is a graphical representation of a node's ancestors, showing the
 
 # Demo
 
-Head over to [Flow Lineage Storybook](https://flow.cldcvr.com/v2/index.html) for a demo.
+Head over to [Flow Lineage Storybook](https://flow.ollion.com/v2/index.html) for a demo.
 
 or
 
@@ -18,7 +18,7 @@ Clone and install the [Flow Lineage demo](https://github.com/cldcvr/flow-lineage
 
 # Getting started
 
-Flow Lineage is been built on [Flow](https://flow.cldcvr.com/), an open source design framework. To run lineage, please make sure that you have [Flow core](https://github.com/cldcvr/flow-core) as part of your project.
+Flow Lineage is been built on [Flow](https://flow.ollion.com/), an open source design framework. To run lineage, please make sure that you have [Flow core](https://github.com/cldcvr/flow-core) as part of your project.
 
 While installation if you run into any issues, head over to our [known issues + solutions document](https://github.com/cldcvr/flow-core/blob/main/packages/flow-lineage/KNOWN_SOLUTIONS.md) to see if a solution already exists.
 
@@ -233,12 +233,12 @@ Once it's running, you will see a lineage component like the image below.
 
 # Properties
 
-Head over to [Flow Lineage Storybook](https://flow.cldcvr.com/v2/index.html) for all properties and playground.
+Head over to [Flow Lineage Storybook](https://flow.ollion.com/v2/index.html) for all properties and playground.
 
 <br>
 
 # Lineage templates
 
 Flow nodes are represented through templates, this allow you to easily change, or write and use your own node template.
 
-Head over to [Flow Lineage templates](https://flow.cldcvr.com/v2/index.html) to view whats available.
+Head over to [Flow Lineage templates](https://flow.ollion.com/v2/index.html) to view whats available.

packages/flow-log/README.md

@@ -0,0 +1,60 @@
+# Flow Log
+
+The Flow Log is built on the Flow design framework ([website](https://flow.ollion.com/) / [github](https://github.com/cldcvr/flow-core)) using [Monaco Editor](https://microsoft.github.io/monaco-editor/)
+
+# Installation
+
+### 1️⃣ Install flow code editor dependency
+
+```
+npm i --save @cldcvr/flow-log
+```
+
+**Note:** after installation, re-start your application.
+
+<br>
+
+### 2️⃣ Import flow-log into your project
+
+Paste the below snippet in your project and add your application startup/runtime code to it.
+
+```javascript
+import "@cldcvr/flow-core";
+import "@cldcvr/flow-log";
+```
+
+<br>
+
+### 3️⃣ For a typescript enabled project (optional)
+
+**Note:** After adding, re-start your application. Make sure you are using version >4.5
+
+**For Vue 3:**
+Copy paste below import types in your `main.ts` file.
+
+```Javascript
+import "@cldcvr/flow-log/dist/types/vue3";
+```
+
+<details>
+<summary>For Vue 2</summary>
+
+Copy paste below import types in your `main.ts` file.
+
+```Javascript
+import "@cldcvr/flow-log/dist/types/vue2";
+```
+
+</details>
+
+<details>
+<summary>For React</summary>
+
+**React**: Include react type in `tsconfig.json` file like below.
+
+```json
+"include": ["src", "./node_modules/@cldcvr/flow-log/dist/types/react.ts"]
+```
+
+</details>
+<br>

packages/flow-md-editor/README.md

@@ -1,6 +1,6 @@
 # Flow MD Editor
 
-The Flow md editor is built on the Flow design framework ([website](https://flow.cldcvr.com/) / [github](https://github.com/cldcvr/flow-core)) using [Monaco Editor](https://microsoft.github.io/monaco-editor/)
+The Flow md editor is built on the Flow design framework ([website](https://flow.ollion.com/) / [github](https://github.com/cldcvr/flow-core)) using [Monaco Editor](https://microsoft.github.io/monaco-editor/)
 
 # Installation
 

packages/flow-table/README.md

@@ -1,6 +1,6 @@
 # Flow Table
 
-The Flow table is built on the Flow design framework ([website](https://flow.cldcvr.com/) / [github](https://github.com/cldcvr/flow-core))
+The Flow table is built on the Flow design framework ([website](https://flow.ollion.com/) / [github](https://github.com/cldcvr/flow-core))
 
 # Installation