@pareto-engineering/design-system 2.0.0-alpha.42 → 2.0.0-alpha.45

package/dist/es/f/fields/QueryCombobox/common/index.js

@@ -0,0 +1,2 @@
+export { Menu } from "./Menu";
+export { Combobox } from "./Combobox";

package/dist/es/f/fields/QueryCombobox/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as QueryCombobox } from "./QueryCombobox";

package/dist/es/f/fields/QueryCombobox/styles.scss

@@ -0,0 +1,71 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-input-padding: .75em .75em .55em;
+$default-padding: 1em;
+$default-margin: 1em;
+
+.#{bem.$base}.combobox,
+.#{bem.$base}.multiple-combobox {
+    position: relative;
+
+    .#{bem.$base}.popover {
+        width: 100%;
+
+        >.menu {
+            list-style: none;
+            margin: 0;
+            outline: 0;
+            padding: 0;
+
+            >.item {
+                padding: $default-padding / 2;
+
+                &.#{bem.$modifier-active} {
+                    background-color: var(--background2);
+                }
+            }
+        }
+    }
+
+    >.input-wrapper {
+        >.input {
+            background: var(--light-y);
+            border: var(--theme-border-style) var(--dark-y);
+            color: var(--on-y);
+            padding: $default-input-padding;
+            width: 100%;
+
+            &::placeholder {
+                color: var(--metadata);
+            }
+
+            &:not(:disabled):hover {
+                border: var(--theme-border-style) var(--light-background4);
+            }
+
+            &:disabled {
+                background-color: var(--dark-y);
+            }
+
+            &:focus {
+                background: var(--light-background4);
+            }
+        }
+    }
+}
+
+
+.#{bem.$base}.multiple-combobox {
+    >.selected-items {
+        display: flex;
+
+        /* stylelint-disable selector-max-universal -- Allow */
+        >*:not(:first-child) {
+            margin-left: $default-margin;
+        }
+
+        /* stylelint-enable selector-max-universal */
+    }
+}

package/dist/es/f/fields/SelectInput/SelectInput.js

@@ -40,7 +40,6 @@ const SelectInput = ({
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: "input-label",
     name: name
   }, label), /*#__PURE__*/React.createElement("select", _extends({
     className: "input"

package/dist/es/f/fields/SelectInput/styles.scss

@@ -6,24 +6,27 @@
 
 
 $default-padding: 0.75em;
-
+$default-margin: 1em;
 
 .#{bem.$base}.select-input {
   display: flex;
   flex-direction: column;
 
+  .#{bem.$base}.label {
+    margin-bottom: $default-margin
+  }
 
   .input {
     border: var(--theme-border-style) var(--dark-y);
     background: var(--light-y);
-    color:var(--on-y);
+    color: var(--on-y);
     padding: $default-padding;
 
-     &:not(:disabled):hover{
+    &:not(:disabled):hover {
       border: var(--theme-border-style) var(--light-background4);
     }
 
-     &:disabled {
+    &:disabled {
       background-color: var(--dark-y);
     }
 
@@ -31,5 +34,4 @@ $default-padding: 0.75em;
       background: var(--y);
     }
   }
-}
-
+}

package/dist/es/f/fields/index.js

@@ -2,4 +2,5 @@ export { TextInput } from "./TextInput";
 export { SelectInput } from "./SelectInput";
 export { ChoicesInput } from "./ChoicesInput";
 export { TextareaInput } from "./TextareaInput";
-export { RatingsInput } from "./RatingsInput";
+export { RatingsInput } from "./RatingsInput";
+export { QueryCombobox } from "./QueryCombobox";

package/dist/es/index.js

@@ -5,4 +5,5 @@ export * from "./b";
 export * from "./c";
 export * from "./d";
 export * from "./f";
-export * from "./utils";
+export * from "./utils";
+export * from "./test";

package/dist/es/test/QueryLoader/QueryLoader.js

@@ -0,0 +1,29 @@
+var _QueryLoaderHelloQuery;
+
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useEffect, Suspense } from 'react';
+import { useQueryLoader } from 'react-relay'; // Local Definitions
+
+import { PreloadedTestData } from "./common";
+const testQuery = _QueryLoaderHelloQuery !== void 0 ? _QueryLoaderHelloQuery : (_QueryLoaderHelloQuery = require("./__generated__/QueryLoaderHelloQuery.graphql"), _QueryLoaderHelloQuery.hash && _QueryLoaderHelloQuery.hash !== "b92d001ab0208bd484a99f77c274d5ef" && console.error("The definition of 'QueryLoaderHelloQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _QueryLoaderHelloQuery);
+/**
+ * This is the component description.
+ */
+
+const QueryLoader = () => {
+  const [queryReference, loadQuery] = useQueryLoader(testQuery);
+  useEffect(() => {
+    loadQuery({});
+  }, []);
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: "loading"
+  }, queryReference ? /*#__PURE__*/React.createElement(PreloadedTestData, {
+    queryReference: queryReference,
+    query: testQuery
+  }) : null);
+};
+
+QueryLoader.defaultProps = {// someProp:false
+};
+export default QueryLoader;

package/dist/es/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js

@@ -0,0 +1,71 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+'use strict';
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type QueryLoaderHelloQueryVariables = {||};
+export type QueryLoaderHelloQueryResponse = {|
+  +hello: ?string
+|};
+export type QueryLoaderHelloQuery = {|
+  variables: QueryLoaderHelloQueryVariables,
+  response: QueryLoaderHelloQueryResponse,
+|};
+*/
+
+/*
+query QueryLoaderHelloQuery {
+  hello
+}
+*/
+
+const node
+/*: ConcreteRequest*/
+= function () {
+  var v0 = [{
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "hello",
+    "storageKey": null
+  }];
+  return {
+    "fragment": {
+      "argumentDefinitions": [],
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "QueryLoaderHelloQuery",
+      "selections": v0
+      /*: any*/
+      ,
+      "type": "Query",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": [],
+      "kind": "Operation",
+      "name": "QueryLoaderHelloQuery",
+      "selections": v0
+      /*: any*/
+
+    },
+    "params": {
+      "cacheID": "463f9ee8a82dd6ec8dedeb28649cce74",
+      "id": null,
+      "metadata": {},
+      "name": "QueryLoaderHelloQuery",
+      "operationKind": "query",
+      "text": "query QueryLoaderHelloQuery {\n  hello\n}\n"
+    }
+  };
+}(); // prettier-ignore
+
+
+node
+/*: any*/
+.hash = 'b92d001ab0208bd484a99f77c274d5ef';
+module.exports = node;

package/dist/es/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js

@@ -0,0 +1,31 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { usePreloadedQuery } from 'react-relay';
+/**
+ * This is the component description.
+ */
+
+const PreloadedTestData = ({
+  query,
+  queryReference // ...otherProps
+
+}) => {
+  const data = usePreloadedQuery(query, queryReference);
+  return /*#__PURE__*/React.createElement("pre", null, JSON.stringify(data, null, 2));
+};
+
+PreloadedTestData.propTypes = {
+  /**
+   * The query to be used to query the test data
+   */
+  query: PropTypes.objectOf(PropTypes.PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
+
+  /**
+   *  The query reference to be used to access the preloaded data
+   */
+  queryReference: PropTypes.objectOf(PropTypes.PropTypes.oneOfType([PropTypes.string, PropTypes.object]))
+};
+PreloadedTestData.defaultProps = {// someProp:false
+};
+export default PreloadedTestData;

package/dist/es/test/QueryLoader/common/PreloadedTestData/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as PreloadedTestData } from "./PreloadedTestData";

package/dist/es/test/QueryLoader/common/index.js

@@ -0,0 +1 @@
+export { PreloadedTestData } from "./PreloadedTestData";

package/dist/es/test/QueryLoader/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as QueryLoader } from "./QueryLoader";

package/dist/es/test/QueryLoader/styles.scss

@@ -0,0 +1,9 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.query-loader{
+
+}
+
+
+

package/dist/es/test/index.js

@@ -0,0 +1 @@
+export { QueryLoader } from "./QueryLoader";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.42",
+  "version": "2.0.0-alpha.45",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -33,7 +33,11 @@
     "link:assets": "npm link @pareto-engineering/assets",
     "link:bem": "npm link @pareto-engineering/bem",
     "link:styles": "npm link @pareto-engineering/styles",
-    "link:all": "npm run link:bem && npm run link:styles && npm run link:assets"
+    "link:all": "npm run link:bem && npm run link:styles && npm run link:assets",
+    "relay": "relay-compiler",
+    "fetch-schema:dev": "node scripts/fetchSchema.js",
+    "fetch-schema:prod": "node scripts/fetchSchema.js -- --ref production",
+    "fetch-schema": "npm run fetch-schema:prod"
   },
   "keywords": [],
   "author": "",
@@ -52,6 +56,7 @@
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-relay": "^13.2.0",
     "chromatic": "^5.9.2",
     "copyfiles": "^2.4.1",
     "css-mqpacker": "^7.0.0",
@@ -59,11 +64,13 @@
     "eslint": "^7.30.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "faker": "^5.5.3",
+    "graphql": "^15.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.0.6",
     "jsonlint": "^1.6.3",
@@ -72,6 +79,8 @@
     "postcss-cli": "^8.3.1",
     "postcss-preset-env": "^6.7.0",
     "postcss-scss": "^4.0.0",
+    "relay-compiler": "^11.0.2",
+    "relay-config": "^11.0.2",
     "sass": "^1.35.1",
     "sass-loader": "=10.1.1",
     "storybook-addon-themes": "^6.1.0",
@@ -79,10 +88,11 @@
     "stylelint-config-palantir": "^5.1.0"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^2.0.0-alpha.18",
+    "@pareto-engineering/assets": "^2.0.0-alpha.21",
     "@pareto-engineering/bem": "^0.1.5",
     "@pareto-engineering/styles": "^2.0.0-alpha.8",
     "date-fns": "^2.22.1",
+    "downshift": "^6.1.7",
     "formik": "^2.2.9",
     "hamburgers": "^1.1.3",
     "lodash": "^4.17.21",
@@ -91,8 +101,11 @@
     "react-countup": "^4.4.0",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
+    "react-relay": "^11.0.2",
     "react-router-dom": "^5.2.0",
     "react-visibility-sensor": "^5.1.1",
+    "relay-runtime": "^11.0.2",
+    "relay-test-utils": "^11.0.2",
     "swiper": "^6.7.5",
     "typed.js": "^2.0.12"
   },

package/relay.config.js

@@ -0,0 +1,12 @@
+const { resolve } = require('path')
+
+// If you're reading this file for the first time, please read this toroughly https://mrtnzlml.com/docs/relay
+
+module.exports = {
+  src     :resolve(__dirname, './src'),
+  schema  :resolve(__dirname, './schema.graphql'),
+  exclude :['**/node_modules/**', '**/__mocks__/**', '**/__generated__/**'],
+  watchman:true,
+  verbose :true,
+  // language:typescript
+}