feat(storybook-host): Create storybook lib and add stories for Long Press Hook

Author: minwork

libs/storybook-host/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/storybook-host/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "storybook-static"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/storybook-host/.storybook/decorators/Content.decorator.tsx

@@ -0,0 +1,18 @@
+import { Stack } from '@mui/material';
+import type { ComponentType } from 'react';
+
+export const ContentDecorator = (Story: ComponentType, context: object) => {
+  return (
+    <Stack
+      width="100vw"
+      height="100vh"
+      alignItems="center"
+      justifyContent="center"
+      sx={{
+        perspective: 1000,
+      }}
+    >
+      <Story {...context} />
+    </Stack>
+  );
+};

libs/storybook-host/.storybook/decorators/SnackbarDecorator.tsx

@@ -0,0 +1,10 @@
+import type { ComponentType, FC } from 'react';
+import { SnackbarProvider } from 'notistack';
+
+export const SnackbarDecorator = (Story: ComponentType, context: object) => {
+  return (
+    <SnackbarProvider maxSnack={10} autoHideDuration={3000}>
+      <Story {...context} />
+    </SnackbarProvider>
+  );
+};

libs/storybook-host/.storybook/decorators/Theme.decorator.tsx

@@ -0,0 +1,12 @@
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import type { ComponentType } from 'react';
+import { theme } from '../../src/lib/theme';
+
+export const ThemeDecorator = (Story: ComponentType, context: object) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Story {...context} />
+    </ThemeProvider>
+  );
+};

libs/storybook-host/.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { mergeConfig } from 'vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  },
+
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    }),
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

libs/storybook-host/.storybook/preview.ts

@@ -0,0 +1,24 @@
+import type { Preview } from '@storybook/react';
+import { ContentDecorator } from './decorators/Content.decorator';
+import { ThemeDecorator } from './decorators/Theme.decorator';
+import { SnackbarDecorator } from './decorators/SnackbarDecorator';
+
+const preview: Preview = {
+  decorators: [ThemeDecorator, ContentDecorator, SnackbarDecorator],
+  globals: {
+    backgrounds: '#333',
+  },
+  parameters: {
+    layout: 'fullscreen',
+    controls: {
+      expanded: true,
+      sort: 'requiredFirst',
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

libs/storybook-host/README.md

@@ -0,0 +1,7 @@
+# storybook-host
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test storybook-host` to execute the unit tests via [Jest](https://jestjs.io).

libs/storybook-host/project.json

@@ -0,0 +1,56 @@
+{
+  "name": "storybook-host",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/storybook-host/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/storybook-host/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/storybook-host",
+        "configDir": "libs/storybook-host/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c libs/storybook-host/.storybook --url=http://localhost:4400"
+      }
+    },
+    "static-storybook": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "storybook-host:build-storybook",
+        "staticFilePath": "dist/storybook/storybook-host",
+        "spa": true
+      },
+      "configurations": {
+        "ci": {
+          "buildTarget": "storybook-host:build-storybook:ci"
+        }
+      }
+    }
+  }
+}

libs/storybook-host/src/lib/long-press/LongPressButton.stories.tsx

@@ -0,0 +1,85 @@
+import type { StoryObj, StoryFn, Meta } from '@storybook/react';
+import { LongPressButton } from './LongPressButton';
+import { LongPressEventType } from 'use-long-press';
+
+const meta: Meta<typeof LongPressButton> = { component: LongPressButton };
+export default meta;
+
+type Story = StoryObj<typeof LongPressButton>;
+type StoryComponent = StoryFn<typeof LongPressButton>;
+
+export const Default: Story = {
+  argTypes: {
+    filterEvents: {
+      control: false,
+      table: {
+        disable: true,
+      },
+    },
+    context: {
+      control: 'object',
+    },
+    cancelOnMovement: {
+      control: 'boolean',
+    },
+    detect: {
+      options: [LongPressEventType.Mouse, LongPressEventType.Touch, LongPressEventType.Pointer],
+      control: 'radio',
+    },
+  },
+  args: {
+    threshold: 1000,
+  },
+};
+
+export const CancelOnMovement: Story = {
+  ...Default,
+  argTypes: {
+    ...Default.argTypes,
+    cancelOnMovement: {
+      control: {
+        type: 'number',
+      },
+    },
+  },
+  args: {
+    ...Default.args,
+    cancelOnMovement: 25,
+  },
+};
+
+export const NoCancelOutsideElement: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    cancelOutsideElement: false,
+  },
+};
+
+export const FilterRightClick: Story = {
+  ...Default,
+  argTypes: {
+    ...Default.argTypes,
+    filterEvents: {
+      control: false,
+    },
+  },
+  args: {
+    ...Default.args,
+    filterEvents(event) {
+      // Filter right clicks
+      return !(
+        event.nativeEvent instanceof MouseEvent &&
+        (event.nativeEvent.which === 3 || event.nativeEvent.button === 2 || event.ctrlKey || event.metaKey)
+      );
+    },
+  },
+};
+
+export const WithContext: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    context: 'Example context',
+  },
+};