@carbon/charts-react 0.59.0-beta.0 → 1.0.1

package/src/diagrams/CardNode/CardNode.tsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// @ts-ignore
-import classnames from 'classnames';
-
-// Carbon Prefix
-import { carbonPrefix } from '../configs';
-
-const namespace = `${carbonPrefix}--cc--card-node`;
-
-const CardNode = ({
-	as = 'div',
-	children,
-	className,
-	color,
-	href = null,
-	onMouseEnter = null,
-	onMouseOver = null,
-	onMouseOut = null,
-	onMouseLeave = null,
-	onMouseMove = null,
-	onClick = null,
-	position = 'static',
-	stacked,
-}: any) => {
-	let Component = 'div';
-
-	if (as !== 'div') {
-		Component = as;
-	} else if (href) {
-		Component = 'a';
-	} else if (onClick) {
-		Component = 'button';
-	}
-
-	const cardClasses = classnames(namespace, {
-		[`${namespace}--stacked`]: stacked,
-		[`${namespace}--${Component}`]: Component,
-		[className]: className,
-	});
-
-	return (
-		// @ts-ignore
-		<Component
-			className={cardClasses}
-			onClick={onClick}
-			onMouseEnter={onMouseEnter}
-			onMouseOver={onMouseOver}
-			onMouseOut={onMouseOut}
-			onMouseLeave={onMouseLeave}
-			onMouseMove={onMouseMove}
-			style={{ borderColor: color, position }}
-			tabIndex={0}>
-			{children}
-		</Component>
-	);
-};
-
-export default CardNode;
-
-CardNode.propTypes = {
-	/** Provide a custom element to be rendered instead of the default */
-	as: PropTypes.elementType,
-
-	/**
-	 * Pass in the children that will be rendered within the CardNode
-	 */
-	children: PropTypes.node,
-
-	/**
-	 * Provide an optional class to be applied on the outer element
-	 */
-	className: PropTypes.string,
-
-	/**
-	 * Specify the node's border color
-	 */
-	color: PropTypes.string,
-
-	/**
-	 * Optionally specify an href for the CardNode to become an `<a>` element
-	 */
-	href: PropTypes.string,
-
-	/**
-	 * Provide an optional function to be called when the CardNode
-	 * is clicked, turning the CardNode into a `<button>` element
-	 */
-	onClick: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseEnter event
-	 */
-	onMouseEnter: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseOver event
-	 */
-	onMouseOver: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseOut event
-	 */
-	onMouseOut: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseLeave event
-	 */
-	onMouseLeave: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseMove event
-	 */
-	onMouseMove: PropTypes.func,
-
-	/**
-	 * Specify whether the node displays a stacked effect
-	 */
-	stacked: PropTypes.bool,
-};

package/src/diagrams/CardNode/CardNodeColumn.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// @ts-ignore
-import classnames from 'classnames';
-
-// Carbon Prefix
-import { carbonPrefix } from '../configs';
-
-const namespace = `${carbonPrefix}--cc--card-node`;
-
-const CardNodeColumn = ({ children, className, farsideColumn }: any) => {
-	const classes = classnames(`${namespace}__column`, {
-		[`${namespace}__column--farside`]: farsideColumn,
-		[className]: className,
-	});
-
-	return <div className={classes}>{children}</div>;
-};
-
-export { CardNodeColumn };
-
-CardNodeColumn.propTypes = {
-	/**
-	 * Pass in the children that will be rendered within the CardNodeColumn
-	 */
-	children: PropTypes.node,
-
-	/**
-	 * Provide an optional class to be applied on the outer element
-	 */
-	className: PropTypes.string,
-
-	/**
-	 * Specify whether this is the last column
-	 */
-	farsideColumn: PropTypes.bool,
-};

package/src/diagrams/CardNode/CardNodeLabel.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// @ts-ignore
-import classnames from 'classnames';
-
-// Carbon Prefix
-import { carbonPrefix } from '../configs';
-
-const namespace = `${carbonPrefix}--cc--card-node`;
-
-const CardNodeLabel = ({ children, className }: any) => {
-	const classes = classnames(`${namespace}__label`, {
-		[className]: className,
-	});
-
-	return <label className={classes}>{children}</label>;
-};
-
-export { CardNodeLabel };
-
-CardNodeLabel.propTypes = {
-	/**
-	 * Pass in the children that will be rendered within the CardNodeLabel
-	 */
-	children: PropTypes.node,
-
-	/**
-	 * Provide an optional class to be applied on the outer element
-	 */
-	className: PropTypes.string,
-};

package/src/diagrams/CardNode/CardNodeSubtitle.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// @ts-ignore
-import classnames from 'classnames';
-
-// Carbon Prefix
-import { carbonPrefix } from '../configs';
-
-const namespace = `${carbonPrefix}--cc--card-node`;
-
-const CardNodeSubtitle = ({ children, className }: any) => {
-	const classes = classnames(`${namespace}__subtitle`, {
-		[className]: className,
-	});
-
-	return <div className={classes}>{children}</div>;
-};
-
-export { CardNodeSubtitle };
-
-CardNodeSubtitle.propTypes = {
-	/**
-	 * Pass in the children that will be rendered within the CardNodeSubtitle
-	 */
-	children: PropTypes.node,
-
-	/**
-	 * Provide an optional class to be applied on the outer element
-	 */
-	className: PropTypes.string,
-};

package/src/diagrams/CardNode/CardNodeTitle.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// @ts-ignore
-import classnames from 'classnames';
-
-// Carbon Prefix
-import { carbonPrefix } from '../configs';
-
-const namespace = `${carbonPrefix}--cc--card-node`;
-
-const CardNodeTitle = ({ children, className }: any) => {
-	const classes = classnames(`${namespace}__title`, {
-		[className]: className,
-	});
-
-	return <div className={classes}>{children}</div>;
-};
-
-export { CardNodeTitle };
-
-CardNodeTitle.propTypes = {
-	/**
-	 * Pass in the children that will be rendered within the CardNodeTitle
-	 */
-	children: PropTypes.node,
-
-	/**
-	 * Provide an optional class to be applied on the outer element
-	 */
-	className: PropTypes.string,
-};

package/src/diagrams/CardNode/index.tsx

@@ -1,13 +0,0 @@
-import CardNode from './CardNode';
-import { CardNodeColumn } from './CardNodeColumn';
-import { CardNodeLabel } from './CardNodeLabel';
-import { CardNodeSubtitle } from './CardNodeSubtitle';
-import { CardNodeTitle } from './CardNodeTitle';
-
-export {
-	CardNode as default,
-	CardNodeColumn,
-	CardNodeSubtitle,
-	CardNodeTitle,
-	CardNodeLabel,
-};

package/src/diagrams/Edge/Edge.tsx

@@ -1,137 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// Carbon Prefix
-import { carbonPrefix } from '../configs';
-
-// @ts-ignore
-import classnames from 'classnames';
-
-import { buildStraightPathString } from '@carbon/charts/components/diagrams/buildPaths';
-
-const Edge = ({
-	className,
-	color,
-	markerEnd,
-	markerStart,
-	onMouseEnter = null,
-	onMouseOver = null,
-	onMouseOut = null,
-	onMouseLeave = null,
-	onMouseMove = null,
-	path,
-	source,
-	target,
-	variant = null,
-}: any) => {
-	const namespace = `${carbonPrefix}--cc--edge`;
-
-	const pathClasses = classnames(namespace, {
-		[`${namespace}--${variant}`]: variant,
-		[className]: className,
-	});
-
-	const d = path || buildStraightPathString(source, target);
-
-	return (
-		<g
-			className={pathClasses}
-			onMouseEnter={onMouseEnter}
-			onMouseOver={onMouseOver}
-			onMouseOut={onMouseOut}
-			onMouseLeave={onMouseLeave}
-			onMouseMove={onMouseMove}>
-			<path d={d} className={`${namespace}__container`} />
-			<path d={d} className={`${namespace}__outer`} />
-			<path
-				d={d}
-				className={`${namespace}__inner`}
-				markerEnd={`url(#${markerEnd})`}
-				markerStart={`url(#${markerStart})`}
-				style={{ stroke: color }}
-			/>
-		</g>
-	);
-};
-
-export default Edge;
-
-Edge.propTypes = {
-	/**
-	 * Provide an optional class to be applied on the outer element
-	 */
-	className: PropTypes.string,
-
-	/**
-	 * Specify the edge's color
-	 */
-	color: PropTypes.string,
-
-	/**
-	 * Specify an ID for a corresponding end marker
-	 */
-	markerEnd: PropTypes.string,
-
-	/**
-	 * Specify an ID for a corresponding start marker
-	 */
-	markerStart: PropTypes.string,
-
-	/**
-	 * Provide an optional function to be called for the onMouseEnter event
-	 */
-	onMouseEnter: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseOver event
-	 */
-	onMouseOver: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseOut event
-	 */
-	onMouseOut: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseLeave event
-	 */
-	onMouseLeave: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseMove event
-	 */
-	onMouseMove: PropTypes.func,
-
-	/**
-	 * Specify a path string
-	 */
-	path: PropTypes.string,
-
-	/**
-	 * Coordinates for the source element
-	 */
-	source: PropTypes.shape({
-		x: PropTypes.number,
-		y: PropTypes.number,
-	}),
-
-	/**
-	 * Coordinates for the target element
-	 */
-	target: PropTypes.shape({
-		x: PropTypes.number,
-		y: PropTypes.number,
-	}),
-
-	/**
-	 * Specify the variant of the edge
-	 */
-	variant: PropTypes.oneOf([
-		'dash-sm',
-		'dash-md',
-		'dash-lg',
-		'dash-xl',
-		'double',
-		'tunnel',
-	]),
-};

package/src/diagrams/Edge/index.tsx

@@ -1,2 +0,0 @@
-import Edge from './Edge';
-export default Edge;

package/src/diagrams/Marker/Marker.tsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// @ts-ignore
-import classnames from 'classnames';
-
-// Carbon Prefix
-import { carbonPrefix } from '../configs';
-
-import {
-	arrowLeft,
-	arrowRight,
-	circle,
-	diamond,
-	square,
-	tee,
-} from '@carbon/charts/components/diagrams/markerDefinitions';
-
-const Marker = ({
-	className,
-	color,
-	d,
-	id,
-	orient = 'auto',
-	height,
-	width,
-	position = 'end',
-	refX,
-	refY,
-}: any) => {
-	const namespace = `${carbonPrefix}--cc--marker`;
-	const classes = classnames(namespace, {
-		[className]: className,
-	});
-
-	const xPos = position === 'end' ? width / 2 + 0.5 : 0.5;
-	const yPos = height / 2;
-
-	return (
-		<marker
-			className={classes}
-			markerHeight={height}
-			markerWidth={width}
-			orient={orient}
-			id={id}
-			refX={refX || xPos}
-			refY={refY || yPos}
-			markerUnits="userSpaceOnUse">
-			<path d={d} style={{ fill: color }} />
-		</marker>
-	);
-};
-
-const ArrowLeftMarker = ({ ...rest }) => <Marker {...arrowLeft} {...rest} />;
-const ArrowRightMarker = ({ ...rest }) => <Marker {...arrowRight} {...rest} />;
-const CircleMarker = ({ ...rest }) => <Marker {...circle} {...rest} />;
-const DiamondMarker = ({ ...rest }) => <Marker {...diamond} {...rest} />;
-const SquareMarker = ({ ...rest }) => <Marker {...square} {...rest} />;
-const TeeMarker = ({ ...rest }) => <Marker {...tee} {...rest} />;
-
-export {
-	Marker as default,
-	ArrowLeftMarker,
-	ArrowRightMarker,
-	CircleMarker,
-	DiamondMarker,
-	SquareMarker,
-	TeeMarker,
-};
-
-Marker.propTypes = {
-	/**
-	 * Provide an optional class to be applied on the outer element
-	 */
-	className: PropTypes.string,
-
-	/**
-	 * Specify the marker's color
-	 */
-	color: PropTypes.string,
-
-	/**
-	 * Specify a path string
-	 */
-	d: PropTypes.string,
-
-	/**
-	 * Specify an ID for the marker
-	 */
-	id: PropTypes.string,
-
-	/**
-	 * Specify the orient attribute for the marker
-	 */
-	orient: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-	/**
-	 * Specify the height attribute for the marker
-	 */
-	height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-	/**
-	 * Specify the width attribute for the marker
-	 */
-	width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-	/**
-	 * Specify whether this marker appears at the start or end of a line
-	 */
-	position: PropTypes.oneOf(['end', 'start']),
-
-	/**
-	 * Specify the refX attribute for the marker
-	 */
-	refX: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-	/**
-	 * Specify the refY attribute for the marker
-	 */
-	refY: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};

package/src/diagrams/Marker/index.tsx

@@ -1,9 +0,0 @@
-export {
-	default,
-	ArrowLeftMarker,
-	ArrowRightMarker,
-	CircleMarker,
-	DiamondMarker,
-	SquareMarker,
-	TeeMarker,
-} from './Marker';

package/src/diagrams/ShapeNode/ShapeNode.tsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// Carbon Prefix
-import { carbonPrefix } from '../configs';
-
-// @ts-ignore
-import classnames from 'classnames';
-
-const ShapeNode = ({
-	as = 'div',
-	className,
-	href = null,
-	onClick = null,
-	onMouseEnter = null,
-	onMouseOver = null,
-	onMouseOut = null,
-	onMouseLeave = null,
-	onMouseMove = null,
-	position = 'fixed',
-	bodyPosition = 'absolute',
-	renderIcon,
-	size = 48,
-	stacked,
-	shape = 'circle',
-	subtitle,
-	title,
-}: any) => {
-	const namespace = `${carbonPrefix}--cc--shape-node`;
-
-	let Component = 'div';
-
-	if (href) {
-		Component = 'a';
-	} else if (onClick) {
-		Component = 'button';
-	}
-
-	const circleClasses = classnames(namespace, {
-		[`${namespace}--stacked`]: stacked,
-		[`${namespace}--${shape}`]: shape,
-		[`${namespace}--${Component}`]: Component,
-		[className]: className,
-	});
-
-	const titleElement = title ? (
-		<div className={`${namespace}__title`}>{title}</div>
-	) : null;
-	const subtitleElement = subtitle ? (
-		<div className={`${namespace}__subtitle`}>{subtitle}</div>
-	) : null;
-
-	return (
-		// @ts-ignore
-		<Component
-			className={circleClasses}
-			onClick={onClick}
-			onMouseEnter={onMouseEnter}
-			onMouseOver={onMouseOver}
-			onMouseOut={onMouseOut}
-			onMouseLeave={onMouseLeave}
-			onMouseMove={onMouseMove}
-			style={{ height: size, width: size, position }}
-			tabIndex={0}>
-			<div className={`${namespace}__icon`}>{renderIcon}</div>
-			<div
-				className={`${namespace}__body`}
-				style={{ position: bodyPosition }}>
-				{titleElement}
-				{subtitleElement}
-			</div>
-		</Component>
-	);
-};
-
-ShapeNode.propTypes = {
-	/** Provide a custom element to be rendered instead of the default */
-	as: PropTypes.oneOf(['div', 'a', 'button']),
-
-	/**
-	 * Provide an optional class to be applied on the outer element
-	 */
-	className: PropTypes.string,
-
-	/**
-	 * Optionally specify an href for the CardNode to become an `<a>` element
-	 */
-	href: PropTypes.string,
-
-	/**
-	 * Provide an optional function to be called when the CardNode
-	 * is clicked, turning the CardNode into a `<button>` element
-	 */
-	onClick: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseEnter event
-	 */
-	onMouseEnter: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseOver event
-	 */
-	onMouseOver: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseOut event
-	 */
-	onMouseOut: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseLeave event
-	 */
-	onMouseLeave: PropTypes.func,
-
-	/**
-	 * Provide an optional function to be called for the onMouseMove event
-	 */
-	onMouseMove: PropTypes.func,
-
-	/**
-	 * Function to render your own icon in the underlying button
-	 */
-	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
-	/**
-	 * Specify the height and width of the shape
-	 * Can be defined using any CSS length unit (px, %, rem)
-	 */
-	size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-	/**
-	 * Specify whether the node displays a stacked effect
-	 */
-	stacked: PropTypes.bool,
-
-	/**
-	 * Specify the shape of the node
-	 */
-	shape: PropTypes.oneOf(['circle', 'square', 'rounded-square']),
-
-	/**
-	 * Specify the node's subtitle
-	 */
-	subtitle: PropTypes.string,
-
-	/**
-	 * Specify the node's title
-	 */
-	title: PropTypes.string,
-};
-
-export default ShapeNode;

package/src/diagrams/ShapeNode/index.tsx

@@ -1,2 +0,0 @@
-import ShapeNode from './ShapeNode';
-export default ShapeNode;

package/src/diagrams/configs.ts

@@ -1 +0,0 @@
-export const carbonPrefix = 'cds';