Add bitdev, lint

.bitmap

@@ -0,0 +1,59 @@
+/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
+
+{
+    "dhi-solutions.shared/ui/copy-to-clipboard@0.0.1": {
+        "files": [
+            {
+                "relativePath": "src/components/CopyToClipboard/CopyToClipboard.tsx",
+                "test": false,
+                "name": "CopyToClipboard.tsx"
+            },
+            {
+                "relativePath": "src/components/CopyToClipboard/index.ts",
+                "test": false,
+                "name": "index.ts"
+            }
+        ],
+        "mainFile": "src/components/CopyToClipboard/index.ts",
+        "trackDir": "src/components/CopyToClipboard",
+        "origin": "AUTHORED",
+        "exported": true
+    },
+    "dhi-solutions.shared/ui/fullscreen-loader@0.0.1": {
+        "files": [
+            {
+                "relativePath": "src/components/FullscreenLoader/FullscreenLoader.tsx",
+                "test": false,
+                "name": "FullscreenLoader.tsx"
+            },
+            {
+                "relativePath": "src/components/FullscreenLoader/index.ts",
+                "test": false,
+                "name": "index.ts"
+            }
+        ],
+        "mainFile": "src/components/FullscreenLoader/index.ts",
+        "trackDir": "src/components/FullscreenLoader",
+        "origin": "AUTHORED",
+        "exported": true
+    },
+    "dhi-solutions.shared/ui/inline-legend@0.0.1": {
+        "files": [
+            {
+                "relativePath": "src/components/InlineLegend/InlineLegend.tsx",
+                "test": false,
+                "name": "InlineLegend.tsx"
+            },
+            {
+                "relativePath": "src/components/InlineLegend/index.ts",
+                "test": false,
+                "name": "index.ts"
+            }
+        ],
+        "mainFile": "src/components/InlineLegend/index.ts",
+        "trackDir": "src/components/InlineLegend",
+        "origin": "AUTHORED",
+        "exported": true
+    },
+    "version": "14.8.8"
+}

.gitignore

@@ -21,4 +21,4 @@ __snapshots__
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
+.eslintcache

README.md

@@ -12,6 +12,11 @@
 
 Generic react components library for our frontends. The npm package can be found [here](https://www.npmjs.com/package/@dhi-gras/react-components).
 
+
+# Components should be used from [shared solutions Bit collection](https://bit.dev/dhi-solutions/shared)
+This repository can still be used for developing and publishing the components to the collection.  
+
+
 This package is created using [TypeScript](https://www.typescriptlang.org/) and [MaterialUI](https://material-ui.com/), built using [Yarn](https://classic.yarnpkg.com/en/) and bundled using [Webpack](https://webpack.js.org/).
 
 # Showcase

bit.json

@@ -0,0 +1,7 @@
+{
+	"env": {
+		"compiler": "bit.envs/compilers/typescript@3.1.53"
+	},
+	"componentsDefaultDirectory": "src/components/{name}",
+	"packageManager": "yarn"
+}

dist/CopyToClipboard.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export interface Props {
+    disabled?: boolean;
+    successLabel?: string;
+    tooltipLabel?: string;
+    toCopy?: string;
+    afterCopy?: Function;
+}
+declare const CopyToClipboard: FC<Props>;
+export default CopyToClipboard;

dist/CopyToClipboard.js

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { Grid, Tooltip } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+import Clipboard from 'react-clipboard.js';
+const useStyles = makeStyles(() => ({
+    disabledRoot: {
+        color: '#cfdbe2',
+        cursor: 'no-drop',
+    },
+    enabledRoot: {
+        color: '#0b4566',
+        cursor: 'pointer',
+    },
+    gridItem: {
+        width: 32,
+    },
+    clipboard: {
+        background: 'none',
+        border: '0px',
+        outline: 'none',
+    },
+    outlineIcon: {
+        width: 21,
+        height: 21,
+    },
+}));
+const CopyToClipboard = ({ disabled = false, successLabel = 'URL copied to Clipboard.', tooltipLabel = 'Copy URL', toCopy = window.location.href, afterCopy, }) => {
+    const classes = useStyles();
+    const [tooltip, setTooltip] = useState(tooltipLabel);
+    const copy = () => {
+        if (disabled)
+            return;
+        setTooltip(successLabel);
+        if (afterCopy)
+            afterCopy();
+        setTimeout(() => {
+            setTooltip(tooltipLabel);
+        }, 5000);
+    };
+    return (React.createElement(Grid, { container: true, spacing: 0, justify: 'space-between', alignItems: 'flex-end', className: disabled ? classes.disabledRoot : classes.enabledRoot, onClick: copy },
+        React.createElement(Grid, { item: true, className: classes.gridItem },
+            React.createElement(Grid, { container: true, alignItems: 'center', justify: 'center' },
+                React.createElement(Clipboard, { "data-clipboard-text": toCopy, className: `copy-clipboard ${classes.clipboard}` },
+                    React.createElement(Tooltip, { title: tooltip },
+                        React.createElement(FileCopyOutlinedIcon, { color: 'primary', className: classes.outlineIcon })))))));
+};
+export default CopyToClipboard;

dist/FullscreenLoader.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface Props {
+    isLoading?: boolean;
+    variant?: 'topbar' | 'blocking';
+}
+declare const Loader: FC<Props>;
+export default Loader;

dist/FullscreenLoader.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { CircularProgress, LinearProgress, Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+const useStyles = makeStyles(() => ({
+    blocking: {
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        height: '100vh',
+        zIndex: 2000,
+        backgroundColor: 'rgba(13,57,88,0.9)',
+        color: '#ffffff',
+    },
+    topbar: {
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        right: 0,
+        height: '4px',
+        zIndex: 2000,
+        color: 'white',
+    },
+}));
+const Loader = ({ isLoading = false, variant = 'blocking', }) => {
+    const classes = useStyles();
+    if (isLoading) {
+        if (variant === 'blocking')
+            return (React.createElement(Grid, { container: true, alignItems: 'center', justify: 'center', className: classes.blocking },
+                React.createElement(CircularProgress, { color: 'inherit', size: 50, thickness: 5 })));
+        return (React.createElement("div", { className: classes.topbar },
+            React.createElement(LinearProgress, { color: 'primary' })));
+    }
+    return null;
+};
+export default Loader;

dist/InlineLegend.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export declare type LegendProps = {
+    imageSrc?: string;
+    length?: number;
+    range: number[] | string[];
+    unit?: string;
+    colorRange?: string[];
+};
+declare const Legend: FC<LegendProps>;
+export default Legend;

dist/InlineLegend.js

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+const useStyles = makeStyles(() => ({
+    colorbar: {
+        width: '100%',
+        height: 6,
+        borderRadius: 4,
+        display: 'inline-block',
+    },
+    gradient: {
+        background: ({ colorRange }) => (colorRange ? `linear-gradient(to right, ${colorRange.join(', ')})` : '#000'),
+    },
+    maxWidth: {
+        width: '100%',
+    },
+    fontSize: {
+        fontSize: 10,
+    },
+}));
+const Legend = ({ imageSrc, length, range, colorRange, unit = '', }) => {
+    const classes = useStyles({ colorRange });
+    const [val, setVals] = useState();
+    const [firstRangeItem, secondRangeItem] = range;
+    const legendLength = length !== null && length !== void 0 ? length : 2 - 1;
+    useEffect(() => {
+        if (typeof range[0] === 'number' && typeof range[1] === 'number') {
+            const arr = [];
+            const diff = range[1] - range[0];
+            const incr = diff / legendLength;
+            for (let i = 0; i <= legendLength; i++) {
+                const value = range[0] + incr * i;
+                arr.push(value.toFixed(2));
+            }
+            setVals(arr);
+        }
+    }, [range]);
+    const LegendUnits = typeof firstRangeItem === 'number' && typeof secondRangeItem === 'number' && val ? (React.createElement(Box, { display: 'flex', justifyContent: 'space-between' }, val.map((v, i) => (React.createElement(Typography, { key: i, className: classes.fontSize }, `${v}${unit}`))))) :
+        firstRangeItem &&
+            secondRangeItem && (React.createElement(Box, { display: 'flex', justifyContent: 'space-between' },
+            React.createElement(Typography, { className: classes.fontSize }, firstRangeItem + unit),
+            React.createElement(Typography, { className: classes.fontSize }, secondRangeItem + unit)));
+    return (React.createElement(Box, { className: classes.maxWidth },
+        imageSrc && React.createElement("img", { src: imageSrc, alt: '', className: classes.colorbar }),
+        React.createElement("span", { className: `${classes.colorbar} ${classes.gradient}` }),
+        LegendUnits));
+};
+export default Legend;

dist/index.d.ts

@@ -1,12 +1 @@
-import { default as AboutCard } from './components/AboutCard';
-import { default as CopyToClipboard } from './components/CopyToClipboard';
-import { default as DashboardCard } from './components/DashboardCard';
-import { default as DynamicForm } from './components/DynamicForm';
-import { default as GrasTheme } from './components/GrasTheme';
-import { default as Information } from './components/Information';
-import { default as Legend } from './components/Legend';
-import { default as Loader } from './components/Loader';
-import { default as SidebarControl } from './components/SidebarTitle';
-import { default as SidebarTitle } from './components/SidebarTitle';
-import { default as Slider } from './components/Slider';
-export { AboutCard, CopyToClipboard, DashboardCard, DynamicForm, GrasTheme, Information, Legend, Loader, SidebarControl, SidebarTitle, Slider, };
+export { default } from './CopyToClipboard';