@lion-npm/ui 1.0.2 → 1.0.4
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/dist/components/buttons/AndroidButton.d.ts +16 -0
- package/dist/components/buttons/BootstrapButton.d.ts +16 -0
- package/dist/components/buttons/IOSButton.d.ts +16 -0
- package/dist/components/buttons/LionButton.d.ts +18 -0
- package/dist/components/inputs/AndroidInput.d.ts +20 -0
- package/dist/components/inputs/BootstrapInput.d.ts +16 -0
- package/dist/components/inputs/IOSInput.d.ts +21 -0
- package/dist/components/inputs/LionInput.d.ts +27 -0
- package/dist/components/loadings/LoadingBar.d.ts +5 -0
- package/dist/components/modals/LionModal.d.ts +17 -0
- package/dist/context/LionUIComponentsContext.d.ts +5 -0
- package/{src/index.ts → dist/index.d.ts} +1 -3
- package/dist/index.js +2564 -0
- package/{src/interfaces/LionUIComponentsProviderProps.tsx → dist/interfaces/LionUIComponentsProviderProps.d.ts} +1 -2
- package/{src/interfaces/LionUIContextProps.tsx → dist/interfaces/LionUIContextProps.d.ts} +1 -2
- package/{src/interfaces/LionUIState.tsx → dist/interfaces/LionUIState.d.ts} +2 -3
- package/dist/style.css +2 -0
- package/dist/types/Android/AndroidInputShapeTypes.d.ts +5 -0
- package/dist/types/Android/AndroidInputStyleTypes.d.ts +5 -0
- package/dist/types/Android/AndroidShapeTypes.d.ts +5 -0
- package/dist/types/Android/AndroidStyleTypes.d.ts +8 -0
- package/dist/types/ButtonTypes.d.ts +7 -0
- package/dist/types/IOS/IOSInputShapeTypes.d.ts +6 -0
- package/dist/types/IOS/IOSInputStyleTypes.d.ts +8 -0
- package/dist/types/IOS/IOSShapeTypes.d.ts +5 -0
- package/dist/types/IOS/IOSStyleTypes.d.ts +7 -0
- package/dist/types/InputTypes.d.ts +11 -0
- package/dist/types/PlatformTypes.d.ts +7 -0
- package/dist/types/SizeTypes.d.ts +9 -0
- package/dist/types/VariantTypes.d.ts +17 -0
- package/dist/types/Web/BootstrapInputShapeTypes.d.ts +6 -0
- package/dist/types/Web/BootstrapInputStyleTypes.d.ts +5 -0
- package/dist/types/Web/BootstrapShapeTypes.d.ts +6 -0
- package/dist/types/Web/BootstrapStyleTypes.d.ts +5 -0
- package/package.json +19 -2
- package/.oxlintrc.json +0 -8
- package/AGENTS.md +0 -0
- package/Dockerfile +0 -7
- package/compose.yml +0 -14
- package/index.html +0 -15
- package/src/App.tsx +0 -84
- package/src/assets/css/buttons/buttons-android.css +0 -251
- package/src/assets/css/buttons/buttons-ios.css +0 -213
- package/src/assets/css/buttons/buttons-web.css +0 -138
- package/src/assets/css/custom.css +0 -8
- package/src/assets/css/index.css +0 -60
- package/src/assets/css/inputs/inputs-android.css +0 -259
- package/src/assets/css/inputs/inputs-bootstrap.css +0 -74
- package/src/assets/css/inputs/inputs-ios.css +0 -268
- package/src/assets/css/loadings/loading-bar.css +0 -86
- package/src/assets/css/modals/modals.css +0 -236
- package/src/components/buttons/AndroidButton.tsx +0 -43
- package/src/components/buttons/BootstrapButton.tsx +0 -50
- package/src/components/buttons/IOSButton.tsx +0 -42
- package/src/components/buttons/LionButton.tsx +0 -73
- package/src/components/inputs/AndroidInput.tsx +0 -158
- package/src/components/inputs/BootstrapInput.tsx +0 -106
- package/src/components/inputs/IOSInput.tsx +0 -163
- package/src/components/inputs/LionInput.tsx +0 -81
- package/src/components/loadings/LoadingBar.tsx +0 -21
- package/src/components/modals/LionModal.tsx +0 -155
- package/src/context/LionUIComponentsContext.tsx +0 -73
- package/src/features/Header.tsx +0 -83
- package/src/features/VariantList.tsx +0 -19
- package/src/features/buttons/ButtonsSection.tsx +0 -7
- package/src/features/buttons/components/ButtonsAndroidSection.tsx +0 -79
- package/src/features/buttons/components/ButtonsBootstrapSection.tsx +0 -77
- package/src/features/buttons/components/ButtonsCustomSection.tsx +0 -234
- package/src/features/buttons/components/ButtonsIOSSection.tsx +0 -78
- package/src/features/inputs/InputsSection.tsx +0 -7
- package/src/features/inputs/components/InputsAndroidSection.tsx +0 -155
- package/src/features/inputs/components/InputsBootstrapSection.tsx +0 -154
- package/src/features/inputs/components/InputsCustomSection.tsx +0 -234
- package/src/features/inputs/components/InputsIOSSection.tsx +0 -156
- package/src/features/loadings/LoadingSection.tsx +0 -5
- package/src/features/loadings/components/LoadingBarSection.tsx +0 -74
- package/src/features/modals/ModalsSection.tsx +0 -5
- package/src/features/modals/components/ModalsAndroidSection.tsx +0 -108
- package/src/features/modals/components/ModalsDefaultForm.tsx +0 -31
- package/src/features/modals/components/ModalsDefaultInput.tsx +0 -22
- package/src/features/modals/components/ModalsIOSSection.tsx +0 -106
- package/src/features/modals/components/ModalsWebSection.tsx +0 -104
- package/src/main.tsx +0 -9
- package/src/types/Android/AndroidInputShapeTypes.tsx +0 -7
- package/src/types/Android/AndroidInputStyleTypes.tsx +0 -7
- package/src/types/Android/AndroidShapeTypes.tsx +0 -6
- package/src/types/Android/AndroidStyleTypes.tsx +0 -9
- package/src/types/ButtonTypes.tsx +0 -9
- package/src/types/IOS/IOSInputShapeTypes.tsx +0 -9
- package/src/types/IOS/IOSInputStyleTypes.tsx +0 -11
- package/src/types/IOS/IOSShapeTypes.tsx +0 -7
- package/src/types/IOS/IOSStyleTypes.tsx +0 -9
- package/src/types/InputTypes.tsx +0 -13
- package/src/types/PlatformTypes.tsx +0 -9
- package/src/types/SizeTypes.tsx +0 -11
- package/src/types/VariantTypes.tsx +0 -19
- package/src/types/Web/BootstrapInputShapeTypes.tsx +0 -9
- package/src/types/Web/BootstrapInputStyleTypes.tsx +0 -8
- package/src/types/Web/BootstrapShapeTypes.tsx +0 -8
- package/src/types/Web/BootstrapStyleTypes.tsx +0 -7
- package/tsconfig.app.json +0 -26
- package/tsconfig.json +0 -7
- package/tsconfig.node.json +0 -23
- package/vite.config.ts +0 -30
- /package/{public → dist}/favicon.svg +0 -0
- /package/{public → dist}/icons.svg +0 -0
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import { Fragment } from "react";
|
|
2
|
-
import { ButtonTypes } from "../../../types/ButtonTypes.tsx";
|
|
3
|
-
import { AndroidShapeTypes } from "../../../types/Android/AndroidShapeTypes.tsx";
|
|
4
|
-
import { AndroidStyleTypes } from "../../../types/Android/AndroidStyleTypes.tsx";
|
|
5
|
-
import { VariantTypes } from "../../../types/VariantTypes.tsx";
|
|
6
|
-
import { PlatformTypes } from "../../../types/PlatformTypes.tsx";
|
|
7
|
-
import { SizeTypes } from "../../../types/SizeTypes.tsx";
|
|
8
|
-
import { useLionUI } from "../../../context/LionUIComponentsContext.tsx";
|
|
9
|
-
import LionModal from "../../../components/modals/LionModal.tsx";
|
|
10
|
-
import ModalsDefaultForm from "./ModalsDefaultForm.tsx";
|
|
11
|
-
import LionButton from "../../../components/buttons/LionButton.tsx";
|
|
12
|
-
|
|
13
|
-
const variantsList = [
|
|
14
|
-
{ type: VariantTypes.SUCCESS, name: "Success" },
|
|
15
|
-
{ type: VariantTypes.INFO, name: "Info" },
|
|
16
|
-
{ type: VariantTypes.PRIMARY, name: "Primary" },
|
|
17
|
-
{ type: VariantTypes.DANGER, name: "Danger" },
|
|
18
|
-
{ type: VariantTypes.WARNING, name: "Warning" },
|
|
19
|
-
{ type: VariantTypes.LIGHT, name: "Light" },
|
|
20
|
-
{ type: VariantTypes.LINK, name: "Link" },
|
|
21
|
-
{ type: VariantTypes.DARK, name: "Dark" },
|
|
22
|
-
{ type: VariantTypes.LION_PACKAGES, name: "Lion Packages" },
|
|
23
|
-
{ type: VariantTypes.LION_PARKING, name: "Lion Parking" },
|
|
24
|
-
{ type: VariantTypes.LION_TECH, name: "Lion Tech" },
|
|
25
|
-
{ type: VariantTypes.LION_GLAM, name: "Lion Glam" },
|
|
26
|
-
];
|
|
27
|
-
|
|
28
|
-
const sizesList = [
|
|
29
|
-
{ size: SizeTypes.SM, label: "SM", titleSuffix: "Small Modal" },
|
|
30
|
-
{ size: SizeTypes.LG, label: "LG", titleSuffix: "Large Modal" },
|
|
31
|
-
{ size: SizeTypes.XL, label: "XL", titleSuffix: "Extra Large Modal" },
|
|
32
|
-
{ size: SizeTypes.LG, label: "Full", titleSuffix: "Fullscreen Modal", fullscreen: true as const },
|
|
33
|
-
];
|
|
34
|
-
|
|
35
|
-
const modalsConfig = variantsList.flatMap((variantObj) =>
|
|
36
|
-
sizesList.map((sizeObj) => ({
|
|
37
|
-
id: `android-modal-${variantObj.type}-${sizeObj.label.toLowerCase()}`,
|
|
38
|
-
label: sizeObj.label,
|
|
39
|
-
size: sizeObj.size,
|
|
40
|
-
fullscreen: sizeObj.fullscreen,
|
|
41
|
-
variant: variantObj.type,
|
|
42
|
-
title: `Android ${variantObj.name} ${sizeObj.titleSuffix}`,
|
|
43
|
-
}))
|
|
44
|
-
);
|
|
45
|
-
|
|
46
|
-
export default function ModalsAndroidSection() {
|
|
47
|
-
const { updateState } = useLionUI();
|
|
48
|
-
|
|
49
|
-
return (
|
|
50
|
-
<Fragment>
|
|
51
|
-
<h2>Modals (Android)</h2>
|
|
52
|
-
|
|
53
|
-
{variantsList.map((variantObj) => {
|
|
54
|
-
const variantModals = modalsConfig.filter(
|
|
55
|
-
(modal) => modal.variant === variantObj.type
|
|
56
|
-
);
|
|
57
|
-
|
|
58
|
-
return (
|
|
59
|
-
<div key={variantObj.type} className="mb-4">
|
|
60
|
-
<h5 className="text-muted mb-2">{variantObj.name}</h5>
|
|
61
|
-
<div className="d-flex gap-3 flex-wrap">
|
|
62
|
-
{variantModals.map((modal) => (
|
|
63
|
-
<LionButton
|
|
64
|
-
key={modal.id}
|
|
65
|
-
platform={PlatformTypes.ANDROID}
|
|
66
|
-
shape={AndroidShapeTypes.ROUNDED}
|
|
67
|
-
styleType={AndroidStyleTypes.TONAL}
|
|
68
|
-
variant={modal.variant}
|
|
69
|
-
type={ButtonTypes.BUTTON}
|
|
70
|
-
onClick={() => updateState({ modal: modal.id })}
|
|
71
|
-
>
|
|
72
|
-
{modal.label}
|
|
73
|
-
</LionButton>
|
|
74
|
-
))}
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
77
|
-
);
|
|
78
|
-
})}
|
|
79
|
-
|
|
80
|
-
{modalsConfig.map((modal) => (
|
|
81
|
-
<LionModal
|
|
82
|
-
key={modal.id}
|
|
83
|
-
platform={PlatformTypes.ANDROID}
|
|
84
|
-
modalId={modal.id}
|
|
85
|
-
variant={modal.variant}
|
|
86
|
-
title={modal.title}
|
|
87
|
-
size={modal.size}
|
|
88
|
-
fullscreen={modal.fullscreen}
|
|
89
|
-
body={(
|
|
90
|
-
<ModalsDefaultForm
|
|
91
|
-
platform={PlatformTypes.ANDROID}
|
|
92
|
-
variant={modal.variant}
|
|
93
|
-
/>
|
|
94
|
-
)}
|
|
95
|
-
buttons={(
|
|
96
|
-
<LionButton
|
|
97
|
-
variant={VariantTypes.MODAL}
|
|
98
|
-
type={ButtonTypes.BUTTON}
|
|
99
|
-
onClick={() => alert("Clicked")}
|
|
100
|
-
>
|
|
101
|
-
Click
|
|
102
|
-
</LionButton>
|
|
103
|
-
)}
|
|
104
|
-
/>
|
|
105
|
-
))}
|
|
106
|
-
</Fragment>
|
|
107
|
-
);
|
|
108
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { Col, Form, Row } from "react-bootstrap";
|
|
2
|
-
import ModalsDefaultInput from "./ModalsDefaultInput.tsx";
|
|
3
|
-
|
|
4
|
-
// @ts-ignore
|
|
5
|
-
export default function ModalsDefaultForm ({ platform, variant }) {
|
|
6
|
-
return (
|
|
7
|
-
<Form>
|
|
8
|
-
<ModalsDefaultInput platform={platform} variant={variant} />
|
|
9
|
-
|
|
10
|
-
<ModalsDefaultInput platform={platform} variant={variant} />
|
|
11
|
-
|
|
12
|
-
<Row>
|
|
13
|
-
<Col xs={12} sm={12} md={12} lg={6} xl={6} xxl={6}>
|
|
14
|
-
<ModalsDefaultInput platform={platform} variant={variant} />
|
|
15
|
-
</Col>
|
|
16
|
-
|
|
17
|
-
<Col xs={12} sm={12} md={12} lg={6} xl={6} xxl={6}>
|
|
18
|
-
<ModalsDefaultInput platform={platform} variant={variant} />
|
|
19
|
-
</Col>
|
|
20
|
-
|
|
21
|
-
<Col xs={12} sm={12} md={12} lg={6} xl={6} xxl={6}>
|
|
22
|
-
<ModalsDefaultInput platform={platform} variant={variant} />
|
|
23
|
-
</Col>
|
|
24
|
-
|
|
25
|
-
<Col xs={12} sm={12} md={12} lg={6} xl={6} xxl={6}>
|
|
26
|
-
<ModalsDefaultInput platform={platform} variant={variant} />
|
|
27
|
-
</Col>
|
|
28
|
-
</Row>
|
|
29
|
-
</Form>
|
|
30
|
-
);
|
|
31
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { Form } from "react-bootstrap";
|
|
2
|
-
import { InputTypes } from "../../../types/InputTypes.tsx";
|
|
3
|
-
import AndroidInput from "../../../components/inputs/AndroidInput.tsx";
|
|
4
|
-
import {PlatformTypes} from "../../../types/PlatformTypes.tsx";
|
|
5
|
-
import IOSInput from "../../../components/inputs/IOSInput.tsx";
|
|
6
|
-
import BootstrapInput from "../../../components/inputs/BootstrapInput.tsx";
|
|
7
|
-
|
|
8
|
-
// @ts-ignore
|
|
9
|
-
export default function ModalsDefaultInput({ platform, variant }) {
|
|
10
|
-
const InputComponent = PlatformTypes.IOS === platform ? IOSInput : PlatformTypes.ANDROID === platform ? AndroidInput : BootstrapInput;
|
|
11
|
-
|
|
12
|
-
return (
|
|
13
|
-
<Form.Group className="mb-3">
|
|
14
|
-
<InputComponent
|
|
15
|
-
type={InputTypes.TEXT}
|
|
16
|
-
label="Extra Large input text"
|
|
17
|
-
variant={variant}
|
|
18
|
-
placeholder="Example text..."
|
|
19
|
-
/>
|
|
20
|
-
</Form.Group>
|
|
21
|
-
);
|
|
22
|
-
}
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import { Fragment } from "react";
|
|
2
|
-
import { ButtonTypes } from "../../../types/ButtonTypes.tsx";
|
|
3
|
-
import { VariantTypes } from "../../../types/VariantTypes.tsx";
|
|
4
|
-
import { PlatformTypes } from "../../../types/PlatformTypes.tsx";
|
|
5
|
-
import { SizeTypes } from "../../../types/SizeTypes.tsx";
|
|
6
|
-
import { useLionUI } from "../../../context/LionUIComponentsContext.tsx";
|
|
7
|
-
import LionModal from "../../../components/modals/LionModal.tsx";
|
|
8
|
-
import ModalsDefaultForm from "./ModalsDefaultForm.tsx";
|
|
9
|
-
import LionButton from "../../../components/buttons/LionButton.tsx";
|
|
10
|
-
import {IOSStyleTypes} from "../../../types/IOS/IOSStyleTypes.tsx";
|
|
11
|
-
import {IOSShapeTypes} from "../../../types/IOS/IOSShapeTypes.tsx";
|
|
12
|
-
|
|
13
|
-
const variantsList = [
|
|
14
|
-
{ type: VariantTypes.SUCCESS, name: "Success" },
|
|
15
|
-
{ type: VariantTypes.INFO, name: "Info" },
|
|
16
|
-
{ type: VariantTypes.PRIMARY, name: "Primary" },
|
|
17
|
-
{ type: VariantTypes.DANGER, name: "Danger" },
|
|
18
|
-
{ type: VariantTypes.WARNING, name: "Warning" },
|
|
19
|
-
{ type: VariantTypes.LIGHT, name: "Light" },
|
|
20
|
-
{ type: VariantTypes.LINK, name: "Link" },
|
|
21
|
-
{ type: VariantTypes.DARK, name: "Dark" },
|
|
22
|
-
{ type: VariantTypes.LION_PACKAGES, name: "Lion Packages" },
|
|
23
|
-
{ type: VariantTypes.LION_PARKING, name: "Lion Parking" },
|
|
24
|
-
{ type: VariantTypes.LION_TECH, name: "Lion Tech" },
|
|
25
|
-
{ type: VariantTypes.LION_GLAM, name: "Lion Glam" },
|
|
26
|
-
];
|
|
27
|
-
|
|
28
|
-
const sizesList = [
|
|
29
|
-
{ size: SizeTypes.SM, label: "SM", titleSuffix: "Small Modal" },
|
|
30
|
-
{ size: SizeTypes.LG, label: "LG", titleSuffix: "Large Modal" },
|
|
31
|
-
{ size: SizeTypes.XL, label: "XL", titleSuffix: "Extra Large Modal" },
|
|
32
|
-
{ size: SizeTypes.LG, label: "Full", titleSuffix: "Fullscreen Modal", fullscreen: true as const },
|
|
33
|
-
];
|
|
34
|
-
|
|
35
|
-
const modalsConfig = variantsList.flatMap((variantObj) =>
|
|
36
|
-
sizesList.map((sizeObj) => ({
|
|
37
|
-
id: `ios-modal-${variantObj.type}-${sizeObj.label.toLowerCase()}`,
|
|
38
|
-
label: sizeObj.label,
|
|
39
|
-
size: sizeObj.size,
|
|
40
|
-
fullscreen: sizeObj.fullscreen,
|
|
41
|
-
variant: variantObj.type,
|
|
42
|
-
title: `iOS ${variantObj.name} ${sizeObj.titleSuffix}`,
|
|
43
|
-
}))
|
|
44
|
-
);
|
|
45
|
-
|
|
46
|
-
export default function ModalsIOSSection() {
|
|
47
|
-
const { updateState } = useLionUI();
|
|
48
|
-
|
|
49
|
-
return (
|
|
50
|
-
<Fragment>
|
|
51
|
-
<h2>Modals (iOS)</h2>
|
|
52
|
-
|
|
53
|
-
{variantsList.map((variantObj) => {
|
|
54
|
-
const variantModals = modalsConfig.filter(
|
|
55
|
-
(modal) => modal.variant === variantObj.type
|
|
56
|
-
);
|
|
57
|
-
|
|
58
|
-
return (
|
|
59
|
-
<div key={variantObj.type} className="mb-4">
|
|
60
|
-
<h5 className="text-muted mb-2">{variantObj.name}</h5>
|
|
61
|
-
<div className="d-flex gap-3 flex-wrap">
|
|
62
|
-
{variantModals.map((modal) => (
|
|
63
|
-
<LionButton
|
|
64
|
-
key={modal.id}
|
|
65
|
-
platform={PlatformTypes.IOS}
|
|
66
|
-
variant={modal.variant}
|
|
67
|
-
styleType={IOSStyleTypes.TINTED}
|
|
68
|
-
shape={IOSShapeTypes.ROUNDED}
|
|
69
|
-
// @ts-ignore
|
|
70
|
-
type={ButtonTypes.BUTTON}
|
|
71
|
-
onClick={() => updateState({ modal: modal.id })}
|
|
72
|
-
>
|
|
73
|
-
{modal.label}
|
|
74
|
-
</LionButton>
|
|
75
|
-
))}
|
|
76
|
-
</div>
|
|
77
|
-
</div>
|
|
78
|
-
);
|
|
79
|
-
})}
|
|
80
|
-
|
|
81
|
-
{modalsConfig.map((modal) => (
|
|
82
|
-
<LionModal
|
|
83
|
-
key={modal.id}
|
|
84
|
-
backdrop={"static"}
|
|
85
|
-
platform={PlatformTypes.IOS}
|
|
86
|
-
modalId={modal.id}
|
|
87
|
-
variant={modal.variant}
|
|
88
|
-
title={modal.title}
|
|
89
|
-
size={modal.size}
|
|
90
|
-
fullscreen={modal.fullscreen}
|
|
91
|
-
body={<ModalsDefaultForm platform={PlatformTypes.IOS} variant={modal.variant} />}
|
|
92
|
-
buttons={(
|
|
93
|
-
<LionButton
|
|
94
|
-
variant={VariantTypes.MODAL}
|
|
95
|
-
//@ts-ignore
|
|
96
|
-
type={ButtonTypes.BUTTON}
|
|
97
|
-
onClick={() => alert("Clicked")}
|
|
98
|
-
>
|
|
99
|
-
Click
|
|
100
|
-
</LionButton>
|
|
101
|
-
)}
|
|
102
|
-
/>
|
|
103
|
-
))}
|
|
104
|
-
</Fragment>
|
|
105
|
-
);
|
|
106
|
-
}
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import { Fragment } from "react";
|
|
2
|
-
import { ButtonTypes } from "../../../types/ButtonTypes.tsx";
|
|
3
|
-
import { VariantTypes } from "../../../types/VariantTypes.tsx";
|
|
4
|
-
import { PlatformTypes } from "../../../types/PlatformTypes.tsx";
|
|
5
|
-
import { SizeTypes } from "../../../types/SizeTypes.tsx";
|
|
6
|
-
import { useLionUI } from "../../../context/LionUIComponentsContext.tsx";
|
|
7
|
-
import LionModal from "../../../components/modals/LionModal.tsx";
|
|
8
|
-
import ModalsDefaultForm from "./ModalsDefaultForm.tsx";
|
|
9
|
-
import LionButton from "../../../components/buttons/LionButton.tsx";
|
|
10
|
-
|
|
11
|
-
const variantsList = [
|
|
12
|
-
{ type: VariantTypes.SUCCESS, name: "Success" },
|
|
13
|
-
{ type: VariantTypes.INFO, name: "Info" },
|
|
14
|
-
{ type: VariantTypes.PRIMARY, name: "Primary" },
|
|
15
|
-
{ type: VariantTypes.DANGER, name: "Danger" },
|
|
16
|
-
{ type: VariantTypes.WARNING, name: "Warning" },
|
|
17
|
-
{ type: VariantTypes.LIGHT, name: "Light" },
|
|
18
|
-
{ type: VariantTypes.LINK, name: "Link" },
|
|
19
|
-
{ type: VariantTypes.DARK, name: "Dark" },
|
|
20
|
-
{ type: VariantTypes.LION_PACKAGES, name: "Lion Packages" },
|
|
21
|
-
{ type: VariantTypes.LION_PARKING, name: "Lion Parking" },
|
|
22
|
-
{ type: VariantTypes.LION_TECH, name: "Lion Tech" },
|
|
23
|
-
{ type: VariantTypes.LION_GLAM, name: "Lion Glam" },
|
|
24
|
-
];
|
|
25
|
-
|
|
26
|
-
const sizesList = [
|
|
27
|
-
{ size: SizeTypes.SM, label: "SM", titleSuffix: "Small Modal" },
|
|
28
|
-
{ size: SizeTypes.LG, label: "LG", titleSuffix: "Large Modal" },
|
|
29
|
-
{ size: SizeTypes.XL, label: "XL", titleSuffix: "Extra Large Modal" },
|
|
30
|
-
{ size: SizeTypes.LG, label: "Full", titleSuffix: "Fullscreen Modal", fullscreen: true as const },
|
|
31
|
-
];
|
|
32
|
-
|
|
33
|
-
const modalsConfig = variantsList.flatMap((variantObj) =>
|
|
34
|
-
sizesList.map((sizeObj) => ({
|
|
35
|
-
id: `web-modal-${variantObj.type}-${sizeObj.label.toLowerCase()}`,
|
|
36
|
-
label: sizeObj.label,
|
|
37
|
-
size: sizeObj.size,
|
|
38
|
-
fullscreen: sizeObj.fullscreen,
|
|
39
|
-
variant: variantObj.type,
|
|
40
|
-
title: `Web ${variantObj.name} ${sizeObj.titleSuffix}`,
|
|
41
|
-
}))
|
|
42
|
-
);
|
|
43
|
-
|
|
44
|
-
export default function ModalsWebSection() {
|
|
45
|
-
const { updateState } = useLionUI();
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<Fragment>
|
|
49
|
-
<h2>Modals (Web)</h2>
|
|
50
|
-
|
|
51
|
-
{variantsList.map((variantObj) => {
|
|
52
|
-
const variantModals = modalsConfig.filter(
|
|
53
|
-
(modal) => modal.variant === variantObj.type
|
|
54
|
-
);
|
|
55
|
-
|
|
56
|
-
return (
|
|
57
|
-
<div key={variantObj.type} className="mb-4">
|
|
58
|
-
<h5 className="text-muted mb-2">{variantObj.name}</h5>
|
|
59
|
-
<div className="d-flex gap-3 flex-wrap">
|
|
60
|
-
{variantModals.map((modal) => (
|
|
61
|
-
<LionButton
|
|
62
|
-
key={modal.id}
|
|
63
|
-
platform={PlatformTypes.WEB}
|
|
64
|
-
variant={modal.variant}
|
|
65
|
-
type={ButtonTypes.BUTTON}
|
|
66
|
-
onClick={() => updateState({ modal: modal.id })}
|
|
67
|
-
>
|
|
68
|
-
{modal.label}
|
|
69
|
-
</LionButton>
|
|
70
|
-
))}
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
);
|
|
74
|
-
})}
|
|
75
|
-
|
|
76
|
-
{modalsConfig.map((modal) => (
|
|
77
|
-
<LionModal
|
|
78
|
-
key={modal.id}
|
|
79
|
-
platform={PlatformTypes.WEB}
|
|
80
|
-
modalId={modal.id}
|
|
81
|
-
variant={modal.variant}
|
|
82
|
-
title={modal.title}
|
|
83
|
-
size={modal.size}
|
|
84
|
-
fullscreen={modal.fullscreen}
|
|
85
|
-
body={(
|
|
86
|
-
<ModalsDefaultForm
|
|
87
|
-
platform={PlatformTypes.WEB}
|
|
88
|
-
variant={modal.variant}
|
|
89
|
-
/>
|
|
90
|
-
)}
|
|
91
|
-
buttons={(
|
|
92
|
-
<LionButton
|
|
93
|
-
variant={VariantTypes.MODAL}
|
|
94
|
-
type={ButtonTypes.BUTTON}
|
|
95
|
-
onClick={() => alert("Clicked")}
|
|
96
|
-
>
|
|
97
|
-
Click
|
|
98
|
-
</LionButton>
|
|
99
|
-
)}
|
|
100
|
-
/>
|
|
101
|
-
))}
|
|
102
|
-
</Fragment>
|
|
103
|
-
);
|
|
104
|
-
}
|
package/src/main.tsx
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
// Official iOS / SwiftUI layout shapes and corner radiuses
|
|
2
|
-
export const IOSInputShapeTypes = {
|
|
3
|
-
ROUNDED: "rounded", // Standard continuous iOS rounded corner
|
|
4
|
-
PILL: "pill", // Capsule shape
|
|
5
|
-
SQUARE: "square", // Sharp edges
|
|
6
|
-
} as const;
|
|
7
|
-
|
|
8
|
-
export type IOSInputShapeTypes =
|
|
9
|
-
(typeof IOSInputShapeTypes)[keyof typeof IOSInputShapeTypes];
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
// Official SwiftUI TextFieldStyle representations from Apple Documentation
|
|
2
|
-
export const IOSInputStyleTypes = {
|
|
3
|
-
FORM: "form", // SwiftUI Form/List row style (Horizontal Label + Input/Prompt)
|
|
4
|
-
ROUNDED_BORDER: "rounded-border", // SwiftUI .textFieldStyle(.roundedBorder)
|
|
5
|
-
FILLED: "filled", // iOS Native filled field style (Background tinted)
|
|
6
|
-
OUTLINED: "outlined", // Custom outlined border style
|
|
7
|
-
PLAIN: "plain", // SwiftUI .textFieldStyle(.plain)
|
|
8
|
-
} as const;
|
|
9
|
-
|
|
10
|
-
export type IOSInputStyleTypes =
|
|
11
|
-
(typeof IOSInputStyleTypes)[keyof typeof IOSInputStyleTypes];
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
// iOS HIG Corner Styles
|
|
2
|
-
export const IOSShapeTypes = {
|
|
3
|
-
ROUNDED: "rounded", // Standard squircle (rounded rectangle)
|
|
4
|
-
CAPSULE: "capsule", // Fully rounded pill shape
|
|
5
|
-
} as const;
|
|
6
|
-
|
|
7
|
-
export type IOSShapeTypes = (typeof IOSShapeTypes)[keyof typeof IOSShapeTypes];
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
// iOS HIG Button Styles
|
|
2
|
-
export const IOSStyleTypes = {
|
|
3
|
-
FILLED: "filled", // Prominent background fill (High emphasis)
|
|
4
|
-
TINTED: "tinted", // Semi-transparent colored background (Medium emphasis)
|
|
5
|
-
GRAY: "gray", // Neutral background tint
|
|
6
|
-
PLAIN: "plain", // Borderless text button (Low emphasis)
|
|
7
|
-
} as const;
|
|
8
|
-
|
|
9
|
-
export type IOSStyleTypes = (typeof IOSStyleTypes)[keyof typeof IOSStyleTypes];
|
package/src/types/InputTypes.tsx
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export const InputTypes = {
|
|
2
|
-
TEXT: "text",
|
|
3
|
-
PASSWORD: "password",
|
|
4
|
-
EMAIL: "email",
|
|
5
|
-
NUMBER: "number",
|
|
6
|
-
TEL: "tel",
|
|
7
|
-
URL: "url",
|
|
8
|
-
DATE: "date",
|
|
9
|
-
DATETIME: "datetime",
|
|
10
|
-
} as const;
|
|
11
|
-
|
|
12
|
-
export type InputTypes =
|
|
13
|
-
(typeof InputTypes)[keyof typeof InputTypes];
|
package/src/types/SizeTypes.tsx
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
export const VariantTypes = {
|
|
2
|
-
SECONDARY: "secondary",
|
|
3
|
-
PRIMARY: "primary",
|
|
4
|
-
SUCCESS: "success",
|
|
5
|
-
DANGER: "danger",
|
|
6
|
-
WARNING: "warning",
|
|
7
|
-
INFO: "info",
|
|
8
|
-
LIGHT: "light",
|
|
9
|
-
LINK: "link",
|
|
10
|
-
DARK: "dark",
|
|
11
|
-
MODAL: "modal",
|
|
12
|
-
LION_PACKAGES: "lion-packages",
|
|
13
|
-
LION_PARKING: "lion-parking",
|
|
14
|
-
LION_TECH: "lion-tech",
|
|
15
|
-
LION_GLAM: "lion-glam",
|
|
16
|
-
} as const;
|
|
17
|
-
|
|
18
|
-
export type VariantTypes =
|
|
19
|
-
(typeof VariantTypes)[keyof typeof VariantTypes];
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
// Official Bootstrap 5 layout shapes matching border-radius utilities
|
|
2
|
-
export const BootstrapInputShapeTypes = {
|
|
3
|
-
ROUNDED: "rounded", // Default Bootstrap border-radius
|
|
4
|
-
PILL: "rounded-pill", // Native Bootstrap .rounded-pill class
|
|
5
|
-
SQUARE: "rounded-0", // Native Bootstrap .rounded-0 class
|
|
6
|
-
} as const;
|
|
7
|
-
|
|
8
|
-
export type BootstrapInputShapeTypes =
|
|
9
|
-
(typeof BootstrapInputShapeTypes)[keyof typeof BootstrapInputShapeTypes];
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
// Official Bootstrap 5 Input Style representations
|
|
2
|
-
export const BootstrapInputStyleTypes = {
|
|
3
|
-
FLOATING: "floating", // Native Bootstrap 5 .form-floating
|
|
4
|
-
STANDARD: "standard", // Native Bootstrap 5 .form-label + .form-control
|
|
5
|
-
} as const;
|
|
6
|
-
|
|
7
|
-
export type BootstrapInputStyleTypes =
|
|
8
|
-
(typeof BootstrapInputStyleTypes)[keyof typeof BootstrapInputStyleTypes];
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
// Bootstrap 5 Corner Radius Options
|
|
2
|
-
export const BootstrapShapeTypes = {
|
|
3
|
-
STANDARD: "standard", // Standard Bootstrap border radius (~0.375rem)
|
|
4
|
-
PILL: "pill", // Fully rounded pill shape (.rounded-pill)
|
|
5
|
-
SQUARE: "square", // Sharp corners (.rounded-0)
|
|
6
|
-
} as const;
|
|
7
|
-
|
|
8
|
-
export type BootstrapShapeTypes = (typeof BootstrapShapeTypes)[keyof typeof BootstrapShapeTypes];
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
// Bootstrap 5 Button Styles
|
|
2
|
-
export const BootstrapStyleTypes = {
|
|
3
|
-
FILLED: "filled", // Standard solid Bootstrap button (e.g., .btn-primary)
|
|
4
|
-
OUTLINED: "outlined", // Bordered transparent button (e.g., .btn-outline-primary)
|
|
5
|
-
} as const;
|
|
6
|
-
|
|
7
|
-
export type BootstrapStyleTypes = (typeof BootstrapStyleTypes)[keyof typeof BootstrapStyleTypes];
|
package/tsconfig.app.json
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
|
4
|
-
"target": "es2023",
|
|
5
|
-
"lib": ["ES2023", "DOM"],
|
|
6
|
-
"module": "esnext",
|
|
7
|
-
"types": ["vite/client"],
|
|
8
|
-
"allowArbitraryExtensions": true,
|
|
9
|
-
"skipLibCheck": true,
|
|
10
|
-
|
|
11
|
-
/* Bundler mode */
|
|
12
|
-
"moduleResolution": "bundler",
|
|
13
|
-
"allowImportingTsExtensions": true,
|
|
14
|
-
"verbatimModuleSyntax": true,
|
|
15
|
-
"moduleDetection": "force",
|
|
16
|
-
"noEmit": true,
|
|
17
|
-
"jsx": "react-jsx",
|
|
18
|
-
|
|
19
|
-
/* Linting */
|
|
20
|
-
"noUnusedLocals": true,
|
|
21
|
-
"noUnusedParameters": true,
|
|
22
|
-
"erasableSyntaxOnly": true,
|
|
23
|
-
"noFallthroughCasesInSwitch": true
|
|
24
|
-
},
|
|
25
|
-
"include": ["src"]
|
|
26
|
-
}
|
package/tsconfig.json
DELETED
package/tsconfig.node.json
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
4
|
-
"target": "es2023",
|
|
5
|
-
"lib": ["ES2023"],
|
|
6
|
-
"types": ["node"],
|
|
7
|
-
"skipLibCheck": true,
|
|
8
|
-
|
|
9
|
-
/* Bundler mode */
|
|
10
|
-
"module": "nodenext",
|
|
11
|
-
"allowImportingTsExtensions": true,
|
|
12
|
-
"verbatimModuleSyntax": true,
|
|
13
|
-
"moduleDetection": "force",
|
|
14
|
-
"noEmit": true,
|
|
15
|
-
|
|
16
|
-
/* Linting */
|
|
17
|
-
"noUnusedLocals": true,
|
|
18
|
-
"noUnusedParameters": true,
|
|
19
|
-
"erasableSyntaxOnly": true,
|
|
20
|
-
"noFallthroughCasesInSwitch": true
|
|
21
|
-
},
|
|
22
|
-
"include": ["vite.config.ts"]
|
|
23
|
-
}
|