-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
277 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,188 @@ | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| const styles = { | ||
| container: { | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: '20px', | ||
| alignItems: 'center', | ||
| width: '100%', | ||
| maxWidth: '600px', | ||
| margin: '0 auto', | ||
| }, | ||
| inputGroup: { | ||
| display: 'flex', | ||
| gap: '10px', | ||
| }, | ||
| smallInput: { | ||
| width: '150px', | ||
| padding: '5px', | ||
| }, | ||
| button: { | ||
| padding: '5px 10px', | ||
| cursor: 'pointer', | ||
| }, | ||
| largeTextArea: { | ||
| width: '100%', | ||
| height: '150px', | ||
| padding: '10px', | ||
| resize: 'vertical', | ||
| }, | ||
| card: { | ||
| width: '100%', | ||
| maxWidth: '300px', | ||
| height: '200px', | ||
| perspective: '1000px', | ||
| position: 'relative', | ||
| cursor: 'pointer', | ||
| transition: 'transform 0.6s', | ||
| transformStyle: 'preserve-3d', | ||
| }, | ||
| cardSide: { | ||
| position: 'absolute', | ||
| width: '100%', | ||
| padding: '16px', | ||
| height: '100%', | ||
| backfaceVisibility: 'hidden', | ||
| borderRadius: '8px', | ||
| boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| flexDirection: 'column', | ||
| transition: 'opacity 0.3s ease', | ||
| }, | ||
| cardFront: { | ||
| backgroundColor: '#f1f1f1', | ||
| }, | ||
| cardBack: { | ||
| backgroundColor: '#4CAF50', | ||
| transform: 'rotateY(180deg)', | ||
| }, | ||
| } as const; | ||
|
|
||
| const FlippableCardComponent = () => { | ||
| const [isFlipped, setIsFlipped] = useState(false); | ||
| const [startX, setStartX] = useState(0); | ||
|
|
||
| const handleMouseDown = (event: MouseEvent) => { | ||
| setStartX(event.clientX); | ||
| }; | ||
|
|
||
| const handleTouchStart = (event: TouchEvent) => { | ||
| setStartX(event.touches[0].clientX); | ||
| }; | ||
|
|
||
| const handleMouseUp = (event: MouseEvent) => { | ||
| if (event.clientX > startX) { | ||
| setIsFlipped(!isFlipped); | ||
| } | ||
| }; | ||
|
|
||
| const handleTouchEnd = (event: TouchEvent) => { | ||
| const endX = event.changedTouches[0].clientX; | ||
| if (endX > startX) { | ||
| setIsFlipped(!isFlipped); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div style={styles.container}> | ||
| {/* Small Input and Button */} | ||
| <div style={styles.inputGroup}> | ||
| <input type="text" placeholder="Type here..." style={styles.smallInput} /> | ||
| <button style={styles.button}>Submit</button> | ||
| </div> | ||
|
|
||
| {/* Large Text Area */} | ||
| <textarea placeholder="Enter more details here..." style={styles.largeTextArea}></textarea> | ||
|
|
||
| {/* Flippable Card */} | ||
| <div | ||
| aria-label="card" | ||
| style={{ | ||
| ...styles.card, | ||
| transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)', | ||
| }} | ||
| onMouseDown={handleMouseDown} | ||
| onMouseUp={handleMouseUp} | ||
| onTouchStart={handleTouchStart} | ||
| onTouchEnd={handleTouchEnd} | ||
| > | ||
| {/* Front Side */} | ||
| <div | ||
| style={{ | ||
| ...styles.cardSide, | ||
| ...styles.cardFront, | ||
| opacity: isFlipped ? 0 : 1, | ||
| zIndex: isFlipped ? 0 : 1, | ||
| }} | ||
| > | ||
| <h3>Front Side</h3> | ||
| <p>This is the front side of the card. Drag to flip!</p> | ||
| </div> | ||
|
|
||
| {/* Back Side */} | ||
| <div | ||
| style={{ | ||
| ...styles.cardSide, | ||
| ...styles.cardBack, | ||
| opacity: isFlipped ? 1 : 0, | ||
| zIndex: isFlipped ? 1 : 0, | ||
| }} | ||
| > | ||
| <h3>Back Side</h3> | ||
| <p>This is the back side of the card. Drag to flip back!</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const meta = { | ||
| render: FlippableCardComponent, | ||
| } satisfies Meta; | ||
|
|
||
| export default meta; | ||
|
|
||
| export const DemoModeHand = { | ||
| play: async (context) => { | ||
| console.log('context do sucesso', { context: context.userEvent }); | ||
| const { userEvent, canvas } = context; | ||
| const firstInput = canvas.getByPlaceholderText('Type here...'); | ||
| // await userEvent.click(firstInput); | ||
| const submitButton = canvas.getByRole('button', { name: /Submit/i }); | ||
| await userEvent.type(firstInput, 'Hello world'); | ||
| await userEvent.click(submitButton); | ||
| const secondInput = canvas.getByPlaceholderText('Enter more details here...'); | ||
| await userEvent.type( | ||
| secondInput, | ||
| 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis augue non nulla tincidunt condimentum sit amet sit amet mauris. Nulla semper nibh a lacinia vehicula.' | ||
| ); | ||
|
|
||
| const card = canvas.getByLabelText('card'); | ||
| await userEvent.pointer([ | ||
| { | ||
| target: card, | ||
| keys: '[TouchA>]', | ||
| coords: { x: 50, y: 50 }, | ||
| }, | ||
| { | ||
| target: card, | ||
| keys: '[TouchA]', | ||
| coords: { x: 80, y: 50 }, | ||
| }, | ||
| ]); | ||
| }, | ||
| } satisfies StoryObj<typeof meta>; | ||
|
|
||
| export const DemoModeCircle = { | ||
| ...DemoModeHand, | ||
| parameters: { | ||
| test: { | ||
| cursorStyle: 'circle', | ||
| }, | ||
| }, | ||
| }; |
Oops, something went wrong.