@qoretechnologies/reqore 0.20.1 → 0.20.2

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,161 @@
+import { rgba } from 'polished';
+import React, { forwardRef, useRef } from 'react';
+import styled from 'styled-components';
+import { SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { IReqoreTheme } from '../../constants/theme';
+import { getReadableColor } from '../../helpers/colors';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import usePopover from '../../hooks/usePopover';
+import { IReqoreTooltip } from '../../types/global';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreIcon from '../Icon';
+
+export interface IReqoreCheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string;
+  labelDetail?: any;
+  labelDetailPosition?: 'left' | 'right';
+  size?: TSizes;
+  checked?: boolean;
+  disabled?: boolean;
+  labelPosition?: 'right' | 'left';
+  fluid?: boolean;
+  fixed?: boolean;
+  tooltip?: IReqoreTooltip;
+  asSwitch?: boolean;
+  uncheckedIcon?: IReqoreIconName;
+  checkedIcon?: IReqoreIconName;
+}
+
+export interface IReqoreCheckboxStyle extends IReqoreCheckboxProps {
+  theme: IReqoreTheme;
+}
+
+const StyledSwitch = styled.div<IReqoreCheckboxStyle>`
+  transition: all 0.2s ease-out;
+  position: relative;
+
+  height: ${({ size }) => SIZE_TO_PX[size] - 5}px;
+  width: ${({ size }) => SIZE_TO_PX[size] * 1.8}px;
+
+  border: 1px solid
+    ${({ theme, checked }) =>
+      rgba(getReadableColor(theme, undefined, undefined), checked ? 0.6 : 0.3)};
+  border-radius: 50px;
+
+  margin-right: ${({ labelPosition }) => labelPosition === 'right' && '8px'};
+  margin-left: ${({ labelPosition }) => labelPosition === 'left' && '8px'};
+
+  background-color: ${({ theme, checked }) =>
+    checked ? rgba(getReadableColor(theme, undefined, undefined), 0.2) : 'transparent'};
+
+  &::before {
+    transition: all 0.2s ease-in-out;
+    content: '';
+    display: block;
+    position: absolute;
+    height: ${({ size }) => SIZE_TO_PX[size] - 13}px;
+    width: ${({ size }) => SIZE_TO_PX[size] - 13}px;
+    top: 50%;
+    transform: translateY(-50%);
+    left: ${({ checked, size }) =>
+      !checked ? '5px' : `${SIZE_TO_PX[size] * 1.8 - (SIZE_TO_PX[size] - 7)}px`};
+    border-radius: 100%;
+    background-color: ${({ theme, checked }) =>
+      !checked
+        ? rgba(getReadableColor(theme, undefined, undefined), 0.2)
+        : getReadableColor(theme, undefined, undefined)};
+  }
+`;
+
+const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0px;
+  transition: all 0.2s ease-out;
+
+  height: ${({ size }) => SIZE_TO_PX[size]}px;
+  font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
+
+  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1' : '0 0 auto')};
+
+  opacity: ${({ disabled }) => disabled && 0.5};
+  pointer-events: ${({ disabled }) => disabled && 'none'};
+
+  color: ${({ theme, checked }) => getReadableColor(theme, undefined, undefined, !checked)};
+
+  &:hover {
+    color: ${({ theme }) => getReadableColor(theme, undefined, undefined, false)};
+
+    > ${StyledSwitch} {
+      border-color: ${({ theme, checked }) =>
+        rgba(getReadableColor(theme, undefined, undefined, false), checked ? 0.8 : 0.5)};
+    }
+  }
+`;
+
+const Checkbox = forwardRef(
+  (
+    {
+      label,
+      labelDetail,
+      labelDetailPosition = 'right',
+      size = 'normal',
+      checked,
+      disabled,
+      className,
+      labelPosition = 'right',
+      tooltip,
+      asSwitch,
+      uncheckedIcon = 'CheckboxBlankCircleLine',
+      checkedIcon = 'CheckboxCircleFill',
+      ...rest
+    }: IReqoreCheckboxProps,
+    ref
+  ) => {
+    const innerRef = useRef(null);
+    const combinedRef = useCombinedRefs(innerRef, ref);
+
+    usePopover({
+      targetElement: combinedRef.current,
+      ...tooltip,
+    });
+
+    return (
+      <StyledCheckbox
+        {...rest}
+        ref={combinedRef}
+        size={size}
+        disabled={disabled}
+        checked={checked}
+        className={`${className || ''} reqore-checkbox reqore-control`}
+      >
+        {label && labelPosition === 'left' ? (
+          <>
+            {labelDetailPosition === 'left' && labelDetail}
+            <span>{label}</span>
+            {labelDetailPosition === 'right' && labelDetail}
+          </>
+        ) : null}
+        {asSwitch ? (
+          <StyledSwitch size={size} labelPosition={labelPosition} checked={checked} />
+        ) : (
+          <ReqoreIcon
+            size={`${TEXT_FROM_SIZE[size]}px`}
+            icon={checked ? checkedIcon : uncheckedIcon}
+            margin={labelPosition}
+          />
+        )}
+        {label && labelPosition === 'right' ? (
+          <>
+            {labelDetailPosition === 'left' && labelDetail}
+            <span>{label}</span>
+            {labelDetailPosition === 'right' && labelDetail}
+          </>
+        ) : null}
+      </StyledCheckbox>
+    );
+  }
+);
+
+export default Checkbox;

package/src/components/Columns/column.tsx

@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components';
+
+export interface IReqoreColumnProps
+  extends Pick<
+    React.CSSProperties,
+    'alignItems' | 'justifyContent' | 'flexFlow' | 'flex' | 'flexShrink' | 'flexGrow'
+  > {}
+
+export const ReqoreColumn = styled.div<IReqoreColumnProps>`
+  ${({
+    alignItems,
+    justifyContent,
+    flex = '1 0 auto',
+    flexFlow = 'row',
+    flexGrow,
+    flexShrink,
+  }: IReqoreColumnProps) => css`
+    display: flex;
+    align-items: ${alignItems};
+    justify-content: ${justifyContent};
+    flex-flow: ${flexFlow};
+    flex: ${flex};
+    flex-grow: ${flexGrow};
+    flex-shrink: ${flexShrink};
+  `}
+`;

package/src/components/Columns/index.tsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { IReqoreTheme } from '../../constants/theme';
+
+export interface IReqoreColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: any;
+  minColumnWidth?: string;
+  maxColumnWidth?: string;
+  columns?: number | 'auto-fit' | 'auto-fill';
+  columnsGap?: string;
+  className?: string;
+  alignItems?: string;
+}
+
+export interface IStyledColumns extends IReqoreColumnsProps {
+  theme?: IReqoreTheme;
+}
+
+export const StyledColumns = styled.div<IStyledColumns>`
+  display: grid;
+  ${({
+    minColumnWidth = '300px',
+    maxColumnWidth = '1fr',
+    columns = 'auto-fit',
+    columnsGap,
+    alignItems = 'normal',
+  }: IStyledColumns) => css`
+    grid-template-columns: repeat(${columns}, minmax(${minColumnWidth}, ${maxColumnWidth}));
+    grid-gap: ${columnsGap};
+    align-items: ${alignItems};
+  `}
+`;
+
+export const ReqoreColumns = ({ children, className, ...rest }: IReqoreColumnsProps) => {
+  return (
+    <StyledColumns {...rest} className={classNames('reqore-columns', className)}>
+      {children}
+    </StyledColumns>
+  );
+};

package/src/components/Comment/index.tsx

@@ -0,0 +1,139 @@
+import { size } from 'lodash';
+import styled from 'styled-components';
+import { ReqoreButton, ReqoreColumn, ReqoreControlGroup, ReqoreDropdown } from '../..';
+import { IReqoreIntent } from '../../constants/theme';
+import { IReqoreIconName } from '../../types/icons';
+import { ReqoreColumns } from '../Columns';
+import { ReqoreH3 } from '../Header';
+import ReqoreIcon from '../Icon';
+import { IReqorePanelAction, ReqorePanel } from '../Panel';
+import { ReqoreP } from '../Paragraph';
+
+export interface IReqoreCommentProps {
+  icon?: IReqoreIconName;
+  image?: string;
+  title?: string;
+  children: any;
+  intent?: IReqoreIntent;
+  rounded?: boolean;
+  flat?: boolean;
+  detail?: string;
+  actions?: IReqorePanelAction[];
+}
+
+export const StyledCommentWrapper = styled.div`
+  display: flex;
+  overflow: hidden;
+
+  &:not(:first-child) {
+    margin-top: 10px;
+  }
+`;
+
+export const StyledIconWrapper = styled.div`
+  flex: 0 auto;
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+`;
+
+export const StyledInfoWrapper = styled.div`
+  flex: 1;
+  padding: 10px;
+  overflow: hidden;
+`;
+
+export const StyledCommentText = styled(ReqoreP)<{ marginTop?: string }>`
+  min-height: 10px;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  margin-top: ${({ marginTop }: { marginTop?: string }) => marginTop};
+`;
+
+export const StyledCommentTitle = styled(ReqoreH3)`
+  padding: 0;
+  margin: 0;
+`;
+
+export const StyledCommentDetail = styled.span`
+  opacity: 0.5;
+  font-size: 11px;
+`;
+
+export const StyledCommentImage = styled.img`
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+`;
+
+export const ReqoreComment = ({
+  rounded,
+  flat,
+  intent,
+  icon,
+  children,
+  image,
+  title,
+  detail,
+  actions,
+  ...rest
+}: IReqoreCommentProps) => {
+  return (
+    <ReqorePanel rounded={rounded} flat={flat} intent={intent} className='reqore-comment' {...rest}>
+      <StyledCommentWrapper>
+        {icon || image ? (
+          <StyledIconWrapper>
+            {icon ? <ReqoreIcon icon={icon} size='30px' /> : <StyledCommentImage src={image} />}
+          </StyledIconWrapper>
+        ) : null}
+        <StyledInfoWrapper>
+          <ReqoreColumns minColumnWidth='100px'>
+            <ReqoreColumn flexFlow='column' justifyContent='center'>
+              {title && <StyledCommentTitle>{title}</StyledCommentTitle>}
+              {detail && <StyledCommentDetail>{detail}</StyledCommentDetail>}
+            </ReqoreColumn>
+            {size(actions) ? (
+              <ReqoreColumn justifyContent='flex-end'>
+                <ReqoreControlGroup minimal size='small'>
+                  {actions.map(({ label, actions, ...rest }) =>
+                    size(actions) ? (
+                      <ReqoreDropdown
+                        {...rest}
+                        label={label}
+                        componentProps={{
+                          minimal: true,
+                          onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+                            e.stopPropagation();
+                          },
+                        }}
+                        items={actions}
+                      />
+                    ) : (
+                      <ReqoreButton
+                        {...rest}
+                        onClick={
+                          rest.onClick
+                            ? (e: React.MouseEvent<HTMLButtonElement>) => {
+                                e.stopPropagation();
+                                rest.onClick();
+                              }
+                            : undefined
+                        }
+                      >
+                        {label}
+                      </ReqoreButton>
+                    )
+                  )}
+                </ReqoreControlGroup>
+              </ReqoreColumn>
+            ) : null}
+          </ReqoreColumns>
+          <StyledCommentText marginTop={title || detail || size(actions) ? '10px' : '0px'}>
+            {children}
+          </StyledCommentText>
+        </StyledInfoWrapper>
+      </StyledCommentWrapper>
+    </ReqorePanel>
+  );
+};

package/src/components/CommentFeed/index.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { StyledPanel } from '../Panel';
+
+export interface IReqoreCommentFeedProps extends React.HTMLAttributes<HTMLDivElement> {
+  gapSize?: string;
+}
+
+export const StyledCommentFeed = styled.div<{ gapSize: string }>`
+  ${StyledPanel} {
+    &:not(:first-child) {
+      margin-top: ${({ gapSize }) => gapSize};
+    }
+  }
+`;
+
+export const ReqoreCommentFeed = ({
+  gapSize = '10px',
+  className,
+  children,
+  ...rest
+}: IReqoreCommentFeedProps) => {
+  return (
+    <StyledCommentFeed
+      {...rest}
+      gapSize={gapSize}
+      className={classNames('reqore-comment-feed', {
+        className,
+      })}
+    >
+      {children}
+    </StyledCommentFeed>
+  );
+};

package/src/components/Content/index.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef } from "react";
+import styled, { css } from "styled-components";
+import { IReqoreTheme } from "../../constants/theme";
+import ReqoreThemeProvider from "../../containers/ThemeProvider";
+import { getReadableColor } from "../../helpers/colors";
+
+export interface IReqoreContentWrapperProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children?: any;
+}
+
+export interface IReqoreContentStyle {
+  theme: IReqoreTheme;
+}
+
+const StyledReqoreContent = styled.div<IReqoreContentStyle>`
+  ${({ theme }: IReqoreContentStyle) => css`
+    width: 100%;
+    height: 100%;
+    color: ${getReadableColor(theme, undefined, undefined, true)};
+    overflow: auto;
+  `}
+`;
+
+const ReqoreContent = forwardRef(
+  ({ children, className, ...rest }: IReqoreContentWrapperProps, ref: any) => (
+    <ReqoreThemeProvider>
+      <StyledReqoreContent
+        {...rest}
+        ref={ref}
+        className={`${className || ""} reqore-content`}
+      >
+        {children}
+      </StyledReqoreContent>
+    </ReqoreThemeProvider>
+  )
+);
+
+export default ReqoreContent;

package/src/components/Content/wrapper.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import { IReqoreTheme } from "../../constants/theme";
+import ReqoreThemeProvider from "../../containers/ThemeProvider";
+
+export interface IReqoreContentWrapperProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children?: any;
+}
+
+export interface IReqoreContentStyle {
+  theme: IReqoreTheme;
+}
+
+const StyledReqoreContentWrapper = styled.div<IReqoreContentStyle>`
+  display: flex;
+  flex-flow: column;
+  flex: 1;
+  padding: 15px;
+  overflow: hidden;
+`;
+
+const ReqoreContentWrapper = forwardRef(
+  ({ children, className, ...rest }: IReqoreContentWrapperProps, ref: any) => (
+    <ReqoreThemeProvider>
+      <StyledReqoreContentWrapper
+        {...rest}
+        ref={ref}
+        className={`${className || ""} reqore-content-wrapper`}
+      >
+        {children}
+      </StyledReqoreContentWrapper>
+    </ReqoreThemeProvider>
+  )
+);
+
+export default ReqoreContentWrapper;

package/src/components/ControlGroup/index.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { RADIUS_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { IReqoreTheme } from '../../constants/theme';
+
+export interface IReqoreControlGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  stack?: boolean;
+  minimal?: boolean;
+  size?: TSizes;
+  children: any;
+  fluid?: boolean;
+  rounded?: boolean;
+}
+
+export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
+  theme: IReqoreTheme;
+}
+
+const StyledControlGroup = styled.div<IReqoreControlGroupStyle>`
+  display: flex;
+  flex: 0 auto;
+  width: ${({ fluid }) => (fluid ? '100%' : undefined)};
+
+  > .reqore-control-wrapper .reqore-control {
+    border-radius: ${({ stack }) => (!stack ? undefined : 0)};
+  }
+
+  > .reqore-control,
+  > .reqore-control-wrapper,
+  > * {
+    &:not(:last-child) {
+      margin-right: ${({ stack }) => (!stack ? '5px' : undefined)};
+    }
+
+    border-radius: ${({ stack }) => (!stack ? undefined : 0)};
+
+    ${({ rounded, size }) =>
+      rounded &&
+      css`
+        &:first-child {
+          border-top-left-radius: ${RADIUS_FROM_SIZE[size]}px;
+          border-bottom-left-radius: ${RADIUS_FROM_SIZE[size]}px;
+        }
+
+        &:last-child {
+          border-top-right-radius: ${RADIUS_FROM_SIZE[size]}px;
+          border-bottom-right-radius: ${RADIUS_FROM_SIZE[size]}px;
+        }
+      `}
+  }
+`;
+
+const ReqoreControlGroup = ({
+  children,
+  className,
+  minimal,
+  size = 'normal',
+  fluid,
+  rounded = true,
+  ...rest
+}: IReqoreControlGroupProps) => (
+  <StyledControlGroup
+    {...rest}
+    size={size}
+    rounded={rounded}
+    fluid={fluid}
+    className={`${className || ''} reqore-control-group`}
+  >
+    {React.Children.map(children, (child) =>
+      child
+        ? React.cloneElement(child, {
+            minimal: minimal || child.props?.minimal,
+            size,
+            fluid,
+          })
+        : null
+    )}
+  </StyledControlGroup>
+);
+
+export default ReqoreControlGroup;