https://github.com/znx-x/llane-ui
Llanne UI is an open-source project, ready-to-use React.js components library that facilitates the development of React.js frontend applications and websites, natively compatible with mobile device screens.
https://github.com/znx-x/llane-ui
app design framework library material mui react typescript ui web
Last synced: 19 days ago
JSON representation
Llanne UI is an open-source project, ready-to-use React.js components library that facilitates the development of React.js frontend applications and websites, natively compatible with mobile device screens.
- Host: GitHub
- URL: https://github.com/znx-x/llane-ui
- Owner: znx-x
- License: mit
- Created: 2024-04-11T00:01:46.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-06T09:19:43.000Z (almost 2 years ago)
- Last Synced: 2024-12-19T13:26:55.626Z (over 1 year ago)
- Topics: app, design, framework, library, material, mui, react, typescript, ui, web
- Language: TypeScript
- Homepage: https://main--capable-dragon-152070.netlify.app/
- Size: 716 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Welcome to Llane UI
Llanne UI is an open-source project, ready-to-use React.js components library that facilitates the development of React.js frontend applications and websites, natively compatible with mobile device screens and dark/light themes. The idea of developing a standard UI framework for React.js and TypeScript comes from my own need for standardising UI components across different applications for a consistent cross-platform UI/UX and an efficient way to update multiple frontend UIs all at once. The library is conceived in a way that desktop browser applications should be automatically compatible with mobile view, without any need for refactoring or working with different components for different screen sizes.
**Live Components Demo on Netlify:** https://main--capable-dragon-152070.netlify.app
**Latest NPM Package Published:** https://www.npmjs.com/package/llane-ui
**GitHub Repository:** https://github.com/znx-x/llane-ui
> [!WARNING]
> **Ongoing Development:** This is an ongoing project with heavy development underway. Contributions are welcomed and more documentation will be uploaded as the project develops.
- [Install Llane UI](#install-llane-ui)
- [Build Llane UI](#build-llane-ui)
- [Testing Llane UI](#testing-llane-ui)
- [Building Test Application](#building-test-application)
- [How to use it with my React App?](#how-to-use-it-with-my-react-app)
- [Regular Usage With NPM](#regular-usage-with-npm)
- [Fetch From GitHub (Unstable)](#fetch-from-github-unstable)
- [Using Llane UI](#using-llane-ui)
- [How do I build a custom icon library?](#how-do-i-build-a-custom-icon-library)
- [Components List (A-Z)](#components-list-a-z)
## Install Llane UI
You can install LLane UI by running:
```shell
npm install
```
## Build Llane UI
You can build Llane UI by running the following command:
```shell
npm run build
```
This will compile Llane UI to your `/dist` folder, which will then be used by your application to import the Llane UI components.
## Testing Llane UI
You can run the test TSX page by using the following command:
```shell
npm run test
```
This will open a test page in your `localhost` with all the available components rendered. You can use this to make modifications to the components and test them in real-time.
## Building Test Application
You can also crete an optimised build of the test application - even though I'm not sure why you would 🤷 - by running the following command:
```shell
npm run deploy-test-app
```
This should create an optimised build in your `/build` folder.
## How to use it with my React App?
### Regular Usage With NPM
You can use `npm` to install the latest stable release of `llane-ui` dependency in your React App:
```shell
npm install llane-ui --save-dev
```
### Fetch From GitHub (Unstable)
You can add the latest unstable version of Llane UI to your React App dependency tree by adding the following line to your `package.json` file (under dependencies):
```json
"llane-ui": "git+https://github.com/znx-x/llane-ui.git"
```
This will import and build Llane UI with your application. **Only use this method in non-production applications and be aware of the risks (including breaking risks) inherent from these unstable versions.**
### Using Llane UI
After installing it, you can use Llane UI components by importing and declaring them in your `JSX` or `TSX`. For exaple:
```js
import { Heading } from 'llane-ui';
/* Your Code */
return(
<>
This is a Llane UI Heading.
>
)
```
## How do I build a custom icon library?
> [!NOTE]
> You will need to have **[Python](https://www.python.org/downloads/)** installed to build your custom icon library.
By default, LLane UI uses a pre-compiled set of **[react-feather](https://feathericons.com/)** icons with some additions, but you can add, remove, or customise the icon library with your own `.svg` files. Follow the steps below to build your custom icon library:
1. Add, remove, and customise your `.svg` files inside the `/src/Icons/library` folder. You will need to adhere to the Kebab-Case naming convention when naming or renaming your files. Alternatively, you can adjust the `build-icon-library.py` script to fit your naming style if you prefer not to use Kebab-Case.
2. Inside the root folder, execute the `build-icon-library.py` script to build your library:
```shell
python build-icon-library.py
```
3. Now, you will need to rebuild the LLane UI framework to compile the new library and incorporate the new export structure:
```shell
npm run build
```
This process will update the `/dist` folder, creating all the new icons and a new export structure that you can use in your project.
## Components List (A-Z)
Full list of supported components. Each component might have their own custom props and I will provide detailed explanation on each one when the full documentation for the project is published.
- ✅ **AppNavBar:** `AppNavBar` `AppNavBarSection`
- ✅ **Box:** `Box` `BoxOutlined`
- ✅ **Button:** `Button` `ButtonAlt` `ButtonOutlined` `ButtonOutlinedAlt` `ButtonOutlinedDimmed` `ButtonLink` `ButtonLinkAlt` `ButtonLinkOutlined` `ButtonLinkOutlinedAlt`
- ✅ **Container:** `Container`
- ✅ **Divider:** `Divider`
- ✅ **Dropdown:** `Dropdown` `DropdownLink`
- ✅ **FlexContainer:** `FlexContainer`
- ✅ **Footer:** `Footer` `FooterContainer` `FooterDesktop` `FooterMobile` `FooterSection`
- ✅ **GridContainer:** `GridContainer`
- ✅ **HamburgerMenu:** `HamburgerMenu` `HamburgerMenuDropdown` `HamburgerMenuLink`
- ✅ **Header:** `Header` `HeaderContainer` `HeaderDesktop` `HeaderMobile` `HeaderSection` `HeaderLink`
- ✅ **Icons**
- ✅ **Image:** `Image`
- ✅ **Input:** `Input` `InputOutlined`
- ✅ **Link:** `Link` `LinkWrapper`
- ✅ **Modal:** `Modal`
- ✅ **Typography:** `HeadingExtraLarge` `HeadingLarge` `Heading` `HeadingSmall` `HeadingExtraSmall` `HeadingTiny` `TextExtraLarge` `TextLarge` `Text` `TextSmall` `TextExtraSmall` `TextDimmed`
- ✅ **Spacer:** `Spacer` `Sp` `Break`
- ✅ **Span:** `Span`
- ✅ **Submenu:** `Submenu` `SubmenuLink`
- ✅ **TextArea:** `TextArea` `TextAreaOutlined`
- ✅ **Toggle:** `ThemeToggle` `ToggleButton`
- ✅ **Wrapper:** `AppWrapper` `PageWrapper`