typescript-template

Getting Started

This is a template for creating a new React+TypeScript component npm package. It includes Jest for testing, Prettier for formatting, Storybook for development and TSLint for linting. To create a new pacakage using this template:

Note: These steps will assume your new package is named my-package.

1. Open a terminal at your local projects directory
2. git clone https://git.transim.com/core/npm/react-component-template.git my-package
3. cd my-package
4. rd /s /q .git
5. git init

then, To add your package to the GitLab npm project:

1. Create a new project on GitLab in the npm group named my-package
2. git remote add origin https://git.transim.com/core/npm/my-package.git
3. git add .
4. git commit -m "Initial commit"
5. git push -u origin master

Structure

• TypeScript files for your component should be placed in the /src directoy
• Tests should be written in TypeScript and placed next to the component with the file ending in .test.tsx, .test.ts, .spec.tsx or .spec.ts.
• package.json contains all the relavent information about your package. The name property is particularly important and will be used by npm to refer to your pacakage.
• Additional dependencies can be added using yarn or npm

  yarn install [-D] <packages>

  Note: dependencies that are needed at runtime should be installed without a flag. Other dependencies needed during development of the module, such as TypeScript typings, should be installed with the -D flag. Avoid using global installed npm packages as they likely will not exists on someone else's machine.

Building and Testing

Your module will be authored in TypeScript, but will need to be transpiled in to JavaScript to be useful to consumers. To do this:

• Run yarn to ensure all required dependencies are installed
• Run yarn build

Testing is similar

• Run yarn
• Run yarn test

Development

• Run yarn
• Run yarn start

This will start a development server with hot reloadning. You can now open a browser and navigate to http://localhost:9001 to view the storybook.