Enhancement/add storycbook

.storybook/main.js

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

.storybook/preview.js

@@ -0,0 +1,14 @@
+import {defineCustomElements} from "../loader";
+import '!style-loader!css-loader!../global/global.css';
+
+defineCustomElements();
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package.json

@@ -25,7 +25,9 @@
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
-    "lint": "eslint src/**/*{.ts,.tsx}"
+    "lint": "eslint src/**/*{.ts,.tsx}",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@codemirror/basic-setup": "^0.19.1",
@@ -39,10 +41,20 @@
     "sweetalert2": "^11.4.6"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.2",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/postcss": "^2.1.0",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack4": "^6.5.13",
+    "@storybook/html": "^6.5.13",
+    "@storybook/manager-webpack4": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
     "@types/jest": "^27.0.3",
     "autoprefixer": "^10.4.4",
+    "babel-loader": "^8.3.0",
     "jest": "^27.4.5",
     "jest-cli": "^27.4.5",
     "puppeteer": "^10.0.0",

src/components/check-box/check-box.stories.ts

@@ -0,0 +1,11 @@
+export default {
+    title: 'Components/CheckBox',
+};
+
+const Template = (args) => `<check-box name="${args.name}"></check-box>`;
+
+export const CheckBox = Template.bind({});
+
+CheckBox.args = {
+  name: "Abhishek"
+};

src/components/code-editor/code-editor.stories.ts

@@ -0,0 +1,12 @@
+export default {
+    title: 'Components/CodeEditor',
+};
+
+const Template = (args) => `<code-editor url="${args.url}"  doc="${args.doc}"></code-editor>`;
+
+export const CodeEditor = Template.bind({});
+
+CodeEditor.args = {
+  url: "https://google.com",
+  doc: "\n\n\n"
+};

src/components/custom-table/custom-table.stories.ts

@@ -0,0 +1,35 @@
+export default {
+  title: 'Components/CustomTable',
+  argTypes: {
+    currentPage: { control: { type: 'number', min: 1, max: 30, step: 1 } },
+    dataLength: { control: 'text' },
+    limit: { control: { type: 'number', min: 1, max: 90, step: 1 } },
+    isLoading: { control: 'boolean' },
+    isLoadingError: { control: 'boolean' },
+  },
+};
+
+const Template = args =>
+  `<custom-table tableHeader="${args.tableHeader}" tableBody="${args.tableBody}" currentPage="${args.currentPage}" dataLength='${args.dataLength}' next='${args.next}' prev="${args.prev}" limit='${args.limit}' rows='${args.rows}' rowsHandler='${args.rowsHandler}' isLoading='${args.isLoading}' isLoadingError='${args.isLoadingError}'></custom-table>`;
+
+export const CustomTable = Template.bind({});
+
+CustomTable.args = {
+  tableHeader: [
+    { a: 1, b: 2 },
+    { c: 3, d: 4 },
+  ],
+  tableBody: [
+    { p: 1, q: 2 },
+    { r: 6, s: 7 },
+  ],
+  currentPage: '1',
+  dataLength: '20',
+  next: '',
+  prev: '',
+  limit: '30',
+  rows: [1, 2, 3, 4],
+  rowsHandler: '',
+  isLoading: 'false',
+  isLoadingError: 'false',
+};

src/components/data-table/data-table.stories.ts

@@ -0,0 +1,12 @@
+export default {
+  title: 'Components/DataTable',
+  argTypes: {},
+};
+
+const Template = args => `<data-table doc="${args.doc}"></data-table>`;
+
+export const DataTable = Template.bind({});
+
+DataTable.args = {
+  doc: [{}],
+};

src/components/dialog-component/dialog-component.stories.ts

@@ -0,0 +1,11 @@
+export default {
+  title: 'Components/DialogComponent',
+};
+
+const Template = () => `<dialog-component ></dialog-component>`;
+
+export const DialogComponent = Template.bind({});
+
+DialogComponent.parameters = {
+  controls: { hideNoControlsWarning: true },
+};

src/components/drop-down/drop-down.stories.ts

@@ -0,0 +1,15 @@
+export default {
+  title: 'Components/DropDown',
+  argTypes: {
+    alias: { control: 'text' },
+  },
+};
+
+const Template = args => `<drop-down alias="${args.alias}">${args.slot}</drop-down>`;
+
+export const DropDown = Template.bind({});
+
+DropDown.args = {
+  alias: '',
+  slot: '',
+};

src/components/fluid-container/fluid-container.stories.ts

@@ -0,0 +1,14 @@
+export default {
+  title: 'Components/FluidContainer',
+  argTypes: {
+    slot: { control: 'text' },
+  },
+};
+
+const Template = args => `<fluid-container >${args.slot}</fluid-container>`;
+
+export const FluidContainer = Template.bind({});
+
+FluidContainer.args = {
+  slot: '',
+};

src/components/icon-button/icon-button.stories.ts

@@ -0,0 +1,27 @@
+export default {
+  title: 'Components/IconButton',
+  argTypes: {
+    type: {
+      options: ['outlined', 'contained'],
+      control: { type: 'radio' },
+    },
+    iconPosition: {
+      options: ['right', 'left'],
+      control: { type: 'radio' },
+    },
+    btnLabel: { control: 'text' },
+    addClass: { control: 'text' },
+  },
+};
+
+const Template = args => `<icon-button type="${args.type}" iconPosition="${args.iconPosition}" btnLabel="${args.btnLabel}" addClass="${args.addClass}">${args.slot}</icon-button>`;
+
+export const IconButton = Template.bind({});
+
+IconButton.args = {
+  type: 'outlined',
+  iconPosition: 'right',
+  btnLabel: 'Icons Button',
+  addClass: '',
+  slot: 'IconBtn',
+};

src/components/loader-component/loader-component.stories.ts

@@ -0,0 +1,11 @@
+export default {
+  title: 'Components/LoaderComponent',
+};
+
+const Template = () => `<loader-component ></loader-component>`;
+
+export const LoaderComponent = Template.bind({});
+
+LoaderComponent.parameters = {
+  controls: { hideNoControlsWarning: true },
+};

src/components/main-component/main-component.stories.ts

@@ -0,0 +1,11 @@
+export default {
+  title: 'Components/MainComponent',
+};
+
+const Template = () => `<main-component></main-component>`;
+
+export const MainComponent = Template.bind({});
+
+MainComponent.parameters = {
+  controls: { hideNoControlsWarning: true },
+};

src/components/menu-drop-down/menu-drop-down.stories.ts

@@ -0,0 +1,16 @@
+export default {
+  title: 'Components/MenuDropDown',
+  argTypes: {
+    listTitle: { control: 'text' },
+    list: { control: 'object' },
+  },
+};
+
+const Template = args => `<menu-drop-down listTitle="${args.listTitle}" list="${args.list}"></menu-drop-down>`;
+
+export const MenuDropDown = Template.bind({});
+
+MenuDropDown.args = {
+  listTitle: 'Plain',
+  list: [1, 2, 3, 4, 5],
+};

src/components/menu-items/menu-items.stories.ts

@@ -0,0 +1,14 @@
+export default {
+  title: 'Components/MenuItems',
+  argTypes: {
+    slot: { control: 'text' },
+  },
+};
+
+const Template = args => `<menu-items >${args.slot}</menu-items>`;
+
+export const MenuItems = Template.bind({});
+
+MenuItems.args = {
+  slot: '',
+};

src/components/nav-bar/nav-bar.stories.ts

@@ -0,0 +1,12 @@
+export default {
+  title: 'Components/NavBar',
+  argTypes: {},
+};
+
+const Template = args => `<nav-bar >${args.slot}</nav-bar>`;
+
+export const NavBar = Template.bind({});
+
+NavBar.args = {
+  slot: ['Item1', 'Item2', 'Item3'],
+};

src/components/plain-button/plain-button.stories.ts

@@ -0,0 +1,39 @@
+export default {
+  title: 'Components/PlainButton',
+  argTypes: {
+    buttonName: { control: 'text' },
+    addClass: { control: 'text' },
+    type: {
+      options: ['contained', 'outlined', 'text'],
+      control: { type: 'radio' },
+    },
+    width: {
+      options: ['full', 'auto'],
+      control: { type: 'radio' },
+    },
+    color: {
+      options: ['black', 'slate-900', 'orange-700'],
+      control: { type: 'radio' },
+    },
+    hoverColor: {
+      options: ['stone-500', 'red-300', 'orange-200'],
+      control: { type: 'radio' },
+    },
+    disabledHandler: { control: 'boolean' },
+  },
+};
+
+const Template = args =>
+  `<plain-button addClass="${args.addClass}" type="${args.type}" width="${args.width}" color='${args.color}' hoverColor='${args.hoverColor}' disabledHandler="${args.disabledHandler}">${args.buttonName}</plain-button>`;
+
+export const PlainButton = Template.bind({});
+
+PlainButton.args = {
+  buttonName: 'Plain Button',
+  addClass: '',
+  type: 'outlined',
+  width: 'auto',
+  color: 'red-300',
+  hoverColor: 'red-400',
+  disabledHandler: 'false',
+};

src/components/radio-button/radio-button.stories.ts

@@ -0,0 +1,18 @@
+export default {
+  title: 'Components/RadioButton',
+  argTypes: {
+    align: {
+      options: ['vertical', 'horizontal'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+const Template = args => `<radio-button name="${args.name}" align="${args.align}"></radio-button>`;
+
+export const RadioButton = Template.bind({});
+
+RadioButton.args = {
+  name: 'Durga',
+  align: 'horizontal',
+};

src/components/res-editor/readme.md

@@ -10,7 +10,7 @@
 | Property        | Attribute        | Description | Type                  | Default     |
 | --------------- | ---------------- | ----------- | --------------------- | ----------- |
 | `doc`           | `doc`            |             | `any`                 | `undefined` |
-| `responseLabel` | `response-label` |             | `"error" \| "result"` | `undefined` |
+| `responseLabel` | `response-label` |             | `"error" \| "result"` | `'result'`  |
 
 
 ## Dependencies

src/components/res-editor/res-editor.stories.ts

@@ -0,0 +1,19 @@
+export default {
+  title: 'Components/ResEditor',
+  argTypes: {
+    doc: { control: 'text' },
+    responseLabel: {
+      options: ['result', 'error'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+const Template = args => `<res-editor doc="${args.doc}" responseLabel="${args.responseLabel}"></res-editor>`;
+
+export const ResEditor = Template.bind({});
+
+ResEditor.args = {
+  doc: 'segss',
+  responseLabel: 'result',
+};

src/components/res-editor/res-editor.tsx

@@ -12,7 +12,7 @@ export class ResEditor {
   @State() view: EditorView;
   @State() state: EditorState;
   @Prop() doc: any;
-  @Prop() responseLabel: 'result' | 'error';
+  @Prop() responseLabel: 'result' | 'error' = 'result';
 
   labelTitle = {
     result: {

src/components/side-bar/side-bar.stories.ts

@@ -0,0 +1,11 @@
+export default {
+  title: 'Components/SideBar',
+};
+
+const Template = () => `<side-bar ></side-bar>`;
+
+export const SideBar = Template.bind({});
+
+SideBar.parameters = {
+  controls: { hideNoControlsWarning: true },
+};

src/components/tab-component/tab-component.stories.ts

@@ -0,0 +1,13 @@
+export default {
+  title: 'Components/TabComponent',
+  argTypes: {},
+};
+
+const Template = args => `<tab-component doc="${args.doc}" responseLabel="${args.slot}"></tab-component>`;
+
+export const TabComponent = Template.bind({});
+
+TabComponent.args = {
+  doc: '',
+  responseLabel: '',
+};