https://github.com/uselagoon/ui-library
Antd based ui library for all things lagoon related
https://github.com/uselagoon/ui-library
Last synced: 21 days ago
JSON representation
Antd based ui library for all things lagoon related
- Host: GitHub
- URL: https://github.com/uselagoon/ui-library
- Owner: uselagoon
- License: apache-2.0
- Created: 2023-12-11T01:00:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-20T01:24:57.000Z (10 months ago)
- Last Synced: 2025-02-20T01:26:20.815Z (10 months ago)
- Language: TypeScript
- Size: 17.1 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ui-library
A component library based on [Shadcn](https://ui.shadcn.com/) and [tailwind](https://tailwindcss.com/) for all things lagoon related:
## Installation 💾
Install it in a React project with a single npm/yarn command:
```bash
npm install github:uselagoon/ui-library#main tailwindcss @tailwindcss/postcss postcss
```
```bash
yarn add github:uselagoon/ui-library#main tailwindcss @tailwindcss/postcss postcss
```
Alternatively, add the following to your `package.json` and run `npm i` / `yarn` command:
```json
"dependencies": {
"react": "^18",
"react-dom": "^18",
"@tailwindcss/postcss": "^4.1.8",
"tailwindcss": "^4.1.10",
"ui-library": "github:uselagoon/ui-library#main",
}
```
Make sure to add generated dist styles from the ui-library like so, preferably in the root layout of your project:
```tsx
import '@uselagoon/ui-library/dist/ui-library.css';
```
## Usage 🔨
Using a component from the library:
```tsx
import '@uselagoon/ui-library/dist/ui-library.css';
import { Button, SwitchWithDescription } from '@uselagoon/ui-library';
export default () => (
<>
A spooky disabled button
>
```
## Vite config ⚙︎
The ui-library is bootstrapped with Vite and TS. To modify the configuration, edit `vite.config.ts` in the root directory; To modify TypeScript rules, refer to `tsconfig.app.json`
## Linting and bundling
### Linting 🧶
The linter is configured for both JS and TypeScript files. It runs during the build step but can also be ran during development by `npm run lint`.
To adhere to formatting rules, run `npm run format`.
To configure the linter config, refer to eslint.config.js at the root of the project.
### Bundling 📦
After making changes to the source files, make sure to run `npm run bundle` command which empties the dist folder and generates updated code for components.
## Viewing storybook 👀
- Clone this repo
- Run `npm i && npm run storybook`
- Visit `http://localhost:6006/`
## Development guide 🏗️
Clone the repo locally:
```bash
git clone https://github.com/uselagoon/ui-library .
npm install
npm run storybook
```
It is recommended to build components in isolation with the help of storybook (currently V 9.0).
Open your browser and visit [http://localhost:6006](http://localhost:6006).
The project structure is as follows:
├── src
│ ├── components # React source code and demos (which then get bundled)
│ ├── hooks # Custom hooks
│ ├── providers # Custom theme and NextLink providers
│ ├── stories # Storybook stories
│ ├── index.css # Autogenerated tailwind css file
│ └── index.ts # Entrypoint for your `exported` components (that your project then imports)
├── eslint.config.js # Eslint config
├── vite.config.ts # Vite bundler config
└── package.json
Given that there's a storybook instance running, navigate to the `src` directory and modify/create new components with their respective `stories.tsx` files.
To add a new component from Shadcn, refer to this [guide](https://ui.shadcn.com/docs/cli)
Modify and customize anything with Tailwind and/or custom css files if needed.
Then run the lint and format scripts, then ultimately, the bundle script and you're ready to go!
```bash
npm run lint
npm run format
npm run bundle
```
## Contributing 🤝
PRs and issues are welcome, we invite contributions from everyone.
This guide could come in handy: [GitHub contribution guide](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)