zebpay-ui 0.0.1

package/src/components/Button/styles.ts

@@ -0,0 +1,142 @@
+import { css } from "@emotion/react";
+import { colors, typography, utils } from "../../styles";
+
+export const linkButton = css({
+  padding: 0,
+  backgroundColor: "transparent",
+  boxShadow: "none",
+  border: "none",
+  outline: "none",
+  ...typography.C3_14,
+  color: colors.Zeb_Solid_Bright_Blue,
+  "&.small": {
+    ...typography.C4_12,
+    color: colors.Zeb_Solid_Bright_Blue,
+  },
+});
+
+export const primaryButton = css({
+  background: colors.Zeb_Gradient_Blue_01,
+  borderRadius: utils.remConverter(8),
+  boxShadow: "none",
+  border: "none",
+  outline: "none",
+  whiteSpace: "nowrap",
+  ...typography.C4_12,
+  "&.small": {
+    padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
+    ...typography.C4_12,
+  },
+  "&.medium": {
+    padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
+    ...typography.C4_12,
+  },
+  "&.large": {
+    padding: `${utils.remConverter(8)} ${utils.remConverter(16)}`,
+    ...typography.C2_16,
+  },
+  "&.full-width": {
+    padding: `${utils.remConverter(8)} 0`,
+    width: "100%",
+  },
+  "&:disabled": {
+    opacity: 0.2,
+  },
+});
+
+export const secondaryButton = css({
+  padding: `${utils.remConverter(8)} ${utils.remConverter(16)}`,
+  background: colors.Zeb_Transparent_4,
+  border: `1px solid ${colors.Zeb_Solid_Bright_Blue}`,
+  borderRadius: "8px",
+  ...typography.C2_16,
+  "&.small": {
+    padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
+    ...typography.C4_12,
+  },
+  "&.medium": {
+    padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
+    ...typography.C4_12,
+  },
+  "&.large": {
+    padding: `${utils.remConverter(8)} ${utils.remConverter(16)}`,
+    ...typography.C2_16,
+  },
+  "&.full-width": {
+    padding: `${utils.remConverter(8)} 0`,
+  },
+  "&:disabled": {
+    borderColor: colors.Zeb_Solid_Grey,
+  },
+});
+
+export const specialButton = css({
+  padding: `${utils.remConverter(6)} 0`,
+  background: colors.Zeb_Gradient_Blue_01,
+  boxShadow: "none",
+  border: "none",
+  outline: "none",
+  borderRadius: "8px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  "&.small": {
+    width: "100%",
+    padding: `${utils.remConverter(8)} 0`,
+  },
+  "&.large": { width: "100%" },
+  "&.full-width": { width: "100%" },
+  "&.medium": { width: "100%" },
+});
+
+export const specialButtonText = css({
+  marginLeft: utils.remConverter(8),
+  ...typography.C3_14,
+});
+
+export const specialButtonSmText = css({
+  display: "none",
+});
+
+export const tertiaryButton = css({
+  padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
+  background: colors.Zeb_Transparent_4,
+  boxShadow: "none",
+  border: `1px solid ${colors.Zeb_Solid_Bright_Blue}`,
+  outline: "none",
+  borderRadius: "8px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  "&.medium": {
+    padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
+  },
+});
+
+export const tertiaryButtonText = css({
+  marginLeft: utils.remConverter(4),
+  ...typography.C4_12,
+});
+
+export const tabButton = css({
+  border: `0.5px solid ${colors.Zeb_Solid_Light_Blue}`,
+  borderRadius: "4px",
+  padding: `${utils.remConverter(4)} ${utils.remConverter(8)}`,
+  ...typography.B5_12_semibold,
+  color: colors.Zeb_Solid_Light_Blue,
+  display: "flex",
+  justifyContent: "center",
+  flexGrow: 1,
+  textTransform: "uppercase",
+  cursor: "pointer",
+  "&.active": {
+    background: colors.Zeb_Solid_Dark_Blue,
+    borderColor: colors.Zeb_Solid_Bright_Blue,
+    ...typography.C4_12,
+  },
+});
+
+export const disabledButton = css({
+  opacity: 0.5,
+  cursor: "not-allowed",
+});

package/src/components/Button/typings.ts

@@ -0,0 +1,20 @@
+import { Interpolation, Theme } from "@emotion/react";
+
+export type ButtonSize = "small" | "medium" | "large" | "full-width";
+
+export type ButtonType =
+  | "link"
+  | "primary"
+  | "secondary"
+  | "special"
+  | "tertiary"
+  | "tab";
+
+export interface ButtonProps {
+  type: ButtonType;
+  size?: ButtonSize; // default is medium
+  onClick: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  style?: Interpolation<Theme>;
+}

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,44 @@
+/** @jsxImportSource @emotion/react */
+import { FC } from "react";
+import * as checkboxStyles from "./styles";
+import { CheckboxProps } from "./typings";
+
+const Checkbox: FC<CheckboxProps> = ({
+  label,
+  value,
+  style,
+  checked,
+  onChange,
+  disabled,
+}) => {
+  return (
+    <label
+      css={[
+        checkboxStyles.checkboxContainer,
+        checkboxStyles.labelContainer,
+        style,
+        disabled ? checkboxStyles.disabledLabel : "",
+      ]}
+    >
+      {label && <div css={checkboxStyles.checkLabel}>{label}</div>}
+      <input
+        checked={checked}
+        onChange={(e) =>
+          onChange({ checked: e.target.checked, value: e.target.value })
+        }
+        type="checkbox"
+        css={checkboxStyles.input}
+        value={value}
+        disabled={disabled}
+      />
+      <span
+        css={[
+          checkboxStyles.checkmark,
+          checked && checkboxStyles.checkCheckmark,
+        ]}
+      />
+    </label>
+  );
+};
+
+export default Checkbox;

package/src/components/Checkbox/styles.ts

@@ -0,0 +1,76 @@
+import { css } from "@emotion/react";
+import { colors, typography, utils } from "../../styles";
+
+export const checkboxContainer = css({
+  minWidth: utils.remConverter(16),
+});
+
+export const labelContainer = css({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  height: "auto",
+  position: "relative",
+  cursor: "pointer",
+  marginBottom: 0,
+  ...typography.B4_14_semibold,
+  "&:hover": {
+    "input ~ .checkmark": {
+      backgroundColor: colors.Zeb_Solid_White,
+    },
+  },
+});
+
+export const disabledLabel = css({
+  opacity: 0.5,
+  cursor: "not-allowed",
+});
+
+export const input = css({
+  opacity: 0,
+  cursor: "pointer",
+  height: 0,
+  width: 0,
+});
+
+export const checkCheckmark = css({
+  backgroundColor: colors.Zeb_Solid_White,
+  border: `1px solid ${colors.Zeb_Solid_White}`,
+  borderRadius: 4,
+
+  "&:after": {
+    display: "block",
+  },
+});
+
+export const checkLabel = css({
+  marginLeft: utils.remConverter(20),
+});
+
+export const checkComponent = css({
+  marginLeft: utils.remConverter(20),
+});
+
+export const checkmark = css({
+  position: "absolute",
+  top: "50%",
+  left: 0,
+  transform: "translateY(-50%)",
+  height: utils.remConverter(12),
+  width: utils.remConverter(12),
+  backgroundColor: "transparent",
+  border: `1px solid ${colors.Zeb_Solid_White}`,
+  borderRadius: 4,
+  "&:after": {
+    content: "''",
+    position: "absolute",
+    display: "none",
+    left: 2,
+    top: "45%",
+    width: 4,
+    height: 8,
+    border: `solid ${colors.Zeb_Solid_Dark_Blue}`,
+    borderWidth: "0 2px 2px 0",
+    transform: "rotate(45deg) translate(-50%, -50%)",
+  },
+});

package/src/components/Checkbox/typings.ts

@@ -0,0 +1,11 @@
+import { SerializedStyles } from "@emotion/react";
+import { ReactText } from "react";
+
+export interface CheckboxProps {
+  value: ReactText;
+  checked: boolean;
+  onChange: (args: { checked: boolean; value: ReactText }) => void;
+  label?: string | JSX.Element;
+  disabled?: boolean;
+  style?: SerializedStyles;
+}

package/src/components/CircularLoader/index.tsx

@@ -0,0 +1,22 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { FC } from "react";
+import { loader } from "./style";
+import { CircularLoaderProps } from "./typings";
+
+const CircularLoader: FC<CircularLoaderProps> = ({ size, color }) => {
+  return (
+    <div
+      css={[
+        loader,
+        css({
+          height: `${size}px`,
+          width: `${size}px`,
+          color: color,
+        }),
+      ]}
+    />
+  );
+};
+
+export default CircularLoader;

package/src/components/CircularLoader/style.ts

@@ -0,0 +1,18 @@
+import { css, keyframes } from "@emotion/react";
+
+export const rotateAnimation = keyframes`
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }`;
+
+export const loader = css({
+  borderRadius: "100%",
+  borderWidth: 3,
+  borderStyle: "solid",
+  borderTopColor: "rgba(255,255,255,0.4)",
+  margin: "0 auto",
+  animation: `${rotateAnimation} 1s linear infinite`,
+});

package/src/components/CircularLoader/typings.ts

@@ -0,0 +1,4 @@
+export interface CircularLoaderProps {
+  size: number;
+  color?: string;
+}

package/src/components/DateRangePicker/index.tsx

@@ -0,0 +1,36 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import { DateRange } from "react-date-range";
+import "./styles.css";
+
+interface DateRangePickerProps {
+  months: number;
+  onChange(ranges: Selection): void;
+  ranges: Selection;
+}
+
+interface Selection {
+  startDate: Date;
+  endDate: Date;
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  months,
+  onChange,
+  ranges,
+}) => {
+  return (
+    <DateRange
+      ranges={[ranges]}
+      onChange={(rangesByKey) => onChange(rangesByKey as unknown as Selection)}
+      months={months}
+      direction="horizontal"
+      showDateDisplay={false}
+      showPreview={false}
+      showMonthAndYearPickers={false}
+      moveRangeOnFirstSelection={true}
+    />
+  );
+};
+
+export default DateRangePicker;