JoshK2

import React from 'react';
import { action } from '@storybook/addon-actions';
import Button from './';

export default {
    title: 'Button',
};

export const text = () => <Button text="Hello Button" onClick={action('clicked')} />;

JoshK2

{
  "name": "my-own-components-library",
  "version": "0.1.0",
  "private": false,
  "dependencies": {},
  "peerDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "devDependencies": {

JoshK2

import React from 'react';
import { action } from '@storybook/addon-actions';
import Button from '../src/components/Button';

export default {
    title: 'Button',
};

export const text = () => <Button text="Hello Button" onClick={action('clicked')} />;

JoshK2

button {
    width: auto;
    height: auto;
    padding: 4px 8px;
    background-color: white;
    border: 2px solid #f9a2b1;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
    color: black;

JoshK2

import React, { Component } from 'react'
import './button.scss'

type State = {}
type Props = {
    text?: string,
    disable?: boolean,
    className?: string,
    onClick: Function
}

JoshK2

.lds-circle {
    display: inline-block;
    margin: 8px;
    border-radius: 50%;
    animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
@keyframes lds-circle {
    0%, 100% {
      animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
    }

JoshK2

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './style.css'

export default class Circle extends Component {
    render() {
        const { color, size } = this.props;
        return <div className="lds-circle" style={{ background: color, width: size, height: size }}></div>
    }
}

JoshK2

import React, { Component } from 'react';
import Facebook from '@bit/joshk.react-spinners-css.facebook';

class App extends Component {
  state = {
    data: []
  }

  componentDidMount(){
    setTimeout(() => { this.setState({ data: ['Mercedes', 'Jaguar', 'Volvo', 'BMW'] }) }, 5000);

JoshK2

/**
 * @description
 * check winner horizontal, vertical and diagonal
 * @param {Array.<string[]>} matrix 2d array with X and O 
 * @param {number} rowsNum number of rows
 * @param {number} colsNum number of columns
 * @param {number} numToWin the number of matching to win
 * @param {number} lastRow the row number of the square player click
 * @param {number} lastCol the column number of the square player click
 * @returns {string} return the winner, X or O or '' if no one win. 

JoshK2

/**
 * @description
 * check if 2d array have an empty cell
 * @param {{Array.<string[]>}} matrix 2d array
 * @param {number} rowsNum number of rows
 * @param {number} colsNum number of columns
 * @returns {boolean} return true if empty cell was found, and false if not.
 * @example
 * import haveEmptyCell from '@bit/joshk.tic-tac-toe-game.utils.have-empty-cell';
 *