zebpay-ui 0.0.1

package/src/styles/index.ts

@@ -0,0 +1,6 @@
+import colors from "./colors";
+import typography from "./typography";
+import utils from "./utils";
+import mixins from "./mixins";
+
+export { colors, typography, utils, mixins };

package/src/styles/mixins.ts

@@ -0,0 +1,52 @@
+import { css } from "@emotion/react";
+import colors from "./colors";
+
+const mixins = {
+  flexJustifiedBetween: css({
+    justifyContent: "space-between",
+  }),
+  flexJustifiedCenter: css({
+    justifyContent: "center",
+  }),
+  flexJustifiedEnd: css({
+    justifyContent: "flex-end",
+  }),
+  flexAlignCenter: css({
+    display: "flex",
+    alignItems: "center",
+  }),
+  flexAlignStart: css({
+    display: "flex",
+    alignItems: "flex-start",
+  }),
+  flexNoWrap: css({ flexWrap: "nowrap" }),
+  flexColumn: css({ display: "flex", flexDirection: "column" }),
+  textSuccess: css({
+    color: colors.Zeb_Solid_Green,
+  }),
+  textError: css({
+    color: colors.Zeb_Solid_Red,
+  }),
+  bgSuccess: css({
+    background: colors.Zeb_Solid_Green,
+  }),
+  bgError: css({
+    background: colors.Zeb_Solid_Red,
+  }),
+  textFaded: css({
+    color: colors.Zeb_Solid_Light_Blue,
+  }),
+  textCapitalize: css({
+    textTransform: "capitalize",
+  }),
+  textAlignmentCenter: css({
+    textAlign: "center",
+  }),
+  textAlignmentLeft: css({
+    textAlign: "left",
+  }),
+  textAlignmentRight: css({
+    textAlign: "right",
+  }),
+};
+export default mixins;

package/src/styles/typography.ts

@@ -0,0 +1,331 @@
+import colors from "./colors";
+import utils from "./utils";
+import { CSSObject } from "@emotion/react";
+
+interface Styles {
+  [key: string]: CSSObject;
+}
+
+const typography: Styles = {
+  H1_56_bold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: utils.remConverter(56),
+    lineHeight: "86px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H2_44_bold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: utils.remConverter(44),
+    lineHeight: "60px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H3_32_bold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: utils.remConverter(32),
+    lineHeight: "48px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H4_28_bold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: utils.remConverter(28),
+    lineHeight: "40px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H5_20_bold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: utils.remConverter(20),
+    lineHeight: "normal",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H6_16_bold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: utils.remConverter(16),
+    lineHeight: "28px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H1_56_semibold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(56),
+    lineHeight: "86px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H2_44_semibold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(44),
+    lineHeight: "60px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H3_32_semibold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(32),
+    lineHeight: "48px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H4_28_semibold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(28),
+    lineHeight: "40px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H5_20_semibold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(20),
+    lineHeight: "30px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H6_16_semibold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(16),
+    lineHeight: "28px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H1_56_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: utils.remConverter(56),
+    lineHeight: "86px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H2_44_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: utils.remConverter(44),
+    lineHeight: "60px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H3_32_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: utils.remConverter(32),
+    lineHeight: "48px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H4_28_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: utils.remConverter(28),
+    lineHeight: "40px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H5_20_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: utils.remConverter(20),
+    lineHeight: "30px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H6_16_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: utils.remConverter(16),
+    lineHeight: "28px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  H8_12_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: utils.remConverter(12),
+    lineHeight: "18px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+  },
+  B1_24_semibold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(24),
+    lineHeight: "40px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+  },
+  B2_20_semibold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(20),
+    lineHeight: "30px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+  },
+  B3_16_semibold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(16),
+    lineHeight: "28px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+  },
+  B4_14_semibold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(14),
+    lineHeight: "24px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+  },
+  B5_12_semibold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(12),
+    lineHeight: "18px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+  },
+  B6_10_semibold: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(10),
+    lineHeight: "12px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+  },
+  B1_24_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(24),
+    lineHeight: "40px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+  },
+  B2_20_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: utils.remConverter(20),
+    lineHeight: "30px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+  },
+  B3_16_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: utils.remConverter(16),
+    lineHeight: "28px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+  },
+  B4_14_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: utils.remConverter(14),
+    lineHeight: "24px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+  },
+  B5_12_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: utils.remConverter(12),
+    lineHeight: "18px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+  },
+  B6_10_regular: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: utils.remConverter(10),
+    lineHeight: "12px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+  },
+  C1_20: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: utils.remConverter(20),
+    lineHeight: "30px",
+    letterSpacing: "1.6px",
+    color: colors.Zeb_Solid_White,
+    textTransform: "uppercase",
+  },
+  C2_16: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: utils.remConverter(16),
+    lineHeight: "28px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+    textTransform: "uppercase",
+  },
+  C3_14: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: utils.remConverter(14),
+    lineHeight: "24px",
+    letterSpacing: "0.8px",
+    color: colors.Zeb_Solid_White,
+    textTransform: "uppercase",
+  },
+  C4_12: {
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: utils.remConverter(12),
+    lineHeight: "18px",
+    letterSpacing: "0.4px",
+    color: colors.Zeb_Solid_White,
+    textTransform: "uppercase",
+  },
+};
+
+export default typography;

package/src/styles/utils.ts

@@ -0,0 +1,39 @@
+import { css } from "@emotion/react";
+
+const utils = {
+  remConverter: (value: number) => {
+    return `${value / 16}rem`;
+  },
+  widthPercentage: (value: number) => {
+    return css({
+      width: `${value}%`,
+    });
+  },
+  heightPercentage: (value: number) => {
+    return css({
+      height: `${value}%`,
+    });
+  },
+  mr: (value: number) => {
+    return css({
+      marginRight: utils.remConverter(value),
+    });
+  },
+  ml: (value: number) => {
+    return css({
+      marginLeft: utils.remConverter(value),
+    });
+  },
+  mt: (value: number) => {
+    return css({
+      marginTop: utils.remConverter(value),
+    });
+  },
+  mb: (value: number) => {
+    return css({
+      marginBottom: utils.remConverter(value),
+    });
+  },
+};
+
+export default utils;

package/stories/Button.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Button } from "../src/components";
+
+// the default export is the story
+export default {
+  title: "Components/Button",
+  component: Button,
+  args: {
+    type: "primary",
+    size: "medium",
+    disabled: false,
+    loading: false,
+  },
+} as ComponentMeta<typeof Button>;
+
+// the exported function must return our component & its name will be the name of the story
+export const Playground: ComponentStory<typeof Button> = (args) => {
+  return <Button {...args}>Click Me!</Button>;
+};

package/stories/Checkbox.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Checkbox } from "../src/components";
+
+export default {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  args: {
+    name: "test-checkbox",
+    label: "Test label",
+    checked: false,
+    value: 1,
+  },
+} as ComponentMeta<typeof Checkbox>;
+
+export const Default: ComponentStory<typeof Checkbox> = (args) => (
+  <Checkbox {...args} />
+);

package/stories/CircularLoader.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { CircularLoader } from "../src/components";
+
+export default {
+  title: "Components/CircularLoader",
+  component: CircularLoader,
+  args: {
+    size: 18,
+  },
+} as ComponentMeta<typeof CircularLoader>;
+
+export const Default: ComponentStory<typeof CircularLoader> = (args) => (
+  <CircularLoader {...args} />
+);

package/stories/DateRangePicker.stories.tsx

@@ -0,0 +1,18 @@
+/** @jsxImportSource @emotion/react */
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { DateRangePicker } from "../src/components";
+
+export default {
+  title: "Components/DateRangePicker",
+  component: DateRangePicker,
+  args: {
+    months: 2,
+    onChange: () => {},
+    ranges: { startDate: new Date(), endDate: new Date() },
+  },
+} as ComponentMeta<typeof DateRangePicker>;
+
+export const Playground: ComponentStory<typeof DateRangePicker> = (args) => {
+  return <DateRangePicker {...args} />;
+};

package/stories/Input.stories.tsx

@@ -0,0 +1,18 @@
+import { css } from "@emotion/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Input } from "../src/components";
+
+export default {
+  title: "Components/Input",
+  component: Input,
+  args: {
+    label: "Label",
+    placeholder: "Placeholder",
+    style: css({ width: "400px" }),
+  },
+} as ComponentMeta<typeof Input>;
+
+export const Default: ComponentStory<typeof Input> = (args) => (
+  <Input {...args} />
+);

package/stories/Popper.stories.tsx

@@ -0,0 +1,23 @@
+import { css } from "@emotion/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Popper } from "../src/components";
+import { ChildrenProps } from "../src/components/Popper/typings";
+
+const InternalComponent = (props: ChildrenProps) => (
+  <span>Internal component</span>
+);
+
+export default {
+  title: "Components/Popper",
+  component: Popper,
+  args: {
+    label: "Label",
+    renderChildren: InternalComponent,
+    style: css({ marginTop: "7rem" }),
+  },
+} as ComponentMeta<typeof Popper>;
+
+export const Default: ComponentStory<typeof Popper> = (args) => (
+  <Popper {...args} />
+);

package/stories/Radio.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Radio } from "../src/components";
+
+export default {
+  title: "Components/Radio",
+  component: Radio,
+  args: {
+    name: "test-radio",
+    label: "Test label",
+    selected: true,
+    value: 1,
+  },
+} as ComponentMeta<typeof Radio>;
+
+export const Default: ComponentStory<typeof Radio> = (args) => (
+  <Radio {...args} />
+);

package/stories/Toast.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Toast } from "../src/components";
+
+export default {
+  title: "Components/Toast",
+  component: Toast,
+  args: {
+    title: "Test title",
+    description: "Test description",
+    type: "info",
+  },
+} as ComponentMeta<typeof Toast>;
+
+export const Default: ComponentStory<typeof Toast> = (args) => (
+  <Toast {...args} />
+);

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "outDir": "dist",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "declaration": true,
+    "declarationDir": "dist",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "types": ["@emotion/react"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}