(v8) Typeducks

README.md

@@ -6,10 +6,10 @@ Lightweight date picker component for [React.js](http://reactjs.org).
   <img src="https://img.shields.io/npm/v/react-day-picker.svg?style=flat-square" alt="npm version">
 </a>
 <a href="http://npm-stat.com/charts.html?package=react-day-picker">
-  <img src="https://img.shields.io/npm/dm/react-day-picker.svg?style=flat-square" alt="npm downloads">    
+  <img src="https://img.shields.io/npm/dm/react-day-picker.svg?style=flat-square" alt="npm downloads">
 </a>
 
-## Getting started
+## Get started
 
 ```bash
 npm install react-day-picker

package.json

@@ -11,7 +11,7 @@
   "license": "MIT",
   "scripts": {
     "build": "yarn workspaces foreach -v -t run build",
-    "develop": "concurrently --names \"react-day-picker,website\" \"yarn workspace react-day-picker develop\" \"yarn workspace website develop\""
+    "develop": "concurrently --names react-day-picker,website,scripts \"yarn workspace react-day-picker develop\" \"yarn workspace website develop\" \"yarn workspace scripts develop\""
   },
   "repository": {
     "type": "git",
@@ -22,9 +22,10 @@
   },
   "workspaces": [
     "website",
+    "scripts",
     "packages/*"
   ],
   "devDependencies": {
-    "concurrently": "^5.1.0"
+    "concurrently": "^5.2.0"
   }
 }

packages/react-day-picker/package.json

@@ -26,40 +26,35 @@
     "build-lib": "tsc",
     "build-css": "cp ./src/style.css ./dist/style.css",
     "build-dist": "cross-env TS_NODE_PROJECT=tsconfig.dist.json webpack",
-    "build": "yarn build-clean && yarn build-dist && yarn build-lib && yarn build-types && yarn build-css",
-    "docs": "yarn docs:markdown && yarn docs:json",
-    "docs:markdown": "typedoc --out ../../website/docs/api --theme ./typedoc/themes/default",
-    "docs:json": "typedoc --json ../../website/docs/api.json"
+    "build": "yarn build-clean && yarn build-dist && yarn build-lib && yarn build-types && yarn build-css"
   },
   "files": [
     "dist",
     "lib",
     "src"
   ],
   "devDependencies": {
-    "@babel/core": "^7.9.0",
     "@testing-library/jest-dom": "^5.5.0",
-    "@testing-library/react": "^10.0.2",
+    "@testing-library/react": "^10.0.4",
     "@types/jest": "^25.2.1",
-    "@types/node": "^13.13.1",
+    "@types/node": "^13.13.4",
     "@types/react": "^16.9.34",
     "@types/webpack": "^4.41.12",
-    "@typescript-eslint/eslint-plugin": "^2.29.0",
-    "@typescript-eslint/parser": "^2.29.0",
+    "@typescript-eslint/eslint-plugin": "^2.30.0",
+    "@typescript-eslint/parser": "^2.30.0",
     "cross-env": "^7.0.2",
     "date-fns": "^2.12.0",
     "debug": "^4.1.1",
     "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-jest": "^23.8.2",
-    "jest": "^25.4.0",
-    "prettier": "^2.0.4",
+    "eslint-plugin-prettier": "^3.1.3",
+    "jest": "^25.5.4",
+    "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "ts-jest": "^25.4.0",
-    "ts-loader": "^7.0.1",
-    "ts-node": "^8.9.0",
-    "tsconfig-paths": "^3.9.0",
-    "tsconfig-paths-webpack-plugin": "^3.2.0",
+    "ts-loader": "^7.0.2",
     "tslib": "^1.11.1",
     "typescript": "^3.8.3",
     "webpack": "^5.0.0-beta.13",
@@ -68,9 +63,5 @@
   "peerDependencies": {
     "date-fns": "^2.12.0",
     "react": "^16.8.0"
-  },
-  "dependencies": {
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.3"
   }
 }

packages/react-day-picker/src/components/DayPicker/DayPicker.tsx

@@ -7,7 +7,22 @@ import { defaultProps } from './defaults/defaultProps';
 /**
  * Render a date picker component.
  *
- * @param {DayPickerProps} props
+ * To select a day:
+ *
+ * ```jsx
+ * function App() {
+ * return (
+ *  <DayPicker
+ *    initialMonth={new Date(2020, 8)}
+ *    selected={[
+ *      new Date(2020, 8, 1),
+ *      new Date(2020, 8, 19),
+ *      new Date(2020, 8, 21),
+ *      { after: new Date(2020, 8, 30), before: new Date(2020, 10, 1) }
+ *    ]}
+ *  />
+ * );
+ * ```
  * @category Components
  */
 export function DayPicker(props = defaultProps): JSX.Element {

packages/react-day-picker/src/components/DayPicker/types/DayPickerProps.ts

@@ -17,13 +17,15 @@ import {
 import { DayPickerElements } from './DayPickerElements';
 
 /**
- * Names of the CSS classes for each UI element.
+ * An object defining the CSS class names for each [DayPicker
+ * element](./enumerations#daypickerelements).
  */
 export type DayPickerClassNames = {
   [name in DayPickerElements]?: string;
 };
 /**
- * Inline `style` for each UI element.
+ * An object defining the inline style for each [DayPicker
+ * element](./enumerations#daypickerelements).
  */
 export type DayPickerStyles = {
   [name in DayPickerElements]?: React.CSSProperties;
@@ -71,17 +73,42 @@ export interface DayPickerProps {
   /**
    * Change the class names used by `DayPicker`.
    *
-   * Use this prop when you cannot style the CSS using the
-   * [[defaultClassNames]], for example when using CSS modules.
+   * Use this prop when you need to change the [default class
+   * names](defaultClassNames.mdx) — for example when using CSS modules.
    *
-   * ```jsx
-   * import { selected, disabled } from './styles.css';
-   * <DayPicker classNames={{ selected, disabled }} />
-   * ````
+   * ### Example
+   *
+   * Using custom class names for the head and the caption elements.
+   *
+   * ```jsx preview
+   *  function App() {
+   *    const css = `
+   *      .salmon-head {
+   *        color: salmon;
+   *      }
+   *      .purple-caption {
+   *        font-weight: bold;
+   *        color: purple;
+   *        padding: 3px 0 6px 0;
+   *      }
+   *    `;
+   *    return (
+   *      <>
+   *        <style>{css}</style>
+   *        <DayPicker
+   *          classNames={{
+   *            head: 'salmon-head',
+   *            caption: 'purple-caption'
+   *          }}
+   *        />
+   *      </>
+   *    );
+   *  }
+   * ```
    */
   classNames?: DayPickerClassNames;
   /**
-   * Change the class names used for the day [[modifiers]].
+   * Change the class names used for the [days modifiers](#day).
    */
   daysClassNames?: DaysClassNames;
 
@@ -90,11 +117,11 @@ export interface DayPickerProps {
    */
   style?: React.CSSProperties;
   /**
-   * Inline styles to apply to the [[DayPickerElements]].
+   * Change the inline styles for each [DayPicker element](./enumerations#daypickerelements).
    */
   styles?: DayPickerStyles;
   /**
-   * Change the inline style for the day [[modifiers]].
+   * Change the inline style for the [days modifiers](#day).
    */
   daysStyles?: DaysStyles;
 
@@ -105,24 +132,25 @@ export interface DayPickerProps {
   /**
    * The number of months to render.
    *
-   * See also [[pagedNavigation]].
+   * @see pagedNavigation
    */
   numberOfMonths?: number;
   /**
    * Allow navigation after (and including) the specified month.
    *
-   * See also [[toMonth]].
+   * @see toMonth
    */
   fromMonth?: Date;
   /**
    * Allow navigation before (and including) the specified month.
    *
-   * See also [[fromMonth]].
+   * @see fromMonth
    */
   toMonth?: Date;
   /**
    * When displaying multiple months, the navigation will be paginated
-   * displaying the [[numberOfMonths]] months at time instead of one.
+   * displaying the [numberOfMonths](#numberofmonths) months at time instead of
+   * one.
    */
   pagedNavigation?: boolean;
   /**
@@ -139,7 +167,7 @@ export interface DayPickerProps {
    * Display six weeks per months, regardless the month’s number of weeks. Outside
    * days will be always shown when setting this prop.
    *
-   * See also [[showOutsideDays]].
+   * @see showOutsideDays
    */
   fixedWeeks?: boolean;
   /**
@@ -155,7 +183,7 @@ export interface DayPickerProps {
    * Show the outside days. An outside day is a day falling in the next or the
    * previous month.
    *
-   * See also [[enableOutsideDaysClick]].
+   * @see enableOutsideDaysClick
    */
   showOutsideDays?: boolean;
   /**
@@ -200,15 +228,15 @@ export interface DayPickerProps {
   days?: DaysModifiers;
 
   /**
-   * A [`dateFns.Locale`](https://date-fns.org/docs/Locale) object to localize
+   * A locale object to localize
    * the user interface.
    */
   locale?: dateFns.Locale;
   /**
    * The text direction of the calendar. Use `ltr` for left-to-right (default)
    * or `rtl` for right-to-left.
    */
-  dir?: string | undefined;
+  dir?: string;
 
   /**
    * Format the month caption text.

packages/react-day-picker/src/components/DayPicker/types/Modifiers.ts

@@ -92,7 +92,7 @@ export type MatchDayBefore = { before: Date };
 export type MatchDayAfter = { after: Date };
 
 /**
- * Matches the days between (but not including) the specified date.
+ * Matches the days between (but not including) the specified dates.
  */
 export type MatchDayBetween = { after: Date; before: Date };
 

packages/react-day-picker/src/components/MonthCaption/MonthCaption.tsx

@@ -4,6 +4,8 @@ import { MonthCaptionProps } from './types';
 
 /**
  * Renders the caption of the month.
+ *
+ * @category Components
  */
 export function MonthCaption(props: MonthCaptionProps): JSX.Element {
   const { containerProps } = getCaptionProps(props.dayPickerProps);

packages/react-day-picker/src/components/MonthCaption/getCaptionProps.test.ts

@@ -1,7 +1,7 @@
 import { getCaptionProps } from './getCaptionProps';
 import { defaultProps } from '../DayPicker/defaults/defaultProps';
 import { CaptionHtmlProps } from './types';
-import { DayPickerClassNames, DayPickerProps } from 'components/DayPicker';
+import { DayPickerClassNames, DayPickerProps } from '../DayPicker';
 
 describe('getCaptionProps', () => {
   it('return the container props', () => {

packages/react-day-picker/src/components/Navigation/types.ts

@@ -11,6 +11,9 @@ export interface NavigationProps {
  * HTML props for the [[Navigation]].
  */
 export type NavigationHtmlProps = {
+  /**
+   * The props to apply to the container component
+   */
   containerProps: {
     className?: string;
     style?: React.CSSProperties;

packages/react-day-picker/src/hooks/useInput.ts

@@ -39,6 +39,8 @@ export type UseInputInputProps = {
  * <DayPicker {...dayPickerProps} />
  * <input {...inputProps} />
  * ```
+ *
+ * @category Hooks
  */
 export function useInput(
   initialSelectedDay: Date | undefined,

packages/react-day-picker/src/hooks/useModifiers.ts

@@ -8,7 +8,9 @@ import { getModifiersFromProps } from './modifiers-utils/getModifiersFromProps';
 import { getOutsideModifier } from './modifiers-utils/getOutsideModifier';
 
 /**
- * TODO: add docs
+ * Get the modifiers for the specified day.
+ *
+ * @category Hooks
  */
 export function useModifiers(
   day: Date,

scripts/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

scripts/README.md

@@ -0,0 +1,20 @@
+# React DayPicker scripts
+
+This project contains scripts used to build React DayPicker.
+
+## docs/start.ts
+
+Parse DayPicker types and produce an output that can be used from
+[website](../website).
+
+```bash
+yarn docs
+```
+
+## bin/prerelease.sh
+
+Use the prerelease script to bump the component alpha version and release it.
+
+```bash
+./bin/prerelase.sh
+```

scripts/prerelease.sh → scripts/bin/prerelease.sh

@@ -5,7 +5,7 @@ cd packages/react-day-picker
 
 VERSION=`npm version prerelease --preid=alpha`;
 
-echo 👋 This script will pre-release react-day-picker on npm.
+echo 👋 This script will pre-release React DayPicker on npm.
 echo 🚀 Version: $VERSION
 echo
 echo 📡 Committing changes...
@@ -27,5 +27,5 @@ printf "\n"
 git push --tags
 printf "\n"
 
-echo 
+echo
 echo ✅ Done!