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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.4.13-beta.0",
-  "main": "index.js",
+  "version": "0.4.13-beta.1",
+  "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "description": "Sense UI components library",
   "author": {

package/lib/components/AIPromptFlow/AIPromptFlow.stories.tsx

@@ -1,465 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import * as React from 'react';
-
-import {ChatAnchor, ChatBody, ChatBubble, ChatContent} from '../ChatBubble';
-import {ChatFooterWithIcons} from '../ChatBubble/ChatBubble.stories';
-import {Disclaimer} from '../Disclaimer';
-import {Panel, PanelBody, PanelFooter, PanelHeader} from '../Panel';
-import {PromptChip} from '../PromptChip';
-import {PromptInput} from '../PromptInput';
-import {BodyMedium, FormLabelMedium} from '../Text';
-import {SubTitleSmall} from '../Text/Text';
-import {TextTile} from '../TextTile';
-
-import css from './AIPromptFlow.stories.module.css';
-
-
-export default {
-  tags: ['!autodocs'],
-  title: 'AI Prompt Components/AI Prompt Flow',
-  parameters: {
-    docs: {
-      subtitle: 'AI Prompt Flow example',
-      description: {
-        component: `
-This example showcases how to use the ai copilot flows in ui. feel free to copy code and respective css to mimic the exact UI
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Disclaimer/Disclaimer.jsx',
-    },
-  },
-};
-
-const staticResponse = `In today's data-driven world, analytics play a crucial role in decision-making and strategy development. Companies rely on key performance indicators (KPIs) to measure progress and identify areas for improvement. Metrics like conversion rates, churn rates, and user engagement provide valuable insights into business performance. Accurate data collection and analysis empower teams to make informed choices, optimize processes, and allocate resources effectively.
-
-For instance, monitoring website traffic helps identify the most visited pages and the sources driving users to the site. A high bounce rate might indicate a need to improve user experience, while a steady increase in session duration reflects growing engagement. Similarly, tracking customer acquisition cost (CAC) against lifetime value (LTV) ensures sustainable growth and profitability.
-
-Sales teams use analytics to measure pipeline velocity, close rates, and average deal size. These metrics enable managers to forecast revenue, adjust strategies, and improve overall efficiency. In marketing, tools like funnel analysis highlight where potential leads drop off, helping refine campaigns and improve return on investment (ROI).
-
-Employee performance metrics are equally important. Organizations track productivity, satisfaction scores, and retention rates to foster a positive work environment. For instance, a drop in employee engagement often signals underlying issues, such as workload imbalance or lack of recognition.
-
-In customer success, analytics focus on net promoter scores (NPS), response times, and resolution rates. High NPS scores indicate satisfied customers likely to promote the brand, while tracking ticket resolution times ensures efficient support processes. By analyzing these trends, businesses can address pain points and improve client relationships.
-
-Financial analytics are another critical area. Companies monitor profit margins, operational costs, and revenue growth to ensure financial stability. Metrics such as EBITDA and cash flow provide a clear picture of a company’s health, enabling leadership to plan for future investments or expansions.
-
-Data visualization tools make these analytics easier to understand. Dashboards present complex information in simple charts and graphs, allowing teams to identify patterns and anomalies at a glance. Heatmaps, for example, can show user activity on a website, revealing areas that need more attention.
-
-A/B testing further enhances decision-making by allowing teams to experiment with different strategies and compare results. Whether testing headlines, product features, or email campaigns, data-driven results provide clarity and eliminate guesswork.
-
-Real-time analytics help organizations stay agile and responsive. By monitoring live data, companies can react to sudden changes, such as traffic spikes or unexpected downtime. Alerts and notifications ensure that teams are aware of critical issues and can act promptly.
-
-The value of analytics lies not only in the data itself but also in how it’s interpreted and applied. Insights derived from metrics allow businesses to streamline operations, enhance customer satisfaction, and drive growth. With the right tools and a data-driven mindset, organizations can turn raw data into actionable strategies and measurable outcomes.
-
-In essence, analytics provide the foundation for smarter decisions, improved performance, and long-term success. Whether it’s understanding user behavior, optimizing workflows, or predicting market trends, leveraging analytics is key to staying competitive in an ever-changing landscape.`;
-
-const PROMPTS = [
-  'What is the offer acceptance rate?',
-  'Which source produces the best hires?',
-  'What is the average time to hire?',
-  'How many candidates are in the pipeline?',
-  'What is the average cost per hire?',
-  'Which department has the highest turnover rate?',
-  'What percentage of hires are from referrals?',
-  'How long does it take to fill a position?',
-  'What is the attrition rate for the past year?',
-  'Which jobs have the highest application drop-off rate?',
-  'What is the conversion rate from interview to hire?',
-  'How many candidates are rejected at each stage?',
-  'What is the average interview-to-offer ratio?',
-  'Which recruiters have the best performance metrics?',
-  'What percentage of candidates reject offers?',
-  'How satisfied are candidates with the hiring process?',
-  'What is the diversity ratio in the current workforce?',
-  'How many hires come from internal promotions?',
-  'What are the reasons for candidate drop-off?',
-  'How effective is the onboarding process?',
-  'What is the current employee engagement score?',
-  'How many candidates applied last quarter?',
-  'What percentage of job offers are pending?',
-  'How many interviews are conducted per position?',
-  'What is the overall hiring success rate?',
-  'What percentage of applicants are qualified?',
-  'How many candidates are awaiting feedback?',
-  'What is the average time to first interview?',
-  'Which job roles take the longest to fill?',
-  'What is the ratio of applicants to hires?',
-  'Which job boards drive the most applications?',
-  'What is the average time spent interviewing candidates?',
-  'How many passive candidates were contacted last month?',
-  'What percentage of hires are new graduates?',
-  'Which hiring stages have the highest drop-off?',
-  'How many candidates withdrew their applications?',
-  'What percentage of employees passed probation?',
-  'Which regions have the most successful hires?',
-  'What is the average number of interview rounds?',
-  'How many requisitions are still open?',
-  'Which departments have the lowest attrition?',
-  'What percentage of candidates complete assessments?',
-  'What is the satisfaction rate of new hires?',
-  'How many hires are expected this quarter?',
-  'What is the median salary for new hires?',
-  'How many requisitions were filled last month?',
-  'Which hiring sources are the most cost-effective?',
-  'How diverse are the recent hires?',
-  'How many employees left during onboarding?',
-  'What is the percentage of part-time hires?',
-  'How many job offers were rescinded?',
-  'What is the average candidate feedback score?',
-  'Which teams have the fastest hiring process?',
-  'What percentage of hires are internal candidates?',
-  'How many candidates are in the talent pool?',
-  'What is the average age of new hires?',
-  'How effective are employee referral programs?',
-  'What percentage of hires are remote employees?',
-  'How many candidates are considered overqualified?',
-  'Which recruiters have the fastest response time?',
-  'What is the average duration between offer and joining?',
-  'How satisfied are hiring managers with candidates?',
-  'Which skills are most common among recent hires?',
-  'How many candidates failed the technical assessment?',
-  'What is the drop-off rate during technical rounds?',
-  'What percentage of hires are contract workers?',
-  'How many job offers were declined last quarter?',
-  'What percentage of hires meet performance benchmarks?',
-  'How many positions remain unfilled after 90 days?',
-  'What is the hiring trend over the last six months?',
-  'What percentage of hires come from social media?',
-  'How effective is the candidate feedback loop?',
-  'What is the employee referral success rate?',
-  'How many active job seekers applied this month?',
-  'What percentage of candidates ask for offer extensions?',
-  'What is the typical rejection reason from candidates?',
-  'Which hiring stage causes the most delays?',
-  'What percentage of new hires recommend the process?',
-  'How many rehires were made this year?',
-  'What is the cost of a bad hire?',
-  'How many positions were closed due to budget cuts?',
-  'What percentage of hires exceed expectations?',
-  'How long do candidates stay on average?',
-  'What is the feedback score for interviewers?',
-  'Which stages have the most rescheduled interviews?',
-  'How many candidates received counteroffers?',
-  'What is the candidate response time for offers?',
-  'What percentage of candidates report a good experience?',
-  'How does the hiring rate compare year over year?',
-  'Which regions have the slowest time to hire?',
-  'How effective are pre-screening assessments?',
-  'How often do candidates ghost interviews?',
-  'What is the most requested role this year?',
-  'What percentage of new hires are retained after a year?',
-  'How many rejected candidates reapply later?',
-  'How many candidates fail during background checks?',
-  'What percentage of hires are diversity candidates?',
-  'How successful are hiring campaigns in different regions?',
-  'What is the satisfaction rate among rejected candidates?',
-  'How many roles are open for more than 6 months?',
-  'What percentage of hires move into leadership roles?',
-];
-
-const getRandomPrompts = (prompts: Array<string>) => {
-  const count = Math.floor(Math.random() * 3) + 1;
-  const shuffled = prompts.sort(() => 0.5 - Math.random());
-  return shuffled.slice(0, count);
-};
-
-const getRandomSentences = (text: string, wordLimit = 50) => {
-  const sentences = text.match(/[^.!?]+[.!?]/g) || [];
-
-  const result: Array<string> = [];
-  let totalWords = 0;
-
-  const shuffledSentences = sentences.sort(() => Math.random() - 0.5);
-
-  for (const sentence of shuffledSentences) {
-    const wordCount = sentence.trim().split(/\s+/).length;
-
-    if (totalWords + wordCount <= wordLimit || result.length === 0) {
-      result.push(sentence.trim());
-      totalWords += wordCount;
-    } else {
-      break;
-    }
-  }
-
-  return result.join(' ');
-};
-
-export const _AIPromptFlow = () => {
-  const [value, setValue] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [responses, setResponses] = React.useState([]);
-  const [selectedPrompts, setSelectedPrompts] = React.useState(
-    getRandomPrompts(PROMPTS),
-  );
-  const promptRef = React.useRef(null);
-  const loadingRef = React.useRef(null);
-
-  const generateResponse = (text?: string) => {
-    const preparedResponses = [...responses];
-    setIsLoading(true);
-    setTimeout(() => {
-// @ts-ignore - TS2339 - Property 'scrollIntoView' does not exist on type 'never'.
-      loadingRef.current?.scrollIntoView({
-        behavior: 'smooth',
-      });
-    });
-
-    setValue('');
-
-    const question = text ? text : value;
-
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'never'.
-    preparedResponses.push({
-      question,
-      answer: '',
-    });
-
-    setResponses(preparedResponses);
-
-    setTimeout(() => {
-      // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'never'.
-      preparedResponses.push({
-
-        question: '',
-
-        answer: getRandomSentences(staticResponse),
-      });
-      setResponses(preparedResponses);
-      setIsLoading(false);
-      setSelectedPrompts(getRandomPrompts(PROMPTS));
-// @ts-ignore - TS2339 - Property 'scrollIntoView' does not exist on type 'never'.
-      promptRef.current?.scrollIntoView({
-        behavior: 'smooth',
-      });
-    }, 2000);
-  };
-
-  return (
-    <Panel isOpen={true} anchor="right" size="large">
-      <PanelHeader>Copilot</PanelHeader>
-      <Disclaimer classNames={{wrapper: css.disclaimer}}>
-        Always check content generated by AI
-      </Disclaimer>
-      <PanelBody className={css.panelBody}>
-        {responses.length === 0 && !isLoading && (
-          <TextTile
-            header="Copilot"
-            description="Ask anything to accomplish tasks in Sense."
-            classNames={{wrapper: css.copilotTextWrapper}}
-          />
-        )}
-
-        {responses.map((response, idx) => (
-          <div key={idx} className={css.conversationAI}>
-{ /* @ts-ignore - TS2339 - Property 'question' does not exist on type 'never'. */}
-            {!!response.question && (
-              <ChatBubble orientation="left">
-                <ChatAnchor
-                  avatarProps={{
-                    text: 'Adam Craig Gilchrist',
-                  }}
-                  isAI={false}
-                />
-                <ChatContent>
-                  <ChatBody withBgColor={false}>
-{ /* @ts-ignore - TS2339 - Property 'question' does not exist on type 'never'. */}
-                    <BodyMedium>{response.question}</BodyMedium>
-                  </ChatBody>
-                </ChatContent>
-              </ChatBubble>
-            )}
-
-{ /* @ts-ignore - TS2339 - Property 'answer' does not exist on type 'never'. */}
-            {!!response.answer && (
-              <>
-                {idx === 1 && (
-                  <>
-                    <ChatBubble orientation="left">
-                      <ChatAnchor />
-                      <ChatContent>
-                        <ChatBody>
-                          <SubTitleSmall>
-                            This is our interpretation of you question
-                          </SubTitleSmall>
-
-                          <BodyMedium>
-                            {getRandomSentences(staticResponse)}
-                          </BodyMedium>
-                        </ChatBody>
-                      </ChatContent>
-                    </ChatBubble>
-                    <ChatBubble
-                      orientation="left"
-                      classNames={{wrapper: css.leftMarginSpace}}
-                    >
-                      <ChatContent>
-                        <ChatBody>
-{ /* @ts-ignore - TS2339 - Property 'answer' does not exist on type 'never'. */}
-                          <BodyMedium>{response.answer}</BodyMedium>
-                        </ChatBody>
-                        <ChatFooterWithIcons />
-                      </ChatContent>
-                    </ChatBubble>
-                  </>
-                )}
-                {idx === 3 && (
-                  <ChatBubble orientation="left">
-                    <ChatAnchor />
-                    <ChatContent>
-                      <ChatBody classNames={{wrapper: css.longChatContent}}>
-                        <BodyMedium>
-                          In a world where technology and imagination
-                          intertwine, the possibilities for innovation are
-                          boundless. Every passing day introduces new
-                          advancements that reshape the way humanity interacts
-                          with the world, creating a seamless blend of
-                          convenience, creativity, and connectivity. As
-                          artificial intelligence continues to grow in
-                          influence, its impact on everyday life becomes more
-                          profound, touching areas that range from healthcare to
-                          entertainment, from education to environmental
-                          conservation. Take, for instance, the story of a small
-                          town nestled in the valley of rolling hills. For
-                          decades, this town had thrived on traditional farming
-                          practices, cultivating crops and raising livestock in
-                          harmony with nature. However, the advent of technology
-                          introduced challenges that demanded adaptation.
-                          Climate change brought unpredictable weather patterns,
-                          and global markets introduced competitive pressures
-                          that many small farms struggled to meet. Faced with
-                          these challenges, the community turned to innovation.
-                          The town’s leaders, in collaboration with researchers
-                          and technologists, implemented a system of smart
-                          farming powered by AI. Sensors embedded in the soil
-                          measured moisture levels, nutrient content, and
-                          temperature, providing real-time feedback to farmers.
-                          Drones equipped with cameras flew over fields,
-                          capturing images that AI analyzed to detect signs of
-                          pests or disease. Autonomous tractors, guided by
-                          satellite data, plowed and planted with precision,
-                          minimizing waste and maximizing yield. Over time,
-                          these tools not only revived the town’s agricultural
-                          economy but also established it as a model for
-                          sustainable farming practices worldwide. Beyond
-                          agriculture, artificial intelligence also
-                          revolutionized healthcare. A few years ago, a young
-                          woman named Clara faced an uncertain future. Diagnosed
-                          with a rare and aggressive form of cancer, she was
-                          told her chances of survival were slim. However,
-                          Clara’s doctors employed a cutting-edge AI system to
-                          analyze her genetic profile and recommend a
-                          personalized treatment plan. This system, trained on
-                          data from millions of patients worldwide, identified
-                          patterns that human doctors might have missed,
-                          suggesting a combination of therapies tailored
-                          specifically to Clara’s condition.
-                        </BodyMedium>
-                      </ChatBody>
-                      <ChatFooterWithIcons />
-                    </ChatContent>
-                  </ChatBubble>
-                )}
-                {idx !== 1 && idx !== 3 && (
-                  <ChatBubble orientation="left">
-                    <ChatAnchor />
-                    <ChatContent>
-                      <ChatBody>
-{ /* @ts-ignore - TS2339 - Property 'answer' does not exist on type 'never'. */}
-                        <BodyMedium>{response.answer}</BodyMedium>
-                      </ChatBody>
-                    </ChatContent>
-                  </ChatBubble>
-                )}
-
-                <div className={css.leftMarginSpace}>
-                  {idx === responses.length - 1 && (
-// @ts-ignore - TS2786 - 'PromptSuggestions' cannot be used as a JSX component.
-                    <PromptSuggestions
-                      isLoading={isLoading}
-                      selectedPrompts={selectedPrompts}
-                      generateResponse={generateResponse}
-                      promptRef={promptRef}
-                    />
-                  )}
-                </div>
-              </>
-            )}
-          </div>
-        ))}
-        {isLoading && (
-          <ChatBubble
-            classNames={{
-              wrapper: css.loader,
-            }}
-            orientation="left"
-            ref={loadingRef}
-          >
-            <ChatAnchor />
-            <ChatContent>
-              <ChatBody isLoading loadingText="Generating" />
-            </ChatContent>
-          </ChatBubble>
-        )}
-
-        {responses.length === 0 && (
-          <div className={css.promptContainer}>
-{ /* @ts-ignore - TS2786 - 'PromptSuggestions' cannot be used as a JSX component. */}
-            <PromptSuggestions
-              isLoading={isLoading}
-              selectedPrompts={selectedPrompts}
-              generateResponse={generateResponse}
-              label="Here are some ideas to get started with Analytics for your product"
-            />
-          </div>
-        )}
-      </PanelBody>
-      <PanelFooter classNames={{actions: css.actions}}>
-        <PromptInput
-          withPadding={false}
-          value={value}
-          onInputChange={(e) => setValue(e.target.value)}
-          onButtonClick={() => generateResponse()}
-          buttonDisabled={value.length === 0}
-        ></PromptInput>
-      </PanelFooter>
-    </Panel>
-  );
-};
-
-const PromptSuggestions = ({
-  isLoading,
-  generateResponse,
-  selectedPrompts,
-  label,
-  promptRef,
-}: {
-  isLoading: boolean;
-  generateResponse: (prompt: string) => void;
-  selectedPrompts: string[];
-  label?: string;
-  promptRef?: {
-    current?: HTMLDivElement | null;
-  };
-}) =>
-  !isLoading && (
-    <>
-      {label && <FormLabelMedium>{label}</FormLabelMedium>}
-
-      <div className={css.promptWrapper}>
-        {selectedPrompts.map((prompt) => (
-          <React.Fragment key={prompt}>
-            <PromptChip
-              classNames={{wrapper: css.prompt}}
-              onClick={() => generateResponse(prompt)}
-// @ts-ignore - TS2769 - No overload matches this call.
-              ref={promptRef}
-            >
-              {prompt}
-            </PromptChip>
-          </React.Fragment>
-        ))}
-      </div>
-    </>
-  );

package/lib/components/Accordion/Accordion.stories.tsx

@@ -1,165 +0,0 @@
-import * as React from 'react';
-
-import type {AccordionPropsType} from './Accordion';
-import {Accordion} from './Accordion';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Accordion',
-  component: Accordion,
-  argTypes: {
-    classNames: {
-      description:
-        'Optional class name overrides for styling parts of the accordion. Keys include: wrapper, headerWrapper, header, content.',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{wrapper?: string, headerWrapper?: string, header?: string, content?: string}',
-        },
-      },
-    },
-    header: {
-      description:
-        'A React node that renders the visible header of the accordion. This typically includes a title or label for the section. It can be a string, JSX, or any React element.',
-      control: {type: 'text'},
-      table: {
-        type: {summary: 'React.ReactNode'},
-      },
-    },
-    id: {
-      description:
-        'A unique string identifier for the accordion instance. Required when used inside an AccordionGroup to control open/close or disabled states via openedIds and disabledIds arrays.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    children: {
-      description:
-        'The content to be shown inside the accordion when it is expanded. Can be a string, JSX, or any valid React node. This content remains hidden when the accordion is collapsed.',
-      control: {type: 'text'},
-      table: {
-        type: {summary: 'React.ReactNode'},
-      },
-    },
-    isOpen: {
-      description: 'Controls whether the accordion is open or closed.',
-      control: {type: 'boolean'},
-      table: {
-        type: {summary: 'boolean'},
-      },
-    },
-    disabled: {
-      description:
-        'Disables interaction with the accordion. When true, its state can not be changed from closed to opened or vice versa',
-      control: {type: 'boolean'},
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    showToggle: {
-      description: 'Displays a toggle switch to enable/disable the accordion',
-      control: {type: 'boolean'},
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    onChange: {
-      description: 'Callback triggered when the accordion is opened or closed.',
-      control: false,
-      table: {
-        type: {
-          summary: '(id?: string, isOpen: boolean) => mixed',
-        },
-      },
-    },
-    onToggle: {
-      description:
-        'Callback triggered when the enable/disable toggle is clicked.',
-      control: false,
-      table: {
-        type: {
-          summary: '(id?: string, checked?: boolean) => mixed',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates an Accordion component.',
-      description: {
-        component: `
-\`\`\`js
-import { Accordion } from "@spaced-out/ui-design-system/lib/components/Accordion";
-\`\`\`
-The Accordion component is a collapsible UI element used to toggle the visibility of content sections. It can be used independently or within and AccordionGroup.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Accordion/Accordion.jsx',
-    },
-  },
-};
-
-export const _Default = (args: AccordionPropsType) => (<Accordion {...args}>
-  <div>
-    Accordions allow you to organize content into collapsible sections. This
-    improves page readability and reduces visual clutter. Click the header to
-    expand or collapse this section.
-  </div>
-</Accordion>);
-
-_Default.args = {
-  classNames: {wrapper: ''},
-  id: 'ac1',
-  header: 'What is an Accordion',
-};
-
-export const _WithToggle = (args: AccordionPropsType) => {
-  const [isOpened, setIsOpened] = React.useState(args.isOpen ?? false);
-  const [isDisabled, setDisabled] = React.useState(args.disabled ?? true);
-  const handleToggle = (_id: undefined | string, checked: undefined | boolean) => {
-// @ts-ignore - TS2345 - Argument of type 'boolean | undefined' is not assignable to parameter of type 'SetStateAction<boolean>'.
-    setIsOpened(checked);
-    setDisabled(!checked);
-  };
-
-  React.useEffect(() => {
-    setIsOpened(args.isOpen ?? false);
-  }, [args.isOpen]);
-
-  React.useEffect(() => {
-    setDisabled(args.disabled ?? false);
-  }, [args.disabled]);
-
-  return (
-    <Accordion
-      {...args}
-      isOpen={isOpened}
-      disabled={isDisabled}
-      header={'What is an Accordion?'}
-      onToggle={handleToggle}
-    >
-      <div>
-        Accordions allow you to organize content into collapsible sections. This
-        improves page readability and reduces visual clutter. Click the header
-        to expand or collapse this section.
-      </div>
-    </Accordion>
-  );
-};
-
-_WithToggle.args = {
-  classNames: {wrapper: ''},
-  id: 'ac1',
-  showToggle: true,
-};