uikit-react-public 0.11.24 → 0.17.4

package/lib/components/Table/subcomponents/SortIcon.tsx

@@ -0,0 +1,63 @@
+import { useTheme } from '../../../theme';
+import type { SortOrder } from '../Table.types';
+
+interface SortingIconProps extends React.SVGAttributes<SVGElement> {
+  sortOrder: SortOrder;
+  size?: number;
+}
+
+const SortingIcon = ({ sortOrder, size = 16 }: SortingIconProps) => {
+  const [theme] = useTheme();
+
+  const leftArrowColour =
+    sortOrder === 'asc'
+      ? theme.color.neutral.black
+      : theme.color.neutral.grey20;
+  const rightArrowColour =
+    sortOrder === 'desc'
+      ? theme.color.neutral.black
+      : theme.color.neutral.grey20;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox='0 0 48 48'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g>
+        <path
+          d='M8 28L15 35L22 28'
+          stroke={leftArrowColour}
+          strokeWidth='4'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M15 35V10'
+          stroke={leftArrowColour}
+          strokeWidth='4'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M43 19L36 12L29 19'
+          stroke={rightArrowColour}
+          strokeWidth='4'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M36 12V37'
+          stroke={rightArrowColour}
+          strokeWidth='4'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default SortingIcon;

package/lib/components/Table/subcomponents/index.ts

@@ -0,0 +1,14 @@
+export { default as Head } from './Head';
+export type { TableHeadProps } from './Head';
+
+export { default as HeadCell } from './HeadCell/HeadCell';
+export type { TableHeadCellProps } from './HeadCell/HeadCell';
+
+export { default as Body } from './Body';
+export type { TableBodyProps } from './Body';
+
+export { default as Row } from './Row';
+export type { TableRowProps } from './Row';
+
+export { default as Cell } from './Cell/Cell';
+export type { TableCellProps } from './Cell/Cell';

package/lib/components/Tabs/Tab.tsx

@@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
 import { useTabContext } from './TabContext';
 
-export const NAME = 'ucl-uikit-tab';
+export const NAME = 'ucl-uikit-tabs__tab';
 
 export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   testId?: string;
@@ -23,7 +23,7 @@ const Tab = ({
   ...props
 }: TabProps) => {
   const [theme] = useTheme();
-  const { activeTab, setActiveTab, fullWidth } = useTabContext();
+  const { activeTab, setActiveTab, fullWidth, color } = useTabContext();
   const isActive = activeTab === value;
 
   const baseStyle = css`
@@ -53,7 +53,7 @@ const Tab = ({
   `;
 
   const activeStyle = css`
-    border-bottom: 4px solid ${theme.color.interaction.blue70};
+    border-bottom: 4px solid ${color || theme.color.interaction.blue70};
     color: ${theme.color.text.primary};
     margin-bottom: -1px;
     font-weight: 700;

package/lib/components/Tabs/TabContext.tsx

@@ -5,6 +5,7 @@ interface TabContextType {
   setActiveTab: (value: string) => void;
   onChange?: (value: string) => void;
   fullWidth?: boolean;
+  color?: string;
 }
 
 const TabContext = createContext<TabContextType | undefined>(undefined);

package/lib/components/Tabs/Tabs.stories.tsx

@@ -7,6 +7,9 @@ const meta = {
   parameters: {
     layout: 'padded',
   },
+  args: {
+    activeTab: '',
+  },
 } satisfies Meta<typeof Tabs>;
 
 export default meta;
@@ -15,7 +18,7 @@ type Story = StoryObj<typeof meta>;
 export const FullWidth: Story = {
   name: 'Full width',
   render: () => (
-    <Tabs>
+    <Tabs activeTab='1'>
       <Tabs.Tab
         label='Tab Item 1'
         value='1'
@@ -39,7 +42,10 @@ export const FullWidth: Story = {
 export const AutoWidth: Story = {
   name: 'Auto width',
   render: () => (
-    <Tabs fullWidth={false}>
+    <Tabs
+      activeTab='1'
+      fullWidth={false}
+    >
       <Tabs.Tab
         label='Tab Item 1'
         value='1'
@@ -63,7 +69,7 @@ export const AutoWidth: Story = {
 export const Counter: Story = {
   name: 'Counter',
   render: () => (
-    <Tabs>
+    <Tabs activeTab='1'>
       <Tabs.Tab
         counter={12}
         label='Tab Item 1'

package/lib/components/Tabs/Tabs.tsx

@@ -1,24 +1,19 @@
-import {
-  memo,
-  HTMLAttributes,
-  useState,
-  Children,
-  isValidElement,
-  useEffect,
-} from 'react';
+import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
 import TabContext from './TabContext';
-import Tab, { TabProps } from './Tab';
+import Tab from './Tab';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export const NAME = 'ucl-uikit-tabs';
 
 export interface TabsBaseProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  testId?: string;
+  activeTab: string;
   onChange?: (value: string) => void;
   fullWidth?: boolean;
+  testId?: string;
+  color?: string;
   ref?: React.RefObject<HTMLDivElement>;
 }
 
@@ -29,37 +24,19 @@ type TabsComponent = React.FC<TabsProps> & {
 };
 
 const TabsBase = ({
+  activeTab,
+  onChange,
+  fullWidth = true,
+  color,
   testId = NAME,
   className,
   children,
-  onChange,
-  fullWidth = true,
   ref,
   ...props
 }: TabsProps) => {
   const [theme] = useTheme();
-  const [activeTab, setActiveTab] = useState<string>('');
-
-  useEffect(() => {
-    if (!activeTab) {
-      const firstValidTab = Children.toArray(children).find((child) => {
-        return (
-          isValidElement<TabProps>(child) &&
-          child.type === Tab &&
-          typeof child.props.value === 'string'
-        );
-      });
-
-      if (firstValidTab && isValidElement<TabProps>(firstValidTab)) {
-        const firstValue = firstValidTab.props.value;
-        setActiveTab(firstValue);
-        onChange?.(firstValue);
-      }
-    }
-  }, [activeTab, children, onChange]);
 
   const handleTabChange = (value: string) => {
-    setActiveTab(value);
     if (onChange) onChange(value);
   };
 
@@ -77,6 +54,7 @@ const TabsBase = ({
         setActiveTab: handleTabChange,
         onChange,
         fullWidth,
+        color,
       }}
     >
       <div

package/lib/components/Tabs/__tests__/Tabs.test.tsx

@@ -9,7 +9,7 @@ describe('Tabs', () => {
   test('snapshot: Minimal props', () => {
     const renderResult = render(
       <ThemeContextProvider>
-        <Tabs>
+        <Tabs activeTab='1'>
           <Tabs.Tab
             label='Tab Item 1'
             value='1'
@@ -35,7 +35,10 @@ describe('Tabs', () => {
   test('snapshot: Custom test id', () => {
     const renderResult = render(
       <ThemeContextProvider>
-        <Tabs data-testid='custom-test-id'>
+        <Tabs
+          activeTab='1'
+          data-testid='custom-test-id'
+        >
           <Tabs.Tab
             label='Tab Item 1'
             value='1'
@@ -61,7 +64,10 @@ describe('Tabs', () => {
   test('snapshot: Auto width', () => {
     const renderResult = render(
       <ThemeContextProvider>
-        <Tabs fullWidth={false}>
+        <Tabs
+          activeTab='1'
+          fullWidth={false}
+        >
           <Tabs.Tab
             label='Tab Item 1'
             value='1'
@@ -87,7 +93,7 @@ describe('Tabs', () => {
   test('snapshot: Counter', () => {
     const renderResult = render(
       <ThemeContextProvider>
-        <Tabs>
+        <Tabs activeTab='1'>
           <Tabs.Tab
             counter={12}
             label='Tab Item 1'

package/lib/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -8,8 +8,8 @@ exports[`Tabs > snapshot: Auto width 1`] = `
 >
   <button
     aria-selected="true"
-    class="ucl-uikit-tab css-u8nay3"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-u8nay3"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 1
@@ -17,8 +17,8 @@ exports[`Tabs > snapshot: Auto width 1`] = `
   </button>
   <button
     aria-selected="false"
-    class="ucl-uikit-tab css-eoe29w"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-eoe29w"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 2
@@ -26,8 +26,8 @@ exports[`Tabs > snapshot: Auto width 1`] = `
   </button>
   <button
     aria-selected="false"
-    class="ucl-uikit-tab css-eoe29w"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-eoe29w"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 3
@@ -35,8 +35,8 @@ exports[`Tabs > snapshot: Auto width 1`] = `
   </button>
   <button
     aria-selected="false"
-    class="ucl-uikit-tab css-eoe29w"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-eoe29w"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     A longer tab item showing auto width
@@ -53,8 +53,8 @@ exports[`Tabs > snapshot: Counter 1`] = `
 >
   <button
     aria-selected="true"
-    class="ucl-uikit-tab css-1gzur5d"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-1gzur5d"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 1
@@ -63,8 +63,8 @@ exports[`Tabs > snapshot: Counter 1`] = `
   </button>
   <button
     aria-selected="false"
-    class="ucl-uikit-tab css-b3abfp"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-b3abfp"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 2
@@ -73,8 +73,8 @@ exports[`Tabs > snapshot: Counter 1`] = `
   </button>
   <button
     aria-selected="false"
-    class="ucl-uikit-tab css-b3abfp"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-b3abfp"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 3
@@ -83,8 +83,8 @@ exports[`Tabs > snapshot: Counter 1`] = `
   </button>
   <button
     aria-selected="false"
-    class="ucl-uikit-tab css-b3abfp"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-b3abfp"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 4
@@ -102,8 +102,8 @@ exports[`Tabs > snapshot: Custom test id 1`] = `
 >
   <button
     aria-selected="true"
-    class="ucl-uikit-tab css-1gzur5d"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-1gzur5d"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 1
@@ -111,8 +111,8 @@ exports[`Tabs > snapshot: Custom test id 1`] = `
   </button>
   <button
     aria-selected="false"
-    class="ucl-uikit-tab css-b3abfp"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-b3abfp"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 2
@@ -120,8 +120,8 @@ exports[`Tabs > snapshot: Custom test id 1`] = `
   </button>
   <button
     aria-selected="false"
-    class="ucl-uikit-tab css-b3abfp"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-b3abfp"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 3
@@ -129,8 +129,8 @@ exports[`Tabs > snapshot: Custom test id 1`] = `
   </button>
   <button
     aria-selected="false"
-    class="ucl-uikit-tab css-b3abfp"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-b3abfp"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 4
@@ -147,8 +147,8 @@ exports[`Tabs > snapshot: Minimal props 1`] = `
 >
   <button
     aria-selected="true"
-    class="ucl-uikit-tab css-1gzur5d"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-1gzur5d"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 1
@@ -156,8 +156,8 @@ exports[`Tabs > snapshot: Minimal props 1`] = `
   </button>
   <button
     aria-selected="false"
-    class="ucl-uikit-tab css-b3abfp"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-b3abfp"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 2
@@ -165,8 +165,8 @@ exports[`Tabs > snapshot: Minimal props 1`] = `
   </button>
   <button
     aria-selected="false"
-    class="ucl-uikit-tab css-b3abfp"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-b3abfp"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 3
@@ -174,8 +174,8 @@ exports[`Tabs > snapshot: Minimal props 1`] = `
   </button>
   <button
     aria-selected="false"
-    class="ucl-uikit-tab css-b3abfp"
-    data-testid="ucl-uikit-tab"
+    class="ucl-uikit-tabs__tab css-b3abfp"
+    data-testid="ucl-uikit-tabs__tab"
     role="tab"
   >
     Tab Item 4

package/lib/components/Textarea/Textarea.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Textarea from './Textarea';
 
 const meta = {
-  title: 'Components/Ready to use/Textarea',
+  title: 'Components/Textarea',
   component: Textarea,
   parameters: {
     layout: 'padded',

package/lib/components/Timepicker/Timepicker.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import Timepicker from './Timepicker';
+
+const meta: Meta<typeof Timepicker> = {
+  title: 'Components/Work in progress/TimePicker',
+  component: Timepicker,
+  decorators: [(Story) => <Story />],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Timepicker>;
+
+export const WithInitialTime: Story = {
+  args: {
+    value: new Date('1970-01-01T12:30:00'),
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [time, setTime] = useState<Date | null>(
+      new Date('1970-01-01T12:30:00')
+    );
+
+    const handleChange = (
+      value: Date | null,
+      event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+      setTime(value);
+      console.log('Selected time as Date object:', value, event);
+    };
+
+    return (
+      <Timepicker
+        value={time}
+        onValueChange={handleChange}
+        testId='controlled-timepicker'
+      />
+    );
+  },
+};

package/lib/components/Timepicker/Timepicker.tsx

@@ -0,0 +1,100 @@
+import type { InputHTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import { convertDatetoTimeString } from './utils';
+
+export const NAME = 'ucl-uikit-timepicker';
+
+export type TimepickerValue = Date | null;
+
+export interface TimepickerProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
+  testId?: string;
+  value?: TimepickerValue;
+  onValueChange?: (
+    value: TimepickerValue,
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+}
+
+const Timepicker = ({
+  testId = NAME,
+  value,
+  className,
+  onValueChange,
+  ...props
+}: TimepickerProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    color: ${theme.color.text.primary};
+    border-radius: ${theme.radius.r4};
+    font-size: ${theme.font.size.f24};
+    border-color: ${theme.color.text.primary};
+    font-family: ${theme.font.family.primary};
+    padding: ${theme.padding.p4};
+
+    &:focus-within {
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+
+    // Ensure the value is not nullish and contains a colon
+    if (!inputValue || !inputValue.includes(':')) {
+      console.error('Invalid time format:', inputValue);
+      return;
+    }
+
+    const parts = inputValue.split(':');
+
+    // Ensure the value splits into exactly two parts (hours and minutes)
+    if (parts.length !== 2) {
+      console.error('Invalid time format:', inputValue);
+      return;
+    }
+
+    const [hoursStr, minutesStr] = parts;
+
+    // Convert hours and minutes to numbers
+    const hours = Number(hoursStr);
+    const minutes = Number(minutesStr);
+
+    // Validate that hours and minutes are within valid ranges
+    if (
+      Number.isNaN(hours) ||
+      Number.isNaN(minutes) ||
+      hours < 0 ||
+      hours > 23 ||
+      minutes < 0 ||
+      minutes > 59
+    ) {
+      console.error('Invalid time values:', { hours, minutes });
+      return;
+    }
+    // Utilises previous date (state) if available and value is not null
+    const date = value ? new Date(value) : new Date();
+    date.setHours(hours, minutes, 0, 0);
+
+    if (onValueChange) {
+      onValueChange(date, e);
+    }
+  };
+
+  return (
+    <input
+      value={convertDatetoTimeString(value ?? null)}
+      onChange={handleChange}
+      className={style}
+      data-testid={testId}
+      type='time'
+      {...props}
+    />
+  );
+};
+
+export default Timepicker;

package/lib/components/Timepicker/__tests__/Timepicker.test.tsx

@@ -0,0 +1,55 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Timepicker from '../Timepicker';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Timepicker', () => {
+  // Snapshot tests
+
+  test('snapshot', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Timepicker />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: testID prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Timepicker testId='testId' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('test ID: default', () => {
+    render(
+      <ThemeContextProvider>
+        <Timepicker />
+      </ThemeContextProvider>
+    );
+    const timePicker = screen.getByTestId('ucl-uikit-timepicker');
+    expect(timePicker).toBeDefined();
+  });
+
+  test('test ID: custom', () => {
+    render(
+      <ThemeContextProvider>
+        <Timepicker testId='custom-test-id' />
+      </ThemeContextProvider>
+    );
+    const timePicker = screen.getByTestId('custom-test-id');
+    expect(timePicker).toBeDefined();
+  });
+  // Test rendering with props
+  test('renders with initial time', () => {
+    const { getByDisplayValue } = render(
+      <ThemeContextProvider>
+        <Timepicker value={new Date('1970-01-01T12:30:00')} />
+      </ThemeContextProvider>
+    );
+    expect(getByDisplayValue('12:30')).toBeInTheDocument();
+  });
+});

package/lib/components/Timepicker/__tests__/__snapshots__/Timepicker.test.tsx.snap

@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Timepicker > snapshot 1`] = `
+<input
+  class="ucl-uikit-timepicker css-4iq7dt"
+  data-testid="ucl-uikit-timepicker"
+  type="time"
+  value=""
+/>
+`;
+
+exports[`Timepicker > snapshot: testID prop 1`] = `
+<input
+  class="ucl-uikit-timepicker css-4iq7dt"
+  data-testid="testId"
+  type="time"
+  value=""
+/>
+`;

package/lib/components/Timepicker/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './Timepicker';
+export type { TimepickerProps } from './Timepicker';