@dhis2-ui/calendar 8.8.0

package/build/es/stories/calendarInput.stories.js

@@ -0,0 +1,84 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { CalendarInput } from '../calendar-input/index.js';
+import { CalendarStoryWrapper } from './calendarStoryWrapper.js';
+const subtitle = "[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar";
+const description = "\nUse a CalendarInput where there is a need to let the user input a date.\n\nNote that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.\n\n```js\nimport { CalendarInput } from '@dhis2/ui'\n```\n";
+export default {
+  title: 'CalendarInput',
+  component: CalendarInput,
+  parameters: {
+    componentSubtitle: subtitle,
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  }
+};
+
+const buildCalendar = _ref => {
+  let {
+    date,
+    locale,
+    calendar
+  } = _ref;
+  return () => /*#__PURE__*/React.createElement(CalendarStoryWrapper, {
+    component: CalendarInput,
+    dir: "ltr",
+    timeZone: "Africa/Khartoum",
+    weekDayFormat: "short",
+    date: date,
+    locale: locale,
+    calendar: calendar
+  });
+};
+
+export const EthiopicWithAmharic = buildCalendar({
+  calendar: 'ethiopic',
+  locale: 'am-ET',
+  date: '2014-02-03' // 13 Oct 2021
+
+});
+export const EthiopicWithEnglish = buildCalendar({
+  calendar: 'ethiopic',
+  locale: 'en-ET',
+  date: '2014-02-03' // 13 Oct 2021
+
+});
+export const NepaliWithNepali = buildCalendar({
+  calendar: 'nepali',
+  locale: 'ne-NP',
+  date: '2078-06-27' // 13 Oct 2021
+
+});
+export const NepaliWithEnglish = buildCalendar({
+  calendar: 'nepali',
+  locale: 'en-NP',
+  date: '2078-06-27' // 13 Oct 2021
+
+});
+export const GregorianWithEnglish = buildCalendar({
+  calendar: 'gregorian',
+  locale: 'en-CA',
+  date: '2021-10-13'
+});
+export const GregorianWithArabic = buildCalendar({
+  calendar: 'gregorian',
+  locale: 'ar-SD',
+  date: '2021-10-13'
+});
+export const IslamicWithArabic = buildCalendar({
+  calendar: 'islamic-civil',
+  locale: 'ar-SD',
+  date: '2015-01-13'
+});
+export const WithAnyCalendar = args => {
+  return /*#__PURE__*/React.createElement(CalendarStoryWrapper, _extends({
+    calendarInput: true,
+    calendar: "islamic-civil",
+    locale: "en",
+    timeZone: "Africa/Khartoum"
+  }, args));
+};

package/build/es/stories/calendarStoryWrapper.js

@@ -0,0 +1,176 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import { constants } from '@dhis2/multi-calendar-dates';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { Calendar } from '../calendar/index.js';
+const {
+  calendars,
+  numberingSystems
+} = constants;
+export const CalendarStoryWrapper = props => {
+  const {
+    calendar,
+    locale,
+    timeZone,
+    dir,
+    component: Component,
+    date,
+    weekDayFormat
+  } = props;
+  const [selectedCalendar, setSelectedCalendar] = useState(calendar);
+  const [selectedNumberingSystem, setSelectedNumberingSystem] = useState();
+  const [selectedDirection, setSelectedDirection] = useState(dir);
+  const [selectedWeekFormat, setWeekDayFormat] = useState(weekDayFormat);
+  const [selectedLocale, setLocale] = useState(locale);
+  const [selectedDate, setSelectedDate] = useState();
+
+  const changeCalendar = _ref => {
+    let {
+      target: {
+        value
+      }
+    } = _ref;
+    setSelectedCalendar(value);
+  };
+
+  const changeNumberingSystem = _ref2 => {
+    let {
+      target: {
+        value
+      }
+    } = _ref2;
+
+    if (value === '-1') {
+      setSelectedNumberingSystem(null);
+    } else {
+      setSelectedNumberingSystem(value);
+    }
+  };
+
+  const changeDirection = _ref3 => {
+    let {
+      target: {
+        value
+      }
+    } = _ref3;
+    setSelectedDirection(value);
+  };
+
+  const changeWeekFormat = _ref4 => {
+    let {
+      target: {
+        value
+      }
+    } = _ref4;
+    setWeekDayFormat(value);
+  };
+
+  const onLocaleChanged = _ref5 => {
+    let {
+      target: {
+        value
+      }
+    } = _ref5;
+    setLocale(value);
+  };
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: '0.8em',
+      marginBottom: 20,
+      gap: 5,
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, "Options"), /*#__PURE__*/React.createElement("input", {
+    defaultValue: locale,
+    placeholder: "locale",
+    onBlur: onLocaleChanged
+  }), /*#__PURE__*/React.createElement("select", {
+    onChange: changeCalendar,
+    value: selectedCalendar
+  }, /*#__PURE__*/React.createElement("option", {
+    disabled: true,
+    key: calendar,
+    value: "-1"
+  }, "Select calendar"), calendars.map(calendar => {
+    return /*#__PURE__*/React.createElement("option", {
+      value: calendar,
+      key: calendar
+    }, calendar);
+  })), /*#__PURE__*/React.createElement("select", {
+    onChange: changeNumberingSystem,
+    value: selectedNumberingSystem
+  }, /*#__PURE__*/React.createElement("option", {
+    disabled: true,
+    key: calendar,
+    value: "-1"
+  }, "Select numbering system"), numberingSystems.map(system => {
+    return /*#__PURE__*/React.createElement("option", {
+      value: system,
+      key: system
+    }, system);
+  })), /*#__PURE__*/React.createElement("select", {
+    onChange: changeDirection,
+    value: selectedDirection
+  }, /*#__PURE__*/React.createElement("option", {
+    disabled: true,
+    value: "-1"
+  }, "Select direction"), /*#__PURE__*/React.createElement("option", {
+    value: "ltr"
+  }, "Left-To-Right"), /*#__PURE__*/React.createElement("option", {
+    value: "rtl"
+  }, "Right-To-Left")), /*#__PURE__*/React.createElement("select", {
+    onChange: changeWeekFormat,
+    value: selectedWeekFormat
+  }, /*#__PURE__*/React.createElement("option", {
+    disabled: true,
+    value: "-1"
+  }, "Select format"), /*#__PURE__*/React.createElement("option", {
+    value: "narrow"
+  }, "narrow"), /*#__PURE__*/React.createElement("option", {
+    value: "short"
+  }, "short"), /*#__PURE__*/React.createElement("option", {
+    value: "long"
+  }, "long"))), /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    calendar: selectedCalendar,
+    dir: selectedDirection,
+    locale: selectedLocale,
+    date: date,
+    onDateSelect: date => {
+      setSelectedDate(date);
+    },
+    timeZone: timeZone,
+    weekDayFormat: selectedWeekFormat,
+    numberingSystem: selectedNumberingSystem
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 10,
+      gap: 5,
+      fontSize: '12px',
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, selectedDate && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "calendar date: "), /*#__PURE__*/React.createElement("span", {
+    "data-test": "storybook-calendar-result"
+  }, selectedDate.calendarDateString)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "iso date: "), /*#__PURE__*/React.createElement("span", {
+    "data-test": "storybook-calendar-result-iso"
+  }, selectedDate.calendarDate.withCalendar('iso8601').toLocaleString('en-GB', {
+    dateStyle: 'long'
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
+};
+CalendarStoryWrapper.defaultProps = {
+  calendar: 'gregorian',
+  component: Calendar,
+  weekDayFormat: 'narrow'
+};
+CalendarStoryWrapper.propTypes = {
+  calendar: PropTypes.string.isRequired,
+  component: PropTypes.elementType.isRequired,
+  date: PropTypes.string,
+  dir: PropTypes.oneOf(['ltr', 'rtl']),
+  locale: PropTypes.string,
+  timeZone: PropTypes.string,
+  weekDayFormat: PropTypes.string
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+    "name": "@dhis2-ui/calendar",
+    "version": "8.8.0",
+    "description": "UI Calendar",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/dhis2/ui.git",
+        "directory": "components/calendar"
+    },
+    "homepage": "https://github.com/dhis2/ui#readme",
+    "license": "BSD-3-Clause",
+    "private": false,
+    "main": "./build/cjs/index.js",
+    "module": "./build/es/index.js",
+    "exports": {
+        "import": "./build/es/index.js",
+        "require": "./build/cjs/index.js"
+    },
+    "sideEffects": false,
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "build": "d2-app-scripts build",
+        "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
+    },
+    "peerDependencies": {
+        "react": "^16.8",
+        "react-dom": "^16.8",
+        "styled-jsx": "^4"
+    },
+    "dependencies": {
+        "@dhis2-ui/card": "8.8.0",
+        "@dhis2-ui/input": "8.8.0",
+        "@dhis2-ui/layer": "8.8.0",
+        "@dhis2-ui/popper": "8.8.0",
+        "@dhis2/multi-calendar-dates": "1.0.0-alpha.17",
+        "@dhis2/prop-types": "^3.1.2",
+        "@dhis2/ui-constants": "8.8.0",
+        "@dhis2/ui-icons": "8.8.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.7.2"
+    },
+    "files": [
+        "build"
+    ],
+    "devDependencies": {
+        "react": "16.13",
+        "react-dom": "16.13",
+        "styled-jsx": "^4.0.1"
+    }
+}