0.1.11 • Published 6 months ago

buff-ui-kit v0.1.11

Weekly downloads
-
License
ISC
Repository
-
Last release
6 months ago

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

  1. <Checkbox className?: string; checked: boolean; />
  1. <FilterCheckedDropdown className?: string; filters: { key: string: boolean }; onChange: (item: string, value: boolean) => void; chosen: string; optionAll?: string; pretiffyValues?: (value: string) => string; />
  1. <FilterDropdown className?: string; filters: { key: string: boolean }; onChange: (item: string, value: boolean) => void; chosen: string; pretiffyValues?: (value: string) => string; title?: string; />
  1. <GamesIcons className?: string; idImage: gamesDataById | number; color?: keyof typeof mainColorPalette | string | null; action?: () => void; />

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

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

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

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

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

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

Stickers

0.1.11

6 months ago

0.1.10

6 months ago

0.1.9

7 months ago

0.1.8

8 months ago

0.1.7

8 months ago

0.1.6

9 months ago

0.1.5

10 months ago

0.1.4

10 months ago

0.1.2

11 months ago

0.1.1

11 months ago

0.1.3

11 months ago

0.0.65

11 months ago

0.1.0

11 months ago

0.0.64

1 year ago

0.0.62

2 years ago

0.0.56-v2

2 years ago

0.0.56-v1

2 years ago

0.0.60

2 years ago

0.0.61

2 years ago

0.0.59

2 years ago

0.0.56

2 years ago

0.0.57

2 years ago

0.0.58

2 years ago

0.0.55

2 years ago

0.0.54-v2

2 years ago

0.0.53-v1

2 years ago

0.0.53-v2

2 years ago

0.0.53-v3

2 years ago

0.0.52-v1

2 years ago

0.0.52-v2

2 years ago

0.0.52-v3

2 years ago

0.0.52-v4

2 years ago

0.0.52-v5

2 years ago

0.0.53

2 years ago

0.0.54

2 years ago

0.0.54-v1

2 years ago

0.0.49-v1

3 years ago

0.0.51

3 years ago

0.0.50

3 years ago

0.0.50-v1

3 years ago

0.0.49

3 years ago

0.0.50-v3

3 years ago

0.0.50-v2

3 years ago

0.0.48-v1

3 years ago

0.0.50-v4

3 years ago

0.0.48-v2

3 years ago

0.0.48-v3

3 years ago

0.0.48-v4

3 years ago

0.0.40

3 years ago

0.0.41

3 years ago

0.0.43-v8

3 years ago

0.0.42

3 years ago

0.0.43

3 years ago

0.0.44

3 years ago

0.0.43-v6

3 years ago

0.0.45

3 years ago

0.0.43-v7

3 years ago

0.0.46

3 years ago

0.0.43-v4

3 years ago

0.0.47

3 years ago

0.0.43-v5

3 years ago

0.0.43-v2

3 years ago

0.0.37

3 years ago

0.0.43-v3

3 years ago

0.0.38

3 years ago

0.0.39

3 years ago

0.0.43-v1

3 years ago

0.0.30

3 years ago

0.0.31

3 years ago

0.0.32

3 years ago

0.0.33

3 years ago

0.0.34

3 years ago

0.0.35

3 years ago

0.0.36

3 years ago

0.0.27

3 years ago

0.0.28

3 years ago

0.0.29

3 years ago

0.0.45-v3

3 years ago

0.0.45-v2

3 years ago

0.0.45-v5

3 years ago

0.0.45-v4

3 years ago

0.0.48

3 years ago

0.0.26

3 years ago

0.0.25

3 years ago

0.0.24

3 years ago

0.0.22

3 years ago

0.0.21

3 years ago

0.0.20

3 years ago

0.0.19

3 years ago

0.0.18

3 years ago

0.0.17

3 years ago

0.0.16

3 years ago

0.0.15

3 years ago

0.0.14

3 years ago

0.0.13

3 years ago

0.0.12

3 years ago

0.0.11

3 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago