@vibe/core 3.0.0-beta.2 → 3.0.0-rc.0

package/README.md

@@ -1,31 +1,18 @@
-# Vibe Design System - Core
+# @vibe/core
 
-[![npm](https://img.shields.io/npm/v/monday-ui-react-core)](https://www.npmjs.com/package/monday-ui-react-core)
+<a href="https://bundlephobia.com/package/@vibe/core"><img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@vibe/core"></a>
+<a href="https://www.npmjs.com/package/@vibe/core"><img alt="NPM Version" src="https://img.shields.io/npm/v/@vibe/core?label=@vibe/core"></a>
 
-![image](https://user-images.githubusercontent.com/60314759/147566893-63c5209a-8b83-4f32-af61-8b4c350ec770.png)
-
-[monday.com](https://www.monday.com) React components library - [Storybook](https://vibe.monday.com)
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| last 4 versions                                                                                                                                                                                                   | last 4 versions                                                                                                                                                                                               | 14+                                                                                                                                                                                                           | last 2 versions                                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                                                     | last 2 versions                                                                                                                                                                                           |
+> Vibe Design System's Core Component Library in React
 
 ## Usage
 
 Components are imported from the library's root entry:
 
 ```javascript
-import { Button } from "monday-ui-react-core";
-```
-
-In order to load all the relevant CSS tokens, you should import the `tokens` file at the root of your application file
-
-```javascript
-import "monday-ui-react-core/tokens";
+import { Button } from "@vibe/core";
 ```
 
-_If your project (or it's Storybook) is importing files differently - read more [here](./DEPRECATED_IMPORTS.md)._
-
 ### Font installation
 
 We don't import fonts ourselves, we work best with the following fonts -
@@ -38,46 +25,11 @@ Poppins, Figtree and Roboto, we recommend adding the following `link` import to
 />
 ```
 
-### Peer dependencies
-
-We are reliant on React and React DOM, we are using them as externals, and we don't package them to the package, so you must have them in your project
-
-## Storybook
-
-We are using storybook in order to develop the components independently of any consumer.
-run this to build & run the storybook locally:
-
-```bash
-yarn storybook
-```
-
-the storybook will be served on `http://localhost:7007`
-
-## Developing locally with your consumer application
-
-When developing locally, we are using a npm functionality called npm link, this allows us to
-work locally on our package and use it in a different project without publishing.
-This functionality basically overrides the npm mapping between package name to its repo, and points it to where the package is located locally.
-
-### Troubleshooting local development
-
-- If you are using NVM, make sure both packages are using the same version.
-- Because we are using react hooks and having react as a peerDependency - if you want to develop locally and encounter issues with "invalid hook call" [see this github thread](https://github.com/facebook/react/issues/13991). The quick fix is in your webpack config file alias react to resolve the node_modules path
-
-Go to the project's directory and run:
-
-```zsh
-nvm use
-npm unlink
-npm link
-npm start
-```
-
-## Themes
+## Theming
 
-Theming is supported using CSS variables - for more info on theming please read the [theme guidelines](./THEME_README.md) file
+Theming is supported using CSS variables - for more info on theming please read the [theme guidelines](./docs/theming.md) file.
 
-## SSR (Server Side Rendering)
+## Experimental SSR (Server Side Rendering)
 
 Components are using style injection on the client side (into <head> element)
 This is not usable on the server side.
@@ -89,4 +41,4 @@ globalThis.injectedStyles = {};
 
 in order to have each server side render component css inserted into the injectedStyles object
 each component will insert its css string under a unique key.
-Then you can join all the values into one string and add it under a <style> element
+Then you can join all the values into one string and add it under a `<style>` element

package/dist/components/AttentionBox/AttentionBox.d.ts

@@ -18,6 +18,8 @@ export interface AttentionBoxProps extends VibeComponentProps {
     onClose?: (event: React.MouseEvent) => void;
     compact?: boolean;
     closeButtonAriaLabel?: string;
+    /** Enables an entry animation when the component appears */
+    entryAnimation?: boolean;
 }
 declare const _default: ((import("../../types/VibeComponent").default<AttentionBoxProps, unknown> & Partial<{
     types: typeof AttentionBoxTypeEnum;

package/dist/components/Box/BoxConstants.d.ts

@@ -21,193 +21,193 @@ export declare enum BorderColor {
  * @deprecated
  */
 export declare enum Rounded {
-    SMALL = "roundedSmall",
-    MEDIUM = "roundedMedium",
-    BIG = "roundedBig"
+    SMALL = "small",
+    MEDIUM = "medium",
+    BIG = "big"
 }
 /**
  * @deprecated
  */
 export declare enum Shadow {
-    XS = "shadowXs",
-    SMALL = "shadowSmall",
-    MEDIUM = "shadowMedium",
-    LARGE = "shadowLarge"
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large"
 }
 /**
  * @deprecated
  */
 export declare enum Margin {
-    AUTO = "mAuto",
-    XS = "mXs",
-    SMALL = "mSmall",
-    MEDIUM = "mMedium",
-    LARGE = "mLarge",
-    XL = "mXl",
-    XXL = "mXxl",
-    XXXL = "mXxxl"
+    AUTO = "auto",
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum MarginX {
-    AUTO = "mxAuto",
-    XS = "mxXs",
-    SMALL = "mxSmall",
-    MEDIUM = "mxMedium",
-    LARGE = "mxLarge",
-    XL = "mxXl",
-    XXL = "mxXxl",
-    XXXL = "mxXxxl"
+    AUTO = "auto",
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum MarginY {
-    AUTO = "myAuto",
-    XS = "myXs",
-    SMALL = "mySmall",
-    MEDIUM = "myMedium",
-    LARGE = "myLarge",
-    XL = "myXl",
-    XXL = "myXxl",
-    XXXL = "myXxxl"
+    AUTO = "auto",
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum MarginTop {
-    AUTO = "mtAuto",
-    XS = "mtXs",
-    SMALL = "mtSmall",
-    MEDIUM = "mtMedium",
-    LARGE = "mtLarge",
-    XL = "mtXl",
-    XXL = "mtXxl",
-    XXXL = "mtXxxl"
+    AUTO = "auto",
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum MarginEnd {
-    AUTO = "meAuto",
-    XS = "meXs",
-    SMALL = "meSmall",
-    MEDIUM = "meMedium",
-    LARGE = "meLarge",
-    XL = "meXl",
-    XXL = "meXxl",
-    XXXL = "meXxxl"
+    AUTO = "auto",
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum MarginBottom {
-    AUTO = "mbAuto",
-    XS = "mbXs",
-    SMALL = "mbSmall",
-    MEDIUM = "mbMedium",
-    LARGE = "mbLarge",
-    XL = "mbXl",
-    XXL = "mbXxl",
-    XXXL = "mbXxxl"
+    AUTO = "auto",
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum MarginStart {
-    AUTO = "msAuto",
-    XS = "msXs",
-    SMALL = "msSmall",
-    MEDIUM = "msMedium",
-    LARGE = "msLarge",
-    XL = "msXl",
-    XXL = "msXxl",
-    XXXL = "msXxxl"
+    AUTO = "auto",
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum Padding {
-    XS = "pXs",
-    SMALL = "pSmall",
-    MEDIUM = "pMedium",
-    LARGE = "pLarge",
-    XL = "pXl",
-    XXL = "pXxl",
-    XXXL = "pXxxl"
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum PaddingX {
-    XS = "pxXs",
-    SMALL = "pxSmall",
-    MEDIUM = "pxMedium",
-    LARGE = "pxLarge",
-    XL = "pxXl",
-    XXL = "pxXxl",
-    XXXL = "pxXxxl"
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum PaddingY {
-    XS = "pyXs",
-    SMALL = "pySmall",
-    MEDIUM = "pyMedium",
-    LARGE = "pyLarge",
-    XL = "pyXl",
-    XXL = "pyXxl",
-    XXXL = "pyXxxl"
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum PaddingTop {
-    XS = "ptXs",
-    SMALL = "ptSmall",
-    MEDIUM = "ptMedium",
-    LARGE = "ptLarge",
-    XL = "ptXl",
-    XXL = "ptXxl",
-    XXXL = "ptXxxl"
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum PaddingEnd {
-    XS = "peXs",
-    SMALL = "peSmall",
-    MEDIUM = "peMedium",
-    LARGE = "peLarge",
-    XL = "peXl",
-    XXL = "peXxl",
-    XXXL = "peXxxl"
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum PaddingBottom {
-    XS = "pbXs",
-    SMALL = "pbSmall",
-    MEDIUM = "pbMedium",
-    LARGE = "pbLarge",
-    XL = "pbXl",
-    XXL = "pbXxl",
-    XXXL = "pbXxxl"
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated
  */
 export declare enum PaddingStart {
-    XS = "psXs",
-    SMALL = "psSmall",
-    MEDIUM = "psMedium",
-    LARGE = "psLarge",
-    XL = "psXl",
-    XXL = "psXxl",
-    XXXL = "psXxxl"
+    XS = "xs",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl"
 }
 /**
  * @deprecated

package/dist/components/Icon/Icons/components/Clipboard.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface ClipboardProps extends React.SVGAttributes<SVGElement> {
+    size?: string | number;
+}
+declare const Clipboard: React.FC<ClipboardProps>;
+export default Clipboard;

package/dist/components/Icon/Icons/components/Forward.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface ForwardProps extends React.SVGAttributes<SVGElement> {
+    size?: string | number;
+}
+declare const Forward: React.FC<ForwardProps>;
+export default Forward;

package/dist/components/Table/TableContainer/TableContainer.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableContainerProps } from "./TableContainer.types";
-declare const TableContainer: ({ id, className, "data-testid": dataTestId, style, children }: TableContainerProps) => React.JSX.Element;
+declare const TableContainer: React.ForwardRefExoticComponent<TableContainerProps & React.RefAttributes<HTMLDivElement>>;
 export default TableContainer;

package/dist/components/Table/TableHeaderCell/TableHeaderCell.d.ts

@@ -1,6 +1,7 @@
+import React from "react";
 import { SubIcon, VibeComponent, VibeComponentProps } from "../../../types";
 export interface TableHeaderCellProps extends VibeComponentProps {
-    title: string;
+    title: string | React.ReactNode;
     icon?: SubIcon;
     infoContent?: string;
     sortState?: "asc" | "desc" | "none";

package/dist/components/Table/context/TableContainerContext/TableContainerContext.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { TableContainerContext as ITableContainerContext, TableContainerProviderProps } from "./TableContainerContext.types";
-export declare const TableContainerProvider: ({ children }: TableContainerProviderProps) => React.JSX.Element;
-export declare const useTableContainer: () => ITableContainerContext;
+import { TableContainerProviderProps } from "./TableContainerContext.types";
+export declare const TableContainerProvider: ({ value, children }: TableContainerProviderProps) => React.JSX.Element;
+export declare const useTableContainer: () => import("./TableContainerContext.types").TableContainerProviderValue;

package/dist/components/Table/context/TableContainerContext/TableContainerContext.types.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
-export interface TableContainerContext {
-    menuContainerRef: React.MutableRefObject<HTMLDivElement>;
+export type TableContainerContext = TableContainerProviderValue;
+export interface TableContainerProviderValue {
+    menuContainerRef: React.RefObject<HTMLDivElement>;
 }
 export interface TableContainerProviderProps {
+    value: TableContainerProviderValue;
     children: React.ReactNode;
 }

package/dist/components/Table/context/TableContext/TableContext.types.d.ts

@@ -1,22 +1,26 @@
 import { TableProps } from "../../Table/Table";
 import React, { UIEventHandler } from "react";
-export interface TableContext {
+export interface TableContext extends TableProviderValue {
+    headRef: React.MutableRefObject<HTMLDivElement>;
+    onHeadScroll: UIEventHandler<HTMLDivElement>;
+    virtualizedListRef: React.MutableRefObject<HTMLDivElement>;
+    onVirtualizedListScroll: UIEventHandler<HTMLDivElement>;
+}
+export interface TableProviderForwardedProps {
     columns: TableProps["columns"];
     dataState?: TableProps["dataState"];
     emptyState: TableProps["emptyState"];
     errorState: TableProps["errorState"];
     size: TableProps["size"];
+}
+export interface TableProviderValue extends TableProviderForwardedProps {
     tableRootRef: React.MutableRefObject<HTMLDivElement>;
-    scrollLeft: number;
-    onTableRootScroll: UIEventHandler<HTMLDivElement>;
-    headRef: React.MutableRefObject<HTMLDivElement>;
-    onHeadScroll: UIEventHandler<HTMLDivElement>;
-    virtualizedListRef: React.MutableRefObject<HTMLDivElement>;
-    onVirtualizedListScroll: UIEventHandler<HTMLDivElement>;
     isVirtualized: boolean;
     markTableAsVirtualized: () => void;
+    scrollLeft: number;
+    setScrollLeft: (scrollAmount: number) => void;
 }
 export type TableProviderProps = {
-    value: Pick<TableContext, "columns" | "dataState" | "emptyState" | "errorState" | "size">;
+    value: TableProviderValue;
     children: React.ReactNode;
 };

package/dist/components/Table/context/TableRowMenuContext/TableRowMenuContext.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableRowMenuContext as ITableRowMenuContext, TableRowMenuProviderProps } from "./TableRowMenuContext.types";
-export declare const TableRowMenuProvider: ({ children }: TableRowMenuProviderProps) => React.JSX.Element;
+export declare const TableRowMenuProvider: ({ value, children }: TableRowMenuProviderProps) => React.JSX.Element;
 export declare const useTableRowMenu: () => ITableRowMenuContext;

package/dist/components/Table/context/TableRowMenuContext/TableRowMenuContext.types.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
-export interface TableRowMenuContext {
+export interface TableRowMenuContext extends Pick<TableRowMenuProviderValue, "resetHoveredRow"> {
     hoveredRowId: string;
-    resetHoveredRow: () => void;
     onMouseOverRow: (rowRef: React.MutableRefObject<HTMLDivElement>) => void;
     onMouseLeaveRow: () => void;
     onMouseOverRowMenu: () => void;
@@ -10,6 +9,15 @@ export interface TableRowMenuContext {
     setTableMenuShown: () => void;
     setTableMenuHidden: () => void;
 }
+export interface TableRowMenuProviderValue {
+    tableRootRef: React.RefObject<HTMLDivElement>;
+    hoveredRowRef: React.RefObject<HTMLDivElement>;
+    isMenuOpen: boolean;
+    resetHoveredRow: () => void;
+    setHoveredRowRef: (rowRef: React.RefObject<HTMLDivElement>) => void;
+    setIsMenuOpen: (isOpen: boolean) => void;
+}
 export type TableRowMenuProviderProps = {
+    value: TableRowMenuProviderValue;
     children: React.ReactNode;
 };

package/dist/mocked_classnames/components/AttentionBox/AttentionBox.d.ts

@@ -18,6 +18,8 @@ export interface AttentionBoxProps extends VibeComponentProps {
     onClose?: (event: React.MouseEvent) => void;
     compact?: boolean;
     closeButtonAriaLabel?: string;
+    /** Enables an entry animation when the component appears */
+    entryAnimation?: boolean;
 }
 declare const _default: ((import("../../types/VibeComponent").default<AttentionBoxProps, unknown> & Partial<{
     types: typeof AttentionBoxTypeEnum;