All files / web/src/arcade-games/know-your-world/components SimpleLetterKeyboard.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type { Meta, StoryObj } from '@storybook/react'
import { SimpleLetterKeyboard } from './SimpleLetterKeyboard'

const meta: Meta<typeof SimpleLetterKeyboard> = {
  title: 'Arcade/KnowYourWorld/SimpleLetterKeyboard',
  component: SimpleLetterKeyboard,
  parameters: {
    layout: 'centered',
  },
  decorators: [
    (Story) => (
      <div style={{ width: '100%', maxWidth: '500px', padding: '20px' }}>
        <Story />
      </div>
    ),
  ],
}

export default meta
type Story = StoryObj<typeof SimpleLetterKeyboard>

// Basic stories - use forceShow to display on desktop
export const Uppercase: Story = {
  args: {
    uppercase: true,
    isDark: false,
    forceShow: true,
    onKeyPress: (letter) => console.log('Pressed:', letter),
  },
}

export const Lowercase: Story = {
  args: {
    uppercase: false,
    isDark: false,
    forceShow: true,
    onKeyPress: (letter) => console.log('Pressed:', letter),
  },
}

export const DarkModeUppercase: Story = {
  args: {
    uppercase: true,
    isDark: true,
    forceShow: true,
    onKeyPress: (letter) => console.log('Pressed:', letter),
  },
  decorators: [
    (Story) => (
      <div
        style={{
          backgroundColor: '#1e293b',
          padding: '40px',
          borderRadius: '12px',
          width: '100%',
          maxWidth: '500px',
        }}
      >
        <Story />
      </div>
    ),
  ],
}

export const DarkModeLowercase: Story = {
  args: {
    uppercase: false,
    isDark: true,
    forceShow: true,
    onKeyPress: (letter) => console.log('Pressed:', letter),
  },
  decorators: [
    (Story) => (
      <div
        style={{
          backgroundColor: '#1e293b',
          padding: '40px',
          borderRadius: '12px',
          width: '100%',
          maxWidth: '500px',
        }}
      >
        <Story />
      </div>
    ),
  ],
}