@birdnet/advanced-react-dates 0.0.0-stage → 1.0.0

package/package.json

@@ -1,6 +1,143 @@
 {
   "name": "@birdnet/advanced-react-dates",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "An advanced, responsive, and accessible date range picker based on Airbnb's react-dates",
+  "main": "index.js",
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "npm run build:cjs && npm run build:esm && npm run build:css -- --optimize",
+    "postbuild": "npm run build:test",
+    "build:cjs": "BABEL_ENV=cjs babel src/ -d lib/",
+    "build:esm": "BABEL_ENV=esm babel src/ -d esm/",
+    "build:test": "BABEL_ENV=test babel test/ -d test-build/",
+    "prebuild:css": "rimraf lib/css && mkdirp lib/css",
+    "build:css": "node scripts/buildCSS.js",
+    "clean": "rimraf lib esm test-build",
+    "lint": "eslint --ext .js,.jsx src test",
+    "mocha": "mocha ./test-build/_helpers",
+    "storybook:uninstall": "npm uninstall --no-save @storybook/react && rimraf node_modules/@storybook node_modules/react-modal node_modules/react-dom-factories",
+    "react": "NPM_CONFIG_LEGACY_PEER_DEPS=true enzyme-adapter-react-install 16",
+    "pretest": "npm run --silent lint",
+    "tests-only": "cross-env NODE_ENV=test nyc npm run mocha --silent",
+    "pretests-karma": "npm run react",
+    "tests-karma": "karma start",
+    "test": "npm run react && npm run build && npm run build:test && npm run tests-only",
+    "storybook": "start-storybook -p 6006",
+    "storybook:css": "npm run build:css && start-storybook -p 6006 -c .storybook-css",
+    "tag": "git tag v$npm_package_version",
+    "gh-pages:clean": "rimraf _gh-pages",
+    "gh-pages:build": "$(npm bin)/build-storybook -o _gh-pages",
+    "gh-pages:publish": "$(npm bin)/git-directory-deploy --directory _gh-pages",
+    "gh-pages": "npm run gh-pages:clean && npm run gh-pages:build && npm run gh-pages:publish",
+    "version:patch": "npm --no-git-tag-version version patch",
+    "version:minor": "npm --no-git-tag-version version minor",
+    "version:major": "npm --no-git-tag-version version major",
+    "preversion": "npm run test && npm run check-changelog && npm run check-only-changelog-changed",
+    "postversion": "git commit package.json CHANGELOG.md -m \"Version $npm_package_version\" && npm run tag && git push && git push --tags && npm publish --registry=https://registry.npmjs.org/",
+    "prepublish": "in-publish && safe-publish-latest && npm run build || not-in-publish",
+    "postpublish": "[ \"${npm_config_tag:-latest}\" != latest ] || npm run gh-pages",
+    "check-changelog": "expr $(git status --porcelain 2>/dev/null| grep \"^\\s*M.*CHANGELOG.md\" | wc -l) >/dev/null || (echo 'Please edit CHANGELOG.md' && exit 1)",
+    "check-only-changelog-changed": "(expr $(git status --porcelain 2>/dev/null| grep -v \"CHANGELOG.md\" | wc -l) >/dev/null && echo 'Only CHANGELOG.md may have uncommitted changes' && exit 1) || exit 0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/krisldz/advanced-react-dates.git"
+  },
+  "author": "Maja Wichrowska <maja.wichrowska@airbnb.com> / Krzysztof Sokołowski <k.sokolowski@birdnet.pl>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/krisldz/advanced-react-dates/issues"
+  },
+  "homepage": "https://github.com/krisldz/advanced-react-dates#readme",
+  "devDependencies": {
+    "@babel/cli": "^7.16.8",
+    "@babel/core": "^7.16.12",
+    "@babel/eslint-parser": "^7.16.5",
+    "@babel/register": "^7.16.9",
+    "@babel/runtime": "^7.16.7",
+    "@storybook/addon-actions": "^5.3.21",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^5.3.21",
+    "@storybook/addon-options": "^5.3.21",
+    "@storybook/addons": "^5.3.21",
+    "@storybook/react": "^5.3.21",
+    "@welldone-software/why-did-you-render": "^3.6.0",
+    "airbnb-js-shims": "^2.2.1",
+    "aphrodite": "^2.4.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-import-path-replace": "^0.1.0",
+    "babel-plugin-inline-react-svg": "^1.1.2",
+    "babel-plugin-inline-svg": "^1.2.0",
+    "babel-plugin-istanbul": "^5.2.0",
+    "babel-plugin-transform-replace-object-assign": "^2.0.0",
+    "babel-preset-airbnb": "^4.5.0",
+    "chai": "^4.2.0",
+    "cheerio": "=1.0.0-rc.3",
+    "clean-css": "^4.2.3",
+    "cross-env": "^5.2.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-helper": "^1.3.9",
+    "eslint": "^8.7.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react-with-styles": "^2.4.0",
+    "git-directory-deploy": "^1.5.1",
+    "imports-loader": "^0.8.0",
+    "in-publish": "^2.0.1",
+    "karma": "^6.3.11",
+    "karma-chai": "^0.1.0",
+    "karma-firefox-launcher": "^1.2.0",
+    "karma-mocha": "^2.0.1",
+    "karma-sinon": "^1.0.5",
+    "karma-webpack": "^4.0.2",
+    "mkdirp": "^0.5.5",
+    "mocha": "^3.5.3",
+    "mocha-wrap": "^2.1.2",
+    "moment": "^2.29.1",
+    "moment-jalaali": "^0.7.4",
+    "nyc": "^10.3.2",
+    "raw-loader": "^0.5.1",
+    "react": "^0.14 || ^15.5.4 || ^16.1.1",
+    "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
+    "react-with-styles-interface-aphrodite": "^6.0.1",
+    "react-with-styles-interface-css-compiler": "^2.2.0",
+    "rimraf": "^2.7.1",
+    "safe-publish-latest": "^1.1.4",
+    "sass-loader": "^7.3.1",
+    "sinon": "^7.5.0",
+    "sinon-sandbox": "^2.0.6",
+    "style-loader": "^0.20.3",
+    "typescript": "*",
+    "webpack": "^4.46.0"
+  },
+  "dependencies": {
+    "airbnb-prop-types": "^2.16.0",
+    "color2k": "~1.1.1",
+    "consolidated-events": "^1.1.1 || ^2.0.0",
+    "enzyme-shallow-equal": "^1.0.4",
+    "is-touch-device": "^1.0.1",
+    "lodash": "^4.1.1",
+    "object.assign": "^4.1.2",
+    "object.values": "^1.1.5",
+    "prop-types": "^15.7.2",
+    "raf": "^3.4.1",
+    "react-moment-proptypes": "^1.8.1",
+    "react-outside-click-handler": "^1.3.0",
+    "react-portal": "^4.2.1",
+    "react-with-direction": "^1.4.0",
+    "react-with-styles": "~4.1.0",
+    "react-with-styles-interface-css": "^6.0.0"
+  },
+  "peerDependencies": {
+    "@babel/runtime": "^7.0.0",
+    "moment": "^2.18.1",
+    "react": "^0.14 || ^15.5.4 || ^16.1.1",
+    "react-dom": "^0.14 || ^15.5.4 || ^16.1.1"
+  },
+  "engines": {
+    "node": ">=0.10"
+  }
+}

package/scripts/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": [2, {
+      "devDependencies": true
+    }],
+  }
+}

package/scripts/buildCSS.js

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const CleanCSS = require('clean-css');
+
+const compileCSS = require('react-with-styles-interface-css-compiler');
+
+const registerMaxSpecificity = require('react-with-styles-interface-css/dist/utils/registerMaxSpecificity').default;
+const registerCSSInterfaceWithDefaultTheme = require('../src/utils/registerCSSInterfaceWithDefaultTheme').default;
+
+console.error = msg => { throw new SyntaxError(msg); };
+console.warn = msg => { throw new SyntaxError(msg); };
+
+const args = process.argv.slice(2);
+const optimizeForProduction = args.includes('-o') || args.includes('--optimize');
+
+registerMaxSpecificity(0);
+registerCSSInterfaceWithDefaultTheme();
+
+const path = './scripts/renderAllComponents.jsx';
+const CSS = compileCSS(path);
+
+if (CSS === '') {
+  throw new Error('Failed to compile CSS');
+} else {
+  console.log('CSS compilation complete.');
+}
+
+const format = new CleanCSS({
+  level: optimizeForProduction ? 2 : 0,
+  format: 'beautify',
+  inline: ['none'],
+});
+const { styles: formattedCSS } = format.minify(CSS);
+
+const outputFilePath = optimizeForProduction ? './lib/css/_datepicker.css' : './css/styles.css';
+fs.writeFileSync(outputFilePath, formattedCSS, 'utf8');

package/scripts/pure-component-fallback.js

@@ -0,0 +1,70 @@
+module.exports = function pureComponentFallback({ types: t, template }) {
+  const buildPureOrNormalSuperclass = () => t.LogicalExpression('||',
+    t.memberExpression(t.identifier('React'), t.identifier('PureComponent')),
+    t.memberExpression(t.identifier('React'), t.identifier('Component')));
+
+  const buildShouldComponentUpdate = () => {
+    const method = t.classMethod(
+      'method',
+      t.logicalExpression(
+        '&&',
+        t.unaryExpression('!', t.memberExpression(t.identifier('React'), t.identifier('PureComponent'))),
+        t.stringLiteral('shouldComponentUpdate')
+      ),
+      [t.identifier('nextProps'), t.identifier('nextState')],
+      t.blockStatement([template('return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);')()]),
+      true
+    );
+    return method;
+  };
+
+  function superclassIsPureComponent(path) {
+    const superclass = path.get('superClass');
+    // check for PureComponent
+    if (t.isIdentifier(superclass)) {
+      return superclass.node.name === 'PureComponent';
+    }
+
+    if (t.isMemberExpression(superclass)) {
+      // Check for React.PureComponent
+      return superclass.get('object').node.name === 'React'
+        && superclass.get('property').node.name === 'PureComponent';
+    }
+
+    return false;
+  }
+
+  return {
+    visitor: {
+      Program: {
+        exit({ node }, { file }) {
+          if (file.get('addShallowEqualImport')) {
+            const shallowEqualImportDeclaration = t.importDeclaration([
+              t.importDefaultSpecifier(t.identifier('shallowEqual')),
+            ], t.stringLiteral('enzyme-shallow-equal'));
+            node.body.unshift(shallowEqualImportDeclaration);
+          }
+        },
+      },
+
+      ClassDeclaration(path, { file }) {
+        if (superclassIsPureComponent(path)) {
+          const superclassPath = path.get('superClass');
+
+          // Replace the superclass
+          superclassPath.replaceWith(buildPureOrNormalSuperclass());
+
+          // Only add an SCU if one doesn't already exist
+          const existingSCU = path.get('body').get('body').find((
+            p => p.isClassMethod() && p.get('key').node.name === 'shouldComponentUpdate'
+          ));
+
+          if (!existingSCU) {
+            file.set('addShallowEqualImport', true);
+            path.get('body').unshiftContainer('body', buildShouldComponentUpdate());
+          }
+        }
+      },
+    },
+  };
+};

package/scripts/renderAllComponents.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
+import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
+import PresetDateRangePickerWrapper from '../examples/PresetDateRangePicker';
+
+if (!document.getElementById('root')) {
+  // Make sure the #root element is defined
+  const root = document.createElement('div');
+  root.id = 'root';
+  document.body.appendChild(root);
+}
+
+function App() {
+  return (
+    <div>
+      <DateRangePickerWrapper autoFocus />
+      <SingleDatePickerWrapper autoFocus />
+      <PresetDateRangePickerWrapper autoFocus />
+    </div>
+  );
+}
+
+ReactDOM.render(<App />, document.querySelector('#root'));

package/src/components/CalendarDay.jsx

@@ -0,0 +1,366 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import momentPropTypes from 'react-moment-proptypes';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import { withStyles, withStylesPropTypes } from 'react-with-styles';
+import moment from 'moment';
+import raf from 'raf';
+
+import { CalendarDayPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import getCalendarDaySettings from '../utils/getCalendarDaySettings';
+import ModifiersShape from '../shapes/ModifiersShape';
+
+import { DAY_SIZE } from '../constants';
+
+const propTypes = forbidExtraProps({
+  ...withStylesPropTypes,
+  day: momentPropTypes.momentObj,
+  daySize: nonNegativeInteger,
+  isOutsideDay: PropTypes.bool,
+  modifiers: ModifiersShape,
+  isFocused: PropTypes.bool,
+  tabIndex: PropTypes.oneOf([0, -1]),
+  onDayClick: PropTypes.func,
+  onDayMouseEnter: PropTypes.func,
+  onDayMouseLeave: PropTypes.func,
+  renderDayContents: PropTypes.func,
+  ariaLabelFormat: PropTypes.string,
+
+  // internationalization
+  phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
+});
+
+const defaultProps = {
+  day: moment(),
+  daySize: DAY_SIZE,
+  isOutsideDay: false,
+  modifiers: new Set(),
+  isFocused: false,
+  tabIndex: -1,
+  onDayClick() {},
+  onDayMouseEnter() {},
+  onDayMouseLeave() {},
+  renderDayContents: null,
+  ariaLabelFormat: 'dddd, LL',
+
+  // internationalization
+  phrases: CalendarDayPhrases,
+};
+
+class CalendarDay extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    this.setButtonRef = this.setButtonRef.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { isFocused, tabIndex } = this.props;
+    if (tabIndex === 0) {
+      if (isFocused || tabIndex !== prevProps.tabIndex) {
+        raf(() => {
+          if (this.buttonRef) {
+            this.buttonRef.focus();
+          }
+        });
+      }
+    }
+  }
+
+  onDayClick(day, e) {
+    const { onDayClick } = this.props;
+    onDayClick(day, e);
+  }
+
+  onDayMouseEnter(day, e) {
+    const { onDayMouseEnter } = this.props;
+    onDayMouseEnter(day, e);
+  }
+
+  onDayMouseLeave(day, e) {
+    const { onDayMouseLeave } = this.props;
+    onDayMouseLeave(day, e);
+  }
+
+  onKeyDown(day, e) {
+    const { onDayClick } = this.props;
+
+    const { key } = e;
+    if (key === 'Enter' || key === ' ') {
+      onDayClick(day, e);
+    }
+  }
+
+  setButtonRef(ref) {
+    this.buttonRef = ref;
+  }
+
+  render() {
+    const {
+      day,
+      ariaLabelFormat,
+      daySize,
+      isOutsideDay,
+      modifiers,
+      renderDayContents,
+      tabIndex,
+      css,
+      styles,
+      phrases,
+    } = this.props;
+
+    // empty placeholder cell (no day to render); nothing to label
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    if (!day) return <td />;
+
+    const {
+      daySizeStyles,
+      useDefaultCursor,
+      selected,
+      hoveredSpan,
+      isOutsideRange,
+      ariaLabel,
+    } = getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases);
+
+    return (
+      <td
+        {...css(
+          styles.CalendarDay,
+          useDefaultCursor && styles.CalendarDay__defaultCursor,
+          styles.CalendarDay__default,
+          isOutsideDay && styles.CalendarDay__outside,
+          modifiers.has('today') && styles.CalendarDay__today,
+          modifiers.has('first-day-of-week') && styles.CalendarDay__firstDayOfWeek,
+          modifiers.has('last-day-of-week') && styles.CalendarDay__lastDayOfWeek,
+          modifiers.has('hovered-offset') && styles.CalendarDay__hovered_offset,
+          modifiers.has('hovered-start-first-possible-end') && styles.CalendarDay__hovered_start_first_possible_end,
+          modifiers.has('hovered-start-blocked-minimum-nights') && styles.CalendarDay__hovered_start_blocked_min_nights,
+          modifiers.has('highlighted-calendar') && styles.CalendarDay__highlighted_calendar,
+          modifiers.has('blocked-minimum-nights') && styles.CalendarDay__blocked_minimum_nights,
+          modifiers.has('blocked-calendar') && styles.CalendarDay__blocked_calendar,
+          hoveredSpan && styles.CalendarDay__hovered_span,
+          modifiers.has('after-hovered-start') && styles.CalendarDay__after_hovered_start,
+          modifiers.has('selected-span') && styles.CalendarDay__selected_span,
+          modifiers.has('selected-start') && styles.CalendarDay__selected_start,
+          modifiers.has('selected-end') && styles.CalendarDay__selected_end,
+          selected && !modifiers.has('selected-span') && styles.CalendarDay__selected,
+          modifiers.has('before-hovered-end') && styles.CalendarDay__before_hovered_end,
+          modifiers.has('no-selected-start-before-selected-end') && styles.CalendarDay__no_selected_start_before_selected_end,
+          modifiers.has('selected-start-in-hovered-span') && styles.CalendarDay__selected_start_in_hovered_span,
+          modifiers.has('selected-end-in-hovered-span') && styles.CalendarDay__selected_end_in_hovered_span,
+          modifiers.has('selected-start-no-selected-end') && styles.CalendarDay__selected_start_no_selected_end,
+          modifiers.has('selected-end-no-selected-start') && styles.CalendarDay__selected_end_no_selected_start,
+          isOutsideRange && styles.CalendarDay__blocked_out_of_range,
+          daySizeStyles,
+        )}
+        role="button" // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role
+        ref={this.setButtonRef}
+        aria-disabled={modifiers.has('blocked')}
+        {...(modifiers.has('today') ? { 'aria-current': 'date' } : {})}
+        aria-label={ariaLabel}
+        onMouseEnter={(e) => { this.onDayMouseEnter(day, e); }}
+        onMouseLeave={(e) => { this.onDayMouseLeave(day, e); }}
+        onMouseUp={(e) => { e.currentTarget.blur(); }}
+        onClick={(e) => { this.onDayClick(day, e); }}
+        onKeyDown={(e) => { this.onKeyDown(day, e); }}
+        tabIndex={tabIndex}
+      >
+        {renderDayContents ? renderDayContents(day, modifiers) : day.format('D')}
+      </td>
+    );
+  }
+}
+
+CalendarDay.propTypes = propTypes;
+CalendarDay.defaultProps = defaultProps;
+
+export { CalendarDay as PureCalendarDay };
+export default withStyles(({ reactDates: { color, font } }) => ({
+  CalendarDay: {
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    fontSize: font.size,
+    textAlign: 'center',
+
+    ':active': {
+      outline: 0,
+    },
+  },
+
+  CalendarDay__defaultCursor: {
+    cursor: 'default',
+  },
+
+  CalendarDay__default: {
+    border: `1px solid ${color.core.borderLight}`,
+    color: color.text,
+    background: color.background,
+
+    ':hover': {
+      background: color.core.borderLight,
+      border: `1px solid ${color.core.borderLight}`,
+      color: 'inherit',
+    },
+  },
+
+  CalendarDay__hovered_offset: {
+    background: color.core.borderBright,
+    border: `1px double ${color.core.borderLight}`,
+    color: 'inherit',
+  },
+
+  CalendarDay__outside: {
+    border: 0,
+    background: color.outside.backgroundColor,
+    color: color.outside.color,
+
+    ':hover': {
+      border: 0,
+    },
+  },
+
+  CalendarDay__blocked_minimum_nights: {
+    background: color.minimumNights.backgroundColor,
+    border: `1px solid ${color.minimumNights.borderColor}`,
+    color: color.minimumNights.color,
+
+    ':hover': {
+      background: color.minimumNights.backgroundColor_hover,
+      color: color.minimumNights.color_active,
+    },
+
+    ':active': {
+      background: color.minimumNights.backgroundColor_active,
+      color: color.minimumNights.color_active,
+    },
+  },
+
+  CalendarDay__highlighted_calendar: {
+    background: color.highlighted.backgroundColor,
+    color: color.highlighted.color,
+
+    ':hover': {
+      background: color.highlighted.backgroundColor_hover,
+      color: color.highlighted.color_active,
+    },
+
+    ':active': {
+      background: color.highlighted.backgroundColor_active,
+      color: color.highlighted.color_active,
+    },
+  },
+
+  CalendarDay__selected_span: {
+    background: color.selectedSpan.backgroundColor,
+    border: `1px double ${color.selectedSpan.borderColor}`,
+    color: color.selectedSpan.color,
+
+    ':hover': {
+      background: color.selectedSpan.backgroundColor_hover,
+      border: `1px double ${color.selectedSpan.borderColor}`,
+      color: color.selectedSpan.color_active,
+    },
+
+    ':active': {
+      background: color.selectedSpan.backgroundColor_active,
+      border: `1px double ${color.selectedSpan.borderColor}`,
+      color: color.selectedSpan.color_active,
+    },
+  },
+
+  CalendarDay__selected: {
+    background: color.selected.backgroundColor,
+    border: `1px double ${color.selected.borderColor}`,
+    color: color.selected.color,
+
+    ':hover': {
+      background: color.selected.backgroundColor_hover,
+      border: `1px double ${color.selected.borderColor}`,
+      color: color.selected.color_active,
+    },
+
+    ':active': {
+      background: color.selected.backgroundColor_active,
+      border: `1px double ${color.selected.borderColor}`,
+      color: color.selected.color_active,
+    },
+  },
+
+  CalendarDay__hovered_span: {
+    background: color.hoveredSpan.backgroundColor,
+    border: `1px double ${color.hoveredSpan.borderColor}`,
+    color: color.hoveredSpan.color,
+
+    ':hover': {
+      background: color.hoveredSpan.backgroundColor_hover,
+      border: `1px double ${color.hoveredSpan.borderColor}`,
+      color: color.hoveredSpan.color_active,
+    },
+
+    ':active': {
+      background: color.hoveredSpan.backgroundColor_active,
+      border: `1px double ${color.hoveredSpan.borderColor}`,
+      color: color.hoveredSpan.color_active,
+    },
+  },
+
+  CalendarDay__blocked_calendar: {
+    background: color.blocked_calendar.backgroundColor,
+    border: `1px solid ${color.blocked_calendar.borderColor}`,
+    color: color.blocked_calendar.color,
+
+    ':hover': {
+      background: color.blocked_calendar.backgroundColor_hover,
+      border: `1px solid ${color.blocked_calendar.borderColor}`,
+      color: color.blocked_calendar.color_active,
+    },
+
+    ':active': {
+      background: color.blocked_calendar.backgroundColor_active,
+      border: `1px solid ${color.blocked_calendar.borderColor}`,
+      color: color.blocked_calendar.color_active,
+    },
+  },
+
+  CalendarDay__blocked_out_of_range: {
+    background: color.blocked_out_of_range.backgroundColor,
+    border: `1px solid ${color.blocked_out_of_range.borderColor}`,
+    color: color.blocked_out_of_range.color,
+
+    ':hover': {
+      background: color.blocked_out_of_range.backgroundColor_hover,
+      border: `1px solid ${color.blocked_out_of_range.borderColor}`,
+      color: color.blocked_out_of_range.color_active,
+    },
+
+    ':active': {
+      background: color.blocked_out_of_range.backgroundColor_active,
+      border: `1px solid ${color.blocked_out_of_range.borderColor}`,
+      color: color.blocked_out_of_range.color_active,
+    },
+  },
+
+  CalendarDay__hovered_start_first_possible_end: {
+    background: color.core.borderLighter,
+    border: `1px double ${color.core.borderLighter}`,
+  },
+
+  CalendarDay__hovered_start_blocked_min_nights: {
+    background: color.core.borderLighter,
+    border: `1px double ${color.core.borderLight}`,
+  },
+
+  CalendarDay__selected_start: {},
+  CalendarDay__selected_end: {},
+  CalendarDay__today: {},
+  CalendarDay__firstDayOfWeek: {},
+  CalendarDay__lastDayOfWeek: {},
+  CalendarDay__after_hovered_start: {},
+  CalendarDay__before_hovered_end: {},
+  CalendarDay__no_selected_start_before_selected_end: {},
+  CalendarDay__selected_start_in_hovered_span: {},
+  CalendarDay__selected_end_in_hovered_span: {},
+  CalendarDay__selected_start_no_selected_end: {},
+  CalendarDay__selected_end_no_selected_start: {},
+}), { pureComponent: typeof React.PureComponent !== 'undefined' })(CalendarDay);

package/src/components/CalendarIcon.jsx

@@ -0,0 +1,3 @@
+import CalendarIcon from '../svg/calendar.svg';
+
+export default CalendarIcon;