widenarrow-ui 0.1.2

package/.babelrc

@@ -0,0 +1,11 @@
+{
+	"presets": ["@babel/react"],
+	"ignore": ["**/__snapshots__", "**/*.d.ts", "**/*.test.*"],
+	"plugins": [
+		"@babel/plugin-transform-typescript",
+		"babel-plugin-typescript-to-proptypes",
+		"@babel/plugin-proposal-export-default-from",
+		"@babel/proposal-class-properties",
+		"@babel/proposal-object-rest-spread"
+	]
+}

package/.eslintrc

@@ -0,0 +1,105 @@
+{
+  "extends": [
+    "react-app",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": ["react", "import", "@typescript-eslint"],
+  "env": {
+    "jest": true,
+    "browser": true
+  },
+  "rules": {
+    "no-undef": ["warn", { "typeof": true }],
+    "function-paren-newline": 0,
+    "no-mixed-spaces-and-tabs": 0,
+    "no-confusing-arrow": 0,
+    "no-return-assign": ["error", "except-parens"],
+    "generator-star-spacing": 0,
+    "default-param-last": 0,
+    "prefer-regex-literals": 0,
+    "no-unused-expressions": [
+      "error",
+      { "allowTernary": true, "allowShortCircuit": true }
+    ],
+    "class-methods-use-this": 0,
+    "prefer-destructuring": 0,
+    "no-nested-ternary": 0,
+    "no-plusplus": 0,
+    "no-restricted-globals": 0,
+    "no-restricted-syntax": 0,
+    "no-underscore-dangle": 0,
+    "no-use-before-define": "warn",
+    "no-shadow": 0,
+    "object-curly-newline": 0,
+    "template-curly-spacing": 0,
+    "comma-dangle": ["error", "never"],
+    "func-names": 0,
+    "space-before-function-paren": 0,
+    "no-param-reassign": 0,
+    "implicit-arrow-linebreak": 0,
+    "arrow-parens": 0,
+    "operator-linebreak": 0,
+    "consistent-return": 0,
+    "no-continue": 0,
+    "no-tabs": ["warn", { "allowIndentationTabs": true }],
+    "indent": 0,
+    "import/no-mutable-exports": "warn",
+    "react/no-deprecated": "warn",
+    "react/prop-types": 0,
+    "react/forbid-prop-types": 0,
+    "react/display-name": 0,
+    "import/no-extraneous-dependencies": 0,
+    "react/react-in-jsx-scope": 0,
+    "no-console": "warn",
+    "spaced-comment": "warn",
+    "@typescript-eslint/rule-name": 0,
+    "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/no-use-before-define": "warn",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "max-len": [
+      "error",
+      {
+        "code": 140,
+        "tabWidth": 2,
+        "ignoreComments": true,
+        "ignoreUrls": true,
+        "ignoreStrings": true,
+        "ignoreTemplateLiterals": true,
+        "ignoreRegExpLiterals": true
+      }
+    ],
+    "import/no-unresolved": [
+      "error",
+      {
+        "ignore": [
+          "components/*",
+          "constants/*",
+          "pages/*",
+          "images/*",
+          "normalizers/*",
+          "reducers/*",
+          "sagas/*",
+          "selectors/*",
+          "styles/*",
+          "utils/*",
+          "validators/*",
+          "types/*",
+          "hooks/*"
+        ]
+      }
+    ]
+  },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "18.x"
+    },
+    "import/resolver": {
+      "node": {
+        "paths": ["src"]
+      }
+    }
+  }
+}

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+	"printWidth": 140,
+	"useTabs": true,
+	"tabWidth": 2,
+	"singleQuote": true,
+	"trailingComma": "none"
+}

package/README.md

@@ -0,0 +1,3 @@
+# WIDENARROW UI
+
+https://betterprogramming.pub/how-to-publish-a-react-component-library-c89a07566770

package/copyTS.js

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const glob = require('glob');
+const fse = require('fs-extra');
+/* eslint-enable @typescript-eslint/no-var-requires */
+const srcDir = path.join('./src');
+const distDir = path.join('./dist/js');
+const files = glob.sync('**/*.d.ts', {
+	cwd: srcDir
+});
+files.forEach((file) => {
+	const from = path.join(srcDir, file);
+	const to = path.join(distDir, file);
+	fse.copySync(from, to);
+});

package/dist/Box/Box.module.scss

@@ -0,0 +1,80 @@
+@import "~styles/mixins";
+
+.container {
+  height: auto;
+}
+
+@include margin(8);
+@include padding(8);
+@include width;
+@include flexRules;
+@include showHideOnBreakPointRules("flex");
+
+@for $i from 1 through 3 {
+  .border_#{$i} {
+    border: calc(#{$i} * 1px) solid $border-light-grey;
+  }
+
+  .borderBottom_#{$i} {
+    border-bottom: calc(#{$i} * 1px) solid $border-light-grey;
+  }
+
+  .borderTop_#{$i} {
+    border-top: calc(#{$i} * 1px) solid $border-light-grey;
+  }
+
+  .borderLeft_#{$i} {
+    border-left: calc(#{$i} * 1px) solid $border-light-grey;
+  }
+
+  .borderRight_#{$i} {
+    border-right: calc(#{$i} * 1px) solid $border-light-grey;
+  }
+}
+
+.backgroundColor_white {
+  background-color: $white;
+}
+
+.borderRadius {
+  border-radius: $border-radius;
+}
+
+.position_relative {
+  position: relative;
+}
+
+.position_absolute {
+  position: absolute;
+}
+
+.withSeparatorRight {
+  margin-right: $four-base-size;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    right: -16px;
+    height: $two-base-size;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    background: $border-grey;
+  }
+}
+
+.withSeparatorLeft {
+  margin-left: $two-base-size;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: -8px;
+    height: 100%;
+    top: 0;
+    width: 1px;
+    background: $border-grey;
+  }
+}

package/dist/Box/Box.tsx

@@ -0,0 +1,143 @@
+import { forwardRef, ReactNode } from 'react';
+import classNames from 'classnames/bind';
+import { is } from 'ramda';
+
+import { MarginInterface, PaddingInterface, FlexStylingInterface } from 'types/styling';
+
+import styles from './Box.module.scss';
+
+const s = classNames.bind(styles);
+
+interface Props extends MarginInterface, PaddingInterface, FlexStylingInterface {
+	children: ReactNode;
+	className?: string;
+	position?: string;
+	border?: string;
+	borderTop?: string;
+	borderBottom?: string;
+	borderRight?: string;
+	backgroundColor?: string;
+	showOnBreakpoint?: string;
+	borderLeft?: string;
+	withBorderRadius?: boolean;
+	width?: string;
+	minWidth?: string;
+	maxWidth?: string;
+	withSeparatorRight?: boolean;
+	withSeparatorLeft?: boolean;
+	style?: Record<string, unknown>;
+	onClickCallback?: () => void;
+}
+
+const Box = forwardRef<HTMLDivElement, Props>(
+	(
+		{
+			className,
+			alignSelf,
+			children, // flex
+			displayFlex,
+			displayFlexCenter,
+			displayFlexCenterSpaceBetween,
+			justifyContent,
+			flexDirection,
+			flexGrow,
+			flexWrap,
+			alignItems, // margin
+			margin,
+			marginTop,
+			marginBottom,
+			marginRight,
+			marginLeft, // padding
+			padding,
+			paddingX,
+			paddingY,
+			paddingTop,
+			paddingBottom,
+			paddingRight,
+			paddingLeft, // border,
+			backgroundColor,
+			border,
+			borderTop,
+			borderBottom,
+			borderRight,
+			borderLeft,
+			withBorderRadius,
+			withSeparatorRight,
+			withSeparatorLeft,
+			showOnBreakpoint,
+			width,
+			minWidth,
+			maxWidth,
+			position,
+			style, // inline style
+			onClickCallback,
+			...other
+		},
+		ref
+	) => {
+		const onClick = () => {
+			if (onClickCallback) {
+				onClickCallback();
+			}
+		};
+
+		return (
+			<div
+				className={s('container', {
+					// flex
+					displayFlex,
+					displayFlexCenter,
+					displayFlexCenterSpaceBetween,
+					[`justifyContent_${justifyContent}`]: is(String, justifyContent),
+					[`alignItems_${alignItems}`]: is(String, alignItems),
+					[`flexDirection_${flexDirection}`]: is(String, flexDirection),
+					[`flexWrap_${flexWrap}`]: is(String, flexWrap),
+					[`flexGrow_${flexGrow}`]: is(String, flexGrow),
+					[`alignSelf_${alignSelf}`]: is(String, alignSelf),
+					// margin
+					[`margin_${margin}`]: is(String, margin),
+					[`marginTop_${marginTop}`]: is(String, marginTop),
+					[`marginBottom_${marginBottom}`]: is(String, marginBottom),
+					[`marginRight_${marginRight}`]: is(String, marginRight),
+					[`marginLeft_${marginLeft}`]: is(String, marginLeft),
+					// padding
+					[`padding_${padding}`]: is(String, padding),
+					[`paddingX_${paddingX}`]: is(String, paddingX),
+					[`paddingY_${paddingY}`]: is(String, paddingY),
+					[`paddingTop_${paddingTop}`]: is(String, paddingTop),
+					[`paddingBottom_${paddingBottom}`]: is(String, paddingBottom),
+					[`paddingRight_${paddingRight}`]: is(String, paddingRight),
+					[`paddingLeft_${paddingLeft}`]: is(String, paddingLeft),
+					// border
+					[`backgroundColor_${backgroundColor}`]: is(String, backgroundColor),
+					[`border_${border}`]: is(String, border),
+					[`borderTop_${borderTop}`]: is(String, borderTop),
+					[`borderBottom_${borderBottom}`]: is(String, borderBottom),
+					[`borderRight_${borderRight}`]: is(String, borderRight),
+					[`borderLeft_${borderLeft}`]: is(String, borderLeft),
+					// Width
+					[`width_${width}`]: is(String, width),
+					[`minWidth_${minWidth}`]: is(String, minWidth),
+					[`maxWidth_${maxWidth}`]: is(String, maxWidth),
+					borderRadius: withBorderRadius,
+					// position
+					position_relative: ref,
+					[`position_${position}`]: is(String, position),
+					// Responsiveness
+					[`showOnBreakpoint_${showOnBreakpoint}`]: is(String, showOnBreakpoint),
+					withSeparatorRight,
+					withSeparatorLeft,
+					[className as string]: className
+				})}
+				style={style}
+				ref={ref}
+				onClick={onClick}
+				{...other}
+			>
+				{children}
+			</div>
+		);
+	}
+);
+
+export default Box;

package/dist/index.tsx

@@ -0,0 +1,3 @@
+import Box from 'components/Box/Box';
+
+export default { Box }; // eslint-disable-line

package/package.json

@@ -0,0 +1,69 @@
+{
+	"name": "widenarrow-ui",
+	"version": "0.1.2",
+	"main": "dist/js/index.js",
+	"module": "dist/esm/index.js",
+	"types": "dist/js/index.d.ts",
+	"private": false,
+	"publishConfig": {
+		"access": "public",
+		"tag": "prerelease"
+	},
+	"dependencies": {
+		"@babel/core": "^7.22.20",
+		"@testing-library/jest-dom": "5.17.0",
+		"@testing-library/react": "13.4.0",
+		"@testing-library/user-event": "13.5.0",
+		"@types/jest": "27.5.2",
+		"@types/node": "16.18.51",
+		"@types/ramda": "^0.29.4",
+		"@types/react": "18.2.21",
+		"@types/react-dom": "18.2.7",
+		"classnames": "2.3.2",
+		"ramda": "0.29.0",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-scripts": "5.0.1",
+		"sass": "1.67.0",
+		"typescript": "4.9.5",
+		"web-vitals": "2.1.4"
+	},
+	"scripts": {
+		"build:lib": "npm run build:babel && npm run build:types && node ./scripts/copyTS.js",
+		"build:babel": "concurrently \"npm run build:babel:esm && npm run build:babel:umd\" \"npm run build:babel:cjs\"",
+		"build:babel:cjs": "BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env",
+		"build:babel:esm": "BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm",
+		"build:babel:umd": "BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
+		"build:types": "tsc -p tsconfig.gen-dts.json",
+		"clean": "rimraf dist",
+		"develop": "npm run build:types && npm run build:babel:esm --skip-initial-build --watch --verbose"
+	},
+	"eslintConfig": {
+		"extends": [
+			"react-app",
+			"react-app/jest"
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.22.15",
+		"@babel/plugin-proposal-export-default-from": "^7.22.17",
+		"babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+		"babel-plugin-typescript-to-proptypes": "^2.1.0",
+		"babel-preset-env": "^1.7.0",
+		"babel-preset-react": "^6.24.1",
+		"babel-preset-stage-2": "^6.24.1",
+		"concurrently": "^8.2.1"
+	}
+}

package/src/components/Box/Box.module.scss

@@ -0,0 +1,80 @@
+@import "~styles/mixins";
+
+.container {
+  height: auto;
+}
+
+@include margin(8);
+@include padding(8);
+@include width;
+@include flexRules;
+@include showHideOnBreakPointRules("flex");
+
+@for $i from 1 through 3 {
+  .border_#{$i} {
+    border: calc(#{$i} * 1px) solid $border-light-grey;
+  }
+
+  .borderBottom_#{$i} {
+    border-bottom: calc(#{$i} * 1px) solid $border-light-grey;
+  }
+
+  .borderTop_#{$i} {
+    border-top: calc(#{$i} * 1px) solid $border-light-grey;
+  }
+
+  .borderLeft_#{$i} {
+    border-left: calc(#{$i} * 1px) solid $border-light-grey;
+  }
+
+  .borderRight_#{$i} {
+    border-right: calc(#{$i} * 1px) solid $border-light-grey;
+  }
+}
+
+.backgroundColor_white {
+  background-color: $white;
+}
+
+.borderRadius {
+  border-radius: $border-radius;
+}
+
+.position_relative {
+  position: relative;
+}
+
+.position_absolute {
+  position: absolute;
+}
+
+.withSeparatorRight {
+  margin-right: $four-base-size;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    right: -16px;
+    height: $two-base-size;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    background: $border-grey;
+  }
+}
+
+.withSeparatorLeft {
+  margin-left: $two-base-size;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: -8px;
+    height: 100%;
+    top: 0;
+    width: 1px;
+    background: $border-grey;
+  }
+}

package/src/components/Box/Box.tsx

@@ -0,0 +1,143 @@
+import { forwardRef, ReactNode } from 'react';
+import classNames from 'classnames/bind';
+import { is } from 'ramda';
+
+import { MarginInterface, PaddingInterface, FlexStylingInterface } from 'types/styling';
+
+import styles from './Box.module.scss';
+
+const s = classNames.bind(styles);
+
+interface Props extends MarginInterface, PaddingInterface, FlexStylingInterface {
+	children: ReactNode;
+	className?: string;
+	position?: string;
+	border?: string;
+	borderTop?: string;
+	borderBottom?: string;
+	borderRight?: string;
+	backgroundColor?: string;
+	showOnBreakpoint?: string;
+	borderLeft?: string;
+	withBorderRadius?: boolean;
+	width?: string;
+	minWidth?: string;
+	maxWidth?: string;
+	withSeparatorRight?: boolean;
+	withSeparatorLeft?: boolean;
+	style?: Record<string, unknown>;
+	onClickCallback?: () => void;
+}
+
+const Box = forwardRef<HTMLDivElement, Props>(
+	(
+		{
+			className,
+			alignSelf,
+			children, // flex
+			displayFlex,
+			displayFlexCenter,
+			displayFlexCenterSpaceBetween,
+			justifyContent,
+			flexDirection,
+			flexGrow,
+			flexWrap,
+			alignItems, // margin
+			margin,
+			marginTop,
+			marginBottom,
+			marginRight,
+			marginLeft, // padding
+			padding,
+			paddingX,
+			paddingY,
+			paddingTop,
+			paddingBottom,
+			paddingRight,
+			paddingLeft, // border,
+			backgroundColor,
+			border,
+			borderTop,
+			borderBottom,
+			borderRight,
+			borderLeft,
+			withBorderRadius,
+			withSeparatorRight,
+			withSeparatorLeft,
+			showOnBreakpoint,
+			width,
+			minWidth,
+			maxWidth,
+			position,
+			style, // inline style
+			onClickCallback,
+			...other
+		},
+		ref
+	) => {
+		const onClick = () => {
+			if (onClickCallback) {
+				onClickCallback();
+			}
+		};
+
+		return (
+			<div
+				className={s('container', {
+					// flex
+					displayFlex,
+					displayFlexCenter,
+					displayFlexCenterSpaceBetween,
+					[`justifyContent_${justifyContent}`]: is(String, justifyContent),
+					[`alignItems_${alignItems}`]: is(String, alignItems),
+					[`flexDirection_${flexDirection}`]: is(String, flexDirection),
+					[`flexWrap_${flexWrap}`]: is(String, flexWrap),
+					[`flexGrow_${flexGrow}`]: is(String, flexGrow),
+					[`alignSelf_${alignSelf}`]: is(String, alignSelf),
+					// margin
+					[`margin_${margin}`]: is(String, margin),
+					[`marginTop_${marginTop}`]: is(String, marginTop),
+					[`marginBottom_${marginBottom}`]: is(String, marginBottom),
+					[`marginRight_${marginRight}`]: is(String, marginRight),
+					[`marginLeft_${marginLeft}`]: is(String, marginLeft),
+					// padding
+					[`padding_${padding}`]: is(String, padding),
+					[`paddingX_${paddingX}`]: is(String, paddingX),
+					[`paddingY_${paddingY}`]: is(String, paddingY),
+					[`paddingTop_${paddingTop}`]: is(String, paddingTop),
+					[`paddingBottom_${paddingBottom}`]: is(String, paddingBottom),
+					[`paddingRight_${paddingRight}`]: is(String, paddingRight),
+					[`paddingLeft_${paddingLeft}`]: is(String, paddingLeft),
+					// border
+					[`backgroundColor_${backgroundColor}`]: is(String, backgroundColor),
+					[`border_${border}`]: is(String, border),
+					[`borderTop_${borderTop}`]: is(String, borderTop),
+					[`borderBottom_${borderBottom}`]: is(String, borderBottom),
+					[`borderRight_${borderRight}`]: is(String, borderRight),
+					[`borderLeft_${borderLeft}`]: is(String, borderLeft),
+					// Width
+					[`width_${width}`]: is(String, width),
+					[`minWidth_${minWidth}`]: is(String, minWidth),
+					[`maxWidth_${maxWidth}`]: is(String, maxWidth),
+					borderRadius: withBorderRadius,
+					// position
+					position_relative: ref,
+					[`position_${position}`]: is(String, position),
+					// Responsiveness
+					[`showOnBreakpoint_${showOnBreakpoint}`]: is(String, showOnBreakpoint),
+					withSeparatorRight,
+					withSeparatorLeft,
+					[className as string]: className
+				})}
+				style={style}
+				ref={ref}
+				onClick={onClick}
+				{...other}
+			>
+				{children}
+			</div>
+		);
+	}
+);
+
+export default Box;

package/src/components/index.tsx

@@ -0,0 +1,3 @@
+import Box from 'components/Box/Box';
+
+export default { Box }; // eslint-disable-line

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './components';