zebpay-ui 0.0.3 → 0.0.6

package/src/styles/mixins.ts

@@ -1,52 +0,0 @@
-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

@@ -1,331 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,18 +0,0 @@
-/** @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

@@ -1,18 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,24 +0,0 @@
-{
-  "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"]
-}