@darajs/ui-components 1.0.0-a.1

package/dist/utils/label.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import styled from '@darajs/styled-components';
+const SubtleLabel = styled.label `
+    margin-bottom: 0px;
+    font-size: 11px;
+    color: ${(props) => props.theme.colors.grey6};
+`;
+export default SubtleLabel;
+//# sourceMappingURL=label.js.map

package/dist/utils/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../src/utils/label.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;aAGnB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;CAC/C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/utils/list-styles.d.ts

@@ -0,0 +1,12 @@
+interface ListProps {
+    isOpen: boolean;
+    maxItems?: number;
+}
+declare const List: import("styled-components").StyledComponent<"div", import("@darajs/styled-components").DefaultTheme, ListProps, never>;
+interface ListItemProps {
+    hovered?: boolean;
+    size?: number;
+}
+declare const ListItem: import("styled-components").StyledComponent<"span", import("@darajs/styled-components").DefaultTheme, ListItemProps, never>;
+export { List, ListItem };
+//# sourceMappingURL=list-styles.d.ts.map

package/dist/utils/list-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-styles.d.ts","sourceRoot":"","sources":["../../src/utils/list-styles.tsx"],"names":[],"mappings":"AAkBA,UAAU,SAAS;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,IAAI,wHAUT,CAAC;AAEF,UAAU,aAAa;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,6HA2Bb,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC"}

package/dist/utils/list-styles.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import styled from '@darajs/styled-components';
+const List = styled.div `
+    z-index: 5000;
+
+    overflow-y: auto;
+    display: ${(props) => (props.isOpen ? 'flex' : 'none')};
+    flex-direction: column;
+
+    max-height: calc(${(props) => (props.maxItems || 5) * 2}em + 2px);
+
+    border: 1px solid ${(props) => props.theme.colors.grey3};
+`;
+const ListItem = styled.span `
+    cursor: pointer;
+    user-select: none;
+
+    overflow: hidden;
+
+    width: 100%;
+    min-height: 2rem;
+    padding: 0.25rem 1rem;
+
+    font-size: ${(props) => (props.size ? `${props.size}rem` : '1rem')};
+    font-weight: 300;
+    color: ${(props) => props.theme.colors.text};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    background-color: ${(props) => (props.hovered ? props.theme.colors.grey2 : props.theme.colors.blue1)};
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
+
+    :active {
+        color: ${(props) => props.theme.colors.blue1};
+        background-color: ${(props) => props.theme.colors.primary};
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+`;
+export { List, ListItem };
+//# sourceMappingURL=list-styles.js.map

package/dist/utils/list-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-styles.js","sourceRoot":"","sources":["../../src/utils/list-styles.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAO/C,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAW;;;;eAInB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;uBAGnC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,CAAC;;wBAEnC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;CAC1D,CAAC;AAOF,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAe;;;;;;;;;;iBAU1B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;;aAEzD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;;;;wBAIvB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;+BACzE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;iBAGjD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;4BACxB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;CAMhE,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC"}

package/dist/utils/same-width-modifier.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Modifier, Options } from '@popperjs/core';
+/**
+ * A modifier for popper js that auto sizes the content of the popper to be the same as the reference element.
+ */
+declare const sameWidthModifier: Modifier<string, Options>;
+export default sameWidthModifier;
+//# sourceMappingURL=same-width-modifier.d.ts.map

package/dist/utils/same-width-modifier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"same-width-modifier.d.ts","sourceRoot":"","sources":["../../src/utils/same-width-modifier.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,QAAQ,EAAqB,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEtE;;GAEG;AACH,QAAA,MAAM,iBAAiB,EAAE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAahD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/utils/same-width-modifier.js

@@ -0,0 +1,17 @@
+/**
+ * A modifier for popper js that auto sizes the content of the popper to be the same as the reference element.
+ */
+const sameWidthModifier = {
+    effect: ({ state }) => () => {
+        state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+    },
+    enabled: true,
+    fn: ({ state }) => {
+        state.styles.popper.width = `${state.rects.reference.width}px`;
+    },
+    name: 'sameWidth',
+    phase: 'beforeWrite',
+    requires: ['computeStyles'],
+};
+export default sameWidthModifier;
+//# sourceMappingURL=same-width-modifier.js.map

package/dist/utils/same-width-modifier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"same-width-modifier.js","sourceRoot":"","sources":["../../src/utils/same-width-modifier.tsx"],"names":[],"mappings":"AAkBA;;GAEG;AACH,MAAM,iBAAiB,GAA8B;IACjD,MAAM,EACF,CAAC,EAAE,KAAK,EAAO,EAAE,EAAE,CACnB,GAAG,EAAE;QACD,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,WAAqB,IAAI,CAAC;IAC9F,CAAC;IACL,OAAO,EAAE,IAAI;IACb,EAAE,EAAE,CAAC,EAAE,KAAK,EAA8B,EAAE,EAAE;QAC1C,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IACnE,CAAC;IACD,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,CAAC,eAAe,CAAC;CAC9B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/utils/use-infinite-loader.d.ts

@@ -0,0 +1,32 @@
+interface LoadReturn<T> {
+    data: Array<T>;
+    totalCount: number;
+}
+export interface ItemsRenderedPayload {
+    overscanStartIndex: number;
+    overscanStopIndex: number;
+}
+export interface InfiniteLoader<T> {
+    /** A function to get the actual value of an item, based on it's absolute index in the list */
+    getItem: (index: number) => T;
+    /** The total count of items in the list */
+    itemCount: number;
+    /** A handler for the onItemsRendered function exposed by the react-window components */
+    onItemsRendered: (payload: ItemsRenderedPayload) => Promise<void>;
+    /**
+     * A function to force a refresh of the data, will trigger a refetch of the current window and discard anything
+     * outside that window
+     */
+    refresh: () => void;
+}
+/**
+ * This is a helper hook that plugs into the react-window components and allows them to load data infinitely by simply
+ * passing a load data function to the constructor and passing the returned props into the virtualized list components.
+ * The key difference between this and the infinite loader library is that this hook allows for polling, simply by
+ * calling the refresh function that it exposes in a useEffect hook.
+ *
+ * @param onLoadData a function that should load the data between startIndex and stopIndex
+ */
+declare function useInfiniteLoader<T>(onLoadData: (startIndex: number, stopIndex: number) => Promise<LoadReturn<T>>, onError?: (err: Error) => void | Promise<void>, batchSize?: number): InfiniteLoader<T>;
+export default useInfiniteLoader;
+//# sourceMappingURL=use-infinite-loader.d.ts.map

package/dist/utils/use-infinite-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-infinite-loader.d.ts","sourceRoot":"","sources":["../../src/utils/use-infinite-loader.tsx"],"names":[],"mappings":"AAoBA,UAAU,UAAU,CAAC,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACjC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC7B,8FAA8F;IAC9F,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC;IAC9B,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,eAAe,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EACxB,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAC7E,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAC9C,SAAS,SAAK,GACf,cAAc,CAAC,CAAC,CAAC,CAyFnB;AAED,eAAe,iBAAiB,CAAC"}

package/dist/utils/use-infinite-loader.js

@@ -0,0 +1,114 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useDeepCompare } from '@darajs/ui-utils';
+/**
+ * This is a helper hook that plugs into the react-window components and allows them to load data infinitely by simply
+ * passing a load data function to the constructor and passing the returned props into the virtualized list components.
+ * The key difference between this and the infinite loader library is that this hook allows for polling, simply by
+ * calling the refresh function that it exposes in a useEffect hook.
+ *
+ * @param onLoadData a function that should load the data between startIndex and stopIndex
+ */
+function useInfiniteLoader(onLoadData, onError, batchSize = 50) {
+    // Use a ref on the onLoadData function to get the updated version into the onItemsRendered function as only the
+    // first instance passed is ever called by react-window
+    const onLoadRef = useRef(onLoadData);
+    const [internalData, setInternalData] = useState([]);
+    const [itemCount, setItemCount] = useState(0);
+    const [currentStartIdx, setStartIdx] = useState(0);
+    const [currentStopIdx, setStopIdx] = useState(0);
+    const [currentRange, setCurrentRange] = useState({
+        overscanStartIndex: 0,
+        overscanStopIndex: 50,
+    });
+    const getItem = useCallback((index) => {
+        const adjustedIndex = index - currentStartIdx;
+        if (adjustedIndex < 0 || adjustedIndex > internalData.length) {
+            return;
+        }
+        return internalData[adjustedIndex];
+    }, useDeepCompare([currentStartIdx, internalData]));
+    const onItemsRendered = useCallback(({ overscanStartIndex, overscanStopIndex }, forceRefresh) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            const isFirstItemLoaded = overscanStartIndex >= currentStartIdx && overscanStartIndex <= currentStopIdx;
+            const isLastItemLoaded = overscanStopIndex >= currentStartIdx && overscanStopIndex <= currentStopIdx;
+            setCurrentRange({ overscanStartIndex, overscanStopIndex });
+            // Nothing to do if everything is loaded and it's not a forced refresh
+            if (isFirstItemLoaded && isLastItemLoaded && !forceRefresh) {
+                return;
+            }
+            // If both are loaded then forceRefresh is true or both are not loaded and we're starting from nothing. In
+            // either case we need to calculate the window to fetch from the backend.
+            if (isFirstItemLoaded === isLastItemLoaded) {
+                const mid = Math.floor((overscanStopIndex - overscanStartIndex) / 2 + overscanStartIndex);
+                const start = Math.max(mid - batchSize / 2, 0);
+                const end = mid + batchSize / 2;
+                setStartIdx(start);
+                setStopIdx(end);
+                const { data, totalCount } = yield onLoadRef.current(start, end);
+                setInternalData(data);
+                setItemCount(totalCount);
+                return;
+            }
+            // This branch covers scrolling up from the bottom of the list and loading as it goes
+            if (!isFirstItemLoaded) {
+                const start = Math.max(currentStartIdx - batchSize, 0);
+                const res = onLoadRef.current(start, currentStartIdx);
+                setStartIdx(start);
+                const { data, totalCount } = yield res;
+                setInternalData((current) => [...data, ...current]);
+                setItemCount(totalCount);
+                return;
+            }
+            // This branch covers scrolling down from the top and loading as it goes
+            const end = currentStopIdx + batchSize;
+            const res = onLoadRef.current(currentStopIdx, end);
+            setStopIdx(end);
+            const { data, totalCount } = yield res;
+            setInternalData((current) => [...current, ...data]);
+            setItemCount(totalCount);
+        }
+        catch (err) {
+            onError === null || onError === void 0 ? void 0 : onError(err);
+        }
+    }), [currentStartIdx, currentStopIdx]);
+    useEffect(() => {
+        onLoadRef.current = onLoadData;
+        onItemsRendered(currentRange, true);
+    }, [onLoadData]);
+    const refresh = useCallback(() => {
+        onItemsRendered(currentRange, true);
+    }, useDeepCompare([currentRange]));
+    return {
+        getItem,
+        itemCount,
+        onItemsRendered,
+        refresh,
+    };
+}
+export default useInfiniteLoader;
+//# sourceMappingURL=use-infinite-loader.js.map

package/dist/utils/use-infinite-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-infinite-loader.js","sourceRoot":"","sources":["../../src/utils/use-infinite-loader.tsx"],"names":[],"mappings":"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"}

package/dist/utils/use-on-click-outside.d.ts

@@ -0,0 +1,3 @@
+declare function useOnClickOutside(element: any, handler: () => void): void;
+export default useOnClickOutside;
+//# sourceMappingURL=use-on-click-outside.d.ts.map

package/dist/utils/use-on-click-outside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-on-click-outside.d.ts","sourceRoot":"","sources":["../../src/utils/use-on-click-outside.tsx"],"names":[],"mappings":"AAkBA,iBAAS,iBAAiB,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI,CAgBlE;AAED,eAAe,iBAAiB,CAAC"}

package/dist/utils/use-on-click-outside.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useEffect } from 'react';
+function useOnClickOutside(element, handler) {
+    useEffect(() => {
+        const listener = (event) => {
+            // Do nothing if clicking ref's element or descendent elements
+            if (!element || element.contains(event.target)) {
+                return;
+            }
+            handler();
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [element, handler]);
+}
+export default useOnClickOutside;
+//# sourceMappingURL=use-on-click-outside.js.map

package/dist/utils/use-on-click-outside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-on-click-outside.js","sourceRoot":"","sources":["../../src/utils/use-on-click-outside.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,SAAS,iBAAiB,CAAC,OAAY,EAAE,OAAmB;IACxD,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,QAAQ,GAAG,CAAC,KAAiB,EAAQ,EAAE;YACzC,8DAA8D;YAC9D,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBAC5C,OAAO;aACV;YACD,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QACjD,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAClD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;YACpD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QACzD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AAC3B,CAAC;AAED,eAAe,iBAAiB,CAAC"}

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@darajs/ui-components",
+  "version": "1.0.0-a.1",
+  "description": "The core React UI kit for Dara",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "jsnext:main": "dist/index.js",
+  "scripts": {
+    "build": "rimraf dist && tsc",
+    "lint": "eslint src --ext .tsx --max-warnings 0 && stylelint './src/**/*.tsx'",
+    "lint:fix": "eslint src --ext .tsx --max-warnings 0 --fix",
+    "package": "yarn build && yarn publish --no-git-tag-version",
+    "test-watch": "jest --watch",
+    "test": "jest",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "author": "Krzysztof Bielikowicz <krzysztof@causalens.com>",
+  "license": "Apache-2.0",
+  "prettier": "@darajs/prettier-config",
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
+    "@darajs/eslint-config": "1.0.0-a.1",
+    "@darajs/prettier-config": "1.0.0-a.1",
+    "@darajs/stylelint-config": "1.0.0-a.1",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-styling": "^0.3.2",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
+    "@storybook/theming": "^6.5.16",
+    "@testing-library/dom": "^9.3.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.0",
+    "@types/lodash": "^4.14.155",
+    "@types/react": "^18.0",
+    "@types/react-collapse": "^5.0.1",
+    "@types/react-datepicker": "^4.0.0",
+    "@types/react-dom": "^18.0",
+    "@types/react-table": "^7.0.19",
+    "@types/react-virtualized-auto-sizer": "^1.0.0",
+    "@types/react-window": "^1.8.2",
+    "@types/react-window-infinite-loader": "^1.0.3",
+    "@types/shortid": "0.0.29",
+    "@types/styled-components": "^5.1.26",
+    "babel-jest": "^29.5.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-styled-components": "^1.13.2",
+    "eslint": "^7.2.0",
+    "eslint-plugin-jest": "^26.1.1",
+    "jest": "^29.5.0",
+    "jest-css-modules": "^2.1.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "prettier": "2.4.1",
+    "react-docgen-typescript-plugin": "^1.0.5",
+    "react-test-renderer": "^17.0",
+    "rimraf": "^3.0.2",
+    "storybook-dark-mode": "^2.1.1",
+    "stylelint": "^13.5.0",
+    "typescript": "^5.0.4"
+  },
+  "dependencies": {
+    "@darajs/styled-components": "1.0.0-a.1",
+    "@darajs/ui-icons": "1.0.0-a.1",
+    "@darajs/ui-utils": "1.0.0-a.1",
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@popperjs/core": "2.4.0",
+    "@tippyjs/react": "4.1.0",
+    "date-fns": "2.9.0",
+    "downshift": "^7.0.0",
+    "lodash": "4.17.21",
+    "nanoid": "^3.3.0",
+    "polished": "3.6.4",
+    "react": "^18.0",
+    "react-collapse": "^5.1.1",
+    "react-compound-slider": "3.3.0",
+    "react-datepicker": "4.8.0",
+    "react-dom": "^18.0",
+    "react-dropzone": "11.0.1",
+    "react-popper": "2.2.5",
+    "react-table": "7.7.0",
+    "react-table-sticky": "^1.1.3",
+    "react-virtualized-auto-sizer": "1.0.6",
+    "react-window": "1.8.6",
+    "shortid": "2.2.15",
+    "tippy.js": "6.2.6"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "6280e44892919b09c7271a49919079baf250dc8f"
+}