@redsift/design-system-legacy 8.0.0 → 8.0.1

package/dist/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@redsift/design-system-legacy",
+  "publishConfig": {
+    "directory": "dist"
+  },
+  "main": "index.js",
+  "module": "index.js",
+  "sideEffects": false,
+  "scripts": {
+    "build": "rollup -c",
+    "prepare": "install-peers || exit 0",
+    "prepublishOnly": "yarn build"
+  },
+  "version": "8.0.1",
+  "dependencies": {
+    "classnames": "^2.3.1",
+    "match-sorter": "^6.3.1",
+    "prop-types": "^15.8.1",
+    "react-csv": "^2.2.2",
+    "react-table": "^7.7.0",
+    "react-window": "^1.8.6",
+    "simplebar": "^5.3.4",
+    "simplebar-react": "^2.3.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-export-default-from": "^7.16.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@babel/plugin-proposal-private-methods": "^7.16.11",
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
+    "@babel/preset-env": "^7.17.10",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-typescript": "^7.16.7",
+    "@rollup/plugin-babel": "^6.0.2",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@svgr/rollup": "^6.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.26.0",
+    "autoprefixer": "^9.7.4",
+    "babel-plugin-require-context-hook": "^1.0.0",
+    "dts-bundle-generator": "^7.1.0",
+    "identity-obj-proxy": "^3.0.0",
+    "install-peers-cli": "^2.2.0",
+    "postcss-flexbox-unboxer": "^1.0.0",
+    "postcss-hover-media-feature": "^1.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rollup": "^2.72.1",
+    "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-cleaner": "^1.0.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-ts-paths-resolve": "^1.7.1",
+    "rollup-plugin-typescript-paths": "^1.3.1"
+  },
+  "peerDependencies": {
+    "react": "17 || 18",
+    "react-dom": "17 || 18",
+    "styled-components": "^5.3.5"
+  }
+}

package/package.json

@@ -11,7 +11,7 @@
     "prepare": "install-peers || exit 0",
     "prepublishOnly": "yarn build"
   },
-  "version": "8.0.0",
+  "version": "8.0.1",
   "dependencies": {
     "classnames": "^2.3.1",
     "match-sorter": "^6.3.1",
@@ -61,6 +61,5 @@
     "react": "17 || 18",
     "react-dom": "17 || 18",
     "styled-components": "^5.3.5"
-  },
-  "gitHead": "d5b44ad25f944f5869829750628000b346718034"
+  }
 }

package/rollup.config.js

@@ -0,0 +1,70 @@
+import { babel } from '@rollup/plugin-babel';
+import analyze from 'rollup-plugin-analyzer';
+import autoExternal from 'rollup-plugin-auto-external';
+import cleaner from 'rollup-plugin-cleaner';
+import commonjs from '@rollup/plugin-commonjs';
+import copy from 'rollup-plugin-copy';
+import path from 'path';
+import resolve from '@rollup/plugin-node-resolve';
+import svgr from '@svgr/rollup';
+import tsPathsResolve from 'rollup-plugin-ts-paths-resolve';
+
+import pkg from './package.json';
+const BABEL_CONFIG = require('../../babel.config');
+
+const ROOT_PATH = path.resolve(__dirname, '..', '..');
+const DIST_PATH = path.resolve(__dirname, pkg.publishConfig.directory);
+export const extensions = ['.js', '.jsx', '.ts', '.tsx'];
+
+const input = Object.fromEntries([
+    ['index', 'src/index.ts'],
+]);
+
+export default {
+    input,
+    output: {
+        format: 'esm',
+        sourcemap: true,
+        hoistTransitiveImports: false,
+        dir: DIST_PATH,
+        // Unnamed chunk moved to `_internal` folder
+        chunkFileNames: '_internal/[name].js',
+    },
+    plugins: [
+        /** Clean dist dir */
+        cleaner({ targets: [DIST_PATH] }),
+        /** Externalize dependencies */
+        autoExternal(),
+        /** Analyze created bundle */
+        analyze(),
+        /** Resolve tsconfig paths. */
+        tsPathsResolve(),
+        /** Resolve source files */
+        resolve({ browser: true, extensions }),
+        /** Resolve commonjs dependencies */
+        commonjs({ include: /node_modules/ }),
+        /** Handle SVG */
+        svgr(),
+        /** Transpile JS/TS */
+        babel({
+            babelHelpers: 'bundled',
+            extensions,
+            exclude: /node_modules/,
+            plugins: BABEL_CONFIG.plugins,
+            presets: [
+                ['@babel/preset-env', { targets: 'defaults' }],
+                '@babel/preset-react',
+                '@babel/preset-typescript'
+            ],
+        }),
+        /** Copy additional files to dist */
+        copy({
+            targets: [
+                { src: path.join(ROOT_PATH, 'CONTRIBUTING.md'), dest: DIST_PATH },
+                { src: path.join(ROOT_PATH, 'LICENSE.md'), dest: DIST_PATH },
+                { src: path.join(__dirname, 'README.md'), dest: DIST_PATH },
+                { src: path.join(__dirname, 'package.json'), dest: DIST_PATH },
+            ],
+        }),
+    ],
+};

package/src/components/Alert/Alert.jsx

@@ -0,0 +1,94 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+import { WarningTriangle, Cross } from '../icons';
+
+const kindToColor = {
+  success: "#e0ffe2",
+  info: "#dbf1ff",
+  warning: "#fff6dd",
+  danger: "#ffe3e0",
+};
+
+const kindToCornerColor = {
+  warning: "#FCBB54",
+  danger: "#E06354",
+};
+
+const AlertContainer = styled.div`
+  position: relative;
+  padding: 1.5em 3em;
+  display: flex;
+  flex-direction: row;
+  background-color: ${(props) => kindToColor[props.type]};
+  justify-content: space-between;
+  ${(props) => (props.fluid ? "width: 100%;" : "")}
+  align-items: ${(props) => (props.simple ? "center" : "flex-start")};
+  > button {
+    align-self: ${(props) => (props.simple ? "center" : "flex-start")};
+  }
+  line-height: 1.3em;
+`;
+
+const Title = styled(Typography)`
+  font-family: Raleway;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  font-size: 1.12em;
+`;
+
+const Content = styled(Typography)`
+  color: #333;
+  font-weight: medium;
+  > p {
+    margin-bottom: 0;
+  }
+`;
+
+const CloseButton = styled(Button)`
+  ${(props) =>
+    props.simple
+      ? "margin: 0 -2em 0 2em;"
+      : `
+    position: absolute;
+    top: .75em;
+    right: .5em;
+  `}
+`;
+
+const WarningContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.5em 0.75em 0.75em 0.5em;
+  border-radius: 0 0 3.5em 0;
+  background-color: ${(props) => props.color};
+`;
+
+export const Alert = ({ children, type = "info", fluid, title, onClose, ...rest }) => (
+  <AlertContainer
+    type={type}
+    simple={!title}
+    fluid={fluid}
+    role="alert"
+    {...rest}
+  >
+    <div>
+      {kindToCornerColor[type] && (
+        <WarningContainer color={kindToCornerColor[type]}>
+          <WarningTriangle fill="#FFF" fillBar width={20} />
+        </WarningContainer>
+      )}
+      {title && <Title>{title}</Title>}
+      <Content>{children}</Content>
+    </div>
+    {onClose && (
+      <CloseButton flatIcon simple={!title} onClick={onClose}>
+        <Cross title="dismiss" width={title ? 10 : 12} />
+      </CloseButton>
+    )}
+  </AlertContainer>
+);

package/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export * from './Alert';

package/src/components/Alert/readme.md

@@ -0,0 +1,114 @@
+### Accessibility
+
+- Ensure both the label and id props are completed
+
+### Props
+
+|  Prop       | Default |                                          Options |
+| :---------: | :-----: | -----------------------------------------------: |
+| children    |         |      string or text react component **Required** |
+| title       |         |                                           string |
+| type        | "info"  |        "success" | "info" | "warning" | "danger" |    
+| fluid       |         |                                          boolean |
+| onClose     |         |                                       () => void |
+| ...rest     |         |                                                  |
+
+### Examples
+
+Simple alerts
+```jsx
+<div
+  style={{
+    display: "flex",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-evenly"
+  }}
+>
+  <Alert>
+    Simple alert (only children)!
+  </Alert>
+  <Alert onClose={() => alert('onClose triggered')}>
+    Simple alert (only children) that can be closed
+  </Alert>
+</div>
+```
+
+With title and description
+```jsx
+<div
+  style={{
+    display: "flex",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-evenly"
+  }}
+>
+  <Alert title="Not so simple">
+    Simple alert (only children)!
+  </Alert>
+  <Alert
+    title="Still not so simple" 
+    onClose={() => alert('onClose triggered')}
+  >
+    Simple alert (only children) that can be closed
+  </Alert>
+</div>
+```
+
+Fluid
+```jsx
+<div
+  style={{
+    display: "flex",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-evenly"
+  }}
+>
+  <Alert title="Not so simple" fluid>
+    Lorem ipsum dolor sit amet
+  </Alert>
+<br/>
+  <Alert
+    title="Still not so simple" 
+    onClose={() => alert('onClose triggered')}
+    fluid
+  >
+    Lorem ispum dolor sit amet
+  </Alert>
+</div>
+```
+
+Variants
+```jsx
+<div
+  style={{
+    display: "flex",
+    flexWrap: "wrap",
+    flexDirection: "column",
+  }}
+>
+  <Alert type="success" title="Success [type='success', title=...]">
+    type="success"
+  </Alert>
+  <br/>
+  <Alert type="info" title="[type='info', title=..., onClose={...}]" onClose={() => {}}>
+    type="info"
+  </Alert>
+  <br/>
+  <Alert type="warning" title="Caution! [type='warning', title=...., onClose={...}]" onClose={() => {}}>
+    Damn gerbils have stopped running again! Someone has been dispatched to poke them with a sharp stick.
+  </Alert>
+  <br/>
+  <Alert type="danger" title="Whoops! something went wrong [type='danger', title=...]">
+    The application has encountered an unknown error.
+    It doesn't appear to have affected your data, but our technical staff have been automatically notified and will be 
+    looking into this with the utmost urgency.
+  </Alert>
+</div>
+```
+

package/src/components/Button/Button.jsx

@@ -0,0 +1,161 @@
+import React, { Fragment } from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const spin = keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+  `;
+
+const Loader = styled.div`
+  position: absolute;
+  top: calc(50% - 10px);
+  left: calc(50% - 10px);
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-top-color: ${(props) => props.color || "#fff"};
+  border-radius: 50%;
+  width: 1.1em;
+  height: 1.1em;
+  animation: ${spin} 1s linear infinite;
+`;
+
+const BaseButton = styled.button`
+  position: relative;
+  font-size: 0.875rem;
+  background-color: transparent;
+  font-family: Raleway, sans-serif;
+  user-select: none;
+  border-radius: 4px;
+  padding: 0px 16px;
+  height: 40px;
+  vertical-align: middle;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
+  text-decoration: none;
+  text-align: center;
+  outline: 0;
+  border-width: 0;
+  cursor: pointer;
+  &:disabled {
+    color: rgba(0, 0, 0, 0.26);
+    cursor: default;
+  }
+  &:disabled:hover {
+    background-color: transparent;
+  }
+`;
+
+const FlatButton = styled(BaseButton)`
+  color: ${(props) => props.color || ""};
+  &:hover {
+    background-color: ${(props) => props.hoverColor || ""};
+  }
+`;
+
+const IconButton = styled(BaseButton)`
+  align-self: center;
+  padding: 0px;
+  margin: 0px 5px;
+  height: unset;
+`;
+
+const OutlinedButton = styled(BaseButton)`
+  border-style: solid;
+  border-width: 1px;
+  border-color: ${(props) => props.color || ""};
+  color: ${(props) => props.color || ""};
+  &:hover {
+    background-color: ${(props) => props.hoverColor || ""};
+  }
+  &:disabled {
+    border-color: rgba(0, 0, 0, 0.12);
+  }
+`;
+
+const DefaultButton = styled(BaseButton)`
+  color: #fff;
+  background-color: ${(props) => props.color || ""};
+  &:hover {
+    background-color: ${(props) => props.hoverColor || props.color || ""};
+  }
+  &:disabled {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+  &:disabled:hover {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+`;
+
+const RaisedButton = styled(DefaultButton)`
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
+  &:disabled {
+    box-shadow: none;
+  }
+`;
+
+export const Button = (props) => {
+  const {
+    isLoading,
+    children,
+    color,
+    hoverColor,
+    flat,
+    flatIcon,
+    raised,
+    outlined,
+    loaderStyles,
+    danger,
+    white,
+    onClick,
+    type = "button",
+    ...rest
+  } = props;
+
+  const Component = flat
+    ? FlatButton
+    : outlined
+    ? OutlinedButton
+    : flatIcon
+    ? IconButton
+    : raised
+    ? RaisedButton
+    : DefaultButton;
+
+  const buttonColor =
+    "color" in props ? color : danger ? "#e06354" : white ? "#fff" : "";
+
+  const buttonHoverColor =
+    "hoverColor" in props
+      ? hoverColor
+      : danger
+      ? !flat && !outlined
+        ? "#c23324"
+        : "rgba(224, 99, 84, 0.1)"
+      : white
+      ? !flat && !outlined
+        ? "#f2f2f2"
+        : "rgba(255, 255, 255, 0.2)"
+      : "";
+
+  const loaderColor = !flat && !outlined ? "#fff" : buttonColor;
+
+  return (
+    <Component
+      color={buttonColor}
+      hoverColor={buttonHoverColor}
+      onClick={!isLoading ? onClick : null}
+      type={type}
+      {...rest}
+    >
+      {isLoading ? (
+        <Fragment>
+          <Loader color={loaderColor} style={{ loaderStyles }} />
+          <div style={{ visibility: "hidden" }}>{children}</div>
+        </Fragment>
+      ) : (
+        children
+      )}
+    </Component>
+  );
+};

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

package/src/components/Button/readme.md

@@ -0,0 +1,173 @@
+### Accessibility
+
+- Anything clickable must be wrapped in a `<Button>`, `<a>` or `<input>` tag. `<div>`'s should not have onClicks
+- Icon Buttons (buttons that do not have any text) must have an `aria-label`
+
+### Props
+
+|     Prop     | Default |                                                                                                                            Options |
+| :----------: | :-----: | ---------------------------------------------------------------------------------------------------------------------------------: |
+|  isLoading   |  false  |                                                                       If true, shows loader spinner and disables the onClick event |
+|    color     |         |                                                                                                                             Colors |
+|  hoverColor  |         |                                                                                                                             Colors |
+| loaderStyles |         |                                                                                                                      inline Styles |
+|   disabled   |  false  |                                                                                                                            Boolean |
+|     flat     |  false  |                                                                                                                            Boolean |
+|   flatIcon   |  false  | If true, changes styles to a button style suitable for icons (no text content). Ensure `aria-label` and `title` props are provided |
+|   outlined   |  false  |                                                                                                                            Boolean |
+|    raised    |  false  |                                                                                                                            Boolean |
+|    danger    |  false  |                                                                                                                            Boolean |
+|    white     |  false  |                                                                                                                            Boolean |
+|   onClick    |         |                                                                                                                           Function |
+|   children   |         |                                                                                                                                    |
+|   ...rest    |         |                                                                                                                                    |
+
+### Examples
+
+App Examples
+
+```js
+<div>
+  <div
+    style={{
+      display: 'flex',
+      flexWrap: 'wrap',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-evenly',
+      marginBottom: '10px',
+    }}
+  >
+    <Button color="#02ac61" hoverColor="#029756">
+      Default
+    </Button>
+    <Button raised color="#02ac61" hoverColor="#029756">
+      Raised
+    </Button>
+    <Button outlined color="#02ac61" hoverColor="rgba(2, 172, 97, 0.1)">
+      Outlined
+    </Button>
+    <Button flat color="#02ac61" hoverColor="rgba(2, 172, 97, 0.1)">
+      Flat
+    </Button>
+  </div>
+  <div
+    style={{
+      display: 'flex',
+      flexWrap: 'wrap',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-evenly',
+      marginBottom: '10px',
+    }}
+  >
+    <Button color="#33b222" hoverColor="#2b961d">
+      Default
+    </Button>
+    <Button raised color="#33b222" hoverColor="#2b961d">
+      Raised
+    </Button>
+    <Button outlined color="#33b222" hoverColor="rgba(51, 187, 34, 0.1)">
+      Outlined
+    </Button>
+    <Button flat color="#33b222" hoverColor="rgba(51, 187, 34, 0.1)">
+      Flat
+    </Button>
+  </div>
+  <div
+    style={{
+      display: 'flex',
+      flexWrap: 'wrap',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-evenly',
+      marginBottom: '10px',
+    }}
+  >
+    <Button color="#53C3EB" hoverColor="#1bafe4">
+      Default
+    </Button>
+    <Button raised color="#53C3EB" hoverColor="#1bafe4">
+      Raised
+    </Button>
+    <Button outlined color="#53C3EB" hoverColor="rgba(83, 195, 235, 0.1)">
+      Outlined
+    </Button>
+    <Button flat color="#53C3EB" hoverColor="rgba(83, 195, 235, 0.1)">
+      Flat
+    </Button>
+  </div>
+</div>
+```
+
+More Examples
+
+```js
+<div
+  style={{
+    display: "flex",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-evenly"
+  }}
+>
+  <Button disabled color="green" hoverColor="#CCC">
+    Disabled
+  </Button>
+      <Button disabled outlined color="green" hoverColor="#CCC">
+    Disabled
+  </Button>
+  <Button flat disabled color="green" hoverColor="#CCC">
+    Disabled
+  </Button>
+  <Button danger>
+    Danger
+  </Button>
+  <Button outlined danger>
+    Danger
+  </Button>
+  <Button flat danger>
+    Danger
+  </Button>
+  <Button isLoading color="#33b222" hoverColor="#2b961d">
+    Button
+  </Button>
+  <Button isLoading outlined color="#33b222" hoverColor="rgba(51, 187, 34, 0.1)">
+    Button
+  </Button>
+  <Button isLoading flat color="#33b222" hoverColor="rgba(51, 187, 34, 0.1)">
+    Button
+  </Button>
+  </div>
+  <div
+  style={{
+    display: "flex",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-evenly"
+  }}
+>
+  <div style={{ backgroundColor: "#33b222", padding: "3px" }}>
+    <Button outlined white>
+      White
+    </Button>
+    <Button flat white>
+      White
+    </Button>
+  </div>
+    <Button isLoading color="green" hoverColor="#CCC">
+    Custom
+  </Button>
+  <Button color="green" hoverColor="#CCC" style={{ color: "orange" }}>
+    Custom
+  </Button>
+    <Button color="green" hoverColor="#CCC" style={{ color: "orange", width: '150px' }}>
+    Custom
+  </Button>
+      <Button outlined color="green" hoverColor="#CCC" style={{width: '150px'}}>
+    Custom
+  </Button>
+</div>
+```