refactor: update version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gudangada/design-system",
-  "version": "0.1.32",
+  "version": "0.1.38",
   "description": "Gada Design System",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

src/components/core/Button/Button.tsx → src/components/core/Button/Button/Button.tsx

@@ -7,7 +7,7 @@ import {
   Typography,
 } from "@mui/material";
 import { ButtonPropsMap } from "./constants";
-import { iIconProps } from "../../../assets/icons/types";
+import { iIconProps } from "../../../../assets/icons/types";
 
 const Button: React.FC<iButtonProps> = ({
   children,

src/components/core/Button/Button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "./Button";
+export * from "./types";

src/components/core/Button/FileUploadButton/FileUploadButton.stories.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { Meta, Story } from "@storybook/react";
+import { iFileChangeHandler, iFileUploadButtonProps } from "./types";
+import FileUploadButtonUI from "./FileUploadButton";
+
+export default {
+  title: "Components/Core",
+  component: FileUploadButtonUI,
+} as Meta;
+
+//👇 We create a “template” of how args map to rendering
+const Template: Story<iFileUploadButtonProps> = ({
+  action,
+  onChange,
+  url,
+  ...props
+}) => {
+  const [file, setFile] = React.useState<File | undefined | null>(null);
+  const [fileUrl, setFileUrl] = React.useState<string | undefined | null>(null);
+
+  const onChangeFile: iFileChangeHandler = (newFile, url) => {
+    setFile(newFile);
+    setFileUrl(url);
+  };
+
+  return (
+    <FileUploadButtonUI
+      {...props}
+      action={{ ...action, description: file?.name }}
+      url={Boolean(url) ? url : fileUrl}
+      onChange={onChangeFile}
+    />
+  );
+};
+
+//👇 Each story then reuses that template
+export const FileUploadButton = Template.bind({});
+
+FileUploadButton.parameters = {
+  controls: {
+    include: [
+      "title",
+      "description",
+      "action",
+      "variant",
+      "errorText",
+      "url",
+      "accept",
+    ],
+  },
+};
+FileUploadButton.argTypes = {
+  variant: {
+    control: {
+      type: "select",
+      options: ["default", "compact"],
+    },
+  },
+};
+FileUploadButton.args = {
+  title: "Banner",
+  description: "Campaign Banner",
+  action: { action: "Upload Image" },
+  variant: "default",
+  errorText: "",
+  url: "",
+  accept: ".jpg,.png",
+};

src/components/core/Button/FileUploadButton/FileUploadButton.tsx

@@ -0,0 +1,151 @@
+import * as React from "react";
+import { CrossOutlinedIcon } from "../../../../assets";
+import { FormHelperText } from "../../../inputs/FormHelperText";
+import { Col } from "../../Col";
+import { Row } from "../../Row";
+import { Text } from "../../Text";
+import { Button } from "../Button";
+import {
+  ActionContainer,
+  ActionContainerCompact,
+  CloseButtonContainer,
+  CloseButtonContainerCompact,
+  Container,
+  ImagePreview,
+  ImagePreviewContainer,
+  ImagePreviewContainerCompact,
+  UploadButtonWrapper,
+} from "./styles";
+import { iFileUploadButtonProps } from "./types";
+
+const FileUploadButton: React.VFC<iFileUploadButtonProps> = ({
+  title,
+  description,
+  variant = "default",
+  accept,
+  url,
+  action,
+  errorText,
+  onChange,
+}) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const hasFile = Boolean(url);
+  const hasError = Boolean(errorText);
+
+  const MainLayout = variant === "compact" ? Col : Row;
+
+  const onClickUpload = () => {
+    inputRef.current?.click();
+  };
+
+  const onFileChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const file = e.target.files?.item(0);
+
+    onChange(file, file ? URL.createObjectURL(file) : undefined);
+  };
+
+  const onResetFile = () => {
+    if (inputRef.current) inputRef.current.value = "";
+    onChange(null, undefined);
+  };
+
+  return (
+    <Col spacing={8}>
+      <Col spacing={8}>
+        {title || description ? (
+          <Col spacing={4}>
+            {title && (
+              <Text variant="captionSemiBold" color="interface.black.400">
+                {title}
+              </Text>
+            )}
+            {description && (
+              <Text variant="captionRegular" color="interface.black.400">
+                {description}
+              </Text>
+            )}
+          </Col>
+        ) : null}
+        <Container
+          hasFile={hasFile}
+          hasError={hasError}
+          spacing={10}
+          variant={variant}
+        >
+          <MainLayout className="relative">
+            <input
+              ref={inputRef}
+              type="file"
+              accept={accept}
+              hidden
+              onChange={onFileChange}
+            />
+            {variant === "default" ? (
+              <>
+                <ImagePreviewContainer>
+                  {url && <ImagePreview alt="file" src={url} />}
+                </ImagePreviewContainer>
+                <UploadButtonWrapper flex={1} vCenter>
+                  <ActionContainer onClick={onClickUpload}>
+                    <Button variant="text" color="primary">
+                      {action.action}
+                    </Button>
+                    {action.description && (
+                      <Text
+                        variant="captionRegular"
+                        color="interface.black.400"
+                      >
+                        {action.description}
+                      </Text>
+                    )}
+                  </ActionContainer>
+                  {url ? (
+                    <CloseButtonContainer onClick={onResetFile}>
+                      <CrossOutlinedIcon width={12} />
+                    </CloseButtonContainer>
+                  ) : null}
+                </UploadButtonWrapper>
+              </>
+            ) : (
+              <>
+                {url && (
+                  <ImagePreviewContainerCompact>
+                    <ImagePreview alt="file" src={url} />
+                  </ImagePreviewContainerCompact>
+                )}
+                {!url ? (
+                  <ActionContainerCompact onClick={onClickUpload}>
+                    <>
+                      <Button variant="text" color="primary">
+                        {action.action}
+                      </Button>
+                      {action.description && (
+                        <Text
+                          variant="captionRegular"
+                          color="interface.black.400"
+                        >
+                          {action.description}
+                        </Text>
+                      )}
+                    </>
+                  </ActionContainerCompact>
+                ) : (
+                  <CloseButtonContainerCompact onClick={onResetFile}>
+                    <CrossOutlinedIcon width={14} />
+                  </CloseButtonContainerCompact>
+                )}
+              </>
+            )}
+          </MainLayout>
+        </Container>
+      </Col>
+      {errorText && (
+        <FormHelperText error className="mt-0">
+          {errorText}
+        </FormHelperText>
+      )}
+    </Col>
+  );
+};
+
+export default FileUploadButton;

src/components/core/Button/FileUploadButton/index.ts

@@ -0,0 +1,2 @@
+export { default as FileUploadButton } from "./FileUploadButton";
+export * from "./types";

src/components/core/Button/FileUploadButton/styles.ts

@@ -0,0 +1,125 @@
+import styled from "@emotion/styled";
+import { pxToRem } from "../../../../styles";
+import { Col, iColProps } from "../../Col";
+import { Row } from "../../Row";
+import { iFileUploadButtonProps } from "./types";
+
+interface iContainerProps
+  extends Omit<iColProps, "onChange">,
+    Partial<iFileUploadButtonProps> {
+  hasFile?: boolean;
+  hasError?: boolean;
+}
+
+export const Container = styled(Col)<iContainerProps>(
+  ({ hasError = false, hasFile = false, variant, theme }) => ({
+    height: variant === "compact" ? 140 : 100,
+    minHeight: variant === "compact" ? 140 : 100,
+    width: variant === "compact" ? 140 : "100%",
+    minWidth: variant === "compact" ? 140 : "100%",
+    overflow: "hidden",
+    borderRadius: pxToRem(8),
+    border: `1px dashed ${theme.palette.interface.black[200]}`,
+    borderStyle: !hasFile ? "dashed" : "solid",
+    borderColor: hasError
+      ? theme.palette.interface.red[500]
+      : theme.palette.interface.black[200],
+
+    "&>div": {
+      height: "100%",
+    },
+  })
+);
+
+export const UploadButtonWrapper = styled(Row)(({ theme }) => ({
+  padding: 16,
+  cursor: "pointer",
+  "&:hover": {
+    backgroundColor: theme.palette.interface.black[50],
+  },
+}));
+
+export const ImagePreviewContainer = styled.div<iColProps>(({ theme }) => ({
+  display: "flex",
+  flex: 0.3,
+  height: "100%",
+  position: "relative",
+  backgroundColor: theme.palette.interface.black[100],
+}));
+
+export const ImagePreviewContainerCompact = styled.div<iColProps>(
+  ({ theme }) => ({
+    width: "100%",
+    minWidth: "100%",
+    maxWidth: "100%",
+    height: "100%",
+    position: "relative",
+    backgroundColor: theme.palette.interface.black[100],
+  })
+);
+
+export const ImagePreview = styled.img({
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  position: "absolute",
+  top: 0,
+  left: 0,
+});
+
+export const ActionContainer = styled(Col)<iColProps>(() => ({
+  flex: 1,
+  paddingRight: 16,
+  height: "100%",
+  alignItems: "flex-start",
+  justifyContent: "center",
+}));
+
+export const ActionContainerCompact = styled(Col)<iColProps>(({ theme }) => ({
+  padding: 16,
+  height: "100%",
+  width: "100%",
+  cursor: "pointer",
+  alignItems: "center",
+  justifyContent: "center",
+
+  "&:hover": {
+    backgroundColor: theme.palette.interface.black[50],
+  },
+}));
+
+export const CloseButtonContainer = styled.div(({ theme }) => ({
+  display: "flex",
+  width: 24,
+  height: 24,
+  padding: 4,
+  borderRadius: 8,
+  justifyContent: "center",
+  cursor: "pointer",
+
+  "&:hover": {
+    backgroundColor: theme.palette.interface.black[50],
+  },
+
+  "&>svg": {
+    margin: 0,
+  },
+}));
+
+export const CloseButtonContainerCompact = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "absolute",
+  top: 8,
+  right: 8,
+  width: 28,
+  height: 28,
+  borderRadius: "50%",
+  backgroundColor: theme.palette.interface.white,
+  cursor: "pointer",
+
+  "&:hover": {
+    backgroundColor: theme.palette.interface.black[50],
+  },
+}));