https://github.com/fitfab/fitfab.ui

New UI setup with TurboRepo and Tailwind CSS
https://github.com/fitfab/fitfab.ui

Last synced: 4 days ago
JSON representation

New UI setup with TurboRepo and Tailwind CSS

• Host: GitHub
• URL: https://github.com/fitfab/fitfab.ui
• Owner: fitfab
• Created: 2022-04-30T21:12:32.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-03T13:38:57.000Z (over 2 years ago)
• Last Synced: 2024-10-11T12:14:35.173Z (27 days ago)
• Language: TypeScript
• Size: 59.6 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Fitfab UI

This is based on the official React design system starter powered by Turborepo.

## What's inside?

This Turborepo includes the following packages and apps:

### Apps and Packages

- `docs`: A placeholder documentation site powered by [Next.js](https://nextjs.org)

- `@fitfab/core`: core React components

- `@fitfab/utils`: shared React utilities

- `@fitfab/tsconfig`: shared `tsconfig.json`s used throughout the monorepo

- `eslint-preset-fitfab`: ESLint preset

Each package and app is 100% [TypeScript](https://www.typescriptlang.org/).

### Utilities

This turborepo has some additional tools already setup for you:

- [TypeScript](https://www.typescriptlang.org/) for static type checking

- [ESLint](https://eslint.org/) for code linting

- [Prettier](https://prettier.io) for code formatting

## Using this example

We do not have a starter yet in `create-turbo` for this quite yet. If you want to use this in the interim, you run the following command:

```sh

npx degit vercel/turborepo/examples/design-system design-system

cd design-system

yarn install

git init . && git add . && git commit -m "Init"

```

### Changing the npm organization scope

The npm organization scope for this design system starter is `@acme`. To change this, it's a bit manual at the moment, but you'll need to do the following:

- Rename folders in `packages/*` to replace `acme` with your desired scope

- Search and replace `acme` with your desired scope

- Re-run `yarn install`

### Publishing packages

#### npm

If you want to publish package to the public npm registry and make them publicly available, this is already setup for you.

To publish packages to a private npm organization scope, **remove** the following from each of the `package.json`'s

```diff

- "publishConfig": {

-  "access": "public"

- },

```

#### GitHub Package Registry

See [Working with the npm registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#publishing-a-package-using-publishconfig-in-the-packagejson-file)

### Tailwind CSS setup

These are the steps to [setup Tailwind](./TAILWIND_SETUP.md) CSS.