@integrigo/integrigo-ui 1.6.17 → 1.6.18

package/src/components/molecules/Input/Input.tsx

@@ -1,36 +1,36 @@
-import React from 'react';
-import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
-import { FieldProps } from 'formik';
+import React from "react";
+import styled, { css, FlattenSimpleInterpolation } from "styled-components";
+import { FieldProps } from "formik";
 
-import { getValidationTypeProps } from '../../../helpers/validation';
-import { ValidationType } from '../../../types/validation';
-import { IconAddition, IconType } from '../../atoms/Icon';
-import { Label } from '../../atoms/Typography/Label';
-import { FieldLabel, fieldSizeVariants, FieldWrapper } from '../../atoms/Field';
+import { getValidationTypeProps } from "../../../helpers/validation";
+import { ValidationType } from "../../../types/validation";
+import { IconAddition, IconType } from "../../atoms/Icon";
+import { Label } from "../../atoms/Typography/Label";
+import { FieldLabel, fieldSizeVariants, FieldWrapper } from "../../atoms/Field";
 
 export type InputProps = Omit<
-React.InputHTMLAttributes<HTMLInputElement>,
-'size'
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size"
 > &
-FieldProps & {
-  label?: string;
-  validationType?: ValidationType;
-  icon?: IconType;
-  size?: 'xl' | 'l' | 'm' | 's';
-  direction?: 'ltr' | 'rtl';
-  onIconClick?: () => void;
-};
+  FieldProps & {
+    label?: string;
+    validationType?: ValidationType;
+    icon?: IconType;
+    size?: "xl" | "l" | "m" | "s";
+    direction?: "ltr" | "rtl";
+    onIconClick?: () => void;
+  };
 
 const getDirectionPadding = (
-  direction: InputProps['direction'],
-  padding: string,
+  direction: InputProps["direction"],
+  padding: string
 ): FlattenSimpleInterpolation => {
   switch (direction) {
-    case 'ltr':
+    case "ltr":
       return css`
         padding-left: ${padding};
       `;
-    case 'rtl':
+    case "rtl":
       return css`
         padding-right: ${padding};
       `;
@@ -40,7 +40,7 @@ const getDirectionPadding = (
 };
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ icon, label, size = 'm', onIconClick, field, ...props }, ref) => (
+  ({ icon, label, size = "m", onIconClick, field, ...props }, ref) => (
     <FieldWrapper withLabel={Boolean(label)} sizeVariant={size}>
       {label && (
         <FieldLabel sizeVariant={size}>
@@ -48,34 +48,36 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         </FieldLabel>
       )}
 
-      {props.direction !== 'rtl' && (
-        <IconAddition
-          icon={icon}
-          disabled={props.disabled}
-          direction={props.direction}
-          onClick={onIconClick}
-          size={size}
-        />
-      )}
+      <InputWrapper>
+        {props.direction !== "rtl" && (
+          <IconAddition
+            icon={icon}
+            disabled={props.disabled}
+            direction={props.direction}
+            onClick={onIconClick}
+            size={size}
+          />
+        )}
 
-      <InputElement ref={ref} sizeVariant={size} {...field} {...props} />
+        <InputElement ref={ref} sizeVariant={size} {...field} {...props} />
 
-      {props.direction === 'rtl' && (
-        <IconAddition
-          icon={icon}
-          disabled={props.disabled}
-          direction={props.direction}
-          onClick={onIconClick}
-        />
-      )}
+        {props.direction === "rtl" && (
+          <IconAddition
+            icon={icon}
+            disabled={props.disabled}
+            direction={props.direction}
+            onClick={onIconClick}
+          />
+        )}
+      </InputWrapper>
     </FieldWrapper>
-  ),
+  )
 );
 
 const InputElement = styled.input<
-Pick<InputProps, 'validationType' | 'direction'> & {
-  sizeVariant: 'xl' | 'l' | 'm' | 's';
-}
+  Pick<InputProps, "validationType" | "direction"> & {
+    sizeVariant: "xl" | "l" | "m" | "s";
+  }
 >`
   background-color: var(--color-white);
   border: 2px solid var(--shades-of-grey-80);
@@ -105,7 +107,7 @@ Pick<InputProps, 'validationType' | 'direction'> & {
   ${(p) =>
     getDirectionPadding(
       p.direction,
-      fieldSizeVariants[p.sizeVariant].iconPadding,
+      fieldSizeVariants[p.sizeVariant].iconPadding
     )};
 
   &:disabled {
@@ -117,4 +119,6 @@ Pick<InputProps, 'validationType' | 'direction'> & {
   }
 `;
 
-Input.displayName = 'Input';
+const InputWrapper = styled.div`
+  position: relative;
+`;

package/src/components/molecules/Profile/Profile.tsx

@@ -13,8 +13,8 @@ type ProfileProps = Partial<React.ComponentProps<typeof Avatar>> & {
 const fontSizeVariant = {
   s: 12,
   m: 16,
-  l: 20,
-  xl: 24,
+  l: 18,
+  xl: 20,
   xxl: 32,
 };
 

package/src/components/molecules/Switch/Switch.stories.tsx

@@ -0,0 +1,39 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Switch } from "./Switch";
+
+export default {
+  title: "Molecules/Switch",
+  component: Switch,
+} as ComponentMeta<typeof Switch>;
+
+const Template: ComponentStory<typeof Switch> = (args) => <Switch {...args} />;
+
+export const TwoOptions = Template.bind({});
+TwoOptions.args = {
+  onClick: (id) => console.log(id),
+  options: [
+    { id: "1", name: "One" },
+    { id: "2", name: "Two" },
+  ],
+};
+
+export const ThreeOptions = Template.bind({});
+ThreeOptions.args = {
+  onClick: (id) => console.log(id),
+  options: [
+    { id: "1", name: "One" },
+    { id: "2", name: "Two" },
+    { id: "3", name: "Three" },
+  ],
+};
+
+export const ThreeWithDisabled = Template.bind({});
+ThreeWithDisabled.args = {
+  onClick: (id) => console.log(id),
+  options: [
+    { id: "1", name: "One" },
+    { id: "2", name: "Two", disabled: true },
+    { id: "3", name: "Three" },
+  ],
+};

package/src/components/molecules/Switch/Switch.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+interface SwitchOption {
+  id: string;
+  name: string;
+  disabled?: boolean;
+}
+
+export interface SwitchProps {
+  options:
+    | [SwitchOption, SwitchOption]
+    | [SwitchOption, SwitchOption, SwitchOption];
+  active?: SwitchOption["id"];
+  onClick: (id: SwitchOption["id"]) => void;
+}
+
+export const Switch: React.FC<SwitchProps> = ({
+  options,
+  active: defaultActive,
+  onClick,
+}) => {
+  const [active, setActive] = useState(defaultActive);
+
+  const activeOption = options.find(({ id }) => id === active);
+  const offset = activeOption ? options.indexOf(activeOption) : 0;
+
+  const handleOptionClick = (id: string, disabled?: boolean) => {
+    if (disabled) {
+      return;
+    }
+
+    setActive(id);
+    onClick(id);
+  };
+
+  return (
+    <Root count={options.length} offset={offset}>
+      {options.map((option) => (
+        <Option
+          onClick={() => handleOptionClick(option.id, option.disabled)}
+          key={option.id}
+          disabled={option.disabled}
+        >
+          {option.name}
+        </Option>
+      ))}
+    </Root>
+  );
+};
+
+const Root = styled.div<{ count: number; offset: number }>`
+  border-radius: var(--padding-l);
+  background-color: var(--shades-of-grey-20);
+  gap: 0;
+  position: relative;
+  display: flex;
+  padding: var(--padding-s) 0;
+
+  & > div {
+    transition: color var(--transition-speed);
+  }
+
+  & > div:nth-child(${(p) => p.offset + 1}) {
+    color: white;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    background-color: var(--color-orange);
+    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
+    width: ${(p) => `calc(100% / ${p.count})`};
+    height: 100%;
+    transform: ${(p) => `translateX(calc(${p.offset} * 100%))`};
+    left: 0;
+    top: 0;
+    border-radius: var(--padding-xl);
+    z-index: 1;
+    transition: transform var(--transition-speed);
+  }
+`;
+
+const Option = styled.div<{ disabled?: boolean }>`
+  flex: 1;
+  font-weight: var(--font-medium);
+  display: flex;
+  ${(p) => p.disabled && "color: var(--shades-of-grey-40)"};
+  cursor: ${(p) => (p.disabled ? "default" : "pointer")};
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: ${(p) => (p.disabled ? 0 : 2)};
+`;

package/src/components/molecules/Switch/index.ts

@@ -0,0 +1 @@
+export { Switch } from './Switch'

package/src/components/molecules/index.ts

@@ -7,3 +7,4 @@ export { Dropdown } from './Dropdown';
 export { Radio } from './Radio';
 export { Profile } from './Profile';
 export { Tile } from './Tile'
+export { Switch } from './Switch'

package/src/components/organisms/Modal/Divider.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+import { Divider as DividerComponent } from "../../atoms";
+
+export const Divider: React.FC = () => {
+  return <ModalDivider />;
+};
+
+const ModalDivider = styled(DividerComponent)`
+  width: calc(100% + 2 * var(--padding-s));
+  margin: var(--padding-m) 0;
+  transform: translateX(calc(-1 * var(--padding-s)));
+`;

package/src/components/organisms/Modal/Modal.stories.tsx

@@ -18,6 +18,8 @@ const Template: ComponentStory<typeof Modal> = (args) => (
     Some other content
     <Modal show={args.show} onClose={() => null}>
       hey
+      <Modal.Divider />
+      hey hey
     </Modal>
   </>
 );

package/src/components/organisms/Modal/Modal.tsx

@@ -1,18 +1,19 @@
 import React, { PropsWithChildren } from "react";
 import styled from "styled-components";
 import { Card, Icon } from "../../atoms";
+import { Divider } from "./Divider";
+
+export interface ModalStaticProps {
+  Divider: typeof Divider;
+}
 
 export interface ModalProps {
   show: boolean;
   onClose: () => void;
 }
 
-export const Modal: React.FCS<PropsWithChildren<ModalProps>> = ({
-  className,
-  children,
-  show,
-  onClose,
-}) => {
+export const Modal: React.FCS<PropsWithChildren<ModalProps>> &
+  ModalStaticProps = ({ className, children, show, onClose }) => {
   if (!show) {
     return null;
   }
@@ -31,6 +32,8 @@ export const Modal: React.FCS<PropsWithChildren<ModalProps>> = ({
   );
 };
 
+Modal.Divider = Divider;
+
 const Root = styled.div`
   position: fixed;
   left: 0;

package/src/components/organisms/Table/Table.stories.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { Table } from './Table';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import {
+  Column,
+  createColumnHelper,
+} from '@tanstack/react-table';
+import { Button, Profile } from '../../molecules';
+
+export default {
+  title: 'Organisms/Table',
+  component: Table,
+  argTypes: {
+    variant: {
+      name: 'Color variant',
+      type: {
+        name: 'string',
+        required: false,
+      },
+      control: {
+        type: 'select',
+      },
+      options: ['primary', 'secondary'],
+      defaultValue: 'primary',
+    },
+    textAlign: {
+      name: 'Text alignment',
+      type: {
+        name: 'string',
+        required: false,
+      },
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'right', 'center'],
+      defaultValue: 'center',
+    },
+  },
+} as ComponentMeta<typeof Table>;
+
+export const Primary: ComponentStory<typeof Table> = (args) => {
+  type Person = {
+    firstName: string
+    lastName: string
+    age: number
+    visits: number
+    status: string
+    progress: number
+  };
+
+  const personData: Person[] = [
+    {
+      firstName: 'tanner',
+      lastName: 'linsley',
+      age: 24,
+      visits: 100,
+      status: 'In Relationship',
+      progress: 50,
+    },
+    {
+      firstName: 'tandy',
+      lastName: 'miller',
+      age: 40,
+      visits: 40,
+      status: 'Single',
+      progress: 80,
+    },
+    {
+      firstName: 'joe',
+      lastName: 'dirte',
+      age: 45,
+      visits: 20,
+      status: 'Complicated',
+      progress: 10,
+    },
+  ];
+
+  const personColumnHelper = createColumnHelper<Person>();
+
+  const personColumns = [
+    personColumnHelper.accessor('firstName', {
+      cell: info => info.getValue(),
+      footer: info => info.column.id,
+    }),
+    personColumnHelper.accessor(row => row.lastName, {
+      id: 'lastName',
+      cell: info => info.getValue(),
+      header: () => 'Last Name',
+      footer: info => info.column.id,
+    }),
+    personColumnHelper.accessor('age', {
+      header: () => 'Age',
+      cell: info => info.renderValue(),
+      footer: info => info.column.id,
+    }),
+    personColumnHelper.accessor('visits', {
+      header: () => 'Visits',
+      footer: info => info.column.id,
+    }),
+    personColumnHelper.accessor('status', {
+      header: 'Status',
+      footer: info => info.column.id,
+    }),
+    personColumnHelper.accessor('progress', {
+      header: 'Profile Progress',
+      footer: info => info.column.id,
+    }),
+  ] as Column<Person>[];
+
+  return (
+    <Table columns={personColumns} data={personData} variant={args.variant} textAlign={args.textAlign}/>
+  );
+};
+
+export const WithProfile: ComponentStory<typeof Table> = (args) => {
+ type DataType = {
+   fullName: string;
+   points: number;
+   avatar: string;
+   email: string;
+ };
+
+ const data: DataType[] = [
+   {
+     fullName: 'Tanner Linsley',
+     points: 24,
+     avatar: 'https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2',
+     email: 'abc@abc.pl',
+   },
+   {
+     fullName: 'Tandy Miller',
+     points: 80,
+     avatar: 'https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2',
+     email: 'def@def.pl',
+   },
+   {
+     fullName: 'Joe Dirte',
+     points: 45,
+     avatar: 'https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2',
+     email: 'ghi@ghi.pl',
+   },
+ ];
+ 
+ const profileColumnHelper = createColumnHelper<DataType>();
+
+ const columns = [
+   profileColumnHelper.accessor('fullName', {
+     cell: info => {
+       return (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <div style={{ flexBasis: '20px' }}>{info.row.index + 1}.</div>
+          <Profile
+            name={info.getValue()}
+            src={info.row.original.avatar}
+          >
+            <span>{info.row.original.email}</span>
+          </Profile>
+        </div>
+       );
+     },
+     header: () => 'Team member',
+     footer: info => info.column.id,
+   }),
+   profileColumnHelper.accessor('points', {
+     header: () => 'Points',
+     cell: info => info.renderValue(),
+     footer: info => info.column.id,
+   }),
+   profileColumnHelper.display({
+     header: 'Actions',
+     id: 'Actions',
+     cell: () => <div style={{ width: '30px' }}><Button direction={'ltr'} icon={'edit'} ghost>Edit</Button></div>,
+   }),
+ ] as Column<DataType>[];
+
+ return (
+    <Table columns={columns} data={data} variant={args.variant} width={'100%'} textAlign={"left"}/>
+ );
+};

package/src/components/organisms/Table/Table.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Table } from './Table';
+import { Column, createColumnHelper } from '@tanstack/react-table';
+
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+};
+
+const data: Person[] = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 24,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'tandy',
+    lastName: 'miller',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'dirte',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+];
+
+const columnHelper = createColumnHelper<Person>();
+
+const columns = [
+  columnHelper.accessor('firstName', {
+    cell: info => info.getValue(),
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor(row => row.lastName, {
+    id: 'lastName',
+    cell: info => info.getValue(),
+    header: () => 'Last Name',
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('age', {
+    header: () => 'Age',
+    cell: info => info.renderValue(),
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('visits', {
+    header: () => 'Visits',
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+    footer: info => info.column.id,
+  }),
+] as Column<Person>[];
+
+describe('<Table />', () => {
+  it('should render', () => {
+    render(<Table columns={columns} data={data}/>);
+  });
+  it('enabled - should match snapshot', () => {
+    const { container } = render(<Table columns={columns} data={data}/>);
+    expect(container).toMatchSnapshot();
+  });
+});