Rework datepicker

.github/workflows/push.yml

@@ -18,10 +18,10 @@ jobs:
       - uses: actions/checkout@v2
       - name: Prepare repository
         run: git fetch --unshallow --tags
-      - name: Use Node.js 12.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 18.x
       - name: Cache node modules
         uses: actions/cache@v1
         with:
@@ -35,6 +35,6 @@ jobs:
           #👇 npm token, see https://storybook.js.org/tutorials/design-systems-for-developers/react/en/distribute/ to obtain it
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          npm ci
-          npm run build
-          npm run release
+          yarn --frozen-lockfile
+          yarn run build
+          yarn run release

.github/workflows/storybook.yml

@@ -25,10 +25,10 @@ jobs:
       - uses: actions/checkout@v2
       - name: Prepare repository
         run: git fetch --unshallow --tags
-      - name: Use Node.js 12.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: "14"
+          node-version: "18"
       - name: Cache npm cache
         id: cache-npm
         uses: actions/cache@v2
@@ -42,5 +42,5 @@ jobs:
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          npm ci
+          yarn --frozen-lockfile
           npx chromatic --project-token  ${{ secrets.CHROMATIC_TOKEN }} --exit-zero-on-changes --ci

.storybook/main.js

@@ -1,9 +1,19 @@
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.tsx"],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/preset-create-react-app",
-    "storybook-addon-designs",
+    "@storybook/addon-mdx-gfm",
   ],
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
 };

.storybook/preview.js

@@ -1,27 +1,26 @@
 import React from "react";
 
-import GlobalStyle from "../src/shared/globalStyle";
 import { ThemeProvider } from "styled-components";
+import GlobalStyle from "../src/shared/globalStyle";
 import { aqBootstrapTheme } from "../src/stories/theme/defaultTheme";
 
 // Global decorator to apply the styles to all stories
 export const decorators = [
-  (Story) => (
+  (StoryFn) => (
     <div style={{ padding: "10px" }}>
       <div
         style={{ overflow: "hidden", background: "#fff", minHeight: "100vh" }}
       >
         <ThemeProvider theme={aqBootstrapTheme}>
           <GlobalStyle />
-          <Story />
+          <StoryFn />
         </ThemeProvider>
       </div>
     </div>
   ),
 ];
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   layout: "fullscreen",
   controls: {
     matchers: {

generate-story.sh

@@ -36,7 +36,7 @@ EOF
 }
 generate_stories() {
 	cat << EOF
-import { Story, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
 import { ${STORY_NAME}Props } from "./_types";
 import { ${STORY_NAME} } from "./${STORY_NAME}";
 
@@ -45,7 +45,7 @@ export default {
   component: ${STORY_NAME},
 } as Meta;
 
-const Template: Story<${STORY_NAME}Props> = (args) => <${STORY_NAME} {...args} />;
+const Template: StoryFn<${STORY_NAME}Props> = (args) => <${STORY_NAME} {...args} />;
 
 export const ${STORY_NAME}Base = Template.bind({});
 ${STORY_NAME}Base.args = {};