feat(stylelint,storybook): fixed styleling misconfig and fixed storybooks (#5281)

Author: ovflowd

.storybook/constants.ts renamed to .storybook/constants.js

@@ -32,7 +32,4 @@ const nodeVersionData = {
   ],
 };
 
-export const pageProps = {
-  i18nData,
-  nodeVersionData,
-};
+export const pageProps = { i18nData, nodeVersionData };

.storybook/main.js renamed to .storybook/main.ts

@@ -1,5 +1,6 @@
-/** @type { import('@storybook/nextjs').StorybookConfig } */
-const config = {
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
   stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
@@ -15,4 +16,5 @@ const config = {
   },
   staticDirs: ['../public'],
 };
+
 export default config;

.storybook/preview.js renamed to .storybook/preview.tsx

@@ -1,11 +1,12 @@
-import * as NextImage from 'next/image';
+import type { Preview } from '@storybook/react';
+import NextImage from 'next/image';
 import App from '../pages/_app.mdx';
 import { pageProps } from './constants';
+
 import '../styles/styles.scss';
 import '../styles/tokens.scss';
 
-/** @type { import('@storybook/react').Preview } */
-const preview = {
+const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
@@ -26,11 +27,9 @@ export const decorators = [
   Story => <App Component={Story} pageProps={pageProps} />,
 ];
 
-const OriginalNextImage = NextImage.default;
-
 Object.defineProperty(NextImage, 'default', {
   configurable: true,
-  value: props => <OriginalNextImage {...props} unoptimized />,
+  value: props => <NextImage {...props} unoptimized />,
 });
 
 export default preview;

.stylelintrc

@@ -5,6 +5,7 @@
     "order/properties-alphabetical-order": true,
     "no-descending-specificity": null,
     "scss/at-extend-no-missing-placeholder": null,
+    "scss/at-import-no-partial-leading-underscore": null,
     "selector-pseudo-class-no-unknown": [
       true,
       { "ignorePseudoClasses": ["global"] }

components/Common/Banner/Banner.stories.tsx

@@ -1,12 +1,12 @@
 import type { StoryObj } from '@storybook/react';
-import Banner from './';
+import Banner from './index';
 
 type Story = StoryObj<typeof Banner>;
 
 const addDaysToDate = (numDays: number, date: Date) => {
   const newDate = new Date(date);
   newDate.setDate(date.getDate() + numDays);
-  return date;
+  return newDate;
 };
 
 // Create mock start and end dates as Banner Component renders
@@ -36,7 +36,4 @@ export const WithHTML: Story = {
   },
 };
 
-export default {
-  title: 'Banner',
-  component: Banner,
-};
+export default { component: Banner };

components/Common/Banner/index.module.scss

@@ -33,23 +33,23 @@
 
     &.bannerBtn {
       background: var(--purple5);
-      padding: 0 var(--space-16);
       border: 1px solid transparent;
       border-radius: 5.6rem;
       color: var(--color-fill-top-nav);
       font-family: var(--sans);
+      font-size: 1rem;
       font-style: normal;
       font-weight: var(--font-weight-semibold);
       line-height: var(--line-height-subheading);
       margin-right: var(--space-32);
+      padding: 0 var(--space-16);
       position: relative;
       text-decoration: none;
       white-space: nowrap;
-      font-size: 1rem;
 
       &:hover {
-        cursor: pointer;
         background-color: $node-green !important;
+        cursor: pointer;
       }
     }
   }
@@ -66,8 +66,8 @@
 
     a {
       &:hover {
-        text-decoration: underline;
         background-color: transparent !important;
+        text-decoration: underline;
       }
     }
   }