feat: make chromatic easier to opt-out of, update deps

.storybook/decorators/chromatic.tsx → .storybook/chromatic/decorator.tsx

@@ -1,7 +1,10 @@
 import type {ReactRenderer} from '@storybook/react';
 import type {DecoratorFunction} from '@storybook/types';
 
-const Chromatic: DecoratorFunction<ReactRenderer> = (storyFn, {parameters}) => {
+const ChromaticDecorator: DecoratorFunction<ReactRenderer> = (
+  storyFn,
+  {parameters}
+) => {
   // sessionStorage carries over between snapshots so in order to
   // have consistent story snapshots, is necessary to clear the sessionStorage
   // before each snapshot is taken
@@ -29,4 +32,4 @@ const Chromatic: DecoratorFunction<ReactRenderer> = (storyFn, {parameters}) => {
   );
 };
 
-export default Chromatic;
+export default ChromaticDecorator;

.storybook/chromatic/index.ts

@@ -0,0 +1,37 @@
+import {addons} from '@storybook/preview-api';
+import isChromatic from 'chromatic/isChromatic';
+import {DARK_MODE_EVENT_NAME} from 'storybook-dark-mode';
+import WrapDecorator from '../decorators/WrapDecorator';
+import ChromaticDecorator from './decorator';
+
+// render dark mode in chromatic snapshots
+export const isChromaticSnapshot =
+  isChromatic() ||
+  (process.env.NODE_ENV === 'production' ?
+    [...(window?.location.ancestorOrigins || {length: 0})].some((origin) =>
+      origin.includes('www.chromatic.com')
+    )
+    // @ts-ignore
+  : false);
+
+if (!isChromaticSnapshot) {
+  // listen for dark mode toggle changes
+  const channel = addons.getChannel();
+  channel.on(DARK_MODE_EVENT_NAME, (isDark: boolean) => {
+    // eslint-disable-next-line unicorn/prevent-abbreviations
+    const docsStory = document.querySelector('.docs-story');
+
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+      docsStory?.classList.add('bg-grey-900');
+      docsStory?.classList.add('text-white');
+    } else {
+      document.documentElement.classList.remove('dark');
+      docsStory?.classList.remove('bg-grey-900');
+      docsStory?.classList.remove('text-white');
+    }
+  });
+}
+
+export const decorators =
+  isChromaticSnapshot ? [WrapDecorator, ChromaticDecorator] : [WrapDecorator];

.storybook/decorators/wrap.tsx → .storybook/decorators/WrapDecorator.tsx

@@ -1,9 +1,12 @@
 import type {ReactRenderer} from '@storybook/react';
 import type {DecoratorFunction} from '@storybook/types';
 
-const Wrap: DecoratorFunction<ReactRenderer> = (storyFn, {parameters}) =>
+const WrapDecorator: DecoratorFunction<ReactRenderer> = (
+  storyFn,
+  {parameters}
+) =>
   parameters.wrap ?
     <div className={parameters.wrap}>{storyFn()}</div>
   : storyFn();
 
-export default Wrap;
+export default WrapDecorator;

.storybook/preview.ts

@@ -1,11 +1,7 @@
 import {config} from '@fortawesome/fontawesome-svg-core';
-import {addons} from '@storybook/preview-api';
 import type {Preview} from '@storybook/react';
 import {themes} from '@storybook/theming';
-import isChromatic from 'chromatic/isChromatic';
-import {DARK_MODE_EVENT_NAME} from 'storybook-dark-mode';
-import Chromatic from './decorators/chromatic';
-import Wrap from './decorators/wrap';
+import {decorators} from './chromatic';
 import i18n from './i18next';
 import brandImage from './static/gaia-logo.png';
 import viewport from './viewport';
@@ -23,18 +19,8 @@ const BRAND = {
   brandUrl: 'https://gaia-react.github.io/docs/',
 };
 
-// render dark mode in chromatic snapshots
-const isChromaticSnapshot =
-  isChromatic() ||
-  (process.env.NODE_ENV === 'production' ?
-    [...(window?.location.ancestorOrigins || {length: 0})].some((origin) =>
-      origin.includes('www.chromatic.com')
-    )
-    // @ts-ignore
-  : false);
-
 const preview: Preview = {
-  decorators: isChromaticSnapshot ? [Wrap, Chromatic] : [Wrap],
+  decorators,
   initialGlobals: {
     locale: 'en',
     locales: {
@@ -71,23 +57,4 @@ const preview: Preview = {
   },
 };
 
-if (!isChromaticSnapshot) {
-  // listen for dark mode toggle changes
-  const channel = addons.getChannel();
-  channel.on(DARK_MODE_EVENT_NAME, (isDark: boolean) => {
-    // eslint-disable-next-line unicorn/prevent-abbreviations
-    const docsStory = document.querySelector('.docs-story');
-
-    if (isDark) {
-      document.documentElement.classList.add('dark');
-      docsStory?.classList.add('bg-grey-900');
-      docsStory?.classList.add('text-white');
-    } else {
-      document.documentElement.classList.remove('dark');
-      docsStory?.classList.remove('bg-grey-900');
-      docsStory?.classList.remove('text-white');
-    }
-  });
-}
-
 export default preview;

README.md

@@ -16,25 +16,25 @@ The Developer Experience (DX) is designed to be top-notch.
 - Unit, integration, visual regression, and end-to-end tests are set up.
 - While GAIA comes with recommended packages, conventions, and settings, you're free to change or remove them to suit your needs!
 
-GAIA has many great project features built-in:
+GAIA React has many great features built-in:
 
 - Built with [Remix](https://remix.run/), the best full-stack React framework for the modern web
-- Internationalization via [remix-i18next](https://github.com/sergiodxa/remix-i18next) with sample files already in place
 - [TailwindCSS](https://tailwindcss.com/) for styling, along with CSS Module support
-- [Zod](https://zod.dev/) for data validation and types
-- Robust [ESLint](https://eslint.org/) ruleset along with [Prettier](https://prettier.io/) and [Stylelint](https://stylelint.io/)
-- [Husky](https://typicode.github.io/husky/) and [Lint-Staged](https://github.com/lint-staged/lint-staged) for pre-commit checks
-- A complete test suite with [Vitest](https://vitest.dev), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/), and [PlayWright](https://playwright.dev/docs/intro)
+- [Zod](https://zod.dev/) for data validation
+- Robust ESLint ruleset along with [Prettier](https://prettier.io/) and [Stylelint](https://stylelint.io/)
+- [Husky](https://typicode.github.io/husky/) and [Lint-Staged](https://github.com/lint-staged/lint-staged) for pre-commit checks to ensure code quality
+- A complete testing suite with [Vitest](https://vitest.dev), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/), and [PlayWright](https://playwright.dev/docs/intro)
 - [Storybook](https://storybook.js.org/) and [Chromatic](https://chromatic.com/), with a [Remix Stub](https://remix.run/docs/en/main/utils/create-remix-stub) decorator included
 - [Mock Service Worker](https://mswjs.io/) with working handlers, and [msw/data](https://github.com/mswjs/data) for data mocking
-- [RVF](https://www.rvf-js.io/) for form management and validation with working examples
-- [FontAwesome](https://fontawesome.com/) icons
-- Working authentication example with [remix-auth](https://remix.run/resources/remix-auth)
+- [remix-auth](https://remix.run/resources/remix-auth) with a working authentication example
 - Toast notifications with [remix-toast](https://remix.run/resources/remix-toast) and [react-toastify](https://fkhadra.github.io/react-toastify/introduction)
+- Internationalization via [remix-i18next](https://github.com/sergiodxa/remix-i18next) with sample files already in place
+- [RVF](https://www.rvf-js.io/) for form management and validation
+- [FontAwesome](https://fontawesome.com/) icons
 - A convenient and flexible wrapper around fetch that simplifies API calls
 - Many example components, ready for you to use and modify
 - Useful utility functions and hooks
-- Light and dark mode support
+- Dark mode support
 - And much more!
 
 No matter what your skill level or experience, GAIA will make your life and your code better.
@@ -47,7 +47,7 @@ Read the [GAIA Documentation](https://gaia-react.github.io/docs/) for detailed i
 
 The GAIA Flash Framework revolutionized Flash website development and became the most popular Flash framework in the world (second only to Adobe Flex, which was focused on enterprise applications). It was used to build over 100,000 Flash sites and relied upon by every major digital agency worldwide.
 
-GAIA React is its spiritual successor. It has been reborn as a React template. Like its predecessor, it's designed to be the most comprehensive and easy-to-use React template available.
+GAIA React is its spiritual successor. It has been reborn as a React template. Like its predecessor, it's designed to be the most comprehensive and easy-to-use React template available, to build professional-grade frontend applications.
 
 ## Installation
 

app/entry.server.tsx

@@ -20,7 +20,7 @@ import i18n from './i18n';
 import i18next from './i18next.server';
 import 'dotenv/config';
 
-if (env.NODE_ENV === 'development' && env.MSW_ENABLED) {
+if (env.NODE_ENV !== 'production' && env.MSW_ENABLED) {
   startApiMocks();
 }
 

package.json

@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "2.0.2",
-    "@faker-js/faker": "9.0.2",
+    "@faker-js/faker": "9.0.3",
     "@mswjs/data": "0.16.2",
     "@playwright-testing-library/test": "4.5.0",
     "@playwright/test": "1.47.2",
@@ -121,10 +121,10 @@
     "eslint-plugin-perfectionist": "3.7.0",
     "eslint-plugin-playwright": "1.6.2",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "eslint-plugin-react": "7.36.1",
+    "eslint-plugin-react": "7.37.0",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-sonarjs": "2.0.2",
-    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-storybook": "0.9.0",
     "eslint-plugin-tailwindcss": "3.17.4",
     "eslint-plugin-testing-library": "6.3.0",
     "eslint-plugin-typescript-enum": "2.1.0",