@dev-blinq/ui-systems 1.0.0 → 1.0.1

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 (20) hide show
  1. package/package.json +7 -2
  2. package/src/components/CustomButton/CustomButton.tsx +1 -2
  3. package/src/components/CustomButton/CustomButtonProps.ts +2 -2
  4. package/src/components/CustomButton/CustomButtonTypes.ts +26 -10
  5. package/src/components/CustomButton/css/color/default.css +50 -50
  6. package/src/components/CustomButton/css/color/disabled.css +20 -23
  7. package/src/components/CustomButton/css/color/focused.css +2 -2
  8. package/src/components/CustomButton/css/color/hover.css +39 -39
  9. package/src/components/CustomButton/css/customButton.css +0 -1
  10. package/src/components/CustomButton/css/size.css +23 -23
  11. package/src/components/CustomCheckbox.tsx +2 -7
  12. package/src/components/CustomInput.tsx +1 -1
  13. package/src/components/Typography/Typography.tsx +2 -8
  14. package/src/components/Typography/css/bold.css +1 -1
  15. package/src/components/Typography/css/size.css +1 -1
  16. package/src/index.ts +3 -3
  17. package/src/playground/App.tsx +17 -34
  18. package/src/playground/main.tsx +4 -4
  19. package/tsup.config.ts +10 -0
  20. package/vite.config.ts +0 -28
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "@dev-blinq/ui-systems",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "this package contains all ui components like button, input, checkbox, colors that blinq.io needs",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
7
+ "module": "./dist/index.mjs",
7
8
  "scripts": {
8
9
  "start": "npx vite --host",
9
10
  "test": "echo \"Error: no test specified\" && exit 1",
10
- "build": "tsc && cp ./package.json ./build"
11
+ "build": "tsup --minify terser"
11
12
  },
12
13
  "author": "",
13
14
  "license": "ISC",
@@ -16,7 +17,11 @@
16
17
  "@types/react-dom": "^18.3.0",
17
18
  "@vitejs/plugin-react": "^4.3.1",
18
19
  "react-dom": "^18.3.1",
20
+ "tsup": "^8.2.3",
19
21
  "typescript": "^5.5.4",
20
22
  "vite": "^5.3.5"
23
+ },
24
+ "devDependencies": {
25
+ "terser": "^5.31.3"
21
26
  }
22
27
  }
package/src/components/CustomButton/CustomButton.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { CustomButtonProps } from "./CustomButtonProps";
3
- import "./css/customButton.css";
3
+ import "./css/customButton.css";
4
4
  import "./css/size.css";
5
5
  import "./css/color/default.css";
6
6
  import "./css/color/hover.css";
@@ -9,7 +9,6 @@ import "./css/color/disabled.css";
9
9
 
10
10
  import { useState } from "react";
11
11
 
12
-
13
12
  const CustomButton: React.FC<CustomButtonProps> = ({
14
13
  size = "md",
15
14
  colorHierarchy = "brand/primary",
package/src/components/CustomButton/CustomButtonProps.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { ButtonSize, ButtonColorHierarchyType } from './CustomButtonTypes';
2
- import { ReactNode } from 'react';
1
+ import { ButtonSize, ButtonColorHierarchyType } from "./CustomButtonTypes";
2
+ import { ReactNode } from "react";
3
3
 
4
4
  export interface CustomButtonProps {
5
5
  size?: ButtonSize;
package/src/components/CustomButton/CustomButtonTypes.ts CHANGED
@@ -1,12 +1,28 @@
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';
1
+ export type ButtonSize = "sm" | "md" | "lg" | "xl";
2
+ export type ButtonColor = "brand" | "gray" | "destructive" | "white";
3
+ export type ButtonHierarchy = "primary" | "secondary" | "link" | "linkContainer";
4
+ export type ButtonState = "default" | "hover" | "focused" | "disabled";
6
5
  export type ButtonColorHierarchyType = `${ButtonColor}/${ButtonHierarchy}`;
7
6
 
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'];
7
+ export const buttonSizeArray: ButtonSize[] = ["sm", "md", "lg", "xl"];
8
+ export const buttonColorArray: ButtonColor[] = ["brand", "gray", "destructive", "white"];
9
+ export const buttonHierarchyArray: ButtonHierarchy[] = ["primary", "secondary", "link", "linkContainer"];
10
+ export const buttonStateArray: ButtonState[] = ["default", "hover", "focused", "disabled"];
11
+ export const buttonColorHierarchyArray: ButtonColorHierarchyType[] = [
12
+ "brand/primary",
13
+ "brand/secondary",
14
+ "brand/link",
15
+ "brand/linkContainer",
16
+ "gray/primary",
17
+ "gray/secondary",
18
+ "gray/link",
19
+ "gray/linkContainer",
20
+ "destructive/primary",
21
+ "destructive/secondary",
22
+ "destructive/link",
23
+ "destructive/linkContainer",
24
+ "white/primary",
25
+ "white/secondary",
26
+ "white/link",
27
+ "white/linkContainer",
28
+ ];
package/src/components/CustomButton/css/color/default.css CHANGED
@@ -1,54 +1,54 @@
1
- .button[data-colorHierarchy='brand/primary'] {
1
+ .button[data-colorHierarchy="brand/primary"] {
2
2
  background-color: var(--primary-main);
3
3
  color: #fff; /* text color */
4
4
  }
5
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
- }
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 CHANGED
@@ -1,16 +1,16 @@
1
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 {
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
14
  }
15
15
 
16
16
  .button[data-colorHierarchy="gray/link"]:disabled {
@@ -18,20 +18,17 @@
18
18
 
19
19
  .button[data-colorHierarchy="brand/link"]:disabled {
20
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
21
 
22
+ .button[data-colorHierarchy="destructive/primary"]:disabled {
23
+ background: var(--surface-error-disabled, #fdece9);
24
+ }
29
25
 
30
- }
31
-
32
- /* .button[data-colorHierarchy="destructive/linkContainer"]:disabled {
26
+ .button[data-colorHierarchy="destructive/secondary"]:disabled {
27
+ background: var(--surface-error-disabled, #fdece9);
28
+ }
29
+
30
+ /* .button[data-colorHierarchy="destructive/linkContainer"]:disabled {
33
31
  }
34
32
 
35
33
  .button[data-colorHierarchy=""]:disabled {
36
34
  } */
37
-
package/src/components/CustomButton/css/color/focused.css CHANGED
@@ -31,9 +31,9 @@
31
31
  }
32
32
 
33
33
  .button[data-colorHierarchy="destructive/linkContainer"]:focus {
34
- box-shadow: 0px 0px 0px 4px var(--destructive-30, #F9C7BC);
34
+ box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
35
35
  }
36
36
 
37
37
  .button[data-colorHierarchy=""]:focus {
38
- box-shadow: 0px 0px 0px 4px var(--destructive-30, #F9C7BC);
38
+ box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
39
39
  }
package/src/components/CustomButton/css/color/hover.css CHANGED
@@ -1,39 +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
- }
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 CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  .button {
3
2
  display: inline-flex;
4
3
  justify-content: center;
package/src/components/CustomButton/css/size.css CHANGED
@@ -1,23 +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
- }
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 CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
 
3
3
  type CustomCheckboxProps = {
4
4
  checked: boolean;
@@ -10,12 +10,7 @@ type CustomCheckboxProps = {
10
10
  const CustomCheckbox: React.FC<CustomCheckboxProps> = ({ checked, onChange, label, disabled }) => {
11
11
  return (
12
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
- />
13
+ <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} disabled={disabled} />
19
14
  {label && <span>{label}</span>}
20
15
  </label>
21
16
  );
package/src/components/CustomInput.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
 
3
3
  type CustomInputProps = {
4
4
  value: string;
package/src/components/Typography/Typography.tsx CHANGED
@@ -2,20 +2,14 @@ import { Typography, TypographyProps } from "@mui/material";
2
2
  type category = "display" | "heading" | "text";
3
3
  type size = "sm" | "md" | "lg" | "xl" | "xxl";
4
4
  type textType = `${category}/${size}`;
5
- type bold = "semibold" | "bold" | "extrabold";
5
+ type bold = "semibold" | "bold" | "extrabold";
6
6
 
7
7
  interface TypegraphyCustomType extends TypographyProps {
8
8
  textType?: textType;
9
9
  bold?: bold;
10
10
  }
11
11
 
12
- const TypographyCustom: React.FC<TypegraphyCustomType> = ({
13
- children,
14
- textType,
15
- bold,
16
- sx,
17
- ...props
18
- }) => {
12
+ const TypographyCustom: React.FC<TypegraphyCustomType> = ({ children, textType, bold, sx, ...props }) => {
19
13
  return (
20
14
  <Typography sx={{ fontFamily: '"Plus Jakarta Sans", sans-serif', ...sx }} {...props}>
21
15
  {children}
package/src/components/Typography/css/bold.css CHANGED
@@ -1 +1 @@
1
- /* text bold css*/
1
+ /* text bold css*/
package/src/components/Typography/css/size.css CHANGED
@@ -1 +1 @@
1
- /* text size css */
1
+ /* text size css */
package/src/index.ts CHANGED
@@ -1,3 +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';
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 CHANGED
@@ -1,11 +1,14 @@
1
1
  import React, { useState } from "react";
2
2
  import { Button, CustomInput, CustomCheckbox } from "../";
3
- import { ButtonSize, ButtonColorHierarchyType, buttonColorHierarchyArray } from "../components/CustomButton/CustomButtonTypes";
4
-
3
+ import {
4
+ ButtonSize,
5
+ ButtonColorHierarchyType,
6
+ buttonColorHierarchyArray,
7
+ } from "../components/CustomButton/CustomButtonTypes";
5
8
 
6
9
  function extractPossibleChoices(type: ButtonColorHierarchyType): string[] {
7
- console.log(type);
8
- return [...new Set(type.split('|').map(t => t.trim()))];
10
+ console.log(type);
11
+ return [...new Set(type.split("|").map((t) => t.trim()))];
9
12
  }
10
13
 
11
14
  const App: React.FC = () => {
@@ -24,11 +27,7 @@ const App: React.FC = () => {
24
27
  <h2 className="controls-title">Controls</h2>
25
28
  <div className="control-item">
26
29
  <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
- >
30
+ <select id="size" value={size} onChange={(e) => setSize(e.target.value as "sm" | "md" | "lg")}>
32
31
  <option value="sm">Small</option>
33
32
  <option value="md">Medium</option>
34
33
  <option value="lg">Large</option>
@@ -42,31 +41,23 @@ const App: React.FC = () => {
42
41
  id="colorHierarchy"
43
42
  value={colorHierarchy}
44
43
  onChange={(e) => setColorHierarchy(e.target.value as ButtonColorHierarchyType)}
45
- >
44
+ >
46
45
  {buttonColorHierarchyArray.map((colorHierarchy, index) => (
47
- <option key={index} value={colorHierarchy}>{colorHierarchy}</option>
46
+ <option key={index} value={colorHierarchy}>
47
+ {colorHierarchy}
48
+ </option>
48
49
  ))}
49
- </select>
50
+ </select>
50
51
  </div>
51
52
 
52
53
  <div className="control-item">
53
54
  <label htmlFor="disabled">Disabled</label>
54
- <input
55
- type="checkbox"
56
- id="disabled"
57
- checked={disabled}
58
- onChange={(e) => setDisabled(e.target.checked)}
59
- />
55
+ <input type="checkbox" id="disabled" checked={disabled} onChange={(e) => setDisabled(e.target.checked)} />
60
56
  </div>
61
57
 
62
58
  <div className="control-item">
63
59
  <label htmlFor="text">Text</label>
64
- <input
65
- type="text"
66
- id="text"
67
- value={text}
68
- onChange={(e) => setText(e.target.value)}
69
- />
60
+ <input type="text" id="text" value={text} onChange={(e) => setText(e.target.value)} />
70
61
  </div>
71
62
  </div>
72
63
 
@@ -83,19 +74,11 @@ const App: React.FC = () => {
83
74
 
84
75
  <div className="mb-4">
85
76
  <h2 className="text-xl mb-2">Custom Input</h2>
86
- <CustomInput
87
- value={inputValue}
88
- onChange={setInputValue}
89
- placeholder="Type here..."
90
- />
77
+ <CustomInput value={inputValue} onChange={setInputValue} placeholder="Type here..." />
91
78
  </div>
92
79
  <div className="mb-4">
93
80
  <h2 className="text-xl mb-2">Custom Checkbox</h2>
94
- <CustomCheckbox
95
- checked={checkboxChecked}
96
- onChange={setCheckboxChecked}
97
- label="Check me"
98
- />
81
+ <CustomCheckbox checked={checkboxChecked} onChange={setCheckboxChecked} label="Check me" />
99
82
  </div>
100
83
  </div>
101
84
  );
package/src/playground/main.tsx CHANGED
@@ -1,8 +1,8 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom/client';
3
- import App from './App';
1
+ import React from "react";
2
+ import ReactDOM from "react-dom/client";
3
+ import App from "./App";
4
4
 
5
- ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
5
+ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
6
6
  <React.StrictMode>
7
7
  <App />
8
8
  </React.StrictMode>
package/tsup.config.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { defineConfig } from "tsup";
2
+
3
+ export default defineConfig({
4
+ entry: ["src/index.ts"],
5
+ format: ["cjs", "esm"], // Build for commonJS and ESmodules
6
+ dts: true, // Generate declaration file (.d.ts)
7
+ splitting: false,
8
+ sourcemap: true,
9
+ clean: true,
10
+ });
package/vite.config.ts DELETED
@@ -1,28 +0,0 @@
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
- });