Merge pull request #6188 from CitizenLabDotCo/master

Release 2023-10-19

.circleci/config.yml

@@ -18,6 +18,19 @@ slack-fail-post-step-inconsistent-data: &slack-fail-post-step-inconsistent-data
         mentions: ":boom: FAILURE: Some data is likely invalid."
         template: basic_fail_1
 
+install-front-dependencies: &install-front-dependencies
+  - run:
+      name: Install front dependencies
+      command: |
+        # Install jq using apt-get (for Debian-based images)
+        apt-get update
+        apt-get install -y jq
+        cd ~/citizenlab/front
+        CL2_VERSION=$(cat ../cl2-component-library/package.json | jq -r .version)
+        npm ci
+        npm i --save @citizenlab/cl2-component-library@${CL2_VERSION}
+
+
 parameters:
   # This parameter is used to trigger the main workflow
   trigger:
@@ -392,7 +405,7 @@ jobs:
       - restore_cache:
           keys:
             - v2-npm-cache-{{ checksum "package-lock.json" }}
-      - run: npm ci
+      - <<: *install-front-dependencies
       - save_cache:
           paths:
             - /root/.npm
@@ -409,7 +422,7 @@ jobs:
       - restore_cache:
           keys:
             - v2-npm-cache-{{ checksum "package-lock.json" }}
-      - run: npm ci
+      - <<: *install-front-dependencies
       - save_cache:
           paths:
             - /root/.npm
@@ -426,7 +439,7 @@ jobs:
       - restore_cache:
           keys:
             - v2-npm-cache-{{ checksum "package-lock.json" }}
-      - run: npm ci
+      - <<: *install-front-dependencies
       - save_cache:
           paths:
             - /root/.npm
@@ -443,8 +456,27 @@ jobs:
       - restore_cache:
           keys:
             - v2-npm-cache-{{ checksum "package-lock.json" }}
-      - run: npm ci
-      - run: /bin/bash -lc "cd ~/citizenlab/front && license_finder"
+      - run:
+          name: Install jq
+          command: |
+            curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+            apt-get update
+            apt-get install -y jq
+      - run:
+          name: Install node, dependencies and run license_finder
+          command: |
+            curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
+            source ~/.nvm/nvm.sh
+            nvm install 16.15.0
+            nvm use 16.15.0
+            CL2_VERSION=$(cat ../cl2-component-library/package.json | jq -r .version)
+            npm i --save @citizenlab/cl2-component-library@${CL2_VERSION}
+            npm ci
+            /bin/bash -lc "cd ~/citizenlab/front && license_finder"
+      - save_cache:
+          paths:
+            - /root/.npm
+          key: v2-npm-cache-{{ checksum "package-lock.json" }}
 
   front-build:
     docker:
@@ -457,7 +489,7 @@ jobs:
       - restore_cache:
           keys:
             - v2-npm-cache-{{ checksum "package-lock.json" }}
-      - run: npm ci
+      - <<: *install-front-dependencies
       - save_cache:
           paths:
             - /root/.npm
@@ -476,7 +508,7 @@ jobs:
       - restore_cache:
           keys:
             - v2-npm-cache-{{ checksum "package-lock.json" }}
-      - run: npm ci
+      - <<: *install-front-dependencies
       - save_cache:
           paths:
             - /root/.npm
@@ -515,7 +547,7 @@ jobs:
       - restore_cache:
           keys:
             - v2-npm-cache-{{ checksum "citizenlab/front/package-lock.json" }}
-      - run: cd citizenlab/front && npm ci
+      - <<: *install-front-dependencies
       - save_cache:
           paths:
             - /root/.npm
@@ -566,7 +598,7 @@ jobs:
       - restore_cache:
           keys:
             - v2-npm-cache-{{ checksum "package-lock.json" }}
-      - run: npm ci
+      - <<: *install-front-dependencies
       - save_cache:
           paths:
             - /root/.npm
@@ -592,7 +624,7 @@ jobs:
       - restore_cache:
           keys:
             - v2-npm-cache-{{ checksum "package-lock.json" }}
-      - run: npm ci
+      - <<: *install-front-dependencies
       - save_cache:
           paths:
             - /root/.npm

.github/dependabot.yml

@@ -20,3 +20,13 @@ updates:
       - "adessy"
     reviewers:
       - "adessy"
+  - package-ecosystem: npm
+    directory: '/cl2-component-library'
+    schedule:
+      interval: monthly
+      time: '04:00'
+    open-pull-requests-limit: 10
+    assignees:
+      - 'IvaKop'
+    reviewers:
+      - 'IvaKop'

.github/workflows/main.yml

@@ -0,0 +1,44 @@
+name: CI
+on:
+  push:
+    paths: ['cl2-component-library/src/**']# Trigger the action only when files change in the folders defined here
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Begin CI...
+        uses: actions/checkout@v3
+
+      - name: Use Node 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.15.0
+
+      - name: Use cached node_modules
+        uses: actions/cache@v3
+        with:
+          path: cl2-component-library/node_modules
+          key: nodeModules-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            nodeModules-
+
+      - name: Install dependencies
+        run: cd cl2-component-library && npm ci
+        env:
+          CI: true
+
+      - name: Lint
+        run: cd cl2-component-library && npm run lint
+        env:
+          CI: true
+
+      - name: Test
+        run: cd cl2-component-library && npm run test --ci --coverage --maxWorkers=2
+        env:
+          CI: true
+
+      - name: Build
+        run: cd cl2-component-library && npm run build
+        env:
+          CI: true

.github/workflows/storybook.yml

@@ -0,0 +1,34 @@
+name: Build and Deploy Storybook
+on:
+  push:
+    branches:
+      - master
+    paths: ['cl2-component-library/src/**'] # Trigger the action only when files change in the folders defined here
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Use Node 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.15.0
+
+      - name: Install and Build 🔧
+        run: | # Install npm packages and build the Storybook files
+          cd cl2-component-library
+          npm ci
+          npm run build-storybook
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GB_TOKEN }}
+          # Test branch
+          BRANCH: cl2-component-library-storybook # The branch the action should deploy to.
+          FOLDER: cl2-component-library/docs-build # The folder that the build-storybook script generates files.
+          CLEAN: true # Automatically remove deleted files from the deploy branch
+          TARGET_FOLDER: docs # The folder that we serve our Storybook files from

Makefile

@@ -14,7 +14,7 @@
 
 build:
 	docker-compose build
-	cd front && npm install
+	npm run install:all
 
 reset-dev-env:
 	# -v removes volumes with all the data inside https://docs.docker.com/compose/reference/down/

cl2-component-library/.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

cl2-component-library/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:jsx-a11y/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+  env: {
+    jest: true
+  },
+  rules: {
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'react/prop-types': 'off',
+    'react/display-name': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-unused-vars': ['warn', {
+      argsIgnorePattern: '^_',
+      varsIgnorePattern: '^_'
+    }],
+    'no-console': ['warn', {
+      allow: ['warn', 'error']
+    }]
+  }
+};

cl2-component-library/.gitignore

@@ -0,0 +1,8 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist
+junit.xml
+coverage
+docs-build

cl2-component-library/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "endOfLine": "auto",
+  "arrowParens": "always"
+}

cl2-component-library/.storybook/citizenlabTheme.js

@@ -0,0 +1,11 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  colorPrimary: '#001758o',
+  colorSecondary: '#FF672F',
+  base: 'light',
+  brandTitle: 'CitizenLab',
+  brandImage:
+    './logo.png',
+  brandTarget: '_self',
+});

cl2-component-library/.storybook/main.js

@@ -0,0 +1,27 @@
+module.exports = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.tsx'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    '@storybook/addon-knobs',
+  ],
+  staticDirs: ['../public'],
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};

cl2-component-library/.storybook/manager.js

@@ -0,0 +1,9 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+
+import citizenlabTheme from './citizenlabTheme';
+
+addons.setConfig({
+  theme: citizenlabTheme,
+});

cl2-component-library/.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<script
+  async
+  defer
+  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDRtFe1KRBnGfDy_ijw6yCYsYnEkQRl9Cw&libraries=places&callback=myCallbackFunc"
+></script>

cl2-component-library/.storybook/preview.js

@@ -0,0 +1,13 @@
+import ThemeDecorator from './themedecorator';
+
+export const decorators = [ThemeDecorator];
+
+export const parameters = {
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: ['Design', 'Components'],
+      locales: '',
+    },
+  },
+};

cl2-component-library/.storybook/themedecorator.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { getTheme } from '../src/utils/styleUtils';
+import GlobalStyle from '../src/global-styles';
+import '../src/assets/css/reset.min.css';
+import '../src/assets/fonts/fonts.css';
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/themes/light.css';
+
+const ThemeDecorator = (storyFn) => (
+  <ThemeProvider theme={getTheme(null)}>
+    <GlobalStyle />
+    {storyFn()}
+  </ThemeProvider>
+);
+
+export default ThemeDecorator;