armtek-uikit-react 1.0.2

package/lib/esm/ui/Button/style.css

@@ -0,0 +1,299 @@
+.text_error {
+    color: #cc2935;
+}
+.text_success {
+    color: #0bd998;
+}
+.adornmentContainer {
+    display: flex;
+}
+.adornmentContainer_end {
+    margin-left: auto;
+}
+.adornment_end + * {
+    margin-left: 8px;
+}
+.adornment_start + * {
+    margin-left: 8px;
+}
+.button {
+    outline: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    text-transform: uppercase;
+    padding: 8px 24px;
+    cursor: pointer;
+    transition: 0.3s all ease;
+    font-weight: 500;
+    font-size: 16px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.button:disabled {
+    cursor: initial;
+}
+.button_contained.button_primary {
+    color: #fff;
+    background: #0d46ff;
+}
+.button_contained.button_primary:hover {
+    background: #0b3cd9;
+}
+.button_contained.button_primary:active {
+    background: #406dff;
+}
+.button_contained.button_primary:disabled {
+    background: #0b3cd9;
+}
+.button_contained.button_secondary {
+    background: #ff7f00;
+    color: #fff;
+}
+.button_contained.button_secondary:hover {
+    background: #d96c00;
+}
+.button_contained.button_secondary:active {
+    background: #ff9426;
+}
+.button_contained.button_secondary:disabled {
+    background: #ffa140;
+}
+.button_contained.button_neutral {
+    background: #4d5359;
+}
+.button_contained.button_neutral:hover {
+    background: #40454a;
+}
+.button_contained.button_neutral:active {
+    background: #6c757d;
+}
+.button_contained.button_neutral:disabled {
+    background: #ffa140;
+}
+.button_contained.button_black {
+    background: #212529;
+}
+.button_contained.button_black:hover {
+    background: #40454a;
+}
+.button_contained.button_black:active {
+    background: #6c757d;
+}
+.button_contained.button_black:disabled {
+    background: #ffa140;
+}
+.button_outlined {
+    background: transparent;
+}
+.button_outlined.button_primary {
+    color: #0d46ff;
+    border-color: #0d46ff;
+    background: transparent;
+}
+.button_outlined.button_primary:hover {
+    background: rgba(13, 70, 255, 0.1);
+}
+.button_outlined.button_primary:active {
+    background: #d9e2ff;
+}
+.button_outlined.button_primary:disabled {
+    color: #0b3cd9;
+    border-color: #0b3cd9;
+}
+.button_outlined.button_secondary {
+    border-color: #ff7f00;
+    color: #ff7f00;
+}
+.button_outlined.button_secondary:hover {
+    background: rgba(255, 127, 0, 0.1);
+}
+.button_outlined.button_secondary:active {
+    background: #ffe6cc;
+}
+.button_outlined.button_secondary:disabled {
+    color: #0b3cd9;
+    border-color: #0b3cd9;
+}
+.button_outlined.button_neutral, .button_outlined.button_black {
+    border-color: #212529;
+    color: #212529;
+}
+.button_outlined.button_neutral:hover, .button_outlined.button_black:hover {
+    background: rgba(77, 83, 89, 0.1);
+}
+.button_outlined.button_neutral:active, .button_outlined.button_black:active {
+    background: #d3dae1;
+}
+.button_outlined.button_neutral:disabled, .button_outlined.button_black:disabled {
+    color: #9aa4ae;
+    border-color: #9aa4ae;
+}
+.button_transparent {
+    background: transparent;
+}
+.button_transparent.button_primary {
+    color: #0d46ff;
+    background: transparent;
+}
+.button_transparent.button_primary:hover {
+    background: rgba(13, 70, 255, 0.1);
+}
+.button_transparent.button_primary:active {
+    background: #d9e2ff;
+}
+.button_transparent.button_primary:disabled {
+    color: #0b3cd9;
+    background: none;
+}
+.button_transparent.button_secondary {
+    color: #ff7f00;
+}
+.button_transparent.button_secondary:hover {
+    background: rgba(255, 127, 0, 0.1);
+}
+.button_transparent.button_secondary:active {
+    background: #ffe6cc;
+}
+.button_transparent.button_secondary:disabled {
+    color: #0b3cd9;
+    background: none;
+}
+.button_transparent.button_neutral, .button_transparent.button_black {
+    color: #212529;
+}
+.button_transparent.button_neutral:hover, .button_transparent.button_black:hover {
+    background: rgba(77, 83, 89, 0.1);
+}
+.button_transparent.button_neutral:active, .button_transparent.button_black:active {
+    background: #d3dae1;
+}
+.button_transparent.button_neutral:disabled, .button_transparent.button_black:disabled {
+    color: #9aa4ae;
+    background: none;
+}
+.button__adornment {
+    font-size: inherit;
+}
+.button__adornment_end {
+    margin-left: 8px;
+}
+.button__adornment_start {
+    margin-right: 8px;
+}
+.button_large {
+    height: 42px;
+    font-size: 15px;
+}
+.button_medium {
+    height: 36px;
+    font-size: 14px;
+}
+.button_small {
+    height: 30px;
+    font-size: 13px;
+}
+.button_icon {
+    padding: 8px;
+    width: 56px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+}
+.button_icon.button_large {
+    width: 42px;
+    font-size: 24px;
+}
+.button_icon.button_medium {
+    width: 36px;
+    font-size: 20px;
+}
+.button_icon.button_small {
+    width: 30px;
+    padding: 4px;
+    font-size: 16px;
+}
+.button_group {
+    display: flex;
+    align-items: center;
+}
+.button_group_inline {
+    flex-direction: row;
+}
+.button_group_column {
+    flex-direction: column;
+}
+.button_grouped_inline {
+    border-radius: 0;
+}
+.button_grouped_inline:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+.button_grouped_inline:last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+.button_grouped_inline.button_contained.button_primary + * {
+    border-left-color: #0b3cd9;
+}
+.button_grouped_inline.button_contained.button_secondary + * {
+    border-left-color: #0b3cd9;
+}
+.button_grouped_inline.button_contained.button_neutral + * {
+    border-left-color: #40454a;
+}
+.button_grouped_inline.button_contained.button_black + * {
+    border-left-color: #40454a;
+}
+.button_grouped_inline.button_outlined.button_primary + * {
+    border-left-color: #0b3cd9;
+}
+.button_grouped_inline.button_outlined.button_primary:not(:last-child) {
+    border-right: 0;
+}
+.button_grouped_inline.button_outlined.button_secondary + * {
+    border-left-color: #ff7f00;
+}
+.button_grouped_inline.button_outlined.button_secondary:not(:last-child) {
+    border-right: 0;
+}
+.button_grouped_inline.button_outlined.button_neutral + * {
+    border-left-color: #4d5359;
+}
+.button_grouped_inline.button_outlined.button_neutral:not(:last-child) {
+    border-right: 0;
+}
+.button_grouped_inline.button_outlined.button_black + * {
+    border-left-color: #4d5359;
+}
+.button_grouped_inline.button_outlined.button_black:not(:last-child) {
+    border-right: 0;
+}
+.button_grouped_inline.button_transparent.button_primary + * {
+    border-left-color: #dfe2e6;
+}
+.button_grouped_inline.button_transparent.button_secondary + * {
+    border-left-color: #dfe2e6;
+}
+.button_grouped_inline.button_transparent.button_neutral + * {
+    border-left-color: #dfe2e6;
+}
+.button_grouped_inline.button_transparent.button_black + * {
+    border-left-color: #dfe2e6;
+}
+.button_grouped_column {
+    border-radius: 0;
+}
+.button_grouped_column:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+.button_grouped_column:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+ 

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "armtek-uikit-react",
+  "version": "1.0.2",
+  "description": "Armtek UIKit for React",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "types": "lib/esm/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "start": "storybook dev -p 3000",
+    "build": "node tools/build.js",
+    "build-types": "tsc -d --emitDeclarationOnly --outDir types",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "publish": "node tools/build.js && npm version patch && npm publish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@gl.corp:10022/int/uikit/uikit_react.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "rc-slider": "^10.2.1",
+    "react": "*",
+    "react-datepicker": "^4.16.0",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.22.15",
+    "@babel/core": "^7.22.17",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-default-from": "^7.22.17",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-transform-export-namespace-from": "^7.22.11",
+    "@babel/plugin-transform-runtime": "^7.22.15",
+    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@storybook/addon-actions": "^7.2.3",
+    "@storybook/addon-essentials": "^7.2.3",
+    "@storybook/addon-interactions": "^7.2.3",
+    "@storybook/addon-links": "^7.2.3",
+    "@storybook/addon-mdx-gfm": "^7.2.3",
+    "@storybook/cli": "^7.2.3",
+    "@storybook/react": "^7.2.3",
+    "@storybook/react-webpack5": "^7.2.3",
+    "@storybook/testing-library": "^0.2.0",
+    "@types/react": "^18.2.20",
+    "@types/react-datepicker": "^4.15.0",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^6.4.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-add-module-exports": "^1.0.4",
+    "babel-plugin-dev-expression": "^0.2.3",
+    "babel-plugin-transform-next-use-client": "^1.1.1",
+    "babel-preset-env-modules": "^1.0.1",
+    "cherry-pick": "^0.5.0",
+    "clsx": "^2.0.0",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.13",
+    "execa": "^8.0.1",
+    "file-loader": "^6.2.0",
+    "filemanager-webpack-plugin": "^8.0.0",
+    "fs-extra": "^11.1.1",
+    "glob": "^10.3.4",
+    "html-webpack-plugin": "^5.5.3",
+    "modify-source-webpack-plugin": "^4.1.0",
+    "prettier": "^3.0.1",
+    "sass": "^1.65.1",
+    "sass-loader": "^13.3.2",
+    "storybook": "^7.2.3",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}