✨(frontend) add custom css style

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to
 ## Added
 
 - 📄(legal) Require contributors to sign a DCO #779
+- ✨(frontend) add custom css style #771
 
 ## Changed
 

docs/theming.md

@@ -0,0 +1,33 @@
+# Runtime Theming 🎨
+
+### How to Use
+
+To use this feature, simply set the `FRONTEND_CSS_URL` environment variable to the URL of your custom CSS file. For example:
+
+```javascript
+FRONTEND_CSS_URL=http://anything/custom-style.css
+```
+
+Once you've set this variable, our application will load your custom CSS file and apply the styles to our frontend application.
+
+### Benefits
+
+This feature provides several benefits, including:
+
+*   **Easy customization** 🔄: With this feature, you can easily customize the look and feel of our application without requiring any code changes.
+*   **Flexibility** 🌈: You can use any CSS styles you like to create a custom theme that meets your needs.
+*   **Runtime theming** ⏱️: This feature allows you to change the theme of our application at runtime, without requiring a restart or recompilation.
+
+### Example Use Case
+
+Let's say you want to change the background color of our application to a custom color. You can create a custom CSS file with the following contents:
+
+```css
+body {
+  background-color: #3498db;
+}
+```
+
+Then, set the `FRONTEND_CSS_URL` environment variable to the URL of your custom CSS file. Once you've done this, our application will load your custom CSS file and apply the styles, changing the background color to the custom color you specified.
+
+

src/backend/core/api/viewsets.py

@@ -1689,6 +1689,7 @@ def get(self, request):
             "CRISP_WEBSITE_ID",
             "ENVIRONMENT",
             "FRONTEND_THEME",
+            "FRONTEND_CSS_URL",
             "MEDIA_BASE_URL",
             "POSTHOG_KEY",
             "LANGUAGES",

src/backend/core/tests/test_api_config.py

@@ -19,6 +19,7 @@
     COLLABORATION_WS_URL="http://testcollab/",
     CRISP_WEBSITE_ID="123",
     FRONTEND_THEME="test-theme",
+    FRONTEND_CSS_URL="http://testcss/",
     MEDIA_BASE_URL="http://testserver/",
     POSTHOG_KEY={"id": "132456", "host": "https://eu.i.posthog-test.com"},
     SENTRY_DSN="https://sentry.test/123",
@@ -39,6 +40,7 @@ def test_api_config(is_authenticated):
         "CRISP_WEBSITE_ID": "123",
         "ENVIRONMENT": "test",
         "FRONTEND_THEME": "test-theme",
+        "FRONTEND_CSS_URL": "http://testcss/",
         "LANGUAGES": [
             ["en-us", "English"],
             ["fr-fr", "Français"],

src/backend/impress/settings.py

@@ -411,6 +411,10 @@ class Base(Configuration):
         None, environ_name="FRONTEND_THEME", environ_prefix=None
     )
 
+    FRONTEND_CSS_URL = values.Value(
+        None, environ_name="FRONTEND_CSS_URL", environ_prefix=None
+    )
+
     # Posthog
     POSTHOG_KEY = values.DictValue(
         None, environ_name="POSTHOG_KEY", environ_prefix=None

src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts

@@ -2,13 +2,14 @@ import path from 'path';
 
 import { expect, test } from '@playwright/test';
 
-import { createDoc, verifyDocName } from './common';
+import { createDoc } from './common';
 
 const config = {
   AI_FEATURE_ENABLED: true,
   CRISP_WEBSITE_ID: null,
   COLLABORATION_WS_URL: 'ws://localhost:4444/collaboration/ws/',
   ENVIRONMENT: 'development',
+  FRONTEND_CSS_URL: null,
   FRONTEND_THEME: 'default',
   MEDIA_BASE_URL: 'http://localhost:8083',
   LANGUAGES: [
@@ -99,22 +100,13 @@ test.describe('Config', () => {
     page,
     browserName,
   }) => {
-    const webSocketPromise = page.waitForEvent('websocket', (webSocket) => {
-      return webSocket.url().includes('ws://localhost:4444/collaboration/ws/');
-    });
-
     await page.goto('/');
 
-    const randomDoc = await createDoc(
-      page,
-      'doc-collaboration',
-      browserName,
-      1,
-    );
+    void createDoc(page, 'doc-collaboration', browserName, 1);
 
-    await verifyDocName(page, randomDoc[0]);
-
-    const webSocket = await webSocketPromise;
+    const webSocket = await page.waitForEvent('websocket', (webSocket) => {
+      return webSocket.url().includes('ws://localhost:4444/collaboration/ws/');
+    });
     expect(webSocket.url()).toContain('ws://localhost:4444/collaboration/ws/');
   });
 
@@ -173,6 +165,30 @@ test.describe('Config', () => {
       page.locator('#crisp-chatbox').getByText('Invalid website'),
     ).toBeVisible();
   });
+
+  test('it checks FRONTEND_CSS_URL config', async ({ page }) => {
+    await page.route('**/api/v1.0/config/', async (route) => {
+      const request = route.request();
+      if (request.method().includes('GET')) {
+        await route.fulfill({
+          json: {
+            ...config,
+            FRONTEND_CSS_URL: 'http://localhost:123465/css/style.css',
+          },
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    await page.goto('/');
+
+    await expect(
+      page
+        .locator('head link[href="http://localhost:123465/css/style.css"]')
+        .first(),
+    ).toBeAttached();
+  });
 });
 
 test.describe('Config: Not loggued', () => {

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -58,18 +58,18 @@ test.describe('Doc Editor', () => {
    *  - signal of the backend to the collaborative server (connection should close)
    *  - reconnection to the collaborative server
    */
-  test('checks the connection with collaborative server', async ({
-    page,
-    browserName,
-  }) => {
+  test('checks the connection with collaborative server', async ({ page }) => {
     let webSocketPromise = page.waitForEvent('websocket', (webSocket) => {
       return webSocket
         .url()
         .includes('ws://localhost:4444/collaboration/ws/?room=');
     });
 
-    const randomDoc = await createDoc(page, 'doc-editor', browserName, 1);
-    await verifyDocName(page, randomDoc[0]);
+    await page
+      .getByRole('button', {
+        name: 'New doc',
+      })
+      .click();
 
     let webSocket = await webSocketPromise;
     expect(webSocket.url()).toContain(
@@ -99,7 +99,7 @@ test.describe('Doc Editor', () => {
     const wsClose = await wsClosePromise;
     expect(wsClose.isClosed()).toBeTruthy();
 
-    // Checkt the ws is connected again
+    // Check the ws is connected again
     webSocketPromise = page.waitForEvent('websocket', (webSocket) => {
       return webSocket
         .url()

src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts

@@ -190,7 +190,7 @@ test.describe('Document grid item options', () => {
 
 test.describe('Documents filters', () => {
   test('it checks the prebuild left panel filters', async ({ page }) => {
-    await page.goto('/');
+    void page.goto('/');
 
     // All Docs
     const response = await page.waitForResponse(
@@ -263,7 +263,7 @@ test.describe('Documents filters', () => {
 
 test.describe('Documents Grid', () => {
   test('checks all the elements are visible', async ({ page }) => {
-    await page.goto('/');
+    void page.goto('/');
 
     let docs: SmallDoc[] = [];
     const response = await page.waitForResponse(

src/frontend/apps/impress/src/components/BoxButton.tsx

@@ -44,6 +44,7 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
           ${$css || ''}
         `}
         {...props}
+        className={`--docs--box-button ${props.className || ''}`}
         onClick={(event: React.MouseEvent<HTMLDivElement>) => {
           if (props.disabled) {
             return;

src/frontend/apps/impress/src/components/Card.tsx

@@ -14,6 +14,7 @@ export const Card = ({
 
   return (
     <Box
+      className={`--docs--card ${props.className || ''}`}
       $background="white"
       $radius="4px"
       $css={css`

src/frontend/apps/impress/src/components/DropButton.tsx

@@ -71,6 +71,7 @@ export const DropButton = ({
         onPress={() => onOpenChangeHandler(true)}
         aria-label={label}
         $css={buttonCss}
+        className="--docs--drop-button"
       >
         {button}
       </StyledButton>
@@ -79,6 +80,7 @@ export const DropButton = ({
         triggerRef={triggerRef}
         isOpen={isLocalOpen}
         onOpenChange={onOpenChangeHandler}
+        className="--docs--drop-button-popover"
       >
         {children}
       </StyledPopover>

src/frontend/apps/impress/src/components/Icon.tsx

@@ -36,6 +36,7 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
       $padding="4px"
       $margin="auto"
       {...textProps}
+      className={`--docs--icon-bg ${textProps.className || ''}`}
     >
       {iconName}
     </Text>

src/frontend/apps/impress/src/components/InfiniteScroll.tsx

@@ -30,7 +30,10 @@ export const InfiniteScroll = ({
   };
 
   return (
-    <Box {...boxProps}>
+    <Box
+      {...boxProps}
+      className={`--docs--infinite-scroll ${boxProps.className || ''}`}
+    >
       {children}
       <InView onChange={loadMore}>
         {!isLoading && hasMore && (

src/frontend/apps/impress/src/components/LoadMoreText.tsx

@@ -20,6 +20,7 @@ export const LoadMoreText = ({
       $align="center"
       $gap="0.4rem"
       $padding={{ horizontal: '2xs', vertical: 'sm' }}
+      className="--docs--load-more"
     >
       <Icon
         $theme="primary"

src/frontend/apps/impress/src/components/TextErrors.tsx

@@ -28,7 +28,12 @@ export const TextErrors = ({
   const { t } = useTranslation();
 
   return (
-    <AlertStyled canClose={canClose} type={VariantType.ERROR} icon={icon}>
+    <AlertStyled
+      canClose={canClose}
+      type={VariantType.ERROR}
+      icon={icon}
+      className="--docs--text-errors"
+    >
       <Box $direction="column" $gap="0.2rem">
         {causes &&
           causes.map((cause, i) => (

src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx

@@ -119,8 +119,6 @@ export const QuickSearchStyle = createGlobalStyle`
   }
 }
 
-
-
 .c__modal__scroller:has(.quick-search-container),
 .c__modal__scroller:has(.noPadding) {
   padding: 0 !important;
@@ -138,6 +136,4 @@ export const QuickSearchStyle = createGlobalStyle`
     margin-bottom: 0;
   }
 }
-
-
 `;

src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx

@@ -28,6 +28,7 @@ export const HorizontalSeparator = ({
           ? '#e5e5e533'
           : colorsTokens()['greyscale-100']
       }
+      className="--docs--horizontal-separator"
     />
   );
 };

src/frontend/apps/impress/src/core/config/ConfigProvider.tsx

@@ -1,4 +1,5 @@
 import { Loader } from '@openfun/cunningham-react';
+import Head from 'next/head';
 import { PropsWithChildren, useEffect } from 'react';
 
 import { Box } from '@/components';
@@ -54,10 +55,17 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => {
   }
 
   return (
-    <AnalyticsProvider>
-      <CrispProvider websiteId={conf?.CRISP_WEBSITE_ID}>
-        {children}
-      </CrispProvider>
-    </AnalyticsProvider>
+    <>
+      {conf?.FRONTEND_CSS_URL && (
+        <Head>
+          <link rel="stylesheet" href={conf?.FRONTEND_CSS_URL} />
+        </Head>
+      )}
+      <AnalyticsProvider>
+        <CrispProvider websiteId={conf?.CRISP_WEBSITE_ID}>
+          {children}
+        </CrispProvider>
+      </AnalyticsProvider>
+    </>
   );
 };

src/frontend/apps/impress/src/core/config/api/useConfig.tsx

@@ -11,6 +11,7 @@ interface ConfigResponse {
   COLLABORATION_WS_URL?: string;
   CRISP_WEBSITE_ID?: string;
   FRONTEND_THEME?: Theme;
+  FRONTEND_CSS_URL?: string;
   MEDIA_BASE_URL?: string;
   POSTHOG_KEY?: PostHogConf;
   SENTRY_DSN?: string;

src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx

@@ -18,14 +18,20 @@ export const ButtonLogin = () => {
         onClick={() => gotoLogin()}
         color="primary-text"
         aria-label={t('Login')}
+        className="--docs--button-login"
       >
         {t('Login')}
       </Button>
     );
   }
 
   return (
-    <Button onClick={gotoLogout} color="primary-text" aria-label={t('Logout')}>
+    <Button
+      onClick={gotoLogout}
+      color="primary-text"
+      aria-label={t('Logout')}
+      className="--docs--button-logout"
+    >
       {t('Logout')}
     </Button>
   );
@@ -45,6 +51,7 @@ export const ProConnectButton = () => {
         }
       `}
       $radius="4px"
+      className="--docs--proconnect-button"
     >
       <ProConnectImg />
     </BoxButton>

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -133,6 +133,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       $padding={{ top: 'md' }}
       $background="white"
       $css={cssEditor(readOnly)}
+      className="--docs--editor-container"
     >
       {errorAttachment && (
         <Box $margin={{ bottom: 'big', top: 'none', horizontal: 'large' }}>
@@ -192,7 +193,7 @@ export const BlockNoteEditorVersion = ({
   }, [setEditor, editor]);
 
   return (
-    <Box $css={cssEditor(readOnly)}>
+    <Box $css={cssEditor(readOnly)} className="--docs--editor-container">
       <BlockNoteView editor={editor} editable={!readOnly} theme="light" />
     </Box>
   );