@synerise/ds-insight 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2025-09-23)
+
+
+### Bug Fixes
+
+* **insight:** update dependencies ([5c097ea](https://github.com/Synerise/synerise-design/commit/5c097ea0f99eb2e7a39274afd1ea7aa7a0027fce))
+
+
+### Features
+
+* **insight:** new component ([090427d](https://github.com/Synerise/synerise-design/commit/090427d8c7aba94ccf60342b065480c43d7baeb3))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+---
+id: insight
+title: Insight
+---
+
+Insight UI Component
+
+## Installation
+
+```
+npm i @synerise/ds-insight
+or
+yarn add @synerise/ds-insight
+```
+
+## Usage
+
+```
+import Insight from '@synerise/ds-insight'
+
+<Insight />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-insight--default"></iframe>
+
+## API
+
+| Property        | Description                                                         | Type                           | Default |
+| --------------- | ------------------------------------------------------------------- | ------------------------------ | ------- |
+| avatar          | avatar component                                                    | ReactNode                      | -       |
+| subTitle        | text under title of Insight                                         | ReactNode                      | -       |
+| title           | title of Insight                                                    | ReactNode                      | -       |
+| headerRightSide | component on right side of Insight                                  | ReactNode                      | -       |
+| footer          | render components in footer                                         | ReactNode                      | -       |
+| onClick         | The callback function that is triggered when click on outer wrapper | function                       | -       |
+| content         | render components inside Insight                                    | ReactNode / InlineAlertProps[] | -       |
+| className       | Insight className                                                   | string                         | -       |

package/dist/Insight.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InsightProps } from './Insight.types';
+declare const Insight: ({ title, subTitle, avatar, headerRightSide, content, footer, onClick, className, ...htmlAttributes }: InsightProps) => React.JSX.Element;
+export default Insight;

package/dist/Insight.js

@@ -0,0 +1,40 @@
+var _excluded = ["title", "subTitle", "avatar", "headerRightSide", "content", "footer", "onClick", "className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { useMemo } from 'react';
+import InlineAlert from '@synerise/ds-inline-alert';
+import * as S from './Insight.styles';
+var isInlineAlertPropsArray = function isInlineAlertPropsArray(value) {
+  return Array.isArray(value) && value.length > 0 && value.every(function (item) {
+    return typeof item === 'object' && item !== null && ! /*#__PURE__*/React.isValidElement(item) && 'message' in item && 'type' in item;
+  });
+};
+var Insight = function Insight(_ref) {
+  var title = _ref.title,
+    subTitle = _ref.subTitle,
+    avatar = _ref.avatar,
+    headerRightSide = _ref.headerRightSide,
+    content = _ref.content,
+    footer = _ref.footer,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var renderedContent = useMemo(function () {
+    if (isInlineAlertPropsArray(content)) {
+      return content.map(function (props, index) {
+        return /*#__PURE__*/React.createElement(InlineAlert, _extends({
+          key: index
+        }, props));
+      });
+    }
+    return content != null ? content : null;
+  }, [content]);
+  return /*#__PURE__*/React.createElement(S.InsightContainer, _extends({
+    className: "ds-insight " + (className || ''),
+    hasHover: !!onClick,
+    onClick: onClick
+  }, htmlAttributes), /*#__PURE__*/React.createElement(S.InsightHeaderBar, null, /*#__PURE__*/React.createElement(S.InsightAvatarWrapper, null, avatar, /*#__PURE__*/React.createElement(S.InsightTextWrapper, {
+    avatar: !!avatar
+  }, /*#__PURE__*/React.createElement(S.Title, null, title), /*#__PURE__*/React.createElement(S.SubTitle, null, subTitle))), headerRightSide), renderedContent && /*#__PURE__*/React.createElement(S.InsightContent, null, renderedContent), footer && /*#__PURE__*/React.createElement(S.InsightFooter, null, footer));
+};
+export default Insight;

package/dist/Insight.styles.d.ts

@@ -0,0 +1,12 @@
+export declare const InsightContainer: import("styled-components").StyledComponent<"div", any, {
+    hasHover?: boolean;
+}, never>;
+export declare const InsightContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const InsightHeaderBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InsightAvatarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InsightTextWrapper: import("styled-components").StyledComponent<"div", any, {
+    avatar?: boolean;
+}, never>;
+export declare const InsightFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Insight.styles.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+export var InsightContainer = styled.div.withConfig({
+  displayName: "Insightstyles__InsightContainer",
+  componentId: "sc-4cncfc-0"
+})(["display:flex;flex-direction:column;background-color:", ";gap:16px;padding:24px;width:100%;border-bottom:solid 1px ", ";", ";"], function (props) {
+  return props.theme.palette.white;
+}, function (props) {
+  return props.theme.palette['grey-200'];
+}, function (props) {
+  return props.hasHover && "&:hover {\n    background-color: " + props.theme.palette['grey-050'] + ";\n  }";
+});
+export var InsightContent = styled.div.withConfig({
+  displayName: "Insightstyles__InsightContent",
+  componentId: "sc-4cncfc-1"
+})(["display:flex;flex-direction:column;justify-content:center;gap:4px;"]);
+export var SubTitle = styled.div.withConfig({
+  displayName: "Insightstyles__SubTitle",
+  componentId: "sc-4cncfc-2"
+})(["display:flex;"]);
+export var Title = styled.label.withConfig({
+  displayName: "Insightstyles__Title",
+  componentId: "sc-4cncfc-3"
+})(["color:", ";font-weight:500;display:block;font-size:14px;"], function (props) {
+  return props.theme.palette['grey-800'];
+});
+export var InsightHeaderBar = styled.div.withConfig({
+  displayName: "Insightstyles__InsightHeaderBar",
+  componentId: "sc-4cncfc-4"
+})(["display:flex;justify-content:space-between;"]);
+export var InsightAvatarWrapper = styled.div.withConfig({
+  displayName: "Insightstyles__InsightAvatarWrapper",
+  componentId: "sc-4cncfc-5"
+})(["display:flex;justify-content:center;align-items:center;"]);
+export var InsightTextWrapper = styled.div.withConfig({
+  displayName: "Insightstyles__InsightTextWrapper",
+  componentId: "sc-4cncfc-6"
+})(["display:flex;flex-direction:column;margin-left:", ";"], function (props) {
+  return props.avatar ? '12px' : '0';
+});
+export var InsightFooter = styled.div.withConfig({
+  displayName: "Insightstyles__InsightFooter",
+  componentId: "sc-4cncfc-7"
+})(["display:flex;"]);

package/dist/Insight.types.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import { type InlineAlertProps } from '@synerise/ds-inline-alert';
+import { type WithHTMLAttributes } from '@synerise/ds-utils';
+export type InsightProps = WithHTMLAttributes<HTMLDivElement, {
+    avatar?: ReactNode;
+    headerRightSide?: ReactNode;
+    subTitle?: ReactNode;
+    title: ReactNode;
+    content?: InlineAlertProps[] | ReactNode;
+    footer?: ReactNode;
+    onClick?: () => void;
+}>;

package/dist/Insight.types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Insight';
+export type { InsightProps } from './Insight.types';

package/dist/index.js

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

package/dist/modules.d.js

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

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@synerise/ds-insight",
+  "version": "1.1.0",
+  "description": "Insight UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "prepublish": "npm run build",
+    "types": "tsc --noEmit",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-inline-alert": "^1.0.2",
+    "@synerise/ds-utils": "^1.4.2"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
+  },
+  "gitHead": "4f56489ade5b08524578821d0c51c963002ff48c"
+}