JoshK2

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { InputTextarea } from '@bit/primefaces.primereact.inputtextarea';
import { Button as GrommetButton } from '@bit/grommet.grommet.button';
import { Button as PrimeButton } from '@bit/primefaces.primereact.button';
import { Add } from '@bit/grommet.grommet-icons.add';
import PrimereactStyle from '@bit/primefaces.primereact.internal.stylelinks';

/** 
 * @description AddItem is two buttons and textarea to write a new item, one button to add item and another one to remove all items. 

JoshK2

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from '@bit/semantic-org.semantic-ui-react.icon';

/** 
 * @description Item inside the list, with remove icon. 
 * @example
 * <TodoItem 
 *  text='Todo Item text example'
 *  index='1' 

JoshK2

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import List from '@bit/semantic-org.semantic-ui-react.list';
import uniqueId from '@bit/lodash.lodash.unique-id';
import SemanticUiStyle from '@bit/semantic-org.semantic-ui-react.internal.style-links';

import TodoItem from '../TodoItem';
import AddItem from '../AddItem';

const containerStyle = {

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';
 *

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

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

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

.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 './button.scss'

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

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;