preview.js 937 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. // @ts-check
  2. import '../src/pages/globals.css';
  3. import * as NextImage from 'next/image';
  4. const BREAKPOINTS_INT = {
  5. xs: 375,
  6. sm: 600,
  7. md: 900,
  8. lg: 1200,
  9. xl: 1536,
  10. };
  11. const customViewports = Object.fromEntries(
  12. Object.entries(BREAKPOINTS_INT).map(([key, val], idx) => {
  13. console.log(val);
  14. return [
  15. key,
  16. {
  17. name: key,
  18. styles: {
  19. width: `${val}px`,
  20. height: `${(idx + 5) * 10}vh`,
  21. },
  22. },
  23. ];
  24. })
  25. );
  26. // Allow Storybook to handle Next's <Image> component
  27. const OriginalNextImage = NextImage.default;
  28. Object.defineProperty(NextImage, 'default', {
  29. configurable: true,
  30. value: (props) => <OriginalNextImage {...props} unoptimized />,
  31. });
  32. export const parameters = {
  33. actions: { argTypesRegex: '^on[A-Z].*' },
  34. controls: {
  35. matchers: {
  36. color: /(background|color)$/i,
  37. date: /Date$/,
  38. },
  39. },
  40. viewport: { viewports: customViewports },
  41. }