Inbox task 2 (twentyhq#991)

* Add ability to properly cast a string, number, null to an integer

* Adding Tab UI component

* Only trigger chromatic when asked

Author: charlesBochet

.github/workflows/ci-chromatic.yaml

@@ -7,6 +7,7 @@ on:
   pull_request_target:
 jobs:
   chromatic-deployment:
+    if: ${{ github.event.label.name == 'run-chromatic' || github.event_name == 'push' }}
     runs-on: ubuntu-latest
     env:
       REACT_APP_API_URL: http://127.0.0.1:3000/graphql

front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx

@@ -39,6 +39,12 @@ export const Catalog: Story = {
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.active'] },
     catalog: [
+      {
+        name: 'states',
+        values: ['default', 'hover', 'active', 'disabled'],
+        props: (state: string) =>
+          state === 'default' ? {} : { className: state },
+      },
       {
         name: 'variants',
         values: Object.values(ChipVariant),
@@ -54,12 +60,6 @@ export const Catalog: Story = {
         values: Object.values(ChipAccent),
         props: (accent: ChipAccent) => ({ accent }),
       },
-      {
-        name: 'states',
-        values: ['default', 'hover', 'active', 'disabled'],
-        props: (state: string) =>
-          state === 'default' ? {} : { className: state },
-      },
     ],
   },
   decorators: [CatalogDecorator],

front/src/modules/ui/tab/components/Tab.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  title: string;
+  active?: boolean;
+  className?: string;
+  onClick?: () => void;
+};
+
+const StyledTab = styled.div<{ active?: boolean }>`
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-color: ${({ theme, active }) =>
+    active ? theme.border.color.inverted : 'transparent'};
+  color: ${({ theme, active }) =>
+    active ? theme.font.color.primary : theme.font.color.secondary};
+
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(4)};
+
+  &:hover,
+  &:active {
+    border-color: ${({ theme }) => theme.border.color.inverted};
+    color: ${({ theme }) => theme.font.color.primary};
+  }
+`;
+
+export function Tab({ title, active = false, onClick, className }: OwnProps) {
+  return (
+    <StyledTab onClick={onClick} active={active} className={className}>
+      {title}
+    </StyledTab>
+  );
+}

front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { Tab } from '../Tab';
+
+const meta: Meta<typeof Tab> = {
+  title: 'UI/Tab/Tab',
+  component: Tab,
+};
+
+export default meta;
+type Story = StoryObj<typeof Tab>;
+
+export const Default: Story = {
+  args: {
+    title: 'Tab title',
+    active: false,
+  },
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: Story = {
+  args: { title: 'Tab title' },
+  argTypes: {
+    active: { control: false },
+    onClick: { control: false },
+  },
+  parameters: {
+    pseudo: { hover: ['.hover'], active: ['.active'] },
+    catalog: [
+      {
+        name: 'states',
+        values: ['default', 'hover', 'active'],
+        props: (state: string) =>
+          state === 'default' ? {} : { className: state },
+      },
+      {
+        name: 'Active',
+        values: ['true', 'false'],
+        props: (active: string) => ({ active: active === 'true' }),
+      },
+    ],
+  },
+  decorators: [CatalogDecorator],
+};