Merge pull request #1 from oliviercperrier/SKFP-65-combine-queries

Skfp 65 combine queries
Ferlab-Ste-Justine · Aug 4, 2021 · ef048c5 · ef048c5
2 parents ee15d78 + 4a3d790
commit ef048c5
Show file tree

Hide file tree

Showing 41 changed files with 785 additions and 296 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,5 +5,4 @@ lib/
 .vscode
 build/
 storybook-static/
-storybook/
 
diff --git a/README.md b/README.md
@@ -8,6 +8,36 @@ Sets of shareable components
 - @ferlab/ui Components for React
 - @ferlab/style Set of scss style for the components, can be use with different stacks
 
+## Docs
+
+### Developments
+
+ 1. Create your own fork
+ 2. Make changes localy
+ 3. Push on your fork
+ 4. Create a pull request from your fork to the main ferlab repo
+
+
+### How to add new components
+
+First, run the build process and storybook [package/ui doc](./packages/ui/README.md)
+
+All component should be expose to storybook. Please see [storybook doc](./storybook/README.md)
+### Deploy storybook to your own github pages from your fork
+
+ Why deploy your own storybook
+
+ - QA
+ - Validation with design
+ - Validate prototypes
+
+
+ Storybook static site will be automaticaly deploy when you push or merge on master. Using your own fork enable to push on master without affecting the main repo.
+
+ #### Configure your github page
+
+ - Navigate to your GitHub repository settings and find the GitHub Pages section. 
+ - Select the main/master branch, then the docs folder and, click Save.
 ## Storybook
 
 Interactive set of components available in ferlab-ui through storybook

diff --git a/docs/iframe.html b/docs/iframe.html
@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['LOGLEVEL'] = "info";</script><script src="runtime~main.041500e70c42dc9e91a9.bundle.js"></script><script src="vendors~main.041500e70c42dc9e91a9.bundle.js"></script><script src="main.041500e70c42dc9e91a9.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['LOGLEVEL'] = "info";</script><script src="runtime~main.964a317e8627e4e03033.bundle.js"></script><script src="vendors~main.964a317e8627e4e03033.bundle.js"></script><script src="main.964a317e8627e4e03033.bundle.js"></script></body></html>
diff --git a/docs/main.041500e70c42dc9e91a9.bundle.js b/docs/main.041500e70c42dc9e91a9.bundle.js
diff --git a/docs/main.041500e70c42dc9e91a9.bundle.js.map b/docs/main.041500e70c42dc9e91a9.bundle.js.map
diff --git a/docs/main.964a317e8627e4e03033.bundle.js b/docs/main.964a317e8627e4e03033.bundle.js
diff --git a/docs/main.964a317e8627e4e03033.bundle.js.map b/docs/main.964a317e8627e4e03033.bundle.js.map
diff --git a/docs/runtime~main.041500e70c42dc9e91a9.bundle.js.map b/docs/runtime~main.041500e70c42dc9e91a9.bundle.js.map
diff --git a/...ntime~main.041500e70c42dc9e91a9.bundle.js → ...ntime~main.964a317e8627e4e03033.bundle.js b/...ntime~main.041500e70c42dc9e91a9.bundle.js → ...ntime~main.964a317e8627e4e03033.bundle.js
diff --git a/docs/runtime~main.964a317e8627e4e03033.bundle.js.map b/docs/runtime~main.964a317e8627e4e03033.bundle.js.map
diff --git a/docs/vendors~main.041500e70c42dc9e91a9.bundle.js b/docs/vendors~main.041500e70c42dc9e91a9.bundle.js
diff --git a/docs/vendors~main.041500e70c42dc9e91a9.bundle.js.map b/docs/vendors~main.041500e70c42dc9e91a9.bundle.js.map
diff --git a/docs/vendors~main.964a317e8627e4e03033.bundle.js b/docs/vendors~main.964a317e8627e4e03033.bundle.js
diff --git a/...41500e70c42dc9e91a9.bundle.js.LICENSE.txt → ...64a317e8627e4e03033.bundle.js.LICENSE.txt b/...41500e70c42dc9e91a9.bundle.js.LICENSE.txt → ...64a317e8627e4e03033.bundle.js.LICENSE.txt
diff --git a/docs/vendors~main.964a317e8627e4e03033.bundle.js.map b/docs/vendors~main.964a317e8627e4e03033.bundle.js.map
diff --git a/packages/style/components/queryBuilder/Combiner.module.scss b/packages/style/components/queryBuilder/Combiner.module.scss
@@ -9,15 +9,12 @@
         height: auto;
         border: none;
 
-        @include hoverFocus($query-combiner-button-hover-color, $query-combiner-button-focus-color);
-    }
-}
-
-.menuItem {
-    display: flex;
-    align-items: center;
+        .operator {
+            text-decoration: underline;
 
-    .itemIcon {
-        margin-right: .8rem;
+            &:hover {
+                text-decoration: none;
+            }
+        }
     }
 }
diff --git a/packages/style/components/queryBuilder/Operator.module.scss b/packages/style/components/queryBuilder/Operator.module.scss
@@ -1,6 +1,6 @@
 @import 'theme.template';
 
-.icon {
+.icon, .text {
     color:$query-icon-operator-color;
 
     &:hover, &:active {

diff --git a/packages/style/components/queryBuilder/QueryBar.module.scss b/packages/style/components/queryBuilder/QueryBar.module.scss
@@ -32,15 +32,19 @@
         height: 100%;
         left: 0;
         top: 0;
-        width: 4px;
+        width: $query-bar-identifier-width;
         background: $query-bar-identifier;
     }
 
 
     .selectionWrapper {
+        padding-left: $query-bar-padding-left + $query-bar-identifier-width;
         .label {
             font-size: 1.2rem;
-            align-self: flex-start;
+            padding-top: 1px;
+            padding-left: 0.4em;
+            font-weight: 600;
+            box-shadow: none !important;
         }
     }
 
@@ -84,7 +88,6 @@
             display: flex;
             align-items: center;
             padding: .3rem;
-            align-self: flex-start;
 
             &:first-child {
                 margin-right: 1.6rem;

diff --git a/packages/style/components/queryBuilder/QueryBuilder.module.scss b/packages/style/components/queryBuilder/QueryBuilder.module.scss
@@ -15,16 +15,29 @@
     }
 
     .actions {
+        align-items: center;
+
+        >*:not(:first-child) {
+            margin-left: 1.5em;
+        }
+
+        .switch {
+            &.withLabel {
+                display: flex;
+                align-items: center;
+
+                .label {
+                    margin-left: 0.5em;
+                }
+            }
+        }
 
         .buttons {
             display: flex;
             align-items: center;
-            &:not(:last-child) {
-                margin-right: .8rem;
-            }
 
-            >:first-child {
-                margin-right: .6rem;
+            &:last-child {
+                margin-left: 1em;
             }
         }
     }

diff --git a/packages/style/components/queryBuilder/QueryPill.module.scss b/packages/style/components/queryBuilder/QueryPill.module.scss
@@ -2,7 +2,7 @@
 
 .container {
     background: $query-pill-bg;
-    padding: .2rem .2rem .2rem .6rem;
+    padding: .2rem .2rem .2rem .2rem;
     border-radius: 2px;
     align-items: center;
     line-height: 20px;
@@ -11,13 +11,16 @@
         background: $query-pill-bg-active;
     }
 
-    .textSpace {
-        margin-right: .6rem;
+    .operator {
+        margin-right: .4rem;
+        margin-left: .2rem;
     }
 
     .field {
         font-weight: 600;
         font-size: 1.2rem;
+        margin-left: .4rem;
+        margin-right: .2rem;
     }
 
     .close {

diff --git a/packages/style/components/queryBuilder/QueryValues.module.scss b/packages/style/components/queryBuilder/QueryValues.module.scss
@@ -15,7 +15,7 @@
         }
 
         .operator {
-            margin: 0 .7rem;
+            margin: 0 .4rem;
         }
     }
 

diff --git a/packages/style/themes/default/_theme.template.scss b/packages/style/themes/default/_theme.template.scss
@@ -14,9 +14,14 @@ $query-bar-bg-active: #FFEFC1;
 $query-bar-border-color: #BCC9DC;
 $query-bar-border-color-active: #FFDC73;
 $query-bar-height: 100%;
-$query-bar-padding: .8rem 1.2rem;
+$query-bar-padding-top: 0.8em;
+$query-bar-padding-bottom: 0.8em;
+$query-bar-padding-right: 1.2em;
+$query-bar-padding-left: 1.2em;
+$query-bar-padding: $query-bar-padding-top $query-bar-padding-right $query-bar-padding-bottom $query-bar-padding-left;
 
 $query-bar-identifier: #BCC9DC;
+$query-bar-identifier-width: 0.4em;
 $query-bar-identifier-active: #F5B800; 
 
 $query-bar-button-hover-color: $query-default-action-hover-color;
@@ -36,6 +41,7 @@ $query-combiner-button-focus-color: $query-default-action-focus-color;
 
 
 $query-icon-operator-color: #5A77A0;
+$query-text-operator-color-hover: #26436E; 
 $query-icon-operator-color-hover: #26436E; 
 $query-icon-label-operator-color: #26436E;
 $query-total-color: inherit;

diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -1,6 +1,6 @@
 # @ferlab-ui React core components
 
-### Install
+## Install
 
     npm i @ferlab/ui
 
@@ -11,9 +11,18 @@ Styles are installed separetly
 [@ferlab/style](github/)
 
 
+## Development
 ### Storybook
 
-In order to see and test all available components, you can run 
+In order to see and test all available components
+
+First you need to build the components
+
+> npm run build
+
+or run in development mode 
+
+> npm start
 
 ```bash
 cd ferlab-ui/storybook

diff --git a/packages/ui/src/components/QueryBuilder/Combiner.tsx b/packages/ui/src/components/QueryBuilder/Combiner.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { Button, Dropdown, Menu } from 'antd';
+import { Button, Tooltip } from 'antd';
 
 import StackLayout from '../../layout/StackLayout';
 
 import AndOperator from './icons/AndOperator';
 import OrOperator from './icons/OrOperator';
-import { CombinerEnum, IDictionary, TSqonGroupOp } from './types';
+import { CombinerEnum, IDictionary } from './types';
+import { TSqonGroupOp } from '../../data/types';
 
 import styles from '@ferlab/style/components/queryBuilder/Combiner.module.scss';
 
@@ -15,27 +16,35 @@ interface ICombinerProps {
     onChange: (type: TSqonGroupOp) => void;
 }
 
-const Combiner: React.FC<ICombinerProps> = ({ onChange, type, dictionary = {} }) => (
-    <StackLayout className={styles.container}>
-        <Dropdown
-            overlay={
-                <Menu>
-                    <Menu.Item className={styles.menuItem} onClick={() => onChange(CombinerEnum.And)}>
-                        <AndOperator className={styles.itemIcon} />{' '}
-                        {dictionary.query?.combine?.intersection || 'Intersection'}
-                    </Menu.Item>
-                    <Menu.Item className={styles.menuItem} onClick={() => onChange(CombinerEnum.Or)}>
-                        <OrOperator className={styles.itemIcon} /> {dictionary.query?.combine?.union || 'Union'}
-                    </Menu.Item>
-                </Menu>
-            }
-            trigger={['click']}
-        >
-            <Button className={styles.button} type="text">
-                {type === 'and' ? <AndOperator /> : <OrOperator />}
-            </Button>
-        </Dropdown>
-    </StackLayout>
-);
+const Combiner: React.FC<ICombinerProps> = ({ onChange, type, dictionary = {} }) => {
+    const isAndOperator = () => {
+        return type === 'and';
+    };
+
+    const toggleOperator = () => {
+        onChange(isAndOperator() ? CombinerEnum.Or : CombinerEnum.And);
+    };
+
+    const getTooltipTitle = () => {
+        return `
+            ${dictionary.actions?.changeOperatorTo || 'Change operator to'}
+            ${isAndOperator() ? dictionary.query?.combine?.or || 'Or' : dictionary.query?.combine?.and || 'And'}
+        `;
+    };
+
+    return (
+        <StackLayout className={styles.container}>
+            <Tooltip title={getTooltipTitle()} align={{ offset: [0, 5] }}>
+                <Button className={styles.button} type="text" onClick={() => toggleOperator()}>
+                    {isAndOperator() ? (
+                        <AndOperator className={styles.operator} />
+                    ) : (
+                        <OrOperator className={styles.operator} />
+                    )}
+                </Button>
+            </Tooltip>
+        </StackLayout>
+    );
+};
 
 export default Combiner;
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,5 +5,4 @@ lib/ @@
     .vscode
     build/
     storybook-static/
-    storybook/