pge-front-common 1.0.2 → 2.0.0
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/.storybook/main.ts +22 -21
- package/.storybook/preview.ts +24 -13
- package/README.md +22 -6
- package/package.json +49 -44
- package/src/components/Button/Button.stories.tsx +21 -23
- package/src/components/Button/Button.tsx +22 -46
- package/src/components/Button/styles.tsx +39 -0
- package/src/components/Modal/Modal.stories.tsx +62 -0
- package/src/components/Modal/Modal.tsx +42 -0
- package/src/components/Modal/ModalConfirm/ModalConfirm.stories.tsx +48 -0
- package/src/components/Modal/ModalConfirm/index.tsx +32 -0
- package/src/components/Modal/ModalConfirm/styles.tsx +9 -0
- package/src/components/Modal/styles.tsx +75 -0
- package/src/components/theme.ts +24 -0
- package/src/icons/add-cell-icon.tsx +17 -0
- package/src/icons/add-icon.tsx +17 -0
- package/src/icons/arrow-expland-icon.tsx +17 -0
- package/src/icons/arrow-to-recall-icon.tsx +17 -0
- package/src/icons/calendar-icon.tsx +17 -0
- package/src/icons/check-circle-icon.tsx +17 -0
- package/src/icons/circle-expland-icon.tsx +17 -0
- package/src/icons/circle-to-recall-icon.tsx +17 -0
- package/src/icons/close-icon.tsx +17 -0
- package/src/icons/delete-icon.tsx +17 -0
- package/src/icons/download-icon.tsx +17 -0
- package/src/icons/edit-icon.tsx +17 -0
- package/src/icons/event-avaliable-icon.tsx +17 -0
- package/src/icons/icons.stories.tsx +92 -0
- package/src/icons/index.ts +49 -0
- package/src/icons/logout-icon.tsx +17 -0
- package/src/icons/new-tab-icon.tsx +17 -0
- package/src/icons/pdf-icon.tsx +17 -0
- package/src/icons/profile-icon.tsx +17 -0
- package/src/icons/remove-icon.tsx +14 -0
- package/src/icons/swap-icon.tsx +17 -0
- package/src/icons/triangle-expand-icon.tsx +14 -0
- package/src/icons/triangle-to-recall-icon.tsx +14 -0
- package/src/icons/upload-icon.tsx +17 -0
- package/src/icons/visibillity-icon.tsx +17 -0
- package/src/icons/warning-icon.tsx +17 -0
- package/src/index.ts +54 -1
- package/src/styled-components.d.ts +25 -0
- package/tsconfig.json +1 -1
- package/src/components/Button/button.css +0 -30
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React, { SVGProps } from "react";
|
|
2
|
+
|
|
3
|
+
export const IconVisibillity = (props?: SVGProps<SVGSVGElement>) => (
|
|
4
|
+
<svg
|
|
5
|
+
width="23"
|
|
6
|
+
height="15"
|
|
7
|
+
viewBox="0 0 23 15"
|
|
8
|
+
fill="none"
|
|
9
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
d="M11.6665 12C12.9165 12 13.979 11.5625 14.854 10.6875C15.729 9.8125 16.1665 8.75 16.1665 7.5C16.1665 6.25 15.729 5.1875 14.854 4.3125C13.979 3.4375 12.9165 3 11.6665 3C10.4165 3 9.354 3.4375 8.479 4.3125C7.604 5.1875 7.1665 6.25 7.1665 7.5C7.1665 8.75 7.604 9.8125 8.479 10.6875C9.354 11.5625 10.4165 12 11.6665 12ZM11.6665 10.2C10.9165 10.2 10.279 9.9375 9.754 9.4125C9.229 8.8875 8.9665 8.25 8.9665 7.5C8.9665 6.75 9.229 6.1125 9.754 5.5875C10.279 5.0625 10.9165 4.8 11.6665 4.8C12.4165 4.8 13.054 5.0625 13.579 5.5875C14.104 6.1125 14.3665 6.75 14.3665 7.5C14.3665 8.25 14.104 8.8875 13.579 9.4125C13.054 9.9375 12.4165 10.2 11.6665 10.2ZM11.6665 15C9.23317 15 7.0165 14.3208 5.0165 12.9625C3.0165 11.6042 1.5665 9.78333 0.666504 7.5C1.5665 5.21667 3.0165 3.39583 5.0165 2.0375C7.0165 0.679167 9.23317 0 11.6665 0C14.0998 0 16.3165 0.679167 18.3165 2.0375C20.3165 3.39583 21.7665 5.21667 22.6665 7.5C21.7665 9.78333 20.3165 11.6042 18.3165 12.9625C16.3165 14.3208 14.0998 15 11.6665 15ZM11.6665 13C13.5498 13 15.279 12.5042 16.854 11.5125C18.429 10.5208 19.6332 9.18333 20.4665 7.5C19.6332 5.81667 18.429 4.47917 16.854 3.4875C15.279 2.49583 13.5498 2 11.6665 2C9.78317 2 8.054 2.49583 6.479 3.4875C4.904 4.47917 3.69984 5.81667 2.8665 7.5C3.69984 9.18333 4.904 10.5208 6.479 11.5125C8.054 12.5042 9.78317 13 11.6665 13Z"
|
|
14
|
+
fill="#4A4A4B"
|
|
15
|
+
/>
|
|
16
|
+
</svg>
|
|
17
|
+
);
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React, { SVGProps } from "react";
|
|
2
|
+
|
|
3
|
+
export const IconWarning = (props?: SVGProps<SVGSVGElement>) => (
|
|
4
|
+
<svg
|
|
5
|
+
width="23"
|
|
6
|
+
height="20"
|
|
7
|
+
viewBox="0 0 23 20"
|
|
8
|
+
fill="none"
|
|
9
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
d="M0.666504 19.5L11.6665 0.5L22.6665 19.5H0.666504ZM4.1165 17.5H19.2165L11.6665 4.5L4.1165 17.5ZM11.6665 16.5C11.9498 16.5 12.1873 16.4042 12.379 16.2125C12.5707 16.0208 12.6665 15.7833 12.6665 15.5C12.6665 15.2167 12.5707 14.9792 12.379 14.7875C12.1873 14.5958 11.9498 14.5 11.6665 14.5C11.3832 14.5 11.1457 14.5958 10.954 14.7875C10.7623 14.9792 10.6665 15.2167 10.6665 15.5C10.6665 15.7833 10.7623 16.0208 10.954 16.2125C11.1457 16.4042 11.3832 16.5 11.6665 16.5ZM10.6665 13.5H12.6665V8.5H10.6665V13.5Z"
|
|
14
|
+
fill="#4A4A4B"
|
|
15
|
+
/>
|
|
16
|
+
</svg>
|
|
17
|
+
);
|
package/src/index.ts
CHANGED
|
@@ -1,3 +1,56 @@
|
|
|
1
1
|
import { Button } from "./components/Button/Button";
|
|
2
|
+
import { Modal } from "./components/Modal/Modal";
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
import {
|
|
5
|
+
IconDownload,
|
|
6
|
+
IconVisibillity,
|
|
7
|
+
IconEdit,
|
|
8
|
+
IconDelete,
|
|
9
|
+
IconCalendar,
|
|
10
|
+
IconProfile,
|
|
11
|
+
IconUpload,
|
|
12
|
+
IconNewTab,
|
|
13
|
+
IconWarning,
|
|
14
|
+
IconCheckCircle,
|
|
15
|
+
IconEventAvaliable,
|
|
16
|
+
IconLogout,
|
|
17
|
+
IconCLose,
|
|
18
|
+
IconAdd,
|
|
19
|
+
IconRemove,
|
|
20
|
+
IconCircleExpland,
|
|
21
|
+
IconCircleRecall,
|
|
22
|
+
IconArrowExpland,
|
|
23
|
+
IconArrowRecall,
|
|
24
|
+
IconTriangleExpand,
|
|
25
|
+
IconTriangleRecall,
|
|
26
|
+
IconSwap,
|
|
27
|
+
IconAddCell,
|
|
28
|
+
} from "./icons/index";
|
|
29
|
+
|
|
30
|
+
export {
|
|
31
|
+
Button,
|
|
32
|
+
Modal,
|
|
33
|
+
IconDownload,
|
|
34
|
+
IconVisibillity,
|
|
35
|
+
IconEdit,
|
|
36
|
+
IconDelete,
|
|
37
|
+
IconCalendar,
|
|
38
|
+
IconProfile,
|
|
39
|
+
IconUpload,
|
|
40
|
+
IconNewTab,
|
|
41
|
+
IconWarning,
|
|
42
|
+
IconCheckCircle,
|
|
43
|
+
IconEventAvaliable,
|
|
44
|
+
IconLogout,
|
|
45
|
+
IconCLose,
|
|
46
|
+
IconAdd,
|
|
47
|
+
IconRemove,
|
|
48
|
+
IconCircleExpland,
|
|
49
|
+
IconCircleRecall,
|
|
50
|
+
IconArrowExpland,
|
|
51
|
+
IconArrowRecall,
|
|
52
|
+
IconTriangleExpand,
|
|
53
|
+
IconTriangleRecall,
|
|
54
|
+
IconSwap,
|
|
55
|
+
IconAddCell,
|
|
56
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
// styled-components.d.ts
|
|
2
|
+
import "styled-components";
|
|
3
|
+
|
|
4
|
+
declare module "styled-components" {
|
|
5
|
+
export interface DefaultTheme {
|
|
6
|
+
colors: {
|
|
7
|
+
primary: string;
|
|
8
|
+
secondary: string;
|
|
9
|
+
hover: string;
|
|
10
|
+
textSecondary: string;
|
|
11
|
+
iconColor: string;
|
|
12
|
+
success: string;
|
|
13
|
+
warning: string;
|
|
14
|
+
alert: string;
|
|
15
|
+
information: string;
|
|
16
|
+
border: string;
|
|
17
|
+
lightGrey: string;
|
|
18
|
+
grey: string;
|
|
19
|
+
base: {
|
|
20
|
+
white: string;
|
|
21
|
+
black: string;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
}
|
package/tsconfig.json
CHANGED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
.storybook-button {
|
|
2
|
-
font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
3
|
-
font-weight: 700;
|
|
4
|
-
border: 0;
|
|
5
|
-
border-radius: 3em;
|
|
6
|
-
cursor: pointer;
|
|
7
|
-
display: inline-block;
|
|
8
|
-
line-height: 1;
|
|
9
|
-
}
|
|
10
|
-
.storybook-button--primary {
|
|
11
|
-
color: white;
|
|
12
|
-
background-color: #1ea7fd;
|
|
13
|
-
}
|
|
14
|
-
.storybook-button--secondary {
|
|
15
|
-
color: #333;
|
|
16
|
-
background-color: transparent;
|
|
17
|
-
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
|
|
18
|
-
}
|
|
19
|
-
.storybook-button--small {
|
|
20
|
-
font-size: 12px;
|
|
21
|
-
padding: 10px 16px;
|
|
22
|
-
}
|
|
23
|
-
.storybook-button--medium {
|
|
24
|
-
font-size: 14px;
|
|
25
|
-
padding: 11px 20px;
|
|
26
|
-
}
|
|
27
|
-
.storybook-button--large {
|
|
28
|
-
font-size: 16px;
|
|
29
|
-
padding: 12px 24px;
|
|
30
|
-
}
|