All files / web/src/app/create/worksheets/components/config-panel ToggleOption.stories.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import { ToggleOption } from './ToggleOption'

const meta = {
  title: 'Worksheets/Config Panel/ToggleOption',
  component: ToggleOption,
  parameters: {
    layout: 'padded',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof ToggleOption>

export default meta
type Story = StoryObj<typeof meta>

// Wrapper to handle state
function ToggleWrapper(args: React.ComponentProps<typeof ToggleOption>) {
  const [checked, setChecked] = useState(args.checked)
  return <ToggleOption {...args} checked={checked} onChange={setChecked} />
}

export const UncheckedLight: Story = {
  render: (args) => <ToggleWrapper {...args} />,
  args: {
    checked: false,
    label: 'Progressive Difficulty',
    description: 'Problems gradually increase in complexity throughout the worksheet',
    isDark: false,
  },
}

export const CheckedLight: Story = {
  render: (args) => <ToggleWrapper {...args} />,
  args: {
    checked: true,
    label: 'Progressive Difficulty',
    description: 'Problems gradually increase in complexity throughout the worksheet',
    isDark: false,
  },
}

export const UncheckedDark: Story = {
  render: (args) => <ToggleWrapper {...args} />,
  args: {
    checked: false,
    label: 'Progressive Difficulty',
    description: 'Problems gradually increase in complexity throughout the worksheet',
    isDark: true,
  },
  parameters: {
    backgrounds: { default: 'dark' },
  },
}

export const CheckedDark: Story = {
  render: (args) => <ToggleWrapper {...args} />,
  args: {
    checked: true,
    label: 'Progressive Difficulty',
    description: 'Problems gradually increase in complexity throughout the worksheet',
    isDark: true,
  },
  parameters: {
    backgrounds: { default: 'dark' },
  },
}

export const WithChildren: Story = {
  render: (args) => (
    <ToggleWrapper {...args}>
      <div
        style={{
          padding: '12px',
          borderTop: '1px solid #e5e7eb',
          background: '#f9fafb',
        }}
      >
        <p style={{ margin: 0, fontSize: '11px', color: '#6b7280' }}>
          Additional content can be displayed when this option is toggled on.
        </p>
      </div>
    </ToggleWrapper>
  ),
  args: {
    checked: true,
    label: 'Show Answer Key',
    description: 'Include an answer key at the end of the worksheet',
    isDark: false,
  },
}

export const LongDescription: Story = {
  render: (args) => <ToggleWrapper {...args} />,
  args: {
    checked: false,
    label: 'Include Ten-Frame Diagrams',
    description:
      'Add visual ten-frame representations to help students visualize numbers and develop number sense. This is particularly helpful for early learners who are still developing their understanding of place value and number composition.',
    isDark: false,
  },
}

export const InteractiveDemo: Story = {
  args: {
    checked: false,
    onChange: () => {},
    label: 'Interactive Demo',
    description: '',
  },
  render: () => {
    const [options, setOptions] = useState({
      progressive: false,
      answerKey: true,
      tenFrames: false,
      carryBoxes: true,
    })

    return (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '12px',
          maxWidth: '400px',
        }}
      >
        <h3 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>Worksheet Options</h3>
        <ToggleOption
          checked={options.progressive}
          onChange={(checked) => setOptions({ ...options, progressive: checked })}
          label="Progressive Difficulty"
          description="Problems gradually increase in complexity"
        />
        <ToggleOption
          checked={options.answerKey}
          onChange={(checked) => setOptions({ ...options, answerKey: checked })}
          label="Include Answer Key"
          description="Add an answer key at the end"
        />
        <ToggleOption
          checked={options.tenFrames}
          onChange={(checked) => setOptions({ ...options, tenFrames: checked })}
          label="Ten-Frame Diagrams"
          description="Show visual representations for numbers"
        />
        <ToggleOption
          checked={options.carryBoxes}
          onChange={(checked) => setOptions({ ...options, carryBoxes: checked })}
          label="Carry Notation Boxes"
          description="Display boxes above columns for carrying"
        />
        <div
          style={{
            marginTop: '12px',
            padding: '12px',
            background: '#f3f4f6',
            borderRadius: '6px',
            fontSize: '12px',
          }}
        >
          <strong>Selected:</strong>
          <ul style={{ margin: '8px 0 0 0', paddingLeft: '20px' }}>
            {Object.entries(options).map(
              ([key, value]) => value && <li key={key}>{key.replace(/([A-Z])/g, ' $1')}</li>
            )}
          </ul>
        </div>
      </div>
    )
  },
}