@seeqdev/qomponents 0.0.100 → 0.0.102

package/dist/Alert/Alert.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import '../styles.css';
+import Icon from '../Icon';
+const baseClasses = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm tw-max-w-sm' +
+    ' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col';
+const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text';
+const lightTheme = 'tw-text-sq-text-color tw-bg-sq-color-alert';
+const errorClasses = 'tw-border-sq-danger-color';
+const borderColorClasses = 'tw-border-sq-color-dark';
+/**
+ * Alert.
+ */
+export const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId, id, extraClassNames, }) => {
+    const appliedTheme = {
+        theme: `${lightTheme} ${darkTheme}`,
+        danger: 'tw-text-sq-text-color tw-bg-sq-danger-color',
+        warning: 'tw-bg-sq-warning-color tw-text-sq-text-color',
+    };
+    const appliedBorderTheme = {
+        theme: borderColorClasses,
+        danger: errorClasses,
+        warning: 'tw-border-none',
+    };
+    const appliedClasses = `${baseClasses} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
+    if (!show) {
+        return React.createElement("div", null);
+    }
+    return (React.createElement("div", { "data-testid": testId, id: id, className: appliedClasses },
+        dismissible && React.createElement(Icon, { icon: "fc-delete", extraClassNames: "tw-self-end tw-text-[11px]", testId: `${testId}-close-btn`, onClick: onClose }),
+        children));
+};
+//# sourceMappingURL=Alert.js.map

package/dist/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,SAAS,CAAC;AAG3B,MAAM,WAAW,GACf,+FAA+F;IAC/F,2DAA2D,CAAC;AAE9D,MAAM,SAAS,GAAG,yDAAyD,CAAC;AAC5E,MAAM,UAAU,GAAG,4CAA4C,CAAC;AAEhE,MAAM,YAAY,GAAG,2BAA2B,CAAC;AAEjD,MAAM,kBAAkB,GAAG,yBAAyB,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAwC,CAAC,EACzD,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,OAAO,EACP,IAAI,GAAG,IAAI,EACX,OAAO,EACP,MAAM,EACN,EAAE,EACF,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,YAAY,GAA0C;QAC1D,KAAK,EAAE,GAAG,UAAU,IAAI,SAAS,EAAE;QACnC,MAAM,EAAE,6CAA6C;QACrD,OAAO,EAAE,8CAA8C;KACxD,CAAC;IACF,MAAM,kBAAkB,GAA0C;QAChE,KAAK,EAAE,kBAAkB;QACzB,MAAM,EAAE,YAAY;QACpB,OAAO,EAAE,gBAAgB;KAC1B,CAAC;IACF,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,YAAY,CAAC,OAAO,CAAC,IAAI,eAAe,IAAI,kBAAkB,CAAC,OAAO,CAAC,EAAE,CAAC;IAEnH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,gCAAO,CAAC;KAChB;IACD,OAAO,CACL,4CAAkB,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc;QACxD,WAAW,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,eAAe,EAAC,4BAA4B,EAAC,MAAM,EAAE,GAAG,MAAM,YAAY,EAAE,OAAO,EAAE,OAAO,GAAI;QACtI,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Alert/Alert.stories.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Alert } from './Alert';
+export default {
+    title: 'Alert',
+};
+const colors = ['topic', 'analysis', 'datalab', 'vantage'];
+const renderAlert = ({ text, dismissable, variant, }) => (React.createElement("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white" },
+    React.createElement("p", { className: "tw-mb-5 tw-text-[15px] tw-leading-normal" }),
+    React.createElement(Alert, { variant: variant, dismissible: dismissable, show: true }, text)));
+export const AllAlertsVariants = () => {
+    const renderAllVariations = (color) => (React.createElement("div", { key: color + '_wrapper' },
+        React.createElement("div", { className: "tw-p-4" }, renderAlert({
+            text: 'This is a dismissible alert, it looks very pleasing and is very useful for showing alerts to the user',
+            dismissable: true,
+            variant: 'theme',
+        })),
+        React.createElement("div", { className: "tw-p-4" }, renderAlert({
+            text: 'This is a non dismissable alert, it looks very pleasing and is very useful for showing alerts to the user',
+            dismissable: false,
+            variant: 'theme',
+        })),
+        React.createElement("div", { className: "tw-p-4" }, renderAlert({
+            text: 'This is a warning alert, it is used to display a warning',
+            dismissable: false,
+            variant: 'warning',
+        })),
+        React.createElement("div", { className: "tw-p-4" }, renderAlert({
+            text: 'This is an error alert, it is used to display an error',
+            dismissable: false,
+            variant: 'danger',
+        }))));
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" }, colors.map((color) => {
+            return React.createElement("div", { className: `color_${color}` }, renderAllVariations(color));
+        })),
+        React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background tw-grid tw-grid-cols-4 tw-gap-4" }, colors.map((color) => {
+            return React.createElement("div", { className: `color_${color}` }, renderAllVariations(color));
+        }))));
+};
+//# sourceMappingURL=Alert.stories.js.map

package/dist/Alert/Alert.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.stories.js","sourceRoot":"","sources":["../../src/Alert/Alert.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAE3D,MAAM,WAAW,GAAG,CAAC,EACnB,IAAI,EACJ,WAAW,EACX,OAAO,GAKR,EAAE,EAAE,CAAC,CACJ,6BAAK,SAAS,EAAC,6CAA6C;IAC1D,2BAAG,SAAS,EAAC,0CAA0C,GAAK;IAC5D,oBAAC,KAAK,IAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,UACpD,IAAI,CACC,CACJ,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAC7C,6BAAK,GAAG,EAAE,KAAK,GAAG,UAAU;QAC1B,6BAAK,SAAS,EAAC,QAAQ,IACpB,WAAW,CAAC;YACX,IAAI,EAAE,uGAAuG;YAC7G,WAAW,EAAE,IAAI;YACjB,OAAO,EAAE,OAAO;SACjB,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,QAAQ,IACpB,WAAW,CAAC;YACX,IAAI,EAAE,2GAA2G;YACjH,WAAW,EAAE,KAAK;YAClB,OAAO,EAAE,OAAO;SACjB,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,QAAQ,IACpB,WAAW,CAAC;YACX,IAAI,EAAE,0DAA0D;YAChE,WAAW,EAAE,KAAK;YAClB,OAAO,EAAE,SAAS;SACnB,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,QAAQ,IACpB,WAAW,CAAC;YACX,IAAI,EAAE,wDAAwD;YAC9D,WAAW,EAAE,KAAK;YAClB,OAAO,EAAE,QAAQ;SAClB,CAAC,CACE,CACF,CACP,CAAC;IACF,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,iCAAiC,IAC7C,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACpB,OAAO,6BAAK,SAAS,EAAE,SAAS,KAAK,EAAE,IAAG,mBAAmB,CAAC,KAAK,CAAC,CAAO,CAAC;QAC9E,CAAC,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,kEAAkE,IAC9E,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACpB,OAAO,6BAAK,SAAS,EAAE,SAAS,KAAK,EAAE,IAAG,mBAAmB,CAAC,KAAK,CAAC,CAAO,CAAC;QAC9E,CAAC,CAAC,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Alert/Alert.test.d.ts

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

package/dist/Alert/Alert.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Alert } from './Alert';
+describe('Alert Component', () => {
+    const defaultProps = {
+        children: 'Test Alert',
+        dismissible: true,
+        onClose: jest.fn(),
+        show: true,
+        variant: 'theme',
+        testId: 'alert-test-id',
+        id: 'alert-id',
+        extraClassNames: '',
+    };
+    it('should render the Alert component', () => {
+        render(React.createElement(Alert, { ...defaultProps }));
+        const alertElement = screen.getByTestId('alert-test-id');
+        expect(alertElement).toBeInTheDocument();
+    });
+    it('should render children correctly', () => {
+        render(React.createElement(Alert, { ...defaultProps }));
+        const alertElement = screen.getByTestId('alert-test-id');
+        expect(alertElement).toHaveTextContent('Test Alert');
+    });
+    it('should apply the correct classes based on variant', () => {
+        const { rerender } = render(React.createElement(Alert, { ...defaultProps, variant: "danger" }));
+        let alertElement = screen.getByTestId('alert-test-id');
+        expect(alertElement).toHaveClass('tw-text-sq-text-color tw-bg-sq-danger-color');
+        rerender(React.createElement(Alert, { ...defaultProps, variant: "warning" }));
+        alertElement = screen.getByTestId('alert-test-id');
+        expect(alertElement).toHaveClass('tw-bg-sq-warning-color tw-text-sq-text-color');
+    });
+    it('should call onClose when dismissible icon is clicked', () => {
+        render(React.createElement(Alert, { ...defaultProps }));
+        const closeButton = screen.getByTestId('alert-test-id-close-btn');
+        fireEvent.click(closeButton);
+        expect(defaultProps.onClose).toHaveBeenCalled();
+    });
+    it('should not render when show is false', () => {
+        render(React.createElement(Alert, { ...defaultProps, show: false }));
+        const alertElement = screen.queryByTestId('alert-test-id');
+        expect(alertElement).not.toBeInTheDocument();
+    });
+    it('should apply extra class names', () => {
+        render(React.createElement(Alert, { ...defaultProps, extraClassNames: "extra-class" }));
+        const alertElement = screen.getByTestId('alert-test-id');
+        expect(alertElement).toHaveClass('extra-class');
+    });
+});
+//# sourceMappingURL=Alert.test.js.map

package/dist/Alert/Alert.test.js.map

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

package/dist/Alert/Alert.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Alert.types.js.map

package/dist/Alert/Alert.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.types.js","sourceRoot":"","sources":["../../src/Alert/Alert.types.ts"],"names":[],"mappings":""}

package/dist/Alert/index.js

@@ -0,0 +1,2 @@
+export { Alert as default } from './Alert';
+//# sourceMappingURL=index.js.map

package/dist/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.esm.js

@@ -4723,11 +4723,7 @@ const TextField = React__default.forwardRef((props, ref) => {
     else if (inputGroup === 'right') {
         borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
     }
-    let hasError = showError;
-    if ((min && Number(value) < min) || (max && Number(value) > max)) {
-        hasError = true;
-    }
-    const appliedClasses = `${baseClasses$3} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$1} ${darkTheme$1} ${borderRadius} ${hasError ? errorClasses$2 : borderColorClasses$2} `;
+    const appliedClasses = `${baseClasses$3} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$1} ${darkTheme$1} ${borderRadius} ${showError ? errorClasses$2 : borderColorClasses$2} `;
     const inputProp = setValidInputDimension(inputWidth, inputHeight)
         ? {
             style: setValidInputDimension(inputWidth, inputHeight),
@@ -4766,7 +4762,7 @@ const Checkbox = (props) => {
                 : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
 };
 
-const baseClasses$1 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +
+const baseClasses$1 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm tw-w-full' +
     ' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray  disabled:dark:tw-bg-sq-dark-disabled-gray' +
     ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
 const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' +