buff-ui-kit v0.1.7
IF you want export some new component or some function -> src/index.ts -> export * from "./NEW_DATA"; at ./components at index.ts also export new_component
npm install --legacy-peer-deps npm install
Create new npm version
At package increase version "version": "0.0.1"=> "version": "0.0.2",
BUILD - create build for using at another projects and copy fonts directory npm run rollup
npm publish
Set global settings via context
Use <BuffUIKitThemeContextProvider />
to provide custom fonts for buff-ui-kit
.
Supported props:
defaultFontFamily?: string,
displayFontFamily?: string,
Example:
<BuffUIKitThemeContextProvider defaultFontFamily={"NeueHaas"} displayFontFamily={"RailroadCC"}>
{children}
</BuffUIKitThemeContextProvider>
Notes
- context currently not consumed by tooltip component
What can use just a variable
mainColorPalette = {
primaryGreen: '#c8ff88',
primaryLightGray: '#eaeaea',
premiumPink: '#ff83eb',
premiumOrange: '#ffd176',
premiumBlue: '#83daff',
neutralWhite: '#ffffff',
neutralDarkMain: '#262626',
neutral30: '#2e2e2e',
neutral40: '#383838',
neutral50: '#434343',
neutral60: '#525252',
neutral70: '#676767',
neutralMainBackground: '#060606',
textGray: '#a3a3a3',
};
What you can use as react-component
Button, GamesIcons, Icon, MainLogoIcon, PremiumIcon, TierIcon, Tooltip, Timer, TabButton, Checkbox, FilterCheckedDropdown, LabeledInput, FilterDropdown,
- It`s button tag
<Button className?: string; type: "primary" | "premium-main" | "premium-secondary" | "other"| "other-secondary"; subtype?: "premium" | "premium-plus" | "premium-elite"; size?: "big" | "small" | "large"; icon: "coin" | "arrowTopRight"; text: string; onClick?: () => void; disabled?: boolean; id?: string; someAdditionalProps?: any[]; animation?: boolean; />
someAdditionalProps - some custom or absent attribute animation - for icon when hover button
type/subtype icon
- <Checkbox className?: string; checked: boolean; />
- <FilterCheckedDropdown className?: string; filters: { key: string: boolean }; onChange: (item: string, value: boolean) => void; chosen: string; optionAll?: string; pretiffyValues?: (value: string) => string; />
- <FilterDropdown className?: string; filters: { key: string: boolean }; onChange: (item: string, value: boolean) => void; chosen: string; pretiffyValues?: (value: string) => string; title?: string; />
<GamesIcons className?: string; idImage: gamesDataById | number; color?: keyof typeof mainColorPalette | string | null; action?: () => void; />
<Icon name: "checked" | "check" | "fillCheck" | "coin" | "close" | "arrowTopRight" | "arrowInput" | "lock" | "question" | "infoTooltip" | "copy" | "success" |"mini-logo" | "fail" | "search" | "reset" | "pin" | "eye" | "closedEye" className?: string; color?: keyof typeof mainColorPalette | string | null; action?: () => void; size?: number; dataFor?: string; // its for tooltip dataTip?: string; // its for tooltip />
<LabeledInputProps className?: string; value: string; onChange: (e: ChangeEvent) => void; label: string; style?: CSSProperties; name?: string; type?: string; isValid?: boolean; disabled?: boolean; placeholder?: string; isTextWhite?: boolean; />
<MainLogoIcon name: "letter"|"full"; className?: string; color?: keyof typeof mainColorPalette | string | null; action?: () => void; size?: number; dataFor?: string; // its for tooltip dataTip?: string; // its for tooltip />
- <PremiumIcon name: "REGULAR"| "PREMIUM"| "PREMIUM PLUS"| "PREMIUM ELITE"; className?: string; color?: keyof typeof mainColorPalette | string | null; action?: () => void; size?: number; dataFor?: string; // its for tooltip dataTip?: string; // its for tooltip />
<TierIcon name: "BEGINNER" | "BRONZE"| "SILVER"| "GOLD"| "PLATINUM"| "GODLIKE"; className?: string; color?: keyof typeof mainColorPalette | string | null; action?: () => void; size?: number; dataFor?: string; // its for tooltip dataTip?: string; // its for tooltip />
<Timer className?: string; dateISOString: string; durationUnits?: DurationUnits; /> interface DurationObjectUnits { years?: number | undefined; quarters?: number | undefined; months?: number | undefined; weeks?: number | undefined; days?: number | undefined; hours?: number | undefined; minutes?: number | undefined; seconds?: number | undefined; milliseconds?: number | undefined; } interface DurationLikeObject extends DurationObjectUnits { year?: number | undefined; quarter?: number | undefined; month?: number | undefined; week?: number | undefined; day?: number | undefined; hour?: number | undefined; minute?: number | undefined; second?: number | undefined; millisecond?: number | undefined; }
<Tooltip classNameTooltip?: string; classNameIcon?: string; nameIcon?: IconName; id: string; text: string; place: "top" | "right" | "bottom" | "left"; />
13. <Sticker />
name: aim | alien | angelSmiley | boom | calendar | check | cryEmoji | cursor | devilFace | discord | epicGames | esc | exp | fire | fistBump | ghost | download | headphones | heartEyes | heart | hp | inEar | joystick | ko | kill | lightBulb | lightning | lvlUp | market | medal | mp | newIcon | pointUp | potion | present | pukeSmiley | raffle | rockSign | rocket | save | shield | steam | sunglassesFace | sword | thropy | thumbsDown | thumbsUp | treasure | twitch | vs | wand | xIcon | youtube
rotate?: number (in degrees)
6 days ago
1 month ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
8 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago