@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.1

package/lib/components/Charts/SpiderChart/SpiderChart.stories.d.ts

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import type { SpiderChartProps } from './';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: ({ isLoading, classNames, cardTitle, customExportOptions, headerActions, series, hasEmptyData, emptyText, ...userOptions }: SpiderChartProps) => React.JSX.Element;
+    argTypes: {
+        isLoading: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        cardTitle: {
+            description: string;
+            control: {
+                type: string;
+            };
+            type: {
+                summary: string;
+            };
+        };
+        customExportOptions: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        series: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        xAxis: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        headerActions: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hasEmptyData: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        emptyText: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _SpiderChart: {
+    (args: SpiderChartProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+        };
+        cardTitle: string;
+        customExportOptions: {
+            key: string;
+            label: string;
+            format: string;
+        }[];
+        series: {
+            name: string;
+            data: {
+                name: string;
+                y: number;
+            }[];
+        }[];
+    };
+};
+export declare const _SpiderChartWithEmptyData: {
+    (args: SpiderChartProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+        };
+        cardTitle: string;
+        customExportOptions: {
+            key: string;
+            label: string;
+            format: string;
+        }[];
+        series: {
+            name: string;
+            data: {
+                name: string;
+                y: number;
+            }[];
+        }[];
+        hasEmptyData: boolean;
+        emptyText: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    };
+};
+//# sourceMappingURL=SpiderChart.stories.d.ts.map

package/lib/components/Charts/SpiderChart/SpiderChart.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpiderChart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/SpiderChart/SpiderChart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMzC,wBA0RE;AAgIF,eAAO,MAAM,YAAY;WAAU,gBAAgB;;;;;;;;;;;;;;;;;;;CAa5C,CAAC;AASR,eAAO,MAAM,yBAAyB;WAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;CAazD,CAAC"}

package/lib/components/Charts/SpiderChart/SpiderChart.stories.js

@@ -0,0 +1,422 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._SpiderChartWithEmptyData = exports._SpiderChart = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Button = require("../../Button");
+var _ChartWrapper = require("../ChartWrapper");
+var _ColumnChart = require("../ColumnChart/ColumnChart.stories");
+var _SpiderChart2 = require("./SpiderChart");
+var _SpiderChartStoriesModule = _interopRequireDefault(require("./SpiderChart.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Data viz/Spider Chart',
+  component: _SpiderChart2.SpiderChart,
+  argTypes: {
+    isLoading: {
+      description: 'If **true**, the component would show a circular loader',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    classNames: {
+      description: 'Provide an optional className to be applied to the wrapper',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string}'
+        }
+      }
+    },
+    cardTitle: {
+      description: 'Title of the card container, present on the header of the component',
+      control: {
+        type: 'text'
+      },
+      type: {
+        summary: 'string'
+      }
+    },
+    customExportOptions: {
+      description: 'Array of export options that specifies the supported file formats for chart exports. <br /> EXPORT_OPTIONS exported by the component can be useful for providing the customExportOptions. Provide the objects corresponding to the desired file format required, in the form of an array. <br /> Empty array indicates no custom export required. If not provided, default options will be shown - PNG, PDF, SVG, JPEG.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'Array<ExportOptionType> | null'
+        }
+      }
+    },
+    series: {
+      description: 'Series options for specific data and the data itself. <br /><b> series.name </b> - The name of the point as shown in the legend, tooltip, dataLabels, etc. <br /> <b> series.data </b> - An array of numerical values. In this case, the numerical values will be interpreted as y options. The x values will be automatically calculated, either starting at 0 and incremented by 1, or from pointStart and pointInterval given in the series options. If the axis has categories, these will be used. Example: data: [0, 5, 3, 5]',
+      table: {
+        type: {
+          summary: 'Array<{ name: string, data: Array<number>}>'
+        }
+      }
+    },
+    xAxis: {
+      description: 'The X axis or category axis. Normally this is the horizontal axis, though if the chart is inverted this is the vertical axis. In case of multiple axes, the xAxis node is an array of configuration objects. <b> xAxis.categories </b> - If categories are present, the names of the categories are used instead of numbers on the axis. Category name in the array represent data present at that particular index in series.data array',
+      table: {
+        type: {
+          summary: 'xAxis: AxisOptions'
+        }
+      }
+    },
+    headerActions: {
+      description: 'The user-specified component placed at the top-right of the chart-container, next to the export menu-button. It can be utilized for adding some custom functionality to the chart.',
+      table: {
+        type: {
+          summary: 'React.Component'
+        }
+      }
+    },
+    hasEmptyData: {
+      description: 'If **true**, the component would show a message indicating that the data is empty',
+      control: {
+        type: 'boolean'
+      }
+    },
+    emptyText: {
+      description: 'Provide component to be shown in case of empty data',
+      table: {
+        type: {
+          summary: 'React.Component'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a SpiderChart component.',
+      description: {
+        component: `
+\`\`\`js
+import { SpiderChart, EXPORT_OPTIONS } from "@spaced-out/ui-design-system/lib/components/Charts";
+\`\`\`
+**Spider Chart**
+
+The Spider Chart component provides a visually appealing way to represent multi-dimensional data. It is effective for comparing several quantitative variables represented on axes starting from the same point. Here's an overview of its features:
+
+- **Customization**: The Spider Chart offers extensive customization options, allowing users to adjust colors, labels, and other visual elements to suit their preferences and branding requirements.
+
+- **Export Options**: Users can export the chart in various file formats (e.g., JPEG, PNG, PDF, SVG) for sharing, embedding, or further analysis.
+
+- **Data Series**: Each series in the Spider Chart represents a specific dataset, with each data point contributing to the overall visualization.
+
+- **Axis Configuration**: The Spider Chart supports customizable axes, allowing users to specify axis titles, types, and other properties to best represent their data.
+
+**Usage:**
+
+\`\`\`jsx
+<SpiderChart
+  classNames={{wrapper: css.spiderChartWrap }}
+  cardTitle="Spider Chart Title"
+  customExportOptions={customExportOptions}
+  series={spiderChartSeries}
+  headerActions={headerActions}
+/>
+\`\`\`
+
+\`\`\`css
+// You can style the Spider Chart wrapper using the wrapper className.
+.spiderChartWrap {
+  // Add your custom styles here
+}
+.loader{
+  // Ad your custom styles for loader here
+}
+\`\`\`
+
+\`\`\`js
+// Custom export options for the Spider Chart
+const customExportOptions = [
+  EXPORT_OPTIONS.download_as_jpeg,
+  EXPORT_OPTIONS.download_as_png,
+  EXPORT_OPTIONS.download_as_pdf,
+  EXPORT_OPTIONS.download_as_svg,
+];
+
+// Data series for the Spider Chart
+const spiderChartSeries = [
+  {
+    name: 'Allocated Budget',
+    data: [
+      {
+        name: 'Sales',
+        y: 43000,
+      },
+      {
+        name: 'Marketing',
+        y: 49000,
+      },
+      {
+        name: 'Development',
+        y: 60000,
+      },
+      {
+        name: 'Customer Support',
+        y: 35000,
+      },
+      {
+        name: 'Information Technology',
+        y: 37000,
+      },
+      {
+        name: 'Administration',
+        y: 30000,
+      },
+    ],
+  },
+  {
+    name: 'Actual Spending',
+    data: [
+      {
+        name: 'Sales',
+        y: 50000,
+      },
+      {
+        name: 'Marketing',
+        y: 39000,
+      },
+      {
+        name: 'Development',
+        y: 42000,
+      },
+      {
+        name: 'Customer Support',
+        y: 31000,
+      },
+      {
+        name: 'Information Technology',
+        y: 46000,
+      },
+      {
+        name: 'Administration',
+        y: 34000,
+      },
+    ],
+  },
+  {
+    name: 'Previous Year Budget',
+    data: [
+      {
+        name: 'Sales',
+        y: 33000,
+      },
+      {
+        name: 'Marketing',
+        y: 39000,
+      },
+      {
+        name: 'Development',
+        y: 40000,
+      },
+      {
+        name: 'Customer Support',
+        y: 55000,
+      },
+      {
+        name: 'Information Technology',
+        y: 37000,
+      },
+      {
+        name: 'Administration',
+        y: 39000,
+      },
+    ],
+  },
+  {
+    name: 'Previous Year Spending',
+    data: [
+      {
+        name: 'Sales',
+        y: 30000,
+      },
+      {
+        name: 'Marketing',
+        y: 59000,
+      },
+      {
+        name: 'Development',
+        y: 40000,
+      },
+      {
+        name: 'Customer Support',
+        y: 30000,
+      },
+      {
+        name: 'Information Technology',
+        y: 22000,
+      },
+      {
+        name: 'Administration',
+        y: 34000,
+      },
+    ],
+  },
+];
+
+// Custom header actions, specified by user
+const headerActions = <>
+  <Button
+    children="Download"
+    iconLeftName="cloud-arrow-down"
+    onClick={() => {}}
+    size="small"
+    type="secondary"
+  />
+</>
+\`\`\`
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/SpiderChart/SpiderChart.jsx'
+    }
+  }
+};
+const customExportOptions = [_ChartWrapper.EXPORT_OPTIONS.download_as_jpeg, _ChartWrapper.EXPORT_OPTIONS.download_as_png, _ChartWrapper.EXPORT_OPTIONS.download_as_pdf, _ChartWrapper.EXPORT_OPTIONS.download_as_svg];
+const spiderChartSeries = [{
+  name: 'Allocated Budget',
+  data: [{
+    name: 'Sales',
+    y: 43000
+  }, {
+    name: 'Marketing',
+    y: 49000
+  }, {
+    name: 'Development',
+    y: 60000
+  }, {
+    name: 'Customer Support',
+    y: 35000
+  }, {
+    name: 'Information Technology',
+    y: 37000
+  }, {
+    name: 'Administration',
+    y: 30000
+  }]
+}, {
+  name: 'Actual Spending',
+  data: [{
+    name: 'Sales',
+    y: 50000
+  }, {
+    name: 'Marketing',
+    y: 39000
+  }, {
+    name: 'Development',
+    y: 42000
+  }, {
+    name: 'Customer Support',
+    y: 31000
+  }, {
+    name: 'Information Technology',
+    y: 46000
+  }, {
+    name: 'Administration',
+    y: 34000
+  }]
+}, {
+  name: 'Previous Year Budget',
+  data: [{
+    name: 'Sales',
+    y: 33000
+  }, {
+    name: 'Marketing',
+    y: 39000
+  }, {
+    name: 'Development',
+    y: 40000
+  }, {
+    name: 'Customer Support',
+    y: 55000
+  }, {
+    name: 'Information Technology',
+    y: 37000
+  }, {
+    name: 'Administration',
+    y: 39000
+  }]
+}, {
+  name: 'Previous Year Spending',
+  data: [{
+    name: 'Sales',
+    y: 30000
+  }, {
+    name: 'Marketing',
+    y: 59000
+  }, {
+    name: 'Development',
+    y: 40000
+  }, {
+    name: 'Customer Support',
+    y: 30000
+  }, {
+    name: 'Information Technology',
+    y: 22000
+  }, {
+    name: 'Administration',
+    y: 34000
+  }]
+}];
+const _SpiderChart = args => /*#__PURE__*/React.createElement("div", {
+  className: _SpiderChartStoriesModule.default.container
+}, /*#__PURE__*/React.createElement(_SpiderChart2.SpiderChart, _extends({}, args, {
+  headerActions: /*#__PURE__*/React.createElement(_Button.Button, {
+    children: "Download",
+    iconLeftName: "cloud-arrow-down",
+    onClick: () => {},
+    size: "small",
+    type: "secondary"
+  })
+})));
+exports._SpiderChart = _SpiderChart;
+_SpiderChart.args = {
+  classNames: {
+    wrapper: _SpiderChartStoriesModule.default.spiderChartWrap
+  },
+  cardTitle: 'Spider Chart Title',
+  customExportOptions,
+  series: spiderChartSeries
+};
+const _SpiderChartWithEmptyData = args => /*#__PURE__*/React.createElement("div", {
+  className: _SpiderChartStoriesModule.default.container
+}, /*#__PURE__*/React.createElement(_SpiderChart2.SpiderChart, _extends({}, args, {
+  headerActions: /*#__PURE__*/React.createElement(_Button.Button, {
+    children: "Download",
+    iconLeftName: "cloud-arrow-down",
+    onClick: () => {},
+    size: "small",
+    type: "secondary"
+  })
+})));
+exports._SpiderChartWithEmptyData = _SpiderChartWithEmptyData;
+_SpiderChartWithEmptyData.args = {
+  classNames: {
+    wrapper: _SpiderChartStoriesModule.default.spiderChartWrap
+  },
+  cardTitle: 'Spider Chart Title',
+  customExportOptions,
+  series: spiderChartSeries,
+  hasEmptyData: true,
+  emptyText: /*#__PURE__*/React.createElement(_ColumnChart.EmptyData, null)
+};

package/lib/components/Charts/SpiderChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SpiderChart';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Charts/SpiderChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/SpiderChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/lib/components/Charts/index.d.ts

@@ -0,0 +1,8 @@
+export * from './ChartTooltip';
+export * from './ChartWrapper';
+export * from './ColumnChart';
+export * from './DonutChart';
+export * from './FunnelChart';
+export * from './LineChart';
+export * from './SpiderChart';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Charts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAE9B,cAAc,cAAc,CAAC;AAE7B,cAAc,eAAe,CAAC;AAE9B,cAAc,aAAa,CAAC;AAE5B,cAAc,eAAe,CAAC"}

package/lib/components/ChatBubble/ChatAnchor.stories.d.ts

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import type { ChatAnchorProps } from './ChatBubble';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: {
+        ({ isAI, tooltip, classNames, avatarProps, }: ChatAnchorProps): React.JSX.Element;
+        displayName: string;
+    };
+    argTypes: {
+        isAI: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        tooltip: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        avatarProps: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _Default: {
+    (args: ChatAnchorProps): React.JSX.Element;
+    storyName: string;
+};
+export declare const _WithAvatar: {
+    (args: ChatAnchorProps): React.JSX.Element;
+    storyName: string;
+    args: {
+        isAI: boolean;
+        avatarProps: {
+            imageSrc: string;
+            text: string;
+        };
+    };
+};
+export declare const _WithAvatarAndTooltip: {
+    (args: ChatAnchorProps): React.JSX.Element;
+    storyName: string;
+    args: {
+        isAI: boolean;
+        avatarProps: {
+            imageSrc: string;
+            text: string;
+        };
+        tooltip: {
+            body: string;
+        };
+    };
+};
+//# sourceMappingURL=ChatAnchor.stories.d.ts.map

package/lib/components/ChatBubble/ChatAnchor.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatAnchor.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ChatBubble/ChatAnchor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGlD,wBAwDE;AAGF,eAAO,MAAM,QAAQ;WAAU,eAAe;;CAA+B,CAAC;AAK9E,eAAO,MAAM,WAAW;WAAU,eAAe;;;;;;;;;CAA+B,CAAC;AAajF,eAAO,MAAM,qBAAqB;WAAU,eAAe;;;;;;;;;;;;CAA+B,CAAC"}