https://github.com/haysclark/gatsby-starter-ts-storybook

https://github.com/haysclark/gatsby-starter-ts-storybook

Last synced: 14 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/haysclark/gatsby-starter-ts-storybook
• Owner: haysclark
• License: mit
• Created: 2022-06-01T20:45:40.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-06-01T22:38:37.000Z (over 2 years ago)
• Last Synced: 2024-10-27T23:36:07.230Z (2 months ago)
• Language: TypeScript
• Size: 128 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  






Non-opinionated TypeScript starter for Gatsby

A TypeScript starter for Gatsby. No plugins and styling. Exactly the necessary to start.







  


  

  

    

  





  Created by João Pedro with the help of many wonderful contributors.






## Features

- ⚡️ Gatsby 4

- ⚛️ React 18

- ⛑ TypeScript

- 📖 Storybook 6.x for React

- 🐐 Tests — Jest and Testing Library out of the box

- 📏 ESLint — To find and fix problems in your code

- 💖 Prettier — Code Formatter for consistent style

- 🐶 Husky — For running scripts before committing

- 📄 Commitizen — To define a standard way of committing rules

- 🚓 Commitlint — To make sure your commit messages follow the convention

- 🖌 Renovate — To keep your dependencies up to date

- 🚫 lint-staged — Run ESLint and Prettier against staged Git files

- 👷 PR Workflow — Run Type Check & Linters on Pull Requests

- ⚙️ EditorConfig - Consistent coding styles across editors and IDEs

- 🗂 Path Mapping — Import components or images using the `@` prefix

## Quick Start

The best way to start with this template is using the [Gatsby CLI](https://www.gatsbyjs.com/docs/reference/gatsby-cli/).

```

npx gatsby new starter-ts https://github.com/jpedroschmitz/gatsby-starter-ts

```

### Development

To start the project locally, run:

```bash

yarn start

```

Open `http://localhost:8000` with your browser to see the result.

## Documentation

### Requirements

- Node.js >= 14.17

- Yarn 1 (Classic)

### Directory Structure

- [`__helpers__`](./__helpers__/) — Helpers files for testing configuration.


- [`__mocks__`](./__mocks__/) — Mocks for testing.


- [`.github`](.github) — GitHub configuration including the CI workflow.


- [`.husky`](.husky) — Husky configuration and hooks.


- [`src`](./src) — Application source code, including pages, components, styles.

### Scripts

- `yarn start` — Starts the application in development mode at `http://localhost:8000`.

- `yarn build` — Compile your application and make it ready for deployment.

- `yarn serve` — Serve the production build of your site

- `yarn clean` — Wipe out the cache (`.cache` folder).

- `yarn type-check` — Validate code using TypeScript compiler.

- `yarn lint` — Runs ESLint for all files in the `src` directory.

- `yarn format` — Runs Prettier for all files in the `src` directory.

- `yarn commit` — Run commitizen. Alternative to `git commit`.

- `yarn test` — Run tests.

### Path Mapping

TypeScript are pre-configured with custom path mappings. To import components or files, use the `@` prefix.

```tsx

import { Button } from '@/components/Button';

// To import images or other files from the static folder

import avatar from '@/static/avatar.png';

```

### Switch to npm

This starter uses Yarn 1 (Classic) by default, but this choice is yours. If you'd like to switch to npm, delete the `yarn.lock` file, install the dependencies with `npm i`, change the CI workflow, and Husky Git hooks to use npm commands.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information.