@scality/core-ui 0.118.0 → 0.119.0

package/stories/tablev2.stories.tsx

@@ -6,7 +6,11 @@ import {
   Table,
 } from '../src/lib/components/tablev2/Tablev2.component';
 import { Wrapper, Title } from './common';
-import { BrowserRouter as Router, useLocation } from 'react-router-dom';
+import {
+  BrowserRouter,
+  BrowserRouter as Router,
+  useLocation,
+} from 'react-router-dom';
 import { CellProps, Row } from 'react-table';
 import { Box, Button } from '../src/lib/next';
 import styled from 'styled-components';
@@ -324,15 +328,24 @@ export const asyncTable = {
             paddingTop: '20px',
           }}
         >
-          <Table columns={columnAsync} data={data} defaultSortingKey={'health'}>
-            <Table.SingleSelectableContent
-              rowHeight="h40"
-              separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
-              selectedId={'Rodolph Yohann'}
-              onRowSelected={action('Table Row Clicked')}
-            />
-          </Table>
+          <BrowserRouter>
+            <Table
+              columns={columnAsync}
+              data={data}
+              defaultSortingKey={'health'}
+            >
+              <Table.SearchWithQueryParams
+                displayedName={{ singular: 'user', plural: 'users' }}
+              ></Table.SearchWithQueryParams>
+              <Table.SingleSelectableContent
+                rowHeight="h40"
+                separationLineVariant="backgroundLevel3"
+                backgroundVariant="backgroundLevel1"
+                selectedId={'Rodolph Yohann'}
+                onRowSelected={action('Table Row Clicked')}
+              />
+            </Table>
+          </BrowserRouter>
         </div>
       </Wrapper>
     );

package/stories/tabsv2.stories.tsx

@@ -28,8 +28,6 @@ const messages = [
   'Long',
   'Really long long long long long',
   'Hello',
-  'Metalk8s',
-  'ZENKO-UI',
 ];
 
 const generateTab = (n = 10, selectedIndex = 0) => {

package/dist/components/input/Input.component.d.ts

@@ -1,24 +0,0 @@
-import { ChangeEvent, HTMLAttributes, HTMLProps } from 'react';
-import { DebounceInputProps } from 'react-debounce-input';
-export type Item = {
-    label: string;
-    value: string | number;
-};
-type Items = Array<Item>;
-export type InputProps = {
-    value: any;
-    type?: string;
-    label?: string;
-    title?: string;
-    error?: string;
-    id?: string;
-    checked?: boolean;
-    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-    options?: Items;
-    disabled?: boolean;
-    min?: string;
-    max?: string;
-} & HTMLProps<HTMLInputElement> & DebounceInputProps<HTMLInputElement, HTMLAttributes<HTMLInputElement>>;
-declare const Input: ({ label, id, error, type, disabled, ...rest }: InputProps) => JSX.Element;
-export { Input };
-//# sourceMappingURL=Input.component.d.ts.map

package/dist/components/input/Input.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/input/Input.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AACvE,OAAO,EAAiB,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAWzE,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,GAAG,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAC7B,kBAAkB,CAAC,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;AAoHzE,QAAA,MAAM,KAAK,kDAAmD,UAAU,gBAuBvE,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/input/Input.component.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
-import { useRef } from 'react';
-import { DebounceInput } from 'react-debounce-input';
-import { Checkbox } from '../checkbox/Checkbox.component';
-import { Icon } from '../icon/Icon.component';
-import { Select } from '../select/Select.component';
-import { TextArea } from '../textarea/TextArea.component';
-import { InputContainer, LabelStyle, InputErrorMessage, InputWrapper, } from './Input.component.style';
-const InputRenderer = ({ type, id, value, checked, onChange, options = [], min, max, ...rest }) => {
-    const inputEl = useRef(null);
-    const handleNumberClick = (e) => {
-        /*
-         ** Since react is using Synthetic event we have to do the following to be
-         ** able to programmatically dispatch the onChange event from the input
-         */
-        const valuePropDescriptor = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
-        if (valuePropDescriptor && inputEl.current) {
-            const nativeInputValueSetter = valuePropDescriptor.set;
-            if (nativeInputValueSetter) {
-                if (e.target.dataset.core === 'up')
-                    nativeInputValueSetter.call(inputEl.current, max
-                        ? max && parseInt(value) + 1 <= parseInt(max)
-                            ? parseInt(value) + 1
-                            : parseInt(value)
-                        : parseInt(value) + 1);
-                else
-                    nativeInputValueSetter.call(inputEl.current, min
-                        ? min && parseInt(value) - 1 >= parseInt(min)
-                            ? parseInt(value) - 1
-                            : parseInt(value)
-                        : parseInt(value) - 1);
-            }
-            const event = new Event('input', {
-                bubbles: true,
-            });
-            inputEl.current.dispatchEvent(event);
-        }
-    };
-    const input = {
-        select: (_jsx(Select, { id: id, value: value, onChange: onChange, options: options, ...rest })),
-        checkbox: (_jsx(Checkbox, { id: id, value: value, checked: !!checked, onChange: onChange, ...rest })),
-        textarea: _jsx(TextArea, { id: id, value: value, onChange: onChange, ...rest }),
-        number: (_jsxs("div", { className: "sc-number-input-wrapper", children: [_jsx("input", { className: "sc-input-type sc-number-input", type: "number", id: id, value: value, onChange: onChange, ref: inputEl, min: min, max: max, ...rest }), _jsxs("div", { className: "carets-wrapper", children: [_jsx(Icon, { name: "Dropdown-up", "data-core": "up", onClick: handleNumberClick }), _jsx(Icon, { name: "Dropdown-down", "data-core": "down", onClick: handleNumberClick })] })] })),
-        text: (_jsx(DebounceInput, { className: "sc-input-type", minLength: 1, debounceTimeout: 300, id: id, value: value, onChange: onChange, autoComplete: "off", ...rest })),
-    };
-    if (type)
-        return input[type];
-    else
-        return input.text;
-};
-const Input = ({ label, id, error, type, disabled, ...rest }) => {
-    return (_jsxs(InputContainer, { className: "sc-input", disabled: disabled, error: error, type: type, children: [label && (_jsx(LabelStyle, { htmlFor: id, className: "sc-input-label", children: label })), _jsxs(InputWrapper, { className: "sc-input-wrapper", children: [_jsx(InputRenderer, { id: id, type: type, disabled: disabled, ...rest }), error && (_jsx(InputErrorMessage, { className: "sc-input-error", children: error }))] })] }));
-};
-export { Input };

package/dist/components/input/Input.component.style.d.ts

@@ -1,9 +0,0 @@
-export declare const InputContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    disabled: boolean;
-    error: string;
-    type: string;
-}, never>;
-export declare const LabelStyle: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputErrorMessage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-//# sourceMappingURL=Input.component.style.d.ts.map

package/dist/components/input/Input.component.style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input.component.style.d.ts","sourceRoot":"","sources":["../../../src/lib/components/input/Input.component.style.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc;cACf,OAAO;WACV,MAAM;UACP,MAAM;SAsHb,CAAC;AACF,eAAO,MAAM,UAAU,2GAKtB,CAAC;AACF,eAAO,MAAM,iBAAiB,0GAI7B,CAAC;AACF,eAAO,MAAM,YAAY,yGAGxB,CAAC"}

package/dist/components/input/Input.component.style.js

@@ -1,136 +0,0 @@
-import styled, { css } from 'styled-components';
-import { spacing } from '../../spacing';
-import { fontSize } from '../../style/theme';
-import { getThemePropSelector } from '../../utils';
-export const InputContainer = styled.div `
-  display: inline-flex;
-  ${(props) => {
-    if (props.disabled) {
-        return css `
-        opacity: 0.3;
-        input,
-        textarea,
-        select,
-        i {
-          cursor: not-allowed;
-        }
-      `;
-    }
-}}
-  .sc-checkbox {
-    margin: ${spacing.r4} 0;
-  }
-
-  &.sc-select {
-    width: 200px;
-  }
-
-  input.sc-input-type {
-    ${(props) => {
-    const { backgroundLevel1, statusCritical, textSecondary, border } = props.theme;
-    return css `
-        background-color: ${backgroundLevel1};
-        color: ${textSecondary};
-        border: 1px solid ${props.error ? statusCritical : border};
-      `;
-}};
-    padding: 8px ${spacing.r8};
-    font-size: ${fontSize.base};
-    display: block;
-    border-radius: 4px;
-  }
-
-  input.sc-input-type:focus {
-    border-color: ${getThemePropSelector('selectedActive')};
-    outline: none;
-  }
-
-  input[type='number'] {
-    /* Adding a padding to make room for the custom absolute postionned arrows */
-    padding-right: 20px;
-    -moz-appearance: textfield; /*For FireFox*/
-
-    &::-webkit-inner-spin-button {
-      /*For Webkits like Chrome and Safari*/
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  }
-
-  ${(props) => {
-    if (props.type === 'number')
-        return css `
-        .sc-input-wrapper {
-          .sc-number-input-wrapper {
-            position: relative;
-          }
-          align-items: baseline;
-          .carets-wrapper {
-            display: flex;
-            flex-direction: column;
-            ${(props) => {
-            const { textSecondary } = props.theme;
-            return css `
-                color: ${textSecondary};
-              `;
-        }};
-            position: absolute;
-            right: ${spacing.r4};
-            top: 50%;
-            transform: translate(-50%, -50%);
-
-            i {
-              font-size: 0.8em;
-              cursor: pointer;
-            }
-          }
-        }
-      `;
-}}
-
-  ${(props) => {
-    if (props.error) {
-        return css `
-        @keyframes shake {
-          from,
-          to {
-            transform: translate3d(0, 0, 0);
-          }
-
-          10%,
-          30%,
-          50%,
-          70%,
-          90% {
-            transform: translate3d(-5px, 0, 0);
-          }
-
-          20%,
-          40%,
-          60%,
-          80% {
-            transform: translate3d(5px, 0, 0);
-          }
-        }
-        animation-duration: 1s;
-        animation-fill-mode: both;
-        animation-name: shake;
-      `;
-    }
-}};
-`;
-export const LabelStyle = styled.label `
-  align-self: flex-start;
-  padding: ${spacing.r8};
-  font-size: ${fontSize.base};
-  color: ${getThemePropSelector('textPrimary')};
-`;
-export const InputErrorMessage = styled.span `
-  color: ${getThemePropSelector('statusCritical')};
-  margin: ${spacing.r4} 0;
-  font-size: ${fontSize.small};
-`;
-export const InputWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-`;

package/src/lib/components/input/Input.component.style.ts

@@ -1,141 +0,0 @@
-import styled, { css } from 'styled-components';
-import { spacing } from '../../spacing';
-import { fontSize } from '../../style/theme';
-import { getThemePropSelector } from '../../utils';
-export const InputContainer = styled.div<{
-  disabled: boolean;
-  error: string;
-  type: string;
-}>`
-  display: inline-flex;
-  ${(props) => {
-    if (props.disabled) {
-      return css`
-        opacity: 0.3;
-        input,
-        textarea,
-        select,
-        i {
-          cursor: not-allowed;
-        }
-      `;
-    }
-  }}
-  .sc-checkbox {
-    margin: ${spacing.r4} 0;
-  }
-
-  &.sc-select {
-    width: 200px;
-  }
-
-  input.sc-input-type {
-    ${(props) => {
-      const { backgroundLevel1, statusCritical, textSecondary, border } =
-        props.theme;
-      return css`
-        background-color: ${backgroundLevel1};
-        color: ${textSecondary};
-        border: 1px solid ${props.error ? statusCritical : border};
-      `;
-    }};
-    padding: 8px ${spacing.r8};
-    font-size: ${fontSize.base};
-    display: block;
-    border-radius: 4px;
-  }
-
-  input.sc-input-type:focus {
-    border-color: ${getThemePropSelector('selectedActive')};
-    outline: none;
-  }
-
-  input[type='number'] {
-    /* Adding a padding to make room for the custom absolute postionned arrows */
-    padding-right: 20px;
-    -moz-appearance: textfield; /*For FireFox*/
-
-    &::-webkit-inner-spin-button {
-      /*For Webkits like Chrome and Safari*/
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  }
-
-  ${(props) => {
-    if (props.type === 'number')
-      return css`
-        .sc-input-wrapper {
-          .sc-number-input-wrapper {
-            position: relative;
-          }
-          align-items: baseline;
-          .carets-wrapper {
-            display: flex;
-            flex-direction: column;
-            ${(props) => {
-              const { textSecondary } = props.theme;
-              return css`
-                color: ${textSecondary};
-              `;
-            }};
-            position: absolute;
-            right: ${spacing.r4};
-            top: 50%;
-            transform: translate(-50%, -50%);
-
-            i {
-              font-size: 0.8em;
-              cursor: pointer;
-            }
-          }
-        }
-      `;
-  }}
-
-  ${(props) => {
-    if (props.error) {
-      return css`
-        @keyframes shake {
-          from,
-          to {
-            transform: translate3d(0, 0, 0);
-          }
-
-          10%,
-          30%,
-          50%,
-          70%,
-          90% {
-            transform: translate3d(-5px, 0, 0);
-          }
-
-          20%,
-          40%,
-          60%,
-          80% {
-            transform: translate3d(5px, 0, 0);
-          }
-        }
-        animation-duration: 1s;
-        animation-fill-mode: both;
-        animation-name: shake;
-      `;
-    }
-  }};
-`;
-export const LabelStyle = styled.label`
-  align-self: flex-start;
-  padding: ${spacing.r8};
-  font-size: ${fontSize.base};
-  color: ${getThemePropSelector('textPrimary')};
-`;
-export const InputErrorMessage = styled.span`
-  color: ${getThemePropSelector('statusCritical')};
-  margin: ${spacing.r4} 0;
-  font-size: ${fontSize.small};
-`;
-export const InputWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-`;

package/src/lib/components/input/Input.component.tsx

@@ -1,174 +0,0 @@
-// @ts-nocheck
-import { ChangeEvent, HTMLAttributes, HTMLProps, useRef } from 'react';
-import { DebounceInput, DebounceInputProps } from 'react-debounce-input';
-import { Checkbox } from '../checkbox/Checkbox.component';
-import { Icon } from '../icon/Icon.component';
-import { Select } from '../select/Select.component';
-import { TextArea } from '../textarea/TextArea.component';
-import {
-  InputContainer,
-  LabelStyle,
-  InputErrorMessage,
-  InputWrapper,
-} from './Input.component.style';
-export type Item = {
-  label: string;
-  value: string | number;
-};
-type Items = Array<Item>;
-export type InputProps = {
-  value: any;
-  type?: string;
-  label?: string;
-  title?: string;
-  error?: string;
-  id?: string;
-  checked?: boolean;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-  options?: Items;
-  disabled?: boolean;
-  min?: string;
-  max?: string;
-} & HTMLProps<HTMLInputElement> &
-  DebounceInputProps<HTMLInputElement, HTMLAttributes<HTMLInputElement>>;
-
-const InputRenderer = ({
-  type,
-  id,
-  value,
-  checked,
-  onChange,
-  options = [],
-  min,
-  max,
-  ...rest
-}) => {
-  const inputEl = useRef(null);
-
-  const handleNumberClick = (e) => {
-    /*
-     ** Since react is using Synthetic event we have to do the following to be
-     ** able to programmatically dispatch the onChange event from the input
-     */
-    const valuePropDescriptor = Object.getOwnPropertyDescriptor(
-      window.HTMLInputElement.prototype,
-      'value',
-    );
-
-    if (valuePropDescriptor && inputEl.current) {
-      const nativeInputValueSetter = valuePropDescriptor.set;
-
-      if (nativeInputValueSetter) {
-        if (e.target.dataset.core === 'up')
-          nativeInputValueSetter.call(
-            inputEl.current,
-            max
-              ? max && parseInt(value) + 1 <= parseInt(max)
-                ? parseInt(value) + 1
-                : parseInt(value)
-              : parseInt(value) + 1,
-          );
-        else
-          nativeInputValueSetter.call(
-            inputEl.current,
-            min
-              ? min && parseInt(value) - 1 >= parseInt(min)
-                ? parseInt(value) - 1
-                : parseInt(value)
-              : parseInt(value) - 1,
-          );
-      }
-
-      const event = new Event('input', {
-        bubbles: true,
-      });
-      inputEl.current.dispatchEvent(event);
-    }
-  };
-
-  const input = {
-    select: (
-      <Select
-        id={id}
-        value={value}
-        onChange={onChange}
-        options={options}
-        {...rest}
-      />
-    ),
-    checkbox: (
-      <Checkbox
-        id={id}
-        value={value}
-        checked={!!checked}
-        onChange={onChange}
-        {...rest}
-      />
-    ),
-    textarea: <TextArea id={id} value={value} onChange={onChange} {...rest} />,
-    number: (
-      <div className="sc-number-input-wrapper">
-        <input
-          className="sc-input-type sc-number-input"
-          type="number"
-          id={id}
-          value={value}
-          onChange={onChange}
-          ref={inputEl}
-          min={min}
-          max={max}
-          {...rest}
-        />
-        <div className="carets-wrapper">
-          <Icon name="Dropdown-up" data-core="up" onClick={handleNumberClick} />
-          <Icon
-            name="Dropdown-down"
-            data-core="down"
-            onClick={handleNumberClick}
-          />
-        </div>
-      </div>
-    ),
-    text: (
-      <DebounceInput
-        className="sc-input-type"
-        minLength={1}
-        debounceTimeout={300}
-        id={id}
-        value={value}
-        onChange={onChange}
-        autoComplete="off"
-        {...rest}
-      />
-    ),
-  };
-  if (type) return input[type];
-  else return input.text;
-};
-
-const Input = ({ label, id, error, type, disabled, ...rest }: InputProps) => {
-  return (
-    <InputContainer
-      className="sc-input"
-      disabled={disabled}
-      error={error}
-      type={type}
-    >
-      {label && (
-        <LabelStyle htmlFor={id} className="sc-input-label">
-          {label}
-        </LabelStyle>
-      )}
-      <InputWrapper className="sc-input-wrapper">
-        <InputRenderer id={id} type={type} disabled={disabled} {...rest} />
-        {error && (
-          <InputErrorMessage className="sc-input-error">
-            {error}
-          </InputErrorMessage>
-        )}
-      </InputWrapper>
-    </InputContainer>
-  );
-};
-
-export { Input };