Buff-ui-kit NPM

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

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"; />