pixel-react 1.0.5 → 1.0.6

package/src/components/InputWithDropdown/InputWithDropdown.scss

@@ -14,7 +14,7 @@
     .ff-floating-label-input-container {
       .ff-floating-label {
         position: absolute;
-        z-index: 99;
+        z-index: 9;
         color: var(--input-default-border-color);
         top: 7px;
         left: 7px;

package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx

@@ -43,8 +43,7 @@ export const DisabledWithValue: Story = {
   args: {
     ...defaultArgs,
     variant: 'primary',
-    type: 'text',
-    value: 'Disabled',
+    value: 12345,
     disabled: true,
     required: true,
   },
@@ -52,7 +51,7 @@ export const DisabledWithValue: Story = {
 
 export const Controlled: Story = {
   render: () => {
-    const [value, setValue] = useState<string | number>('');
+    const [value, setValue] = useState<number>(0);
     const [error, setError] = useState<boolean>(false);
     const [helperText, setHelperText] = useState<string>('');
 
@@ -70,18 +69,18 @@ export const Controlled: Story = {
 
     const onDropdownChangeHandler = (option: Option) => {
       setSelectedOption(option);
-      setValue('0');
+      setValue(0);
     };
 
     const onInputChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
-      const inputValue = event.target.value;
+      const inputValue = parseInt(event.target.value);
       setValue(inputValue);
 
       if (event.target) {
-        if (inputValue.length <= 0) {
+        if (inputValue < 0 || checkEmpty(value)) {
           setError(true);
           setHelperText(`${event.target.name} is required`);
-        } else if (inputValue.length > 4) {
+        } else if (inputValue > 999) {
           setError(true);
           setHelperText(`${event.target.name} should be upto 999`);
         } else {
@@ -98,7 +97,6 @@ export const Controlled: Story = {
         label="ImplicitTime"
         placeholder={`Enter ImplicitTime here`}
         value={value}
-        type="number"
         required={true}
         error={error}
         helperText={helperText}
@@ -113,7 +111,7 @@ export const Controlled: Story = {
 
 export const InputWithStaticLabelWithoutOptions: Story = {
   render: () => {
-    const [value, setValue] = useState<string | number>('');
+    const [value, setValue] = useState<number>(0);
     const [error, setError] = useState<boolean>(false);
     const [helperText, setHelperText] = useState<string>('');
 
@@ -126,18 +124,18 @@ export const InputWithStaticLabelWithoutOptions: Story = {
 
     const onDropdownChangeHandler = (option: Option) => {
       setSelectedOption(option);
-      setValue('0');
+      setValue(0);
     };
 
     const onInputChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
-      const inputValue = event.target.value;
+      const inputValue = parseInt(event.target.value);
       setValue(inputValue);
 
       if (event.target) {
         if (checkEmpty(inputValue)) {
           setError(true);
           setHelperText(`${event.target.name} is required`);
-        } else if (parseInt(inputValue, 10) >= 366) {
+        } else if (inputValue >= 366) {
           setError(true);
           setHelperText(`${event.target.name} should be upto 365`);
         } else {
@@ -154,7 +152,6 @@ export const InputWithStaticLabelWithoutOptions: Story = {
         label="Duration"
         placeholder={`Enter Duration here`}
         value={value}
-        type="number"
         required={true}
         error={error}
         helperText={helperText}

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -8,7 +8,6 @@ const InputWithDropdown = ({
   name = '',
   label,
   value,
-  type,
   disabled = false,
   required = false,
   placeholder,
@@ -18,18 +17,20 @@ const InputWithDropdown = ({
   selectedOption,
   onDropdownChangeHandler = () => {},
   onInputChangeHandler,
+  onInputBlurHandler,
   optionsRequired = true,
 }: InputWithDropdownProps) => {
+  const isValueFilled = value !== undefined && value >= 0;
   return (
     <div
       className={classNames('ff-input-with-dropdown-container', {
-        'ff-input-with-dropdown-container--filled': !!value,
+        'ff-input-with-dropdown-container--filled': isValueFilled,
       })}
     >
       <fieldset
         className={classNames('ff-input-with-dropdown', {
-          'ff-input-with-dropdown--filled': !!value,
-          'ff-input-with-dropdown--no-hover': !!value,
+          'ff-input-with-dropdown--filled': isValueFilled,
+          'ff-input-with-dropdown--no-hover': isValueFilled,
           'ff-input-with-dropdown--disabled': !!disabled,
           'ff-input-with-dropdown--error': !!error,
         })}
@@ -39,8 +40,8 @@ const InputWithDropdown = ({
             as="label"
             htmlFor={name}
             className={classNames('ff-floating-label', {
-              'ff-floating-label--filled': !!value,
-              'ff-floating-label--no-hover': !!value,
+              'ff-floating-label--filled': isValueFilled,
+              'ff-floating-label--no-hover': isValueFilled,
               'ff-floating-label--error': !!error,
             })}
           >
@@ -49,15 +50,16 @@ const InputWithDropdown = ({
           </Typography>
           <input
             name={name}
-            type={type}
+            type="number"
             id={name}
             value={value}
             onChange={onInputChangeHandler}
+            onBlur={onInputBlurHandler}
             placeholder={placeholder}
             required={required}
             disabled={disabled}
             className={classNames('ff-floating-input', {
-              'ff-floating-input--filled': !!value,
+              'ff-floating-input--filled': isValueFilled,
               'ff-floating-input--disabled': !!disabled,
               'ff-floating-input--error': !!error,
             })}

package/src/components/InputWithDropdown/types.ts

@@ -19,17 +19,14 @@ export interface InputWithDropdownProps {
   /**
    * value | input field value
    */
-  value: string | number;
+  value?: number;
 
   /**
    * variants to set color/style of the input field
    */
   variant?: 'default' | 'primary';
 
-  /**
-   * type to set the input field type
-   */
-  type: 'text' | 'password' | 'number' | 'time';
+  
 
   /**
    * error | If true, error message will be displayed
@@ -82,9 +79,9 @@ export interface InputWithDropdownProps {
   onDropdownChangeHandler?: (option: Option) => void;
 
   /**
-   * onFocus action for input field
+   * onInputBlurHandler action for input field
    */
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onInputBlurHandler?: (event: React.FocusEvent<HTMLInputElement>) => void;
 
   /**
    * id to select the input field uniquely

package/src/components/RadioButton/RadioButton.scss

@@ -23,15 +23,15 @@
     display: none;
   }
   .ff-radio-custom {
-    box-sizing: border-box;
-    @include circle(16px, 1px solid var(--radio-button-border)); //todo
+    box-sizing: content-box;
+    @include circle(14px, 1px solid var(--radio-button-border)); //todo
     position: relative;
     margin-right: 8px;
     @include transition(border-color, background-color);
 
     &::before {
       content: '';
-      @include circle(14px);
+      @include circle(12px);
       background: #fbfdff; //todo
       position: absolute;
       top: 50%;

package/src/components/Select/Select.scss

@@ -112,7 +112,7 @@
       @include absolute-position(6px, auto, auto, auto);
       width: calc(100% - 38px);
       min-height: calc(100% - 8px);
-      padding: 0 28px 0 8px;
+      padding: 0 8px;
       border-radius: 4px;
       border: 1px solid transparent;
       z-index: 100;

package/src/components/TableTree/TableTree.tsx

@@ -6,6 +6,8 @@ import { prepareData } from '../../utils/TableCell/TableCell';
 import Icon from '../Icon';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
+import Checkbox from '../Checkbox';
+
 interface ColumnDataProps {
   name: string;
   accessor: string;
@@ -32,6 +34,7 @@ interface TableTreeProps {
 const TableTree = ({
   columnsData,
   treeData,
+  withCheckBox,
   onClick = () => {},
 }: TableTreeProps) => {
   const [expandedNodes, setExpandedNodes] = useState<Set<ObjectProps>>(
@@ -140,6 +143,7 @@ const TableTree = ({
                 style={{ fontWeight: node.folder ? 600 : 400 }}
                 onClick={(event) => onClick(event, node)}
               >
+                {withCheckBox && <Checkbox />}
                 {prepareData(node, column)}
               </div>
             </td>

package/src/index.ts

@@ -36,8 +36,9 @@ import Tabs from './components/Tabs';
 import HighlightText from './components/HighlightText';
 import Checkbox from './components/Checkbox';
 import Search from './components/Search/Search';
+import DatePicker from './components/DatePicker';
 import StateDropdown from './components/StateDropdown';
-import AddButton from './components/AddButton';
+import IconButton from './components/IconButton';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -46,6 +47,7 @@ import {
   getExtensionWithPeriod,
 } from './utils/getExtension/getExtension';
 
+
 export {
   Button,
   Tooltip,
@@ -83,9 +85,10 @@ export {
   Tabs,
   Checkbox,
   Search,
+  DatePicker,
   StateDropdown,
   StatusButton,
-  AddButton,
+  IconButton,
 
 
   // utils exports

package/src/assets/icons/expired_license_icon.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.867 6.20329C15.873 6.44806 15.6805 6.65267 15.4358 6.65874C15.191 6.6648 14.9864 6.47232 14.9803 6.22754C14.9614 5.5887 14.7704 4.99913 14.4362 4.50352C14.1035 4.01018 13.6268 3.6093 13.0373 3.34938L9.25273 1.6784C8.81623 1.48592 8.37519 1.38891 7.93489 1.38891C7.49459 1.38891 7.05355 1.48516 6.61705 1.6784L2.8325 3.34938C2.22626 3.61688 1.73974 4.03216 1.4063 4.54368C1.07285 5.0552 0.890218 5.66903 0.890218 6.33212V10.8867C0.890218 12.5144 1.66622 13.9633 2.70367 15.1729C3.76613 16.4127 5.10752 17.4047 6.18965 18.0912C6.73527 18.4368 7.33242 18.6111 7.92579 18.6126C8.52294 18.6141 9.12087 18.4436 9.66801 18.1018C9.87489 17.9722 10.1485 18.0351 10.2788 18.2428C10.4084 18.4497 10.3455 18.7232 10.1378 18.8536C9.44672 19.2863 8.68663 19.5023 7.92663 19.5C7.16276 19.4977 6.40191 19.2787 5.71387 18.843C4.57715 18.1223 3.16452 17.075 2.02943 15.751C0.868459 14.3975 0 12.7591 0 10.8874V6.33289C0 5.49627 0.234914 4.71724 0.663091 4.06096C1.09049 3.4047 1.70887 2.87423 2.47579 2.53624L6.26033 0.865263C6.81203 0.62125 7.37356 0.5 7.93661 0.5C8.49965 0.5 9.06045 0.622008 9.61288 0.865263L13.3974 2.53624C14.1439 2.86588 14.7494 3.37589 15.1753 4.0079C15.6004 4.63916 15.8452 5.39166 15.8687 6.20553L15.867 6.20329ZM10.8191 12.7675C10.6448 12.5932 10.6448 12.312 10.8191 12.1377C10.9934 11.9634 11.2745 11.9634 11.4488 12.1377L12.5408 13.229L14.8242 10.9456C14.9985 10.7713 15.2797 10.7713 15.454 10.9456C15.6282 11.1199 15.6282 11.401 15.454 11.5753L12.8561 14.1732C12.6818 14.3475 12.4006 14.3475 12.2264 14.1732L10.8199 12.7667L10.8191 12.7675ZM13.1356 7.7159C14.4732 7.7159 15.6842 8.25775 16.5609 9.13453C17.4377 10.0113 17.9795 11.2224 17.9795 12.5598C17.9795 13.8972 17.4369 15.1084 16.5609 15.985C15.6841 16.8618 14.4731 17.4037 13.1356 17.4037C11.7981 17.4037 10.5871 16.8618 9.71038 15.985C8.83359 15.1083 8.29175 13.8972 8.29175 12.5598C8.29175 11.2224 8.83435 10.0112 9.71038 9.13453C10.5872 8.25775 11.7982 7.7159 13.1356 7.7159ZM15.9312 9.76435C15.2158 9.04897 14.2276 8.6064 13.1356 8.6064C12.0436 8.6064 11.0554 9.04895 10.3401 9.76435C9.62482 10.4797 9.18215 11.4679 9.18215 12.5599C9.18215 13.6519 9.62471 14.6401 10.3401 15.3554C11.0555 16.0707 12.0436 16.5134 13.1356 16.5134C14.2276 16.5134 15.2159 16.0708 15.9312 15.3554C16.6464 14.64 17.0891 13.6519 17.0891 12.5599C17.0891 11.4679 16.6466 10.4796 15.9312 9.76435Z" fill="currentColor"/>
-</svg>

package/src/assets/icons/expiringSoon_license_icon.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.867 6.20329C15.873 6.44806 15.6805 6.65267 15.4358 6.65874C15.191 6.6648 14.9864 6.47232 14.9803 6.22754C14.9614 5.5887 14.7704 4.99913 14.4362 4.50352C14.1035 4.01018 13.6268 3.6093 13.0373 3.34938L9.25273 1.6784C8.81623 1.48592 8.37519 1.38891 7.93489 1.38891C7.49459 1.38891 7.05355 1.48516 6.61705 1.6784L2.8325 3.34938C2.22626 3.61688 1.73974 4.03216 1.4063 4.54368C1.07285 5.0552 0.890218 5.66903 0.890218 6.33212V10.8867C0.890218 12.5144 1.66622 13.9633 2.70367 15.1729C3.76613 16.4127 5.10752 17.4047 6.18965 18.0912C6.73527 18.4368 7.33242 18.6111 7.92579 18.6126C8.52294 18.6141 9.12087 18.4436 9.66801 18.1018C9.87489 17.9722 10.1485 18.0351 10.2788 18.2428C10.4084 18.4497 10.3455 18.7232 10.1378 18.8536C9.44672 19.2863 8.68663 19.5023 7.92663 19.5C7.16276 19.4977 6.40191 19.2787 5.71387 18.843C4.57715 18.1223 3.16452 17.075 2.02943 15.751C0.868459 14.3975 0 12.7591 0 10.8874V6.33289C0 5.49627 0.234914 4.71724 0.663091 4.06096C1.09049 3.4047 1.70887 2.87423 2.47579 2.53624L6.26033 0.865263C6.81203 0.62125 7.37356 0.5 7.93661 0.5C8.49965 0.5 9.06045 0.622008 9.61288 0.865263L13.3974 2.53624C14.1439 2.86588 14.7494 3.37589 15.1753 4.0079C15.6004 4.63916 15.8452 5.39166 15.8687 6.20553L15.867 6.20329ZM10.8191 12.7675C10.6448 12.5932 10.6448 12.312 10.8191 12.1377C10.9934 11.9634 11.2745 11.9634 11.4488 12.1377L12.5408 13.229L14.8242 10.9456C14.9985 10.7713 15.2797 10.7713 15.454 10.9456C15.6282 11.1199 15.6282 11.401 15.454 11.5753L12.8561 14.1732C12.6818 14.3475 12.4006 14.3475 12.2264 14.1732L10.8199 12.7667L10.8191 12.7675ZM13.1356 7.7159C14.4732 7.7159 15.6842 8.25775 16.5609 9.13453C17.4377 10.0113 17.9795 11.2224 17.9795 12.5598C17.9795 13.8972 17.4369 15.1084 16.5609 15.985C15.6841 16.8618 14.4731 17.4037 13.1356 17.4037C11.7981 17.4037 10.5871 16.8618 9.71038 15.985C8.83359 15.1083 8.29175 13.8972 8.29175 12.5598C8.29175 11.2224 8.83435 10.0112 9.71038 9.13453C10.5872 8.25775 11.7982 7.7159 13.1356 7.7159ZM15.9312 9.76435C15.2158 9.04897 14.2276 8.6064 13.1356 8.6064C12.0436 8.6064 11.0554 9.04895 10.3401 9.76435C9.62482 10.4797 9.18215 11.4679 9.18215 12.5599C9.18215 13.6519 9.62471 14.6401 10.3401 15.3554C11.0555 16.0707 12.0436 16.5134 13.1356 16.5134C14.2276 16.5134 15.2159 16.0708 15.9312 15.3554C16.6464 14.64 17.0891 13.6519 17.0891 12.5599C17.0891 11.4679 16.6466 10.4796 15.9312 9.76435Z" fill="currentColor"/>
-</svg>

package/src/components/AddButton/AddButton.stories.tsx

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-
-const meta: Meta<typeof AddButton> = {
-  title: 'Components/AddButton',
-  component: AddButton,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof AddButton>;
-
-export const PrimaryAddButton: Story = {
-  render: () => {
-    const name = 'Project';
-    const onClick = () => {};
-
-    return <AddButton name={name} onClick={onClick} />;
-  },
-};
-
-export default meta;

package/src/components/AddButton/index.ts

@@ -1 +0,0 @@
-export { default } from './AddButton';