groundfloor-react-ui 1.0.0

package/components/StatusChip/SlimPrimaryStatusChip.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+/**
+* Primary UI component for user interaction
+*/
+
+const sizes = {
+    xsm: {
+        width: '88px'
+    },
+    sm: {
+        width: '93px'
+    },
+    md: {
+        width: '111px'
+    },
+    lg: {
+        width: '129px'
+    },
+}
+
+const StyledStatusChip = styled.div`
+background: ${({ theme, variant, bgColor }) => bgColor ? bgColor : theme.variant[variant]};
+color: ${({ theme, textColor }) => textColor ? textColor : theme.bgColor};
+border-radius: 13.5px;
+font-size: 14px;
+display: flex;
+align-items: center;
+justify-content: center;
+width: ${({ block, size }) => block ? 'auto' : sizes[size].width};
+height: 28px;
+box-sizing: border-box;
+overflow: hidden;
+`;
+
+export const SlimPrimaryStatusChip = ({ block, style, variant, textColor, bgColor, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+    return (
+        <StyledStatusChip
+            block={block}
+            variant={variant}
+            textColor={textColor}
+            bgColor={bgColor}
+            style={style}
+            {...props}
+        >
+            {props.children}
+        </StyledStatusChip>
+    );
+};
+
+SlimPrimaryStatusChip.propTypes = {
+    /**
+     * background color of SlimStatusChip. primary-1, 2, error, etc.
+     */
+    variant: PropTypes.string,
+    /**
+     * How wide should the SlimStatusChip be?
+     */
+    size: PropTypes.oneOf(['xsm', 'sm', 'md', 'lg']),
+    /**
+     * Block width of SlimStatusChip
+     */
+    block: PropTypes.bool,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Optional custom text color
+     */
+    textColor: PropTypes.string,
+    /**
+     * Optional custom background color
+     */
+    bgColor: PropTypes.string,
+};
+
+StyledStatusChip.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+SlimPrimaryStatusChip.defaultProps = {
+    theme: defaultThemeColor,
+    variant: 'primary-1',
+    block: false,
+    size: 'sm'
+};
+

package/components/StatusChip/SlimSecondaryStatusChip.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+/**
+* Primary UI component for user interaction
+*/
+
+const sizes = {
+    xsm: {
+        width: '88px'
+    },
+    sm: {
+        width: '93px'
+    },
+    md: {
+        width: '111px'
+    },
+    lg: {
+        width: '129px'
+    },
+}
+
+const StyledStatusChip = styled.div`
+background: ${({ theme }) => theme.bgColor};
+color: ${({ theme, variant, textColor }) => textColor ? textColor : theme.variant[variant]};
+border: 1px solid ${({ theme, variant, borderColor }) => borderColor ? borderColor : theme.variant[variant]};
+border-radius: 13.5px;
+font-size: 14px;
+display: flex;
+align-items: center;
+justify-content: center;
+width: ${({ block, size }) => block ? 'auto' : sizes[size].width};
+height: 27px;
+box-sizing: border-box;
+overflow: hidden;
+`;
+
+export const SlimSecondaryStatusChip = ({ block, style, variant, textColor, borderColor, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+    return (
+        <StyledStatusChip
+            block={block}
+            variant={variant}
+            textColor={textColor}
+            borderColor={borderColor}
+            style={style}
+            {...props}
+        >
+            {props.children}
+        </StyledStatusChip>
+    );
+};
+
+SlimSecondaryStatusChip.propTypes = {
+    /**
+     * Color of SlimStatusChip. primary-1, 2, error, etc.
+     */
+    variant: PropTypes.string,
+    /**
+     * How wide should the SlimStatusChip be?
+     */
+    size: PropTypes.oneOf(['xsm', 'sm', 'md', 'lg']),
+    /**
+     * Block width of SlimStatusChip
+     */
+    block: PropTypes.bool,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Optional custom text color
+     */
+    textColor: PropTypes.string,
+    /**
+     * Optional custom border color
+     */
+    borderColor: PropTypes.string,
+};
+
+StyledStatusChip.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+SlimSecondaryStatusChip.defaultProps = {
+    theme: defaultThemeColor,
+    variant: 'primary-1',
+    block: false,
+    size: 'sm'
+};
+

package/components/StatusChip/index.js

@@ -0,0 +1,6 @@
+export * from './PrimaryStatusChip';
+export * from './SecondaryStatusChip';
+export * from './SlimPrimaryStatusChip';
+export * from './SlimSecondaryStatusChip';
+
+

package/components/StatusCircle/StatusCircle.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+/**
+ * Primary UI component for user interaction
+ */
+
+const StyledStatusCircle = styled.div`
+    background: ${({ theme, variant, bgColor }) => bgColor ? bgColor : theme.variant[variant]};
+    border: 1.3px solid ${({ theme, variant, borderColor }) => borderColor ? borderColor : theme.variant[variant]};
+    border-radius: 50%;
+    width: ${({ size }) => size}px;
+    height: ${({ size }) => size}px;
+    box-sizing: border-box;
+`;
+
+export const StatusCircle = ({ variant, bgColor, borderColor, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+    return (
+        <StyledStatusCircle
+            variant={variant}
+            borderColor={borderColor}
+            bgColor={bgColor}
+            {...props}
+        >
+        </StyledStatusCircle>
+    );
+};
+
+StatusCircle.propTypes = {
+    /**
+     * Color of StatusCircle base on the available one among variant theme. primary-1, 2, error, etc.
+     */
+    variant: PropTypes.string,
+    /**
+     * Size of the circle
+     */
+    size: PropTypes.number,
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Optional custom border color
+     */
+    borderColor: PropTypes.string,
+    /**
+     * Optional custom background color
+     */
+    bgColor: PropTypes.string,
+};
+
+StyledStatusCircle.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+StatusCircle.defaultProps = {
+    theme: defaultThemeColor,
+    variant: 'primary-1',
+    size: 11
+};
+

package/components/StatusCircle/index.js

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

package/components/Tables/Table.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DataTable from "react-data-table-component";
+import defaultStyles from '../constants/defaultStyle';
+import { Icon } from '../Icon';
+
+/**
+ * Primary UI component for user interaction
+ */
+
+export const Table = ({
+    theme,
+    customStyles,
+    type = 'table',
+    sortIcon,
+    data,
+    tableColumns,
+    progressPending,
+    defaultSortFieldId,
+    handleOnSort,
+    sortServer,
+    progressComponent,
+    responsive,
+    conditionalRowStyles,
+    fixedHeader,
+    fixedHeaderScrollHeight,
+    ...props }) => {
+
+    let tableStyle = {}
+
+    if (theme) {
+        if (theme[type]) {
+
+            tableStyle = theme[type];
+        }
+    }
+
+
+    if (customStyles) {
+        for (const property in customStyles) {
+            tableStyle[property] = customStyles[property]
+        }
+    }
+
+    return (
+
+        <DataTable
+            responsive={responsive}
+            data={data}
+            columns={tableColumns}
+            noHeader={true}
+            highlightOnHover
+            sortIcon={sortIcon}
+            progressPending={progressPending}
+            customStyles={tableStyle}
+            defaultSortFieldId={defaultSortFieldId}
+            progressComponent={progressComponent ? progressComponent : undefined}
+            sortServer={sortServer}
+            onSort={(columnInfo, direction, event) => {
+                handleOnSort(columnInfo, direction, event)
+            }}
+            conditionalRowStyles={conditionalRowStyles}
+            fixedHeader={fixedHeader}
+            fixedHeaderScrollHeight={fixedHeaderScrollHeight}
+            {...props}
+        />
+
+
+
+
+    );
+};
+
+Table.propTypes = {
+    /**
+     * Theme object
+     */
+    theme: PropTypes.object,
+    /**
+     * Optional component to override the default sorting icon (must be downward)
+     */
+    sortIcon: PropTypes.any,
+    /**
+     * Data array of the actual data to display.
+     */
+    data: PropTypes.array,
+    /**
+     * Data array of the columns to display.
+     */
+    tableColumns: PropTypes.array,
+    /**
+     * Optional display a message while data are loading
+     */
+    progressPending: PropTypes.bool,
+    /**
+     * Custom component to display while data are loading
+     */
+    progressComponent: PropTypes.any,
+    /**
+     * Optional to set a column to be pre-sorted
+     */
+    defaultSortFieldId: PropTypes.number,
+    /**
+     * Optional disables internal sorting for use with server-side/remote sorting
+     */
+    sortServer: PropTypes.bool,
+    /**
+     * Optional function that is triggered when a column is sort
+     */
+    handleOnSort: PropTypes.any,
+    /**
+     * Optional makes the table horizontally scrollable on smaller screen widths
+     */
+    responsive: PropTypes.bool,
+    /**
+     * Optional array of objects that allow apply conditional style base on data value
+     */
+    conditionalRowStyles: PropTypes.array,
+    /**
+     * Optional makes the table header fixed allowing you to scroll the table body
+     */
+    fixedHeader: PropTypes.bool,
+    /**
+     * Optional to set height of the table 
+     */
+    fixedHeaderScrollHeight: PropTypes.string,
+    /**
+     * Optional to override style of the table
+     * Default style:
+     * https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts
+     */
+    customStyle: PropTypes.object,
+};
+
+Table.defaultProps = {
+    theme: defaultStyles,
+    sortIcon: <Icon
+        icon={'arrow-down'}
+        size={11}
+        color={'#333333'}
+        style={{
+            transform: 'scaleX(0.7) scaleY(0.7) translate(5px, -3px)',
+        }}
+    />,
+    data: [],
+    tableColumns: [],
+    progressPending: false,
+    defaultSortFieldId: null,
+    handleOnSort: (columnInfo, direction, event) => { console.log(columnInfo, direction, event) },
+    sortServer: null,
+    progressComponent: undefined,
+    responsive: true,
+    fixedHeader: true,
+    fixedHeaderScrollHeight: '100vh',
+};
+

package/components/Tables/index.js

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