feat: DIA-868: Component library + Chip Input (#5358)

* Generalized chip input component Introduce storybook Introduce generalized chip input component Introduce custom validation for the component * Setup stories, link components library to the rest of the project * Setting up tests (WIP) * Setup component tests * fix styles * ci: Build frontend Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7644877654 * Tests * Cleanup * Restructure * Fix initial value set, update tests * More tests * Cleanup + ignore unwanted errors * ci: Build frontend Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7670440744 * Fix typo * Ignore tmp * Remove excess variable * Remove excess styles * Fix docs * ci: Build frontend Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7820203546 --------- Co-authored-by: robot-ci-heartex <[email protected]>
HumanSignal · Feb 8, 2024 · a7162a0 · a7162a0
1 parent b2ae0dc
commit a7162a0
Show file tree

Hide file tree

Showing 54 changed files with 5,427 additions and 414 deletions.
diff --git a/Makefile b/Makefile
@@ -38,6 +38,9 @@ frontend-watch:
 frontend-build: frontend-setup
 	cd web && yarn run build
 
+frontend-storybook-serve: frontend-setup
+	cd web && yarn run ui:serve
+
 # Run tests
 test:
 	cd label_studio && DJANGO_DB=sqlite pytest -v -m "not integration_tests"

diff --git a/web/.eslintrc.json b/web/.eslintrc.json
@@ -1 +1,27 @@
-{}
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "settings": {
+    "react": {
+      "createClass": "createReactClass",
+      "pragma": "React",
+      "fragment": "Fragment"
+    }
+  }
+}
diff --git a/web/.gitignore b/web/.gitignore
@@ -12,6 +12,7 @@ node_modules
 .project
 .classpath
 .c9/
+.DS_Store
 *.launch
 .settings/
 *.sublime-workspace

diff --git a/web/apps/labelstudio/.eslintrc.json b/web/apps/labelstudio/.eslintrc.json
@@ -1,95 +1,95 @@
 {
-  "extends": [
-    "plugin:@nx/react",
-    "../../.eslintrc.json",
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
   "globals": {
     "process": true,
     "__dirname": true,
     "APP_SETTINGS": true
   },
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "plugins": ["react", "@typescript-eslint"],
   "rules": {
     "react/prop-types": "off",
     "react/display-name": "off",
     "react/no-children-prop": "off",
     "react/react-in-jsx-scope": "off",
     "react/jsx-no-target-blank": "off",
     "react/no-unescaped-entities": "off",
-    "react/jsx-wrap-multilines": ["error", {
-      "declaration": "parens-new-line",
-      "assignment": "parens-new-line",
-      "return": "parens-new-line",
-      "arrow": "parens-new-line",
-      "condition": "parens-new-line",
-      "logical": "parens-new-line",
-      "prop": "parens-new-line"
-    }],
+    "react/jsx-wrap-multilines": [
+      "error",
+      {
+        "declaration": "parens-new-line",
+        "assignment": "parens-new-line",
+        "return": "parens-new-line",
+        "arrow": "parens-new-line",
+        "condition": "parens-new-line",
+        "logical": "parens-new-line",
+        "prop": "parens-new-line"
+      }
+    ],
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-var-requires": "off",
     "@typescript-eslint/no-this-alias": "off",
     "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/indent": ["error", 2, {
-      "SwitchCase": 1,
-      "MemberExpression": 1
-    }],
-    "sort-imports": ["error", {
-      "ignoreCase": true,
-      "ignoreDeclarationSort": true,
-      "ignoreMemberSort": false,
-      "allowSeparatedGroups": false,
-      "memberSyntaxSortOrder": ["all", "single", "multiple", "none"]
-    }],
+    "@typescript-eslint/indent": [
+      "error",
+      2,
+      {
+        "SwitchCase": 1,
+        "MemberExpression": 1
+      }
+    ],
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true,
+        "ignoreMemberSort": false,
+        "allowSeparatedGroups": false,
+        "memberSyntaxSortOrder": ["all", "single", "multiple", "none"]
+      }
+    ],
     "no-async-promise-executor": "off",
     "semi": [2, "always"],
-    "comma-dangle": ["error", {
-      "imports": "never",
-      "exports": "never",
-      "functions": "always-multiline",
-      "objects": "always-multiline",
-      "arrays": "always-multiline"
-    }],
+    "comma-dangle": [
+      "error",
+      {
+        "imports": "never",
+        "exports": "never",
+        "functions": "always-multiline",
+        "objects": "always-multiline",
+        "arrays": "always-multiline"
+      }
+    ],
     "object-curly-spacing": ["error", "always"],
     "array-bracket-spacing": ["error", "never"],
     "object-shorthand": ["error", "always"],
     "eqeqeq": ["error", "always"],
     "indent": "off",
     "newline-after-var": ["error", "always"],
-    "space-unary-ops": [2, {
-      "words": true,
-      "nonwords": true,
-      "overrides": {
-        "!": false,
-        "!!": false,
-        "+": false,
-        "-": false,
-        "++": false,
-        "--": false
+    "space-unary-ops": [
+      2,
+      {
+        "words": true,
+        "nonwords": true,
+        "overrides": {
+          "!": false,
+          "!!": false,
+          "+": false,
+          "-": false,
+          "++": false,
+          "--": false
+        }
+      }
+    ],
+    "space-before-function-paren": [
+      "error",
+      {
+        "anonymous": "never",
+        "named": "never",
+        "asyncArrow": "always"
       }
-    }],
-    "space-before-function-paren": ["error", {
-      "anonymous": "never",
-      "named": "never",
-      "asyncArrow": "always"
-    }]
+    ]
   },
   "overrides": [
     {

diff --git a/web/dist/apps/labelstudio/3rdpartylicenses.txt b/web/dist/apps/labelstudio/3rdpartylicenses.txt
@@ -741,31 +741,6 @@ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 
-object-assign
-MIT
-The MIT License (MIT)
-
-Copyright (c) Sindre Sorhus <[email protected]> (sindresorhus.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-
 parse-srcset
 MIT
 The MIT License (MIT)

diff --git a/web/dist/apps/labelstudio/main.js b/web/dist/apps/labelstudio/main.js
diff --git a/web/dist/apps/labelstudio/main.js.LICENSE.txt b/web/dist/apps/labelstudio/main.js.LICENSE.txt
@@ -1,9 +1,3 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
 /*!
  * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
  *
@@ -35,6 +29,46 @@ PERFORMANCE OF THIS SOFTWARE.
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
 
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /**
  * chroma.js - JavaScript library for color conversions
  *
@@ -92,15 +126,6 @@ PERFORMANCE OF THIS SOFTWARE.
  * @preserve
  */
 
-/** @license React v0.20.2
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 /** @license React v16.13.1
  * react-is.production.min.js
  *
@@ -109,30 +134,3 @@ PERFORMANCE OF THIS SOFTWARE.
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-/** @license React v17.0.2
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
diff --git a/web/dist/apps/labelstudio/main.js.map b/web/dist/apps/labelstudio/main.js.map
diff --git a/web/dist/libs/datamanager/3rdpartylicenses.txt b/web/dist/libs/datamanager/3rdpartylicenses.txt
@@ -1261,31 +1261,6 @@ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 
-object-assign
-MIT
-The MIT License (MIT)
-
-Copyright (c) Sindre Sorhus <[email protected]> (sindresorhus.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-
 object-inspect
 MIT
 MIT License

diff --git a/web/dist/libs/datamanager/main.js b/web/dist/libs/datamanager/main.js