Skip to content

docs: add README #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tmaciej-neti merged 1 commit into from
Jan 30, 2025
Merged

docs: add README #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions .releaserc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"plugins": [
[
"@semantic-release/commit-analyzer",
{
"preset": "angular",
"releaseRules": [{ "type": "docs", "release": "patch" }],
"parserOpts": {
"noteKeywords": ["BREAKING CHANGE", "BREAKING CHANGES"]
}
}
],
"@semantic-release/release-notes-generator"
]
}
67 changes: 66 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,66 @@
WIP
# Fidlabs Common React UI

This library is an opinionated collection of React UI components and styles, to be shared across applications built within this organization.

## Installation

You can install the library using following command:

```shell
# npm
npm install @fidlabs/common-react-ui

# pnpm
pnpm install @fidlabs/common-react-ui

# yarn
yarn add @fidlabs/common-react-ui
```

## Setup

### Styles

To use the library you need to import following styles:

```tsx
import "@fidlabs/common-react-ui/global.css";
```

or in your global styles file

```css
@import "@fidlabs/common-react-ui/global.css";
```

### Fonts

The library does not setup font by default. You can set the font by using the `--font-sans` css variable. We recommend using the "Montserrat" font as this is the go to font used when developing this library.

If you are using Next.js (recommended), you can set up the font in the following way:

```tsx
// Somehwere in root layout

import { Montserrat } from "next/font/google";

// ...

const font = Montserrat({
variable: "--font-sans",
subsets: ["latin"],
});

// The later set the classname on the HTML element
<html lang="en" className={`${font.variable} antialiased`}>
```

Otherwise just set the CSS variable:

```css
/* Make sure the Font file is imported in some way beforehand */

:root {
--font-sans: "Montserrat";
}
```