Merge pull request #6876 from CitizenLabDotCo/chromatic-setup

Chromatic setup

.circleci/config.yml

@@ -60,6 +60,10 @@ parameters:
     type: boolean
     default: false
 
+  chromatic:
+    type: boolean
+    default: false
+
 executors:
   cl2-back:
     parameters:
@@ -668,6 +672,30 @@ jobs:
           path: /tmp/report.html
           destination: lighthouse
 
+  front-chromatic:
+    docker:
+      - image: citizenlabdotco/cl2-devops-front-buildenv
+    resource_class: medium
+    working_directory: ~/citizenlab/front
+    steps:
+      # Non-shallow clone (required for chromatic)
+      - run: mkdir -p ~/.ssh
+      - run: ssh-keyscan github.com >> ~/.ssh/known_hosts
+      - run: |
+          cd ~
+          rm -rf ~/$(echo $CIRCLE_REPOSITORY_URL | cut -d '/' -f 2 | cut -d '.' -f 1)
+          git clone -b "$CIRCLE_BRANCH" "$CIRCLE_REPOSITORY_URL"
+
+      - restore_cache:
+          keys:
+            - v2-npm-cache-{{ checksum "package-lock.json" }}
+      - <<: *install-front-dependencies
+      - save_cache:
+          paths:
+            - /root/.npm
+          key: v2-npm-cache-{{ checksum "package-lock.json" }}
+      - run: npm run chromatic
+
   # E2E TESTS
   e2e-tests:
     docker:
@@ -1293,3 +1321,25 @@ workflows:
             - "Canada"
             - "US West"
       #     - "UK"
+
+  manual-chromatic:
+    when: << pipeline.parameters.chromatic >>
+    jobs:
+      - front-chromatic:
+          context:
+            - docker-hub-access
+            - chromatic
+
+  weekly-chromatic:
+    triggers:
+      - schedule:
+          cron: 0 5 * * 1 # Every Monday at 5am: https://crontab.guru/
+          filters:
+            branches:
+              only:
+                - master
+    jobs:
+      - front-chromatic:
+          context:
+            - docker-hub-access
+            - chromatic

front/.gitignore

@@ -25,6 +25,7 @@ browserstack.err
 .babel-cache/*
 .cache-loader/*
 app/tsconfig.tsbuildinfo
+build-storybook.log
 
 cypress/videos/
 cypress/screenshots/

front/.storybook/mockModules.ts

@@ -4,7 +4,7 @@ const appFolder = path.join(process.cwd(), 'app');
 const rel = (...args: string[]) => path.resolve(path.join(appFolder, ...args));
 
 const mockModules = {
-  'utils/locale': rel('utils', '__mocks__', 'locale2'),
+  'utils/locale': rel('utils', '__mocks__', 'locale'),
   modules: rel('modules', '__mocks__', 'index'),
   'utils/cl-router/Link': rel('utils', 'cl-router', '__mocks__', 'Link'),
   '@researchgate/react-intersection-observer': path.join(

front/.storybook/modes.ts

@@ -0,0 +1,20 @@
+export const allModes = {
+  default: {
+    viewport: {
+      width: 1280
+    }
+  },
+
+  tablet: {
+    viewport: {
+      width: 1000
+    }
+  },
+
+  mobile: {
+    viewport: {
+      width: 500,
+      height: 1000
+    }
+  }
+};

front/.storybook/preview.tsx

@@ -5,6 +5,7 @@ import { initialize, mswDecorator } from 'msw-storybook-addon';
 import mockServer from './mockServer';
 import { reactIntl } from './reactIntl';
 import { MemoryRouter } from 'react-router-dom';
+import { allModes } from './modes';
 
 initialize();
 
@@ -17,6 +18,7 @@ const routerDecorator = (Story) => (
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -25,7 +27,14 @@ const preview: Preview = {
     },
 
     msw: Object.values(mockServer),
+
     reactIntl,
+
+    chromatic: {
+      modes: {
+        ...allModes
+      }
+    }
   },
 
   decorators: [mswDecorator, routerDecorator, contexts],

front/app/api/app_configuration/__mocks__/_mockServer.ts

@@ -1,7 +1,11 @@
 import { rest } from 'msw';
 
+import { getOrigin } from 'utils/storybook/getOrigin';
+
 import { IAppConfigurationData } from '../types';
 
+const image = `${getOrigin()}/images/logo.png`;
+
 export const getAppConfigurationData = (
   attributes = {}
 ): IAppConfigurationData => ({
@@ -65,9 +69,9 @@ export const getAppConfigurationData = (
       },
     },
     logo: {
-      small: 'http://localhost:6006/images/logo.png',
-      medium: 'http://localhost:6006/images/logo.png',
-      large: 'http://localhost:6006/images/logo.png',
+      small: image,
+      medium: image,
+      large: image,
     },
     ...attributes,
   },

front/app/api/avatars/__mocks__/_mockServer.ts

@@ -2,17 +2,21 @@ import { rest } from 'msw';
 
 import { API_PATH } from 'containers/App/constants';
 
+import { getOrigin } from 'utils/storybook/getOrigin';
+
 import { IAvatarData } from '../types';
 
+const image = `${getOrigin()}/images/female_avatar_5`;
+
 export const avatarsData: IAvatarData[] = [
   {
     id: '1',
     type: 'avatar',
     attributes: {
       avatar: {
-        small: 'http://localhost:6006/images/female_avatar_5.jpg',
-        medium: 'http://localhost:6006/images/female_avatar_5.jpg',
-        large: 'http://localhost:6006/images/female_avatar_5.jpg',
+        small: image,
+        medium: image,
+        large: image,
       },
     },
   },

front/app/api/idea_images/__mocks__/_mockServer.ts

@@ -1,7 +1,11 @@
 import { rest } from 'msw';
 
+import { getOrigin } from 'utils/storybook/getOrigin';
+
 import { IIdeaImageData } from '../types';
 
+const image = `${getOrigin()}/images/image16.png`;
+
 export const ideaImagesData: IIdeaImageData[] = [
   {
     id: '30c1b604-71fd-4ac4-9cd7-3e5601d9cb0f',
@@ -11,10 +15,10 @@ export const ideaImagesData: IIdeaImageData[] = [
       created_at: '2023-02-28T05:56:37.762Z',
       updated_at: '2023-02-28T05:56:37.762Z',
       versions: {
-        small: 'http://localhost:6006/images/image16.png',
-        medium: 'http://localhost:6006/images/image16.png',
-        large: 'http://localhost:6006/images/image16.png',
-        fb: 'http://localhost:6006/images/image16.png',
+        small: image,
+        medium: image,
+        large: image,
+        fb: image,
       },
     },
   },
@@ -26,10 +30,10 @@ export const ideaImagesData: IIdeaImageData[] = [
       created_at: '2021-02-28T05:56:37.762Z',
       updated_at: '2020-02-28T05:56:37.762Z',
       versions: {
-        small: 'http://localhost:6006/images/image16.png',
-        medium: 'http://localhost:6006/images/image16.png',
-        large: 'http://localhost:6006/images/image16.png',
-        fb: 'http://localhost:6006/images/image16.png',
+        small: image,
+        medium: image,
+        large: image,
+        fb: image,
       },
     },
   },

front/app/api/initiative_images/__mocks__/_mockServer.ts

@@ -1,7 +1,11 @@
 import { rest } from 'msw';
 
+import { getOrigin } from 'utils/storybook/getOrigin';
+
 import { IInitiativeImageData } from '../types';
 
+const image = `${getOrigin()}/images/image16.png`;
+
 export const initiativeImagesData: IInitiativeImageData[] = [
   {
     id: '30c1b604-71fd-4ac4-9cd7-3e5601d9cb0f',
@@ -11,10 +15,10 @@ export const initiativeImagesData: IInitiativeImageData[] = [
       created_at: '2023-02-28T05:56:37.762Z',
       updated_at: '2023-02-28T05:56:37.762Z',
       versions: {
-        small: 'http://localhost:6006/images/image16.png',
-        medium: 'http://localhost:6006/images/image16.png',
-        large: 'http://localhost:6006/images/image16.png',
-        fb: 'http://localhost:6006/images/image16.png',
+        small: image,
+        medium: image,
+        large: image,
+        fb: image,
       },
     },
   },
@@ -26,10 +30,10 @@ export const initiativeImagesData: IInitiativeImageData[] = [
       created_at: '2021-02-28T05:56:37.762Z',
       updated_at: '2020-02-28T05:56:37.762Z',
       versions: {
-        small: 'http://localhost:6006/images/image16.png',
-        medium: 'http://localhost:6006/images/image16.png',
-        large: 'http://localhost:6006/images/image16.png',
-        fb: 'http://localhost:6006/images/image16.png',
+        small: image,
+        medium: image,
+        large: image,
+        fb: image,
       },
     },
   },

front/app/api/phases/__mocks__/_mockServer.ts

@@ -327,4 +327,78 @@ const endpoints = {
   ),
 };
 
+const votingPhase: IPhaseData = {
+  id: 'voting-phase',
+  type: 'phase',
+  attributes: {
+    allow_anonymous_participation: false,
+    title_multiloc: { en: 'A Mock voting phase' },
+    description_multiloc: { en: 'For testing purposes' },
+    participation_method: 'voting',
+    voting_method: 'single_voting',
+    poll_anonymous: false,
+    survey_embed_url: null,
+    survey_service: null,
+    document_annotation_embed_url: null,
+    start_at: '2023-11-12',
+    end_at: '2025-11-19',
+    created_at: '2023-11-12T11:05:43.934Z',
+    updated_at: '2024-01-25T17:29:22.242Z',
+    ideas_count: 0,
+    campaigns_settings: {
+      project_phase_started: true,
+    },
+    posting_enabled: true,
+    commenting_enabled: true,
+    reacting_enabled: true,
+    reacting_like_method: 'unlimited',
+    reacting_like_limited_max: 10,
+    reacting_dislike_enabled: true,
+    reacting_dislike_method: 'unlimited',
+    reacting_dislike_limited_max: 10,
+    presentation_mode: 'card',
+    ideas_order: 'random',
+    input_term: 'idea',
+    voting_max_total: 1,
+    voting_min_total: 0,
+    voting_max_votes_per_idea: 1,
+    baskets_count: 0,
+    voting_term_singular_multiloc: {
+      en: 'vote',
+      'nl-BE': 'stem',
+      'fr-BE': 'vote',
+      'de-DE': 'Stimme',
+      'es-CL': 'votar',
+      'sr-Latn': 'vote',
+      'da-DK': 'stem',
+    },
+    voting_term_plural_multiloc: {
+      en: 'votes',
+      'nl-BE': 'stemmen',
+      'fr-BE': 'votes',
+      'de-DE': 'Stimmen',
+      'es-CL': 'votos',
+      'sr-Latn': 'votes',
+      'da-DK': 'afstemninger',
+    },
+    votes_count: 0,
+    report_public: false,
+  },
+  relationships: {
+    permissions: {
+      data: [],
+    },
+    project: {
+      data: {
+        id: 'projectId',
+        type: 'project',
+      },
+    },
+  },
+};
+
+export const votingPhaseHandler = rest.get(apiPathPhase, (_req, res, ctx) => {
+  return res(ctx.status(200), ctx.json({ data: votingPhase }));
+});
+
 export default endpoints;

front/app/api/project_images/__mocks__/_mockServer.ts

@@ -2,6 +2,10 @@ import { rest } from 'msw';
 
 import { API_PATH } from 'containers/App/constants';
 
+import { getOrigin } from 'utils/storybook/getOrigin';
+
+const image = `${getOrigin()}/images/image16.png`;
+
 export const projectImagesData = [
   {
     id: '30c1b604-71fd-4ac4-9cd7-3e5601d9cb0f',
@@ -11,10 +15,10 @@ export const projectImagesData = [
       created_at: '2023-02-28T05:56:37.762Z',
       updated_at: '2023-02-28T05:56:37.762Z',
       versions: {
-        small: 'http://localhost:6006/images/image16.png',
-        medium: 'http://localhost:6006/images/image16.png',
-        large: 'http://localhost:6006/images/image16.png',
-        fb: 'http://localhost:6006/images/image16.png',
+        small: image,
+        medium: image,
+        large: image,
+        fb: image,
       },
     },
   },
@@ -26,10 +30,10 @@ export const projectImagesData = [
       created_at: '2021-02-28T05:56:37.762Z',
       updated_at: '2020-02-28T05:56:37.762Z',
       versions: {
-        small: 'http://localhost:6006/images/image16.png',
-        medium: 'http://localhost:6006/images/image16.png',
-        large: 'http://localhost:6006/images/image16.png',
-        fb: 'http://localhost:6006/images/image16.png',
+        small: image,
+        medium: image,
+        large: image,
+        fb: image,
       },
     },
   },