Reorganize source tree

[kgryte]

This PR reorganizes the source tree by splitting functionality into separate files and adding source code documentation.

Note: this PR builds on #50 .

[saulshanabrook]

Can you run prettier on this?

[saulshanabrook]

(for context we had a long conversation a while back about adopting prettier in JL core, and since we decided to go for it I am inclined to also adopt it for all these extensions https://github.com/jupyterlab/jupyterlab/pull/4090)

[saulshanabrook]

Also for the React components, I am looking up standard practices now:

react-redux-typescript-guide:

type Props = {
  label: string;
  count: number;
  onIncrement: () => void;
};

export const FCCounter: React.FC<Props> = props => {
  const { label, count, onIncrement } = props;

  const handleIncrement = () => {
    onIncrement();
  };

  return (
    <div>
      <span>
        {label}: {count}
      </span>
      <button type="button" onClick={handleIncrement}>
        {`Increment`}
      </button>
    </div>
  );
};

Typescript docs:

export interface HelloProps { compiler: string; framework: string; }

export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;

Typescript Deep Dive:

type Props = {
  foo: string;
}
const MyComponent: React.FunctionComponent<Props> = (props) => {
    return <span>{props.foo}</span>
}

I like the Typescript docs example the best, since in it you don't manually annotate the function, which looks a bit cleaner to me. I also like just naming the function the name of the component and exporting it directly, instead of naming it render, which adds some more lines to re-export it under a new name.

[kgryte]

@saulshanabrook Updated the React components.

[kgryte]

@saulshanabrook Added prettier configuration and setup as done in the main JupyterLab repository. All files should be updated.

[saulshanabrook]

Sweet, this looks good.