@darajs/ui-components 0.4.8

package/dist/checkbox/checkbox.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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, useState } from 'react';
+import styled from '@darajs/styled-components';
+const CheckboxWrapper = styled.label `
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    user-select: none;
+
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    width: ${(props) => (props.isListStyle ? '100%' : 'fit-content')};
+    padding: 0.5625rem 0 0.5625rem 2rem;
+
+    font-size: 1rem;
+
+    border-radius: 0.25rem;
+
+    ${(props) => {
+    if (props.isListStyle && !props.disabled) {
+        return `
+                :hover {
+                    background-color: ${props.theme.colors.grey1};
+
+                    span {
+                        border: 1px solid ${props.theme.colors.grey4};
+                    }
+                }
+
+                :active {
+                    background-color: ${props.theme.colors.grey2};
+                }
+        `;
+    }
+}}
+
+    /* sets checkmark indicator */
+    span::after {
+        top: 0.05rem;
+        left: 0.3rem;
+        transform: rotate(45deg);
+
+        width: 0.3125rem;
+        height: 0.625rem;
+
+        border: solid ${(props) => props.theme.colors.grey5};
+        border-width: 0 2px 2px 0;
+    }
+
+    /* Show the checkmark when checked */
+    input:checked ~ span::after {
+        display: block;
+    }
+
+    :hover {
+        span,
+        input:checked ~ span {
+            background-color: ${(props) => {
+    if (props.disabled) {
+        return props.theme.colors.grey3;
+    }
+    if (props.isListStyle) {
+        return props.theme.colors.blue1;
+    }
+    return props.theme.colors.grey1;
+}};
+            border: 1px solid ${(props) => props.theme.colors.grey4};
+        }
+    }
+
+    /* stylelint-disable -- messy specificity ordering */
+    :active {
+        span,
+        input:checked ~ span {
+            background-color: ${(props) => {
+    if (props.disabled) {
+        return props.theme.colors.grey3;
+    }
+    if (props.isListStyle) {
+        return props.theme.colors.blue1;
+    }
+    return props.theme.colors.grey2;
+}};
+        }
+    }
+`;
+const StyledCheckbox = styled.input `
+    cursor: pointer;
+
+    /* Hide the browser's default checkbox */
+    position: absolute;
+
+    width: 0;
+    height: 0;
+
+    opacity: 0;
+
+    :checked ~ span {
+        background-color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.blue1)};
+    }
+`;
+const StyledCheckmark = styled.span `
+    position: absolute;
+    left: 0.5rem;
+
+    width: 1rem;
+    height: 1rem;
+
+    background-color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.blue1)};
+    border: 1px solid ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.grey4)};
+    border-radius: 0.25rem;
+
+    // hidden checkmark indicator
+    :after {
+        content: '';
+        position: absolute;
+        display: none;
+    }
+`;
+/**
+ * A simple checkbox component
+ *
+ * @param {CheckboxProps} props - the component props
+ */
+function Checkbox(props) {
+    const [checked, setChecked] = useState(props.selected || props.initialValue);
+    useEffect(() => {
+        if (props.selected !== undefined) {
+            setChecked(props.selected);
+        }
+    }, [props.selected]);
+    const onClick = (e) => {
+        // Disabled removes all behaviour
+        if (props.disabled) {
+            return;
+        }
+        if (props.selected === undefined) {
+            setChecked(!checked);
+        }
+        if (props.onChange) {
+            props.onChange(!checked, e);
+        }
+    };
+    return (_jsxs(CheckboxWrapper, { className: props.className, disabled: props.disabled, isListStyle: props.isListStyle, children: [props.label, _jsx(StyledCheckbox, { "aria-disabled": props.disabled, checked: props.selected, disabled: props.disabled, isListStyle: props.isListStyle, onChange: (e) => onClick(e), onClick: props.onClick, type: "checkbox", value: props.id }), _jsx(StyledCheckmark, { disabled: props.disabled, isListStyle: props.isListStyle })] }));
+}
+export default Checkbox;
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

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

package/dist/checkbox/tri-state-checkbox.d.ts

@@ -0,0 +1,22 @@
+import { InteractiveComponentProps } from '../types';
+export declare enum CheckboxState {
+    CHECKED = "checked",
+    INDETERMINATE = "indeterminate",
+    UNCHECKED = "unchecked"
+}
+export interface CheckboxProps extends InteractiveComponentProps<boolean> {
+    /** Set the check box to be checked */
+    allSelected?: boolean;
+    /** Set the check box to be unchecked */
+    noneSelected?: boolean;
+    /** An optional onChange handler, will be called whenever the state of the checkbox changes */
+    onChange?: (state: CheckboxState, e?: React.SyntheticEvent<HTMLInputElement, Event>) => void | Promise<void>;
+}
+/**
+ * A tri-state (or indeterminate) checkbox component
+ *
+ * @param {CheckboxProps} props - the component props
+ */
+declare function TriStateCheckbox(props: CheckboxProps): JSX.Element;
+export default TriStateCheckbox;
+//# sourceMappingURL=tri-state-checkbox.d.ts.map

package/dist/checkbox/tri-state-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tri-state-checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox/tri-state-checkbox.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAGrD,oBAAY,aAAa;IACrB,OAAO,YAAY;IACnB,aAAa,kBAAkB;IAC/B,SAAS,cAAc;CAC1B;AAiCD,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,OAAO,CAAC;IACrE,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAChH;AAYD;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAgC3D;AAED,eAAe,gBAAgB,CAAC"}

package/dist/checkbox/tri-state-checkbox.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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, useState } from 'react';
+import styled from '@darajs/styled-components';
+import Checkbox from './checkbox';
+export var CheckboxState;
+(function (CheckboxState) {
+    CheckboxState["CHECKED"] = "checked";
+    CheckboxState["INDETERMINATE"] = "indeterminate";
+    CheckboxState["UNCHECKED"] = "unchecked";
+})(CheckboxState || (CheckboxState = {}));
+const StyledTriStateCheckbox = styled.div `
+    ${(props) => {
+    if (props.state === CheckboxState.INDETERMINATE) {
+        return `
+                    span:after {
+                        display: block ;
+                        left: 0.07rem;
+                        top: 0.4rem;
+                        width: 0.75rem;
+                        border-radius: 0.25rem;
+                        height: 0px;
+                        border: 1px solid ${props.theme.colors.grey6};
+                        transform: rotate(0deg)
+                    }
+
+            `;
+    }
+}}
+`;
+function computeState(allSelected, noneSelected) {
+    if (noneSelected) {
+        return CheckboxState.UNCHECKED;
+    }
+    return allSelected ? CheckboxState.CHECKED : CheckboxState.INDETERMINATE;
+}
+function getControlledState(allSelected, noneSelected) {
+    if (allSelected) {
+        return allSelected;
+    }
+    if (noneSelected) {
+        return false;
+    }
+    return undefined;
+}
+/**
+ * A tri-state (or indeterminate) checkbox component
+ *
+ * @param {CheckboxProps} props - the component props
+ */
+function TriStateCheckbox(props) {
+    const [state, setState] = useState(computeState(props.allSelected, props.noneSelected));
+    useEffect(() => {
+        setState(computeState(props.allSelected, props.noneSelected));
+    }, [props.allSelected, props.noneSelected]);
+    const onClick = (checked, e) => {
+        setState(checked ? CheckboxState.CHECKED : CheckboxState.UNCHECKED);
+        if (props.onChange) {
+            if (state === CheckboxState.UNCHECKED) {
+                props.onChange(CheckboxState.CHECKED, e);
+            }
+            else {
+                props.onChange(CheckboxState.UNCHECKED, e);
+            }
+        }
+    };
+    return (_jsx(StyledTriStateCheckbox, { state: state, style: props.style, children: _jsx(Checkbox, { className: props.className, disabled: props.disabled, initialValue: state === CheckboxState.CHECKED, onChange: (checked, event) => {
+                onClick(checked, event);
+            }, selected: getControlledState(props.allSelected, props.noneSelected) }) }));
+}
+export default TriStateCheckbox;
+//# sourceMappingURL=tri-state-checkbox.js.map

package/dist/checkbox/tri-state-checkbox.js.map

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

package/dist/code-viewer/code-viewer.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { Language } from 'prism-react-renderer';
+import { InteractiveComponentProps } from '../types';
+export declare enum CodeComponentThemes {
+    DARK = "dark",
+    LIGHT = "light"
+}
+export interface CodeViewerProps extends InteractiveComponentProps<string> {
+    /** the language the code string is written in */
+    language: Language;
+    /** The code theme to display */
+    codeTheme?: CodeComponentThemes;
+}
+declare function CodeViewer(props: CodeViewerProps): JSX.Element;
+export default CodeViewer;
+//# sourceMappingURL=code-viewer.d.ts.map

package/dist/code-viewer/code-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-viewer.d.ts","sourceRoot":"","sources":["../../src/code-viewer/code-viewer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAkB,EAAE,QAAQ,EAAgB,MAAM,sBAAsB,CAAC;AASzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAgCrD,oBAAY,mBAAmB;IAC3B,IAAI,SAAS;IACb,KAAK,UAAU;CAClB;AAED,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,MAAM,CAAC;IACtE,iDAAiD;IACjD,QAAQ,EAAE,QAAQ,CAAC;IACnB,gCAAgC;IAChC,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAYD,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAgFvD;AAED,eAAe,UAAU,CAAC"}

package/dist/code-viewer/code-viewer.js

@@ -0,0 +1,115 @@
+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());
+    });
+};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 Highlight, { defaultProps } from 'prism-react-renderer';
+import nightOwlLight from 'prism-react-renderer/themes/nightOwlLight';
+import vsDark from 'prism-react-renderer/themes/vsDark';
+import { useEffect, useMemo, useState } from 'react';
+import styled, { darkTheme, theme, useTheme } from '@darajs/styled-components';
+import { Check, Copy } from '@darajs/ui-icons';
+import { copyToClipboard } from '@darajs/ui-utils';
+const CodeViewerContainer = styled.div `
+    display: flex;
+    flex: 1 1 100%;
+    flex-direction: column;
+    color: ${(props) => props.theme.colors.grey4};
+`;
+const TopBar = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 0.5rem 1rem;
+
+    font-size: 0.875rem;
+
+    background-color: ${(props) => (props.$isLightTheme ? theme.colors.blue2 : darkTheme.colors.blue2)} !important;
+    border-radius: 0.25rem 0.25rem 0 0;
+`;
+const CopyToClipboardContainer = styled.span `
+    :hover {
+        color: ${(props) => props.theme.colors.grey5};
+    }
+
+    :active {
+        color: ${(props) => props.theme.colors.grey6};
+    }
+`;
+export var CodeComponentThemes;
+(function (CodeComponentThemes) {
+    CodeComponentThemes["DARK"] = "dark";
+    CodeComponentThemes["LIGHT"] = "light";
+})(CodeComponentThemes || (CodeComponentThemes = {}));
+const StyledPre = styled.pre `
+    overflow-x: auto;
+
+    margin: 0;
+    padding: 1rem;
+
+    background-color: ${(props) => (props.$isLightTheme ? theme.colors.blue1 : darkTheme.colors.blue1)} !important;
+    border-radius: 0 0 0.25rem 0.25rem;
+`;
+function CodeViewer(props) {
+    const themeCtx = useTheme();
+    const [isCopied, setIsCopied] = useState(false);
+    useEffect(() => {
+        if (isCopied) {
+            const timer = setTimeout(() => {
+                setIsCopied(false);
+            }, 2000);
+            return () => clearTimeout(timer);
+        }
+    }, [isCopied]);
+    function copyCodeToClipboard(code) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const success = yield copyToClipboard(code);
+            if (success) {
+                setIsCopied(true);
+            }
+            else {
+                setIsCopied(false);
+            }
+        });
+    }
+    const viewerTheme = useMemo(() => {
+        if (props.codeTheme) {
+            if (props.codeTheme === CodeComponentThemes.LIGHT) {
+                return nightOwlLight;
+            }
+            return vsDark;
+        }
+        if (themeCtx.themeType === 'dark') {
+            return vsDark;
+        }
+        return nightOwlLight;
+    }, [props.codeTheme, themeCtx.themeType]);
+    return (_jsxs(CodeViewerContainer, { style: Object.assign({}, props.style), className: props.className, children: [_jsxs(TopBar, { "$isLightTheme": props.codeTheme !== 'dark', children: [_jsx("span", { children: props.language }), isCopied ?
+                        _jsxs(CopyToClipboardContainer, { children: [_jsx(Check, {}), " Copied!"] })
+                        : _jsxs(CopyToClipboardContainer, { style: { cursor: 'pointer' }, onClick: () => copyCodeToClipboard(props.value), role: "button", children: [_jsx(Copy, {}), " Copy code"] })] }), _jsx(Highlight, Object.assign({}, defaultProps, { code: props.value, language: props.language, theme: viewerTheme, children: ({ className, style, tokens, getLineProps, getTokenProps }) => (_jsx(StyledPre, { className: className, "$isLightTheme": props.codeTheme !== 'dark', style: Object.assign({}, style), children: tokens.map((line, i) => (_createElement("div", Object.assign({}, getLineProps({ key: i, line }), { key: i }), line.map((token, key) => (_createElement("code", Object.assign({}, getTokenProps({ key, token }), { key: key }))))))) })) }))] }));
+}
+export default CodeViewer;
+//# sourceMappingURL=code-viewer.js.map

package/dist/code-viewer/code-viewer.js.map

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

package/dist/combo-box/combo-box.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { InteractiveComponentProps, Item } from '../types';
+interface WrapperProps {
+    isDisabled: boolean;
+    isErrored: boolean;
+    isOpen: boolean;
+}
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@darajs/styled-components").DefaultTheme, WrapperProps, never>;
+interface InputWrapperProps {
+    disabled: boolean;
+    isOpen: boolean;
+}
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", import("@darajs/styled-components").DefaultTheme, InputWrapperProps, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", import("@darajs/styled-components").DefaultTheme, {}, never>;
+export interface ComboBoxProps extends InteractiveComponentProps<Item> {
+    /** Whether to open the select dropdown on load or not, defaults to false */
+    initialIsOpen?: boolean;
+    /** The items to pick from the list. Each should have a label and a value */
+    items: Array<Item>;
+    /** An optional onSelect handler for listening to changes in the selected item */
+    onSelect?: (item: Item) => void | Promise<void>;
+    /** An optional placeholder for the input field to display when nothing is selected, defaults to '' */
+    placeholder?: string;
+    /** Set the selected value to a specific value, will put the component in controlled mode. Set to `null` to reset the value. */
+    selectedItem?: Item;
+    /** Font size in rem to show in the Select */
+    size?: number;
+    /** Pass through of style property to the root element */
+    style?: React.CSSProperties;
+}
+/**
+ * A single select combobox component, accepts a list of items to select from and an onSelect handler to listen for
+ * changes. Allows to search for item by typing in combo box.
+ *
+ * @param {ComboBoxProps} props - the component props
+ */
+declare function ComboBox(props: ComboBoxProps): JSX.Element;
+export default ComboBox;
+//# sourceMappingURL=combo-box.d.ts.map

package/dist/combo-box/combo-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../src/combo-box/combo-box.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAQ5D,OAAO,EAAE,yBAAyB,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAM3D,UAAU,YAAY;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,OAAO,2HAgCnB,CAAC;AAEF,UAAU,iBAAiB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,gIAuBxB,CAAC;AAEF,eAAO,MAAM,KAAK,mHAuBjB,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,IAAI,CAAC;IAClE,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4EAA4E;IAC5E,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+HAA+H;IAC/H,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED;;;;;GAKG;AACH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA0JnD;AAED,eAAe,QAAQ,CAAC"}