Feat/storybook

.config/documentation.cjs

@@ -2,3 +2,8 @@ module.exports.DOCS_WORKSPACE_NAME = '@sabinmarcu/docs';
 module.exports.DOCS_WORKSPACE_EXCLUDES = [
   '@sabinmarcu/omnicli',
 ];
+module.exports.STORYBOOK_WORKSPACE_NAME = '@sabinmarcu/storybook';
+module.exports.STORYBOOK_WORKSPACE_PATHS = [
+  'apps',
+  'workspaces/components'
+];

.config/manifest.cjs

@@ -54,6 +54,7 @@ module.exports.FIELD_TSCMONO_CONFIG_MAP = {
   'apps/droprate': 'viteApp',
   'apps/team-rotation': 'viteApp',
   'apps/timer40k': 'nextApp',
+  'apps/storybook': 'storybook',
 };
 module.exports.REQUIRED_WORKSPACE_IGNORE_LIST = new Set([
   'root',

.gitignore

@@ -160,3 +160,5 @@ cjs
 # MacOS Stuff
 .DS_Store
 
+
+*storybook.log

.tscmonorc.yml

@@ -87,4 +87,17 @@ presets:
       strict: true
       noUnusedLocals: true
       noUnusedParameters: true
-      noFallthroughCasesInSwitch: true
+      noFallthroughCasesInSwitch: true
+  storybook:
+    compilerOptions:
+      noEmit: true
+      baseUrl: "."
+      rootDir: "src"
+      tsBuildInfoFile: "./node_modules/.tmp/tsconfig.app.tsbuildInfo"
+    include:
+      - "src/**/*"
+    # TODO: Remove these once the tsconfig/tsconfig.build refactor is done
+    exclude:
+      - "src/**/*.spec.*"
+      - "src/**/__fixtures__/**/*"
+      - "src/**/__mocks__/**/*"

.yarn/versions/a9ee562b.yml

@@ -0,0 +1,9 @@
+releases:
+  "@sabinmarcu/eslint-config": patch
+  "@sabinmarcu/moving-mesh-background": patch
+
+declined:
+  - "@sabinmarcu/docs"
+  - "@sabinmarcu/droprate"
+  - "@sabinmarcu/team-rotation"
+  - "@sabinmarcu/timer40k"

apps/storybook/README.md

@@ -0,0 +1 @@
+# @sabinmarcu/storybook

apps/storybook/moon.yml

@@ -0,0 +1,26 @@
+project:
+  name: storybook
+  description: Storybook for all components in this repo
+  channel: "#storybook"
+  maintainers:
+    - Sabin Marcu
+  owner: Sabin Marcu
+language: typescript
+type: unknown
+
+tasks:
+  start:
+    command: "yarn start"
+    options:
+      cache: false
+  build:
+    command: "yarn build"
+    options:
+      cache: false
+      runInCI: false
+    deps:
+      - "^:build"
+
+workspace:
+  inheritedTasks:
+    include: []

apps/storybook/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@sabinmarcu/storybook",
+  "packageManager": "[email protected]",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@sabinmarcu/types": "workspace:*",
+    "@sabinmarcu/utils-test": "workspace:*",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@types/prop-types": "^15",
+    "prop-types": "^15.8.1",
+    "storybook": "^8.2.9"
+  },
+  "peerDependencies": {
+    "@sabinmarcu/docs": "workspace:*",
+    "@sabinmarcu/droprate": "workspace:*",
+    "@sabinmarcu/moving-mesh-background": "workspace:*",
+    "@sabinmarcu/mui-material-theme": "workspace:*",
+    "@sabinmarcu/team-rotation": "workspace:*",
+    "@sabinmarcu/timer40k": "workspace:*"
+  },
+  "scripts": {
+    "start": "storybook dev -c src -p 6006",
+    "build": "storybook build -c src"
+  },
+  "tscmono": {
+    "preset": "storybook"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./src/*": {
+      "import": "./src/*",
+      "default": "./src/*"
+    },
+    "./*": {
+      "import": "./dist/*.js",
+      "default": "./dist/*.js",
+      "types": "./dist/*.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "typeVersions": {
+    "*": {
+      "*": [
+        "./dist/*"
+      ]
+    }
+  },
+  "type": "module"
+}

apps/storybook/src/main.ts

@@ -0,0 +1,54 @@
+import path from 'node:path';
+import { createRequire } from 'node:module';
+import packageJson from '../package.json' with { type: 'json' };
+
+const localRequire = createRequire(import.meta.url);
+const dependencyDetectionPath = 'package.json'
+const dependencies = Object.entries(packageJson.peerDependencies ?? {})
+  .filter(([,resolution]) => resolution.includes('workspace:'))
+  .map(([name]) => localRequire.resolve(path.join(name, dependencyDetectionPath)))
+  .map((resolvedPath) => resolvedPath.replace(dependencyDetectionPath, ''));
+
+const storiesLocations = ['src/']
+const storiesPatterns = [
+  '**/*.mdx',
+  '**/*.stories.@(ts|tsx|cts|mts)'
+]
+
+const stories: string[] = [];
+for (const dependency of dependencies) {
+  for (const location of storiesLocations) {
+    for (const pattern of storiesPatterns) {
+      stories.push([
+        dependency,
+        location,
+        pattern,
+      ].join(""))
+    }
+  }
+}
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string) {
+  return path.dirname(localRequire.resolve(path.join(value, 'package.json')));
+}
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories,
+  addons: [
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+};
+export default config;

apps/storybook/src/preview-body.html

@@ -0,0 +1,8 @@
+<style>
+  html, body, #storybook-root {
+    width: 100vw !important;
+    height: 100vh !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+</style>

apps/storybook/src/preview.ts

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

apps/team-rotation/src/components/Background.tsx

@@ -14,4 +14,4 @@ export function Background({ children }: PropsWithChildren) {
       {children}
     </AppWrapper>
   );
-}
+}

apps/timer40k/app/Display.tsx

@@ -13,7 +13,7 @@ export type DisplayProperties = {
   earlyReleaseImage: Partial<ComponentProps<typeof Image>>,
   upcomingImage: Partial<ComponentProps<typeof Image>>,
   releaseDate: string,
-  earlyReleaseDate: string,
+  earlyReleaseDate?: string,
 };
 
 const getNumber = (input: number) => Number.parseInt(`${Math.abs(input)}`, 10);

apps/timer40k/app/page.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line unicorn/filename-case
 import { Display } from './Display';
 
 import { env as environment } from './env';
@@ -22,7 +23,7 @@ export default function Home() {
       },
       releaseDate: environment.TIMER_40K_RELEASE_DATE,
       earlyReleaseDate: environment.TIMER_40K_EARLY_RELEASE_DATE,
-    } as any}
+    }}
     />
   );
 }

eslint.config.js

@@ -1,5 +1,4 @@
 import config from '@sabinmarcu/eslint-config';
-import packageJson from './package.json' assert { type: 'json' };
 
 const eslintConfig = [
   ...config,
@@ -52,4 +51,4 @@ const eslintConfig = [
   },
 ];
 
-export default eslintConfig;
+export default eslintConfig;

package.json

@@ -23,6 +23,7 @@
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
     "glob": "^8.0.3",
     "glob-tester-cli": "^0.1.0",
     "husky": "^8.0.2",

workspaces/components/moving-mesh-background/src/Background.stories.tsx

@@ -0,0 +1,64 @@
+import type {
+  Meta,
+  StoryObj,
+} from '@storybook/react';
+import styled from '@emotion/styled';
+
+import type { ComponentProps } from 'react';
+import { Background } from './Background.js';
+
+const range = (min: number, max: number, step?: number) => ({
+  control: {
+    type: 'range',
+    min,
+    max,
+    step,
+  },
+} as const);
+
+const meta: Meta<typeof Background> = {
+  component: Background,
+  argTypes: {
+    color: { control: 'color' },
+    every: range(50, 200),
+    size: range(1, 10, 0.5),
+    speed: range(0.5, 10, 0.1),
+    variance: range(20, 200),
+    tolerance: range(0, 100),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Background>;
+
+const ShowcaseWrapper = styled.div({
+  width: '100%',
+  height: '100%',
+  overflow: 'hidden',
+});
+
+const StyledBackground = styled(Background)({
+  width: '100%',
+  height: '100%',
+});
+
+function Wrapper(properties: ComponentProps<typeof Background>) {
+  return (
+    <ShowcaseWrapper>
+      <StyledBackground {...properties} />
+    </ShowcaseWrapper>
+  );
+}
+export const BaseProperties: Story = {
+  args: {
+    color: '#c40808',
+    every: 150,
+    size: 4,
+    variance: 50,
+    speed: 1.5,
+    tolerance: 50,
+  },
+  render: Wrapper,
+
+};

workspaces/components/moving-mesh-background/src/Background.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react';
 import { usePrefersReducedMotion } from '@sabinmarcu/use-prefers-reduced-motion';
 import { useDuplicateRef } from '@sabinmarcu/use-duplicate-ref';
+import type { Simplify } from '@sabinmarcu/types';
 import { debounce } from './debounce.js';
 import type {
   CanvasProperties,
@@ -21,10 +22,11 @@ import { makeRenderer } from './renderer.js';
 
 const wnd = typeof window === 'undefined' ? undefined : window;
 
-export interface BackgroundProperties extends
-  Partial<RendererProperties>,
-  Partial<CanvasProperties>,
-  HTMLAttributes<HTMLCanvasElement> {}
+export type BackgroundProperties = Simplify<
+  & Partial<RendererProperties>
+  & Partial<CanvasProperties>
+  & HTMLAttributes<HTMLCanvasElement>
+>;
 
 export const Background = forwardRef<HTMLCanvasElement, BackgroundProperties>(
   (

workspaces/personal/eslint-config/src/configs/storybook.ts

@@ -23,6 +23,7 @@ const config = storybookPlugin
       rules: {
         ...storybookPlugin.configs.recommended.rules,
         'no-underscore-dangle': 'off',
+        'import/no-extraneous-dependencies': 'off',
       },
     }),
     makeConfigFactory(