mainstack-design-system 0.0.5 → 0.0.7

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 (8) hide show
  1. package/package.json +1 -1
  2. package/src/components/Avatars/index.tsx +6 -4
  3. package/src/components/InputFields/Input.tsx +10 -9
  4. package/src/components/InputFields/SearchInput.tsx +3 -5
  5. package/src/components/InputFields/TextArea.tsx +3 -4
  6. package/src/components/InputFields/UsernameInput.tsx +6 -6
  7. package/src/icons/SearchNormalIcon.tsx +2 -2
  8. package/vite.config.ts +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mainstack-design-system",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite",
package/src/components/Avatars/index.tsx CHANGED
@@ -2,8 +2,6 @@
2
2
 
3
3
  import { Circle, Image, Text } from "@chakra-ui/react";
4
4
  import Colors from "components/styleGuide/Colors";
5
- import { ReactComponent as DPIcon } from "assets/svgs/personal_profile_avatar.svg";
6
- import { ReactComponent as StoreIcon } from "assets/svgs/store_avatar.svg";
7
5
 
8
6
  const Variant = {
9
7
  xs: {
@@ -87,12 +85,16 @@ const Avatar = (props: ImageAvatarProp | InitialsAvatarProp) => {
87
85
  height={Variant[props.size].size}
88
86
  fallback={
89
87
  props?.fallback === "store" ? (
90
- <StoreIcon
88
+ <Image
89
+ alt="store-avatar"
90
+ src="https://res.cloudinary.com/mainstack-co/image/upload/v1704813319/Design%20System%20Assets/store_avatar.png"
91
91
  width={Variant[props.size].size}
92
92
  height={Variant[props.size].size}
93
93
  />
94
94
  ) : props?.fallback === "picture" ? (
95
- <DPIcon
95
+ <Image
96
+ alt="person-avatar"
97
+ src="https://res.cloudinary.com/mainstack-co/image/upload/v1704813319/Design%20System%20Assets/person_avatar.png"
96
98
  width={Variant[props.size].size}
97
99
  height={Variant[props.size].size}
98
100
  />
package/src/components/InputFields/Input.tsx CHANGED
@@ -12,11 +12,12 @@ import {
12
12
  } from "@chakra-ui/react";
13
13
  import Paragraph from "components/Typography/Paragraph";
14
14
  import Colors from "components/styleGuide/Colors";
15
- // This will change when we build icon components
16
- import { ReactComponent as ViewIcon } from "assets/svgs/viewIcon.svg";
17
- import { ReactComponent as ViewOffIcon } from "assets/svgs/viewOffIcon.svg";
18
- import { ReactComponent as ErrorIcon } from "assets/svgs/error_message_icon.svg";
19
- import { ReactComponent as SuccessIcon } from "assets/svgs/check_circle.svg";
15
+ import {
16
+ CheckCircleFilledIcon,
17
+ InfoIcon,
18
+ VisibilityIcon,
19
+ VisibilityOffIcon,
20
+ } from "icons";
20
21
  import { useState } from "react";
21
22
 
22
23
  export interface IInput extends InputProps {
@@ -70,14 +71,14 @@ const Input = ({
70
71
  <InputRightElement py="12px">
71
72
  <Box onClick={() => setShow((prevState) => !prevState)}>
72
73
  {show ? (
73
- <ViewIcon
74
+ <VisibilityIcon
74
75
  style={{
75
76
  fill: "#56616B",
76
77
  cursor: "pointer",
77
78
  }}
78
79
  />
79
80
  ) : (
80
- <ViewOffIcon
81
+ <VisibilityOffIcon
81
82
  style={{
82
83
  fill: "#56616B",
83
84
  cursor: "pointer",
@@ -152,14 +153,14 @@ const Input = ({
152
153
  <Box mt="8px">
153
154
  {success && successMessage ? (
154
155
  <Flex alignItems={"center"} gap="6px">
155
- <SuccessIcon />
156
+ <CheckCircleFilledIcon color={Colors.green600} />
156
157
  <Paragraph color={Colors.green600} size={"xxs"}>
157
158
  {successMessage}
158
159
  </Paragraph>
159
160
  </Flex>
160
161
  ) : error && errorMessage ? (
161
162
  <Flex alignItems={"center"} gap="6px">
162
- <ErrorIcon />
163
+ <InfoIcon color={Colors.red500} />
163
164
  <Paragraph color={Colors.red500} size={"xxs"}>
164
165
  {errorMessage}
165
166
  </Paragraph>
package/src/components/InputFields/SearchInput.tsx CHANGED
@@ -8,9 +8,7 @@ import {
8
8
  InputRightElement,
9
9
  } from "@chakra-ui/react";
10
10
  import Colors from "components/styleGuide/Colors";
11
- // This will change when we build icon components
12
- import { ReactComponent as CloseIcon } from "assets/svgs/close-circle.svg";
13
- import { ReactComponent as SearchIcon } from "assets/svgs/search-normal.svg";
11
+ import { CancelFilledIcon, SearchNormalIcon } from "icons";
14
12
 
15
13
  export interface ISearchInput extends InputProps {
16
14
  name: string;
@@ -39,11 +37,11 @@ const SearchInput = ({
39
37
  return (
40
38
  <InputGroup>
41
39
  <InputLeftElement py="12px" ml="4px">
42
- <SearchIcon />
40
+ <SearchNormalIcon color={Colors.gray200} />
43
41
  </InputLeftElement>
44
42
  {value && (
45
43
  <InputRightElement py="12px" mr="8px" onClick={onClear}>
46
- <CloseIcon />
44
+ <CancelFilledIcon />
47
45
  </InputRightElement>
48
46
  )}
49
47
 
package/src/components/InputFields/TextArea.tsx CHANGED
@@ -10,8 +10,7 @@ import {
10
10
  import Paragraph from "components/Typography/Paragraph";
11
11
  import Colors from "components/styleGuide/Colors";
12
12
  import { useState } from "react";
13
- // This will change when we build icon components
14
- import { ReactComponent as ErrorIcon } from "assets/svgs/error_message_icon.svg";
13
+ import { InfoIcon } from "icons";
15
14
 
16
15
  interface ITextArea extends TextareaProps {
17
16
  label: string;
@@ -129,14 +128,14 @@ const TextArea = ({
129
128
  <Box mt="8px">
130
129
  {error && errorMessage ? (
131
130
  <Flex alignItems={"center"} gap="6px">
132
- <ErrorIcon />
131
+ <InfoIcon color={Colors.red500} />
133
132
  <Paragraph color={Colors.red500} size={"xxs"}>
134
133
  {errorMessage}
135
134
  </Paragraph>
136
135
  </Flex>
137
136
  ) : exceedLimit ? (
138
137
  <Flex alignItems={"center"} gap="6px">
139
- <ErrorIcon />
138
+ <InfoIcon color={Colors.red500} />
140
139
  <Paragraph color={Colors.red500} size={"xxs"}>
141
140
  Text cannot be more than {textLimit || 200} characters long.
142
141
  </Paragraph>
package/src/components/InputFields/UsernameInput.tsx CHANGED
@@ -14,9 +14,7 @@ import {
14
14
  } from "@chakra-ui/react";
15
15
  import Paragraph from "components/Typography/Paragraph";
16
16
  import Colors from "components/styleGuide/Colors";
17
- // This will change when we build icon components
18
- import { ReactComponent as ErrorIcon } from "assets/svgs/error_message_icon.svg";
19
- import { ReactComponent as SuccessIcon } from "assets/svgs/check_circle.svg";
17
+ import { CheckCircleFilledIcon, InfoIcon } from "icons";
20
18
 
21
19
  interface IInput extends InputProps {
22
20
  label: string;
@@ -48,6 +46,7 @@ const UsernameInput = ({
48
46
  isNotAvailable,
49
47
  errorMessage,
50
48
  width,
49
+ ...props
51
50
  }: IInput) => {
52
51
  const usernameprefix = "username";
53
52
  return (
@@ -60,6 +59,7 @@ const UsernameInput = ({
60
59
  fontWeight={600}
61
60
  mb="10px"
62
61
  mt="0"
62
+ {...props}
63
63
  >
64
64
  {label}
65
65
  </Text>
@@ -71,7 +71,7 @@ const UsernameInput = ({
71
71
  </InputLeftElement>
72
72
  <InputRightElement py="24px">
73
73
  {isChecking && <Spinner size={"sm"} />}
74
- {isAvailable && <SuccessIcon />}
74
+ {isAvailable && <CheckCircleFilledIcon color={Colors.green600} />}
75
75
  </InputRightElement>
76
76
  <ChakraInput
77
77
  name={name}
@@ -85,7 +85,7 @@ const UsernameInput = ({
85
85
  bg={Colors.white100}
86
86
  borderRadius="12px"
87
87
  border="none"
88
- fontFamily={"Degular"}
88
+ fontFamily={props?.fontFamily ?? "Degular"}
89
89
  fontSize={"16px"}
90
90
  lineHeight={"24px"}
91
91
  letterSpacing={"-0.2px"}
@@ -131,7 +131,7 @@ const UsernameInput = ({
131
131
  <Box mt="8px">
132
132
  {isNotAvailable && errorMessage && (
133
133
  <Flex alignItems={"center"} gap="6px">
134
- <ErrorIcon />
134
+ <InfoIcon color={Colors.red500} />
135
135
  <Paragraph color={Colors.red500} size={"xxs"}>
136
136
  {errorMessage}
137
137
  </Paragraph>
package/src/icons/SearchNormalIcon.tsx CHANGED
@@ -13,14 +13,14 @@ const SearchNormalIcon = (props: IconProps) => {
13
13
  >
14
14
  <path
15
15
  d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
16
- stroke="#131316"
16
+ stroke="currentColor"
17
17
  strokeWidth="1.5"
18
18
  strokeLinecap="round"
19
19
  strokeLinejoin="round"
20
20
  />
21
21
  <path
22
22
  d="M22 22L20 20"
23
- stroke="#131316"
23
+ stroke="currentColor"
24
24
  strokeWidth="1.5"
25
25
  strokeLinecap="round"
26
26
  strokeLinejoin="round"
package/vite.config.ts CHANGED
@@ -28,4 +28,9 @@ export default defineConfig({
28
28
  transformMixedEsModules: true,
29
29
  },
30
30
  },
31
+ optimizeDeps: {
32
+ esbuildOptions: {
33
+ jsx: "automatic",
34
+ },
35
+ },
31
36
  });