Intro to storybook setup

.storybook/main.js

@@ -1,11 +1,13 @@
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/docs/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
+    "@storybook/addon-docs",
     "@storybook/addon-a11y",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
   ],
+  staticDirs: ['../public'],
   framework: "@storybook/vue3",
   core: {
     builder: "@storybook/builder-webpack5",

.storybook/preview.js

@@ -4,7 +4,9 @@ import VueClickAway from "vue3-click-away";
 app.use(VueClickAway);
 
 export const parameters = {
+  layout: 'centered',
   actions: { argTypesRegex: "^on[A-Z].*" },
+  viewMode: 'docs',
   controls: {
     matchers: {
       color: /(background|color)$/i,

src/docs/Contributing.stories.mdx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Contributing"/>
+
+# Contribution Guidelines
+
+Moja global welcomes contributions to the community through various projects that you can find on [GitHub](https://github.com/moja-global). If you want to contribute a new component to the library, please follow the steps given below:
+
+1. Replace COMPONENT_NAME with your own component name
+
+ ```
+ cd mojaglobal-ui
+ mkdir COMPONENT_NAME
+ cd COMPONENT_NAME
+ ```
+
+2. Follow the steps provided in the "[Getting Started](?path=/docs/getting-started--page)" page to define your own component and its corresponding story.
+
+3. Add all the files related to the component in the component directory.
+
+4. Export your component in `ui-library/mojaglobal-ui/src/components/index.js`.
+
+5. Add the corresponding story in the Storybook.
+
+6. Add the details for the component on the `README.md` file.
+
+If you have an idea for a new feature, bug fix, or just want to update docs, please submit an issue or pull request.
+To add new features or fix bugs, open the corresponding file and do the required changes in the file as well as in its corresponding story.
+
+Our planned features can be found on our [Issue Tracker](https://github.com/moja-global/ui-library/issues).
+If you have any suggestions, please reach out to us on [Slack](https://mojaglobal.slack.com/).

src/docs/How-To-Get-Started.stories.mdx

@@ -0,0 +1,126 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Getting Started"/>
+
+
+# Getting Started with UI Library
+
+The UI Library is a Vue.js user-interface library for Moja global projects. Below is a detailed guide for you to understand what a component is, integrate it in your project and contribute to our project by creating your own component or by enhancing the existing ones.
+
+## Components
+
+Components allow us to split the UI into independent and reusable pieces, allowing us to think about each piece in isolation. Vue implements its own component model while letting us encapsulate custom component and logic inside each.
+
+#### Defining a Component
+
+In the storybook (while not using a build step), the component is defined as a plain JavaScript object containing Vue-specific options. Let us look at the below Storybook snippet for [Primary Footer Component](?path=/docs/components-footer--primary) as an example:
+
+```js
+  template:
+    '<Footer v-bind:content="content" v-bind:socials="socials" Heading="Footer" lowercontent="Copyright © 2022 moja global." logosrc="https://community.moja.global/img/logo-light.png" trigger="hover" color="white" Bgheading="#2f382a" Bgcontent="#475447" socialsheading="Follow Us On" :isPrimary="true"></Footer>',
+
+```
+
+Here, the template is inlined as a JavaScript string , which Vue compiles on the fly. Multiple footer components (Primary and Secondary) are exported from `Footer.stories.js`, therefore named exports are used to do the same, hence the syntax.
+You can also define a single component and export it as the default export. In the above case, we can see that this component is customized to cater to Moja global's requirement. 
+
+While using a build step, we typically define each Vue component in a dedicated `.vue` file. For this, we can take a look at [FooterComponent.vue](https://github.com/moja-global/ui-library/blob/main/src/stories/Footer.stories.js) file present in `@moja-global/mojaglobal-ui` as an example.
+The order of script and template tag are interchangeable. This is known as *Single-File Component* syntax.
+
+#### Using a Component
+
+To use a child component (containing customized content and logic), we need to import it in the parent component. 
+
+ ```js
+ <template>
+ </template>
+
+ <script>
+ import {FooterComponent } from '@moja-global/mojaglobal-ui'
+ </script>
+ ```
+ Assuming `FooterComponent.vue` as the file containing parent component which is placed in `@moja-global/mojaglobal-ui`, the component will be exposed as the file's default export. To expose the imported content to the template, we need to register it with `components` option.
+
+ ```js
+ <template> 
+   <FooterComponent 
+   ></FooterComponent> 
+ </template> 
+
+ <script> 
+ import { FooterComponent } from '@moja-global/mojaglobal-ui' 
+
+ export default { 
+   name: 'Footer', 
+   components: { 
+     FooterComponent 
+   }, 
+   setup() { 
+   } 
+ } 
+ </script> 
+
+ <style scoped></style>
+ ```
+
+The component will be then available as a tag using the key it is registered under, i.e, `<FooterComponent></FooterComponent>`
+
+## Passing props
+
+Props are custom attributes you can register on a component.
+
+For example, in case of `DatePicker` component present in [Datepicker.vue file](https://github.com/moja-global/FLINT-UI/blob/master/flint.ui/src/components/Datepicker/Datepicker.vue), we can declare props in object syntax, wherein for each property in the object declaration syntax, the key is the name of the prop, while the value should be the constructor function of the expected type.
+
+ ```js
+ <script> 
+ import { DatePickerComponent } from '@moja-global/mojaglobal-ui' 
+ import dayjs from 'dayjs' 
+ import { ref, computed } from 'vue' 
+
+ export default { 
+   components: { 
+     DatePickerComponent 
+   }, 
+   props: { 
+     value: { type: String, default: dayjs('2022-01-31') } 
+   }, 
+   setup(props) { 
+     const selectedDate = ref(props.value) 
+
+     const inputVal = computed({ 
+       get: () => { 
+         return selectedDate.value 
+       }, 
+       set: (val) => { 
+         // this.$emit('input', dayjs(val).toString()) 
+         selectedDate.value = val 
+       } 
+     }) 
+
+     function onChange(val) { 
+       selectedDate.value = val 
+     } 
+
+     function styles() { 
+       return { maxWidth: '250px' } 
+     } 
+
+     return { 
+       selectedDate, 
+       inputVal, 
+       onChange, 
+       styles 
+     } 
+   } 
+ } 
+ </script>
+ ```
+
+## Learning more
+
+Here are some resources to learn more about components and how to integrate them in your fresh new project:
+
+ - [Vue.js Guide](https://vuejs.org/guide/components/props.html)
+ - [Demo project using Moja global's UI Library](https://github.com/Palaksharma23/mojaglobal-ui)
+
+For more information, checkout the documentation for each component in the Storybook setup.

src/docs/Introduction.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="Introduction"/>
+
+<center>
+<img src="/moja-global-icon.jpg" alt="logo" height="225" width="390"/>
+</center>
+
+#
+# Introduction 
+
+## Moja global
+
+Moja global is a not for profit, collaborative project that brings together a community of experts to develop open-source software that allows users to accurately and affordably estimate greenhouse gas emissions and removals from the AFOLU sector. The project’s members aim to support the widest possible use of credible emissions estimation software.
+
+## UI Library by Moja global
+
+Moja global User-interface (UI) library aims to bring forward an intuitive, consistent, and easy-to-use interface that can help our developers within the User-Interface working group and users to quickly accomplish their tasks. The UI library aims to considerably improve our design & development workflow and meet the acceptable web accessibility requirements for our potential users. A UI library helps us mitigate popular UI-development issues like inconsistent user-experience, performance issues, accessibility requirements and more.
+
+### Related links
+
+To know more about Moja global:
+
+- [Official website](https://moja.global/)
+- [GitHub](https://github.com/moja-global)
+- [Community website](https://community.moja.global/)
+- [Docs](https://docs.moja.global/en/master/)
+
+To know more about FLINT:
+
+- [FLINT website](https://flint-ui.vercel.app)
+- [FLINT GitHub](https://github.com/moja-global/FLINT)
+
+To know more about the UI-Library:
+
+- [UI Library GitHub](https://github.com/moja-global/ui-library)
+- [UI Library NPM package](https://www.npmjs.com/package/@moja-global/mojaglobal-ui)
+- [UI Library Storybook](https://moja-global-ui-library.vercel.app/)