@progressive-development/pd-calendar 0.1.20 → 0.2.1

package/.storybook/main.js

@@ -1,3 +1,13 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.{js,md,mdx}'],
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
 };
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/web-components').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/package.json

@@ -3,7 +3,7 @@
   "description": "progressive development calendar web component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.20",
+  "version": "0.2.1",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -13,8 +13,8 @@
     "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
-    "storybook": "npm run analyze -- --exclude dist && web-dev-server -c .storybook/server.mjs",
-    "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "keywords": [
     "pd",
@@ -30,29 +30,38 @@
     "week"
   ],
   "dependencies": {
-    "@progressive-development/pd-icon": "^0.1.18",
+    "@progressive-development/pd-icon": "^0.1.19",
     "@progressive-development/pd-shared-styles": "0.1.1",
-    "fecha": "^4.2.0",
-    "lit": "^2.2.0"
+    "fecha": "^4.2.3",
+    "lit": "^2.8.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "next",
-    "@web/dev-server": "^0.1.30",
-    "@web/dev-server-storybook": "next",
-    "@web/test-runner": "^0.13.27",
+    "@open-wc/testing": "^3.0.0-next.5",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/web-components": "^7.6.4",
+    "@storybook/web-components-vite": "^7.6.4",
+    "@web/dev-server": "^0.1.38",
+    "@web/test-runner": "^0.13.31",
     "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.4.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.5.1"
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.4"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {
     "extends": [
       "@open-wc",
-      "prettier"
+      "prettier",
+      "plugin:storybook/recommended"
     ]
   },
   "prettier": {

package/src/PdCalendar.js

@@ -30,6 +30,15 @@ const isToday = (someDate) => {
     someDate.getFullYear() === today.getFullYear()
 }
 
+const isSelected = (someDate1, someDate2) => {
+  if (!someDate1 || !someDate2) {
+    return false;
+  }  
+  return someDate1.getDate() === someDate2.getDate() &&
+    someDate1.getMonth() === someDate2.getMonth() &&
+    someDate1.getFullYear() === someDate2.getFullYear()
+}
+
 /**
  * PdCalendar displays montly view with information (selectable day cell).
  * 
@@ -66,6 +75,7 @@ export class PdCalendar extends LitElement {
     return {
       refDate: { type: Object },
       selectableDates: { type: Boolean},
+      showSelection: { type: Boolean},
       hideWeekend: { type: Boolean, reflect: true },
       prevMonthConstraint: { type: Number },
       nextMonthConstraint: { type: Number },
@@ -192,6 +202,7 @@ export class PdCalendar extends LitElement {
     this.numberClass = "top-left";  
     this.hideWeekend = false;
     this.selectableDates = false;
+    this.showSelection = false;
 
     this._currentMonthNavNr = 0;
   }  
@@ -278,6 +289,7 @@ export class PdCalendar extends LitElement {
               numberClass="${this.numberClass}"
               @select-date="${this._forwardEvent}"
               ?today="${this.selectableDates && isToday(tmpDate)}"
+              ?selected="${this.showSelection && isSelected(this.refDate, tmpDate)}"
             ></pd-calendar-cell>
           `);       
       }      

package/src/PdCalendarCell.js

@@ -21,6 +21,11 @@ class PdCalendarCell extends LitElement {
        */
       today: { type: Boolean },
 
+      /**
+       * If enabled, highlight the selected day
+       */
+      selected: { type: Boolean },
+
       /**
        * If enabled the cell gets an special class (e.g. green day).
        */
@@ -145,15 +150,22 @@ class PdCalendarCell extends LitElement {
         color: var(--pd-calendar-cell-day-info-free-col, var(--pd-default-bg-col));
       }
 
-      .today { 
+      .number-ring { 
         position: absolute;        
-        height: 30px;
-        width: 30px;
-        border: 1px solid blue;
+        height: 28px;
+        width: 28px;        
         border-radius: 50%;
         display: inline-block;
       }
 
+      .today {         
+        border: 2px solid blue;        
+      }
+
+      .selected {         
+        border: 2px solid red;
+      }
+
       /* ToDo: Dont work for calendars sized by custom properties. Needed to calculate from calendar size
         not from window size, this is a topic for container queries, which are not available right now... */
       @media (max-width: 800px) {
@@ -194,7 +206,11 @@ class PdCalendarCell extends LitElement {
         : ''}
 
       ${this.today
-        ? html`<div class="today"></div>`
+        ? html`<div class="number-ring today"></div>`
+        : ''}
+
+      ${this.selected
+        ? html`<div class="number-ring selected"></div>`
         : ''}
 
       <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>

package/{stories → src/stories}/cell.stories.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import '../src/PdCalendarCell.js';
+import '../PdCalendarCell.js';
 
 export default {
   title: 'PdCalendar/CalendarCell',

package/{stories → src/stories}/index.stories.js

@@ -1,5 +1,7 @@
 import { html } from 'lit';
-import '../pd-calendar.js';
+
+import '../../pd-calendar.js';
+
 import { format } from 'fecha';
 
 export default {
@@ -18,7 +20,7 @@ function CalendarTemplate({ hideWeekend, refDate, data, prevMonthConstraint, nex
     </pd-calendar> `;  
 }
 
-function CalendarSmallTemplate({ hideWeekend, width, cellHeight, prevMonthConstraint, nextMonthConstraint}) {  
+function CalendarSmallTemplate({ refDate, hideWeekend, width, cellHeight, prevMonthConstraint, nextMonthConstraint}) {  
   return html`
     <style>
       .calendar-small {
@@ -37,7 +39,7 @@ function CalendarSmallTemplate({ hideWeekend, width, cellHeight, prevMonthConstr
         
       }
     </style>
-    <pd-calendar selectableDates ?hideWeekend="${hideWeekend}" class="calendar-small" prevMonthConstraint="${prevMonthConstraint}" 
+    <pd-calendar .refDate="${refDate}" selectableDates showSelection ?hideWeekend="${hideWeekend}" class="calendar-small" prevMonthConstraint="${prevMonthConstraint}" 
       nextMonthConstraint="${nextMonthConstraint}" numberClass="center"
     >      
     </pd-calendar>`;  
@@ -96,6 +98,17 @@ BasicSmall.args = {
   nextMonthConstraint: -1,
 };
 
+const currentDate = new Date();
+export const BasicSmallWithRefDate = CalendarSmallTemplate.bind({});
+BasicSmallWithRefDate.args = {  
+  refDate: new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 10),
+  hideWeekend: false,
+  width: '220px',
+  cellHeight: '30px',
+  prevMonthConstraint: -1,
+  nextMonthConstraint: -1,
+};
+
 export const BasicSmallWithoutWeekend = CalendarSmallTemplate.bind({});
 BasicSmallWithoutWeekend.args = {  
   hideWeekend: true,

package/.storybook/preview-head.html

@@ -1,2 +0,0 @@
-<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Oswald:wght@700&display=swap" rel="stylesheet">

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});