Merge pull request #259 from SkalskiP/develop

1.9.0-alpha relese

.eslintrc.yml

@@ -0,0 +1,32 @@
+extends:
+  - eslint:recommended
+  - plugin:@typescript-eslint/recommended
+  - plugin:react/recommended
+parser: "@typescript-eslint/parser"
+plugins:
+  - "@typescript-eslint"
+rules:
+  "@typescript-eslint/no-inferrable-types": off
+  no-shadow: off
+  "@typescript-eslint/no-shadow":
+    - error
+  no-use-before-define: off
+  "@typescript-eslint/no-use-before-define":
+    - error
+  react/jsx-filename-extension:
+    - warn
+    - extensions:
+        - .tsx
+  complexity:
+    - error
+    - 15
+  no-await-in-loop: warn
+  no-eval: error
+  no-implied-eval: error
+  prefer-promise-reject-errors: warn
+env:
+  browser: true
+settings:
+  react:
+    pragma: React
+    version: detect

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,72 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "develop", master ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "develop" ]
+  schedule:
+    - cron: '16 8 * * 5'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

.github/workflows/coverage.yml

@@ -9,27 +9,28 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [14, 16]
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 2
+        uses: actions/checkout@v3
 
       - name: Set up Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 
+      - name: Update NPM
+        run: npm i -g npm
+
       - name: Install dependencies
         run: npm install
 
       - name: Run the tests
-        run: npm test -- --coverage
+        run: npm run test:coverage
 
       - name: Upload coverage to Codecov
-        if: ${{ matrix.node-version == '10.x'}}
+        if: ${{ matrix.node-version == '14'}}
         uses: codecov/codecov-action@v1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -5,7 +5,8 @@
 # CREATE REACT APP
 
 # dependencies
-/node_modules
+/node_modules/
+/dist/
 /.pnp
 .pnp.js
 

.nvmrc

@@ -1 +1 @@
-11.15.0
+16.16.0

README.md

@@ -9,7 +9,7 @@
     <img width="600" src=".//public/ico/main-image-dark_alter.png" alt="Logo">
 </p>
 
-[makesense.ai][1] is a free to use online tool for labelling photos. Thanks to the use of a browser it does not require any complicated installation - just visit the website and you are ready to go. It also doesn't matter which operating system you're running on - we do our best to be truly cross-platform. It is perfect for small computer vision deeplearning projects, making the process of preparing a dataset much easier and faster. Prepared labels can be downloaded  in one of multiple supported formats. The application was written in TypeScript and is based on React/Redux duo.
+[makesense.ai][1] is a free-to-use online tool for labeling photos. Thanks to the use of a browser it does not require any complicated installation - just visit the website and you are ready to go. It also doesn't matter which operating system you're running on - we do our best to be truly cross-platform. It is perfect for small computer vision deep learning projects, making the process of preparing a dataset much easier and faster. Prepared labels can be downloaded  in one of the multiple supported formats. The application was written in TypeScript and is based on React/Redux duo.
 
 ## 📄 Documentation
 
@@ -130,6 +130,9 @@ You can find examples of export files along with a description and schema on our
 | **Label**     | ☐   | ✗    | ✗       | ✗        | ✗         | ✗          |
 
 **Table 3.** The matrix of supported labels import formats
+* ✓ - supported format
+* ☐ - not yet supported format
+* ✗ - format does not make sense for a given label type  
 
 ## 🔐 Privacy
 

docker/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12.10-slim
+FROM node:14.18.0
 
 RUN apt-get update && apt-get -y install git && rm -rf /var/lib/apt/lists/*
 

public/index.html → index.html

@@ -17,41 +17,30 @@
     })(window,document,'script','dataLayer','GTM-5N6WR7G');</script>
 
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/make-sense-ico.png" />
+
+    <link rel="shortcut icon" href="/make-sense-ico.png" />
     <link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+
+    <meta name="theme-color" content="#171717" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" href="/manifest.json" />
     <title>Make Sense</title>
   </head>
   <body>
+    <style>
+      body {
+        background-color: #171717;
+      }
+    </style>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <noscript>
       <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5N6WR7G" height="0" width="0" style="display:none;visibility:hidden"></iframe>
     </noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

jest.config.ts

@@ -0,0 +1,36 @@
+import type { Config } from '@jest/types';
+
+// Sync object
+const config: Config.InitialOptions = {
+  rootDir: process.cwd(),
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  transformIgnorePatterns: [],
+  testEnvironment: 'jsdom',
+  roots: ["<rootDir>/src"],
+  setupFilesAfterEnv: ["<rootDir>/src/configureTest.ts"],
+  transform: {
+    "^.+(t|j)sx?$": [
+      "@swc/jest",
+      {
+        jsc: {
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
+        },
+      },
+    ],
+  },
+  "moduleNameMapper": {
+    "\\.(css|scss|less)$": "identity-obj-proxy"
+  },
+  extensionsToTreatAsEsm: [".ts", ".tsx"],
+  collectCoverageFrom: [
+    "**/*.{ts,tsx}",
+    "!**/node_modules/**",
+    "!**/dist/**",
+    "!**/coverage/**",
+  ],
+};
+export default config;

mkdocs.yml

@@ -15,7 +15,7 @@ copyright: Copyright © 2019 Piotr Skalski
 
 # Customization
 extra:
-  version: 1.7.0-alpha
+  version: 1.8.0-alpha
   social:
     - icon: fontawesome/brands/github
       link: https://github.com/SkalskiP