TurtleWolfe / disBook

StoryBook demo
0 stars 0 forks source link

dicey action #1

Open TurtleWolfe opened 4 years ago

TurtleWolfe commented 4 years ago

Screenshot from 2020-05-26 15-55-09 I forked the Button story and customized the action.. so next I customize the Button to make a dice. I expected it to still show the same action as before.. but now it shows none. I was going to work on learning how to make the action panel to show it calling a random function or what it rolled.. but I'm more confused why it's showing nothing. Is there a way I should be importing the function into StoryBook.. or since they are both called on click they could be conflicting to show nothing? Screenshot from 2020-05-26 15-55-54

MyDice.js

// import React from 'react';
// // import PropTypes from 'prop-types';
// const MyDice = ({ onClick }) => (
//   <button onClick={onClick}>dis My Dice</button>
// );

// export default MyDice; 

import React from 'react';

// const MyDice = ({ onClick }) => (

class MyDice extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 7,
    };
  }

  generateRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  render() {
    return (
      <button
        className="myDice"
        onClick={
          () => this.setState(
            { value: this.generateRandom(1, 6) }
          )
        }>
        {this.state.value}
      </button>
    );
  }
}

export default MyDice;

MyDice.stories.js

import React from 'react';
import MyDice from '../MyDice/MyDice';
import imageUrl from '../../shared/images/logo.svg';
import { action } from '@storybook/addon-actions';

export default {
  title: 'MyDice',
  component: MyDice,
  parameters: {
    assets: [
      imageUrl, // link to a file imported
      'https://via.placeholder.com/300/09f/fff.png', // link to an external image
      'https://www.example.com', // link to a webpage
      'https://www.example.com?id={id}', // link to a webpage with the current story's id in the url
    ],
  },
};

export const Text = () => <MyDice onClick={action('dis clicked My Text Dice')}>Hello MyDice</MyDice>;

export const Emoji = () => (
  <MyDice onClick={action('dis clicked.. but no emojis, so sad face')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </MyDice>
);

https://turtlewolf.github.io/disBook/?path=/story/mydice--text

TurtleWolfe commented 4 years ago

I thought it would be a good review to do the React tic tac toe tutorial in StoryBook.. Then I did it again but stopped at where it's adding the onClick alert to dissect the basic issue at its core.. I'm trying to get the action panel to show the results of the onClick?

DiceyActions