feat: ChangelogModal Component (#6126)

Co-authored-by: Augustin Mauroy <[email protected]> Co-authored-by: Caner Akdas <[email protected]> Co-authored-by: Augustin Mauroy <[email protected]> Co-authored-by: Claudio W <[email protected]> Co-authored-by: Claudio Wunder <[email protected]>
nodejs · Nov 25, 2023 · 23202f6 · 23202f6
1 parent 84e95c3
commit 23202f6
Show file tree

Hide file tree

Showing 27 changed files with 573 additions and 37 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,5 +1,18 @@
+import classNames from 'classnames';
 import type { StorybookConfig } from '@storybook/nextjs';
 
+const rootClasses = classNames(
+  // note: this is hard-coded sadly as next/font can only be loaded within next.js context
+  '__variable_open-sans-normal',
+  // note: this is hard-coded sadly as next/font can only be loaded within next.js context
+  '__variable_ibm-plex-mono-normal-600',
+  'font-open-sans',
+  'bg-white',
+  'text-neutral-950',
+  'dark:bg-neutral-950',
+  'dark:text-white'
+);
+
 const config: StorybookConfig = {
   stories: ['../components/**/*.stories.tsx'],
   addons: [
@@ -16,7 +29,7 @@ const config: StorybookConfig = {
     // on Storybook we don't use `next-theme` as we want to simulate themes
     '<style>:root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; }</style>' +
     // This adds the base styling for dark/light themes within Storybook. This is a Storybook-only style
-    '<body class="bg-white text-neutral-950 dark:bg-neutral-950 dark:text-white"></body>',
+    `<body class="${rootClasses}"></body>`,
   core: { disableTelemetry: true, disableWhatsNewNotifications: true },
   framework: { name: '@storybook/nextjs', options: {} },
   webpack: async config => ({ ...config, performance: { hints: false } }),

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,50 +1,30 @@
-import classNames from 'classnames';
 import { NextIntlClientProvider } from 'next-intl';
 
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import { NotificationProvider } from '@/providers/notificationProvider';
-import {
-  OPEN_SANS_FONT,
-  IBM_PLEX_MONO_FONT,
-  STORYBOOK_MODES,
-  STORYBOOK_SIZES,
-} from '@/.storybook/constants';
+import { STORYBOOK_MODES, STORYBOOK_SIZES } from '@/.storybook/constants';
 import type { Preview, ReactRenderer } from '@storybook/react';
 
 import englishLocale from '@/i18n/locales/en.json';
 
 import '../styles/new/index.css';
 
-const rootClasses = classNames(
-  OPEN_SANS_FONT.variable,
-  IBM_PLEX_MONO_FONT.variable,
-  'font-open-sans'
-);
-
 const preview: Preview = {
   parameters: {
     nextjs: { router: { basePath: '' }, appDirectory: true },
     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 => (
       <NextIntlClientProvider locale="en" messages={englishLocale}>
         <NotificationProvider viewportClassName="absolute top-0 left-0 list-none">
-          <div className={rootClasses}>
-            <Story />
-          </div>
+          <Story />
         </NotificationProvider>
       </NextIntlClientProvider>
     ),
     withThemeByDataAttribute<ReactRenderer>({
-      themes: {
-        light: '',
-        dark: 'dark',
-      },
+      themes: { light: '', dark: 'dark' },
       defaultTheme: 'light',
       attributeName: 'data-theme',
     }),

diff --git a/components/Common/AvatarGroup/index.tsx b/components/Common/AvatarGroup/index.tsx
@@ -11,9 +11,14 @@ import styles from './index.module.css';
 type AvatarGroupProps = {
   avatars: ComponentProps<typeof Avatar>[];
   limit?: number;
+  isExpandable?: boolean;
 };
 
-const AvatarGroup: FC<AvatarGroupProps> = ({ avatars, limit = 10 }) => {
+const AvatarGroup: FC<AvatarGroupProps> = ({
+  avatars,
+  limit = 10,
+  isExpandable = true,
+}) => {
   const [showMore, setShowMore] = useState(false);
 
   const renderAvatars = useMemo(
@@ -33,7 +38,7 @@ const AvatarGroup: FC<AvatarGroupProps> = ({ avatars, limit = 10 }) => {
 
       {avatars.length > limit && (
         <span
-          onClick={() => setShowMore(!showMore)}
+          onClick={isExpandable ? () => setShowMore(prev => !prev) : undefined}
           className={classNames(avatarstyles.avatarRoot, 'cursor-pointer')}
         >
           <span className={avatarstyles.avatar}>

diff --git a/components/Downloads/ChangelogModal/index.module.css b/components/Downloads/ChangelogModal/index.module.css
@@ -0,0 +1,108 @@
+.overlay {
+  @apply fixed
+    inset-0
+    flex
+    justify-center
+    bg-white
+    bg-opacity-90
+    backdrop-blur-lg
+    dark:bg-neutral-950
+    dark:bg-opacity-80;
+
+  .content {
+    @apply relative
+      mx-4
+      my-4
+      inline-flex
+      w-full
+      flex-col
+      overflow-scroll
+      rounded
+      border
+      border-neutral-200
+      bg-white
+      p-8
+      focus:outline-none
+      dark:bg-neutral-950
+      sm:mt-20
+      sm:p-12
+      lg:w-2/3
+      xl:w-1/2;
+  }
+
+  .close {
+    @apply absolute
+      right-3
+      top-3
+      block
+      h-6
+      w-6
+      cursor-pointer
+      sm:hidden;
+  }
+
+  .title {
+    @apply mb-2
+      text-3xl
+      font-semibold
+      text-neutral-900
+      dark:text-white;
+  }
+
+  .description {
+    @apply mb-4
+      text-lg
+      font-regular
+      text-neutral-800
+      dark:text-neutral-200;
+  }
+
+  .authors {
+    @apply mb-8
+      flex
+      flex-wrap
+      items-center
+      gap-4;
+
+    a {
+      @apply flex
+        items-center
+        gap-1
+        text-xs
+        text-neutral-600
+        underline
+        visited:text-neutral-600;
+    }
+
+    svg {
+      @apply h-3
+        w-3
+        text-neutral-600;
+    }
+  }
+
+  .wrapper {
+    @apply flex
+      flex-col
+      gap-4;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    a {
+      @apply text-neutral-900
+        dark:text-white;
+    }
+
+    a {
+      @apply underline;
+    }
+
+    pre {
+      @apply overflow-auto;
+    }
+  }
+}