@zealicsolutions/web-ui 0.0.1

package/dist/templates/index.d.ts

@@ -0,0 +1,130 @@
+/// <reference types="react" />
+import { Callback } from 'typescript';
+import { CSSProperties } from 'styled-components';
+import { SizesTypes as SizesTypes$1 } from 'theme/types';
+
+declare type BaseButtonProps = {
+    onClick?: Callback;
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+    fullWidth?: boolean;
+};
+declare type ButtonProps = BaseButtonProps & {
+    fullWidth?: boolean;
+    text?: string;
+    loading?: boolean;
+};
+
+declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning';
+declare type SizesTypes = '2XL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
+
+declare type IconProps = {
+    name: IconNames;
+    size?: number;
+    color?: ThemeColors | string;
+    pointerEvents?: 'auto' | 'none';
+};
+declare const availableIcons: {
+    CaretDown: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    CaretUp: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    Filter: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Check: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Info: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    View: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Hide: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Close: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Minus: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    InfoBoxIcon: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Warning: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Bell: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Mobile: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Mail: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+};
+declare type IconNames = keyof typeof availableIcons;
+
+declare type ImageProps = {
+    src: string;
+    alt?: string;
+    styles?: CSSProperties;
+};
+
+declare type AvatarProps = {
+    size?: SizesTypes | number;
+    withShadow?: boolean;
+    label?: string;
+    backgroundColor?: ThemeColors;
+    textConfig?: {
+        color?: ThemeColors;
+        font?: SizesTypes;
+    };
+    content: {
+        initials?: string;
+        iconName?: IconNames;
+        imageUrl?: string;
+    };
+    onPress?: Callback;
+};
+
+declare type BannerProps = {
+    backgroundImage: ImageProps;
+    title: string;
+    description?: string;
+    button?: ButtonProps;
+};
+
+declare type MenuItem<T> = {
+    id: T;
+    title: string;
+    onClick?: (id: T) => void;
+};
+declare type MenuItemsProps<T> = {
+    title?: string;
+    onItemPress?: (id: T) => void;
+    options?: MenuItem<T>[];
+};
+
+declare type AvatarDropdownProps<T> = {
+    avatarProps: AvatarProps;
+    menuConfig: MenuItemsProps<T>;
+};
+
+declare type TabProps<T = string, K = string> = {
+    tabKey: T;
+    text: string;
+    disabled?: boolean;
+    isActive?: boolean;
+    onClick?: (key: T) => void;
+    options?: MenuItem<K>[];
+    onOptionClick?: (optionKey: K) => void;
+};
+
+declare type TabGroupProps<T = string, K = string> = {
+    tabs: Pick<TabProps<T, K>, 'text' | 'tabKey' | 'disabled' | 'options'>[];
+    activeTabKey: T;
+    spacing?: SizesTypes$1;
+    onTabChange?: (tabKey: T) => void;
+    onOptionClick?: (optionKey: K) => void;
+};
+
+declare type ImportantLink = {
+    text: string;
+    href: string;
+};
+declare type HeaderProps = {
+    links?: ImportantLink[];
+    logoUrl: string;
+    tabs: TabGroupProps['tabs'];
+    withAvatar?: {
+        props: AvatarDropdownProps<string>;
+    };
+    onActionButtonClick?: Callback;
+};
+
+declare type DefaultTemplateProps = {
+    header: HeaderProps;
+    banner?: BannerProps;
+    renderContent: () => JSX.Element;
+};
+declare const DefaultTemplate: ({ banner, header, renderContent }: DefaultTemplateProps) => JSX.Element;
+
+export { DefaultTemplate, DefaultTemplateProps };

package/dist/theme/index.d.ts

@@ -0,0 +1,21 @@
+import * as styled_components from 'styled-components';
+import { DefaultTheme } from 'styled-components';
+import { PropsWithChildren } from 'react';
+
+declare const defaultTheme: DefaultTheme;
+
+declare const ZealThemeProvider: (props: PropsWithChildren<{}>) => JSX.Element;
+
+declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning';
+declare type SizesTypes = '2XL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
+declare type ThemeColorsType = Record<ThemeColors, string>;
+declare type ThemeTextType = Record<SizesTypes, {
+    'font-weight': string;
+    'font-size': number;
+    'line-height': number;
+}>;
+declare type ThemeSizesType = Record<SizesTypes, number>;
+
+declare const toastStyles: styled_components.FlattenSimpleInterpolation;
+
+export { SizesTypes, ThemeColors, ThemeColorsType, ThemeSizesType, ThemeTextType, ZealThemeProvider, defaultTheme, toastStyles };

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@zealicsolutions/web-ui",
+  "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"
+  },
+  "author": "Ferhat Sahin <ferhat.sahin@zealicsolutions.com>",
+  "license": "UNLICENSED",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "publishConfig": {
+    "directory": "dist"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "npm run clean && rollup -c",
+    "test": "jest",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "clean": "rimraf dist",
+    "lint-fix": "eslint --fix ./src/**/*.ts",
+    "pretty": "prettier --write ./src",
+    "prepare": "husky install",
+    "precommit": "yarn pretty && yarn lint-fix"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.0",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^14.0.0",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/builder-webpack4": "^6.5.10",
+    "@storybook/manager-webpack4": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
+    "@swc/core": "^1.2.248",
+    "@swc/jest": "^0.2.22",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.0.0",
+    "@types/react": "^18.0.18",
+    "@types/styled-components": "^5.1.26",
+    "@types/styled-system": "^5.1.15",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "babel-loader": "^8.2.5",
+    "eslint": "^8.23.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "husky": "^8.0.1",
+    "jest": "^29.0.2",
+    "jest-environment-jsdom": "^29.0.2",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.79.0",
+    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-import-css": "^3.0.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-uglify": "^6.0.4",
+    "styled-system": "^5.1.5",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.8.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "dependencies": {
+    "@mui/material": "^5.10.4",
+    "@mui/styled-engine-sc": "npm:@mui/styled-engine-sc@latest",
+    "@types/react-dom": "^18.0.6",
+    "rc-dropdown": "^4.0.1",
+    "rc-notification": "^4.6.0",
+    "rc-tooltip": "^5.2.2",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.34.2",
+    "styled-components": "^5.3.5"
+  },
+  "resolutions": {
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
+  },
+  "husky": {
+    "hooks": {
+      "precommit": "yarn pretty && yarn lint-fix && yarn test"
+    }
+  },
+  "bugs": {
+    "url": "https://bitbucket.org/Zealic_Solutions/zeal-ui-web/issues"
+  },
+  "homepage": "https://bitbucket.org/Zealic_Solutions/zeal-ui-web#readme",
+  "keywords": [],
+  "description": ""
+}