Introduce NumberField component to Symbiosis (#20)

* test(Charts): clarify test case for date handling with timezones

The test case for handling dates with timezone information has been updated to explicitly state that the current implementation does not handle timezone information correctly. This change provides clearer expectations for the behavior of the calculateCountForDataOnDates function and serves as a reminder that timezone handling is a known limitation or area for potential improvement in the future.

* feat(ui): add symbiosis-plus icon

Adds a new SVG icon 'symbiosis-plus' to the UI package and updates the icon type definitions to include this new icon. This enhancement expands the available icon set, providing more options for visual elements in the user interface.

* feat(ui): add NumberField component

Introduces a new NumberField component to the UI package, providing a customizable input for numeric values. This component includes features such as increment/decrement buttons, min/max value constraints, and error handling. It enhances the form input options available in the UI library, allowing for more precise numeric data entry and validation.

* style(tailwind.css): add utility class to hide input spinner buttons

Adds a new utility class 'hide-internal-input-elements' to remove the default spinner buttons from number input fields across different browsers. This improves the consistency of input field appearance and allows for more control over the UI design.

* feat(storybook): add NumberField component stories

Introduces a new set of stories for the NumberField component in Storybook. This addition enhances the documentation and testing capabilities for the NumberField, showcasing various configurations and use cases. The stories include examples of default usage, min/max constraints, error states, custom step values, disabled state, different sizes, controlled component behavior, and custom styling options.

* chore: refine testcase calculateCountForDataOnDates to make it showcase current functionality

examples/storybook/src/stories/NumberField.stories.tsx

@@ -0,0 +1,233 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { NumberField, type NumberFieldProps } from "@synopsisapp/symbiosis-ui";
+
+const meta: Meta<NumberFieldProps> = {
+  title: "Components/NumberField",
+  component: NumberField,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: {
+        type: "text",
+      },
+      description: "Label for the NumberField",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    error: {
+      control: {
+        type: "text",
+      },
+      description: "Error message for the input field",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    required: {
+      control: {
+        type: "boolean",
+      },
+      description: "Whether the input field is required",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    value: {
+      control: {
+        type: "number",
+      },
+      description: "Value of the NumberField",
+      table: {
+        type: {
+          summary: "number",
+        },
+      },
+    },
+    hint: {
+      control: {
+        type: "text",
+      },
+      description: "Hint text for the NumberField",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    placeholder: {
+      control: {
+        type: "text",
+      },
+      description: "Placeholder text for the NumberField",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+      description: "Whether the NumberField is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    min: {
+      control: {
+        type: "number",
+      },
+      description: "Minimum value allowed",
+      table: {
+        type: {
+          summary: "number",
+        },
+      },
+    },
+    max: {
+      control: {
+        type: "number",
+      },
+      description: "Maximum value allowed",
+      table: {
+        type: {
+          summary: "number",
+        },
+      },
+    },
+    step: {
+      control: {
+        type: "number",
+      },
+      description: "Step value for increments/decrements",
+      table: {
+        type: {
+          summary: "number",
+        },
+        defaultValue: { summary: "1" },
+      },
+    },
+    size: {
+      control: {
+        type: "select",
+        options: ["small-100", "small-200", "base", "large-100"],
+      },
+      description: "Size of the NumberField",
+      table: {
+        defaultValue: { summary: "base" },
+        type: {
+          summary: "small-100 | small-200 | base | large-100",
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<NumberFieldProps>;
+
+export const Default: Story = {
+  render: (args) => <NumberField {...args} />,
+  args: {
+    label: "Default NumberField",
+    placeholder: "Enter number",
+  },
+};
+
+export const WithMinMax: Story = {
+  render: (args) => <NumberField {...args} />,
+  args: {
+    label: "NumberField with Min/Max",
+    min: 0,
+    max: 100,
+    hint: "Value must be between 0 and 100",
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <NumberField {...args} />,
+  args: {
+    label: "NumberField with Error",
+    error: "This field is required",
+    required: true,
+  },
+};
+
+export const CustomStep: Story = {
+  render: (args) => <NumberField {...args} />,
+  args: {
+    label: "Custom Step NumberField",
+    step: 0.5,
+    hint: "Increments/decrements by 0.5",
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => <NumberField {...args} />,
+  args: {
+    label: "Disabled NumberField",
+    disabled: true,
+    value: 42,
+  },
+};
+
+export const DifferentSizes: Story = {
+  render: (args) => (
+    <>
+      <NumberField {...args} size="small-200" label="Small 200" />
+      <NumberField {...args} size="small-100" label="Small 100" />
+      <NumberField {...args} size="base" label="Base" />
+      <NumberField {...args} size="large-100" label="Large 100" />
+    </>
+  ),
+  args: {
+    placeholder: "Enter number",
+  },
+};
+
+export const Controlled: Story = {
+  render: (args) => {
+    const [value, setValue] = React.useState<number>(0);
+
+    return <NumberField {...args} value={value} onChange={(value) => setValue(value ?? 0)} />;
+  },
+  args: {
+    label: "Controlled NumberField",
+    placeholder: "Enter number",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+const ControlledNumberField = () => {
+  const [value, setValue] = React.useState<number>(0);
+
+  return <NumberField label="Controlled NumberField" placeholder="Enter number" value={value} onChange={setValue} />;
+}
+`,
+        language: "tsx",
+        type: "code",
+      },
+    },
+  },
+};
+
+export const CustomStyled: Story = {
+  render: (args) => <NumberField {...args} className="[&>div[data-symbiosis-numberField='hint']]:text-red-300" />,
+  args: {
+    label: "Custom Styled NumberField",
+    placeholder: "Enter number",
+    hint: "This is a custom styled hint",
+  },
+};

packages/ui/src/components/Charts/helpers/calculateCountForDataOnDates.test.ts

@@ -172,7 +172,7 @@ describe("calculateCountForDataOnDates", () => {
     expect(result[61]).toEqual({ date: "2023-03-01T00:00:00.000Z", model1: 4, model2: 4 });
   });
 
-  it("handles(?) dates with timezone information", () => {
+  it("treats all dates as UTC, ignoring timezone information", () => {
     const dataWithTimezones = {
       model1: ["2023-01-01T12:00:00+02:00", "2023-01-02T00:00:00Z", "2023-01-03T15:30:00-05:00"],
       model2: ["2023-01-01T23:59:59+01:00", "2023-01-02T01:00:00-08:00", "2023-01-03T00:00:00Z"],
@@ -186,8 +186,8 @@ describe("calculateCountForDataOnDates", () => {
     });
 
     expect(result).toEqual([
-      { date: "2023-01-01T00:00:00.000Z", model1: 1, model2: 1 },
-      { date: "2023-01-02T00:00:00.000Z", model1: 1, model2: 1 },
+      { date: "2023-01-01T00:00:00.000Z", model1: 1, model2: 0 },
+      { date: "2023-01-02T00:00:00.000Z", model1: 1, model2: 2 },
       { date: "2023-01-03T00:00:00.000Z", model1: 1, model2: 1 },
     ]);
   });

packages/ui/src/components/Icon/iconTypes.d.ts

@@ -14,5 +14,6 @@ declare namespace SymbiosisUI {
     | "symbiosis-minus"
     | "symbiosis-check"
     | "symbiosis-exclamation-circle"
-    | "symbiosis-help-circle";
+    | "symbiosis-help-circle"
+    | "symbiosis-plus";
 }