README.md

Bayon Snippets (Visual Studio Code)

Snippets

• Imports
• Create Component
• Create Hook
• Create Styles
• Create Component Test
• Create Util Test
• Create Hook Test

Imports

prefix	body	description
iba	import { } from '@bayon/analytics';	import @bayon/analytics
ibc	import { } from '@bayon/commons';	import @bayon/commons
ibd	import { } from '@bayon/date';	import @bayon/date
ibfe	import { } from '@bayon/fetch';	import @bayon/fetch
ibf	import { } from '@bayon/form';	import @bayon/form
ibi	import { } from '@bayon/i18n';	import @bayon/i18n
ibs	import { } from '@bayon/svg-icons';	import @bayon/svg-icons
ibt	import { } from '@bayon/testing';	import @bayon/testing
ipt	import PropTypes from 'prop-types';	import prop-types

Create Component

• cbc || bc - Create Bayon Component

// cbc  ↵
import React from 'react';

import * as Styles from './FileName.styles';

export const FileName = () => {
  return (
    <Styles.Container>
      <div>"cursor"</div>
    </Styles.Container>
  );
};

Create Hook

• cbh || bh - Create Bayon Hook

// cbh  ↵
export const FileName = () => {
  const $cursor = () => {

  }

  return { $cursor }
};

Create Styles

• cbs || bs - Create Bayon Styles

// cbs  ↵
import styled from 'styled-components';

export const Container = styled('div')(() => ({
  display: 'flex',
  boxSizing: 'border-box',
  "cursor"
}));

Create Component Test

• cbct || cbt || bt - Create Bayon Component Test

// cbct  ↵
import React from 'react';
import { render, screen } from '@bayon/testing';

import { FileName } from './FileName';

describe('<FileName />', () => {
  it('should render component', () => {
    createComponent();
    expect(screen.getByText($cursor)).toBeInTheDocument();
  });
});

const createComponent = (props = {}) => {
  const defaultProps = {
    ...props,
  };

  return render(
    <FileName {...defaultProps} />
  );
};

Create Hook Test

• cbht || bht || bh - Create Bayon Hook Test

// cbht  ↵
import { renderHook, act } from '@bayon/testing';
import { FileName } from './FileName';

describe('FileName hook', () => {
  it('"cursor 1"', () => {
    const { result } = createHook();

    act(() => {
      result.current."cursor 2"();
    });

    expect("cursor 3")."cursor 4"();
  });
});

const createHook = (props = {}) => {
  const defaultProps = {
    ...props,
  };

  return renderHook(() => useFileName(defaultProps));
};

Create Util Test

• cbut || but || bu - Create Bayon Util Test

// cbut  ↵
import { FileName } from './FileName';

describe('FileName util', () => {
  it('should "cursor 1"', () => {
    expect(FileName("cursor 2")).toEqual("cursor 3");
  });
});