benivo-ui-library 1.9.57 → 1.9.58

package/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "printWidth": 200
+}

package/.storybook/main.js

@@ -0,0 +1,65 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const config = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+    addons: [
+        '@storybook/addon-webpack5-compiler-swc',
+        '@storybook/addon-onboarding',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+        '@storybook/addon-styling-webpack',
+    ],
+
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {
+            builder: { useSWC: true }
+        }
+    },
+
+    swc: () => ({
+        jsc: {
+            parser: {
+                syntax: 'ecmascript',
+                jsx: true,
+            },
+            transform: {
+                react: {
+                    runtime: 'automatic',
+                },
+            },
+        },
+    }),
+
+    webpackFinal: async (config) => {
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            '@': path.resolve(__dirname, '../src/'),
+            Hooks: path.resolve(__dirname, '../src/hooks'),
+            HOC: path.resolve(__dirname, '../src/components/HOC'),
+            Utils: path.resolve(__dirname, '../src/utils'),
+            Component: path.resolve(__dirname, '../src/components'),
+            Contexts: path.resolve(__dirname, '../src/contexts'),
+        };
+
+        config.module.rules.push({
+            test: /\.less$/,
+            use: [
+                MiniCssExtractPlugin.loader,
+                { loader: 'css-loader', options: { sourceMap: true } },
+                { loader: 'less-loader', options: { sourceMap: true } }
+            ]
+        });
+
+        config.plugins.push(new MiniCssExtractPlugin());
+
+        return config;
+    },
+};
+
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,15 @@
+/** @type { import('@storybook/react').Preview } */
+import '../src/assets/main.less';
+
+const preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

package/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode",
+    ]
+}

package/.vscode/mcp.json

@@ -0,0 +1,9 @@
+{
+    "inputs": [],
+    "servers": {
+        "figma": {
+            "url": "https://mcp.figma.com/mcp",
+            "type": "http"
+        }
+    }
+}

package/.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "editor.formatOnSave": true,
+    "[javascript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    }
+}

package/Benivo.UI.lib.csproj

@@ -0,0 +1,21 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup Label="Globals">
+    <SccProjectName>SAK</SccProjectName>
+    <SccProvider>SAK</SccProvider>
+    <SccAuxPath>SAK</SccAuxPath>
+    <SccLocalPath>SAK</SccLocalPath>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <Compile Remove="lib\**" />
+    <Content Remove="lib\**" />
+    <EmbeddedResource Remove="lib\**" />
+    <None Remove="lib\**" />
+  </ItemGroup>
+
+</Project>

package/Benivo.UI.lib.sln

@@ -0,0 +1,33 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.30503.244
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Benivo.UI.lib", "Benivo.UI.lib.csproj", "{1AA1D8F2-00EE-407C-8520-FB4A67381AF5}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{1AA1D8F2-00EE-407C-8520-FB4A67381AF5}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{1AA1D8F2-00EE-407C-8520-FB4A67381AF5}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{1AA1D8F2-00EE-407C-8520-FB4A67381AF5}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{1AA1D8F2-00EE-407C-8520-FB4A67381AF5}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {262C0D48-5B19-41E7-96BD-5B2C9D72BD07}
+	EndGlobalSection
+	GlobalSection(TeamFoundationVersionControl) = preSolution
+		SccNumberOfProjects = 2
+		SccEnterpriseProvider = {4CA58AB2-18FA-4F8D-95D4-32DDF27D184C}
+		SccTeamFoundationServer = https://brandjourney.visualstudio.com/
+		SccLocalPath0 = .
+		SccProjectUniqueName1 = Benivo.UI.lib.csproj
+		SccLocalPath1 = .
+	EndGlobalSection
+EndGlobal

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Benivo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Properties/launchSettings.json

@@ -0,0 +1,27 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:62524/",
+      "sslPort": 44383
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "Benivo.UI.lib": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:5001;http://localhost:5000"
+    }
+  }
+}

package/jest.config.js

@@ -0,0 +1,20 @@
+
+module.exports = {
+    testEnvironment: 'jsdom',
+    setupFiles: ['<rootDir>/mocking/setup.js', '<rootDir>/mocking/mock.worker.js'],
+    moduleFileExtensions: ["js", "json", "jsx"],
+    moduleNameMapper: {
+        "\\.(css|less)$": "identity-obj-proxy",
+        "\\.(gif|ttf|eot|svg)$": "<rootDir>/mocking/fileMock.js",
+        "^Component(.*)$": "<rootDir>/src/components$1",
+        "^Utils(.*)$": "<rootDir>/src/utils$1",
+        "^Hooks(.*)$": "<rootDir>/src/hooks$1",
+        "^HOK(.*)$": "<rootDir>/src/HOK$1",
+        "^Contexts(.*)$": "<rootDir>/src/contexts$1",
+    },
+    transform: {
+        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocking/fileMock.js",
+        "^.+\\.jsx?$": "babel-jest"
+    },
+    transformIgnorePatterns: ["/node_modules/"],
+}

package/lib/README.md

@@ -0,0 +1,38 @@
+# benivo-ui-library
+
+[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)
+
+`benivo-ui-library` is a collection of react hooks and components for faster development.
+
+# Installation
+
+```sh
+$npm install benivo-ui-library --save
+```
+# Basic usage
+
+```js
+import React from 'react';
+import { Input, Select, Checkbox, Button } from 'benivo-ui-library';
+import { useInput, useSelect, useCheckbox } from 'benivo-ui-library';
+import { withTransition } from 'benivo-ui-library';
+
+function MyApp() {
+  const email = useInput('initialvalue@gmail.com');
+  const agree = useCheckbox(false);
+  const event= useSelect('all');
+  const eventOptions=['all', 'news', 'promotional'];
+  const handleSubmit=()=>{
+      //some smart code here
+  };
+  
+  return (
+    <form>
+      <Input label="Email"  {...email.bind} />
+      <Select label="Events" options={eventOptions} {...event.bind}/>
+      <Checkbox label="I agree" {...agree.bind} />
+      <Button onClick={handleSubmit}>Subscribe</Button>
+    </form>
+  );
+}
+```

package/{checkbox.less → lib/checkbox.less}

@@ -3,11 +3,45 @@
 //
 .form-check {
     position: relative;
-    padding-left: 1.75rem;
+    padding-left: 2rem;
     min-height: 1.75rem;
     min-width: 1.75rem;
     font-size: 1rem;
 
+    &.checkbox-sm {
+        min-height: 1.5rem;
+        min-width: 1.5rem;
+        padding-left: 1.5rem;
+
+        .checkbox-box {
+            top: 0.25rem;
+            width: 1rem;
+            height: 1rem;
+            min-width: 16px;
+            .border-radius(.25rem);
+        }
+
+        input {
+
+            &:checked,
+            &:indeterminate {
+                &+.checkbox-box {
+                    &:after {
+                        font-size: 0.45rem;
+                    }
+                }
+            }
+
+            &:indeterminate {
+                &+.checkbox-box {
+                    &:after {
+                        width: 0.5rem;
+                    }
+                }
+            }
+        }
+    }
+
     &.round-checkbox {
         padding-left: 46px;
 
@@ -15,7 +49,7 @@
             top: 0;
             height: 20px;
             width: 36px;
-            border: solid 1px var(--border-100);
+            border: solid 1px var(--grey-300);
             .border-radius(100px);
             background-color: var(--bg-100);
             transition: .4s;
@@ -76,14 +110,21 @@
             &:checked {
                 &+.checkbox-box {
                     background-color: var(--white);
-                    border-color: var(--border-200);
+                    border-color: var(--grey-300);
                 }
             }
         }
     }
 
     input {
-        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1px;
+        height: 1px;
+        margin: 0;
+        opacity: 0;
+        pointer-events: none;
 
         &+.checkbox-box.disabled {
             box-shadow: none;
@@ -97,8 +138,8 @@
 
         &:checked {
             &+.checkbox-box {
-                background-color: var(--primary);
-                border-color: var(--primary);
+                background-color: var(--brand-600);
+                border-color: var(--brand-600);
 
                 &:after {
                     display: inline-block;
@@ -129,9 +170,46 @@
             }
         }
 
-        &:hover:not(:checked):not(:disabled) {
+        &:indeterminate {
+            &+.checkbox-box {
+                background-color: var(--brand-600);
+                border-color: var(--brand-600);
+
+                &:after {
+                    content: '';
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    width: 0.625rem;
+                    height: 0.125rem;
+                    border-radius: 999px;
+                    background-color: var(--white);
+                    .transform(translate(-50%, -50%));
+                }
+
+                &.disabled {
+                    box-shadow: none;
+                    background-color: var(--bg-50);
+                    border-color: var(--grey-300);
+
+                    &:after {
+                        background-color: var(--grey-300);
+                    }
+                }
+            }
+        }
+
+        &:focus-visible {
+            &+.checkbox-box {
+                outline: none;
+                box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
+            }
+        }
+
+        &:checked:focus-visible,
+        &:indeterminate:focus-visible {
             &+.checkbox-box {
-                border-color: var(--primary);
+                box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
             }
         }
     }
@@ -143,13 +221,13 @@
         height: 1.25rem;
         width: 1.25rem;
         min-width: 20px;
-        border: 1px solid var(--border-200);
+        border: 1px solid var(--grey-300);
         margin-right: .25px;
         color: var(--white);
         display: flex;
         justify-content: center;
         align-items: center;
-        .border-radius(.25rem);
+        .border-radius(.375rem);
 
         &:focus-visible {
             outline: none;
@@ -174,10 +252,25 @@
                 border-color: var(--error-main);
             }
         }
+
+        &:disabled {
+            &+.checkbox-box {
+                background-color: var(--bg-50);
+                border-color: var(--grey-300);
+                box-shadow: none;
+                cursor: not-allowed;
+            }
+
+            &~.form-check-label,
+            &~small {
+                color: var(--grey-400);
+            }
+        }
     }
 
     small {
         display: block;
+        color: var(--grey-600);
     }
 
     label {
@@ -187,7 +280,7 @@
     &.right-side {
         text-align: right;
         padding-left: 0;
-        padding-right: 1.75rem;
+        padding-right: 2rem;
 
         .checkbox-box {
             left: inherit;
@@ -197,6 +290,7 @@
 
     .form-check-label {
         color: var(--grey-700);
+        font-weight: @font-weight-medium;
 
         &:focus-visible {
             outline: 1px auto Highlight;
@@ -231,7 +325,7 @@
             left: 0;
             right: 0;
             bottom: 0;
-            border: solid 1px var(--border-100);
+            border: solid 1px var(--grey-300);
             .border-radius(18px);
             background-color: var(--bg-100);
             .transition(.4s);