Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sashkhen/shu-ui
UI kit to be used in various projects
https://github.com/sashkhen/shu-ui
Last synced: 2 days ago
JSON representation
UI kit to be used in various projects
- Host: GitHub
- URL: https://github.com/sashkhen/shu-ui
- Owner: sashkhen
- License: isc
- Created: 2024-10-19T22:23:13.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T20:16:26.000Z (about 2 months ago)
- Last Synced: 2024-10-25T04:35:07.498Z (about 2 months ago)
- Language: TypeScript
- Size: 325 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Welcome to @sashkhen/shu-ui 👋
[](https://github.com/sashkhen/shu-ui#readme)
[](https://github.com/sashkhen/shu-ui/graphs/commit-activity)
[](https://github.com/sashkhen/shu-ui/blob/master/LICENSE)
> UI kit to be used in various projects
### 🏠 [Homepage](https://sashkhen.github.io/shu-ui/)
## Install
```sh
npm install @sashkhen/shu-ui
```
## Usage
```tsx
import { Button } from "@sashkhen/shu-ui";
const Example = () => {
return (
console.log("Clicked")}
>
Button
);
};
export default Example;
```
## Theming
Theming in this project is implemented with **css variables**. You can define/update them in any of your css files.
### Global theme styles
You can override **global theme** values anywhere in your css:
```css
/* ./src/index.css */
:root {
--shu-theme-primary-color-h: 92;
--shu-theme-primary-color-s: 45%;
--shu-theme-primary-color-l: 32%;
}
```
> Using hsl values separately allows lightening and darkening color automatically.
Full list of variables can be found in [\_theme.scss](./src/styles/_theme.scss)
> It's best to define these variables globally in your project
### Component theme styles (global)
You can override **component theme** values anywhere in your css:
```css
/* ./src/index.css */
:root {
--shu-theme-btn-text-color: #fff;
}
```
Full list of variables can be found in `./src/styles/_[component].scss` files, for example [\_button.scss](./src/styles/_button.scss)
> If you're overriding color variables (as opposed to h,s,l variables), you'll probably want to update multiple states colors:
```css
/* ./src/index.css */
:root {
/**
* this will automatically populate
* lighter and darker shades for different states
*/
--shu-theme-primary-color-h: 92;
--shu-theme-primary-color-s: 45%;
--shu-theme-primary-color-l: 32%;
/**
* this will override specific color only...
*/
--shu-theme-btn-color: #4f762d;
/**
* ...so you'll also need to update these
*/
--shu-theme-btn-color-hover: #689b3b;
--shu-theme-btn-color-light: #e5f1da;
--shu-theme-btn-color-light-hover: #d8eac8;
}
```
Full list of variables can be found in `./src/styles/_[component].scss` files, for example [\_button.scss](./src/styles/_button.scss)
### Component theme styles (custom component)
You can override **component theme** values on a component:
```css
/* ./src/index.css */
.btn-accent {
--shu-theme-primary-color-h: 92;
--shu-theme-primary-color-s: 45%;
--shu-theme-primary-color-l: 32%;
/* or */
--shu-theme-btn-color: #4f762d;
--shu-theme-btn-color-hover: #689b3b;
--shu-theme-btn-color-light: #e5f1da;
--shu-theme-btn-color-light-hover: #d8eac8;
}
```
```tsx
import { Button } from "@sashkhen/shu-ui";
Accent;
```
Full list of variables can be found in `./src/styles/_[component].scss` files, for example [\_button.scss](./src/styles/_button.scss)
### Component styles (custom component)
You can override **component** values on a component:
```css
/* ./src/index.css */
.btn-accent {
--shu-btn-color: #4f762d;
--shu-btn-color-hover: #689b3b;
--shu-btn-color-light: #e5f1da;
--shu-btn-color-light-hover: #d8eac8;
}
```
```tsx
import { Button } from "@sashkhen/shu-ui";
Accent;
```
Full list of variables can be found in `./src/components/[component]/_theme.scss` files, for example [Button/\_theme.scss](./src/components/Button/_theme.scss)
### Creating versions of a component
You can create multiple versions of a single component (like default and accent button) and redefine their values:
```css
/* ./src/index.css */
.btn-primary {
--shu-theme-primary-color-h: 92;
--shu-theme-primary-color-s: 45%;
--shu-theme-primary-color-l: 32%;
}
.btn-secondary {
--shu-theme-primary-color-h: 9;
--shu-theme-primary-color-s: 100%;
--shu-theme-primary-color-l: 63%;
}
```
```tsx
import { Button } from "@sashkhen/shu-ui";
const PrimaryButton = (props) => {
return ;
};
const SecondaryButton = (props) => {
return ;
};
```
## Contribute
### Development
Clone repository, install dependencies and start storybook in dev mode
```bash
git clone https://github.com/sashkhen/shu-ui.git
cd shu-ui
npm i
npm run storybook
```
Create new component
```bash
npm run generate
# or
npm run generate:component
```
> Add component export to [./src/components/index.ts](./src/components/index.ts)
### Build for production
#### Library
Build library (builds `./dist` folder)
```bash
npm run build
```
#### Storybook
Build storybook (builds `./storybook` folder)
```bash
npm run storybook:build
```
### Deployment
#### Library
In order to publish library:
- commit changes
- bump package version
- push to git
- in git repo actions section run `publish` (to either or both github/npm registry)
#### Storybook
Deploy storybook to github pages
```bash
npm run deploy
```
## Author
👤 [Sasha Diachenko](https://github.com/sashkhen)
## Show your support
Give a ⭐️ if this project helped you!
## 📝 License
Copyright © 2024 [Sasha Diachenko](https://github.com/sashkhen).
This project is [ISC](https://github.com/sashkhen/shu-ui/blob/master/LICENSE) licensed.