@redsift/design-system-legacy 8.0.1 → 8.0.3

package/package.json

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

package/dist/package.json

@@ -1,65 +0,0 @@
-{
-  "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/rollup.config.js

@@ -1,70 +0,0 @@
-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

@@ -1,94 +0,0 @@
-// @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

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

package/src/components/Alert/readme.md

@@ -1,114 +0,0 @@
-### 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

@@ -1,161 +0,0 @@
-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

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

package/src/components/Button/readme.md

@@ -1,173 +0,0 @@
-### 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>
-```