buff-ui-kit

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

1. At package increase version "version": "0.0.1"=> "version": "0.0.2",

2. BUILD - create build for using at another projects and copy fonts directory npm run rollup

3. 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,

1. 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

2. <Checkbox
   className?: string;
   checked: boolean;
   />

3. <FilterCheckedDropdown
   className?: string;
   filters: { [key: string]: boolean };
   onChange: (item: string, value: boolean) => void;
   chosen: string;
   optionAll?: string;
   pretiffyValues?: (value: string) => string;
   />

4. <FilterDropdown
   className?: string;
   filters: { [key: string]: boolean };
   onChange: (item: string, value: boolean) => void;
   chosen: string;
   pretiffyValues?: (value: string) => string;
   title?: string;
   />

5. <GamesIcons
   className?: string;
   idImage: gamesDataById | number;
   color?: keyof typeof mainColorPalette | string | null;
   action?: () => void;
   />

6. <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
   />

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

8. <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
   />

9. <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
   />

10. <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
    />

11. <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; }

12. <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)