nodejs · ovflowd · Sep 24, 2023 · Sep 23, 2023 · Sep 23, 2023 · Sep 23, 2023
@@ -28,6 +28,7 @@ storybook-static
 # Vercel Files
 .vercel
 .turbo
+cache
 
 # ESlint Cache Files
 .eslintmdcache

@@ -1,5 +1,5 @@
 {
   "**/*.{mjs,ts,tsx,md,mdx}": ["eslint --fix", "prettier --check --write"],
-  "**/*.{css,sass,scss}": ["stylelint", "prettier --write"],
+  "**/*.css": ["stylelint --allow-empty-input", "prettier --write"],
   "**/*.{json,yml}": ["prettier --check --write"]
 }
@@ -7,5 +7,6 @@
   "trailingComma": "es5",
   "bracketSpacing": true,
   "bracketSameLine": false,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
@@ -1,19 +1,5 @@
 import { Open_Sans } from 'next/font/google';
 
-// These are the shared CSS classes between the Storybook Themes
-// Note: These are Tailwind Classes, and `font-open-sans` is the `open-sans`
-// font defined within the tailwind.config.ts config file
-export const COMMON_CLASSES = 'px-4 py-4 font-open-sans';
-
-// These are the theme-specific CSS classes for Storybook Themes
-// Note: These are Tailwind Classes and black/white are defined within
-// the tailwind.config.ts config file as theme colors
-export const THEME_CLASSES = {
-  dark: `${COMMON_CLASSES} bg-black text-white`,
-  light: `${COMMON_CLASSES} bg-white text-black`,
-  '': `${COMMON_CLASSES} bg-white text-black`,
-};
-
 // This defines "execution" modes that Chromatic will run on the each Storybook Story
 // This allows us to test each Story with different parameters
 // @see https://www.chromatic.com/blog/introducing-story-modes/
@@ -36,6 +22,13 @@ export const STORYBOOK_MODES = {
   },
 };
 
+// These are the supported Viewports for our Storybook Stories
+// It is also the different viewports that Chromatic will run the Visual Regression Tests
+export const STORYBOOK_SIZES = {
+  small: { name: 'Small', styles: { width: '414px', height: '896px' } },
+  large: { name: 'Large', styles: { width: '1024px', height: '768px' } },
+};
+
 // This configures the Next.js Font for Open Sans
 // We then export a variable and class name to be used
 // within Tailwind (tailwind.config.ts) and Storybook (preview.js)

@@ -9,17 +9,18 @@ const config: StorybookConfig = {
     '@storybook/addon-themes',
     '@storybook/addon-viewport',
   ],
-  framework: { name: '@storybook/nextjs', options: {} },
-  features: { storyStoreV7: true },
-  docs: { autodocs: 'tag' },
-  staticDirs: ['../public'],
   logLevel: 'error',
+  staticDirs: ['../public'],
+  features: { storyStoreV7: true },
   core: { disableTelemetry: true },
+  framework: { name: '@storybook/nextjs', options: {} },
   webpackFinal: async config => {
+    // This allows us to resolve node_modules and everything from the Application source
     config.resolve!.modules = [resolve(__dirname, '..'), 'node_modules'];
 
     config.resolve!.alias = {
       ...config.resolve!.alias,
+      // Allows us to use `@` imports with TypeScript
       '@': resolve(__dirname, '../'),
     };
 

@@ -0,0 +1,3 @@
+<body
+  class="bg-white font-open-sans text-black dark:bg-black dark:text-white"
+></body>
@@ -1,52 +1,34 @@
 import NextImage from 'next/image';
-import {
-  withThemeByDataAttribute,
-  withThemeByClassName,
-} from '@storybook/addon-themes';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import { SiteProvider } from '../providers/siteProvider';
 import { ThemeProvider } from '../providers/themeProvider';
 import { LocaleProvider } from '../providers/localeProvider';
-import { OPEN_SANS_FONT, STORYBOOK_MODES, THEME_CLASSES } from './constants';
+import { OPEN_SANS_FONT, STORYBOOK_MODES, STORYBOOK_SIZES } from './constants';
 import type { Preview, ReactRenderer } from '@storybook/react';
 
-import '../styles/new/index.scss';
-
-// The `openSans.variable` injects the name of the Font Family to the DOM Tree
-// The `font-open-sans` variable is the actual Tailwind Classname
-// that tells that the font-family for this Component tree should be "Open Sans"
-const getStoryClasses = (theme: string) =>
-  `${OPEN_SANS_FONT.variable} ${THEME_CLASSES[theme]}`;
+import '../styles/new/index.css';
 
 const preview: Preview = {
   parameters: {
-    viewport: {
-      viewports: {
-        small: { name: 'Small', styles: { width: '375px', height: '667px' } },
-        large: { name: 'Large', styles: { width: '1024px', height: '768px' } },
-      },
-    },
     nextjs: { router: { basePath: '' } },
     chromatic: { modes: STORYBOOK_MODES },
+    viewport: { defaultViewport: 'large', viewports: STORYBOOK_SIZES },
   },
   // These are extra Storybook Decorators applied to all stories
   // that introduce extra functionality such as Theme Switching
   // and all the App's Providers (Site, Theme, Locale)
   decorators: [
-    (Story, context) => {
-      console.log(context);
-
-      return (
-        <SiteProvider>
-          <LocaleProvider>
-            <ThemeProvider>
-              <div className={getStoryClasses(context.globals.theme)}>
-                <Story />
-              </div>
-            </ThemeProvider>
-          </LocaleProvider>
-        </SiteProvider>
-      );
-    },
+    Story => (
+      <SiteProvider>
+        <LocaleProvider>
+          <ThemeProvider>
+            <div className={`${OPEN_SANS_FONT.variable}`}>
+              <Story />
+            </div>
+          </ThemeProvider>
+        </LocaleProvider>
+      </SiteProvider>
+    ),
     withThemeByDataAttribute<ReactRenderer>({
       themes: {
         light: 'light',
@@ -62,7 +44,7 @@ const preview: Preview = {
 // for all the Next.js Images (next/image) Components
 Object.defineProperty(NextImage, 'default', {
   configurable: true,
-  value: props => <NextImage {...props} unoptimized />,
+  value: (props: any) => <NextImage {...props} unoptimized />,
 });
 
 export default preview;
@@ -1,24 +1,39 @@
+// These are all the custom `@` (at) rules that we use within our custom PostCSS plugins
+const CUSTOM_AT_RULES = [
+  // Tailwind-specific at-rules
+  'apply',
+  'layer',
+  'responsive',
+  'screen',
+  'tailwind',
+  'variants',
+  // PostCSS-specific at-rules
+  'define-mixin',
+  'mixin',
+];
+
 // Enforces certain selectors to be only in camelCase notation
-// such as class names, for example
-const onlyAllowCamelCaseRule = [
+// We use these for id selectors and classname selectors
+const ONLY_ALLOW_CAMEL_CASE_SELECTORS = [
   /^(?:[a-z]+(?:[A-Z][a-z]*)*)$/,
   { message: s => `Expected '${s}' to be in camelCase` },
 ];
 
 export default {
-  extends: ['stylelint-config-recommended-scss'],
+  extends: ['stylelint-config-standard'],
   plugins: ['stylelint-order', 'stylelint-selector-bem-pattern'],
   rules: {
+    // Enforces Element Class Names to be camelCase
+    'selector-class-pattern': ONLY_ALLOW_CAMEL_CASE_SELECTORS,
+    // Enforces Element IDs to be camelCase
+    'selector-id-pattern': ONLY_ALLOW_CAMEL_CASE_SELECTORS,
+    'at-rule-no-unknown': [true, { ignoreAtRules: CUSTOM_AT_RULES }],
+    // Enforces the order of the CSS properties to be in alphabetical order
     '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-class-pattern': onlyAllowCamelCaseRule,
-    'selector-id-pattern': onlyAllowCamelCaseRule,
-    'selector-pseudo-class-no-unknown': [
-      true,
-      { ignorePseudoClasses: ['global'] },
-    ],
-    'scss/at-rule-no-unknown': [true, { ignoreAtRules: ['tailwind', 'apply'] }],
+    // Disables the Level-4 Media Queries; Since they're more exotic and less known
+    'media-feature-range-notation': 'prefix',
+    // Adopts the import notation from `postcss-import`
+    'import-notation': 'string',
   },
 };
@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss",
+    "stylelint.vscode-stylelint",
+    "unifiedjs.vscode-mdx",
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig"
+  ]
+}
@@ -0,0 +1,7 @@
+{
+  "css.validate": false,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "javascript.updateImportsOnFileMove.enabled": "always",
+  "typescript.updateImportsOnFileMove.enabled": "always"
+}