Update UI Architecture (frain-dev#816)

* install storybook

* install tailwind

* implement custom spacing in tailwind

* remove old dashboard component

* upgrade to angular 14

* build button and input component with tailwind
implement new components on login page

* update: forgot-password page update with tailwind (frain-dev#817)

* update: updated forgot-password page with tailwind

* updated login link

* update: updated input component to accept readonly value (frain-dev#819)

* update: updated reset password form with tailwind (frain-dev#820)

* Tooltip component with tailwind (frain-dev#827)

* update: added transparent color property to tailwind config

* created new tooltip component with tailwind

* updated input component with tooltip component

* updated: updated create app form with tailwind

* Revert "updated: updated create app form with tailwind"

This reverts commit 350fd5b.

* Created select component with tailwind (frain-dev#831)

* updated grey color in tailwind config

* created select component

* added invalid state for forms

* updated file indentation

* updated select component to accept external styles

* New toggle component with tailwind (frain-dev#834)

* created toggle component with tailwind

* added onchange function for toggle component

* update: updated button component to accept images (frain-dev#830)

* updated input component with required tag (frain-dev#832)

* updated input component with required tag

* took out invalid pseudo class style from input component

* Updated create app form with tailwind (frain-dev#829)

* update: updated create app form with tailwind

* updated create app form with required tags

* created modal component with tailwind (frain-dev#838)

* created modal component with tailwind

* updated styles for modal component

* added closeModal function to modal component backdrop

* updated modal component button and title

* update: updated modal head for full sized modals (frain-dev#840)

* created dropdown component (frain-dev#842)

* created dropdown component

* added transition and updated z-index for dropdown overlay

* updated dropdown classes

* created page component with tailwind (frain-dev#844)

* created page component

* updated page component styles

* Build radio component  (frain-dev#846)

* cadded radio component

* fix radio component

* apply radio component to create project page

Co-authored-by: oluwadaminiola <pelumioni25@gmail.com>

* corrected input component borders (frain-dev#843)

* created empty state component (frain-dev#845)

* created empty state component

* updated empty state img height

* updated empty state img height

* update: update create organisation form with tailwind (frain-dev#837)

* update: update create organisation form with tailwind

* updated create organisation form to fit modal component

* updated create organisation form to contain modal component

* updated button type on org form

* Updated projects page with tailwind (frain-dev#841)

* updated projects page with tailwind

* updated organsiation modal on projects page

* updated projects page with page component

* fix project name size and loader color

* updated projects page with empty state

* updated projects page with empty state

Co-authored-by: horlah <emmanuel.ainaj@gmail.com>

* update dropdown component (frain-dev#851)

* Emmanuel/tailwind/update-events-page (frain-dev#854)

* update dropdown component

* update evnts page

* update event deliveries component

* fix events page class name

* events and event deliveries fixes

* update event delivery details page

* update date filter component

* update time filter component

* update button sizes type

* remove dummy text

* Update subscription form with tailwind (frain-dev#836)

* updated endpoint interface

* modified endpoints and logic types to match select component data

* updated subscription form with tailwind

* updated create subscription form with modal component

* updated subscription form tags

* updated subscriptions form withmodal component

* Updated subscriptions page with tailwind (frain-dev#853)

* updated custom screen size

* updated subscriptions page with tailwind

* updated active subsription

* updated subscriptions loader

* updated subscriptions page with convoy-components

* updated status pipe to accept active|success|Success status

* updated subscriptions form margin

* updated subscriptions form with card component

* updated accept invite page with tailwind (frain-dev#818)

* update: updated accept invite form with tailwind

* updated password checks on accept invite form

* Table component and implementation (frain-dev#860)

* build table component and implement on events table

* update table in apps page

* update table in apps page

* implement table component in source page

* Updated private layout (frain-dev#855)

* updated private layout

* fixed radio position in radio component

* updated analytics form with tailwind

* fixed center modal height in modal component

* updated private layout styles

* updated dropdown to accept button color

* corrected button size on accept invite page

* updated router link active class

* removed modal height, reverted radio position

* Updated sources with tailwind (frain-dev#861)

* updated input component to accept external classes and updated tooltip specs

* updated radio component to contain tooltips

* updated select component tooltip specs

* updated tooltip component specs

* updated tooltip sizes across board

* updated sources page with tailwind

* updated create source page

* reverted radio position

* removed console.log

* redo project layout with tailwind (frain-dev#852)

* redo project layout with tailwind

* updated projects layout

* removed arbitrary values

* Update app, create apps, app details (frain-dev#862)

* updated select compoent to accept value

* removed modal from create app component

* removed modal from create source component

* removed modal wrapper from create subscription component

* updated apps page with tailwind

* added modal for create sources

* updated app details page with tailwind

* updated add endpoint and send event forms

* updated projects

* took out old tooltip module

* Updated teams pagge (frain-dev#859)

* created badge component

* updated delete modal with tailwind

* updated teams page with tailwind

* updated teams page

* updated delete modal

* update teams page with table components

* Accounts/organisation updates (frain-dev#864)

* updated accounts and organisation settings pages

* updated notifications component

* ui fixes

* updated app with notification component

* ui clean up

* updated app portal pages

* Fixes (frain-dev#865)

* fixes (frain-dev#868)

* remove external css

* Custom sources (frain-dev#869)

* custom sources

* updated edit source form for custom fields

* updated check for custom sources

* updated check for custom source on update

* updated check for custom source

* updated twitter source details with last verified date

* ui cleanups (frain-dev#870)

Co-authored-by: Pelumi Muyiwa-Oni <Pelumioni25@gmail.com>

Author: horlah

.vscode/settings.json

@@ -0,0 +1 @@
+{ "scss.lint.unknownAtRules": "ignore" }

web/ui/dashboard/.prettierrc

@@ -1,7 +1,7 @@
 {
 	"singleQuote": true,
 	"tabWidth": 4,
-	"printWidth": 210,
+	"printWidth": 280,
 	"semi": true,
 	"endOfLine": "auto",
 	"arrowParens": "avoid",

web/ui/dashboard/.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/angular",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}

web/ui/dashboard/.storybook/preview.js

@@ -0,0 +1,14 @@
+import { setCompodocJson } from "@storybook/addon-docs/angular";
+import docJson from "../documentation.json";
+setCompodocJson(docJson);
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  docs: { inlineStories: true },
+}

web/ui/dashboard/.storybook/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../tsconfig.app.json",
+  "compilerOptions": {
+    "types": [
+      "node"
+    ],
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": [
+    "../src/test.ts",
+    "../src/**/*.spec.ts",
+    "../projects/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/**/*",
+    "../projects/**/*"
+  ],
+  "files": [
+    "./typings.d.ts"
+  ]
+}

web/ui/dashboard/.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

web/ui/dashboard/angular.json

@@ -18,7 +18,7 @@
 			},
 			"root": "",
 			"sourceRoot": "src",
-			"prefix": "app",
+			"prefix": "convoy",
 			"architect": {
 				"build": {
 					"builder": "@angular-devkit/build-angular:browser",
@@ -100,6 +100,5 @@
 				}
 			}
 		}
-	},
-	"defaultProject": "convoy-ng"
+	}
 }