benivo-ui-library 1.9.28 → 1.9.29

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,55 @@
+/** @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: { 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/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/{arrowButton.less → lib/arrowButton.less}

@@ -1,10 +1,12 @@
+@arrow-button-color: #93979b;
+
 .arrow-button {
     position: absolute;
     top: 50%;
     .transform(translateY(-50%));
     z-index: 2;
     border: none;
-    background-color: var(--bg-50);
+    background-color: @light-gray-bg;
     cursor: pointer;
     padding: 0;
     width: 35px;
@@ -59,7 +61,7 @@
         display: block;
 
         &:before {
-            color: var(--text-600);
+            color: @arrow-button-color;
         }
     }
 
@@ -69,7 +71,7 @@
         span {
 
             &:before {
-                color: var(--text-600);
+                color: #eeeeee;
             }
         }
     }
@@ -120,20 +122,20 @@
 
         &.active {
             &:hover {
-                background-color: var(--primary);
-                color: var(--white);
+                background-color: @primary-color;
+                color: @white;
 
                 .icon:before {
-                    color: var(--white);
+                    color: @white;
                 }
             }
 
             @media @lg-max {
-                background-color: var(--primary);
-                color: var(--white);
+                background-color: @primary-color;
+                color: @white;
 
                 .icon:before {
-                    color: var(--white);
+                    color: @white;
                 }
             }
         }
@@ -154,8 +156,8 @@
 
         .icon-submitted {
             &:before {
-                color: var(--primary);
+                color: @primary-color;
             }
         }
     }
-}
+}

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

@@ -1,7 +1,7 @@
 .summary-card {
-    background: var(--white);
+    background: @white;
     padding: 24px;
-    border: 1px solid var(--border-200);
+    border: 1px solid @border-color;
     .border-radius(@border-radius);
 
     &__title {

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

@@ -4,7 +4,7 @@
 
     &__title {
         font-size: @extra-small-font-size;
-        border-bottom: 1px solid var(--border-200);
+        border-bottom: 1px solid @border-color;
         padding-bottom: 6px;
         margin-bottom: 20px;
         font-weight: @font-weight-semibold;
@@ -17,7 +17,7 @@
 
         &__label {
             display: inline-block;
-            color: var(--text-600);
+            color: @gray-text;
             flex-basis: 50%;
             padding-right: 10px;
         }
@@ -31,7 +31,7 @@
 
             i {
                 font-size: @extra-small-font-size;
-                color: var(--text-600);
+                color: @light-gray-border;
             }
         }
     }

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

@@ -10,11 +10,11 @@
 
     .assignment-home-location {
         font-size: @small-font-size;
-        color:var(--text-600);
+        color: @extra-light-gray-text;
     }
 
     .location-divider {
-        color:var(--text-600);
+        color: @extra-light-gray-text;
     }
 
     .assignment-host-location {
@@ -24,29 +24,28 @@
 
     &-dates {
         font-size: @extra-small-font-size;
-        color: var(--text-600);
+        color: @gray-text;
     }
 
     .assignment-cancel a {
         font-size: @extra-small-font-size;
         font-weight: @font-weight-semibold;
-        color: var(--primary);
+        color: @link-color;
 
         &:hover {
-            color: var(--primary);
+            color: @link-color;
         }
     }
 
-    &-memberId {
+    &-memberId{
         font-size: @extra-small-font-size;
-        color: var(--text-600);
+        color: @gray-text;
     }
 }
 
-.form-select__value-container,
-.assignment-single-option {
-    .assignment-option-dates {
-        color:var(--text-600);
+.form-select__value-container, .assignment-single-option{
+    .assignment-option-dates{
+        color: @extra-light-gray-text;
     }
 }
 
@@ -81,115 +80,112 @@
     }
 }
 
-.assignment-select-box-custom-menu {
+.assignment-select-box-custom-menu{
     .assignments-filter-wrapper {
         padding: 15px 12px;
-
+    
         .form-select__control {
             cursor: pointer;
         }
-
+    
         .form-group {
             margin-bottom: 0;
             width: 70%;
-
+    
             @media (min-width: 768px) and (max-width: 991px) {
                 width: 80% !important;
             }
-
+    
             &:before {
                 content: '\ed43';
                 font-family: 'icomoon';
-                color:var(--text-600);
+                color: @extra-light-gray-text;
                 display: block;
                 position: absolute;
                 top: 50%;
                 left: @input-pad-x;
                 transform: translateY(-50%);
             }
-
+    
             input {
                 padding-left: 38px;
                 width: 100%;
                 margin-right: 12px;
             }
         }
-
+    
         .assignments-filter {
             display: inline-flex;
             align-items: center;
             cursor: pointer;
             position: relative;
             flex-shrink: 0;
-
+    
             .assignments-filter-statuses {
                 position: absolute;
                 top: 100%;
                 right: 0;
-                background-color: var(--white);
+                background-color: #ffffff;
                 border: solid 1px rgba(0, 0, 0, 0.15);
                 .border-radius(4px);
                 z-index: @zindex-dropdown;
                 width: 256px;
                 margin-top: 10px;
-
-                &.horizontal {
-                    &__right {
+    
+                &.horizontal{
+                    &__right{
                         @media @lg {
                             left: 0;
                             right: unset;
                         }
                     }
-
-                    &__left {
+                    &__left{
                         @media @lg {
                             left: unset;
                             right: 0;
                         }
                     }
                 }
-
-                &.vertical {
-                    &__bottom {
+    
+                &.vertical{
+                    &__bottom{
                         @media @lg {
                             top: 100%;
                             bottom: unset;
                         }
                     }
-
-                    &__top {
+                    &__top{
                         @media @lg {
                             top: unset;
                             bottom: 100%;
                         }
                     }
                 }
-
+    
                 li {
                     padding: 12px;
-
+    
                     &:hover {
-                        background-color: var(--bg-50);
+                        background-color: @form-select-option-bg-selected;
                     }
-
+    
                     &:before {
                         left: 42px;
                     }
-
+    
                     .form-check {
                         margin-bottom: 0;
                         padding-left: 46px;
                     }
                 }
             }
-
+    
             span {
-
                 &,
                 &:before {
-                    color: var(--primary);
+                    color: @primary-color;
                 }
-
+    
                 &:last-child {
                     margin-left: 8px;
                     font-size: @small-font-size;
@@ -199,13 +195,14 @@
     }
 }
 
-.form-select__menu:has(> .assignment-select-box-custom-menu) {
+.form-select__menu:has(> .assignment-select-box-custom-menu){
     --menu-width: @menu-width;
-
+    
     width: 100%;
     right: 0;
-
+    
     @media @lg {
         width: var(--menu-width, @menu-width);
     }
-}
+}
+