livevegas-ui-kit 1.0.70 → 1.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +69 -69
- package/dist/components/MoibleChipBoard/index.d.ts +15 -0
- package/dist/components/MoibleChipBoard/index.stories.d.ts +7 -0
- package/dist/components/MoibleChipBoard/styled.d.ts +22 -0
- package/dist/icons/ChipBoardBackgraound.d.ts +7 -0
- package/dist/livevegas-ui-kit.es.js +9 -2
- package/dist/livevegas-ui-kit.umd.js +34 -27
- package/package.json +55 -55
package/README.md
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
# React + TypeScript + Vite
|
|
2
|
-
|
|
3
|
-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
4
|
-
|
|
5
|
-
Currently, two official plugins are available:
|
|
6
|
-
|
|
7
|
-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
|
8
|
-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
9
|
-
|
|
10
|
-
## Expanding the ESLint configuration
|
|
11
|
-
|
|
12
|
-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
|
13
|
-
|
|
14
|
-
```js
|
|
15
|
-
export default tseslint.config([
|
|
16
|
-
globalIgnores(['dist']),
|
|
17
|
-
{
|
|
18
|
-
files: ['**/*.{ts,tsx}'],
|
|
19
|
-
extends: [
|
|
20
|
-
// Other configs...
|
|
21
|
-
|
|
22
|
-
// Remove tseslint.configs.recommended and replace with this
|
|
23
|
-
...tseslint.configs.recommendedTypeChecked,
|
|
24
|
-
// Alternatively, use this for stricter rules
|
|
25
|
-
...tseslint.configs.strictTypeChecked,
|
|
26
|
-
// Optionally, add this for stylistic rules
|
|
27
|
-
...tseslint.configs.stylisticTypeChecked,
|
|
28
|
-
|
|
29
|
-
// Other configs...
|
|
30
|
-
],
|
|
31
|
-
languageOptions: {
|
|
32
|
-
parserOptions: {
|
|
33
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
34
|
-
tsconfigRootDir: import.meta.dirname,
|
|
35
|
-
},
|
|
36
|
-
// other options...
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
])
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
|
43
|
-
|
|
44
|
-
```js
|
|
45
|
-
// eslint.config.js
|
|
46
|
-
import reactX from 'eslint-plugin-react-x'
|
|
47
|
-
import reactDom from 'eslint-plugin-react-dom'
|
|
48
|
-
|
|
49
|
-
export default tseslint.config([
|
|
50
|
-
globalIgnores(['dist']),
|
|
51
|
-
{
|
|
52
|
-
files: ['**/*.{ts,tsx}'],
|
|
53
|
-
extends: [
|
|
54
|
-
// Other configs...
|
|
55
|
-
// Enable lint rules for React
|
|
56
|
-
reactX.configs['recommended-typescript'],
|
|
57
|
-
// Enable lint rules for React DOM
|
|
58
|
-
reactDom.configs.recommended,
|
|
59
|
-
],
|
|
60
|
-
languageOptions: {
|
|
61
|
-
parserOptions: {
|
|
62
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
63
|
-
tsconfigRootDir: import.meta.dirname,
|
|
64
|
-
},
|
|
65
|
-
// other options...
|
|
66
|
-
},
|
|
67
|
-
},
|
|
68
|
-
])
|
|
69
|
-
```
|
|
1
|
+
# React + TypeScript + Vite
|
|
2
|
+
|
|
3
|
+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
4
|
+
|
|
5
|
+
Currently, two official plugins are available:
|
|
6
|
+
|
|
7
|
+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
|
8
|
+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
9
|
+
|
|
10
|
+
## Expanding the ESLint configuration
|
|
11
|
+
|
|
12
|
+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
|
13
|
+
|
|
14
|
+
```js
|
|
15
|
+
export default tseslint.config([
|
|
16
|
+
globalIgnores(['dist']),
|
|
17
|
+
{
|
|
18
|
+
files: ['**/*.{ts,tsx}'],
|
|
19
|
+
extends: [
|
|
20
|
+
// Other configs...
|
|
21
|
+
|
|
22
|
+
// Remove tseslint.configs.recommended and replace with this
|
|
23
|
+
...tseslint.configs.recommendedTypeChecked,
|
|
24
|
+
// Alternatively, use this for stricter rules
|
|
25
|
+
...tseslint.configs.strictTypeChecked,
|
|
26
|
+
// Optionally, add this for stylistic rules
|
|
27
|
+
...tseslint.configs.stylisticTypeChecked,
|
|
28
|
+
|
|
29
|
+
// Other configs...
|
|
30
|
+
],
|
|
31
|
+
languageOptions: {
|
|
32
|
+
parserOptions: {
|
|
33
|
+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
34
|
+
tsconfigRootDir: import.meta.dirname,
|
|
35
|
+
},
|
|
36
|
+
// other options...
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
])
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
|
43
|
+
|
|
44
|
+
```js
|
|
45
|
+
// eslint.config.js
|
|
46
|
+
import reactX from 'eslint-plugin-react-x'
|
|
47
|
+
import reactDom from 'eslint-plugin-react-dom'
|
|
48
|
+
|
|
49
|
+
export default tseslint.config([
|
|
50
|
+
globalIgnores(['dist']),
|
|
51
|
+
{
|
|
52
|
+
files: ['**/*.{ts,tsx}'],
|
|
53
|
+
extends: [
|
|
54
|
+
// Other configs...
|
|
55
|
+
// Enable lint rules for React
|
|
56
|
+
reactX.configs['recommended-typescript'],
|
|
57
|
+
// Enable lint rules for React DOM
|
|
58
|
+
reactDom.configs.recommended,
|
|
59
|
+
],
|
|
60
|
+
languageOptions: {
|
|
61
|
+
parserOptions: {
|
|
62
|
+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
63
|
+
tsconfigRootDir: import.meta.dirname,
|
|
64
|
+
},
|
|
65
|
+
// other options...
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
])
|
|
69
|
+
```
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export interface IMoibleChipBoard {
|
|
2
|
+
chipAmounts: number[];
|
|
3
|
+
selectedChipIndex: number;
|
|
4
|
+
selectChipIndex: (index: number) => void;
|
|
5
|
+
onUndo: () => void;
|
|
6
|
+
onDouble: () => void;
|
|
7
|
+
onRepeat: () => void;
|
|
8
|
+
balance: number;
|
|
9
|
+
isUndo: boolean;
|
|
10
|
+
isDouble: boolean;
|
|
11
|
+
isDeal: boolean;
|
|
12
|
+
isRepeat: boolean;
|
|
13
|
+
isLandscape: boolean;
|
|
14
|
+
}
|
|
15
|
+
export declare const MoibleChipBoard: ({ chipAmounts, selectedChipIndex, selectChipIndex, onUndo, onDouble, onRepeat, balance, isUndo, isDouble, isDeal, isRepeat, isLandscape, }: IMoibleChipBoard) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
interface IWrapper {
|
|
2
|
+
$isLandscape: boolean;
|
|
3
|
+
}
|
|
4
|
+
export declare const Wrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IWrapper>> & string;
|
|
5
|
+
export declare const WrapperChips: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
6
|
+
interface IChipWrapper {
|
|
7
|
+
$index: number;
|
|
8
|
+
$isActiveChips: boolean;
|
|
9
|
+
$isLandscape: boolean;
|
|
10
|
+
}
|
|
11
|
+
interface IButton {
|
|
12
|
+
$isLandscape: boolean;
|
|
13
|
+
$isDisabled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
export declare const ChipWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IChipWrapper>> & string;
|
|
16
|
+
export declare const Button: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IButton>> & string;
|
|
17
|
+
interface IChips {
|
|
18
|
+
$isChipsSelector: boolean;
|
|
19
|
+
$isLandscape: boolean;
|
|
20
|
+
}
|
|
21
|
+
export declare const Chips: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IChips>> & string;
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
interface IChipBoardBackgraound {
|
|
2
|
+
index: number;
|
|
3
|
+
isActive: boolean;
|
|
4
|
+
isChipsSelector: boolean;
|
|
5
|
+
}
|
|
6
|
+
export declare const ChipBoardBackgraound: ({ index, isActive, isChipsSelector, }: IChipBoardBackgraound) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -6351,6 +6351,7 @@ const E5 = d.div`
|
|
|
6351
6351
|
|
|
6352
6352
|
.icon {
|
|
6353
6353
|
transform: scale(1);
|
|
6354
|
+
transition-duration: 200ms;
|
|
6354
6355
|
width: fit-content;
|
|
6355
6356
|
height: fit-content;
|
|
6356
6357
|
display: flex;
|
|
@@ -6384,8 +6385,9 @@ const E5 = d.div`
|
|
|
6384
6385
|
display: flex;
|
|
6385
6386
|
justify-content: center;
|
|
6386
6387
|
align-items: center;
|
|
6388
|
+
transition-duration: 200ms;
|
|
6387
6389
|
}
|
|
6388
|
-
|
|
6390
|
+
|
|
6389
6391
|
&:hover {
|
|
6390
6392
|
border: 1px solid var(--white-60, #ffffff99);
|
|
6391
6393
|
.icon {
|
|
@@ -7321,6 +7323,7 @@ const se = {
|
|
|
7321
7323
|
${({ $isDisabled: e }) => e && "opacity: 0.4;"}
|
|
7322
7324
|
|
|
7323
7325
|
.icon {
|
|
7326
|
+
transition-duration: 200ms;
|
|
7324
7327
|
width: ${({ $size: e }) => e.iconSize}px;
|
|
7325
7328
|
height: ${({ $size: e }) => e.iconSize}px;
|
|
7326
7329
|
}
|
|
@@ -7356,7 +7359,6 @@ const se = {
|
|
|
7356
7359
|
gap: 16px;
|
|
7357
7360
|
width: ${({ $isBig: e }) => e ? "450px" : "fit-content"};
|
|
7358
7361
|
|
|
7359
|
-
|
|
7360
7362
|
.aciton {
|
|
7361
7363
|
display: flex;
|
|
7362
7364
|
gap: ${({ $isBig: e }) => e ? 16 : 4}px;
|
|
@@ -7402,6 +7404,11 @@ const se = {
|
|
|
7402
7404
|
color: #ffffff;
|
|
7403
7405
|
}
|
|
7404
7406
|
|
|
7407
|
+
.icon {
|
|
7408
|
+
transform: scale(1);
|
|
7409
|
+
transition-duration: 200ms;
|
|
7410
|
+
}
|
|
7411
|
+
|
|
7405
7412
|
&:hover {
|
|
7406
7413
|
border: 1px solid var(--white-60, #ffffff99);
|
|
7407
7414
|
.icon {
|