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

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

@@ -1,467 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../../Button';
-import {EXPORT_OPTIONS} from '../ChartWrapper';
-import {EmptyData} from '../ColumnChart/ColumnChart.stories';
-
-import type {SpiderChartProps} from './';
-import {SpiderChart} from './SpiderChart';
-
-import css from './SpiderChart.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Data viz/Spider Chart',
-  component: 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 = [
-  EXPORT_OPTIONS.download_as_jpeg,
-  EXPORT_OPTIONS.download_as_png,
-  EXPORT_OPTIONS.download_as_pdf,
-  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,
-      },
-    ],
-  },
-];
-
-export const _SpiderChart = (args: SpiderChartProps) => (<div className={css.container}>
-  <SpiderChart
-    {...args}
-    headerActions={
-      <Button
-        children="Download"
-        iconLeftName="cloud-arrow-down"
-        onClick={() => {}}
-        size="small"
-        type="secondary"
-      />
-    }
-  />
-</div>);
-
-_SpiderChart.args = {
-  classNames: {wrapper: css.spiderChartWrap},
-  cardTitle: 'Spider Chart Title',
-  customExportOptions,
-  series: spiderChartSeries,
-};
-
-export const _SpiderChartWithEmptyData = (args: SpiderChartProps) => (<div className={css.container}>
-  <SpiderChart
-    {...args}
-    headerActions={
-      <Button
-        children="Download"
-        iconLeftName="cloud-arrow-down"
-        onClick={() => {}}
-        size="small"
-        type="secondary"
-      />
-    }
-  />
-</div>);
-
-_SpiderChartWithEmptyData.args = {
-  classNames: {wrapper: css.spiderChartWrap},
-  cardTitle: 'Spider Chart Title',
-  customExportOptions,
-  series: spiderChartSeries,
-  hasEmptyData: true,
-  emptyText: (<EmptyData /> as React.ReactElement<React.ComponentProps<typeof EmptyData>>),
-};

package/lib/components/Charts/SpiderChart/SpiderChart.tsx

@@ -1,104 +0,0 @@
-import * as React from 'react';
-import Highcharts from 'highcharts';
-import highChartsMore from 'highcharts/highcharts-more';
-import HighchartsReact from 'highcharts-react-official';
-
-import type {ChartOptions, DataOptionsType} from '../../../types/charts';
-import {
-  getDataVizColor,
-  getSpiderChartOptions,
-  mergeChartUserOptions,
-} from '../../../utils/charts';
-import classify from '../../../utils/classify';
-import {
-  ChartWrapperClassNames,
-  ExportOptionType,
-  ChartWrapper,
-} from '../ChartWrapper';
-
-import css from './SpiderChart.module.css';
-
-
-if (
-  !!highChartsMore &&
-  !!Highcharts &&
-  typeof highChartsMore === 'function' &&
-  typeof Highcharts === 'object'
-) {
-  highChartsMore(Highcharts);
-}
-
-export type ClassNames = Readonly<((ChartWrapperClassNames) & {
-  highChart?: string;
-})>;
-
-export type SpiderSeriesItem = {
-  name: string;
-  data: DataOptionsType[];
-};
-
-export type SpiderChartProps = ((ChartOptions) & {
-  isLoading?: boolean;
-  classNames?: ClassNames;
-  cardTitle?: React.ReactNode;
-  customExportOptions?: Array<ExportOptionType> | null;
-  headerActions?: React.ReactNode;
-  series: Array<SpiderSeriesItem>;
-  hasEmptyData?: boolean;
-  emptyText?: React.ReactNode;
-});
-
-export const SpiderChart = (
-  {
-    isLoading,
-    classNames,
-    cardTitle,
-    customExportOptions,
-    headerActions,
-    series,
-    hasEmptyData,
-    emptyText,
-    ...userOptions
-  }: SpiderChartProps,
-) => {
-  const chartRef = React.useRef(null);
-
-  const spiderSeries = series.map((seriesItem, index) => ({
-    ...seriesItem,
-    name: seriesItem.name,
-    data: seriesItem.data,
-    pointPlacement: 'on',
-    color: getDataVizColor(index),
-  }));
-
-  const defaultSpiderChartOptions = getSpiderChartOptions();
-
-  const chartOptions = mergeChartUserOptions(defaultSpiderChartOptions, {
-    series: spiderSeries,
-    ...userOptions,
-  });
-
-  const {highChart, ...wrapperClassNames} = classNames || {};
-
-  return (
-    <ChartWrapper
-      isLoading={isLoading}
-      title={cardTitle}
-      ref={chartRef}
-      customExportOptions={customExportOptions}
-      classNames={wrapperClassNames}
-      headerActions={headerActions}
-      hasEmptyData={hasEmptyData}
-      emptyText={emptyText}
-    >
-      <HighchartsReact
-        highcharts={Highcharts}
-        ref={chartRef}
-        containerProps={{
-          className: classify(css.spiderChartContainer, highChart),
-        }}
-        options={chartOptions}
-      />
-    </ChartWrapper>
-  );
-};

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

@@ -1 +0,0 @@
-export * from './SpiderChart';

package/lib/components/Charts/index.ts

@@ -1,11 +0,0 @@
-export * from './ChartTooltip';
-export * from './ChartWrapper';
-export * from './ColumnChart';
-// @ts-ignore - TS2308 - Module './ColumnChart' has already exported a member named 'ClassNames'. Consider explicitly re-exporting to resolve the ambiguity.
-export * from './DonutChart';
-// @ts-ignore - TS2308 - Module './ColumnChart' has already exported a member named 'ClassNames'. Consider explicitly re-exporting to resolve the ambiguity.
-export * from './FunnelChart';
-// @ts-ignore - TS2308 - Module './ColumnChart' has already exported a member named 'ClassNames'. Consider explicitly re-exporting to resolve the ambiguity.
-export * from './LineChart';
-// @ts-ignore - TS2308 - Module './ColumnChart' has already exported a member named 'ClassNames'. Consider explicitly re-exporting to resolve the ambiguity.
-export * from './SpiderChart';

package/lib/components/ChatBubble/ChatAnchor.stories.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react';
-
-import {ChatAnchor} from './ChatBubble';
-import type {ChatAnchorProps} from './ChatBubble';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'AI Prompt Components/Chat Bubble/Anatomy/Chat Anchor',
-  component: ChatAnchor,
-  argTypes: {
-    isAI: {
-      description: 'Determines whether to show the AI icon or a custom avatar.',
-      control: {type: 'boolean'},
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'true'},
-      },
-    },
-    tooltip: {
-      description: 'Props to configure the tooltip displayed on hover.',
-      control: {type: 'object'},
-      table: {
-        type: {summary: 'BaseTooltipProps'},
-      },
-    },
-    classNames: {
-      description: 'Optional class names for the wrapper.',
-      control: {type: 'object'},
-      table: {
-        type: {summary: '{ wrapper?: string }'},
-      },
-    },
-    avatarProps: {
-      description: 'Props for the Avatar component if `isAI` is false.',
-      control: {type: 'object'},
-      table: {
-        type: {summary: 'AvatarProps'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle:
-        'Renders either an AI icon or a custom Avatar with an optional tooltip.',
-      description: {
-        component: `
-\`\`\`js
-import { ChatAnchor } from "@spaced-out/ui-design-system/lib/components/ChatBubble";
-\`\`\`
-The **ChatAnchor** component conditionally renders:
-- An **AI icon** if \`isAI\` is \`true\`.
-- A **custom Avatar** if \`isAI\` is \`false\`.
-
-Optionally, you can provide a tooltip to display additional information.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/ChatBubble/ChatBubble.jsx',
-    },
-  },
-};
-
-// Default Story with AI Icon
-export const _Default = (args: ChatAnchorProps) => (<ChatAnchor {...args} />);
-
-_Default.storyName = 'Default AI Icon';
-
-// Custom Avatar Example
-export const _WithAvatar = (args: ChatAnchorProps) => (<ChatAnchor {...args} />);
-
-_WithAvatar.storyName = 'With Custom Avatar';
-_WithAvatar.args = {
-  isAI: false,
-  avatarProps: {
-    imageSrc:
-      'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',
-    text: 'Adam Craig Gilchrist',
-  },
-};
-
-// Custom Avatar Example
-export const _WithAvatarAndTooltip = (args: ChatAnchorProps) => (<ChatAnchor {...args} />);
-
-_WithAvatarAndTooltip.storyName = 'With Custom Avatar And Tooltip';
-_WithAvatarAndTooltip.args = {
-  isAI: false,
-  avatarProps: {
-    imageSrc:
-      'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',
-    text: 'Adam Craig Gilchrist',
-  },
-  tooltip: {body: 'Adam Craig'},
-};