reso-ui 1.1.0

package/src/utils/styles.ts

@@ -0,0 +1,128 @@
+import { ISpacingsProps } from "@interfaces/ISpacingsProps";
+import { DefaultTheme, Theme } from "@interfaces/Theme";
+import classnames from "classnames";
+import { booleanHasValue, hasValue } from "./validations";
+
+interface IStyleClassnames {
+  [key: string]: boolean;
+}
+
+interface ILayoutStyleOptions {
+  disabled?: boolean;
+  no_select?: boolean;
+  width_full?: boolean;
+  width_fit_content?: boolean;
+  position_relative?: boolean;
+}
+
+export const withSpacingsProps = (
+  containerStyles: IStyleClassnames,
+  props: ISpacingsProps
+): IStyleClassnames => {
+  const { ma, mv, mh, mt, mb, mr, ml, pa, pv, ph, pt, pr, pl, pb } = props;
+
+  let spacingClasses: IStyleClassnames = {};
+  // margins
+  if (hasValue(ma)) {
+    spacingClasses = { ...spacingClasses, [`spacing-ma-${ma}`]: true };
+  }
+  if (hasValue(mv)) {
+    spacingClasses = { ...spacingClasses, [`spacing-mv-${mv}`]: true };
+  }
+  if (hasValue(mh)) {
+    spacingClasses = { ...spacingClasses, [`spacing-mh-${mh}`]: true };
+  }
+  if (hasValue(mt)) {
+    spacingClasses = { ...spacingClasses, [`spacing-mt-${mt}`]: true };
+  }
+  if (hasValue(mb)) {
+    spacingClasses = { ...spacingClasses, [`spacing-mb-${mb}`]: true };
+  }
+  if (hasValue(mr)) {
+    spacingClasses = { ...spacingClasses, [`spacing-mr-${mr}`]: true };
+  }
+  if (hasValue(ml)) {
+    spacingClasses = { ...spacingClasses, [`spacing-ml-${ml}`]: true };
+  }
+  // paddings
+  if (hasValue(pa)) {
+    spacingClasses = { ...spacingClasses, [`spacing-pa-${pa}`]: true };
+  }
+  if (hasValue(pv)) {
+    spacingClasses = { ...spacingClasses, [`spacing-pv-${pv}`]: true };
+  }
+  if (hasValue(ph)) {
+    spacingClasses = { ...spacingClasses, [`spacing-ph-${ph}`]: true };
+  }
+  if (hasValue(pt)) {
+    spacingClasses = { ...spacingClasses, [`spacing-pt-${pt}`]: true };
+  }
+  if (hasValue(pb)) {
+    spacingClasses = { ...spacingClasses, [`spacing-pb-${pb}`]: true };
+  }
+  if (hasValue(pr)) {
+    spacingClasses = { ...spacingClasses, [`spacing-pr-${pr}`]: true };
+  }
+  if (hasValue(pl)) {
+    spacingClasses = { ...spacingClasses, [`spacing-pl-${pl}`]: true };
+  }
+
+  return {
+    ...containerStyles,
+    ...spacingClasses,
+  };
+};
+
+export const createLayoutStyles = (
+  containerStyles: IStyleClassnames,
+  className?: string,
+  options?: ILayoutStyleOptions
+) => {
+  const {
+    disabled,
+    no_select,
+    width_full,
+    width_fit_content,
+    position_relative,
+  } = options
+    ? options
+    : {
+        disabled: false,
+        no_select: false,
+        width_full: false,
+        width_fit_content: false,
+        position_relative: false,
+      };
+
+  return classnames({
+    component_layout_default: true,
+    component_disabled: disabled && disabled === true,
+    no_select: no_select && no_select === true,
+    width_full: width_full && width_full === true,
+    width_fit_content: width_fit_content && width_fit_content === true,
+    position_relative: position_relative && position_relative === true,
+    ...containerStyles,
+    [className]: className && className !== "" ? true : false,
+  });
+};
+
+export const createThemeStyles = (
+  componentStylePrefix?: string,
+  theme?: Theme
+) => {
+  return classnames({
+    component_theme_base: true,
+    [`${componentStylePrefix}${DefaultTheme}`]: true,
+    [`${componentStylePrefix}${theme}`]:
+      componentStylePrefix && theme ? true : false,
+  });
+};
+
+export const createComponentStyles = (
+  layoutStyles: string | IStyleClassnames,
+  themeStyles?: string
+) => {
+  const themeClasses = themeStyles ? themeStyles : createThemeStyles();
+
+  return classnames(layoutStyles, themeClasses);
+};

package/src/utils/validations.ts

@@ -0,0 +1,23 @@
+export const hasValue = (val: any) => {
+  return val !== null && val !== undefined;
+};
+
+export const stringHasValue = (val: any) => {
+  return hasValue(val) && typeof val === "string";
+};
+
+export const objectHasValue = (val: any) => {
+  return hasValue(val) && Object.keys(val).length > 0;
+};
+
+export const numberHasValue = (val: any) => {
+  return hasValue(val) && typeof val === "number";
+};
+
+export const methodHasValue = (method: any) => {
+  return hasValue(method) && typeof method === "function";
+};
+
+export const booleanHasValue = (val: boolean) => {
+  return hasValue(val) && typeof val === "boolean";
+};

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": false,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "baseUrl": "./",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@icons": ["src/icons/"],
+      "@interfaces/*": ["src/types/*"],
+      "@utils/*": ["src/utils/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@styles/*": ["src/styles/*"]
+    }
+  },
+  "exclude": ["node_modules"],
+  "include": ["./jest-dom-setup.ts", "./**/*.ts", "./**/*.tsx", "./custom.d.ts"]
+}

package/tslint.json

@@ -0,0 +1,36 @@
+{
+  "defaultSeverity": "error",
+  "extends": ["tslint:latest", "tslint-react"],
+  "jsRules": {},
+  "rules": {
+    "curly": true,
+    "no-duplicate-variable": true,
+    "no-eval": true,
+    "no-invalid-template-strings": true,
+    "no-trailing-whitespace": true,
+    "no-consecutive-blank-lines": true,
+    "newline-before-return": true,
+    "unnecessary-else": [true, { "allow-else-if": true }],
+    "interface-name": [true, "always-prefix"],
+    "no-implicit-dependencies": [
+      true,
+      "dev",
+      [
+        "src",
+        "@components",
+        "@icons",
+        "@interfaces",
+        "@utils",
+        "@hooks",
+        "@styles"
+      ]
+    ],
+    "no-submodule-imports": [true, "@components"],
+    "promise-function-async": true,
+    "await-promise": true,
+    "jsx-no-lambda": false,
+    "jsx-boolean-value": ["never"]
+  },
+  "rulesDirectory": [],
+  "exclude": ["node_modules"]
+}

package/webpack.config.js

@@ -0,0 +1,79 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+
+module.exports = {
+  mode: "development",
+  entry: path.resolve(__dirname, "src/index.tsx"),
+  output: {
+    path: path.resolve(__dirname, "dist"),
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, "public", "index.html"),
+    }),
+  ],
+  devtool: "source-map",
+  devServer: {
+    port: 3000,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        loader: "ts-loader",
+      },
+      /* Styles / CSS and SCSS */
+      {
+        test: /\.(css|scss)$/i,
+        use: [
+          // Creates `style` nodes from JS strings
+          {
+            loader: "style-loader",
+            options: {
+              injectType: "singletonStyleTag",
+            },
+          },
+          // Translates CSS into CommonJS
+          "css-loader",
+          // Compiles Sass to CSS
+          {
+            loader: "sass-loader",
+            options: {
+              additionalData: '@use "vars_and_mixins" as *;',
+            },
+          },
+        ],
+      },
+      /* Images */
+      {
+        test: /\.(png|jp(e*)g|gif)$/,
+        use: ["file-loader"],
+      },
+      /* SVG's */
+      {
+        test: /\.svg$/,
+        use: ["@svgr/webpack"],
+      },
+      /* Images and fonts */
+      {
+        test: /\.(png|woff|woff2|eot|ttf)$/, // to import images and fonts
+        loader: "url-loader",
+        options: { limit: false },
+      },
+    ],
+  },
+  resolve: {
+    plugins: [
+      new TsconfigPathsPlugin({
+        extensions: [".tsx", ".ts", ".js", ".jsx", ".json"],
+      }),
+    ],
+    extensions: [".tsx", ".ts", ".js"],
+    alias: {
+      vars_and_mixins: path.join(__dirname, "src/styles/vars_and_mixins"),
+      fonts: path.join(__dirname, "src/styles/fonts"),
+    },
+  },
+};

package/webpack.prod.js

@@ -0,0 +1,24 @@
+const path = require("path");
+const WebpackBaseConfig = require("./webpack.config");
+
+module.exports = {
+  ...WebpackBaseConfig,
+  mode: "production",
+  entry: path.resolve(__dirname, "src/index.ts"),
+  output: {
+    ...WebpackBaseConfig.output,
+  },
+  plugins: [],
+  devtool: undefined,
+  devServer: undefined,
+  module: {
+    rules: [...WebpackBaseConfig.module.rules],
+  },
+  resolve: {
+    plugins: [...WebpackBaseConfig.resolve.plugins],
+    extensions: [...WebpackBaseConfig.resolve.extensions],
+    alias: {
+      ...WebpackBaseConfig.resolve.alias,
+    },
+  },
+};