@dev-blinq/ui-systems 1.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.
Files changed (25) hide show
  1. package/README.md +0 -0
  2. package/build +22 -0
  3. package/index.html +13 -0
  4. package/package.json +22 -0
  5. package/public/colors.css +137 -0
  6. package/public/font.css +0 -0
  7. package/src/components/CustomButton/CustomButton.tsx +37 -0
  8. package/src/components/CustomButton/CustomButtonProps.ts +12 -0
  9. package/src/components/CustomButton/CustomButtonTypes.ts +12 -0
  10. package/src/components/CustomButton/css/color/default.css +54 -0
  11. package/src/components/CustomButton/css/color/disabled.css +37 -0
  12. package/src/components/CustomButton/css/color/focused.css +39 -0
  13. package/src/components/CustomButton/css/color/hover.css +39 -0
  14. package/src/components/CustomButton/css/customButton.css +74 -0
  15. package/src/components/CustomButton/css/size.css +23 -0
  16. package/src/components/CustomCheckbox.tsx +24 -0
  17. package/src/components/CustomInput.tsx +22 -0
  18. package/src/components/Typography/Typography.tsx +26 -0
  19. package/src/components/Typography/css/bold.css +1 -0
  20. package/src/components/Typography/css/size.css +1 -0
  21. package/src/index.ts +3 -0
  22. package/src/playground/App.tsx +104 -0
  23. package/src/playground/main.tsx +9 -0
  24. package/tsconfig.json +17 -0
  25. package/vite.config.ts +28 -0
package/README.md ADDED
File without changes
package/build ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "name": "@dev-blinq/ui-systems",
3
+ "version": "1.0.0",
4
+ "description": "this package contains all ui components like button, input, checkbox, colors that blinq.io needs",
5
+ "main": "./dist/index.js",
6
+ "types": "./dist/index.d.ts",
7
+ "scripts": {
8
+ "start": "npx vite --host",
9
+ "test": "echo \"Error: no test specified\" && exit 1",
10
+ "build": "tsc && cp ./package.json ./build"
11
+ },
12
+ "author": "",
13
+ "license": "ISC",
14
+ "dependencies": {
15
+ "@mui/material": "^5.16.6",
16
+ "@types/react-dom": "^18.3.0",
17
+ "@vitejs/plugin-react": "^4.3.1",
18
+ "react-dom": "^18.3.1",
19
+ "typescript": "^5.5.4",
20
+ "vite": "^5.3.5"
21
+ }
22
+ }
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Component Playground</title>
7
+ <link rel="stylesheet" href="/colors.css" />
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ <script type="module" src="/src/playground/main.tsx"></script>
12
+ </body>
13
+ </html>
package/package.json ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "name": "@dev-blinq/ui-systems",
3
+ "version": "1.0.0",
4
+ "description": "this package contains all ui components like button, input, checkbox, colors that blinq.io needs",
5
+ "main": "./dist/index.js",
6
+ "types": "./dist/index.d.ts",
7
+ "scripts": {
8
+ "start": "npx vite --host",
9
+ "test": "echo \"Error: no test specified\" && exit 1",
10
+ "build": "tsc && cp ./package.json ./build"
11
+ },
12
+ "author": "",
13
+ "license": "ISC",
14
+ "dependencies": {
15
+ "@mui/material": "^5.16.6",
16
+ "@types/react-dom": "^18.3.0",
17
+ "@vitejs/plugin-react": "^4.3.1",
18
+ "react-dom": "^18.3.1",
19
+ "typescript": "^5.5.4",
20
+ "vite": "^5.3.5"
21
+ }
22
+ }
package/public/colors.css ADDED
@@ -0,0 +1,137 @@
1
+ :root {
2
+ /* Primary Colors */
3
+ --primary-lightest: #f5f7ff;
4
+ --primary-light: #ebeefe;
5
+ --primary-main: #093db0;
6
+ --primary-dark: #4338ca;
7
+ --primary-darkest: #312e81;
8
+ /* Secondary Colors */
9
+ --secondary-lightest: #f8f9fa;
10
+ --secondary-light: #f3f4f6;
11
+ --secondary-main: #6c737f;
12
+ --secondary-dark: #384250;
13
+ --secondary-darkest: #111927;
14
+ /* Error Colors */
15
+ --error-lightest: #fef3f2;
16
+ --error-light: #fee4e2;
17
+ --error-main: #f04438;
18
+ --error-dark: #b42318;
19
+ --error-darkest: #7a271a;
20
+ /* Warning Colors */
21
+ --warning-lightest: #fffaeb;
22
+ --warning-light: #fef0c7;
23
+ --warning-main: #f79009;
24
+ --warning-dark: #b54708;
25
+ --warning-darkest: #7a2e0e;
26
+ /* Info Colors */
27
+ --info-lightest: #ecfdff;
28
+ --info-light: #cff9fe;
29
+ --info-main: #06aed4;
30
+ --info-dark: #0e7090;
31
+ --info-darkest: #164c63;
32
+ /* Success Colors */
33
+ --success-lightest: #f0fdf9;
34
+ --success-light: #ccfbef;
35
+ --success-main: #15b79e;
36
+ --success-dark: #107569;
37
+ --success-darkest: #134e48;
38
+ /* Purple Colors */
39
+ --purple-lightest: #f9f5ff;
40
+ --purple-light: #f4ebff;
41
+ --purple-main: #9e77ed;
42
+ --purple-dark: #6941c6;
43
+ --purple-darkest: #42307d;
44
+ /* Indigo Colors */
45
+ --indigo-lightest: #f5f7ff;
46
+ --indigo-light: #edfcf2;
47
+ --indigo-main: #16b364;
48
+ --indigo-dark: #087443;
49
+ --indigo-darkest: #084c2e;
50
+ /* Green Colors */
51
+ --green-lightest: #f5f8ff;
52
+ --green-light: #ebefff;
53
+ --green-main: #2970ff;
54
+ --green-dark: #004eeb;
55
+ --green-darkest: #00359e;
56
+
57
+ --blinq-theme-light: #cfd4e0;
58
+ --blinq-theme-main: #194ab7;
59
+
60
+ /* more colors */
61
+
62
+ /* Greyscale */
63
+ --color-white: #ffffff;
64
+ --color-grey-5: #fdfdfd;
65
+ --color-grey-10: #f9f9f9;
66
+ --color-grey-20: #f1f1f1;
67
+ --color-grey-30: #ececed;
68
+ --color-grey-40: #e6e6e6;
69
+ --color-grey-50: #dcdcde;
70
+ --color-grey-60: #c9c9cc;
71
+ --color-grey-70: #939197;
72
+ --color-grey-80: #717076;
73
+ --color-grey-90: #4f4d55;
74
+ --color-grey-100: #2d2b32;
75
+ --color-grey-110: #080808;
76
+ --color-black: #000000;
77
+
78
+ /* Blue */
79
+ --color-primary-5: #f3f5fb;
80
+ --color-primary-10: #e6ecf7;
81
+ --color-primary-20: #ced8ef;
82
+ --color-primary-30: #b5c5e7;
83
+ --color-primary-40: #9db1df;
84
+ --color-primary-50: #849ed7;
85
+ --color-primary-60: #6b8bd0;
86
+ --color-primary-80: #3a64c0;
87
+ --color-primary-100: #093db0;
88
+ --color-primary-110: #08379e;
89
+
90
+ /* Green */
91
+ --color-success-5: #f2fbf9;
92
+ --color-success-10: #e5f7f3;
93
+ --color-success-20: #ccf0e7;
94
+ --color-success-30: #b2e8db;
95
+ --color-success-40: #99e1d0;
96
+ --color-success-50: #7fd9c3;
97
+ --color-success-60: #66d2b8;
98
+ --color-success-80: #33c3a0;
99
+ --color-success-100: #00b489;
100
+ --color-success-110: #00a27b;
101
+
102
+ /* Orange */
103
+ --color-orange-5: #fff9f5;
104
+ --color-orange-10: #fff4ec;
105
+ --color-orange-20: #ffeadb;
106
+ --color-orange-30: #ffdfc8;
107
+ --color-orange-40: #ffd6b7;
108
+ --color-orange-50: #ffcba4;
109
+ --color-orange-60: #ffc192;
110
+ --color-orange-80: #ffac6e;
111
+ --color-orange-100: #ff974a;
112
+ --color-orange-110: #e58843;
113
+
114
+ /* Red */
115
+ --color-error-5: #fef6f4;
116
+ --color-error-10: #fdece9;
117
+ --color-error-20: #fbdad3;
118
+ --color-error-30: #f9c7bc;
119
+ --color-error-40: #f7b5a6;
120
+ --color-error-50: #f5a290;
121
+ --color-error-60: #f2907a;
122
+ --color-error-80: #ee6b4d;
123
+ --color-error-100: #ea4621;
124
+ --color-error-110: #d33f1e;
125
+
126
+ /* Yellow */
127
+ --color-warning-5: #fffcf2;
128
+ --color-warning-10: #fff9e5;
129
+ --color-warning-20: #fff3cc;
130
+ --color-warning-30: #ffeeb2;
131
+ --color-warning-40: #ffe899;
132
+ --color-warning-50: #ffe280;
133
+ --color-warning-60: #ffdc66;
134
+ --color-warning-80: #ffd133;
135
+ --color-warning-100: #ffc500;
136
+ --color-warning-110: #e5b100;
137
+ }
package/public/font.css ADDED
File without changes
package/src/components/CustomButton/CustomButton.tsx ADDED
@@ -0,0 +1,37 @@
1
+ import React from "react";
2
+ import { CustomButtonProps } from "./CustomButtonProps";
3
+ import "./css/customButton.css";
4
+ import "./css/size.css";
5
+ import "./css/color/default.css";
6
+ import "./css/color/hover.css";
7
+ import "./css/color/focused.css";
8
+ import "./css/color/disabled.css";
9
+
10
+ import { useState } from "react";
11
+
12
+
13
+ const CustomButton: React.FC<CustomButtonProps> = ({
14
+ size = "md",
15
+ colorHierarchy = "brand/primary",
16
+ disabled = false,
17
+ text,
18
+ leftIcon,
19
+ rightIcon,
20
+ onClick,
21
+ }) => {
22
+ return (
23
+ <button
24
+ className="button"
25
+ data-size={size}
26
+ data-colorHierarchy={colorHierarchy}
27
+ onClick={onClick}
28
+ disabled={disabled}
29
+ >
30
+ {leftIcon && <span>{leftIcon}</span>}
31
+ {text}
32
+ {rightIcon && <span>{rightIcon}</span>}
33
+ </button>
34
+ );
35
+ };
36
+
37
+ export default CustomButton;
package/src/components/CustomButton/CustomButtonProps.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { ButtonSize, ButtonColorHierarchyType } from './CustomButtonTypes';
2
+ import { ReactNode } from 'react';
3
+
4
+ export interface CustomButtonProps {
5
+ size?: ButtonSize;
6
+ colorHierarchy?: ButtonColorHierarchyType;
7
+ disabled?: boolean;
8
+ text: string;
9
+ leftIcon?: ReactNode;
10
+ rightIcon?: ReactNode;
11
+ onClick?: () => void;
12
+ }
package/src/components/CustomButton/CustomButtonTypes.ts ADDED
@@ -0,0 +1,12 @@
1
+
2
+ export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' ;
3
+ export type ButtonColor = 'brand' | 'gray' | 'destructive' | 'white';
4
+ export type ButtonHierarchy = 'primary' | 'secondary' | 'link' | 'linkContainer';
5
+ export type ButtonState = 'default' | 'hover' | 'focused' | 'disabled';
6
+ export type ButtonColorHierarchyType = `${ButtonColor}/${ButtonHierarchy}`;
7
+
8
+ export const buttonSizeArray: ButtonSize[] = ['sm', 'md', 'lg', 'xl'];
9
+ export const buttonColorArray: ButtonColor[] = ['brand', 'gray', 'destructive', 'white'];
10
+ export const buttonHierarchyArray: ButtonHierarchy[] = ['primary', 'secondary', 'link', 'linkContainer'];
11
+ export const buttonStateArray: ButtonState[] = ['default', 'hover', 'focused', 'disabled'];
12
+ export const buttonColorHierarchyArray: ButtonColorHierarchyType[] = ['brand/primary', 'brand/secondary', 'brand/link', 'brand/linkContainer', 'gray/primary', 'gray/secondary', 'gray/link', 'gray/linkContainer', 'destructive/primary', 'destructive/secondary', 'destructive/link', 'destructive/linkContainer', 'white/primary', 'white/secondary', 'white/link', 'white/linkContainer'];
package/src/components/CustomButton/css/color/default.css ADDED
@@ -0,0 +1,54 @@
1
+ .button[data-colorHierarchy='brand/primary'] {
2
+ background-color: var(--primary-main);
3
+ color: #fff; /* text color */
4
+ }
5
+
6
+ .button[data-colorHierarchy='gray/secondary'] {
7
+ background-color: #F1F1F1;
8
+ color: #080808;
9
+ }
10
+
11
+ .button[data-colorHierarchy='white/secondary'] {
12
+ background-color: #fff;
13
+ color: #080808;
14
+ box-shadow: 0px 1px 2px 0px rgba(23, 23, 23, 0.05);
15
+ border: var(--border-radius-radius-none, 1px) solid var(--border-default, #E6E6E6);
16
+ }
17
+
18
+ .button[data-colorHierarchy='gray/linkContainer'] {
19
+ background-color: #fff;
20
+ color: #080808;
21
+ }
22
+
23
+ .button[data-colorHierarchy='gray/link'] {
24
+ background-color: #fff;
25
+ color: #080808;
26
+ padding: 0;
27
+ }
28
+
29
+ .button[data-colorHierarchy='brand/link'] {
30
+ background-color: #fff;
31
+ color: var(--primary-main);
32
+ padding: 0;
33
+ }
34
+
35
+ .button[data-colorHierarchy='destructive/primary'] {
36
+ background: var(--surface-error, #EA4621);
37
+ color: #fff;
38
+ }
39
+
40
+ .button[data-colorHierarchy='destructive/secondary'] {
41
+ background: var(--surface-error-secondary, #FDECE9);
42
+ color: var(--text-error, #EA4621);
43
+ }
44
+
45
+ .button[data-colorHierarchy='destructive/linkContainer'] {
46
+ background-color: #fff;
47
+ color: var(--text-error, #EA4621);
48
+ }
49
+
50
+ .button[data-colorHierarchy=''] {
51
+ background-color: #fff;
52
+ color: var(--text-error, #EA4621);
53
+ padding: 0;
54
+ }
package/src/components/CustomButton/css/color/disabled.css ADDED
@@ -0,0 +1,37 @@
1
+ .button[data-colorHierarchy="brand/primary"]:disabled {
2
+ background: var(--surface-disabled, #F1F1F1);
3
+ }
4
+
5
+ .button[data-colorHierarchy="gray/secondary"]:disabled {
6
+ background: var(--surface-disabled, #F1F1F1);
7
+ }
8
+
9
+ .button[data-colorHierarchy="white/secondary"]:disabled {
10
+ background: var(--surface-white---disabled, #FDFDFD);
11
+ }
12
+
13
+ /* .button[data-colorHierarchy="gray/linkContainer"]:disabled {
14
+ }
15
+
16
+ .button[data-colorHierarchy="gray/link"]:disabled {
17
+ }
18
+
19
+ .button[data-colorHierarchy="brand/link"]:disabled {
20
+ } */
21
+
22
+ .button[data-colorHierarchy="destructive/primary"]:disabled {
23
+ background: var(--surface-error-disabled, #FDECE9);
24
+ }
25
+
26
+ .button[data-colorHierarchy="destructive/secondary"]:disabled {
27
+ background: var(--surface-error-disabled, #FDECE9);
28
+
29
+
30
+ }
31
+
32
+ /* .button[data-colorHierarchy="destructive/linkContainer"]:disabled {
33
+ }
34
+
35
+ .button[data-colorHierarchy=""]:disabled {
36
+ } */
37
+
package/src/components/CustomButton/css/color/focused.css ADDED
@@ -0,0 +1,39 @@
1
+ .button[data-colorHierarchy="brand/primary"]:focus {
2
+ box-shadow: 0px 0px 0px 4px var(--primary-30, #b5c5e7);
3
+ }
4
+
5
+ .button[data-colorHierarchy="gray/secondary"]:focus {
6
+ box-shadow: 0px 0px 0px 4px var(--neutural-50, #e6e6e6);
7
+ }
8
+
9
+ .button[data-colorHierarchy="white/secondary"]:focus {
10
+ box-shadow: 0px 0px 0px 4px var(--neutural-50, #e6e6e6);
11
+ }
12
+
13
+ .button[data-colorHierarchy="gray/linkContainer"]:focus {
14
+ box-shadow: 0px 0px 0px 4px var(--neutural-50, #e6e6e6);
15
+ }
16
+
17
+ .button[data-colorHierarchy="gray/link"]:focus {
18
+ box-shadow: 0px 0px 0px 4px var(--neutural-50, #e6e6e6);
19
+ }
20
+
21
+ .button[data-colorHierarchy="brand/link"]:focus {
22
+ box-shadow: 0px 0px 0px 4px var(--primary-30, #b5c5e7);
23
+ }
24
+
25
+ .button[data-colorHierarchy="destructive/primary"]:focus {
26
+ box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
27
+ }
28
+
29
+ .button[data-colorHierarchy="destructive/secondary"]:focus {
30
+ box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
31
+ }
32
+
33
+ .button[data-colorHierarchy="destructive/linkContainer"]:focus {
34
+ box-shadow: 0px 0px 0px 4px var(--destructive-30, #F9C7BC);
35
+ }
36
+
37
+ .button[data-colorHierarchy=""]:focus {
38
+ box-shadow: 0px 0px 0px 4px var(--destructive-30, #F9C7BC);
39
+ }
package/src/components/CustomButton/css/color/hover.css ADDED
@@ -0,0 +1,39 @@
1
+ .button[data-colorHierarchy='brand/primary']:hover {
2
+ background: var(--surface-primary-hover, #08379E);
3
+ }
4
+
5
+ .button[data-colorHierarchy='gray/secondary']:hover {
6
+ background: var(--surface-secondary-hover, #ECECED);
7
+ }
8
+
9
+ .button[data-colorHierarchy='white/secondary']:hover {
10
+ background: var(--surface-white---hover, #F9F9F9);
11
+ }
12
+
13
+ .button[data-colorHierarchy='gray/linkContainer']:hover {
14
+ background: var(--surface-secondary, #F1F1F1);
15
+ }
16
+
17
+ .button[data-colorHierarchy='gray/link']:hover {
18
+ background-color: #fff;
19
+ }
20
+
21
+ .button[data-colorHierarchy='brand/link']:hover {
22
+ background-color: #fff;
23
+ }
24
+
25
+ .button[data-colorHierarchy='destructive/primary']:hover {
26
+ background: var(--surface-error-hover, #D33F1E);
27
+ }
28
+
29
+ .button[data-colorHierarchy='destructive/secondary']:hover {
30
+ background: var(--surface-error-secondary-hover, #FBDAD3);
31
+ }
32
+
33
+ .button[data-colorHierarchy='destructive/linkContainer']:hover {
34
+ background: var(--colors-red-5, #FEF6F4);
35
+ }
36
+
37
+ .button[data-colorHierarchy='']:hover {
38
+ background-color: #fff;
39
+ }
package/src/components/CustomButton/css/customButton.css ADDED
@@ -0,0 +1,74 @@
1
+
2
+ .button {
3
+ display: inline-flex;
4
+ justify-content: center;
5
+ align-items: center;
6
+ font-size: 14px;
7
+ font-weight: bold;
8
+ cursor: pointer;
9
+ transition: all 0.3s ease;
10
+ border: none;
11
+ }
12
+
13
+ /* .button[data-color='brand'] {
14
+ background-color: var(--brand-color, #093DB0);
15
+ color: #fff;
16
+ }
17
+
18
+ .button[data-color='gray'] {
19
+ background-color: var(--gray-color, #6c757d);
20
+ color: #fff;
21
+ }
22
+
23
+ .button[data-color='destructive'] {
24
+ background-color: var(--destructive-color, #dc3545);
25
+ color: #fff;
26
+ } */
27
+
28
+ /* .button[data-color='white'] {
29
+ background-color: #fff;
30
+ color: #000;
31
+ border: 1px solid var(--gray-color, #6c757d);
32
+ } */
33
+
34
+ /* .button[data-hierarchy='primary'] {
35
+ box-shadow: 0px 0px 0px 2px var(--primary-color, #007bff);
36
+ }
37
+
38
+ .button[data-hierarchy='secondary'] {
39
+ box-shadow: none;
40
+ border: 1px solid var(--secondary-color, #6c757d);
41
+ }
42
+
43
+ .button[data-hierarchy='link'] {
44
+ background: none;
45
+ border: none;
46
+ color: var(--brand-color, #007bff);
47
+ }
48
+
49
+ .button[data-hierarchy='linkContainer'] {
50
+ background-color: #f8f9fa;
51
+ color: var(--brand-color, #007bff);
52
+ border: 1px solid var(--gray-color, #6c757d);
53
+ } */
54
+
55
+ /*
56
+ .button[data-state='default'] {
57
+ opacity: 1;
58
+ }
59
+
60
+ .button[data-state='hover'] {
61
+ opacity: 0.9;
62
+ background: #08379E;
63
+
64
+ }
65
+
66
+ .button[data-state='focused'] {
67
+ box-shadow: 0px 0px 0px 4px var(--primary-30, #B5C5E7);
68
+ }
69
+
70
+ .button[data-state='disabled'] {
71
+ opacity: 0.5;
72
+ cursor: not-allowed;
73
+ }
74
+ */
package/src/components/CustomButton/css/size.css ADDED
@@ -0,0 +1,23 @@
1
+ .button[data-size='sm'] {
2
+ padding: 8px 12px;
3
+ gap: 8px;
4
+ border-radius: 12px;
5
+ }
6
+
7
+ .button[data-size='md'] {
8
+ padding: 10px 14px;
9
+ gap: 8px;
10
+ border-radius: 12px;
11
+ }
12
+
13
+ .button[data-size='lg'] {
14
+ padding: 12px 16px;
15
+ gap: 10px;
16
+ border-radius: 12px;
17
+ }
18
+
19
+ .button[data-size='xl'] {
20
+ padding: 16px 24px;
21
+ gap: 12px;
22
+ border-radius: 16px;
23
+ }
package/src/components/CustomCheckbox.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+
3
+ type CustomCheckboxProps = {
4
+ checked: boolean;
5
+ onChange: (checked: boolean) => void;
6
+ label?: string;
7
+ disabled?: boolean;
8
+ };
9
+
10
+ const CustomCheckbox: React.FC<CustomCheckboxProps> = ({ checked, onChange, label, disabled }) => {
11
+ return (
12
+ <label className="flex items-center space-x-3">
13
+ <input
14
+ type="checkbox"
15
+ checked={checked}
16
+ onChange={(e) => onChange(e.target.checked)}
17
+ disabled={disabled}
18
+ />
19
+ {label && <span>{label}</span>}
20
+ </label>
21
+ );
22
+ };
23
+
24
+ export default CustomCheckbox;
package/src/components/CustomInput.tsx ADDED
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+
3
+ type CustomInputProps = {
4
+ value: string;
5
+ onChange: (value: string) => void;
6
+ placeholder?: string;
7
+ disabled?: boolean;
8
+ };
9
+
10
+ const CustomInput: React.FC<CustomInputProps> = ({ value, onChange, placeholder, disabled }) => {
11
+ return (
12
+ <input
13
+ className="border py-2 px-4 rounded"
14
+ value={value}
15
+ onChange={(e) => onChange(e.target.value)}
16
+ placeholder={placeholder}
17
+ disabled={disabled}
18
+ />
19
+ );
20
+ };
21
+
22
+ export default CustomInput;
package/src/components/Typography/Typography.tsx ADDED
@@ -0,0 +1,26 @@
1
+ import { Typography, TypographyProps } from "@mui/material";
2
+ type category = "display" | "heading" | "text";
3
+ type size = "sm" | "md" | "lg" | "xl" | "xxl";
4
+ type textType = `${category}/${size}`;
5
+ type bold = "semibold" | "bold" | "extrabold";
6
+
7
+ interface TypegraphyCustomType extends TypographyProps {
8
+ textType?: textType;
9
+ bold?: bold;
10
+ }
11
+
12
+ const TypographyCustom: React.FC<TypegraphyCustomType> = ({
13
+ children,
14
+ textType,
15
+ bold,
16
+ sx,
17
+ ...props
18
+ }) => {
19
+ return (
20
+ <Typography sx={{ fontFamily: '"Plus Jakarta Sans", sans-serif', ...sx }} {...props}>
21
+ {children}
22
+ </Typography>
23
+ );
24
+ };
25
+
26
+ export default TypographyCustom;
package/src/components/Typography/css/bold.css ADDED
@@ -0,0 +1 @@
1
+ /* text bold css*/
package/src/components/Typography/css/size.css ADDED
@@ -0,0 +1 @@
1
+ /* text size css */
package/src/index.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { default as Button } from './components/CustomButton/CustomButton';
2
+ export { default as CustomInput } from './components/CustomInput';
3
+ export { default as CustomCheckbox } from './components/CustomCheckbox';
package/src/playground/App.tsx ADDED
@@ -0,0 +1,104 @@
1
+ import React, { useState } from "react";
2
+ import { Button, CustomInput, CustomCheckbox } from "../";
3
+ import { ButtonSize, ButtonColorHierarchyType, buttonColorHierarchyArray } from "../components/CustomButton/CustomButtonTypes";
4
+
5
+
6
+ function extractPossibleChoices(type: ButtonColorHierarchyType): string[] {
7
+ console.log(type);
8
+ return [...new Set(type.split('|').map(t => t.trim()))];
9
+ }
10
+
11
+ const App: React.FC = () => {
12
+ const [size, setSize] = useState<ButtonSize>("md");
13
+ const [colorHierarchy, setColorHierarchy] = useState<ButtonColorHierarchyType>("brand/primary");
14
+
15
+ const [disabled, setDisabled] = useState<boolean>(false);
16
+ const [text, setText] = useState<string>("Test Button");
17
+
18
+ const [inputValue, setInputValue] = useState("");
19
+ const [checkboxChecked, setCheckboxChecked] = useState(false);
20
+
21
+ return (
22
+ <div className="playground-container">
23
+ <div className="controls">
24
+ <h2 className="controls-title">Controls</h2>
25
+ <div className="control-item">
26
+ <label htmlFor="size">Size</label>
27
+ <select
28
+ id="size"
29
+ value={size}
30
+ onChange={(e) => setSize(e.target.value as "sm" | "md" | "lg")}
31
+ >
32
+ <option value="sm">Small</option>
33
+ <option value="md">Medium</option>
34
+ <option value="lg">Large</option>
35
+ <option value="xl">Extra Large</option>
36
+ </select>
37
+ </div>
38
+
39
+ <div className="control-item">
40
+ <label htmlFor="colorHierarchy">Color Hierarchy</label>
41
+ <select
42
+ id="colorHierarchy"
43
+ value={colorHierarchy}
44
+ onChange={(e) => setColorHierarchy(e.target.value as ButtonColorHierarchyType)}
45
+ >
46
+ {buttonColorHierarchyArray.map((colorHierarchy, index) => (
47
+ <option key={index} value={colorHierarchy}>{colorHierarchy}</option>
48
+ ))}
49
+ </select>
50
+ </div>
51
+
52
+ <div className="control-item">
53
+ <label htmlFor="disabled">Disabled</label>
54
+ <input
55
+ type="checkbox"
56
+ id="disabled"
57
+ checked={disabled}
58
+ onChange={(e) => setDisabled(e.target.checked)}
59
+ />
60
+ </div>
61
+
62
+ <div className="control-item">
63
+ <label htmlFor="text">Text</label>
64
+ <input
65
+ type="text"
66
+ id="text"
67
+ value={text}
68
+ onChange={(e) => setText(e.target.value)}
69
+ />
70
+ </div>
71
+ </div>
72
+
73
+ <div className="preview">
74
+ <h2 className="preview-title">Preview</h2>
75
+ <Button
76
+ size={size}
77
+ colorHierarchy={colorHierarchy}
78
+ disabled={disabled}
79
+ text={text}
80
+ onClick={() => alert("Button clicked!")}
81
+ />
82
+ </div>
83
+
84
+ <div className="mb-4">
85
+ <h2 className="text-xl mb-2">Custom Input</h2>
86
+ <CustomInput
87
+ value={inputValue}
88
+ onChange={setInputValue}
89
+ placeholder="Type here..."
90
+ />
91
+ </div>
92
+ <div className="mb-4">
93
+ <h2 className="text-xl mb-2">Custom Checkbox</h2>
94
+ <CustomCheckbox
95
+ checked={checkboxChecked}
96
+ onChange={setCheckboxChecked}
97
+ label="Check me"
98
+ />
99
+ </div>
100
+ </div>
101
+ );
102
+ };
103
+
104
+ export default App;
package/src/playground/main.tsx ADDED
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom/client';
3
+ import App from './App';
4
+
5
+ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
6
+ <React.StrictMode>
7
+ <App />
8
+ </React.StrictMode>
9
+ );
package/tsconfig.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "es6",
4
+ "module": "esnext",
5
+ "jsx": "react-jsx",
6
+ "strict": true,
7
+ "moduleResolution": "node",
8
+ "esModuleInterop": true,
9
+ "skipLibCheck": true,
10
+ "forceConsistentCasingInFileNames": true,
11
+ "declaration": true,
12
+ "outDir": "dist"
13
+ },
14
+ "include": ["src"],
15
+ "exclude": ["node_modules", "dist"]
16
+ }
17
+
package/vite.config.ts ADDED
@@ -0,0 +1,28 @@
1
+ import { defineConfig } from 'vite';
2
+ import react from '@vitejs/plugin-react';
3
+
4
+ export default defineConfig({
5
+ plugins: [react()],
6
+ build: {
7
+ lib: {
8
+ entry: 'src/index.ts',
9
+ name: 'CustomComponents',
10
+ fileName: (format) => `custom-components.${format}.js`
11
+ },
12
+ rollupOptions: {
13
+ external: ['react', 'react-dom'],
14
+ output: {
15
+ globals: {
16
+ react: 'React',
17
+ 'react-dom': 'ReactDOM'
18
+ }
19
+ }
20
+ }
21
+ },
22
+ server: {
23
+ port: 3003,
24
+ watch: {
25
+ usePolling: true,
26
+ },
27
+ },
28
+ });