Skip to content

Commit b3e6b07

Browse files
authored
docs: add README
1 parent fc741b9 commit b3e6b07

File tree

2 files changed

+81
-1
lines changed

2 files changed

+81
-1
lines changed

.releaserc.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"plugins": [
3+
[
4+
"@semantic-release/commit-analyzer",
5+
{
6+
"preset": "angular",
7+
"releaseRules": [{ "type": "docs", "release": "patch" }],
8+
"parserOpts": {
9+
"noteKeywords": ["BREAKING CHANGE", "BREAKING CHANGES"]
10+
}
11+
}
12+
],
13+
"@semantic-release/release-notes-generator"
14+
]
15+
}

README.md

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,66 @@
1-
WIP
1+
# Fidlabs Common React UI
2+
3+
This library is an opinionated collection of React UI components and styles, to be shared across applications built within this organization.
4+
5+
## Installation
6+
7+
You can install the library using following command:
8+
9+
```shell
10+
# npm
11+
npm install @fidlabs/common-react-ui
12+
13+
# pnpm
14+
pnpm install @fidlabs/common-react-ui
15+
16+
# yarn
17+
yarn add @fidlabs/common-react-ui
18+
```
19+
20+
## Setup
21+
22+
### Styles
23+
24+
To use the library you need to import following styles:
25+
26+
```tsx
27+
import "@fidlabs/common-react-ui/global.css";
28+
```
29+
30+
or in your global styles file
31+
32+
```css
33+
@import "@fidlabs/common-react-ui/global.css";
34+
```
35+
36+
### Fonts
37+
38+
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.
39+
40+
If you are using Next.js (recommended), you can set up the font in the following way:
41+
42+
```tsx
43+
// Somehwere in root layout
44+
45+
import { Montserrat } from "next/font/google";
46+
47+
// ...
48+
49+
const font = Montserrat({
50+
variable: "--font-sans",
51+
subsets: ["latin"],
52+
});
53+
54+
// The later set the classname on the HTML element
55+
<html lang="en" className={`${font.variable} antialiased`}>
56+
```
57+
58+
Otherwise just set the CSS variable:
59+
60+
```css
61+
/* Make sure the Font file is imported in some way beforehand */
62+
63+
:root {
64+
--font-sans: "Montserrat";
65+
}
66+
```

0 commit comments

Comments
 (0)