cortex-react-ui 0.1.0 → 0.1.4

package/lib/cjs/types/DatePicker/DatePicker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    value?: Date;
+    className?: string;
+};
+declare const DatePicker: React.FC<Props>;
+export default DatePicker;

package/lib/cjs/types/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker';

package/lib/cjs/types/Popper/Popper.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const PopoverPlacement: {
+export declare const PopperPlacement: {
     readonly Center: "center";
     readonly BottomCenter: "bottom-center";
     readonly BottomRight: "bottom-right";
@@ -16,10 +16,11 @@ export declare const PopoverPlacement: {
 };
 declare type Props = {
     anchorEl?: string | HTMLElement | React.RefObject<HTMLElement>;
-    placement?: ObjectValues<typeof PopoverPlacement>;
+    placement?: ObjectValues<typeof PopperPlacement>;
     open?: boolean;
     role?: string;
     children?: React.ReactNode;
+    className?: string;
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     onMouseMove?: React.MouseEventHandler<HTMLDivElement>;

package/lib/cjs/types/Spinner/Spinner.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface SpinnerProps {
+    className?: string;
+    variant: 'indeterminate' | 'determinate';
+}
+declare const Spinner: React.FC<SpinnerProps>;
+export default Spinner;

package/lib/cjs/types/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner';

package/lib/cjs/types/TagInput/Tag.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface TooltipProps {
+    tag: Cortex.Tag;
+    className?: string;
+    onDelete?: () => void;
+}
+declare const Tag: React.FC<TooltipProps>;
+export default Tag;

package/lib/cjs/types/TagInput/TagInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TooltipProps {
+    tags?: Cortex.Tag[];
+    className?: string;
+    suggestions?: Cortex.TagSuggestion[];
+    onChange?: (tags: Cortex.Tag[]) => void;
+}
+declare const TagInput: React.FC<TooltipProps>;
+export default TagInput;

package/lib/cjs/types/TagInput/TagSearchInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TagSearchInputProps {
+    className?: string;
+    value: string;
+    onClick?: () => void;
+    onChange?: (value: string) => void;
+}
+declare const TagSearchInput: React.ForwardRefExoticComponent<TagSearchInputProps & React.RefAttributes<HTMLElement>>;
+export default TagSearchInput;

package/lib/cjs/types/TagInput/TagSuggestion.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface TagSuggestionProps {
+    open: boolean;
+    suggestions?: Cortex.TagSuggestion[];
+    anchorEl?: React.RefObject<HTMLElement>;
+    filter?: string;
+    onSuggestionClick?: (suggestion: Cortex.TagSuggestion) => void;
+}
+declare const TagSuggestion: React.ForwardRefExoticComponent<TagSuggestionProps & React.RefAttributes<HTMLElement>>;
+export default TagSuggestion;

package/lib/cjs/types/TagInput/TagSuggestionGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface TagSuggestionGroupProps {
+    group: Cortex.TagSuggestion;
+    onClick?: (suggestion: Cortex.TagSuggestion, event: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const TagSuggestionGroup: React.FC<TagSuggestionGroupProps>;
+export default TagSuggestionGroup;

package/lib/cjs/types/TagInput/TagSuggestionItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface TagSuggestionItemProps {
+    suggestion: Cortex.TagSuggestion;
+    onClick?: (suggestion: Cortex.TagSuggestion, event: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const TagSuggestionItem: React.FC<TagSuggestionItemProps>;
+export default TagSuggestionItem;

package/lib/cjs/types/TagInput/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TagInput';

package/lib/cjs/types/Tooltip/Tooltip.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 export interface TooltipProps {
-    children?: React.DetailedReactHTMLElement<any, HTMLElement>;
+    children?: React.ReactElement<any>;
     anchorEl?: string | HTMLElement | React.RefObject<HTMLElement>;
     title: React.ReactNode;
     enterDelay?: number;
     leaveDelay?: number;
+    className?: string;
 }
 declare const Tooltip: React.FC<TooltipProps>;
 export default Tooltip;

package/lib/cjs/types/Transition/CSSTransition.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type Props = {
+    trigger: boolean;
+    mode: 'appear' | 'disappear';
+    children?: React.ReactElement<any>;
+    enterTimeout?: number;
+    exitTimeout?: number;
+    className?: string;
+    onEnter?: () => void;
+    onEntering?: () => void;
+    onEntered?: () => void;
+    onExit?: () => void;
+    onExiting?: () => void;
+    onExited?: () => void;
+};
+declare const CSSTransition: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+export default CSSTransition;

package/lib/cjs/types/Transition/Fade.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type Props = {
+    trigger: boolean;
+    children?: React.ReactElement<any>;
+    onEnter?: () => void;
+    onEntering?: () => void;
+    onEntered?: () => void;
+    onExit?: () => void;
+    onExiting?: () => void;
+    onExited?: () => void;
+};
+declare const Fade: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+export default Fade;

package/lib/cjs/types/utils/classNames.d.ts

@@ -0,0 +1 @@
+export default function classNames(...values: any[]): string;

package/lib/cjs/types/utils/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function useClickOutside(callback: () => void, nodes: React.MutableRefObject<HTMLElement | null>[]): void;

package/lib/index.d.ts

@@ -6,11 +6,12 @@ interface ButtonProps {
 declare const Button: React.FC<ButtonProps>;
 
 interface TooltipProps {
-    children?: React.DetailedReactHTMLElement<any, HTMLElement>;
+    children?: React.ReactElement<any>;
     anchorEl?: string | HTMLElement | React.RefObject<HTMLElement>;
     title: React.ReactNode;
     enterDelay?: number;
     leaveDelay?: number;
+    className?: string;
 }
 declare const Tooltip: React.FC<TooltipProps>;
 

package/lib/styles/Popper/index.scss

@@ -0,0 +1,24 @@
+@import "../global.scss";
+
+@mixin popper($props: null, $options: null) {
+    $internal-options: $default-options;
+
+    $internal-props: (
+        bgColor: #212121,
+        fgColor: #fff,
+    );
+
+    $internal-props: safe-map-merge($internal-props, $props);
+    $internal-options: safe-map-merge($internal-options, $options);
+
+    // .ui-popper {
+    //     @if get-map-deep($internal-options, "properties") == true {
+    //         padding: 8px;
+    //         border-radius: 4px;
+    //     }
+    //     @if get-map-deep($internal-options, "colors") == true {
+    //         background-color: get-map-deep($internal-props, "bgColor");
+    //         color: get-map-deep($internal-props, "fgColor");
+    //     }
+    // }
+}

package/lib/styles/Spinner/index.scss

@@ -0,0 +1,43 @@
+@import "../global.scss";
+
+@mixin spinner($props: null, $options: null) {
+    $internal-options: $default-options;
+
+    $internal-props: (
+        color: blue,
+    );
+
+    $internal-props: safe-map-merge($internal-props, $props);
+    $internal-options: safe-map-merge($internal-options, $options);
+
+    @if get-map-deep($internal-options, "properties") == true {
+        @keyframes ui-spinner-anim {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    }
+
+    .ui-spinner {
+        @if get-map-deep($internal-options, "properties") == true {
+            display: inline-block;
+            width: 2rem;
+            height: 2rem;
+            vertical-align: text-bottom;
+            border: 0.25em solid;
+            border-right: 0.25em solid transparent;
+            border-radius: 50%;
+            text-indent: -9999em;
+        }
+
+        @if get-map-deep($internal-options, "colors") == true {
+            border-left-color: get-map-deep($internal-props, "color");
+            border-top-color: get-map-deep($internal-props, "color");
+            border-bottom-color: get-map-deep($internal-props, "color");
+        }
+    }
+
+    .ui-spinner-indeterminate {
+        animation: ui-spinner-anim 0.75s linear infinite;
+    }
+}

package/lib/styles/TagInput/index.scss

@@ -0,0 +1,13 @@
+@import "../global.scss";
+
+@mixin taginput($props: null, $options: null) {
+    $internal-options: $default-options;
+
+    $internal-props: ();
+
+    $internal-props: safe-map-merge($internal-props, $props);
+    $internal-options: safe-map-merge($internal-options, $options);
+
+    .ui-taginput {
+    }
+}

package/lib/styles/Tooltip/index.scss

@@ -0,0 +1,24 @@
+@import "../global.scss";
+
+@mixin tooltip($props: null, $options: null) {
+    $internal-options: $default-options;
+
+    $internal-props: (
+        bgColor: red,
+        fgColor: #fff,
+    );
+
+    $internal-props: safe-map-merge($internal-props, $props);
+    $internal-options: safe-map-merge($internal-options, $options);
+    
+    .ui-tooltip-content {
+        @if get-map-deep($internal-options, "properties") == true {
+            padding: 8px;
+            border-radius: 4px;
+        }
+        @if get-map-deep($internal-options, "colors") == true {
+            background-color: get-map-deep($internal-props, "bgColor");
+            color: get-map-deep($internal-props, "fgColor");
+        }
+    }
+}

package/lib/styles/Transition/index.scss

@@ -0,0 +1,15 @@
+.ui-fade {
+    opacity: 0;
+    transition: opacity linear 160ms;
+}
+
+.ui-fade-entering,
+.ui-fade-entered {
+    opacity: 1;
+}
+
+
+.ui-fade-exited,
+.ui-fade-exiting {
+    opacity: 0;
+}

package/lib/styles/global.scss

@@ -0,0 +1,22 @@
+$default-options: (
+    properties: true,
+    colors: true,
+);
+
+@function get-map-deep($map, $keys...) {
+    @each $key in $keys {
+        $map: map-get($map, $key);
+    }
+    @return $map;
+}
+
+@function is-map($map) {
+    @return type-of($map) == "map";
+}
+
+@function safe-map-merge($map, $map2) {
+    @if is-map($map) == true and is-map($map2) == true {
+        @return map-merge($map, $map2);
+    }
+    @return $map;
+}

package/lib/styles/index.scss

@@ -0,0 +1,27 @@
+@import "Transition";
+@import "Popper";
+@import "Tooltip";
+@import "Spinner";
+@import "TagInput";
+
+@include popper();
+@include tooltip();
+@include spinner();
+@include taginput();
+
+// @include popper();
+// @include popper(
+//     (
+//         bgColor: red,
+//         fgColor: blue,
+//     )
+// );
+// @include popper(
+//     (
+//         bgColor: red,
+//         fgColor: blue,
+//     ),
+//     (
+//         properties: false
+//     )
+// );

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "cortex-react-ui",
-  "version": "0.1.0",
+  "version": "0.1.4",
   "description": "React UI",
   "author": "Anthony",
   "license": "MIT",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
   "files": [
     "lib"
   ],
@@ -13,28 +16,12 @@
   "scripts": {
     "start": "yarn storybook",
     "build": "rm -rf ./lib && yarn rollup",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "test": "",
     "prepare": "yarn build",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
     "rollup": "rollup -c"
   },
-  "dependencies": {
-    "@dateam/ark": "^0.2.19",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
-  },
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -63,27 +50,48 @@
       "last 1 safari version"
     ]
   },
+  "dependencies": {},
+  "peerDependencies": {
+    "@dateam/ark": "^0.2.19",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
   "devDependencies": {
+    "@dateam/ark": "^0.2.19",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@storybook/addon-actions": "^6.4.8",
-    "@storybook/addon-essentials": "^6.4.8",
-    "@storybook/addon-links": "^6.4.8",
-    "@storybook/node-logger": "^6.4.8",
+    "@storybook/addon-actions": "^6.4.9",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-links": "^6.4.9",
+    "@storybook/node-logger": "^6.4.9",
     "@storybook/preset-create-react-app": "^3.2.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.4.8",
+    "@storybook/react": "^6.4.9",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "css-loader": "5.2.6",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3",
     "rollup": "^2.60.2",
+    "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-dts": "^4.0.1",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.44.0",
     "sass-loader": "10.1.1",
-    "style-loader": "2.0.0"
+    "style-loader": "2.0.0",
+    "typescript": "^4.1.2"
   }
-}
+}