@cube-dev/ui-kit 0.8.8 → 0.9.0

package/dist/types/styled/styled.d.ts

@@ -0,0 +1,30 @@
+import { ComponentType } from 'react';
+import { AllBaseProps, BaseStyleProps, StyledProps } from '../components/types';
+import { Styles, StylesInterface } from '../styles/types';
+import { ResponsiveStyleValue } from '../utils/styles';
+export declare type AllBasePropsWithMods<K extends (keyof StylesInterface)[]> = AllBaseProps & {
+    [key in K[number]]?: ResponsiveStyleValue<StylesInterface[key]>;
+} & BaseStyleProps;
+declare type StyledPropsWithDefaults<Props extends {
+    styles?: Styles;
+}, DefaultProps extends Partial<Props>> = keyof DefaultProps extends never ? Props : {
+    [key in Extract<keyof Props, keyof DefaultProps>]?: Props[key];
+} & {
+    [key in keyof Omit<Props, keyof DefaultProps>]: Props[key];
+};
+declare type EitherLegacyPropsOrInlined<K extends (keyof StylesInterface)[], DefaultProps> = ((Pick<StyledProps<K, DefaultProps>, 'name' | 'tag' | 'styles'> & {
+    /**
+     * @deprecated
+     */
+    props?: DefaultProps;
+}) & {
+    [key in keyof DefaultProps]?: 'You Should use either legacy props field or inline props';
+}) | ({
+    props?: 'You Should use either legacy props field or inline props';
+} & DefaultProps);
+declare function styled<K extends (keyof StylesInterface)[], Props, DefaultProps extends Partial<Props> = Partial<Props>>(options: StyledProps<K, DefaultProps>, secondArg?: never): any;
+declare function styled(selector: string, styles?: Styles): any;
+declare function styled<K extends (keyof StylesInterface)[], Props extends {
+    styles?: Styles;
+}, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: EitherLegacyPropsOrInlined<K, DefaultProps>): ComponentType<StyledPropsWithDefaults<Props, DefaultProps>>;
+export { styled };

package/dist/types/test/setup.d.ts

@@ -0,0 +1,3 @@
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
+import 'jest-styled-components';

package/dist/types/utils/warnings.d.ts

@@ -0,0 +1,9 @@
+export declare function propDeprecationWarning(name: any, props: any, propList: any): void;
+export declare function accessibilityWarning(...args: any[]): void;
+export declare function warn(...args: any[]): void;
+export declare function deprecationWarning(condition: any, { property, name, betterAlternative, reason, }: {
+    property: string;
+    name: string;
+    betterAlternative: (() => string) | string;
+    reason?: (() => string) | string;
+}): void;

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.8.8",
+  "version": "0.9.0",
   "description": "UIKit for Cube Projects",
+  "module": "dist/es/index.js",
   "main": "dist/cjs/index.js",
-  "module": "dist/mjs/index.js",
-  "types": "dist/mjs/index.d.ts",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": [
+    "./**/styles/predefined.{js,ts}"
+  ],
   "exports": {
     ".": {
-      "require": "./dist/cjs/index.js",
-      "import": "./dist/mjs/index.js",
-      "types": "./dist/mjs/index.d.ts"
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js"
     }
   },
   "files": [
@@ -18,10 +20,11 @@
     "dist/**/*.d.ts"
   ],
   "scripts": {
-    "start": "cross-env PARCEL_AUTOINSTALL=false parcel src/storybook.html",
-    "build": "cross-env NODE_ENV=production rollup -c",
-    "build:esm": "cross-env NODE_ENV=production ESM_BUILD_ONLY=true rollup -c",
-    "watch": "rollup -c -w",
+    "start": "yarn storybook",
+    "build": "npm-run-all clear -p build:* && node ./scripts/copy-files.js && node scripts/add-banner.js",
+    "build:esm": "tsc -p tsconfig.es.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "watch": "yarn build:esm --watch",
     "test": "jest",
     "test-cover": "jest --coverage",
     "test-watch": "jest --watch",
@@ -29,21 +32,29 @@
     "lint": "eslint --cache src && prettier --check \"src/**/*.{js,jsx}\"",
     "fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\" && eslint --fix --cache src --ext .js,.ts,.jsx,.tsx",
     "compile": "babel src -d dist --copy-files",
-    "storybook": "start-storybook -s ./public -p 6006",
+    "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "chromatic": "npx chromatic",
+    "presize": "node -e 'require(\"./scripts/size-limit\").createMeasurer()'",
     "size": "size-limit",
-    "prepare": "husky install"
+    "postsize": "node -e 'require(\"./scripts/size-limit\").deleteMeasurer()'",
+    "prepare": "husky install",
+    "clear": "rimraf ./dist"
+  },
+  "publishConfig": {
+    "directory": "dist"
   },
   "keywords": [
     "uikit"
   ],
   "author": "Cube Dev Team",
-  "devDependencies": {
+  "peerDependencies": {
+    "react": ">= 17.0.0",
+    "react-dom": ">= 17.0.0",
+    "styled-components": ">= 5.3.0"
+  },
+  "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@commitlint/cli": "16.1.0",
-    "@commitlint/config-conventional": "16.0.0",
-    "@open-wc/testing": "^3.0.3",
     "@react-aria/button": "^3.3.4",
     "@react-aria/checkbox": "^3.3.1",
     "@react-aria/combobox": "^3.2.1",
@@ -86,36 +97,44 @@
     "@react-types/switch": "^3.1.2",
     "@react-types/textfield": "^3.3.0",
     "@react-types/tooltip": "^3.1.2",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.1.1",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@rollup/plugin-url": "^6.1.0",
+    "clsx": "^1.1.1",
+    "email-validator": "^2.0.4",
+    "prismjs": "^1.25.0",
+    "react-is": "^17.0.0",
+    "react-transition-group": "^4.4.2",
+    "tiny-invariant": "^1.2.0",
+    "valid-url": "^1.0.9"
+  },
+  "devDependencies": {
+    "@actions/core": "^1.2.6",
+    "@actions/exec": "^1.0.3",
+    "@actions/github": "^2.1.1",
+    "@commitlint/cli": "16.1.0",
+    "@commitlint/config-conventional": "16.0.0",
+    "@happy-dom/jest-environment": "^2.50.0",
+    "@size-limit/esbuild": "^7.0.8",
     "@size-limit/preset-big-lib": "^7.0.5",
+    "@size-limit/webpack-why": "^7.0.5",
     "@storybook/addon-actions": "^6.4.9",
     "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-links": "^6.4.9",
-    "@storybook/preset-create-react-app": "^4.0.0",
     "@storybook/react": "^6.4.9",
-    "@svgr/rollup": "^6.1.2",
-    "@swc/core": "1.2.136",
-    "@swc/jest": "0.2.17",
+    "@swc/core": "1.2.148",
+    "@swc/jest": "0.2.20",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
+    "@types/react-test-renderer": "17.0.1",
     "@typescript-eslint/eslint-plugin": "^5.8.1",
     "@typescript-eslint/parser": "^5.8.1",
     "@web/test-runner": "^0.13.23",
     "babel-eslint": "^10.1.0",
+    "bytes": "^3.1.0",
     "chromatic": "^6.3.3",
     "clipboard-copy": "^4.0.1",
-    "clsx": "^1.1.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.5.1",
-    "email-validator": "^2.0.4",
+    "dedent": "^0.7.0",
     "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^7.0.0",
@@ -125,44 +144,45 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-storybook": "^0.5.5",
+    "happy-dom": "^2.50.0",
     "husky": ">=6",
     "jest": "27.5.0",
+    "jest-styled-components": "^7.0.8",
     "jsdom": "19.0.0",
-    "less-loader": "^10.2.0",
     "lint-staged": ">=10",
+    "markdown-table": "^2.0.0",
     "netlify-cli": "^8.6.0",
-    "parcel-bundler": "^1.12.4",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
-    "prismjs": "^1.25.0",
+    "prettier-eslint": "^13.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-router": "^6.2.1",
     "react-test-renderer": "^17.0.2",
-    "react-transition-group": "^4.4.2",
-    "rollup": "^2.62.0",
-    "rollup-plugin-less": "^1.1.3",
-    "rollup-plugin-local-resolve": "^1.0.7",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^5.5.2",
+    "rimraf": "^3.0.2",
     "size-limit": "^7.0.5",
     "storybook-addon-styled-component-theme": "^2.0.0",
-    "style-loader": "^3.3.1",
-    "styled-components": "^5.3.3",
-    "typescript": "^4.5.4",
-    "valid-url": "^1.0.9"
+    "styled-components": "5.3.0",
+    "typescript": "^4.5.4"
   },
   "resolutions": {
     "es5-ext": "0.10.53"
   },
   "size-limit": [
     {
-      "name": "Cube UI Kit",
-      "path": [
-        "dist/mjs/index.js"
-      ],
-      "limit": "200 kB"
+      "name": "All",
+      "path": "./dist/__measure.js",
+      "running": false,
+      "webpack": false,
+      "limit": "160 kB"
+    },
+    {
+      "name": "Tree shaking (just a Button)",
+      "path": "./dist/es/index.js",
+      "import": "{ Button }",
+      "running": false,
+      "webpack": false,
+      "limit": "40 kB"
     }
   ],
   "browserslist": [
@@ -171,14 +191,5 @@
     "last 5 Firefox versions",
     "last 3 Safari versions"
   ],
-  "peerDependencies": {
-    "react": ">= 17.0.0",
-    "react-dom": ">= 17.0.0"
-  },
-  "dependencies": {
-    "@storybook/addon-postcss": "^2.0.0",
-    "dom-helpers": "^5.2.1",
-    "react-is": "^17.0.2"
-  },
   "license": "MIT"
 }

package/dist/cjs/App.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function App(): JSX.Element;
-export default App;

package/dist/cjs/components/forms/Checkbox/Checkbox.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import { AriaCheckboxProps } from '@react-types/checkbox';
-import { CheckboxGroup } from './CheckboxGroup';
-import { BaseProps } from '../../types';
-import { FormFieldProps } from '../../../shared';
-export interface CubeCheckboxProps extends BaseProps, AriaCheckboxProps, FormFieldProps {
-}
-declare let __Checkbox: import("react").ForwardRefExoticComponent<Omit<CubeCheckboxProps, "isSelected" | "defaultSelected"> & {
-    isSelected?: any;
-    defaultSelected?: any;
-} & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>> & {
-    Group: typeof CheckboxGroup;
-} & {
-    Group: import("react").ForwardRefExoticComponent<Omit<import("./CheckboxGroup").CubeCheckboxGroupProps, "value" | "defaultValue"> & {
-        value?: any;
-        defaultValue?: any;
-    } & import("react").RefAttributes<unknown>>;
-};
-export { __Checkbox as Checkbox };

package/dist/cjs/components/forms/Checkbox/CheckboxGroup.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { BaseProps } from '../../types';
-import { AriaCheckboxGroupProps } from '@react-types/checkbox';
-import { FormFieldProps } from '../../../shared';
-export interface CubeCheckboxGroupProps extends BaseProps, AriaCheckboxGroupProps, FormFieldProps {
-    orientation?: 'vertical' | 'horizontal';
-}
-/**
- * Checkbox groups allow users to select a single option from a list of mutually exclusive options.
- * All possible options are exposed up front for users to compare.
- */
-declare const _CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<CubeCheckboxGroupProps, "value" | "defaultValue"> & {
-    value?: any;
-    defaultValue?: any;
-} & import("react").RefAttributes<unknown>>;
-export { _CheckboxGroup as CheckboxGroup };

package/dist/cjs/components/forms/Form/index.d.ts

@@ -1,5 +0,0 @@
-export { Form, useFormProps } from './Form';
-export type { CubeFormProps } from './Form';
-export { Field } from './Field';
-export { useForm } from './useForm';
-export type { CubeFormInstance } from './useForm';

package/dist/cjs/components/forms/NumberInput/NumberInput.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import { CubeTextInputBaseProps } from '../TextInput/TextInputBase';
-import { AriaNumberFieldProps } from '@react-types/numberfield';
-export interface CubeNumberInputProps extends Omit<CubeTextInputBaseProps, 'defaultValue' | 'value' | 'onChange'>, AriaNumberFieldProps {
-    /** Whether or to hide stepper */
-    hideStepper?: boolean;
-}
-/**
- * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
- */
-declare const _NumberInput: import("react").ForwardRefExoticComponent<Omit<CubeNumberInputProps, "value" | "defaultValue"> & {
-    value?: any;
-    defaultValue?: any;
-} & import("react").RefAttributes<unknown>>;
-export { _NumberInput as NumberInput };

package/dist/cjs/components/forms/RadioGroup/Radio.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import { RadioGroup } from './RadioGroup';
-import { Styles } from '../../../styles/types';
-import { BaseProps } from '../../types';
-import { AriaRadioProps } from '@react-types/radio';
-import { FormFieldProps } from '../../../shared';
-export interface CubeRadioProps extends BaseProps, AriaRadioProps, FormFieldProps {
-    inputStyles?: Styles;
-    type?: 'button' | 'radio';
-}
-/**
- * Radio buttons allow users to select a single option from a list of mutually exclusive options.
- * All possible options are exposed up front for users to compare.
- */
-declare const _RadioButton: import("react").ForwardRefExoticComponent<CubeRadioProps & import("react").RefAttributes<unknown>>;
-declare const __Radio: import("react").ForwardRefExoticComponent<CubeRadioProps & import("react").RefAttributes<unknown>> & {
-    Group: typeof RadioGroup;
-    Button: typeof _RadioButton;
-} & {
-    Group: import("react").ForwardRefExoticComponent<Omit<import("./RadioGroup").CubeRadioGroupProps, "value" | "defaultValue"> & {
-        value?: any;
-        defaultValue?: any;
-    } & import("react").RefAttributes<unknown>>;
-    Button: import("react").ForwardRefExoticComponent<CubeRadioProps & import("react").RefAttributes<unknown>>;
-};
-export { __Radio as Radio };
-export { _RadioButton as RadioButton };

package/dist/cjs/components/forms/RadioGroup/RadioGroup.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-import { Styles } from '../../../styles/types';
-import { BaseProps } from '../../types';
-import { AriaRadioGroupProps } from '@react-types/radio';
-import { FormFieldProps } from '../../../shared';
-export interface CubeRadioGroupProps extends BaseProps, AriaRadioGroupProps, FormFieldProps {
-    groupStyles?: Styles;
-}
-/**
- * Radio groups allow users to select a single option from a list of mutually exclusive options.
- * All possible options are exposed up front for users to compare.
- */
-declare const _RadioGroup: import("react").ForwardRefExoticComponent<Omit<CubeRadioGroupProps, "value" | "defaultValue"> & {
-    value?: any;
-    defaultValue?: any;
-} & import("react").RefAttributes<unknown>>;
-export { _RadioGroup as RadioGroup };

package/dist/cjs/components/organisms/Modal/Modal.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import { CubeCardProps } from '../../content/Card/Card';
-export interface CubeModalProps extends CubeCardProps {
-    title?: string;
-    isVisible?: boolean;
-    type?: 'default' | 'primary' | 'info' | 'danger';
-    isClosable?: boolean;
-    isLoading?: boolean;
-    okType?: 'default' | 'primary' | 'danger';
-    okText?: string;
-    cancelText?: string;
-    onOk?: (any: any) => Promise<any> | void | false;
-    onCancel?: () => Promise<any> | void;
-    onClose?: () => Promise<any> | void;
-    isDisabled?: boolean;
-}
-/**
- * DEPRECATED Modal component
- * Designed after AntD Modal component and almost duplicate its API.
- * Use Dialog component instead
- */
-export declare function Modal(allProps: CubeModalProps): JSX.Element;
-export declare namespace Modal {
-    var confirm: (options: any) => void;
-    var info: (options: any) => void;
-}

package/dist/cjs/components/overlays/AlertDialog/AlertDialog.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import { CubeButtonProps } from '../../actions/Button/Button';
-import { CubeDialogProps } from '../Dialog/Dialog';
-export interface CubeAlertDialogActionsProps {
-    confirm?: CubeButtonProps | boolean;
-    secondary?: CubeButtonProps;
-    cancel?: CubeButtonProps | boolean;
-}
-export interface CubeAlertDialogProps extends CubeDialogProps {
-    /** Whether the dialog is an important prompt */
-    danger?: boolean;
-    actions?: CubeAlertDialogActionsProps;
-    title?: string;
-    noActions?: boolean;
-}
-/**
- * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
- */
-declare let _AlertDialog: import("react").ForwardRefExoticComponent<CubeAlertDialogProps & import("react").RefAttributes<unknown>>;
-export { _AlertDialog as AlertDialog };

package/dist/cjs/components/overlays/Dialog/Dialog.d.ts

@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-import { BaseProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps } from '../../types';
-import { AriaDialogProps } from '@react-types/dialog';
-export interface CubeDialogProps extends Omit<BaseProps, 'role'>, AriaDialogProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps {
-    /** The type of the dialog. It affects its size and position. */
-    type?: 'modal' | 'popover' | 'fullscreen' | 'fullscreenTakeover' | 'panel' | 'tray';
-    /** The size of the dialog */
-    size?: 'S' | 'M' | 'L';
-    /** Whether the dialog is dismissable */
-    isDismissable?: boolean;
-    /** Trigger when the dialog is dismissed */
-    onDismiss?: (arg?: any) => void;
-    /** That you can replace the close icon with */
-    closeIcon?: ReactNode;
-}
-/**
- * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
- * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
- */
-declare let _Dialog: import("react").ForwardRefExoticComponent<CubeDialogProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>>;
-export { _Dialog as Dialog };

package/dist/cjs/components/overlays/Dialog/DialogContainer.d.ts

@@ -1,22 +0,0 @@
-import { ReactNode } from 'react';
-export interface CubeDialogContainerProps {
-    /** The Dialog to display, if any. */
-    children?: ReactNode;
-    /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */
-    onDismiss?: (arg?: any) => void;
-    /**
-     * The type of Dialog that should be rendered. See the visual options below for examples of each.
-     * @default 'modal'
-     */
-    type?: 'modal' | 'fullscreen' | 'fullscreenTakeover';
-    /** Whether the Dialog is dismissable. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */
-    isDismissable?: boolean;
-    /** Whether pressing the escape key to close the dialog should be disabled. */
-    isKeyboardDismissDisabled?: boolean;
-}
-/**
- * A DialogContainer accepts a single Dialog as a child, and manages showing and hiding
- * it in a modal. Useful in cases where there is no trigger element
- * or when the trigger unmounts while the dialog is open.
- */
-export declare function DialogContainer(props: CubeDialogContainerProps): JSX.Element;