@progressive-development/pd-calendar 0.1.19 → 0.2.0

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.19",
+  "version": "0.2.0",
   "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

@@ -169,10 +169,17 @@ export class PdCalendar extends LitElement {
         font-weight: bold;
       }
 
+      .icon-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+      }
+
       .arrow {
         cursor: pointer;
         --pd-icon-size: var(--pd-calendar-title-icon-size, 1.2em);
-        --pd-icon-bg-col-hover: lightgrey;
+        --pd-icon-bg-col-hover: lightgrey;        
       }
     `];
   }
@@ -282,7 +289,7 @@ export class PdCalendar extends LitElement {
           
           <div class="header-main">            
 
-            <div>
+            <div class="icon-container">
               <pd-icon
                 @click="${this._previousMonth}"
                 class="arrow"

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 {

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],
-});