@scality/core-ui 0.115.0

package/package.json

@@ -0,0 +1,161 @@
+{
+  "name": "@scality/core-ui",
+  "version": "0.115.0",
+  "description": "Scality common React component library",
+  "author": "Scality Engineering",
+  "license": "SEE LICENSE IN LICENSE",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "mainSrc": "src/lib/index.js",
+  "scripts": {
+    "analyze": "source-map-explorer 'dist/*.js'",
+    "build": "rimraf dist && tsc",
+    "copy-files": "copyfiles -u 2 src/lib/style/fonts/* dist && copyfiles -u 2 src/lib/*.css dist",
+    "lint": "eslint src/* --ext .js --no-error-on-unmatched-pattern",
+    "prepare": "npm run build",
+    "postbuild": "npm run copy-files",
+    "plop": "plop",
+    "test": "jest",
+    "storybook": "storybook dev -p 3000",
+    "build-storybook": "storybook build",
+    "storybook:deploy": "storybook-to-ghpages"
+  },
+  "keywords": [],
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@fortawesome/fontawesome-free": "^5.10.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@js-temporal/polyfill": "^0.4.3",
+    "@storybook/addon-actions": "^7.6.6",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/addon-mdx-gfm": "^7.6.6",
+    "@storybook/addon-storyshots": "^7.6.6",
+    "@storybook/addon-storysource": "^7.6.6",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/manager-api": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-webpack5": "^7.6.6",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/theming": "^7.6.6",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^13.1.9",
+    "@types/jest": "^27.5.0",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-table": "^7.7.11",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@types/react-window": "^1.8.5",
+    "@types/styled-components": "^5.1.25",
+    "@types/styled-system": "^5.1.15",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
+    "csstype": "^3.1.0",
+    "downshift": "^7.0.5",
+    "eslint": "^8.15.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-storybook": "^0.6.15",
+    "husky": "^3.0.5",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.6.3",
+    "jest-canvas-mock": "^2.3.1",
+    "plop": "^2.4.0",
+    "polished": "^3.4.1",
+    "pretty-bytes": "^5.6.0",
+    "react": "^17.0.2",
+    "react-debounce-input": "3.2.5",
+    "react-dom": "^17.0.2",
+    "react-dropzone": "^14.2.3",
+    "react-query": "^3.34.0",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-select": "4.3.1",
+    "react-table": "^7.7.0",
+    "react-virtualized": "^9.22.3",
+    "react-virtualized-auto-sizer": "^1.0.5",
+    "react-window": "^1.8.6",
+    "regenerator-runtime": "^0.13.7",
+    "rimraf": "^3.0.0",
+    "source-map-explorer": "^2.0.1",
+    "storybook": "^7.6.6",
+    "styled-components": "^5.2.1",
+    "styled-system": "^5.1.5",
+    "typescript": "^5.3.2",
+    "vega": "^5.17.3",
+    "vega-embed": "^6.0.0",
+    "vega-lite": "^5.0.0",
+    "vega-tooltip": "^0.27.0"
+  },
+  "peerDependencies": {
+    "@fortawesome/fontawesome-free": "^5.10.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@js-temporal/polyfill": "^0.4.4",
+    "polished": "3.4.1",
+    "pretty-bytes": "^5.6.0",
+    "react": "^17.0.2",
+    "react-debounce-input": "3.2.2",
+    "react-dom": "^17.0.2",
+    "react-dropzone": "^14.2.3",
+    "react-query": "^3.34.0",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-select": "4.3.1",
+    "react-table": "^7.7.0",
+    "react-virtualized": "9.22.3",
+    "react-virtualized-auto-sizer": "^1.0.5",
+    "react-window": "^1.8.6",
+    "styled-components": "^4.1.2",
+    "styled-system": "^5.1.5",
+    "vega": "^5.17.3",
+    "vega-embed": "^6.0.0",
+    "vega-lite": "^5.0.0",
+    "vega-tooltip": "^0.27.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
+  "jest": {
+    "setupFiles": [
+      "jest-canvas-mock"
+    ],
+    "transform": {
+      "^.+\\.[tj]sx?$": "babel-jest",
+      "^.+\\.mdx?$": "@storybook/addon-docs/jest-transform-mdx"
+    }
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^0.1.10",
+    "@storybook/preview-api": "^7.6.6",
+    "framer-motion": "^4.1.17",
+    "react-hook-form": "^7.49.2"
+  },
+  "homepage": "https://scality.github.io/core-ui/",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": "https://github.com/scality/core-ui.git"
+}

package/plop-templates/component.hbs

@@ -0,0 +1,18 @@
+//@flow
+import React from "react";
+import styled from "styled-components";
+
+type Props = {
+};
+
+const {{properCase name}}Container = styled.div``;
+
+function {{properCase name}}(props: Props) {
+  return (
+    <{{properCase name}}Container className="sc-{{lowerCase name}}">
+     
+    </{{properCase name}}Container>
+  );
+}
+
+export default {{properCase name}};

package/plop-templates/component.test.hbs

@@ -0,0 +1,10 @@
+import {{properCase name}} from './{{properCase name}}.component';
+import React from 'react';
+import { render } from '@testing-library/react';
+
+describe('{{properCase name}}', () => {
+  test('default test', () => {
+    const { debug } = render(<{{properCase name}} />);
+    debug();
+  });
+});

package/plop-templates/stories.hbs

@@ -0,0 +1,18 @@
+//@flow
+import React from 'react';
+import {{properCase name}} from "../src/lib/components/{{lowerCase name}}/{{properCase name}}.component";
+import { Wrapper, Title } from './common';
+
+export default {
+  title: 'Components/{{properCase name}}',
+  component: {{properCase name}},
+};
+
+export const Default = () => {
+  return (
+  <Wrapper>
+    <Title>Basic usage</Title>
+    <{{properCase name}} />
+  </Wrapper>
+  );
+};

package/plopfile.js

@@ -0,0 +1,38 @@
+module.exports = function (plop) {
+  plop.addHelper('lowerCase', (text) => text.toLowerCase());
+  plop.addHelper('properCase', (text) =>
+    text.replace(/\w\S*/g, function (txt) {
+      return txt.charAt(0).toUpperCase() + txt.substr(1);
+    }),
+  );
+
+  plop.setGenerator('component', {
+    description: 'Add a react component',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'Component name please (ex: layout, breadcrumbs, menuItem)!',
+      },
+    ],
+    actions: [
+      {
+        type: 'add',
+        path:
+          'src/lib/components/{{lowerCase name}}/{{properCase name}}.component.js',
+        templateFile: 'plop-templates/component.hbs',
+      },
+      {
+        type: 'add',
+        path:
+          'src/lib/components/{{lowerCase name}}/{{properCase name}}.component.test.js',
+        templateFile: 'plop-templates/component.test.hbs',
+      },
+      {
+        type: 'add',
+        path: 'stories/{{lowerCase name}}.stories.js',
+        templateFile: 'plop-templates/stories.hbs',
+      },
+    ],
+  });
+};

package/setupTests.js

@@ -0,0 +1,3 @@
+import 'jest-canvas-mock';
+import '@testing-library/jest-dom/extend-expect';
+import 'regenerator-runtime/runtime';

package/src/lib/components/IconHelper.tsx

@@ -0,0 +1,23 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Icon } from './icon/Icon.component';
+import { Position, Tooltip } from './tooltip/Tooltip.component';
+
+type IconHelpProps = {
+  tooltipMessage: ReactNode;
+  placement?: Position;
+  overlayStyle?: CSSProperties;
+};
+
+export const IconHelp = ({
+  tooltipMessage,
+  overlayStyle,
+  placement = 'right',
+}: IconHelpProps) => (
+  <Tooltip
+    overlay={tooltipMessage}
+    placement={placement}
+    overlayStyle={overlayStyle}
+  >
+    <Icon name="Info" color="buttonSecondary" />
+  </Tooltip>
+);

package/src/lib/components/areachart/AreaChart.component.tsx

@@ -0,0 +1,49 @@
+import { VegaChart } from '../vegachart/VegaChart.component';
+
+type Props = {
+  id: string;
+  data: Array<Record<string, any>>;
+  xAxis: Record<string, any>;
+  yAxis: Array<Record<string, any>>;
+  color?: Record<string, any>;
+  areas: Array<Record<string, any>>;
+  width?: number;
+  height?: number;
+};
+
+function AreaChart({
+  id,
+  data,
+  xAxis,
+  yAxis,
+  color,
+  height = 300,
+  width = 1000,
+  areas = [],
+  ...rest
+}: Props) {
+  const lines = yAxis.map((y) => ({
+    mark: {
+      type: 'line',
+    },
+    encoding: {
+      y,
+    },
+  }));
+  const spec = {
+    data: {
+      values: data,
+    },
+    encoding: {
+      x: xAxis,
+      color,
+    },
+    layer: [...lines, ...areas],
+    height,
+    width,
+    ...rest,
+  };
+  return <VegaChart className="sc-areachart" id={id} spec={spec}></VegaChart>;
+}
+
+export { AreaChart };

package/src/lib/components/banner/Banner.component.tsx

@@ -0,0 +1,59 @@
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight } from '../../style/theme';
+import { getThemeVariantSelector } from '../../utils';
+import { Variant } from '../constants';
+
+export type Props = {
+  icon?: React.ReactNode;
+  title?: string;
+  children: React.ReactNode;
+  variant: Variant;
+};
+
+const BannerContainer = styled.div<{ variant: Variant }>`
+  ${(props) => css`
+    color: ${props.theme.textPrimary};
+    background-color: ${props.theme.backgroundLevel1};
+    display: flex;
+    padding: ${spacing.r8};
+    align-items: center;
+    font-size: ${fontSize.small};
+    border: 1px solid;
+    border-left: 5px solid;
+    border-radius: 3px;
+    border-color: ${getThemeVariantSelector()};
+    i {
+      display: flex;
+      align-items: center;
+      margin-left: ${spacing.r8};
+      color: ${getThemeVariantSelector()};
+    }
+  `}
+`;
+
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const Text = styled.span`
+  margin-left: ${spacing.r16};
+`;
+const Title = styled.div`
+  margin-left: ${spacing.r16};
+  font-weight: ${fontWeight.bold};
+`;
+
+function Banner({ icon, title, children, variant, ...rest }: Props) {
+  return (
+    <BannerContainer className="sc-banner" variant={variant}>
+      {icon}
+      <TextContainer>
+        {title && <Title>{title}</Title>}
+        <Text>{children}</Text>
+      </TextContainer>
+    </BannerContainer>
+  );
+}
+
+export { Banner };

package/src/lib/components/barchart/BarChart.component.tsx

@@ -0,0 +1,46 @@
+import { VegaChart } from '../vegachartv2/VegaChartV2.component';
+type Props = {
+  id: string;
+  data: Array<Record<string, any>>;
+  xAxis: Record<string, any>;
+  yAxis: Record<string, any>;
+  color?: Record<string, any>;
+  height?: number;
+  barConfig?: Record<string, any>;
+};
+
+function BarChart({
+  id,
+  data,
+  xAxis,
+  yAxis,
+  color,
+  height = 200,
+  barConfig,
+}: Props) {
+  const spec = {
+    mark: {
+      type: 'bar',
+      ...barConfig,
+    },
+    width: 'container',
+    height,
+    data: {
+      values: data,
+    },
+    encoding: {
+      x: xAxis,
+      y: yAxis,
+      color,
+    },
+  };
+  return (
+    <VegaChart
+      key={`barchart-${id}-${data.length}`}
+      id={id}
+      spec={spec}
+    ></VegaChart>
+  );
+}
+
+export { BarChart };

package/src/lib/components/box/Box.ts

@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+import {
+  layout,
+  flexbox,
+  grid,
+  space,
+  position,
+  color,
+  background,
+  border,
+  typography,
+  shadow,
+  system,
+} from 'styled-system';
+import type {
+  LayoutProps,
+  FlexboxProps,
+  ColorProps,
+  SpaceProps,
+  PositionProps,
+  GridProps,
+  BackgroundProps,
+  BordersProps,
+  TypographyProps,
+  ShadowProps,
+} from 'styled-system';
+
+export type BoxComponentProps = LayoutProps &
+  FlexboxProps &
+  GridProps &
+  SpaceProps &
+  PositionProps &
+  ColorProps &
+  BackgroundProps &
+  BordersProps &
+  TypographyProps &
+  ShadowProps & { gap?: string | number };
+
+const Box = styled.div<BoxComponentProps>`
+  ${layout}
+  ${flexbox}
+  ${grid}
+  ${space}
+  ${position}
+  ${color}
+  ${background}
+  ${border}
+  ${typography}
+  ${shadow}
+  ${system({
+    gap: {
+      property: 'gap',
+      scale: 'space',
+    },
+  })}
+`;
+export { Box };

package/src/lib/components/breadcrumb/Breadcrumb.component.tsx

@@ -0,0 +1,101 @@
+import { ellipsis } from 'polished';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize } from '../../style/theme';
+import { Icon } from '../icon/Icon.component';
+type Props = {
+  paths: Array<JSX.Element>;
+};
+const BreadcrumbContainer = styled.ol`
+  display: flex;
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0;
+  overflow-y: auto;
+`;
+const BreadcrumbItem = styled.li<{ active: boolean }>`
+  box-sizing: border-box;
+  height: 100%;
+  font-size: ${fontSize.larger};
+  ${ellipsis('250px')}
+  min-width: 3rem;
+
+  ${(props) => {
+    const { textPrimary, selectedActive, textLink } = props.theme;
+
+    if (props.active) {
+      return css`
+        * {
+          text-decoration: none;
+          color: ${textPrimary};
+        }
+        color: ${textPrimary};
+      `;
+    }
+
+    return css`
+      * {
+        text-decoration: none;
+        color: ${textLink};
+      }
+      color: ${textLink};
+      border-bottom: 2px solid transparent;
+      &:hover {
+        * {
+          color: ${selectedActive};
+        }
+        color: ${selectedActive};
+        border-bottom: 2px solid ${selectedActive};
+      }
+    `;
+  }}
+`;
+const BreadcrumbSeparator = styled.li`
+  ${(props) => css`
+    color: ${props.theme.textPrimary};
+    padding: ${spacing.r4} ${spacing.r8};
+    display: flex;
+    align-items: center;
+    font-size: ${fontSize.small};
+  `}
+`;
+
+const withBreadcrumbSeparator = (lastIndex) => (acc, item, index) => {
+  const notLast = index < lastIndex;
+  return notLast
+    ? [
+        ...acc,
+        item,
+        <BreadcrumbSeparator
+          key={`sc-breadcrumb_separator_${index}`}
+          className="sc-breadcrumb_separator"
+        >
+          <Icon name="Chevron-right" />
+        </BreadcrumbSeparator>,
+      ]
+    : [...acc, item];
+};
+
+const Breadcrumb = ({ paths = [], ...rest }: Props) => {
+  const lastIndex = paths.length - 1;
+  const breadcrumbItems = paths
+    .map((item, index) => {
+      return (
+        <BreadcrumbItem
+          key={`sc-breadcrumb_item_${index}`}
+          className="sc-breadcrumb_item"
+          active={index === lastIndex}
+        >
+          {item}
+        </BreadcrumbItem>
+      );
+    })
+    .reduce(withBreadcrumbSeparator(lastIndex), []);
+  return (
+    <BreadcrumbContainer className="sc-breadcrumb" {...rest}>
+      {breadcrumbItems}
+    </BreadcrumbContainer>
+  );
+};
+
+export { Breadcrumb };