mainstack-design-system 0.0.4 → 0.0.6

package/README.md

@@ -12,29 +12,26 @@ To view the design system documentation, visit this [link](https://mainstack-des
 
 ## Components
 
-Components can be used by importing from the `src/components` directory. For example:
+Components can be used by importing from the `'mainstack-design-system/src` directory. For example:
 
-`import { Button } from 'mainstack-design-system/src/components/Buttons';`
+`import { Button } from 'mainstack-design-system/src';`
 
 ## Icons
 
-Icons are imported from the `src/icons` directory. For example:
+Icons are imported from the `'mainstack-design-system/src` directory. For example:
 
-`import { ArrowRight } from 'mainstack-design-system/src/icons';`
+`import { ArrowRightIcon } from 'mainstack-design-system/src';`
 
 ## Colors
 
-Colors are imported from the `mainstack-design-system/src/components/styleGuide` directory. For example:
+Colors are imported from the `mainstack-design-system/src` directory. For example:
 
 ```
-	import Colors from "mainstack-design-system/components/styleGuide/Colors";
+ import {Colors} from "mainstack-design-system/src";
 
-	<Text color={Colors.black300}>Hello World</Text>
+ <Text color={Colors.black300}>Hello World</Text>
 ```
 
-Conventional Commits is a specification for adding human and machine readable meaning to commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with [SemVer](https://semver.org), by describing the features, fixes, and breaking changes made in commit messages.
-[more info](https://www.conventionalcommits.org/en/v1.0.0/)
-
 ## Contributing
 
 Installing the application (as a developer) is simple in the following steps:
@@ -54,7 +51,7 @@ git clone git clone https://github.com/The-Mainstack/mainstack-design-system.git
 - Navigate into the cloned directory and install dependencies with Yarn
 
 ```yarn
-yarn install
+yarn add
 ```
 
 - Make a duplicate of the **env** file and update its content accordingly. Most times, this is just fine with no update.
@@ -67,7 +64,7 @@ cp .env.sample .env
   Open [http://localhost:[port]](http://localhost:[port]) to view it in the browser and start developing.
 
 ```yarn
-yarn run dev
+yarn dev
 ```
 
 To run storybook, run the following command:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mainstack-design-system",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/Avatars/index.tsx

@@ -2,8 +2,6 @@
 
 import { Circle, Image, Text } from "@chakra-ui/react";
 import Colors from "components/styleGuide/Colors";
-import { ReactComponent as DPIcon } from "assets/svgs/personal_profile_avatar.svg";
-import { ReactComponent as StoreIcon } from "assets/svgs/store_avatar.svg";
 
 const Variant = {
   xs: {
@@ -87,12 +85,16 @@ const Avatar = (props: ImageAvatarProp | InitialsAvatarProp) => {
           height={Variant[props.size].size}
           fallback={
             props?.fallback === "store" ? (
-              <StoreIcon
+              <Image
+                alt="store-avatar"
+                src="https://res.cloudinary.com/mainstack-co/image/upload/v1704813319/Design%20System%20Assets/store_avatar.png"
                 width={Variant[props.size].size}
                 height={Variant[props.size].size}
               />
             ) : props?.fallback === "picture" ? (
-              <DPIcon
+              <Image
+                alt="person-avatar"
+                src="https://res.cloudinary.com/mainstack-co/image/upload/v1704813319/Design%20System%20Assets/person_avatar.png"
                 width={Variant[props.size].size}
                 height={Variant[props.size].size}
               />

package/src/components/InputFields/Input.tsx

@@ -12,11 +12,12 @@ import {
 } from "@chakra-ui/react";
 import Paragraph from "components/Typography/Paragraph";
 import Colors from "components/styleGuide/Colors";
-// This will change when we build icon components
-import { ReactComponent as ViewIcon } from "assets/svgs/viewIcon.svg";
-import { ReactComponent as ViewOffIcon } from "assets/svgs/viewOffIcon.svg";
-import { ReactComponent as ErrorIcon } from "assets/svgs/error_message_icon.svg";
-import { ReactComponent as SuccessIcon } from "assets/svgs/check_circle.svg";
+import {
+  CheckCircleFilledIcon,
+  InfoIcon,
+  VisibilityIcon,
+  VisibilityOffIcon,
+} from "icons";
 import { useState } from "react";
 
 export interface IInput extends InputProps {
@@ -70,14 +71,14 @@ const Input = ({
           <InputRightElement py="12px">
             <Box onClick={() => setShow((prevState) => !prevState)}>
               {show ? (
-                <ViewIcon
+                <VisibilityIcon
                   style={{
                     fill: "#56616B",
                     cursor: "pointer",
                   }}
                 />
               ) : (
-                <ViewOffIcon
+                <VisibilityOffIcon
                   style={{
                     fill: "#56616B",
                     cursor: "pointer",
@@ -152,14 +153,14 @@ const Input = ({
       <Box mt="8px">
         {success && successMessage ? (
           <Flex alignItems={"center"} gap="6px">
-            <SuccessIcon />
+            <CheckCircleFilledIcon color={Colors.green600} />
             <Paragraph color={Colors.green600} size={"xxs"}>
               {successMessage}
             </Paragraph>
           </Flex>
         ) : error && errorMessage ? (
           <Flex alignItems={"center"} gap="6px">
-            <ErrorIcon />
+            <InfoIcon color={Colors.red500} />
             <Paragraph color={Colors.red500} size={"xxs"}>
               {errorMessage}
             </Paragraph>

package/src/components/InputFields/SearchInput.tsx

@@ -8,9 +8,7 @@ import {
   InputRightElement,
 } from "@chakra-ui/react";
 import Colors from "components/styleGuide/Colors";
-// This will change when we build icon components
-import { ReactComponent as CloseIcon } from "assets/svgs/close-circle.svg";
-import { ReactComponent as SearchIcon } from "assets/svgs/search-normal.svg";
+import { CancelFilledIcon, SearchNormalIcon } from "icons";
 
 export interface ISearchInput extends InputProps {
   name: string;
@@ -39,11 +37,11 @@ const SearchInput = ({
   return (
     <InputGroup>
       <InputLeftElement py="12px" ml="4px">
-        <SearchIcon />
+        <SearchNormalIcon color={Colors.gray200} />
       </InputLeftElement>
       {value && (
         <InputRightElement py="12px" mr="8px" onClick={onClear}>
-          <CloseIcon />
+          <CancelFilledIcon />
         </InputRightElement>
       )}
 

package/src/components/InputFields/TextArea.tsx

@@ -10,8 +10,7 @@ import {
 import Paragraph from "components/Typography/Paragraph";
 import Colors from "components/styleGuide/Colors";
 import { useState } from "react";
-// This will change when we build icon components
-import { ReactComponent as ErrorIcon } from "assets/svgs/error_message_icon.svg";
+import { InfoIcon } from "icons";
 
 interface ITextArea extends TextareaProps {
   label: string;
@@ -129,14 +128,14 @@ const TextArea = ({
       <Box mt="8px">
         {error && errorMessage ? (
           <Flex alignItems={"center"} gap="6px">
-            <ErrorIcon />
+            <InfoIcon color={Colors.red500} />
             <Paragraph color={Colors.red500} size={"xxs"}>
               {errorMessage}
             </Paragraph>
           </Flex>
         ) : exceedLimit ? (
           <Flex alignItems={"center"} gap="6px">
-            <ErrorIcon />
+            <InfoIcon color={Colors.red500} />
             <Paragraph color={Colors.red500} size={"xxs"}>
               Text cannot be more than {textLimit || 200} characters long.
             </Paragraph>

package/src/components/InputFields/UsernameInput.tsx

@@ -14,9 +14,7 @@ import {
 } from "@chakra-ui/react";
 import Paragraph from "components/Typography/Paragraph";
 import Colors from "components/styleGuide/Colors";
-// This will change when we build icon components
-import { ReactComponent as ErrorIcon } from "assets/svgs/error_message_icon.svg";
-import { ReactComponent as SuccessIcon } from "assets/svgs/check_circle.svg";
+import { CheckCircleFilledIcon, InfoIcon } from "icons";
 
 interface IInput extends InputProps {
   label: string;
@@ -48,6 +46,7 @@ const UsernameInput = ({
   isNotAvailable,
   errorMessage,
   width,
+  ...props
 }: IInput) => {
   const usernameprefix = "username";
   return (
@@ -60,6 +59,7 @@ const UsernameInput = ({
         fontWeight={600}
         mb="10px"
         mt="0"
+        {...props}
       >
         {label}
       </Text>
@@ -71,7 +71,7 @@ const UsernameInput = ({
         </InputLeftElement>
         <InputRightElement py="24px">
           {isChecking && <Spinner size={"sm"} />}
-          {isAvailable && <SuccessIcon />}
+          {isAvailable && <CheckCircleFilledIcon color={Colors.green600} />}
         </InputRightElement>
         <ChakraInput
           name={name}
@@ -85,7 +85,7 @@ const UsernameInput = ({
           bg={Colors.white100}
           borderRadius="12px"
           border="none"
-          fontFamily={"Degular"}
+          fontFamily={props?.fontFamily ?? "Degular"}
           fontSize={"16px"}
           lineHeight={"24px"}
           letterSpacing={"-0.2px"}
@@ -131,7 +131,7 @@ const UsernameInput = ({
       <Box mt="8px">
         {isNotAvailable && errorMessage && (
           <Flex alignItems={"center"} gap="6px">
-            <ErrorIcon />
+            <InfoIcon color={Colors.red500} />
             <Paragraph color={Colors.red500} size={"xxs"}>
               {errorMessage}
             </Paragraph>

package/src/icons/SearchNormalIcon.tsx

@@ -13,14 +13,14 @@ const SearchNormalIcon = (props: IconProps) => {
     >
       <path
         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"
-        stroke="#131316"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M22 22L20 20"
-        stroke="#131316"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

package/src/pages/Home.tsx

@@ -1,7 +1,7 @@
 /** @format */
 
 import { Box, Text } from "@chakra-ui/react";
-import { Button, MarkdownEditor } from "components";
+import { Button, MarkdownEditor, Colors } from "components";
 import CountrySelectWrapper from "stories/InputFields/Select/CountrySelectWrapper";
 import PhoneNumberInputWrapper from "stories/InputFields/Select/PhoneNumberInputWrapper";
 import SelectWrapper from "stories/InputFields/Select/SelectWrapper";

package/src/stories/InputFields/MarkdownEditor.stories.ts

@@ -1,7 +1,7 @@
 /** @format */
 
 import type { Meta, StoryObj } from "@storybook/react";
-import { MarkdownEditor as MarkdownEditorComponent } from "components/InputFields/MarkdownEditor";
+import { MarkdownEditor as MarkdownEditorComponent } from "components";
 import TextArea from "components/InputFields/TextArea";
 
 const meta: Meta<typeof MarkdownEditorComponent> = {