Merge pull request #8 from raralabs/dev

Dev

.editorconfig

@@ -1,10 +1,10 @@
-
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
 trim_trailing_whitespace = true

README.md

@@ -31,11 +31,6 @@ You need to import `css` separately in the project. This is provided separately,
 ```jsx
 import "react-patro/src/styles.css";
 ```
-
-## License
-
-React Patro is [MIT Licensed](LICENSE)
-
 ## How to start for development
 
 run the react-patro source code. This generates dist folder
@@ -51,3 +46,12 @@ then go to example folder which is basically create-react-app template where rea
     cd example && npm i
     npm start
 ```
+
+## How to remove Ugly error message ( for development)
+
+Comment the terser `rollup.config.js` from line 33 & 8 . and rebuild the code.The should remove the code uglifying process.
+
+## License
+
+React Patro is [MIT Licensed](LICENSE)
+

doc/docs/GettingStarted/installation.md

@@ -24,6 +24,7 @@ You need to import `css` separately in the project. This is provided separately,
 import "react-patro/src/styles.css";
 ```
 
+<!--
 ## Dependencies
 
-## Peer Library
+## Peer Library -->

doc/docs/Hooks/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Hooks",
+  "position": 3
+}

doc/docs/Hooks/useCalendarData.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 1
+---
+
+# useCalendarData

doc/docs/Inprogress/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Documentation In progress",
+  "position": 4
+}

doc/docs/Inprogress/doc.md

@@ -0,0 +1,187 @@
+---
+sidebar_position: 1
+---
+
+# React AD BS Date picker
+
+`Available Variants as of now:`
+
+    1. Calendar -> Renders Calendar Layout (The basic building block);
+    2. DatePicker -> Input field with Calendar on popup
+    3. RangePicker -> Two Calendar Layout side by side for range selection
+    4. DefinedRangeSelector -> TODO
+    5. //TODO
+
+## Data passed/entered (Value) -Input
+
+The Calendar component can be both controlled and uncontrolled. If value is passed, defaultValue is ignored.
+
+- **`value`** : string (formatted according to dateFormat)
+- **`defaultValue`**: string (formatted according to dateFormat)
+
+---
+
+## Calendar Configuration
+
+- **`calendarType`** - "AD"| "BS" default= //TODO
+
+Though all inner operations are done in AD format, this configuration differentiates the rendering date value. If AD is passed then AD calendar is rendered and if BS is passed then BS calendar is rendered.
+
+> Based on this props, the input and ouput values also differ.
+
+---
+
+<br/>
+
+## Data Selection/Change - Output
+
+For calendarLayout
+**`onSelect`** (formattedDate: string,adDate: DateType,bsDate: DateType, dateString:Date)=>void;
+
+1. The **formattedDate** will be string formatted according to the **`dateFormat`** provided and **`calendarType`**. If **`calendarType`** is BS then the output will be tha formatted string of BS Date and if it is AD then the output will the formatted string of AD Date.
+2. The **adDate** //TODO for now object with property date,year,month is sent
+3. The **bsDate** //TODO for now object with property date,year, month is sent
+
+<br/>
+
+**`onChange`** (formattedDate: string,adDate: DateType,bsDate: DateType, dateString:Date)=>void;
+
+> All the arguments are same for both onSelect and onChange. onSelect is available in Calendar while onChange is avaliale in DatePicker
+
+---
+
+## Formatting
+
+**`dateFormat`**: string combination of y,m and d
+
+default: "" //TODO
+
+y - Year, m - Month, d- Day
+
+Acceptable format are the permutation of "yyyy", "mm","m","d","dd"
+Internally the date format is lowercased so any case is acceptable. All the date received from the library will eventually be formatted according to this props.
+
+> Also make sure to send all the dates **`defaultValue`**,**`maxDate`**,**`minDate`**, **`value`** to be in the format passed in **`dateFormat`** props
+
+---
+
+## Disable Configuration
+
+1. ### `maxDate`:string
+
+> The maximum Date allowed. Beyond this date, everything is disabled. Make sure to pass the date formatted according to the dateFormat Props
+
+<br/>
+
+2. ### `minDate`:string
+
+> The minimum Date allowed. All Dates before the date are disabled. Make sure to pass the date formatted according to the dateFormat props
+
+<br/>
+
+3. ### `disablePast`:boolean
+
+> Disables all the dates before today's date;
+
+<br/>
+
+4. ### `disableFuture`:boolean
+
+> Disables all the dates after today's date;
+
+<br/>
+
+5. ### `disableDate`: (formattedDate: string,adDate: DateType,bsDate: DateType, dateString:Date) => boolean;
+
+> Use your own custom function to disable The date. All the arguments received on the callback are same as that of **onSelect** props
+
+---
+
+## DropDown
+
+1. ### `showMonthDropdown` : boolean | "full" | "short" | "min"
+
+   **default** = false
+
+   > passing full, short and min is still not supported
+
+2. ### `showYearDropdown` : boolean | [min:number , max:number]
+
+   **default** = false
+
+   > passing min and max array is sitll not supported
+
+---
+
+## Range
+
+//TODO
+
+## DefinedRangeSelector
+
+has some predefined ranges set by passing props.
+
+// TODO support plain array like [-15,-30,-7,-25]
+
+**`definedRanges`** : [{ label:string,offset:number|IDateoffset }]
+
+**`basedate`** : string
+
+This prop contains the predefined ranges that allows the selection of ranges
+
+- **`label`** => (unique) This label is used as **key** in the list and so is supposed to be unique. The label will the the description rendered on the screen
+- **`offset`** => offset can be either the object of shape _**{date, month, year}**_ or a single number. if a single number is provided then it is assumed as _**date**_ offset. The offset will be used to calculate the selection range based on baseDate provided.
+
+baseDate => The base by which the range selection is calcuated using the offset on definedRanges. default => Today. `baseDate` is supposed to be string formatted according to the dateFormat provided.
+
+for example:
+
+```javascript
+
+const definedRanges = [
+ {
+   label: "Last Year",
+   offset: { year: -1 },
+ },
+ {
+   label: "Last 15 days",
+   offset: -15,
+ },
+ {
+   label: "Last 7 days",
+   offset: -7,
+ },
+ {
+   label: "Last 25 days",
+   offset: -25,
+ },
+ {
+   label: "Last 30 days",
+   offset: -30,
+ },
+ {
+   label: "Last 45 days",
+   offset: -45,
+ },
+ {
+   label: "Next week",
+   offset: 7,
+ },
+];
+const baseDate = "2020-10-12";
+
+/// Rendered output
+Last Year       2019-10-12 - 2020-10-12
+Last 15 days    2020-09-27 - 2020-10-12
+Last 7 days     2020-10-05 - 2020-10-12
+Last 25 days    2020-09-17 - 2020-10-12
+Last 30 days    2020-09-12 - 2020-10-12
+Last 45 days    2020-08-28 - 2020-10-12
+Next week       2020-10-12 - 2020-10-19
+///
+```
+
+## Terms:
+
+-parse => Convert date string to date object using the date format for example: "2020-10-12" => {year: 2020, month:10, date:12} given format ("YYYY-MM-DD");
+-format => Opposite of parse. Converts date object to date string. for example: {year: 2020, month:10, date:12}=>"2020-10-12" => given format ("YYYY-MM-DD");

doc/docs/intro.md

@@ -4,32 +4,4 @@ sidebar_position: 1
 
 # Overview
 
-Let's discover **Docusaurus in less than 5 minutes**.
-
-## Getting Started
-
-Get started by **creating a new site**.
-
-Or **try Docusaurus immediately** with **[new.docusaurus.io](https://new.docusaurus.io)**.
-
-## Generate a new site
-
-Generate a new Docusaurus site using the **classic template**:
-
-```shell
-npx @docusaurus/init@latest init my-website classic
-```
-
-## Start your site
-
-Run the development server:
-
-```shell
-cd my-website
-
-npx docusaurus start
-```
-
-Your site starts at `http://localhost:3000`.
-
-Open `docs/intro.md` and edit some lines: the site **reloads automatically** and display your changes.
+React-patro is a collection of functions, hooks and components for both AD and BS calendar. These functions and hooks can be used independently to create your own designs of calendar though we try to provide our own simplistic implementation as well which is totally customization. You can perform date conversions, manipulate date formats and render a datepicker and calendar.

doc/docusaurus.config.js

@@ -26,7 +26,6 @@ module.exports = {
           position: "left",
           label: "Tutorial",
         },
-        { to: "/blog", label: "Blog", position: "left" },
         {
           href: "https://github.com/raralabs/react-patro",
           label: "GitHub",
@@ -50,14 +49,8 @@ module.exports = {
       {
         docs: {
           sidebarPath: require.resolve("./sidebars.js"),
-          // Please change this to your repo.
           editUrl: "https://github.com/raralabs/react-patro/edit/master/doc/",
         },
-        blog: {
-          showReadingTime: true,
-          // Please change this to your repo.
-          editUrl: "https://github.com/raralabs/react-patro/edit/master/blog/",
-        },
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
         },

doc/src/components/HomepageFeatures.js

@@ -1,46 +1,41 @@
-import React from 'react';
-import clsx from 'clsx';
-import styles from './HomepageFeatures.module.css';
+import React from "react";
+import clsx from "clsx";
+import styles from "./HomepageFeatures.module.css";
 
 const FeatureList = [
   {
-    title: 'Easy to Use',
-    Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
+    title: "Ready to use functions",
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        React patro provides ready to use functions for date manipulations for
+        both bs and ad dates. You can simply import them from react-patro and
+        use them per your use.
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
-    Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
+    title: "React hooks for customization",
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        React patro provides performant hooks for populating your own calendar
+        design and carry out other ad to bs conversion
       </>
     ),
   },
   {
-    title: 'Powered by React',
-    Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
+    title: "AD & BS Calendar functionality",
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        Now you don't need to use two different packages for ad and bs calendar
+        rendering.
       </>
     ),
   },
 ];
 
-function Feature({Svg, title, description}) {
+function Feature({ Svg, title, description }) {
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} alt={title} />
-      </div>
+    <div className={clsx("col col--4")}>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>
         <p>{description}</p>