Skip to content

Commit 3137154

Browse files
wkylinwkylin
committed
feat: interactive book
1 parent 813d7f0 commit 3137154

5 files changed

Lines changed: 1262 additions & 0 deletions

File tree

‎src/components/stateless/InteractiveBook/InteractiveBook.stories.tsx‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
import type { Meta, StoryObj } from '@storybook/react-vite'
2+
import InteractiveBook, { InteractiveBookProps } from './index.tsx'
3+
4+
// Sample book pages content
5+
const bookPages = [
6+
{
7+
pageNumber: 1,
8+
title: 'Chapter 1: The Beginning',
9+
content: (
10+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
11+
<p>
12+
"The most important characteristics of good design are discoverability and understanding. Discoverability: Is
13+
it possible to even figure out what actions are possible?"
14+
</p>
15+
<p>
16+
"Understanding: What does it all mean? How is the product supposed to be used? What do all the different
17+
controls and settings mean?"
18+
</p>
19+
<p>
20+
"Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs
21+
so well that the design is invisible."
22+
</p>
23+
</div>
24+
),
25+
},
26+
{
27+
pageNumber: 2,
28+
title: 'Chapter 2: The Psychology',
29+
content: (
30+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
31+
<p>
32+
"When people try to use something, they first form a goal, then they plan an action, then they execute the
33+
action. Then they perceive what happened, interpret the result, and compare it with the goal."
34+
</p>
35+
<p>"This is the seven stages of action. It forms the core of human-computer interaction psychology."</p>
36+
<p>
37+
"The gulf of execution is the gap between the user's intentions and the allowable actions. The gulf of
38+
evaluation is the gap between the system's representation and the user's expectations."
39+
</p>
40+
</div>
41+
),
42+
},
43+
{
44+
pageNumber: 3,
45+
title: 'Chapter 3: Knowledge',
46+
content: (
47+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
48+
<p>
49+
"Knowledge is in the head and in the world. Precise behavior can emerge from imprecise knowledge for four
50+
reasons:"
51+
</p>
52+
<ul
53+
style={{ listStyleType: 'disc', paddingLeft: '20px', display: 'flex', flexDirection: 'column', gap: '8px' }}
54+
>
55+
<li>Information is in the world</li>
56+
<li>Great precision is not required</li>
57+
<li>Natural constraints are present</li>
58+
<li>Cultural constraints are present</li>
59+
</ul>
60+
<p>
61+
"The principle of mapping: The relationship between controls and their effects should be clear and
62+
consistent."
63+
</p>
64+
</div>
65+
),
66+
},
67+
{
68+
pageNumber: 4,
69+
title: 'Chapter 4: Constraints',
70+
content: (
71+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
72+
<p>
73+
"Constraint: specific limits on possible actions. Constraints guide our behavior by limiting the possible
74+
options."
75+
</p>
76+
<p>
77+
"Physical constraints rely on the properties of the physical world for their operation. Semantic constraints
78+
rely on the meaning of the situation."
79+
</p>
80+
<p>
81+
"Cultural constraints are learned conventions that constrain our behavior. Logical constraints rely on the
82+
reasoning that certain actions are possible."
83+
</p>
84+
</div>
85+
),
86+
},
87+
{
88+
pageNumber: 5,
89+
title: 'Chapter 5: Design Principles',
90+
content: (
91+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
92+
<p>"Visibility: The more visible functions are, the more likely users will be able to know what to do next."</p>
93+
<p>"Feedback: Feedback must be immediate, informative, and clear. It should also be as obvious as possible."</p>
94+
<p>
95+
"Affordance: The perceived and actual properties of the thing that determine how the thing could possibly be
96+
used."
97+
</p>
98+
</div>
99+
),
100+
backContent: (
101+
<div
102+
style={{
103+
display: 'flex',
104+
flexDirection: 'column',
105+
alignItems: 'center',
106+
justifyContent: 'center',
107+
height: '100%',
108+
textAlign: 'center',
109+
}}
110+
>
111+
<h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '16px', color: '#6b7280' }}>
112+
Design Principles
113+
</h3>
114+
<p style={{ fontStyle: 'italic', color: '#9ca3af' }}>Continued on next page</p>
115+
</div>
116+
),
117+
},
118+
{
119+
pageNumber: 6,
120+
title: 'Chapter 6: Error Prevention',
121+
content: (
122+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
123+
<p>
124+
"Error prevention is the best way to deal with errors. If you can prevent errors from happening, you don't
125+
need to worry about error messages."
126+
</p>
127+
<p>"Four types of errors: slips, mistakes, errors of omission, and errors of commission."</p>
128+
<p>
129+
"Slips are unconscious errors where the user intends to do one thing but does another. Mistakes are conscious
130+
errors where the user has the wrong goal."
131+
</p>
132+
</div>
133+
),
134+
},
135+
{
136+
pageNumber: 7,
137+
title: 'Chapter 7: Human-Centered Design',
138+
content: (
139+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
140+
<p>
141+
"Human-centered design is an approach to problem-solving that starts with people and ends with innovative
142+
solutions that are tailor-made to fit their needs."
143+
</p>
144+
<p>"The process involves three phases: inspiration, ideation, and implementation."</p>
145+
<p>
146+
"Empathy is at the heart of human-centered design. Understanding the people you're designing for is crucial to
147+
creating meaningful solutions."
148+
</p>
149+
</div>
150+
),
151+
backContent: (
152+
<div
153+
style={{
154+
display: 'flex',
155+
flexDirection: 'column',
156+
alignItems: 'center',
157+
justifyContent: 'center',
158+
height: '100%',
159+
textAlign: 'center',
160+
}}
161+
>
162+
<p style={{ fontStyle: 'italic', color: '#9ca3af' }}>The journey of design excellence continues...</p>
163+
</div>
164+
),
165+
},
166+
{
167+
pageNumber: 8,
168+
title: 'Conclusion',
169+
content: (
170+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
171+
<p>"Design is not just what it looks like and feels like. Design is how it works."</p>
172+
<p>
173+
"The best designs are those that are invisible to the user. They work so well that the user doesn't notice the
174+
design - they just notice that it works."
175+
</p>
176+
<p style={{ fontStyle: 'italic', textAlign: 'center', marginTop: '24px', color: '#6b7280' }}>— Steve Jobs</p>
177+
</div>
178+
),
179+
backContent: (
180+
<div
181+
style={{
182+
display: 'flex',
183+
flexDirection: 'column',
184+
alignItems: 'center',
185+
justifyContent: 'center',
186+
height: '100%',
187+
textAlign: 'center',
188+
}}
189+
>
190+
<p style={{ fontStyle: 'italic', color: '#9ca3af' }}>End of Book</p>
191+
</div>
192+
),
193+
},
194+
]
195+
196+
const meta: Meta<typeof InteractiveBook> = {
197+
title: 'Stateless/InteractiveBook',
198+
component: InteractiveBook,
199+
argTypes: {
200+
bookTitle: { control: 'text' },
201+
bookAuthor: { control: 'text' },
202+
width: { control: 'number' },
203+
height: { control: 'number' },
204+
},
205+
parameters: {
206+
layout: 'centered',
207+
},
208+
}
209+
210+
export default meta
211+
type Story = StoryObj<typeof InteractiveBook>
212+
213+
export const Default: Story = {
214+
render: (args: InteractiveBookProps) => (
215+
<div className="flex h-[800px] w-full items-center justify-center bg-neutral-100 p-10">
216+
<InteractiveBook {...args} />
217+
</div>
218+
),
219+
args: {
220+
coverImage: 'https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=800',
221+
bookTitle: 'The Design of Everyday Things',
222+
bookAuthor: 'Don Norman',
223+
pages: bookPages,
224+
width: 350,
225+
height: 500,
226+
},
227+
}

0 commit comments

Comments
 (0)