@thecb/components 2.2.0

package/.eslintrc.json

@@ -0,0 +1,29 @@
+{
+  "extends": ["plugin:prettier/recommended", "plugin:react/recommended"],
+  "plugins": ["babel", "prettier"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "react/jsx-filename-extension": 0,
+    "react/prop-types": 0,
+    "react/display-name": 0,
+    "prettier/prettier": "error",
+    "no-unused-vars": 2,
+    "babel/camelcase": 0,
+    "camelcase": ["off"]
+  },
+  "env": {
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  }
+}

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,18 @@
+## Description
+A brief description of the changes and purpose of the PR.
+
+## List of changes to be aware of:
+- [x] ....
+- [x] ....
+
+## Dev Tasks
+- [ ] specs
+- [ ] storys
+- [ ] lint
+- [ ] export component in ~/src/index.js
+
+## JIRA Task
+[ABCD-123](https://citybase.atlassian.net/browse/ABCD-123)
+
+## Screenshots
+(optional)

package/.github/stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 30
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - "Don't close"
+# Label to use when marking an issue as stale
+staleLabel: stale
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed within seven days if no further activity
+  occurs. If it needs to remain open, add the "Don't close" label.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: >
+  This issue has been automatically closed because it was stale.

package/.prettierignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.storybook/

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 10.15.3

package/README.md

@@ -0,0 +1,149 @@
+# Citybase JS Components
+
+This should be used for basic components that can be reused across applications with a standardized set of functionality hooks and props and base styles.
+
+<!-- TOC -->
+
+- [Setup](#setup)
+- [Testing](#testing)
+- [Base Styles for components](#base-styles-for-components)
+- [Storybook](#storybook)
+  - [Storybook QA Environment](#storybook-qa-environment)
+  - [Storybook addons](#storybook-addons)
+- [Deploying new changes](#deploying-new-changes)
+- [Consuming in your application](#consuming-in-your-application)
+  - [Prod import](#prod-import)
+  - [Local import](#local-import)
+  - [Package.json updates](#packagejson-updates)
+  - [Circle CI needed setup](#circle-ci-needed-setup)
+- [Using in your application](#using-in-your-application)
+- [Wikitext Component Markdown](#wikitext-component-markdown)
+- [Listview Component Table](#listview-component-table)
+- [ExternalRedirect link protection library](#externalredirect-link-protection-library)
+
+<!-- /TOC -->
+
+## Setup
+
+- Install Node.js with [asdf](https://citybase.atlassian.net/wiki/spaces/DEV/pages/49777332/First+Time+Environment+Setup) by running `asdf install`
+- `brew install yarn && yarn`
+
+The following statement will inheritly be called with `yarn`, but you can run it with this command to not try to fetch new dependencies
+
+- `yarn run build`
+
+## Testing
+
+- All components are to have specs with coverage to 100%.
+  - Specs are to be added to the `__tests__` folder with an extension of `.spec.js`
+
+## Base Styles for components
+
+- If a component needs base styles from the library to be exposed, please add to the root component folder with the extension of `.css`
+  - This will be the current direction of including styles until [IMP-857](https://citybase.atlassian.net/browse/IMP-857) is fully fleshed out and implemented.
+
+Example directory structure -
+
+```
+citybase_js_components
+  |- .storybook-stories
+    |- component.js
+  |- src
+    |- component
+      |- __tests__
+        |- component.spec.js
+      component.css
+      component.js
+      component.types.js
+      index.js
+```
+
+CLI -
+Run all tests and produce a code coverage report.
+
+- `yarn test`
+  Run Jest in "watch mode" and do not produce a code coverage report. (Useful while writing new tests.)
+- `yarn run jest --watch --coverage=false`
+
+## Storybook
+
+This repo uses [React Storybook](https://storybook.js.org/basics/guide-react/) for interactive component display.
+
+### Storybook QA Environment
+
+[https://js-assets.qa.citybase.thecb.net/](https://js-assets.qa.citybase.thecb.net/)
+
+### Storybook addons
+
+- [Actions](https://github.com/storybooks/storybook/tree/master/addons/actions)
+- [Knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs)
+
+Please include new component stories as this library will also be a sandbox. **Please consider these as important as unit tests.**
+
+- `yarn storybook`
+- open browser to localhost:9001
+
+## Deploying new changes
+
+After new changes are ready to be deployed:
+
+- `yarn build`
+- [Tag off changes on Github](https://github.com/CityBaseInc/citybase_js_components/releases)
+
+## Consuming in your application
+
+### Prod import
+
+- `npm i git+ssh://git@github.com:CityBaseInc/citybase_js_components.git#<commit-ish> --save`
+- I would suggest using a tagged version of the component library as the default (master branch) can be unstable.
+- Learn more about [Git urls as dependencies](https://docs.npmjs.com/files/package.json#git-urls-as-dependencies)
+
+### Local import
+
+- `npm i ../local/path/to/citybase_js_components --save`
+- This should persist changes up through the consuming application so that you don't have to rebuild and re `npm install` on every change.
+
+### Package.json updates
+
+As the citybase_js_components is not built and delivered from a package manager, when the package is imported, it will serve up raw source files. You will likely need to update your package.json file to include any `citybase` labelled node_module package to use your babel processor.
+
+```javascript
+// in package.json
+{
+  test: /\.jsx?$/,
+  exclude: /node_modules\/(?!citybase).*/,
+  use: ['babel-loader'],
+},
+```
+
+### Circle CI needed setup
+
+Please follow
+[this step by step document](https://citybase.atlassian.net/wiki/spaces/DEV/pages/276267015/How+to+set+up+CircleCI+to+have+permissions+from+multiple+repos) on how to allow CircleCI to reference multiple repositories
+
+## Using in your application
+
+- `import { Button } from 'citybase_js_components';`
+- or alias the component:
+- `import { Button as CBButton } from 'citybase_js_components';`
+
+## Wikitext Component Markdown
+
+The wikitext uses showdownjs to render markdown to html.
+
+- Syntax docs can be found here: https://github.com/showdownjs/showdown/wiki/Showdown's-Markdown-syntax
+- Live editor: http://demo.showdownjs.com/
+- Showdownjs documentation: https://github.com/showdownjs/showdown/wiki
+
+## Listview Component Table
+
+The listview component uses React-Table as the brains of the table.
+
+- Live table: https://react-table.js.org/
+- Documentation: https://github.com/react-tools/react-table
+
+## ExternalRedirect link protection library
+
+This lib helps prevent against reverse tabnabbing.
+
+- Blankshield: https://github.com/danielstjules/blankshield

package/dist/cb-components.cjs.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = _interopDefault(require('react'));
+var styled = _interopDefault(require('styled-components'));
+
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
+}
+
+/*
+Need to add a new color? Visit http://chir.ag/projects/name-that-color to generate a color name.
+
+Name already taken? If you can't use the existing color, then use thesaurus.com to pick a similar name
+to the one generated by name-that-color.
+*/
+var PEWTER_GREY = "#DFE1E4";
+var MARINER_BLUE = "#2E75D2";
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n  height: 16px;\n  width: 16px;\n  background-color: ", ";\n  border-radius: 8px;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n  height: 24px;\n  width: 24px;\n  border: 1px solid\n    ", ";\n  border-radius: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 10px;\n  min-width: 24px;\n  min-height: 24px;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var defaultTheme = {
+  theme: {
+    accentColor: MARINER_BLUE,
+    inactiveColor: PEWTER_GREY
+  }
+};
+var RadioButtonBorder = styled.div(_templateObject(), function (_ref) {
+  var isSelected = _ref.isSelected,
+      theme = _ref.theme;
+  return isSelected ? theme.accentColor : theme.inactiveColor;
+});
+RadioButtonBorder.defaultProps = defaultTheme;
+var RadioButtonCenter = styled.div(_templateObject2(), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.accentColor;
+});
+RadioButtonCenter.defaultProps = defaultTheme;
+
+var RadioButton = function RadioButton(_ref3) {
+  var isSelected = _ref3.isSelected,
+      name = _ref3.name;
+  return React.createElement(RadioButtonBorder, {
+    isSelected: isSelected,
+    name: name
+  }, isSelected && React.createElement(RadioButtonCenter, null));
+};
+
+exports.RadioButton = RadioButton;

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@thecb/components",
+  "version": "2.2.0",
+  "description": "Common lib for CityBase react components",
+  "main": "dist/cb-components.cjs.js",
+  "module": "dist/cb-components.esm.js",
+  "source": "src/index.js",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "microbundle watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cb-components.git"
+  },
+  "author": "CityBase Inc.",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/CityBaseInc/cb-components/issues"
+  },
+  "homepage": "https://github.com/CityBaseInc/cb-components#readme",
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.6.2",
+    "@rollup/plugin-json": "^4.0.3",
+    "@storybook/addon-a11y": "^5.3.14",
+    "@storybook/addon-actions": "^5.3.14",
+    "@storybook/addon-console": "^1.2.1",
+    "@storybook/addon-knobs": "^5.3.14",
+    "@storybook/addon-storysource": "^5.3.14",
+    "@storybook/addon-viewport": "^5.3.14",
+    "@storybook/react": "^5.3.14",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.1.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "connected-react-router": "^6.8.0",
+    "dompurify": "^2.0.11",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.20.0",
+    "formatted-input": "^0.1.3",
+    "framer-motion": "^1.11.0",
+    "html-react-parser": "^0.10.3",
+    "husky": "^4.2.3",
+    "numeral": "^2.0.6",
+    "prettier": "^1.19.1",
+    "pretty-quick": "^2.0.1",
+    "react-aria-modal": "^4.0.0",
+    "react-helmet": "^6.0.0",
+    "react-pose": "^4.0.10",
+    "react-router-dom": "^5.2.0",
+    "redux-freeform": "^4.1.2",
+    "rollup": "^1.21.4",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-resolve": "^5.1.0",
+    "sanctuary": "^3.0.0",
+    "storybook": "^5.3.14",
+    "styled-components": "^5.1.1",
+    "styled-media-query": "^2.1.2",
+    "styled-theming": "^2.2.0"
+  },
+  "peerDependencies": {
+    "connected-react-router": "^6.8.0",
+    "dompurify": "^2.0.11",
+    "formatted-input": "^0.1.3",
+    "framer-motion": "^1.11.0",
+    "html-react-parser": "^0.10.3",
+    "numeral": "^2.0.6",
+    "ramda": "^0.27.0",
+    "react": "^16.13.1",
+    "react-aria-modal": "^4.0.0",
+    "react-dom": "^16.13.1",
+    "react-helmet": "^6.0.0",
+    "react-is": "^16.13.1",
+    "react-pose": "^4.0.10",
+    "react-router-dom": "^5.2.0",
+    "redux-freeform": "^4.1.2",
+    "sanctuary": "^3.0.0",
+    "sanctuary-def": "^0.21.1",
+    "styled-components": ">=4.0.0",
+    "styled-media-query": ">=2.1.2",
+    "styled-theming": ">=2.2.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  }
+}

package/rollup.config.js

@@ -0,0 +1,35 @@
+import resolve from "rollup-plugin-node-resolve";
+import commonjs from "rollup-plugin-commonjs";
+import babel from "rollup-plugin-babel";
+import json from "rollup-plugin-json";
+import pkg from "./package.json";
+
+import * as reactIs from "react-is";
+import * as sanctuary from "sanctuary";
+import * as formattedInput from "formatted-input";
+
+export default [
+  {
+    input: "src/index.js",
+    output: [
+      // { file: 'docs/node_modules/oah-ui/dist/index.cjs.js', format: 'cjs' },
+      { file: pkg.module, format: "esm" }
+    ],
+    plugins: [
+      resolve({ preferBuiltins: false }),
+      babel({
+        exclude: "node_modules/**",
+        presets: ["@babel/env", "@babel/preset-react"]
+      }),
+      json(),
+      commonjs({
+        include: "node_modules/**",
+        namedExports: {
+          sanctuary: Object.keys(sanctuary),
+          "formatted-input": Object.keys(formattedInput)
+        }
+      })
+    ],
+    external: [...Object.keys(pkg.peerDependencies || {})]
+  }
+];

package/src/components/atoms/alert/Alert.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { AlertIcons, IconQuit } from "../../../deprecated/icons";
+import { Box, Cluster, Stack, Cover, Sidebar } from "../layouts";
+import Text from "../text";
+import { fallbackValues } from "./Alert.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const Alert = ({
+  heading,
+  text,
+  variant,
+  children,
+  height,
+  onLinkClick,
+  showQuitLink = true,
+  themeValues
+}) => {
+  const Icon = AlertIcons[variant];
+  return (
+    <Box
+      padding="0.5rem"
+      width="100%"
+      minHeight="100px"
+      height={height ? height : "auto"}
+      background={themeValues.background}
+      borderRadius="4px"
+      borderColor={themeValues.border}
+      borderSize="1px"
+    >
+      <Sidebar width="24px" childGap="0rem">
+        <Box padding="0 0 0 1rem" minHeight="100%">
+          <Cover minHeight="100%" singleChild>
+            <Box padding="0" width="1.5rem" minHeight="1.5rem">
+              <Icon />
+            </Box>
+          </Cover>
+        </Box>
+        <Box padding="0">
+          <Sidebar onRight width="24px" childGap="0rem">
+            <Box padding="1rem">
+              <Cluster justify="flex-start" align="center">
+                <Stack fullHeight childGap="0.25rem">
+                  <Text variant="p" color={themeValues.text} weight="600">
+                    {heading}
+                  </Text>
+                  <Text variant="pS" color={themeValues.text}>
+                    {text}
+                  </Text>
+                  {children}
+                </Stack>
+              </Cluster>
+            </Box>
+            <Cluster justify="flex-end" align="flex-start">
+              {showQuitLink && (
+                <Box padding="0" minHeight="100%" onClick={onLinkClick}>
+                  <IconQuit />
+                </Box>
+              )}
+            </Cluster>
+          </Sidebar>
+        </Box>
+      </Sidebar>
+    </Box>
+  );
+};
+
+export default themeComponent(Alert, "Alert", fallbackValues, "info");

package/src/components/atoms/alert/Alert.theme.js

@@ -0,0 +1,71 @@
+import {
+  APRICOT_ORANGE,
+  INFO_BLUE,
+  BLUSH_RED,
+  HINT_GREEN,
+  ZEST_ORANGE,
+  MATISSE_BLUE,
+  RAZZMATAZZ_RED,
+  EMERALD_GREEN,
+  MUSTARD_YELLOW,
+  ONAHAU_BLUE,
+  COSMOS_RED,
+  ICE_GREEN,
+  CARROT_ORANGE,
+  CONGRESS_BLUE,
+  THUNDERBIRD_RED,
+  HAZE_GREEN,
+  ZODIAC_BLUE,
+  SCIENCE_BLUE
+} from "../../../constants/colors";
+
+const background = {
+  info: `${INFO_BLUE}`,
+  warn: `${APRICOT_ORANGE}`,
+  error: `${BLUSH_RED}`,
+  success: `${HINT_GREEN}`
+};
+
+const border = {
+  info: `${MATISSE_BLUE}`,
+  warn: `${ZEST_ORANGE}`,
+  error: `${RAZZMATAZZ_RED}`,
+  success: `${EMERALD_GREEN}`
+};
+
+const iconBackground = {
+  info: `${ONAHAU_BLUE}`,
+  warn: `${MUSTARD_YELLOW}`,
+  error: `${COSMOS_RED}`,
+  success: `${ICE_GREEN}`
+};
+
+const iconFill = {
+  info: `${CONGRESS_BLUE}`,
+  warn: `${CARROT_ORANGE}`,
+  error: `${THUNDERBIRD_RED}`,
+  success: `${HAZE_GREEN}`
+};
+
+const text = {
+  info: `${ZODIAC_BLUE}`,
+  warn: `${ZODIAC_BLUE}`,
+  error: `${ZODIAC_BLUE}`,
+  success: `${ZODIAC_BLUE}`
+};
+
+const link = {
+  info: `${SCIENCE_BLUE}`,
+  warn: `${SCIENCE_BLUE}`,
+  error: `${SCIENCE_BLUE}`,
+  success: `${SCIENCE_BLUE}`
+};
+
+export const fallbackValues = {
+  background,
+  border,
+  iconBackground,
+  iconFill,
+  text,
+  link
+};

package/src/components/atoms/alert/index.js

@@ -0,0 +1,3 @@
+import Alert from "./Alert";
+
+export default Alert;

package/src/components/atoms/amount-callout/AmountCallout.js

@@ -0,0 +1,27 @@
+import React from "react";
+import Heading from "../heading";
+import { Box } from "../layouts";
+import { fallbackValues } from "./AmountCallout.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+
+const AmountCallout = ({ amount, textAlign, themeValues }) => (
+  <Box padding="0" textAlign={textAlign}>
+    <Heading
+      variant="h6"
+      weight={FONT_WEIGHT_SEMIBOLD}
+      fontSize={themeValues.fontSize}
+      color={themeValues.color}
+      lineHeight={themeValues.lineHeight}
+    >
+      {amount}
+    </Heading>
+  </Box>
+);
+
+export default themeComponent(
+  AmountCallout,
+  "AmountCallout",
+  fallbackValues,
+  "medium"
+);

package/src/components/atoms/amount-callout/AmountCallout.theme.js

@@ -0,0 +1,19 @@
+const fontSize = {
+  large: "1.75rem",
+  medium: "1.5rem",
+  small: "1.094rem"
+};
+
+const color = "#15749D";
+
+const lineHeight = {
+  large: "2.25rem",
+  medium: "2rem",
+  small: "1.641rem"
+};
+
+export const fallbackValues = {
+  fontSize,
+  color,
+  lineHeight
+};

package/src/components/atoms/amount-callout/index.js

@@ -0,0 +1,3 @@
+import AmountCallout from "./AmountCallout";
+
+export default AmountCallout;

package/src/components/atoms/breadcrumb/Breadcrumb.js

@@ -0,0 +1,50 @@
+import React, { Fragment, useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { IconChevron } from "../../../deprecated/icons";
+import { createThemeValues } from "../../../util/themeUtils";
+import { fallbackValues } from "./Breadcrumb.theme";
+import { InternalLink } from "../link";
+import Cluster from "../layouts/Cluster";
+import Box from "../layouts/Box";
+
+const Breadcrumbs = ({ breadcrumbsList = [] }) => {
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "Breadcrumb"
+  );
+  return (
+    <Box padding="0" role="region" aria-level="Breadcrumb navigation">
+      <Cluster justify="flex-start" align="center">
+        {breadcrumbsList.map(
+          ({ linkText, linkDestination, isActive }, index) => (
+            <Fragment key={`breadcrumb-${linkText}`}>
+              <InternalLink
+                to={linkDestination}
+                active={isActive.toString()}
+                color={themeValues.color}
+                activeStyles={themeValues.activeColor}
+                fontSize={themeValues.fontSize}
+                lineheight={themeValues.lineHeight}
+                fontWeight={themeValues.fontWeight}
+                margin={themeValues.margin}
+                hoverStyles={themeValues.hover}
+                extraStyles={`
+                          text-transform: uppercase;
+                          &:first-child {
+                            margin-left: 0;
+                          }`}
+              >
+                {linkText}
+              </InternalLink>
+              {index < breadcrumbsList.length - 1 && <IconChevron />}
+            </Fragment>
+          )
+        )}
+      </Cluster>
+    </Box>
+  );
+};
+
+export default Breadcrumbs;