Bayon Snippets (Visual Studio Code)

Snippets

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

Imports

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>
  );
};

Typescript

// cbc  ↵
import React from 'react';

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

export type TFileNameProps = {
  $cursor1;
};

export const FileName = (props: TFileNameProps) => {
  return (
    <Styles.Container>
      <div>$cursor2</div>
    </Styles.Container>
  );
};

Create Hook

• cbh || bh - Create Bayon Hook

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

  return { $cursor };
};

Typescript

// cbh  ↵
export type TFileNameArgs = {
  $cursor1;
};

export const FileName = (args: TFileNameArgs) => {
  const $cursor2 = () => {};

  return { $cursor3 };
};

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} />);
};

Typescript

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

import { FileName, type FileNameProps } from './FileName';

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

const createComponent = (props: Partial<FileNameProps> = {}) => {
  const defaultProps: FileNameProps = {
    ...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('$cursor1', () => {
    const { result } = createHook();

    act(() => {
      result.current.$cursor2();
    });

    expect($cursor3).$cursor4();
  });
});

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

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

Typescript

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

describe('FileName hook', () => {
  it('$cursor1', () => {
    const { result } = createHook();

    act(() => {
      result.current.$cursor2();
    });

    expect($cursor3).$cursor4();
  });
});

const createHook = (args: Partial<TFileNameArgs> = {}) => {
  const defaultArgs: TFileNameArgs = {
    ...args,
  };

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

Create Util Test

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

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

describe('FileName util', () => {
  it('should $cursor1', () => {
    expect(FileName($cursor2)).toEqual($cursor3);
  });
});