/src/test-utils.js"
7 | },
8 | name: "@use-date-input/core",
9 | displayName: "@use-date-input/core"
10 | };
11 |
--------------------------------------------------------------------------------
/packages/core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@use-date-input/core",
3 | "version": "0.2.1-beta.0",
4 | "author": "Mark Tate <143323+mark-tate@users.noreply.github.com>",
5 | "description": "@use-date-input - Core component and hooks",
6 | "license": "MIT",
7 | "main": "dist/index.js",
8 | "jsnext:main": "dist/index.esm.js",
9 | "module": "dist/index.esm.js",
10 | "keywords": [
11 | "calendar",
12 | "date",
13 | "datepicker",
14 | "date-picker",
15 | "date-input",
16 | "date-range",
17 | "hook",
18 | "input",
19 | "use-date-input",
20 | "useDateInput",
21 | "useDateRange",
22 | "react",
23 | "react-component"
24 | ],
25 | "repository": {
26 | "type": "git",
27 | "url": "https://github.com/mark-tate/use-date-input.git",
28 | "directory": "packages/core"
29 | },
30 | "bugs": {
31 | "url": "https://github.com/mark-tate/use-date-input/issues"
32 | },
33 | "dependencies": {
34 | "@seznam/compose-react-refs": "1.0.4",
35 | "@use-date-input/common": "^0.2.0-beta.0",
36 | "clsx": "^1.0.2",
37 | "prop-types": "^15.7.2",
38 | "react-focus-lock": "^2.2.1",
39 | "react-transition-group": "^4.3.0",
40 | "styled-components": "5.1.0",
41 | "use-debounce": "^3.4.0"
42 | },
43 | "devDependencies": {
44 | "date-fns": "^2.12.0",
45 | "dayjs": "^1.8.24",
46 | "luxon": "^1.23.0",
47 | "moment": "^2.24.0"
48 | },
49 | "peerDependencies": {
50 | "react": ">=16.8.0",
51 | "react-dom": ">=16.8.0",
52 | "styled-components": ">=5.1.0"
53 | },
54 | "publishConfig": {
55 | "access": "public"
56 | },
57 | "files": [
58 | "dist/index*.js"
59 | ],
60 | "sideEffects": false,
61 | "scripts": {
62 | "build": "rollup -c",
63 | "prettier": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
64 | "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
65 | "test": "jest"
66 | },
67 | "browserslist": {
68 | "production": [
69 | ">0.2%",
70 | "not dead",
71 | "not op_mini all"
72 | ],
73 | "development": [
74 | "last 1 chrome version",
75 | "last 1 firefox version",
76 | "last 1 safari version"
77 | ]
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/packages/core/src/AnimatedGroup/AnimatedGroup.js:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from "react";
2 | import PropTypes from "prop-types";
3 | import { CSSTransition, TransitionGroup } from "react-transition-group";
4 |
5 | import { StyledPage } from "./style";
6 |
7 | const AnimatedGroup = forwardRef(function AnimatedGroup(
8 | {
9 | children,
10 | className,
11 | direction,
12 | durationMsecs,
13 | movement,
14 | onEnter,
15 | onExited,
16 | transitionKey
17 | },
18 | ref
19 | ) {
20 | const childFactory = child =>
21 | React.cloneElement(child, { direction, movement });
22 | return (
23 |
29 |
36 |
41 | {children}
42 |
43 |
44 |
45 | );
46 | });
47 |
48 | AnimatedGroup.defaultProps = {
49 | durationMsecs: 1200
50 | };
51 |
52 | AnimatedGroup.propTypes = {
53 | /** Children */
54 | children: PropTypes.node,
55 | /** Class name of root element */
56 | className: PropTypes.string,
57 | /** Duration of animation in msecs */
58 | durationMsecs: PropTypes.number,
59 | /** Direction of animation */
60 | direction: PropTypes.oneOf(["forward", "back"]),
61 | /** Pixel movement required */
62 | movement: PropTypes.number,
63 | /** Callback called onEnter */
64 | onEnter: PropTypes.func,
65 | /** Callback called onExited */
66 | onExited: PropTypes.func,
67 | /** Key for animation */
68 | transitionKey: PropTypes.string.isRequired
69 | };
70 |
71 | export default AnimatedGroup;
72 |
--------------------------------------------------------------------------------
/packages/core/src/AnimatedGroup/__tests__/AnimatedGroup.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { CSSTransition } from "react-transition-group";
3 | import { render } from "@testing-library/react";
4 |
5 | import AnimatedGroup from "../AnimatedGroup";
6 |
7 | jest.mock("react-transition-group", () => {
8 | const FakeTransitionGroup = jest.fn(({ children }) => children);
9 | const FakeTransition = jest.fn(({ children }) => children);
10 | const FakeCSSTransition = jest.fn(props => (
11 | {props.children}
12 | ));
13 | return {
14 | CSSTransition: FakeCSSTransition,
15 | Transition: FakeTransition,
16 | TransitionGroup: FakeTransitionGroup
17 | };
18 | });
19 |
20 | describe("given AnimatedGroup", () => {
21 | it("renders an animated group", () => {
22 | const children = expect.any(Object);
23 | const onEnterMock = jest.fn();
24 | const onExitedMock = jest.fn();
25 | const { getByText } = render(
26 |
31 | 2020
32 |
33 | );
34 | const defaultProps = {
35 | children,
36 | timeout: 1200,
37 | classNames: "page",
38 | onEnter: onEnterMock,
39 | onExited: onExitedMock
40 | };
41 | const context = expect.any(Object);
42 | expect(CSSTransition).toHaveBeenCalledWith(
43 | expect.objectContaining(defaultProps),
44 | context
45 | );
46 | expect(getByText("2020")).toBeInTheDocument();
47 | });
48 | });
49 |
--------------------------------------------------------------------------------
/packages/core/src/AnimatedGroup/__tests__/index.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "@testing-library/react";
3 |
4 | import { setComponents } from "../../CalendarProvider";
5 | import { CustomisableAnimatedGroup } from "../index";
6 |
7 | jest.mock("../../CalendarProvider");
8 |
9 | describe("given AnimatedGroup", () => {
10 | it("can be overriden with a custom component", () => {
11 | const TestComponent = () => "TEST CUSTOM COMPONENT";
12 | setComponents({ AnimatedGroup: TestComponent });
13 | const { getByText } = render(
28 |
29 |
31 |
32 | );
33 | });
34 |
35 | export default CalendarWithFocusLock;
36 |
--------------------------------------------------------------------------------
/packages/core/src/Day/__tests__/index.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "@testing-library/react";
3 | import createDateAPI from "../../createDateAPI";
4 | import { adapter as dateFnsAdapter } from "@use-date-input/date-fns-adapter";
5 |
6 | import { setComponents } from "../../CalendarProvider";
7 |
8 | import { CustomisableDay } from "../index";
9 | import Day from "../Day";
10 |
11 | jest.mock("../../CalendarProvider");
12 |
13 | describe("given Day", () => {
14 | it("passes the ref to the DOM", () => {
15 | const dateAPI = createDateAPI({ adapter: dateFnsAdapter });
16 | const { createDate, toFormattedDate } = dateAPI;
17 | const ref = React.createRef();
18 | const day = createDate("2019-01-10");
19 | render(
10 | {children}
11 |
12 | );
13 | });
14 | DayOfWeek.propTypes = {
15 | /** Day of week node */
16 | children: PropTypes.node,
17 | /** Class name of root element */
18 | className: PropTypes.string,
19 | /** Day of week expanded label */
20 | description: PropTypes.string
21 | };
22 |
23 | export default DayOfWeek;
24 |
--------------------------------------------------------------------------------
/packages/core/src/DayOfWeek/__tests__/DayOfWeek.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "test-utils";
3 |
4 | import DayOfWeek from "../DayOfWeek";
5 |
6 | describe("given DayOfWeek", () => {
7 | it("passes the ref to the DOM", () => {
8 | const ref = React.createRef();
9 | render(TestDay
16 | );
17 | expect(getByText("TestDay")).toBeInTheDocument();
18 | expect(getByLabelText("test day")).toBeInTheDocument();
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/packages/core/src/DayOfWeek/__tests__/index.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "@testing-library/react";
3 | import { setComponents } from "../../CalendarProvider";
4 | import TestUtils from "../../test-utils";
5 |
6 | import { CustomisableDayOfWeek } from "../index";
7 |
8 | jest.mock("../../CalendarProvider");
9 |
10 | describe("given DayOfWeek", () => {
11 | it("passes the ref to the DOM", () => {
12 | const ref = React.createRef();
13 | render(
14 |
15 |
17 | );
18 | expect(ref.current).toBeInstanceOf(HTMLDivElement);
19 | });
20 |
21 | it("can be overriden with a custom component", () => {
22 | const TestComponent = () => "TEST CUSTOM COMPONENT";
23 | setComponents({ DayOfWeek: TestComponent });
24 | const { getByText } = render(
22 |
33 | {visibleFromDate &&
34 | toFormattedDate(visibleFromDate, formatNames.HEADER)}
35 |
36 |
43 | );
44 | });
45 |
46 | Header.propTypes = {
47 | /** Class name of root element */
48 | className: PropTypes.string
49 | };
50 |
51 | export default Header;
52 |
--------------------------------------------------------------------------------
/packages/core/src/Header/__tests__/Header.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { fireEvent, render } from "test-utils";
3 | import {
4 | navigateNextMock,
5 | navigatePreviousMock,
6 | resetMocks,
7 | setVisibleFromDate,
8 | setWeekOffset
9 | } from "../../CalendarProvider";
10 | import { adapter as dateFnsAdapter } from "@use-date-input/date-fns-adapter";
11 | import { adapter as dayjsAdapter } from "@use-date-input/dayjs-adapter";
12 | import { adapter as luxonAdapter } from "@use-date-input/luxon-adapter";
13 | import { adapter as momentAdapter } from "@use-date-input/moment-adapter";
14 | import createDateAPI from "../../createDateAPI";
15 | import { setAdapter } from "../../CalendarProvider";
16 |
17 | import Header from "../Header";
18 |
19 | jest.mock("../../CalendarProvider");
20 |
21 | describe("given Header", () => {
22 | describe.each`
23 | api | adapter | weekOffset
24 | ${"date-fns"} | ${dateFnsAdapter} | ${0}
25 | ${"dayjs"} | ${dayjsAdapter} | ${0}
26 | ${"luxon"} | ${luxonAdapter} | ${-1}
27 | ${"moment"} | ${momentAdapter} | ${0}
28 | `("for $api", ({ adapter, weekOffset }) => {
29 | beforeEach(() => {
30 | const { createDate } = createDateAPI({ adapter, weekOffset });
31 | const month = createDate("2019-01-01");
32 | setVisibleFromDate(month);
33 | setAdapter(adapter);
34 | setWeekOffset(weekOffset);
35 | });
36 | afterEach(() => {
37 | resetMocks();
38 | });
39 |
40 | it("passes the ref to the DOM", () => {
41 | const ref = React.createRef();
42 | render();
43 | expect(ref.current).toBeInstanceOf(HTMLDivElement);
44 | });
45 |
46 | it("can navigate to previous month", () => {
47 | const { getByLabelText } = render();
48 | fireEvent.click(getByLabelText(/move to previous month/));
49 | expect(navigatePreviousMock).toHaveBeenCalled();
50 | });
51 |
52 | it("can navigate to next month", () => {
53 | const { getByLabelText } = render();
54 | fireEvent.click(getByLabelText(/move to next month/));
55 | expect(navigateNextMock).toHaveBeenCalled();
56 | });
57 |
58 | it("renders the current year in the header", () => {
59 | const { getByText } = render();
60 | expect(getByText("2019")).toBeInTheDocument();
61 | });
62 | });
63 | });
64 |
--------------------------------------------------------------------------------
/packages/core/src/Header/__tests__/index.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "@testing-library/react";
3 | import { setComponents } from "../../CalendarProvider";
4 |
5 | import { CustomisableHeader } from "../index";
6 | import TestUtils from "../../test-utils";
7 |
8 | jest.mock("../../CalendarProvider");
9 |
10 | describe("given Header", () => {
11 | it("passes the ref to the DOM", () => {
12 | const ref = React.createRef();
13 | render(
14 |
15 |
17 | );
18 | expect(ref.current).toBeInstanceOf(HTMLDivElement);
19 | });
20 | it("can be overriden with a custom component", () => {
21 | const TestComponent = () => "TEST CUSTOM COMPONENT";
22 | setComponents({ Header: TestComponent });
23 | const { getByText } = render(
27 |
28 | {toFormattedDate(month, formatNames.MONTH_FULL)}
29 |
30 | {children}
32 |
33 | );
34 | });
35 |
36 | Month.propTypes = {
37 | /** Class name of root element */
38 | className: PropTypes.string,
39 | /** Month */
40 | month: PropTypes.object
41 | };
42 |
43 | export default memo(Month);
44 |
--------------------------------------------------------------------------------
/packages/core/src/Month/__tests__/index.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "@testing-library/react";
3 |
4 | import createDateAPI from "../../createDateAPI";
5 | import { adapter as dateFnsAdapter } from "@use-date-input/date-fns-adapter";
6 | import { setComponents } from "../../CalendarProvider";
7 | import { CustomisableMonth } from "../index";
8 | import TestUtils from "../../test-utils";
9 | import Month from "../Month";
10 |
11 | jest.mock("../../CalendarProvider");
12 |
13 | describe("given Month", () => {
14 | it("passes the ref to the DOM", () => {
15 | const dateAPI = createDateAPI({ adapter: dateFnsAdapter });
16 | const { createDate } = dateAPI;
17 | const ref = React.createRef();
18 | const month = createDate("2019-01-01");
19 | render(
20 |
21 |
23 | );
24 | expect(ref.current).toBeInstanceOf(HTMLDivElement);
25 | });
26 |
27 | it("can be overriden with a custom component", () => {
28 | const TestComponent = () => "TEST CUSTOM COMPONENT";
29 | setComponents({ Month: TestComponent });
30 | const { getByText } = render(
18 |
23 | );
24 | expect(ref.current).toBeInstanceOf(HTMLDivElement);
25 | });
26 |
27 | it("can be overriden with a custom component", () => {
28 | const TestComponent = () => "TEST CUSTOM COMPONENT";
29 | setComponents({ MonthGroup: TestComponent });
30 | const { getByText } = render(
31 |
20 |
22 | );
23 | expect(ref.current).toBeInstanceOf(HTMLDivElement);
24 | });
25 |
26 | it("can be overriden with a custom component", () => {
27 | const TestComponent = () => "TEST CUSTOM COMPONENT";
28 | setComponents({ Root: TestComponent });
29 | const { getByText } = render(
15 |
17 | );
18 | expect(ref.current).toBeInstanceOf(HTMLDivElement);
19 | });
20 |
21 | it("can be overriden with a custom component", () => {
22 | const TestComponent = () => "TEST CUSTOM COMPONENT";
23 | setComponents({ Week: TestComponent });
24 | const { getByText } = render(
22 | {dowShortLabel}
23 |
24 | );
25 | });
26 | }, [addDays, createDate, toFormattedDate, startOfWeek]);
27 | return (
28 |
29 | {children}
30 |
31 | );
32 | });
33 |
34 | WeekHeader.propTypes = {
35 | /** Class name of root element */
36 | className: PropTypes.string
37 | };
38 |
39 | export default memo(WeekHeader);
40 |
--------------------------------------------------------------------------------
/packages/core/src/WeekHeader/__tests__/WeekHeader.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "test-utils";
3 | import { setWeekOffset, resetMocks, setAdapter } from "../../CalendarProvider";
4 | import { formatNames } from "@use-date-input/common";
5 | import { adapter as dateFnsAdapter } from "@use-date-input/date-fns-adapter";
6 | import { adapter as dayjsAdapter } from "@use-date-input/dayjs-adapter";
7 | import { adapter as luxonAdapter } from "@use-date-input/luxon-adapter";
8 | import { adapter as momentAdapter } from "@use-date-input/moment-adapter";
9 | import createDateAPI from "../../createDateAPI";
10 |
11 | import WeekHeader from "../WeekHeader";
12 |
13 | jest.mock("../../CalendarProvider");
14 |
15 | describe("given WeekHeader", () => {
16 | describe.each`
17 | api | adapter | weekOffset
18 | ${"date-fns"} | ${dateFnsAdapter} | ${0}
19 | ${"dayjs"} | ${dayjsAdapter} | ${0}
20 | ${"luxon"} | ${luxonAdapter} | ${-1}
21 | ${"moment"} | ${momentAdapter} | ${0}
22 | `("for $api", ({ adapter, weekOffset }) => {
23 | let dateAPI;
24 | beforeEach(() => {
25 | dateAPI = createDateAPI({ adapter, weekOffset });
26 | setAdapter(adapter);
27 | setWeekOffset(weekOffset);
28 | });
29 | afterEach(() => {
30 | resetMocks();
31 | });
32 |
33 | it("passes the ref to the DOM", () => {
34 | const ref = React.createRef();
35 | render(
15 |
17 | );
18 | expect(ref.current).toBeInstanceOf(HTMLDivElement);
19 | });
20 |
21 | it("can be overriden with a custom component", () => {
22 | const TestComponent = () => "TEST CUSTOM COMPONENT";
23 | setComponents({ WeekHeader: TestComponent });
24 | const { getByText } = render({children} ;
13 | }
14 | TestUtils.propTypes = {
15 | children: PropTypes.node
16 | };
17 | export default TestUtils;
18 |
19 | const customRender = (ui, options) =>
20 | render(ui, { wrapper: TestUtils, ...options });
21 |
22 | // re-export everything
23 | export * from "@testing-library/react";
24 |
25 | // override render method
26 | export { customRender as render };
27 |
--------------------------------------------------------------------------------
/packages/date-fns-adapter/.prettierignore:
--------------------------------------------------------------------------------
1 | /*
2 | !/src
3 |
--------------------------------------------------------------------------------
/packages/date-fns-adapter/README.md:
--------------------------------------------------------------------------------
1 | # @use-date-input/date-fns-adapter
2 |
3 | The [date-fns](https://date-fns.org/) adapter for [@use-date-input](https://github.com/mark-tate/use-date-input).
4 |
5 | [@use-date-input](https://github.com/mark-tate/use-date-input) is a collection of React UI components and hooks to help compose date picker components.
6 |
7 | To get started, refer to [getting started](https://mark-tate.github.io/use-date-input/getting-started#for-date-fns-users) guide and then the [how to guide for date-fns](https://mark-tate.github.io/use-date-input/date-frameworks#with-date-fns).
8 |
9 | For the full documentation, refer to the [documentation](https://mark-tate.github.io/use-date-input/).
10 |
--------------------------------------------------------------------------------
/packages/date-fns-adapter/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/preset-env"],
3 | plugins: [
4 | [
5 | "@babel/plugin-transform-runtime",
6 | {
7 | corejs: false,
8 | helpers: true,
9 | regenerator: false,
10 | useESModules: true
11 | }
12 | ],
13 | ["@babel/plugin-proposal-object-rest-spread", { loose: true }],
14 | "@babel/plugin-proposal-class-properties"
15 | ]
16 | };
17 |
--------------------------------------------------------------------------------
/packages/date-fns-adapter/jest.config.js:
--------------------------------------------------------------------------------
1 | const base = require("../../config/jest/jest.config.js");
2 |
3 | module.exports = {
4 | ...base,
5 | name: "@use-date-input/date-fns-adapter",
6 | displayName: "@use-date-input/date-fns-adapter"
7 | };
8 |
--------------------------------------------------------------------------------
/packages/date-fns-adapter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@use-date-input/date-fns-adapter",
3 | "version": "0.2.0-beta.0",
4 | "author": "Mark Tate <143323+mark-tate@users.noreply.github.com>",
5 | "description": "@use-date-input - date-fns adapter",
6 | "license": "MIT",
7 | "main": "dist/index.js",
8 | "jsnext:main": "dist/index.esm.js",
9 | "module": "dist/index.esm.js",
10 | "keywords": [
11 | "adapter",
12 | "use-date-input",
13 | "useDateInput",
14 | "useDateRange"
15 | ],
16 | "repository": {
17 | "type": "git",
18 | "url": "https://github.com/mark-tate/use-date-input.git",
19 | "directory": "packages/luxon-adapter"
20 | },
21 | "bugs": {
22 | "url": "https://github.com/mark-tate/use-date-input/issues"
23 | },
24 | "dependencies": {
25 | "@use-date-input/common": "^0.2.0-beta.0"
26 | },
27 | "peerDependencies": {
28 | "date-fns": ">=2.12.0"
29 | },
30 | "publishConfig": {
31 | "access": "public"
32 | },
33 | "files": [
34 | "dist/index*.js"
35 | ],
36 | "sideEffects": false,
37 | "scripts": {
38 | "build": "rollup -c ../../config/rollup/rollup.config.js",
39 | "prettier": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
40 | "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
41 | "test": "jest"
42 | },
43 | "browserslist": {
44 | "production": [
45 | ">0.2%",
46 | "not dead",
47 | "not op_mini all"
48 | ],
49 | "development": [
50 | "last 1 chrome version",
51 | "last 1 firefox version",
52 | "last 1 safari version"
53 | ]
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/packages/dayjs-adapter/.prettierignore:
--------------------------------------------------------------------------------
1 | /*
2 | !/src
3 |
--------------------------------------------------------------------------------
/packages/dayjs-adapter/README.md:
--------------------------------------------------------------------------------
1 | # @use-date-input/dayjs-adapter
2 |
3 | The [dayjs](https://day.js.org/) adapter for [@use-date-input](https://github.com/mark-tate/use-date-input).
4 |
5 | [@use-date-input](https://github.com/mark-tate/use-date-input) is a collection of React UI components and hooks to help compose date picker components.
6 |
7 | To get started, refer to [getting started](https://mark-tate.github.io/use-date-input/getting-started#for-dayjs-users) guide and then the [how to guide for dayjs](https://mark-tate.github.io/use-date-input/date-frameworks#with-dayjs).
8 |
9 | For the full documentation, refer to the [documentation](https://mark-tate.github.io/use-date-input/).
10 |
--------------------------------------------------------------------------------
/packages/dayjs-adapter/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/preset-env"],
3 | plugins: [
4 | [
5 | "@babel/plugin-transform-runtime",
6 | {
7 | corejs: false,
8 | helpers: true,
9 | regenerator: false,
10 | useESModules: true
11 | }
12 | ],
13 | ["@babel/plugin-proposal-object-rest-spread", { loose: true }],
14 | "@babel/plugin-proposal-class-properties"
15 | ]
16 | };
17 |
--------------------------------------------------------------------------------
/packages/dayjs-adapter/jest.config.js:
--------------------------------------------------------------------------------
1 | const base = require("../../config/jest/jest.config.js");
2 |
3 | module.exports = {
4 | ...base,
5 | name: "@use-date-input/dayjs-adapter",
6 | displayName: "@use-date-input/dayjs-adapter"
7 | };
8 |
--------------------------------------------------------------------------------
/packages/dayjs-adapter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@use-date-input/dayjs-adapter",
3 | "version": "0.2.0-beta.0",
4 | "author": "Mark Tate <143323+mark-tate@users.noreply.github.com>",
5 | "description": "@use-date-input - dayjs adapter",
6 | "license": "MIT",
7 | "main": "dist/index.js",
8 | "jsnext:main": "dist/index.esm.js",
9 | "module": "dist/index.esm.js",
10 | "keywords": [
11 | "adapter",
12 | "use-date-input",
13 | "useDateInput",
14 | "useDateRange"
15 | ],
16 | "repository": {
17 | "type": "git",
18 | "url": "https://github.com/mark-tate/use-date-input.git",
19 | "directory": "packages/luxon-adapter"
20 | },
21 | "bugs": {
22 | "url": "https://github.com/mark-tate/use-date-input/issues"
23 | },
24 | "dependencies": {
25 | "@use-date-input/common": "^0.2.0-beta.0"
26 | },
27 | "peerDependencies": {
28 | "dayjs": ">=1.8.24"
29 | },
30 | "publishConfig": {
31 | "access": "public"
32 | },
33 | "files": [
34 | "dist/index*.js"
35 | ],
36 | "sideEffects": false,
37 | "scripts": {
38 | "build": "rollup -c ../../config/rollup/rollup.config.js",
39 | "prettier": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
40 | "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
41 | "test": "jest"
42 | },
43 | "browserslist": {
44 | "production": [
45 | ">0.2%",
46 | "not dead",
47 | "not op_mini all"
48 | ],
49 | "development": [
50 | "last 1 chrome version",
51 | "last 1 firefox version",
52 | "last 1 safari version"
53 | ]
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/packages/luxon-adapter/.prettierignore:
--------------------------------------------------------------------------------
1 | /*
2 | !/src
3 |
--------------------------------------------------------------------------------
/packages/luxon-adapter/README.md:
--------------------------------------------------------------------------------
1 | # @use-date-input/luxon-adapter
2 |
3 | The [luxon](https://moment.github.io/luxon/) adapter for [@use-date-input](https://github.com/mark-tate/use-date-input).
4 |
5 | [@use-date-input](https://github.com/mark-tate/use-date-input) is a collection of React UI components and hooks to help compose date picker components.
6 |
7 | To get started, refer to [getting started](https://mark-tate.github.io/use-date-input/getting-started#for-luxon-users) guide and then the [how to guide for luxon](https://mark-tate.github.io/use-date-input/date-frameworks#with-luxon).
8 |
9 | For the full documentation, refer to the [documentation](https://mark-tate.github.io/use-date-input/).
10 |
--------------------------------------------------------------------------------
/packages/luxon-adapter/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/preset-env"],
3 | plugins: [
4 | [
5 | "@babel/plugin-transform-runtime",
6 | {
7 | corejs: false,
8 | helpers: true,
9 | regenerator: false,
10 | useESModules: true
11 | }
12 | ],
13 | ["@babel/plugin-proposal-object-rest-spread", { loose: true }],
14 | "@babel/plugin-proposal-class-properties"
15 | ]
16 | };
17 |
--------------------------------------------------------------------------------
/packages/luxon-adapter/jest.config.js:
--------------------------------------------------------------------------------
1 | const base = require("../../config/jest/jest.config.js");
2 |
3 | module.exports = {
4 | ...base,
5 | name: "@use-date-input/luxon-adapter",
6 | displayName: "@use-date-input/luxon-adapter"
7 | };
8 |
--------------------------------------------------------------------------------
/packages/luxon-adapter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@use-date-input/luxon-adapter",
3 | "version": "0.2.1-beta.0",
4 | "author": "Mark Tate <143323+mark-tate@users.noreply.github.com>",
5 | "description": "@use-date-input - luxon adapter",
6 | "license": "MIT",
7 | "main": "dist/index.js",
8 | "jsnext:main": "dist/index.esm.js",
9 | "module": "dist/index.esm.js",
10 | "keywords": [
11 | "adapter",
12 | "use-date-input",
13 | "useDateInput",
14 | "useDateRange",
15 | "luxon"
16 | ],
17 | "repository": {
18 | "type": "git",
19 | "url": "https://github.com/mark-tate/use-date-input.git",
20 | "directory": "packages/luxon-adapter"
21 | },
22 | "bugs": {
23 | "url": "https://github.com/mark-tate/use-date-input/issues"
24 | },
25 | "dependencies": {
26 | "@use-date-input/common": "^0.2.0-beta.0"
27 | },
28 | "peerDependencies": {
29 | "luxon": ">=1.23.0"
30 | },
31 | "publishConfig": {
32 | "access": "public"
33 | },
34 | "files": [
35 | "dist/index*.js"
36 | ],
37 | "sideEffects": false,
38 | "scripts": {
39 | "build": "rollup -c ../../config/rollup/rollup.config.js",
40 | "prettier": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
41 | "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
42 | "test": "jest"
43 | },
44 | "browserslist": {
45 | "production": [
46 | ">0.2%",
47 | "not dead",
48 | "not op_mini all"
49 | ],
50 | "development": [
51 | "last 1 chrome version",
52 | "last 1 firefox version",
53 | "last 1 safari version"
54 | ]
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/packages/moment-adapter/.prettierignore:
--------------------------------------------------------------------------------
1 | /*
2 | !/src
3 |
--------------------------------------------------------------------------------
/packages/moment-adapter/README.md:
--------------------------------------------------------------------------------
1 | # @use-date-input/moment-adapter
2 |
3 | The [moment](https://momentjs.com/) adapter for [@use-date-input](https://github.com/mark-tate/use-date-input).
4 |
5 | [@use-date-input](https://github.com/mark-tate/use-date-input) is a collection of React UI components and hooks to help compose date picker components.
6 |
7 | To get started, refer to the [getting started](https://mark-tate.github.io/use-date-input/getting-started#for-moment-users) guide and then the [how to guide for moment](https://mark-tate.github.io/use-date-input/date-frameworks#with-moment).
8 |
9 | For the full documentation, refer to the [documentation](https://mark-tate.github.io/use-date-input/).
10 |
--------------------------------------------------------------------------------
/packages/moment-adapter/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ["@babel/preset-env"],
3 | plugins: [
4 | [
5 | "@babel/plugin-transform-runtime",
6 | {
7 | corejs: false,
8 | helpers: true,
9 | regenerator: false,
10 | useESModules: true
11 | }
12 | ],
13 | ["@babel/plugin-proposal-object-rest-spread", { loose: true }],
14 | "@babel/plugin-proposal-class-properties"
15 | ]
16 | };
17 |
--------------------------------------------------------------------------------
/packages/moment-adapter/jest.config.js:
--------------------------------------------------------------------------------
1 | const base = require("../../config/jest/jest.config.js");
2 |
3 | module.exports = {
4 | ...base,
5 | name: "@use-date-input/moment-adapter",
6 | displayName: "@use-date-input/moment-adapter"
7 | };
8 |
--------------------------------------------------------------------------------
/packages/moment-adapter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@use-date-input/moment-adapter",
3 | "version": "0.2.1-beta.0",
4 | "author": "Mark Tate <143323+mark-tate@users.noreply.github.com>",
5 | "description": "@use-date-input - moment adapter",
6 | "license": "MIT",
7 | "main": "dist/index.js",
8 | "jsnext:main": "dist/index.esm.js",
9 | "module": "dist/index.esm.js",
10 | "keywords": [
11 | "adapter",
12 | "use-date-input",
13 | "useDateInput",
14 | "useDateRange",
15 | "moment"
16 | ],
17 | "repository": {
18 | "type": "git",
19 | "url": "https://github.com/mark-tate/use-date-input.git",
20 | "directory": "packages/luxon-adapter"
21 | },
22 | "bugs": {
23 | "url": "https://github.com/mark-tate/use-date-input/issues"
24 | },
25 | "dependencies": {
26 | "@use-date-input/common": "^0.2.0-beta.0"
27 | },
28 | "peerDependencies": {
29 | "moment": ">=2.24.0"
30 | },
31 | "publishConfig": {
32 | "access": "public"
33 | },
34 | "files": [
35 | "dist/index*.js"
36 | ],
37 | "sideEffects": false,
38 | "scripts": {
39 | "build": "rollup -c ../../config/rollup/rollup.config.js",
40 | "prettier": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
41 | "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
42 | "test": "jest"
43 | },
44 | "browserslist": {
45 | "production": [
46 | ">0.2%",
47 | "not dead",
48 | "not op_mini all"
49 | ],
50 | "development": [
51 | "last 1 chrome version",
52 | "last 1 firefox version",
53 | "last 1 safari version"
54 | ]
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/packages/popper/.prettierignore:
--------------------------------------------------------------------------------
1 | /*
2 | !/src
3 |
--------------------------------------------------------------------------------
/packages/popper/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to this project will be documented in this file.
4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5 |
6 | # 0.2.0-beta.0 (2020-08-26)
7 |
8 |
9 | ### Bug Fixes
10 |
11 | * modernize the language for allowable list of refs in Popper and move to it's own package. ([4a32c75](https://github.com/mark-tate/use-date-input/commit/4a32c75691fa96cf9b57c5e4e21f4683d54d4688))
12 |
--------------------------------------------------------------------------------
/packages/popper/README.md:
--------------------------------------------------------------------------------
1 | # @use-date-input/popper
2 |
3 | An optional popper package for [@use-date-input](https://github.com/mark-tate/use-date-input).
4 |
5 | [@use-date-input](https://github.com/mark-tate/use-date-input) is a collection of React UI components and hooks to help compose date picker components.
6 |
7 | To get started, refer to [getting started](https://mark-tate.github.io/use-date-input/getting-started).
8 |
9 | For the full documentation, refer to the [documentation](https://mark-tate.github.io/use-date-input/).
10 |
--------------------------------------------------------------------------------
/packages/popper/babel.config.js:
--------------------------------------------------------------------------------
1 | const { NODE_ENV } = process.env;
2 |
3 | const inProduction = NODE_ENV === "production";
4 | const inDevelopment = NODE_ENV === "development";
5 |
6 | const environmentConfig = {
7 | test: {
8 | compact: false,
9 | presets: [
10 | [
11 | "@babel/preset-env",
12 | {
13 | modules: "cjs",
14 | debug: false
15 | }
16 | ],
17 | "@babel/preset-react"
18 | ],
19 | plugins: [
20 | [
21 | "@babel/plugin-transform-runtime",
22 | {
23 | corejs: false,
24 | helpers: true,
25 | regenerator: true,
26 | useESModules: true
27 | }
28 | ],
29 | ["@babel/plugin-proposal-object-rest-spread", { loose: true }],
30 | "@babel/plugin-proposal-class-properties"
31 | ]
32 | },
33 | production: {
34 | presets: [["@babel/preset-env", { modules: false }], "@babel/preset-react"],
35 | plugins: [
36 | [
37 | "@babel/plugin-transform-runtime",
38 | {
39 | corejs: false,
40 | helpers: true,
41 | regenerator: false,
42 | useESModules: true
43 | }
44 | ],
45 | ["@babel/plugin-proposal-object-rest-spread", { loose: true }],
46 | "@babel/plugin-proposal-class-properties",
47 | "babel-plugin-styled-components"
48 | ]
49 | },
50 | development: {
51 | compact: false,
52 | presets: [["@babel/preset-env", { modules: false }], "@babel/preset-react"],
53 | plugins: [
54 | [
55 | "@babel/plugin-transform-runtime",
56 | {
57 | corejs: false,
58 | helpers: true,
59 | regenerator: false,
60 | useESModules: true
61 | }
62 | ],
63 | ["@babel/plugin-proposal-object-rest-spread", { loose: true }],
64 | "@babel/plugin-proposal-class-properties",
65 | "babel-plugin-styled-components"
66 | ]
67 | }
68 | };
69 |
70 | module.exports = api => {
71 | api.cache.using(() => process.env.NODE_ENV);
72 | return environmentConfig[process.env.NODE_ENV || "development"];
73 | };
74 |
--------------------------------------------------------------------------------
/packages/popper/jest.config.js:
--------------------------------------------------------------------------------
1 | const base = require("../../config/jest/jest.config.js");
2 |
3 | module.exports = {
4 | ...base,
5 | name: "@use-date-input/popper",
6 | displayName: "@use-date-input/popper"
7 | };
8 |
--------------------------------------------------------------------------------
/packages/popper/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@use-date-input/popper",
3 | "version": "0.2.0-beta.0",
4 | "author": "Mark Tate <143323+mark-tate@users.noreply.github.com>",
5 | "description": "@use-date-input - Popper library",
6 | "license": "MIT",
7 | "main": "dist/index.js",
8 | "jsnext:main": "dist/index.esm.js",
9 | "module": "dist/index.esm.js",
10 | "keywords": [
11 | "calendar",
12 | "date",
13 | "datepicker",
14 | "date-picker",
15 | "date-input",
16 | "date-range",
17 | "hook",
18 | "input",
19 | "use-date-input",
20 | "useDateInput",
21 | "useDateRange",
22 | "react",
23 | "react-component"
24 | ],
25 | "repository": {
26 | "type": "git",
27 | "url": "https://github.com/mark-tate/use-date-input.git",
28 | "directory": "packages/popper"
29 | },
30 | "bugs": {
31 | "url": "https://github.com/mark-tate/use-date-input/issues"
32 | },
33 | "dependencies": {
34 | "@popperjs/core": "^2.4.2",
35 | "@use-date-input/common": "^0.2.0-beta.0",
36 | "prop-types": "^15.7.2",
37 | "react-popper": "^2.2.3"
38 | },
39 | "peerDependencies": {
40 | "react": ">=16.8.0",
41 | "react-dom": ">=16.8.0"
42 | },
43 | "publishConfig": {
44 | "access": "public"
45 | },
46 | "files": [
47 | "dist/index*.js"
48 | ],
49 | "sideEffects": false,
50 | "scripts": {
51 | "build": "rollup -c",
52 | "prettier": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
53 | "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
54 | "test": "jest"
55 | },
56 | "browserslist": {
57 | "production": [
58 | ">0.2%",
59 | "not dead",
60 | "not op_mini all"
61 | ],
62 | "development": [
63 | "last 1 chrome version",
64 | "last 1 firefox version",
65 | "last 1 safari version"
66 | ]
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/packages/popper/src/ClickOutside.js:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, useCallback, useEffect, useRef } from "react";
2 | import PropTypes from "prop-types";
3 | import { useForkRef } from "@use-date-input/common";
4 |
5 | export const ClickOutside = forwardRef(function ClickOutside(
6 | { children, onClickOutside, ignoreClickOutsideRefs = [], ...rest },
7 | ref
8 | ) {
9 | const containerRef = useRef(null);
10 | const handleRef = useForkRef(ref, containerRef);
11 |
12 | const listener = useCallback(
13 | event => {
14 | const hasClickedIgnoreList = [
15 | containerRef,
16 | ...ignoreClickOutsideRefs
17 | ].some(ref => {
18 | return ref.current && ref.current.contains(event.target);
19 | });
20 | if (!hasClickedIgnoreList && onClickOutside) {
21 | onClickOutside(event);
22 | }
23 | },
24 | [containerRef, onClickOutside, ignoreClickOutsideRefs]
25 | );
26 |
27 | useEffect(() => {
28 | const ownerDocument =
29 | (containerRef &&
30 | containerRef.current &&
31 | containerRef.current.ownerDocument) ||
32 | document;
33 | ownerDocument.addEventListener("mousedown", listener);
34 | ownerDocument.addEventListener("touchstart", listener);
35 | return () => {
36 | ownerDocument.removeEventListener("mousedown", listener);
37 | ownerDocument.removeEventListener("touchstart", listener);
38 | };
39 | }, [containerRef, listener]);
40 |
41 | return (
42 |
43 | {children}
44 |
45 | );
46 | });
47 |
48 | ClickOutside.propTypes = {
49 | /** Children to monitor for click outside events */
50 | children: PropTypes.node,
51 | /** Callback called when the mouse is clicked outside */
52 | onClickOutside: PropTypes.func,
53 | /** Additional array of refs, will ignore click outside from **/
54 | ignoreClickOutsideRefs: PropTypes.array
55 | };
56 |
57 | export default ClickOutside;
58 |
--------------------------------------------------------------------------------
/packages/popper/src/Popper.js:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, useCallback } from "react";
2 | import { createPortal } from "react-dom";
3 | import PropTypes from "prop-types";
4 | import ClickOutside from "./ClickOutside";
5 | import { useForkRef } from "@use-date-input/common";
6 |
7 | import { usePopper } from "react-popper";
8 |
9 | const Popper = forwardRef(
10 | (
11 | {
12 | anchorEl,
13 | children,
14 | ignoreClickOutsideRefs,
15 | onClickOutside,
16 | onEscapeKey,
17 | open,
18 | ...popperProps
19 | },
20 | ref
21 | ) => {
22 | const [popperElement, setPopperElement] = React.useState(null);
23 | const handleRef = useForkRef(ref, setPopperElement);
24 | const { styles, attributes } = usePopper(
25 | anchorEl,
26 | popperElement,
27 | popperProps
28 | );
29 | const handleKeyDown = useCallback(
30 | event => {
31 | if (event.key === "Escape") {
32 | onEscapeKey();
33 | }
34 | },
35 | [onEscapeKey]
36 | );
37 | if (!open) {
38 | return null;
39 | }
40 | return (
41 | <>
42 | {createPortal(
43 |
44 |
49 | {children}
50 |
51 |
,
52 | document.querySelector("body")
53 | )}
54 |
55 | );
56 | }
57 | );
58 | Popper.displayName = "Popper";
59 | Popper.propTypes = {
60 | /** Anchor element */
61 | anchorEl: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
62 | /** Popper content */
63 | children: PropTypes.node,
64 | /** Array of refs, will not close the Popper, if clicked **/
65 | ignoreClickOutsideRefs: PropTypes.array,
66 | /** Callback on click outside **/
67 | onClickOutside: PropTypes.func,
68 | /** Callback on escape key press **/
69 | onEscapeKey: PropTypes.func,
70 | /** Open/close popper */
71 | open: PropTypes.bool
72 | };
73 | export default Popper;
74 |
--------------------------------------------------------------------------------
/packages/popper/src/__tests__/ClickOutside.test.js:
--------------------------------------------------------------------------------
1 | import React, { createRef } from "react";
2 | import { fireEvent, render } from "@testing-library/react";
3 |
4 | import ClickOutside from "../ClickOutside";
5 |
6 | describe("given ClickOutside", () => {
7 | it("passes the ref to the DOM", () => {
8 | const ref = React.createRef();
9 | render(deny clicks
20 | allow clicks
21 |
25 | inside clickOutside
26 |
27 |
28 | );
29 | fireEvent.mouseDown(getByText("deny clicks"));
30 | expect(handleClickOutsideMock).toHaveBeenCalled();
31 | handleClickOutsideMock.mockReset();
32 | fireEvent.mouseDown(getByText("allow clicks"));
33 | expect(handleClickOutsideMock).not.toHaveBeenCalled();
34 | handleClickOutsideMock.mockReset();
35 | fireEvent.mouseDown(getByText("inside clickOutside"));
36 | expect(handleClickOutsideMock).not.toHaveBeenCalled();
37 | });
38 | });
39 |
--------------------------------------------------------------------------------
/packages/popper/src/__tests__/Popper.test.js:
--------------------------------------------------------------------------------
1 | import React, { createRef } from "react";
2 | import { fireEvent, render } from "@testing-library/react";
3 |
4 | import Popper from "../Popper";
5 |
6 | describe("given Popper", () => {
7 | it("closes on key Escape", () => {
8 | const onEscapeKey = jest.fn();
9 | const { getByTestId } = render(
10 |
11 |
13 | );
14 | const child = getByTestId("test-child");
15 | fireEvent.focus(child);
16 | fireEvent.keyDown(child, { key: "Escape", keyCode: 27 });
17 | expect(onEscapeKey).toHaveBeenCalled();
18 | });
19 | it("only closes when clicked outside", () => {
20 | const onClickOutside = jest.fn();
21 | const ignoreClickOutsideRef = createRef();
22 | const { getByTestId } = render(
23 |
38 | );
39 | fireEvent.mouseDown(getByTestId("inside-child"));
40 | expect(onClickOutside).not.toHaveBeenCalled();
41 | fireEvent.mouseDown(getByTestId("ignored-outside-child"));
42 | expect(onClickOutside).not.toHaveBeenCalled();
43 | fireEvent.mouseDown(getByTestId("outside-child"));
44 | expect(onClickOutside).toHaveBeenCalled();
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/packages/popper/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as Popper } from "./Popper";
2 | export { default as ClickOutside } from "./ClickOutside";
3 |
--------------------------------------------------------------------------------
/public/cross.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
14 |
15 |
--------------------------------------------------------------------------------
/src/docs/components/clickOutside.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: ClickOutside
3 | route: /clickOutside
4 | ---
5 | import { useRef } from "react";
6 | import { Playground } from "docz";
7 | import { ClickOutside } from "@use-date-input/popper";
8 | import { Button } from "../../gatsby-theme-docz/components/Button";
9 | import { ButtonBar } from "../../gatsby-theme-docz/components/ButtonBar";
10 |
11 | # ClickOutside
12 | The `ClickOutside` component is used to detect when the mouse is clicked outside the calendar.
13 |
14 | In the default implementation `ClickOutside` is used to determine when to close the `Calendar` when rendered inside a `Popper`.
15 | Clicks within the `Calender` or on the associated inputs should not close the `Calendar` but everywhere else should.
16 |
17 | ## Example
18 | In this example when you click the buttons they log whether or not it considers it a click outside the rendered tree.
19 | In addition an ignored list of refs can be provided which, when clicked, will not invoke `onClickOutside`.
20 |
21 |
22 | {() => {
23 | const ignoreRef = useRef();
24 | const ignoreListRefs=[ignoreRef];
25 | function handleClickOutside() {
26 | console.log('you clicked outside the component');
27 | }
28 | return (
29 | <>
30 |
31 | Click Outside
32 | Click Outside (but in the allow list)
33 |
34 |
38 | Click Inside
39 |
40 |
41 | );
42 | }}
43 |
44 |
45 | ## Props
46 | | Prop Name | Type | Is Required | Default Value | Description |
47 | |-|-|-|-|-|
48 | | children| `node`| optional| | children to monitor for click outside events|
49 | | ignoreClickOutsideRefs| `array`| optional| | Additional array of refs, will ignore click outside from|
50 | | onClickOutside| `func`| optional| | Callback called when the mouse is clicked outside|
51 |
--------------------------------------------------------------------------------
/src/docs/components/dayOfWeek.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: DayOfWeek
3 | route: /dayOfWeek
4 | ---
5 | import { Playground } from "docz";
6 | import { DayOfWeek } from "@use-date-input/core";
7 |
8 | # DayOfWeek
9 | The `DayOfWeek` components renders a day of the week.
10 |
11 | In the default implementation, [WeekHeader](https://mark-tate.github.io/use-date-input/weekHeader) is the parent of `DayOfWeek`.
12 |
13 | ## Example
14 |
15 | M
16 |
17 |
18 | ## Props
19 | | Prop Name | Type | Is Required | Default Value | Description |
20 | |-|-|-|-|-|
21 | | children| `node`| optional| | Day of week node|
22 | | className| `string`| optional| | Class name of root element|
23 | | description| `string`| optional| | Day of week expanded label|
24 |
25 | ## Importing
26 | It can be imported as either the base component
27 |
28 | ```javascript
29 | import { DayOfWeek } from "@use-date-input/core";
30 | ```
31 |
32 | or as an overridable component that can be replaced through the `components` prop in `CalendarProvider`.
33 | Refer to [How to replace UI components](https://mark-tate.github.io/use-date-input/theming#how-to-replace-ui-components).
34 |
35 | ```javascript
36 | import { CustomisableDayOfWeek } from "@use-date-input/core";
37 | ```
38 |
39 | If providing your own component, it can be useful to import the base component and use it within your composition.
40 |
--------------------------------------------------------------------------------
/src/docs/components/header.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Header
3 | route: /header
4 | ---
5 | import { Playground } from "docz";
6 | import { Header, CalendarProvider } from "@use-date-input/core";
7 | import { adapter as dateAdapter } from '@use-date-input/date-fns-adapter';
8 |
9 | # Header
10 | The `Header` component renders the `Calendar` header.
11 |
12 | In the default implementation, [Root](https://mark-tate.github.io/use-date-input/root) is the parent of `Header`.
13 | By default `Header` uses the visibleFromDate and renders the current year as it's title, alongside the navigation buttons.
14 |
15 | ## Example
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | ## Props
25 | | Prop Name | Type | Is Required | Default Value | Description |
26 | |-|-|-|-|-|
27 | | className| `string`| optional| | Class name of root element|
28 |
29 | ## Importing
30 | It can be imported as either the base component
31 |
32 | ```javascript
33 | import { Header } from "@use-date-input/core";
34 | ```
35 |
36 | or as an overridable component that can be replaced through the `components` prop in `CalendarProvider`.
37 | Refer to [How to replace UI components](https://mark-tate.github.io/use-date-input/theming#how-to-replace-ui-components).
38 |
39 | ```javascript
40 | import { CustomisableHeader } from "@use-date-input/core";
41 | ```
42 |
43 | If providing your own component, it can be useful to import the base component and use it within your composition.
44 |
--------------------------------------------------------------------------------
/src/docs/components/month.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Month
3 | route: /month
4 | ---
5 | import { Playground } from "docz";
6 | import { Month, CalendarProvider, useDateAPI } from "@use-date-input/core";
7 | import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
8 |
9 | # Month
10 | The `Month` components renders a calendar month.
11 |
12 | In the default implementation, [MonthGroup](https://mark-tate.github.io/use-date-input/monthGroup) is the parent of `Month`.
13 |
14 | ## Example
15 |
16 | {() => {
17 | function MonthExample() {
18 | const { createDate } = useDateAPI();
19 | const month = createDate();
20 | return (
24 |
26 | );
27 | }}
28 |
29 |
30 | ## Props
31 | | Prop Name | Type | Is Required | Default Value | Description |
32 | |-|-|-|-|-|
33 | | className| `string`| optional| | Class name of root element|
34 | | month| `object`| optional| | Month |
35 |
36 | ## Importing
37 | It can be imported as either the base component
38 |
39 | ```javascript
40 | import { Month } from "@use-date-input/core";
41 | ```
42 |
43 | or as an overridable component that can be replaced through the `components` prop in `CalendarProvider`.
44 | Refer to [How to replace UI components](https://mark-tate.github.io/use-date-input/theming#how-to-replace-ui-components).
45 |
46 | ```javascript
47 | import { CustomisableMonth } from "@use-date-input/core";
48 | ```
49 |
50 | If providing your own component, it can be useful to import the base component and use it within your composition.
51 |
52 |
--------------------------------------------------------------------------------
/src/docs/components/monthGroup.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: MonthGroup
3 | route: /monthGroup
4 | ---
5 | import { Playground } from "docz";
6 | import { MonthGroup, CalendarProvider, useDateAPI } from "@use-date-input/core";
7 | import { adapter as dateAdapter } from '@use-date-input/date-fns-adapter';
8 |
9 | # MonthGroup
10 | The `MonthGroup` components renders all the visible calendar `Month` components.
11 |
12 | ## Example
13 |
14 | {() => {
15 | function MonthGroupExample() {
16 | const { createDate } = useDateAPI();
17 | const visibleFromDate = createDate();
18 | return (
22 |
24 | );
25 | }}
26 |
27 |
28 | ## Props
29 | | Prop Name | Type | Is Required | Default Value | Description |
30 | |-|-|-|-|-|
31 | | className| `string`| optional| | Class name of root element|
32 | | visibleFromDate| `object`| optional| | Visible from date |
33 |
34 | ## Importing
35 | It can be imported as either the base component
36 |
37 | ```javascript
38 | import { MonthGroup } from "@use-date-input/core";
39 | ```
40 |
41 | or as an overridable component that can be replaced through the `components` prop in `CalendarProvider`.
42 | Refer to [How to replace UI components](https://mark-tate.github.io/use-date-input/theming#how-to-replace-ui-components).
43 |
44 | ```javascript
45 | import { CustomisableMonthGroup } from "@use-date-input/core";
46 | ```
47 |
48 | If providing your own component, it can be useful to import the base component and use it within your composition.
49 |
--------------------------------------------------------------------------------
/src/docs/components/root.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Root
3 | route: /root
4 | ---
5 | import { Playground } from "docz";
6 | import useMediaQuery from "@material-ui/core/useMediaQuery/useMediaQuery";
7 | import { useTheme } from "@material-ui/core/styles";
8 | import { Calendar, CalendarProvider, Root } from "@use-date-input/core";
9 | import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
10 | import { DemoContent, DemoContentSmall } from "../../gatsby-theme-docz/components/DemoContent";
11 |
12 | # Root
13 | The `Root` component is the root component of the `Calendar`.
14 |
15 | `Root` enables you to re-compose the Calendar with additional UI elements, such as shortcut lists or additional branding.
16 | Refer to [Composition](https://mark-tate.github.io/use-date-input/composition).
17 |
18 | ## Example
19 |
20 | {() => {
21 | const theme = useTheme();
22 | const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down("sm"));
23 | const AddYourComponentHere = isSmallBreakpoint ? DemoContentSmall : DemoContent;
24 | function MyRoot(props) {
25 | return (
26 | <>
27 |
31 |
32 | );
33 | }
34 | return (
35 |
36 |
38 | );
39 | }}
40 |
41 |
42 | ## Props
43 | | Prop Name | Type | Is Required | Default Value | Description |
44 | |-|-|-|-|-|
45 | | className| `string`| optional| | Class name of root element|
46 |
47 | ## Importing
48 | It can be imported as either the base component
49 |
50 | ```javascript
51 | import { Root } from "@use-date-input/core";
52 | ```
53 |
54 | or as an overridable component that can be replaced through the `components` prop in `CalendarProvider`.
55 | Refer to [How to replace UI components](https://mark-tate.github.io/use-date-input/theming#how-to-replace-ui-components).
56 |
57 | ```javascript
58 | import { CustomisableMonthRoot } from "@use-date-input/core";
59 | ```
60 |
61 | If providing your own component, it can be useful to import the base component and use it within your composition.
62 |
--------------------------------------------------------------------------------
/src/docs/components/week.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Week
3 | route: /week
4 | ---
5 | import { Playground } from "docz";
6 | import { CalendarProvider, Week } from "@use-date-input/core";
7 | import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
8 |
9 | # Week
10 | The `Week` components renders a week, as a row of `Day` components based on the current `Calendar` state.
11 |
12 | ## Example
13 |
14 | {() => {
15 | const { addDays, createDate } = dateAdapter();
16 | const today = createDate();
17 | const days = Array(7).fill(0).reduce((result, day, dayIndex) => {
18 | return [ ...result, addDays(today, dayIndex)];
19 | }, []);
20 | return (
21 |
22 |
24 | );
25 | }}
26 |
27 |
28 | ## Props
29 | | Prop Name | Type | Is Required | Default Value | Description |
30 | |-|-|-|-|-|
31 | | className| `string`| optional| | Class name of root element |
32 | | days| `array`| required| | Array of dates to render |
33 | | parentMonth| `object`| required| | to determine days of weeks, which are outside of current month |
34 |
35 | ## Importing
36 | It can be imported as either the base component
37 |
38 | ```javascript
39 | import { Week } from "@use-date-input/core";
40 | ```
41 |
42 | or as an overridable component that can be replaced through the `components` prop in `CalendarProvider`.
43 | Refer to [How to replace UI components](https://mark-tate.github.io/use-date-input/theming#how-to-replace-ui-components).
44 |
45 | ```javascript
46 | import { Week } from "@use-date-input/core";
47 | ```
48 |
49 | If providing your own component, it can be useful to import the base component and use it within your composition.
50 |
--------------------------------------------------------------------------------
/src/docs/components/weekHeader.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: WeekHeader
3 | route: /weekHeader
4 | ---
5 | import { Playground } from "docz";
6 | import { CalendarProvider, WeekHeader } from "@use-date-input/core";
7 | import { adapter as dateAdapter } from '@use-date-input/date-fns-adapter';
8 |
9 | # WeekHeader
10 | The `WeekHeader` component renders the days of the week within the month header.
11 |
12 | ## Example
13 |
14 | {() => {
15 | return (
16 |
17 |
19 | );
20 | }}
21 |
22 |
23 | ## Props
24 | | Prop Name | Type | Is Required | Default Value | Description |
25 | |-|-|-|-|-|
26 | | className| `string`| optional| | Class name of root element |
27 |
28 | ## Importing
29 | It can be imported as either the base component
30 |
31 | ```javascript
32 | import { WeekHeader } from "@use-date-input/core";
33 | ```
34 |
35 | or as an overridable component that can be replaced through the `components` prop in `CalendarProvider`.
36 | Refer to [How to replace UI components](https://mark-tate.github.io/use-date-input/theming#how-to-replace-ui-components).
37 |
38 | ```javascript
39 | import { WeekHeader } from "@use-date-input/core";
40 | ```
41 |
42 | If providing your own component, it can be useful to import the base component and use it within your composition.
43 |
--------------------------------------------------------------------------------
/src/docs/home.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Home
3 | route: /
4 | fullPage: true
5 | ---
6 |
7 | import { Carousel } from "../gatsby-theme-docz/components/Carousel";
8 | import { Heading } from "../gatsby-theme-docz/components/Heading";
9 | import { HeroWrapper } from "../gatsby-theme-docz/components/HeroWrapper";
10 | import { Hero1 } from "../gatsby-theme-docz/components/Hero1";
11 | import { Hero2 } from "../gatsby-theme-docz/components/Hero2";
12 | import { Hero3 } from "../gatsby-theme-docz/components/Hero3";
13 | import { Hero4 } from "../gatsby-theme-docz/components/Hero4";
14 | import { Hero5 } from "../gatsby-theme-docz/components/Hero5";
15 | import { Hero6 } from "../gatsby-theme-docz/components/Hero6";
16 |
17 | use-date-input
18 |
19 |
26 |
28 |
35 |
37 |
43 |
45 |
51 |
53 |
59 |
61 |
63 |
--------------------------------------------------------------------------------
/src/docs/hooks/useCalendarDispatch.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useCalendarDispatch
3 | route: /useCalendarDispatch
4 | ---
5 | import { Playground } from 'docz'
6 | import { calendarActions, useCalendarDispatch, Calendar, CalendarProvider} from '@use-date-input/core';
7 | import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
8 | import { Button } from "../../gatsby-theme-docz/components/Button";
9 | import { ButtonBar } from "../../gatsby-theme-docz/components/ButtonBar";
10 |
11 | # useCalendarDispatch
12 | `useCalendarDispatch` returns the configured reducers dispatcher, along with a helper API for common actions.
13 |
14 | ```javascript
15 | const {
16 | dispatch,
17 | mouseClickOutside,
18 | navigateNext,
19 | navigatePrevious,
20 | selectDate,
21 | setAnimating,
22 | setEnableKeyboardNavigation,
23 | setKeyboardCursor,
24 | setMouseCursor,
25 | setEndDate,
26 | setStartDate,
27 | setOpen,
28 | setKeyPress,
29 | setVisibleFromDate
30 | } = useCalendarDispatch();
31 | ```
32 |
33 | ## Using the dispatcher
34 | Using the dispatcher we can dispatch any action to the reducers.
35 |
36 |
37 | {() => {
38 | const MyPanel = () => {
39 | const { dispatch } = useCalendarDispatch();
40 | const handleClick = () => dispatch({ type: calendarActions.navigateNext });
41 | return (
42 |
43 | NEXT MONTH
44 |
45 | );
46 | };
47 | return (
48 |
49 |
52 | );
53 | }}
54 |
55 |
56 | ## Using the helper API
57 | Using the dispatcher we can dispatch the most common actions, through helper methods.
58 |
59 |
60 | {() => {
61 | function MyPanel() {
62 | const { navigateNext } = useCalendarDispatch();
63 | const handleClick = () =>navigateNext();
64 | return (
65 |
66 | NEXT MONTH
67 |
68 | );
69 | };
70 | return (
71 |
72 |
75 | );
76 | }}
77 |
78 |
--------------------------------------------------------------------------------
/src/docs/hooks/useCalendarProps.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useCalendarProps
3 | route: /useCalendarProps
4 | ---
5 | import { useState } from 'react';
6 | import { Playground } from 'docz'
7 | import { useDateAPI, useCalendarProps, Calendar, CalendarProvider} from '@use-date-input/core';
8 | import { formatNames } from '@use-date-input/common';
9 | import { adapter as dateAdapter } from '@use-date-input/date-fns-adapter';
10 |
11 | # useCalendarProps
12 |
13 | `useCalendarProps` is a hook which will provide the props provided to `CalendarProvider`.
14 |
15 | This hook can be used to add yuor own props to the context.
16 |
17 | ## Example
18 |
19 | {() => {
20 | const [selectedDate, setSelectedDate] = useState();
21 | const DateLabel = ({ selectedDate }) => {
22 | const { format, getDateFormat } = useDateAPI();
23 | const props = useCalendarProps();
24 | let dateLabel = 'Select A Date';
25 | if (selectedDate) {
26 | const formatter = getDateFormat(formatNames.ARIA_DAY_LABEL);
27 | dateLabel = format(selectedDate, formatter);
28 | }
29 | return ({props.myExtraLabel} {dateLabel}
37 |
38 |
40 | );
41 | }}
42 |
43 |
--------------------------------------------------------------------------------
/src/docs/hooks/useCalendarState.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useCalendarState
3 | route: /useCalendarState
4 | ---
5 | import { useState } from 'react';
6 | import { Playground } from 'docz'
7 | import { useDateAPI, useCalendarState, Calendar, CalendarProvider} from '@use-date-input/core';
8 | import { formatNames } from '@use-date-input/common';
9 | import { adapter as dateAdapter } from '@use-date-input/date-fns-adapter';
10 |
11 | # useCalendarState
12 |
13 | `useCalendarState` is a hook which will provide the current state of your components.
14 |
15 | ## Example
16 |
17 | {() => {
18 | const DateLabel = () => {
19 | const { format, getDateFormat } = useDateAPI();
20 | const { startDate:selectedDate } = useCalendarState();
21 | let dateLabel = 'Select A Date';
22 | if (selectedDate) {
23 | const formatter = getDateFormat(formatNames.ARIA_DAY_LABEL);
24 | dateLabel = format(selectedDate, formatter);
25 | }
26 | return ({dateLabel}
);
27 | };
28 | return (
29 |
32 |
35 | );
36 | }}
37 |
38 |
--------------------------------------------------------------------------------
/src/docs/hooks/useDateAPI.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useDateAPI
3 | route: /useDateAPI
4 | ---
5 | import { useState } from 'react';
6 | import { Playground } from 'docz'
7 | import { useDateAPI, Calendar, CalendarProvider} from '@use-date-input/core';
8 | import { formatNames } from '@use-date-input/common';
9 | import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
10 |
11 | # useDateAPI
12 |
13 | `useDateAPI` is a hook which will provide the dateAPI to any child of `CalendarProvider`.
14 |
15 | ## Example
16 |
17 | {() => {
18 | // import { useState } from "react";
19 | // import { formatNames } from '@use-date-input/common';
20 | // import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
21 | // import { CalendarProvider, calendar, useDateAPI } from "@use-date-input/core";
22 | const [selectedDate, setSelectedDate] = useState();
23 | const DateLabel = ({ selectedDate }) => {
24 | const { format, getDateFormat } = useDateAPI();
25 | let dateLabel = 'Select A Date';
26 | if (selectedDate) {
27 | const formatter = getDateFormat(formatNames.ARIA_DAY_LABEL);
28 | dateLabel = format(selectedDate, formatter);
29 | }
30 | return ({dateLabel}
);
31 | };
32 | return (
33 |
37 |
38 |
40 | );
41 | }}
42 |
43 |
--------------------------------------------------------------------------------
/src/gatsby-theme-docz/components/Button.js:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from "react";
2 | import { default as MUIButton } from "@material-ui/core/Button";
3 | import { makeStyles } from "@material-ui/core/styles";
4 |
5 | const useStyles = makeStyles(() => ({
6 | root: {
7 | textTransform: "unset"
8 | }
9 | }));
10 |
11 | export const Button = forwardRef(function Button(props, ref) {
12 | const classes = useStyles();
13 | return (
14 |
;
14 | }
15 |
16 | export const ButtonBar = withStyles(style)(UnStyledButtonBar);
17 |
--------------------------------------------------------------------------------
/src/gatsby-theme-docz/components/Carousel.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import MUICarousel from "react-material-ui-carousel";
3 | import { makeStyles, useTheme } from "@material-ui/core/styles";
4 | import useMediaQuery from "@material-ui/core/useMediaQuery/useMediaQuery";
5 |
6 | const useStyles = makeStyles(() => ({
7 | root: {
8 | minHeight: "100vh",
9 | overflow: "inherit",
10 | paddingBottom: "30px",
11 | width: "100%"
12 | },
13 | buttonWrapper: {
14 | top: "calc(50% - 165px)"
15 | }
16 | }));
17 |
18 | export function Carousel(props) {
19 | const theme = useTheme();
20 | const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down("sm"));
21 | const classes = useStyles();
22 | return (
23 |
24 |
Build your own datepicker
25 |
with use-date-input
26 |
35 | {label}
36 |
46 | {item.label}
47 |
48 | ],
49 | []
50 | )}
51 |
52 |
53 | );
54 | }
55 |
56 | Dropdown.propTypes = {
57 | labelId: PropTypes.string,
58 | label: PropTypes.string,
59 | onChange: PropTypes.func,
60 | selectedValue: PropTypes.string,
61 | source: PropTypes.array
62 | };
63 |
--------------------------------------------------------------------------------
/src/gatsby-theme-docz/components/Heading.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withStyles } from "@material-ui/core";
3 |
4 | const style = theme => ({
5 | root: {
6 | alignItems: "center",
7 | display: "flex",
8 | height: "150px",
9 | margin: "auto",
10 | width: "75%"
11 | },
12 | h1: {
13 | fontSize: "80px",
14 | height: "100%",
15 | margin: 0,
16 | padding: 0
17 | },
18 | [theme.breakpoints.down("sm")]: {
19 | h1: {
20 | fontSize: "50px"
21 | }
22 | },
23 | [theme.breakpoints.down("xs")]: {
24 | root: {
25 | height: "80px",
26 | width: "100%"
27 | },
28 | h1: {
29 | fontSize: "40px"
30 | }
31 | }
32 | });
33 |
34 | function UnstyledHeading({ classes, ...rest }) {
35 | return (
36 |
37 |
use-date-input
38 |
39 | );
40 | }
41 |
42 | export const Heading = withStyles(style)(UnstyledHeading);
43 |
--------------------------------------------------------------------------------
/src/gatsby-theme-docz/components/Hero1.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Calendar } from "@use-date-input/core";
3 | import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
4 |
5 | export function Hero1() {
6 | return
44 |
45 |
46 |
48 |
49 |
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/gatsby-theme-docz/components/Hero5.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Calendar } from "@use-date-input/core";
3 | import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
4 | import sampleTheme from "../../../stories/sampleTheme";
5 |
6 | export function Hero5() {
7 | return div": { flex: "1 1 auto" } }} data-testid="layout">
17 |
19 | {!doc.value.fullPage &&
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/src/gatsby-theme-docz/components/Layout/styles.js:
--------------------------------------------------------------------------------
1 | import { media } from "~theme/breakpoints";
2 |
3 | export const main = {
4 | display: "flex",
5 | flexDirection: "column",
6 | minHeight: "100vh"
7 | };
8 |
9 | export const wrapper = {
10 | fontFamily: "Roboto, Helvetica, Arial, sans-serif",
11 | py: 0,
12 | flex: 1,
13 | display: "grid",
14 | gridTemplateColumns: "250px minmax(0, 1fr)",
15 | minHeight: "100vh",
16 | [media.tablet]: {
17 | display: "block"
18 | }
19 | };
20 |
21 | export const fullPageWrapper = {
22 | ...wrapper,
23 | display: "block",
24 | gridTemplateColumns: undefined
25 | };
26 |
--------------------------------------------------------------------------------
/src/gatsby-theme-docz/components/Logo/index.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { jsx, Flex } from 'theme-ui'
3 | import { Link, useConfig } from 'docz'
4 | import { useTheme } from '@material-ui/core/styles';
5 | import useMediaQuery from "@material-ui/core/useMediaQuery/useMediaQuery";
6 |
7 | import * as styles from './styles'
8 |
9 | export const Logo = () => {
10 | const config = useConfig();
11 | const theme = useTheme();
12 | const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down("sm"));
13 | return (
14 |
15 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/gatsby-theme-docz/components/Logo/styles.js:
--------------------------------------------------------------------------------
1 | export const logo = {
2 | letterSpacing: '-0.02em',
3 | fontWeight: 600,
4 | fontSize: 4,
5 | }
6 |
7 | export const link = {
8 | fontWeight: 600,
9 | color: 'header.text',
10 | textDecoration: 'none',
11 | ':hover': {
12 | color: 'primary',
13 | },
14 | }
15 |
--------------------------------------------------------------------------------
/src/gatsby-theme-docz/components/Playground/Wrapper.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { useState } from "react";
3 | import { jsx } from "theme-ui";
4 | import { useConfig } from "docz";
5 | import Iframe from "react-frame-component";
6 | import ReactResizeDetector from "react-resize-detector";
7 |
8 | import * as styles from "./styles";
9 |
10 | const CLEAR_PADDING = ``;
11 | const INITIAL_IFRAME_CONTENT = ` ${CLEAR_PADDING}
`;
12 |
13 | const IframeWrapper = ({ children, style }) => {
14 | const [containerHeight, setHeight] = useState();
15 | return (
16 |
32 | );
33 | };
34 |
35 | const NormalWrapper = ({ children, style }) => {
36 | return (
37 |
43 | {children}
44 |
45 | );
46 | };
47 |
48 | export const Wrapper = ({ children, content, useScoping, showingCode }) => {
49 | const {
50 | themeConfig: { useScopingInPlayground }
51 | } = useConfig();
52 |
53 | const Element =
54 | useScoping || useScopingInPlayground ? IframeWrapper : NormalWrapper;
55 |
56 | return (
57 |
58 | {children}
59 |
60 | );
61 | };
62 |
--------------------------------------------------------------------------------
/src/gatsby-theme-docz/components/Playground/styles.js:
--------------------------------------------------------------------------------
1 | import * as mixins from "~utils/mixins";
2 |
3 | export const editor = theme => ({
4 | p: 2,
5 | background: theme.plain.backgroundColor,
6 | borderRadius: "0px 4px 4px 4px",
7 | fontFamily: "monospace",
8 | fontSize: 16,
9 | "* > textarea:focus": {
10 | outline: "none"
11 | }
12 | });
13 |
14 | export const error = {
15 | m: 0,
16 | py: 2,
17 | px: 3,
18 | bg: "#FF4757",
19 | fontSize: 1,
20 | color: "white",
21 | whiteSpace: "pre-wrap"
22 | };
23 |
24 | export const previewWrapper = {
25 | display: "table",
26 | position: "relative"
27 | };
28 |
29 | export const wrapper = () => ({
30 | height: "auto",
31 | display: "block",
32 | minHeight: "100%",
33 | width: "100%",
34 | bg: "playground.bg",
35 | marginTop: "20px",
36 | marginBottom: "20px"
37 | });
38 |
39 | export const wrapperBorder = (content) => {
40 | if (content === 'editor') {
41 | return {
42 | border: t => `1px solid ${t.colors.playground.border}`,
43 | borderRadius: "0px 4px 4px 4px"
44 | };
45 | }
46 | return {
47 | border: "none"
48 | };
49 | };
50 |
51 | export const preview = {
52 | background: "white",
53 | color: "initial",
54 | display: "table",
55 | fontSize: "12px",
56 | lineHeight: "1.4em",
57 | margin: 0,
58 | padding: "20px"
59 | };
60 |
61 | export const buttons = {
62 | display: "flex",
63 | position: "absolute",
64 | bottom: -20
65 | };
66 |
67 | export const button = {
68 | ...mixins.ghostButton,
69 | display: "flex",
70 | alignItems: "center",
71 | py: 1,
72 | p: 2,
73 | bg: "border",
74 | color: t => t.colors.playground.border,
75 | border: t => `1px solid ${t.colors.playground.border}`,
76 | borderRadius: "4px 4px 0px 0px",
77 | borderBottom: "0px",
78 | "& ~ &": {
79 | ml: 1
80 | }
81 | };
82 |
83 | export const link = {
84 | py: 0,
85 | ml: 1,
86 | height: 22
87 | };
88 |
--------------------------------------------------------------------------------
/src/gatsby-theme-docz/createDate.js:
--------------------------------------------------------------------------------
1 | import { createDateAPI } from "@use-date-input/core";
2 | import { adapter as dateFnsAdapter } from "@use-date-input/date-fns-adapter";
3 |
4 | const dateAPI = createDateAPI({ adapter: dateFnsAdapter });
5 |
6 | export const createDate = dateAPI.createDate;
7 | export const dateAdapter = dateFnsAdapter;
8 |
--------------------------------------------------------------------------------
/stories/1 - Date Range.stories.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { action } from "@storybook/addon-actions";
3 | import { Calendar, createDateAPI } from "../packages/core";
4 | import { adapter as dateAdapter } from "../packages/date-fns-adapter";
5 |
6 | export default {
7 | title: "1 - Date Range"
8 | };
9 |
10 | const { addWeeks, createDate } = createDateAPI({ adapter: dateAdapter });
11 |
12 | const useChangeAction = () => selectedDate => {
13 | action("select date range")(selectedDate[0], selectedDate[1]);
14 | };
15 |
16 | const useStateChangeAction = () => (state, changes) => {
17 | action("state changed")(changes, state);
18 | };
19 |
20 | export const Month = () => {
21 | const handleChange = useChangeAction();
22 | const handleStateChange = useStateChangeAction();
23 | return (
24 |
17 |
20 | );
21 |
22 | export default {
23 | title: '2 - Additional Controls'
24 | };
25 |
26 | export const CustomHeader = () => {
27 | const handleChange = useChangeAction();
28 | return (
29 |
48 | Open Date Range Dialog
49 |
50 |
56 | setSelectedDate(selectedDate)}
64 | numOfVisibleMonths={3}
65 | numOfColumns={3}
66 | />
67 |
68 |
69 | );
70 | };
71 | InDialog.story = {
72 | name: 'Inside a dialog'
73 | };
74 |
--------------------------------------------------------------------------------
/stories/4 - Themable.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { adapter as dateAdapter } from "../packages/date-fns-adapter";
3 | import { Calendar } from "../packages/core";
4 | import sampleTheme from './sampleTheme';
5 | import { action } from '@storybook/addon-actions';
6 |
7 | export default {
8 | title: '4 - Themable Components'
9 | };
10 |
11 | const useChangeAction = () => selectedDate => {
12 | action('changed selected date')(selectedDate);
13 | };
14 |
15 | const useStateChangeAction = () => changes => {
16 | action('state changed')(changes);
17 | };
18 |
19 | export const ThemedCalendar = () => {
20 | const handleChange = useChangeAction();
21 | const handleStateChange = useStateChangeAction();
22 | return (
23 |
26 | Date Range Dialog Example
27 |
28 |
29 | Select a date range or use shortcuts from the List
30 |
31 | {children}
32 | {description}
33 |
34 |
35 |
36 | Cancel
37 |
38 |
39 | OK
40 |
41 |
42 |
43 | );
44 | }
45 | DateRangeDialog.propTypes = {
46 | children: PropTypes.node,
47 | onCancel: PropTypes.func,
48 | onOK: PropTypes.func,
49 | open: PropTypes.bool,
50 | selectedDate: PropTypes.array
51 | };
52 |
--------------------------------------------------------------------------------
/stories/Dropdown.js:
--------------------------------------------------------------------------------
1 | import { FormControl, Input, InputLabel, MenuItem, Select, makeStyles } from '@material-ui/core';
2 | import PropTypes from 'prop-types';
3 | import React from 'react';
4 |
5 | const useStyles = makeStyles(theme => ({
6 | container: {
7 | display: 'flex',
8 | flexWrap: 'wrap'
9 | },
10 | formControl: {
11 | margin: theme.spacing(1),
12 | minWidth: 120
13 | }
14 | }));
15 |
16 | export default function Dropdown({ label, labelId, onChange, selectedValue, source }) {
17 | const classes = useStyles();
18 | const handleChange = event => onChange(event.target.value);
19 |
20 | return (
21 |
22 | {label}
23 |
33 | {item.label}
34 |
35 | ],
36 | []
37 | )}
38 |
39 |
40 | );
41 | }
42 |
43 | Dropdown.propTypes = {
44 | labelId: PropTypes.string,
45 | label: PropTypes.string,
46 | onChange: PropTypes.func,
47 | selectedValue: PropTypes.string,
48 | source: PropTypes.array
49 | };
50 |
--------------------------------------------------------------------------------
/stories/ShortcutList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import List from '@material-ui/core/List';
4 | import ListItem from '@material-ui/core/ListItem';
5 | import ListItemText from '@material-ui/core/ListItemText';
6 | import { useCalendarDispatch, useCalendarState } from '@use-date-input/core';
7 | import { createDateAPI } from '@use-date-input/core';
8 | import { adapter as dateAdapter } from "../packages/date-fns-adapter";
9 |
10 | const dateAPI = createDateAPI({ adapter: dateAdapter });
11 |
12 | const useStyles = makeStyles(theme => ({
13 | root: {
14 | backgroundColor: theme.palette.background.paper,
15 | display: 'inline-block',
16 | paddingTop: '90px',
17 | verticalAlign: 'top',
18 | width: 150
19 | }
20 | }));
21 |
22 | export default function ShortcutList() {
23 | const { startDate } = useCalendarState();
24 | const { setEndDate, setVisibleFromDate } = useCalendarDispatch();
25 | const classes = useStyles();
26 |
27 | if (!startDate) {
28 | return null;
29 | }
30 |
31 | const createNightsSelectHandler = numOfNights => () => {
32 | setEndDate(dateAPI.addDays(startDate, numOfNights));
33 | setVisibleFromDate(dateAPI.startOfMonth(startDate));
34 | };
35 | const handleTenNights = createNightsSelectHandler(10);
36 | const handleSevenNights = createNightsSelectHandler(7);
37 | const handleThreeNights = createNightsSelectHandler(3);
38 |
39 | return (
40 |
41 |
42 |
43 |
45 |
46 |
48 |
49 |
51 |
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/use-date-input.iml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
--------------------------------------------------------------------------------