@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/stories/utils.ts

@@ -1,39 +0,0 @@
-import { ComponentStory, Meta, StoryFn } from '@storybook/react';
-import { IReqoreUIProviderProps } from '../containers/UIProvider';
-import { IReqorePagingOptions } from '../hooks/usePaging';
-import { TestTableItem } from '../mock/tableData';
-
-/**
- * It takes a template function and an object of properties, and returns a new function that has the
- * properties bound to it
- * @param template - The template function that you want to bind the props to.
- * @param {T} props - The props that will be passed to the template.
- * @returns A function that is bound to an empty object.
- */
-export const buildTemplate = <T, C>(
-  template: ComponentStory<React.FC<T>>,
-  props?: Partial<T> & C
-) => {
-  const result = template.bind({});
-  result.args = props as any;
-  return result;
-};
-
-export type AdditionalStorybookArgs = IReqoreUIProviderProps & {
-  otherThemeOptions?: IReqoreUIProviderProps['theme'];
-  multipleColumns?: boolean;
-  confirm?: boolean;
-  notificationId?: string;
-  pagingOptions?: Partial<IReqorePagingOptions<TestTableItem>>;
-  insideModal?: boolean;
-  animatedButtons?: IReqoreUIProviderProps['options']['animations']['buttons'];
-  animatedDialogs?: IReqoreUIProviderProps['options']['animations']['dialogs'];
-  globalUiScale?: IReqoreUIProviderProps['options']['uiScale'];
-};
-
-export type StoryMeta<
-  Component extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
-  AdditionalArgs = {}
-> = Meta<React.ComponentProps<Component> & AdditionalArgs & AdditionalStorybookArgs>;
-
-export type StoryRenderer<T> = StoryFn<T & AdditionalStorybookArgs>;

package/src/styles.ts

@@ -1,124 +0,0 @@
-import styled, { css } from 'styled-components';
-import { StyledTextEffect } from './components/Effect';
-import { StyledIconWrapper } from './components/Icon';
-
-export const INACTIVE_ICON_SCALE = 0.85;
-export const ACTIVE_ICON_SCALE = 1;
-
-export const StyledContent = styled(StyledTextEffect)`
-  position: relative;
-
-  ${({ wrap }) =>
-    !wrap
-      ? css`
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          width: 100%;
-        `
-      : css`
-          word-break: break-word;
-        `}
-`;
-
-export const StyledActiveContent = styled(StyledTextEffect)`
-  position: absolute;
-  transform: translateY(-150%);
-  opacity: 0;
-  transition: all 0.2s ease-out;
-  filter: blur(10px);
-
-  ${({ wrap }) =>
-    !wrap
-      ? css`
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          width: 100%;
-        `
-      : css`
-          word-break: break-word;
-        `}
-`;
-
-export const StyledInActiveContent = styled(StyledTextEffect)`
-  position: absolute;
-  transform: translateY(0);
-  transition: all 0.2s ease-out;
-
-  ${({ wrap }) =>
-    !wrap
-      ? css`
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          width: 100%;
-        `
-      : css`
-          word-break: break-word;
-        `}
-`;
-
-export const StyledInvisibleContent = styled(StyledTextEffect)`
-  visibility: hidden;
-  position: relative;
-  overflow: hidden;
-
-  ${({ wrap }) =>
-    !wrap
-      ? css`
-          white-space: nowrap;
-        `
-      : css`
-          word-break: break-word;
-        `}
-`;
-
-export const AnimatedTextElement = css`
-  ${StyledActiveContent} {
-    transform: translateY(0px);
-    filter: blur(0);
-    opacity: 1;
-  }
-
-  ${StyledInActiveContent} {
-    transform: translateY(150%);
-    filter: blur(10px);
-    opacity: 0;
-  }
-`;
-
-export const InactiveIconScale = css`
-  ${StyledIconWrapper} {
-    transform: scale(${INACTIVE_ICON_SCALE});
-  }
-`;
-
-export const ActiveIconScale = css`
-  ${StyledIconWrapper} {
-    transform: scale(${ACTIVE_ICON_SCALE});
-  }
-`;
-
-export const ChildActiveIconScale = css`
-  > ${StyledIconWrapper} {
-    transform: scale(${ACTIVE_ICON_SCALE});
-  }
-`;
-
-export const ScaleIconOnHover = css`
-  &:hover,
-  &:focus {
-    ${ActiveIconScale}
-  }
-`;
-
-export const DisabledElement = css`
-  pointer-events: none;
-  opacity: 0.5;
-  cursor: not-allowed;
-`;
-
-export const ReadOnlyElement = css`
-  cursor: not-allowed;
-`;

package/src/types/global.ts

@@ -1,211 +0,0 @@
-import { IReqoreEffect } from '../components/Effect';
-import { TSizes } from '../constants/sizes';
-import { IReqoreCustomTheme, TReqoreIntent } from '../constants/theme';
-import { IPopoverOptions } from '../hooks/usePopover';
-
-export interface IReqoreComponent {
-  _insidePopover?: boolean;
-  _popoverId?: string;
-}
-
-export interface IReqoreReadOnly {
-  /**
-   * If true, the component will be read only
-   * @default false
-   * @type boolean
-   * @memberof IReqoreReadOnly
-   * @example
-   * <ReqoreInput readOnly />
-   * <ReqoreInput readOnly={true} />
-   *
-   */
-  readOnly?: boolean;
-}
-
-export interface IReqoreDisabled {
-  /**
-   * If true, the component will be disabled
-   * @default false
-   * @type boolean
-   * @memberof IReqoreDisabled
-   * @example
-   * <ReqoreInput disabled />
-   * <ReqoreInput disabled={true} />
-   *
-   */
-  disabled?: boolean;
-}
-
-export interface IReqoreIntent {
-  /**
-   * The intent of the component
-   * @default none
-   * @type TReqoreIntent
-   * @memberof IReqoreIntent
-   * @example
-   * <ReqoreInput intent="info" />
-   * <ReqoreInput intent="success" />
-   * <ReqoreInput intent="pending" />
-   * <ReqoreInput intent="warning" />
-   * <ReqoreInput intent="danger" />
-   * <ReqoreInput intent="muted" />
-   */
-  intent?: TReqoreIntent;
-}
-
-export interface IWithReqoreCustomTheme {
-  /**
-   * The custom theme of the component
-   * @default none
-   * @type IReqoreCustomTheme
-   * @memberof IWithReqoreCustomTheme
-   * @example
-   * <ReqoreInput customTheme={{ main: '#ff0000' }} />
-   * <ReqoreInput customTheme={{ main: '#ff0000', text: { color: '#0000ff' } }} />
-   */
-  customTheme?: IReqoreCustomTheme;
-}
-
-export interface IWithReqoreTooltip {
-  /**
-   * The tooltip of the component
-   * @default none
-   * @type string | IReqoreTooltip
-   * @memberof IWithReqoreTooltip
-   * @example
-   * <ReqoreInput tooltip="This is a tooltip" />
-   * <ReqoreInput tooltip={{ content: 'This is a tooltip' }} />
-   * <ReqoreInput tooltip={{ content: 'This is a tooltip', position: 'top' }} />
-   * <ReqoreInput tooltip={{ content: 'This is a tooltip', position: 'top', handle: 'focus', useTargetWidth: true, noArrow: true }} />
-   */
-  tooltip?: string | IReqoreTooltip;
-}
-
-export interface IWithReqoreSize {
-  /**
-   * The size of the component
-   * @default normal
-   * @type TSizes
-   * @memberof IWithReqoreSize
-   * @example
-   * <ReqoreInput size="small" />
-   * <ReqoreInput size="normal" />
-   * <ReqoreInput size="big" />
-   *
-   */
-  size?: TSizes;
-}
-
-export interface IWithReqoreOpaque {
-  /**
-   * If true, the component will be opaque
-   * @default false
-   * @type boolean
-   * @memberof IWithReqoreOpaque
-   * @example
-   * <ReqoreInput opaque />
-   * <ReqoreInput opaque={true} />
-   * <ReqoreInput opaque={false} />
-   *
-   */
-  opaque?: boolean;
-}
-
-export interface IWithReqoreFlat {
-  /**
-   * If true, the component will be flat
-   * @default false
-   * @type boolean
-   * @memberof IWithReqoreFlat
-   * @example
-   * <ReqoreInput flat />
-   * <ReqoreInput flat={true} />
-   * <ReqoreInput flat={false} />
-   *
-   */
-  flat?: boolean;
-}
-
-export interface IWithReqoreFluid {
-  /**
-   * If true, the component will fill the parent container horizontally
-   * @default false
-   * @type boolean
-   * @example
-   * <ReqoreInput fluid />
-   * <ReqoreInput fluid={true} />
-   * <ReqoreInput fluid={false} />
-   *
-   */
-  fluid?: boolean;
-}
-
-export interface IWithReqoreIconImage {
-  /**
-   * Use image as the icon for this component
-   * @default undefined
-   * @type string
-   * @example
-   * <ReqoreInput iconImage="...your image URL" />
-   *
-   */
-  iconImage?: string;
-}
-
-export interface IWithReqoreFixed {
-  /**
-   * If true, the component will be fixed in fluid containers
-   * @default false
-   * @type boolean
-   * @example
-   * <ReqoreInput fixed />
-   * <ReqoreInput fixed={true} />
-   * <ReqoreInput fixed={false} />
-   *
-   */
-  fixed?: boolean;
-}
-
-export interface IWithReqoreMinimal {
-  /**
-   * If true, the component will be minimal
-   * @default false
-   * @type boolean
-   * @example
-   * <ReqoreButton minimal />
-   * <ReqoreButton minimal={true} />
-   * <ReqoreButton minimal={false} />
-   *
-   */
-  minimal?: boolean;
-}
-
-export interface IWithReqoreTransparent {
-  /**
-   * If true, the component will be transparent
-   * @default false
-   * @type boolean
-   * @example
-   * <ReqoreButton transparent />
-   * <ReqoreButton transparent={true} />
-   * <ReqoreButton transparent={false} />
-   *
-   */
-  transparent?: boolean;
-}
-
-export interface IWithReqoreEffect {
-  /**
-   * If true, the component will have an effect
-   * @default undefined
-   * @type IReqoreEffect
-   * @memberof IWithReqoreEffect
-   * @example
-   * <ReqoreHeading effect={{ gradient: { from | to }}} />
-   *
-   */
-  effect?: IReqoreEffect;
-}
-
-export interface IReqoreTooltip extends IPopoverOptions {}
-export type TReqoreTooltipProp = string | IReqoreTooltip;