@altimateai/ui-components 0.0.1-beta.4 → 0.0.1-beta.6

package/dist/storybook/Slider.stories.tsx

@@ -0,0 +1,79 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { Slider } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Slider",
+  component: Slider,
+  argTypes: {
+    defaultValue: {
+      control: "object",
+    },
+    min: {
+      control: "number",
+    },
+    max: {
+      control: "number",
+    },
+    step: {
+      control: "number",
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+} as Meta<typeof Slider>;
+
+const Template: StoryFn = args => (
+  <div className="al-w-[60%] al-space-y-4">
+    <Slider {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  defaultValue: [50],
+  max: 100,
+  step: 1,
+};
+
+export const WithSteps = Template.bind({});
+WithSteps.args = {
+  defaultValue: [0],
+  max: 100,
+  step: 10,
+};
+
+export const Range = Template.bind({});
+Range.args = {
+  defaultValue: [25, 75],
+  max: 100,
+  step: 1,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  defaultValue: [50],
+  max: 100,
+  step: 1,
+  disabled: true,
+};
+
+export const CustomRange = Template.bind({});
+CustomRange.args = {
+  defaultValue: [40],
+  min: -50,
+  max: 50,
+  step: 5,
+};
+
+export const WithLabels: StoryFn = () => (
+  <div className="al-w-[60%] al-space-y-4">
+    <div className="al-grid al-gap-4 al-pt-4">
+      <div className="al-flex al-items-center al-justify-between">
+        <label className="al-text-sm al-font-medium">Volume</label>
+        <span className="al-w-12 al-rounded-md al-text-right al-text-sm">50%</span>
+      </div>
+      <Slider defaultValue={[50]} max={100} step={1} />
+    </div>
+  </div>
+);

package/dist/storybook/Switch.stories.tsx

@@ -0,0 +1,90 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { Switch } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Switch",
+  component: Switch,
+  argTypes: {
+    checked: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    defaultChecked: {
+      control: "boolean",
+    },
+    onCheckedChange: { action: "checked changed" },
+  },
+} as Meta;
+
+const Template: StoryFn = args => <Switch {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  "aria-label": "Switch demo",
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+  defaultChecked: true,
+  "aria-label": "Switch demo",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  "aria-label": "Switch demo",
+};
+
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = {
+  disabled: true,
+  defaultChecked: true,
+  "aria-label": "Switch demo",
+};
+
+export const WithLabel: StoryFn = () => (
+  <div className="al-flex al-items-center al-space-x-2">
+    <Switch id="airplane-mode" />
+    <label
+      htmlFor="airplane-mode"
+      className="al-text-sm al-font-medium al-leading-none al-peer-disabled:al-cursor-not-allowed al-peer-disabled:al-opacity-70"
+    >
+      Airplane Mode
+    </label>
+  </div>
+);
+
+export const WithDescription: StoryFn = () => (
+  <div className="al-flex al-flex-col al-space-y-2">
+    <div className="al-flex al-items-center al-space-x-2">
+      <Switch id="notifications" />
+      <label htmlFor="notifications" className="al-text-sm al-font-medium al-leading-none">
+        Enable Notifications
+      </label>
+    </div>
+    <p className="al-text-sm al-text-muted-foreground">
+      You will receive notifications when someone mentions you in a comment.
+    </p>
+  </div>
+);
+
+export const InForm: StoryFn = () => (
+  <form className="al-w-full al-max-w-sm">
+    <div className="al-flex al-flex-col al-space-y-4">
+      <div className="al-flex al-items-center al-justify-between">
+        <label htmlFor="marketing" className="al-text-sm al-font-medium al-leading-none">
+          Marketing emails
+        </label>
+        <Switch id="marketing" />
+      </div>
+      <div className="al-flex al-items-center al-justify-between">
+        <label htmlFor="newsletter" className="al-text-sm al-font-medium al-leading-none">
+          Weekly newsletter
+        </label>
+        <Switch id="newsletter" defaultChecked />
+      </div>
+    </div>
+  </form>
+);

package/dist/storybook/Textarea.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { Textarea } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Textarea",
+  component: Textarea,
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+    placeholder: {
+      control: "text",
+    },
+    rows: {
+      control: "number",
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = args => <Textarea {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: "Type your message here.",
+};
+
+export const WithRows = Template.bind({});
+WithRows.args = {
+  placeholder: "Type your message here.",
+  rows: 10,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  placeholder: "This textarea is disabled",
+  disabled: true,
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  value:
+    "This is a pre-filled textarea with some content that demonstrates how the component handles longer text.",
+  rows: 5,
+};
+
+export const WithCustomClass = Template.bind({});
+WithCustomClass.args = {
+  placeholder: "Custom styled textarea",
+  className: "al-border-2 al-border-primary",
+};

package/dist/storybook/Toast.stories.tsx

@@ -0,0 +1,107 @@
+import { Meta, StoryFn } from "@storybook/react";
+import {
+  Toast,
+  ToastProvider,
+  ToastTitle,
+  ToastDescription,
+  ToastAction,
+  ToastClose,
+  ToastViewport,
+  Toaster,
+  Button,
+  toast,
+} from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Toast",
+  component: Toast,
+  decorators: [
+    Story => (
+      <ToastProvider>
+        <Story />
+        <Toaster />
+        <ToastViewport />
+      </ToastProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: StoryFn = args => (
+  <Toast {...args}>
+    <ToastTitle>Toast Title</ToastTitle>
+    <ToastDescription>Toast description goes here.</ToastDescription>
+    <ToastClose />
+  </Toast>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: "default",
+};
+
+export const Destructive = Template.bind({});
+Destructive.args = {
+  variant: "destructive",
+};
+
+export const WithAction: StoryFn = () => (
+  <Toast>
+    <ToastTitle>Scheduled: Catch up</ToastTitle>
+    <ToastDescription>Friday, February 10, 2024 at 5:57 PM</ToastDescription>
+    <ToastAction altText="Goto schedule to undo" onClick={() => {}}>
+      Undo
+    </ToastAction>
+    <ToastClose />
+  </Toast>
+);
+
+export const WithLongContent: StoryFn = () => (
+  <Toast>
+    <ToastTitle>Long Content Example</ToastTitle>
+    <ToastDescription>
+      This is a toast with a very long description that might wrap to multiple lines. It
+      demonstrates how the toast component handles longer content while maintaining its layout and
+      readability.
+    </ToastDescription>
+    <ToastClose />
+  </Toast>
+);
+
+export const Success: StoryFn = () => (
+  <Toast>
+    <div className="al-flex al-items-center al-gap-2">
+      <div className="al-h-6 al-w-6 al-text-green-500">✓</div>
+      <ToastTitle>Successfully saved!</ToastTitle>
+    </div>
+    <ToastDescription>Your changes have been saved successfully.</ToastDescription>
+    <ToastClose />
+  </Toast>
+);
+
+export const Error: StoryFn = () => (
+  <Toast variant="destructive">
+    <div className="al-flex al-items-center al-gap-2">
+      <div className="al-h-6 al-w-6 al-text-red-500">✕</div>
+      <ToastTitle>Error occurred</ToastTitle>
+    </div>
+    <ToastDescription>There was a problem with your request. Please try again.</ToastDescription>
+    <ToastAction altText="Try again" onClick={() => {}}>
+      Try again
+    </ToastAction>
+    <ToastClose />
+  </Toast>
+);
+
+export const OnClick: StoryFn = () => (
+  <Button
+    variant="outline"
+    onClick={() => {
+      toast({
+        title: "Uh oh! Something went wrong.",
+        description: "There was a problem with your request.",
+      });
+    }}
+  >
+    Show Toast
+  </Button>
+);

package/dist/storybook/Tooltip.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../shadcn";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "Shadcn/Components/Tooltip",
+  component: Tooltip,
+  decorators: [
+    Story => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger>Hover me</TooltipTrigger>
+      <TooltipContent>
+        <p>Tooltip content</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};

package/dist/storybook/Typography.stories.tsx

@@ -0,0 +1,178 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Typography as Component } from "../shadcn";
+
+const meta = {
+  title: "Shadcn/Theme/Typography",
+  component: Component,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Typography: Story = {
+  args: {
+    variant: "h1",
+    weight: "regular",
+    size: "md",
+    children: "Heading 1",
+  },
+  render: () => (
+    <div className="space-y-8">
+      {/* Heading 1 Variations */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h1" weight="regular">
+          Heading 1
+          <br /> Regular
+        </Component>
+        <Component variant="h1" weight="medium">
+          Heading 1 <br />
+          Medium
+        </Component>
+        <Component variant="h1" weight="semibold">
+          Heading 1 <br />
+          Semibold
+        </Component>
+        <Component variant="h1" weight="bold">
+          Heading 1 <br />
+          Bold
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          48px / Line height: 60px
+        </Component>
+      </div>
+
+      {/* Heading 2 Variations */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h2" weight="regular">
+          Heading 2 <br />
+          Regular
+        </Component>
+        <Component variant="h2" weight="medium">
+          Heading 2 <br />
+          Medium
+        </Component>
+        <Component variant="h2" weight="semibold">
+          Heading 2 <br />
+          Semibold
+        </Component>
+        <Component variant="h2" weight="bold">
+          Heading 2 <br />
+          Bold
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          36px / Line height: 44px
+        </Component>
+      </div>
+
+      {/* Heading 3 Variations */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h3" weight="regular">
+          Heading 3 <br />
+          Regular
+        </Component>
+        <Component variant="h3" weight="medium">
+          Heading 3 <br />
+          Medium
+        </Component>
+        <Component variant="h3" weight="semibold">
+          Heading 3 <br />
+          Semibold
+        </Component>
+        <Component variant="h3" weight="bold">
+          Heading 3 <br />
+          Bold
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          30px / Line height: 38px
+        </Component>
+      </div>
+
+      {/* Heading 4 Variations */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h4" weight="regular">
+          Heading 4 <br />
+          Regular
+        </Component>
+        <Component variant="h4" weight="medium">
+          Heading 4 <br />
+          Medium
+        </Component>
+        <Component variant="h4" weight="semibold">
+          Heading 4 <br />
+          Semibold
+        </Component>
+        <Component variant="h4" weight="bold">
+          Heading 4 <br />
+          Bold
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          24px / Line height: 32px
+        </Component>
+      </div>
+
+      {/* Subheading Variations */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="subheading" weight="regular">
+          Sub heading <br />
+          Regular
+        </Component>
+        <Component variant="subheading" weight="medium">
+          Sub heading <br />
+          Medium
+        </Component>
+        <Component variant="subheading" weight="semibold">
+          Sub heading <br />
+          Semibold
+        </Component>
+        <Component variant="subheading" weight="bold">
+          Sub heading <br />
+          Bold
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          20px / Line height: 30px
+        </Component>
+      </div>
+
+      {/* Body/Paragraph Example */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="body" size="sm">
+          Body SM <br /> Regular
+        </Component>
+        <Component variant="body" size="md">
+          Body MD <br /> Regular
+        </Component>
+        <Component variant="body" size="lg">
+          Body LG <br /> Regular
+        </Component>
+        <Component variant="body" size="xl">
+          Body XL <br /> Regular
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          20px, 16px, 14px, 12px | Line height: 30px, 24px, 20px, 18px
+        </Component>
+      </div>
+
+      {/* Caption Example */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="caption" size="sm">
+          Caption SM <br /> Regular
+        </Component>
+        <Component variant="caption" weight="medium" size="sm">
+          Caption SM <br /> Medium
+        </Component>
+        <Component variant="caption" weight="medium" size="md">
+          Caption MD <br /> Medium
+        </Component>
+        <Component variant="caption" weight="medium" size="lg">
+          Caption LG <br /> Medium
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          12px, 14px, 16px | Line height: 24px, 20px, 18px
+        </Component>
+      </div>
+    </div>
+  ),
+};

package/dist/types-FVWfXDNw.d.ts

@@ -0,0 +1,104 @@
+import { Dispatch, ComponentType } from 'react';
+import { UnknownAction } from '@reduxjs/toolkit';
+import { z } from 'zod';
+
+interface TeamMateState {
+    showCoachingForm: boolean;
+}
+interface TeamMateContextProps {
+    state: TeamMateState;
+    dispatch: Dispatch<UnknownAction>;
+}
+interface CoachAiResponse {
+    ai_response: string;
+    category: string;
+    personalizationScope: string;
+}
+interface CoachAiConfirmationResponse {
+    ok: boolean;
+    train_doc_uid: string;
+    frontend_url: string;
+}
+declare enum ContentCategory {
+    TERM_CLARIFICATION = "TermClarification",
+    GENERAL_GUIDELINES = "GeneralGuidelines",
+    BUSINESS_EXPLANATION = "BusinessExplanation"
+}
+declare enum TaskLabels {
+    DocGen = "DocGen",
+    ChartBot = "ChartBot",
+    SqlBot = "SqlExpert",
+    OpportunitiesBot = "OpportunitiesBot",
+    ProjectGovernor = "ProjectGovernor",
+    TeradataToSnowflakeMigrator = "TeradataToSnowflakeMigrator",
+    AlertManager = "AlertManager"
+}
+declare enum PersonalizationScope {
+    USER_SPECIFIC = "UserSpecific",
+    ALL_USERS = "AllUsers"
+}
+declare const learningSchema: z.ZodObject<{
+    train_doc_uid: z.ZodString;
+    userId: z.ZodString;
+    display_name: z.ZodString;
+    taskLabel: z.ZodString;
+    category: z.ZodEnum<[string, ...string[]]>;
+    personalizationScope: z.ZodDefault<z.ZodEnum<[string, ...string[]]>>;
+    createdDate: z.ZodString;
+    updatedDate: z.ZodString;
+    content: z.ZodString;
+    metadata: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+    isActive: z.ZodDefault<z.ZodBoolean>;
+}, "strip", z.ZodTypeAny, {
+    content: string;
+    display_name: string;
+    userId: string;
+    train_doc_uid: string;
+    taskLabel: string;
+    category: string;
+    personalizationScope: string;
+    createdDate: string;
+    updatedDate: string;
+    isActive: boolean;
+    metadata?: Record<string, unknown> | undefined;
+}, {
+    content: string;
+    display_name: string;
+    userId: string;
+    train_doc_uid: string;
+    taskLabel: string;
+    category: string;
+    createdDate: string;
+    updatedDate: string;
+    metadata?: Record<string, unknown> | undefined;
+    personalizationScope?: string | undefined;
+    isActive?: boolean | undefined;
+}>;
+interface Learning extends z.infer<typeof learningSchema> {
+}
+declare enum TeamMateAvailability {
+    EXTENSION = "VSCode Extension",
+    SAAS = "SaaS"
+}
+interface TeamMateComponentProps<T = void> {
+    onClose?: (data?: T) => void;
+    frontendUrl?: string;
+}
+interface TeamMateConfig<T = unknown> {
+    name: string;
+    avatar: string;
+    description: string;
+    availability: TeamMateAvailability[];
+    key: TaskLabels;
+    seeInAction?: boolean;
+    comingSoon?: boolean | (() => boolean);
+    displayComponent?: ComponentType<TeamMateComponentProps<T>>;
+    formComponent?: ComponentType<TeamMateComponentProps<T>>;
+}
+declare enum TeamMateActionType {
+    SEE_IN_ACTION = "SEE_IN_ACTION",
+    REQUEST_ACCESS = "REQUEST_ACCESS",
+    VIEW_DETAILS = "VIEW_DETAILS"
+}
+
+export { type CoachAiResponse as C, type Learning as L, PersonalizationScope as P, TaskLabels as T, type TeamMateContextProps as a, type TeamMateState as b, type TeamMateConfig as c, TeamMateActionType as d, TeamMateAvailability as e, type CoachAiConfirmationResponse as f, ContentCategory as g, type TeamMateComponentProps as h, learningSchema as l };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altimateai/ui-components",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AltimateAI/altimate-components.git"
@@ -52,4 +52,4 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   }
-}
+}

package/readme.md

@@ -1,11 +1,11 @@
-## Installation
-
-To install the package, you can use either npm or yarn:
-
-```bash
-# Using npm
-npm install @altimateai/ui-components
-
-# Using yarn
-yarn add @altimateai/ui-components
-```
+## Installation
+
+To install the package, you can use either npm or yarn:
+
+```bash
+# Using npm
+npm install @altimateai/ui-components
+
+# Using yarn
+yarn add @altimateai/ui-components
+```