@tribepad/themis 1.0.5 → 1.0.7

package/src/elements/RatingScale/RatingScale.stories.tsx

@@ -0,0 +1,379 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { RatingScale } from './RatingScale';
+
+const meta = {
+  title: 'Elements/RatingScale',
+  component: RatingScale,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Configurable rating scale with 3 display styles (buttons, stars, slider). Built on React Aria RadioGroup and Slider primitives for full keyboard and screen reader support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    displayStyle: {
+      control: 'select',
+      options: ['buttons', 'stars', 'slider'],
+      description: 'Visual display style of the scale',
+      table: { defaultValue: { summary: 'buttons' } },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Component size',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    min: { control: 'number', description: 'Minimum value', table: { defaultValue: { summary: '1' } } },
+    max: { control: 'number', description: 'Maximum value', table: { defaultValue: { summary: '5' } } },
+    step: { control: 'number', description: 'Step increment', table: { defaultValue: { summary: '1' } } },
+    showNA: { control: 'boolean', description: 'Show N/A button', table: { defaultValue: { summary: 'false' } } },
+    isDisabled: { control: 'boolean' },
+    isReadOnly: { control: 'boolean' },
+    isRequired: { control: 'boolean' },
+    isInvalid: { control: 'boolean' },
+    label: { control: 'text' },
+    description: { control: 'text' },
+    errorMessage: { control: 'text' },
+    lowLabel: { control: 'text' },
+    highLabel: { control: 'text' },
+  },
+} satisfies Meta<typeof RatingScale>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// =============================================================================
+// Display Styles
+// =============================================================================
+
+export const Buttons: Story = {
+  args: {
+    label: 'How would you rate this experience?',
+    displayStyle: 'buttons',
+  },
+};
+
+export const Stars: Story = {
+  args: {
+    label: 'Rate this product',
+    displayStyle: 'stars',
+  },
+};
+
+export const Slider: Story = {
+  args: {
+    label: 'Satisfaction level',
+    displayStyle: 'slider',
+  },
+};
+
+export const AllDisplayStyles: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8 w-[400px]">
+      <RatingScale label="Buttons" displayStyle="buttons" />
+      <RatingScale label="Stars" displayStyle="stars" />
+      <RatingScale label="Slider" displayStyle="slider" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: { story: 'Comparison of all three display styles.' },
+    },
+  },
+};
+
+// =============================================================================
+// Sizes
+// =============================================================================
+
+export const SmallSize: Story = {
+  args: {
+    label: 'Small rating',
+    size: 'sm',
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    label: 'Large rating',
+    size: 'lg',
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8 w-[400px]">
+      <RatingScale label="Small" size="sm" />
+      <RatingScale label="Default" size="default" />
+      <RatingScale label="Large" size="lg" />
+    </div>
+  ),
+};
+
+// =============================================================================
+// Labels
+// =============================================================================
+
+export const WithEndpointLabels: Story = {
+  args: {
+    label: 'Job satisfaction',
+    lowLabel: 'Very unsatisfied',
+    highLabel: 'Very satisfied',
+  },
+};
+
+export const WithValueLabels: Story = {
+  render: () => {
+    const [value, setValue] = useState<number | null>(null);
+    return (
+      <div className="w-[400px]">
+        <RatingScale
+          label="How likely are you to recommend us?"
+          value={value}
+          onChange={setValue}
+          valueLabels={{
+            '1': 'Not at all likely',
+            '2': 'Unlikely',
+            '3': 'Neutral',
+            '4': 'Likely',
+            '5': 'Very likely',
+          }}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Value labels provide context for each score.' },
+    },
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: 'Technical skills',
+    description: 'Rate the candidate\'s technical proficiency from 1-5.',
+  },
+};
+
+// =============================================================================
+// N/A Support
+// =============================================================================
+
+export const WithNA: Story = {
+  render: () => {
+    const [value, setValue] = useState<number | null>(null);
+    return (
+      <div className="w-[400px]">
+        <RatingScale
+          label="Communication skills"
+          showNA
+          value={value}
+          onChange={setValue}
+          lowLabel="Poor"
+          highLabel="Excellent"
+        />
+        <p className="mt-2 text-sm text-[var(--muted-foreground)]">
+          Selected: {value === null ? 'N/A' : value ?? 'None'}
+        </p>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: { story: 'N/A button allows opting out of rating.' },
+    },
+  },
+};
+
+// =============================================================================
+// States
+// =============================================================================
+
+export const Required: Story = {
+  args: {
+    label: 'Rating',
+    isRequired: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    label: 'Rating',
+    isInvalid: true,
+    errorMessage: 'Please select a rating before continuing.',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Rating',
+    value: 3,
+    isDisabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    label: 'Previous rating',
+    value: 4,
+    isReadOnly: true,
+  },
+};
+
+// =============================================================================
+// Custom Ranges
+// =============================================================================
+
+export const TenPointScale: Story = {
+  args: {
+    label: 'NPS Score',
+    min: 0,
+    max: 10,
+    lowLabel: 'Not likely',
+    highLabel: 'Very likely',
+    displayStyle: 'buttons',
+  },
+  parameters: {
+    docs: {
+      description: { story: '0-10 Net Promoter Score scale.' },
+    },
+  },
+};
+
+export const StarsOutOfTen: Story = {
+  args: {
+    label: 'Movie rating',
+    min: 1,
+    max: 10,
+    displayStyle: 'stars',
+  },
+};
+
+export const SliderWithEndpoints: Story = {
+  args: {
+    label: 'Pain level',
+    min: 0,
+    max: 10,
+    displayStyle: 'slider',
+    lowLabel: 'No pain',
+    highLabel: 'Worst pain',
+  },
+};
+
+// =============================================================================
+// Controlled Example
+// =============================================================================
+
+export const ControlledExample: Story = {
+  render: () => {
+    const [value, setValue] = useState<number | null>(3);
+    return (
+      <div className="w-[400px]">
+        <RatingScale
+          label="Controlled rating"
+          value={value}
+          onChange={setValue}
+          displayStyle="buttons"
+          showNA
+          lowLabel="Low"
+          highLabel="High"
+          valueLabels={{
+            '1': 'Poor',
+            '2': 'Below average',
+            '3': 'Average',
+            '4': 'Above average',
+            '5': 'Excellent',
+          }}
+        />
+        <div className="mt-4 flex gap-2">
+          <button
+            className="rounded border px-3 py-1 text-sm"
+            onClick={() => setValue(1)}
+          >
+            Set to 1
+          </button>
+          <button
+            className="rounded border px-3 py-1 text-sm"
+            onClick={() => setValue(5)}
+          >
+            Set to 5
+          </button>
+          <button
+            className="rounded border px-3 py-1 text-sm"
+            onClick={() => setValue(null)}
+          >
+            Set N/A
+          </button>
+        </div>
+      </div>
+    );
+  },
+};
+
+// =============================================================================
+// Real-world Examples
+// =============================================================================
+
+export const InterviewScorecard: Story = {
+  render: () => {
+    const [scores, setScores] = useState<Record<string, number | null>>({
+      technical: null,
+      communication: null,
+      leadership: null,
+    });
+    return (
+      <div className="w-[500px] rounded-lg border border-[var(--border)] bg-[var(--content-background)] p-6">
+        <h3 className="mb-4 text-lg font-semibold text-[var(--content-foreground)]">
+          Interview Scorecard
+        </h3>
+        <div className="flex flex-col gap-6">
+          <RatingScale
+            label="Technical Skills"
+            displayStyle="stars"
+            value={scores.technical}
+            onChange={(v) => setScores((s) => ({ ...s, technical: v }))}
+            showNA
+          />
+          <RatingScale
+            label="Communication"
+            displayStyle="buttons"
+            value={scores.communication}
+            onChange={(v) => setScores((s) => ({ ...s, communication: v }))}
+            lowLabel="Poor"
+            highLabel="Excellent"
+            valueLabels={{
+              '1': 'Poor',
+              '2': 'Below expectations',
+              '3': 'Meets expectations',
+              '4': 'Exceeds expectations',
+              '5': 'Outstanding',
+            }}
+          />
+          <RatingScale
+            label="Leadership Potential"
+            displayStyle="slider"
+            value={scores.leadership}
+            onChange={(v) => setScores((s) => ({ ...s, leadership: v }))}
+            min={1}
+            max={10}
+            lowLabel="Low"
+            highLabel="High"
+          />
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interview scorecard showing all three display styles for different evaluation criteria.',
+      },
+    },
+  },
+};

package/src/elements/SituationalJudgement/SituationalJudgement.stories.tsx

@@ -0,0 +1,305 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { SituationalJudgement } from './SituationalJudgement';
+
+const SAMPLE_RESPONSES = [
+  { value: 'a', text: 'Speak to the colleague privately about the issue.', ordinal: 0 },
+  { value: 'b', text: 'Report the situation to your manager immediately.', ordinal: 1 },
+  { value: 'c', text: 'Ignore the situation and focus on your own work.', ordinal: 2 },
+  { value: 'd', text: 'Discuss the matter in the next team meeting.', ordinal: 3 },
+];
+
+const SAMPLE_SCENARIO = '<p>You observe a colleague making a <strong>significant error</strong> on an important client report. The report is due to be submitted tomorrow morning. Your colleague seems unaware of the mistake.</p>';
+
+const meta = {
+  title: 'Elements/SituationalJudgement',
+  component: SituationalJudgement,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Assessment component presenting a scenario with 3-6 response options. Composes existing RadioGroup + Radio for responses and Accordion for collapsible scenarios. Includes built-in HTML sanitiser for XSS protection.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Component size',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    collapsibleScenario: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    isReadOnly: { control: 'boolean' },
+    isRequired: { control: 'boolean' },
+    isInvalid: { control: 'boolean' },
+    label: { control: 'text' },
+    description: { control: 'text' },
+    errorMessage: { control: 'text' },
+  },
+} satisfies Meta<typeof SituationalJudgement>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// =============================================================================
+// Default
+// =============================================================================
+
+export const Default: Story = {
+  args: {
+    label: 'Question 1',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+// =============================================================================
+// Collapsible Scenario
+// =============================================================================
+
+export const CollapsibleScenario: Story = {
+  args: {
+    label: 'Question 2',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+    collapsibleScenario: true,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Scenario panel can be collapsed to save space. Uses the existing Accordion component.',
+      },
+    },
+  },
+};
+
+// =============================================================================
+// States
+// =============================================================================
+
+export const Required: Story = {
+  args: {
+    label: 'Question 3',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+    isRequired: true,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+export const Invalid: Story = {
+  args: {
+    label: 'Question 4',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+    isInvalid: true,
+    errorMessage: 'Please select a response before continuing.',
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Question 5',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+    value: 'a',
+    isDisabled: true,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+export const ReadOnly: Story = {
+  args: {
+    label: 'Question 6 (Submitted)',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+    value: 'b',
+    isReadOnly: true,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+// =============================================================================
+// With Description
+// =============================================================================
+
+export const WithDescription: Story = {
+  args: {
+    label: 'Question 7',
+    description: 'Choose the most effective response to the scenario below.',
+    scenarioText: SAMPLE_SCENARIO,
+    responses: SAMPLE_RESPONSES,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+// =============================================================================
+// Sizes
+// =============================================================================
+
+export const SmallSize: Story = {
+  args: {
+    label: 'Small',
+    scenarioText: '<p>A brief scenario.</p>',
+    responses: SAMPLE_RESPONSES.slice(0, 3),
+    size: 'sm',
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+export const LargeSize: Story = {
+  args: {
+    label: 'Large',
+    scenarioText: '<p>A brief scenario.</p>',
+    responses: SAMPLE_RESPONSES.slice(0, 3),
+    size: 'lg',
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+};
+
+// =============================================================================
+// Controlled
+// =============================================================================
+
+export const ControlledExample: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | null>(null);
+    return (
+      <div className="w-[600px]">
+        <SituationalJudgement
+          label="Question 8"
+          scenarioText={SAMPLE_SCENARIO}
+          responses={SAMPLE_RESPONSES}
+          value={value}
+          onChange={setValue}
+        />
+        <p className="mt-3 text-sm text-[var(--muted-foreground)]">
+          Selected: {value ?? 'None'}
+        </p>
+      </div>
+    );
+  },
+};
+
+// =============================================================================
+// Six Responses
+// =============================================================================
+
+export const SixResponses: Story = {
+  args: {
+    label: 'Question 9',
+    scenarioText: '<p>A complex workplace scenario with multiple viable approaches.</p>',
+    responses: [
+      { value: 'a', text: 'Address the issue directly with the person involved.', ordinal: 0 },
+      { value: 'b', text: 'Consult with HR before taking any action.', ordinal: 1 },
+      { value: 'c', text: 'Document the incident and report to management.', ordinal: 2 },
+      { value: 'd', text: 'Seek advice from a trusted colleague.', ordinal: 3 },
+      { value: 'e', text: 'Wait to see if the situation resolves itself.', ordinal: 4 },
+      { value: 'f', text: 'Escalate immediately to senior leadership.', ordinal: 5 },
+    ],
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+  parameters: {
+    docs: {
+      description: { story: 'Maximum of 6 response options.' },
+    },
+  },
+};
+
+// =============================================================================
+// Rich Scenario HTML
+// =============================================================================
+
+export const RichScenarioHTML: Story = {
+  args: {
+    label: 'Question 10',
+    scenarioText: `
+      <p>During a team project, you discover that:</p>
+      <ul>
+        <li>A team member has been <strong>consistently missing deadlines</strong></li>
+        <li>Their work quality has <em>noticeably declined</em></li>
+        <li>Other team members are having to <strong>cover their tasks</strong></li>
+      </ul>
+      <p>The project deadline is in <strong>two weeks</strong> and the team is already behind schedule.</p>
+    `,
+    responses: [
+      { value: 'a', text: 'Have a private, supportive conversation with the team member.', ordinal: 0 },
+      { value: 'b', text: 'Redistribute the workload among remaining team members.', ordinal: 1 },
+      { value: 'c', text: 'Escalate to the project manager with documented concerns.', ordinal: 2 },
+    ],
+    collapsibleScenario: true,
+  },
+  decorators: [(Story) => <div className="w-[600px]"><Story /></div>],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Scenario HTML supports formatting: bold, italic, lists, paragraphs. Dangerous HTML (scripts, iframes) is automatically sanitised.',
+      },
+    },
+  },
+};
+
+// =============================================================================
+// Assessment Form
+// =============================================================================
+
+export const AssessmentForm: Story = {
+  render: () => {
+    const [answers, setAnswers] = useState<Record<string, string | null>>({
+      q1: null,
+      q2: null,
+    });
+    return (
+      <div className="w-[600px] rounded-lg border border-[var(--border)] bg-[var(--content-background)] p-6">
+        <h2 className="mb-6 text-xl font-bold text-[var(--content-foreground)]">
+          Situational Judgement Assessment
+        </h2>
+        <div className="flex flex-col gap-8">
+          <SituationalJudgement
+            label="Question 1 of 2"
+            description="Select the most appropriate response."
+            scenarioText="<p>A customer calls to complain about a <strong>delayed delivery</strong>. They are upset and demanding an immediate resolution.</p>"
+            responses={[
+              { value: 'a', text: 'Apologise sincerely and offer a refund or replacement.', ordinal: 0 },
+              { value: 'b', text: 'Explain the delivery policy and ask them to wait.', ordinal: 1 },
+              { value: 'c', text: 'Transfer the call to a supervisor.', ordinal: 2 },
+            ]}
+            value={answers.q1}
+            onChange={(v) => setAnswers((a) => ({ ...a, q1: v }))}
+            isRequired
+          />
+          <hr className="border-[var(--border)]" />
+          <SituationalJudgement
+            label="Question 2 of 2"
+            description="Select the most appropriate response."
+            scenarioText="<p>You notice a <em>security vulnerability</em> in the company's customer-facing application during routine testing.</p>"
+            responses={[
+              { value: 'a', text: 'Report it immediately to the security team.', ordinal: 0 },
+              { value: 'b', text: 'Try to fix it yourself before reporting.', ordinal: 1 },
+              { value: 'c', text: 'Document it and include in the next sprint.', ordinal: 2 },
+              { value: 'd', text: 'Verify the severity and then escalate accordingly.', ordinal: 3 },
+            ]}
+            value={answers.q2}
+            onChange={(v) => setAnswers((a) => ({ ...a, q2: v }))}
+            isRequired
+            collapsibleScenario
+          />
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Full assessment form with multiple SJT questions.',
+      },
+    },
+  },
+};