Merge pull request #1743 from wix/infra/Docs_site

Infra/docs site

Author: Inbal-Tish

.gitignore

@@ -5,7 +5,6 @@ yarn.lock
 .vscode
 package-lock.json
 
-
 # OSX
 #
 .DS_Store

.npmignore

@@ -252,6 +252,7 @@ test/
 ios/
 android/
 demo/
+docsRNC/
 .babelrc
 # eslint-rules/
 scripts/

docsRNC/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docsRNC/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docsRNC/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')]
+};

docsRNC/docs/Agenda.md

@@ -0,0 +1,61 @@
+Agenda component  
+[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agenda.tsx)
+:::info
+This component extends **[CalendarList, FlatList](https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.tsx,https://reactnative.dev/docs/flatlist)** props.
+:::
+
+<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/agenda.gif?raw=true'}/>
+
+</div>
+
+## API
+
+### items
+
+the list of items that have to be displayed in agenda. If you want to render item as empty date the value of date key has to be an empty array []. If there exists no value for date key it is considered that the date in question is not yet loaded  
+<span style={{color: 'grey'}}>AgendaSchedule</span>
+
+### loadItemsForMonth
+
+Handler which gets executed when items for a certain month should be loaded (month became visible)  
+<span style={{color: 'grey'}}>(data: DateData) => void</span>
+
+### onDayChange
+
+Handler which gets executed when day changes while scrolling agenda list  
+<span style={{color: 'grey'}}>(data: DateData) => void</span>
+
+### onCalendarToggled
+
+Handler which gets executed when the calendar is opened or closed  
+<span style={{color: 'grey'}}>(enabled: boolean) => void</span>
+
+### selected
+
+initially selected day  
+<span style={{color: 'grey'}}>string</span>
+
+### renderKnob
+
+Replace default agenda's knob with a custom one  
+<span style={{color: 'grey'}}>() => JSX.Element</span>
+
+### hideKnob
+
+Whether to hide the knob  
+<span style={{color: 'grey'}}>boolean</span>
+
+### showClosingKnob
+
+Whether the knob should always be visible (when hideKnob = false)  
+<span style={{color: 'grey'}}>boolean</span>
+
+### showOnlySelectedDayItems
+
+Whether to show items only for the selected date  
+<span style={{color: 'grey'}}>boolean</span>
+
+### renderEmptyData
+
+Replace default ActivityIndicator with a custom one  
+<span style={{color: 'grey'}}>() => JSX.Element</span>

docsRNC/docs/AgendaList.md

@@ -0,0 +1,54 @@
+Agenda list component  
+[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendar.tsx)
+:::info
+This component extends **[FlatList](https://reactnative.dev/docs/flatlist)** props.
+:::
+
+<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}></div>
+
+## API
+
+### theme
+
+Specify theme properties to override specific styles for calendar parts  
+<span style={{color: 'grey'}}>Theme</span>
+
+### dayFormat
+
+Day format in section title. Formatting values: http://arshaw.com/xdate/#Formatting  
+<span style={{color: 'grey'}}>string</span>
+
+### dayFormatter
+
+A function to custom format the section header's title  
+<span style={{color: 'grey'}}>(arg0: string) => string</span>
+
+### useMoment
+
+Whether to use moment.js for date string formatting  
+<span style={{color: 'grey'}}>boolean</span>
+
+### markToday
+
+Whether to mark today's title with the 'Today, ...' string  
+<span style={{color: 'grey'}}>boolean</span>
+
+### avoidDateUpdates
+
+Whether to block the date change in calendar (and calendar context provider) when agenda scrolls  
+<span style={{color: 'grey'}}>boolean</span>
+
+### scrollToNextEvent
+
+Whether to enable scrolling the agenda list to the next date with content when pressing a day without content  
+<span style={{color: 'grey'}}>boolean</span>
+
+### viewOffset
+
+Offset scroll to the section  
+<span style={{color: 'grey'}}>number</span>
+
+### sectionStyle
+
+The style passed to the section view  
+<span style={{color: 'grey'}}>ViewStyle</span>

docsRNC/docs/Calendar.md

@@ -0,0 +1,186 @@
+Calendar component  
+[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.tsx)
+:::info
+This component extends **[CalendarHeader, BasicDay](https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/index.tsx,https://github.com/wix/react-native-calendars/blob/master/src/calendar/day/basic/index.tsx)** props.
+:::
+
+<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/calendar.gif?raw=true'}/>
+
+</div>
+
+## API
+
+### theme
+
+Specify theme properties to override specific styles for calendar parts  
+<span style={{color: 'grey'}}>Theme</span>
+
+### style
+
+Specify style for calendar container element  
+<span style={{color: 'grey'}}>ViewStyle</span>
+
+### headerStyle
+
+Specify style for calendar header  
+<span style={{color: 'grey'}}>ViewStyle</span>
+
+### customHeader
+
+Allow rendering a totally custom header  
+<span style={{color: 'grey'}}>any</span>
+
+### initialDate
+
+Initially visible month  
+<span style={{color: 'grey'}}>string</span>
+
+### minDate
+
+Minimum date that can be selected, dates before minDate will be grayed out  
+<span style={{color: 'grey'}}>string</span>
+
+### maxDate
+
+Maximum date that can be selected, dates after maxDate will be grayed out  
+<span style={{color: 'grey'}}>string</span>
+
+### firstDay
+
+If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday  
+<span style={{color: 'grey'}}>number</span>
+
+### markedDates
+
+Collection of dates that have to be marked  
+<span style={{color: 'grey'}}>MarkedDatesType</span>
+
+### displayLoadingIndicator
+
+Whether to display loading indicator  
+<span style={{color: 'grey'}}>boolean</span>
+
+### showWeekNumbers
+
+Whether to show weeks numbers  
+<span style={{color: 'grey'}}>boolean</span>
+
+### hideExtraDays
+
+Whether to hide days of other months in the month page  
+<span style={{color: 'grey'}}>boolean</span>
+
+### showSixWeeks
+
+Whether to always show six weeks on each month (when hideExtraDays = false)  
+<span style={{color: 'grey'}}>boolean</span>
+
+### disableMonthChange
+
+Whether to disable changing month when click on days of other months (when hideExtraDays is false)  
+<span style={{color: 'grey'}}>boolean</span>
+
+### enableSwipeMonths
+
+Whether to enable the option to swipe between months  
+<span style={{color: 'grey'}}>boolean</span>
+
+### disabledByDefault
+
+Whether to disable days by default  
+<span style={{color: 'grey'}}>boolean</span>
+
+### allowSelectionOutOfRange
+
+Whether to allow selection of dates before minDate or after maxDate  
+<span style={{color: 'grey'}}>boolean</span>
+
+### onDayPress
+
+Handler which gets executed on day press  
+<span style={{color: 'grey'}}>(date: DateData) => void</span>
+
+### onDayLongPress
+
+Handler which gets executed on day long press  
+<span style={{color: 'grey'}}>(date: DateData) => void</span>
+
+### onMonthChange
+
+Handler which gets executed when month changes in calendar  
+<span style={{color: 'grey'}}>(date: DateData) => void</span>
+
+### onVisibleMonthsChange
+
+Handler which gets executed when visible month changes in calendar  
+<span style={{color: 'grey'}}>(months: DateData[]) => void</span>
+
+### monthFormat
+
+Month format for the header's title. Formatting values: http://arshaw.com/xdate/#Formatting  
+<span style={{color: 'grey'}}>string</span>
+
+### hideDayNames
+
+Whether to hide the days names  
+<span style={{color: 'grey'}}>boolean</span>
+
+### hideArrows
+
+Whether to hide the arrows  
+<span style={{color: 'grey'}}>boolean</span>
+
+### disableArrowLeft
+
+Whether to disable the left arrow  
+<span style={{color: 'grey'}}>boolean</span>
+
+### disableArrowRight
+
+Whether to disable the right arrow  
+<span style={{color: 'grey'}}>boolean</span>
+
+### renderArrow
+
+Replace default arrows with custom ones (direction: 'left' | 'right')  
+<span style={{color: 'grey'}}>(direction: Direction) => ReactNode</span>
+
+### onPressArrowLeft
+
+Handler which gets executed when press left arrow. It receive a callback to go to the previous month  
+<span style={{color: 'grey'}}>(method: () => void, month?: string) => void</span>
+
+### onPressArrowRight
+
+Handler which gets executed when press right arrow. It receive a callback to go to the next month  
+<span style={{color: 'grey'}}>(method: () => void, month?: string) => void</span>
+
+### disabledDaysIndexes
+
+Whether to apply custom disable color to selected day indexes  
+<span style={{color: 'grey'}}>number[]</span>
+
+### renderHeader
+
+Replace default title with custom one  
+<span style={{color: 'grey'}}>(date?: string) => ReactNode</span>
+
+### customHeaderTitle
+
+Replace default title with custom element  
+<span style={{color: 'grey'}}>JSX.Element</span>
+
+### dayComponent
+
+Replace default day with custom day rendering component  
+<span style={{color: 'grey'}}>JSX.Element</span>
+
+### disableAllTouchEventsForDisabledDays
+
+Whether to disable all touch events for disabled days (can be override with 'disableTouchEvent' in 'markedDates')  
+<span style={{color: 'grey'}}>boolean</span>
+
+### disableAllTouchEventsForInactiveDays
+
+Whether to disable all touch events for inactive days (can be override with 'disableTouchEvent' in 'markedDates')  
+<span style={{color: 'grey'}}>boolean</span>