kelt-ui-kit-react 2.0.6 → 2.0.9

package/src/form/inputPrice/InputPrice.tsx

@@ -1,42 +1,42 @@
-import { forwardRef, useCallback } from "react";
-import { InputNumber, InputNumberProps } from "../inputNumber/InputNumber";
-
-export type InputPriceProps = Omit<InputNumberProps, "onChange"> & {
-  locale?: string; // ex: 'fr-FR'
-  currency?: string; // ex: 'EUR'
-  allowDecimals?: boolean;
-  onChange?: (value: string) => void;
-  value?: string;
-};
-export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
-  (
-    {
-      value = "",
-      locale = "fr-FR",
-      currency = "EUR",
-      allowDecimals = true,
-      onChange,
-      ...props
-    },
-    ref,
-  ) => {
-    const handleBlur = useCallback(() => {
-      if (onChange) {
-        let newValue = value.replace(",", ".");
-        onChange(parseFloat(newValue || "0").toFixed(2));
-      }
-    }, [onChange, value]);
-
-    return (
-      <InputNumber
-        {...props}
-        ref={ref}
-        pattern="[0-9]*[.,]?[0-9]*"
-        inputMode="decimal" // mobile keyboard adaptatif
-        value={value ?? ""}
-        onChange={(e) => onChange?.(e.target.value)}
-        onBlur={handleBlur} // Force le formatage à 2 décimales en sortie
-      />
-    );
-  },
-);
+import { forwardRef, useCallback } from "react";
+import { InputNumber, InputNumberProps } from "../inputNumber/InputNumber";
+
+export type InputPriceProps = Omit<InputNumberProps, "onChange"> & {
+  locale?: string; // ex: 'fr-FR'
+  currency?: string; // ex: 'EUR'
+  allowDecimals?: boolean;
+  onChange?: (value: string) => void;
+  value?: string;
+};
+export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
+  (
+    {
+      value = "",
+      locale = "fr-FR",
+      currency = "EUR",
+      allowDecimals = true,
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const handleBlur = useCallback(() => {
+      if (onChange) {
+        let newValue = value.replace(",", ".");
+        onChange(parseFloat(newValue || "0").toFixed(2));
+      }
+    }, [onChange, value]);
+
+    return (
+      <InputNumber
+        {...props}
+        ref={ref}
+        pattern="[0-9]*[.,]?[0-9]*"
+        inputMode="decimal" // mobile keyboard adaptatif
+        value={value ?? ""}
+        onChange={(e) => onChange?.(e.target.value)}
+        onBlur={handleBlur} // Force le formatage à 2 décimales en sortie
+      />
+    );
+  },
+);

package/src/form/inputPrice/InputPrice.view.tsx

@@ -1,15 +1,15 @@
-import { useState } from "react";
-import { InputPrice } from "./InputPrice";
-
-export const InputPriceView = () => {
-  const [value, setValue] = useState("");
-  return (
-    <InputPrice
-      id="input-price-example"
-      name="inputPrice"
-      placeholder="Enter a price"
-      value={value}
-      onChange={setValue}
-    />
-  );
-};
+import { useState } from "react";
+import { InputPrice } from "./InputPrice";
+
+export const InputPriceView = () => {
+  const [value, setValue] = useState("");
+  return (
+    <InputPrice
+      id="input-price-example"
+      name="inputPrice"
+      placeholder="Enter a price"
+      value={value}
+      onChange={setValue}
+    />
+  );
+};

package/src/form/textArea/TextArea.tsx

@@ -1,59 +1,59 @@
-import { useCallback, useEffect, useState } from "react";
-import "./textArea.css";
-export type TextAreaProps = {
-  name: string;
-  id?: string;
-  value?: string;
-  disabled?: boolean;
-  width?: string;
-  className?: string;
-  onChange?: (value: string, name: string) => void;
-  placeholder?: string;
-  rows?: number;
-  cols?: number;
-  required?: boolean;
-};
-export const TextArea = ({
-  name,
-  id,
-  value,
-  disabled,
-  width,
-  className,
-  onChange,
-  placeholder,
-  cols,
-  rows,
-  required = false,
-}: TextAreaProps) => {
-  const [textAreaValue, setTextAreaValue] = useState(value);
-  useEffect(() => {
-    setTextAreaValue(value);
-  }, [value]);
-
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const newValue = e.target.value;
-      setTextAreaValue(newValue);
-      if (onChange) {
-        onChange(newValue, name);
-      }
-    },
-    [onChange, name]
-  );
-  return (
-    <textarea
-      id={id}
-      style={{ width: width }}
-      className={`form-control-textarea ${className ?? ""}`}
-      name={name}
-      disabled={disabled}
-      value={textAreaValue}
-      onChange={handleChange}
-      placeholder={placeholder}
-      cols={cols}
-      rows={rows}
-      required={required}
-    />
-  );
-};
+import { useCallback, useEffect, useState } from "react";
+import "./textArea.css";
+export type TextAreaProps = {
+  name: string;
+  id?: string;
+  value?: string;
+  disabled?: boolean;
+  width?: string;
+  className?: string;
+  onChange?: (value: string, name: string) => void;
+  placeholder?: string;
+  rows?: number;
+  cols?: number;
+  required?: boolean;
+};
+export const TextArea = ({
+  name,
+  id,
+  value,
+  disabled,
+  width,
+  className,
+  onChange,
+  placeholder,
+  cols,
+  rows,
+  required = false,
+}: TextAreaProps) => {
+  const [textAreaValue, setTextAreaValue] = useState(value);
+  useEffect(() => {
+    setTextAreaValue(value);
+  }, [value]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      setTextAreaValue(newValue);
+      if (onChange) {
+        onChange(newValue, name);
+      }
+    },
+    [onChange, name]
+  );
+  return (
+    <textarea
+      id={id}
+      style={{ width: width }}
+      className={`form-control-textarea ${className ?? ""}`}
+      name={name}
+      disabled={disabled}
+      value={textAreaValue}
+      onChange={handleChange}
+      placeholder={placeholder}
+      cols={cols}
+      rows={rows}
+      required={required}
+    />
+  );
+};

package/src/form/textArea/TextArea.view.tsx

@@ -1,34 +1,34 @@
-import { useMemo } from "react";
-import { TextArea } from "./TextArea";
-
-export const TextAreaView = () => {
-  const textAreaData = useMemo(
-    () => [
-      {
-        name: "textArea",
-        value:
-          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
-        placeholder: "Enter text here...",
-        rows: 5,
-        cols: 50,
-      },
-    ],
-    []
-  );
-  return (
-    <div>
-      <h1>TextArea</h1>
-      {textAreaData.map((textArea, index) => (
-        <div key={index}>
-          <TextArea
-            name={textArea.name}
-            value={textArea.value}
-            placeholder={textArea.placeholder}
-            rows={textArea.rows}
-            cols={textArea.cols}
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
+import { useMemo } from "react";
+import { TextArea } from "./TextArea";
+
+export const TextAreaView = () => {
+  const textAreaData = useMemo(
+    () => [
+      {
+        name: "textArea",
+        value:
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        placeholder: "Enter text here...",
+        rows: 5,
+        cols: 50,
+      },
+    ],
+    []
+  );
+  return (
+    <div>
+      <h1>TextArea</h1>
+      {textAreaData.map((textArea, index) => (
+        <div key={index}>
+          <TextArea
+            name={textArea.name}
+            value={textArea.value}
+            placeholder={textArea.placeholder}
+            rows={textArea.rows}
+            cols={textArea.cols}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/form/textArea/textArea.css

@@ -1,9 +1,9 @@
-.form-control-textarea {
-  border: 1px solid #cfbdbd;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  margin: 0.25rem 0;
-  min-width: 250px;
-  resize: none;
-  font-size: 0.9rem;
-}
+.form-control-textarea {
+  border: 1px solid #cfbdbd;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  margin: 0.25rem 0;
+  min-width: 250px;
+  resize: none;
+  font-size: 0.9rem;
+}

package/src/geocoding/GeocodingService.ts

@@ -1,89 +1,89 @@
-import {
-    GeocodedAddress,
-    GeocodingProvider,
-    GeocodingSearchOptions,
-} from "./geocoding.interface";
-
-const DEFAULT_GEOCODING_URL = "https://data.geopf.fr/geocodage/search";
-
-interface GeocodingFeature {
-    geometry?: {
-        coordinates?: [number, number];
-    };
-    properties?: {
-        id?: string;
-        label?: string;
-        name?: string;
-        postcode?: string;
-        city?: string;
-        citycode?: string;
-        score?: number;
-        type?: string;
-    };
-}
-
-interface GeocodingResponse {
-    features?: GeocodingFeature[];
-}
-
-export interface GeocodingServiceOptions {
-    baseUrl?: string;
-    fetcher?: typeof fetch;
-}
-
-export class GeocodingService implements GeocodingProvider {
-    private readonly baseUrl: string;
-    private readonly fetcher: typeof fetch;
-
-    constructor(options: GeocodingServiceOptions = {}) {
-        this.baseUrl = options.baseUrl ?? DEFAULT_GEOCODING_URL;
-        this.fetcher = options.fetcher ?? globalThis.fetch.bind(globalThis);
-    }
-
-    async search(
-        query: string,
-        options: GeocodingSearchOptions = {},
-    ): Promise<GeocodedAddress[]> {
-        const normalizedQuery = query.trim();
-        if (!normalizedQuery) return [];
-
-        const params = new URLSearchParams({
-            q: normalizedQuery,
-            limit: String(options.limit ?? 5),
-            autocomplete: "1",
-            index: "address",
-        });
-        const response = await this.fetcher(`${this.baseUrl}?${params}`, {
-            signal: options.signal,
-        });
-
-        if (!response.ok) {
-            throw new Error(`Geocoding request failed (${response.status})`);
-        }
-
-        const data = (await response.json()) as GeocodingResponse;
-        return (data.features ?? []).flatMap((feature) => {
-            const properties = feature.properties;
-            const coordinates = feature.geometry?.coordinates;
-            if (!properties?.label || !coordinates) return [];
-
-            return [
-                {
-                    id: properties.id ?? properties.label,
-                    label: properties.label,
-                    addressLine: properties.name ?? properties.label,
-                    postalCode: properties.postcode ?? "",
-                    city: properties.city ?? "",
-                    cityCode: properties.citycode,
-                    countryCode: "FR",
-                    longitude: coordinates[0],
-                    latitude: coordinates[1],
-                    score: properties.score,
-                    type: properties.type,
-                },
-            ];
-        });
-    }
-}
-
-export const geocodingService = new GeocodingService();
+import {
+    GeocodedAddress,
+    GeocodingProvider,
+    GeocodingSearchOptions,
+} from "./geocoding.interface";
+
+const DEFAULT_GEOCODING_URL = "https://data.geopf.fr/geocodage/search";
+
+interface GeocodingFeature {
+    geometry?: {
+        coordinates?: [number, number];
+    };
+    properties?: {
+        id?: string;
+        label?: string;
+        name?: string;
+        postcode?: string;
+        city?: string;
+        citycode?: string;
+        score?: number;
+        type?: string;
+    };
+}
+
+interface GeocodingResponse {
+    features?: GeocodingFeature[];
+}
+
+export interface GeocodingServiceOptions {
+    baseUrl?: string;
+    fetcher?: typeof fetch;
+}
+
+export class GeocodingService implements GeocodingProvider {
+    private readonly baseUrl: string;
+    private readonly fetcher: typeof fetch;
+
+    constructor(options: GeocodingServiceOptions = {}) {
+        this.baseUrl = options.baseUrl ?? DEFAULT_GEOCODING_URL;
+        this.fetcher = options.fetcher ?? globalThis.fetch.bind(globalThis);
+    }
+
+    async search(
+        query: string,
+        options: GeocodingSearchOptions = {},
+    ): Promise<GeocodedAddress[]> {
+        const normalizedQuery = query.trim();
+        if (!normalizedQuery) return [];
+
+        const params = new URLSearchParams({
+            q: normalizedQuery,
+            limit: String(options.limit ?? 5),
+            autocomplete: "1",
+            index: "address",
+        });
+        const response = await this.fetcher(`${this.baseUrl}?${params}`, {
+            signal: options.signal,
+        });
+
+        if (!response.ok) {
+            throw new Error(`Geocoding request failed (${response.status})`);
+        }
+
+        const data = (await response.json()) as GeocodingResponse;
+        return (data.features ?? []).flatMap((feature) => {
+            const properties = feature.properties;
+            const coordinates = feature.geometry?.coordinates;
+            if (!properties?.label || !coordinates) return [];
+
+            return [
+                {
+                    id: properties.id ?? properties.label,
+                    label: properties.label,
+                    addressLine: properties.name ?? properties.label,
+                    postalCode: properties.postcode ?? "",
+                    city: properties.city ?? "",
+                    cityCode: properties.citycode,
+                    countryCode: "FR",
+                    longitude: coordinates[0],
+                    latitude: coordinates[1],
+                    score: properties.score,
+                    type: properties.type,
+                },
+            ];
+        });
+    }
+}
+
+export const geocodingService = new GeocodingService();

package/src/geocoding/geocoding.interface.ts

@@ -1,25 +1,25 @@
-export interface GeocodedAddress {
-    id: string;
-    label: string;
-    addressLine: string;
-    postalCode: string;
-    city: string;
-    cityCode?: string;
-    countryCode: string;
-    longitude: number;
-    latitude: number;
-    score?: number;
-    type?: string;
-}
-
-export interface GeocodingSearchOptions {
-    limit?: number;
-    signal?: AbortSignal;
-}
-
-export interface GeocodingProvider {
-    search(
-        query: string,
-        options?: GeocodingSearchOptions,
-    ): Promise<GeocodedAddress[]>;
-}
+export interface GeocodedAddress {
+    id: string;
+    label: string;
+    addressLine: string;
+    postalCode: string;
+    city: string;
+    cityCode?: string;
+    countryCode: string;
+    longitude: number;
+    latitude: number;
+    score?: number;
+    type?: string;
+}
+
+export interface GeocodingSearchOptions {
+    limit?: number;
+    signal?: AbortSignal;
+}
+
+export interface GeocodingProvider {
+    search(
+        query: string,
+        options?: GeocodingSearchOptions,
+    ): Promise<GeocodedAddress[]>;
+}

package/src/grid/Grid.view.tsx

@@ -1,24 +1,24 @@
-import { Grid } from "./Grid";
-import { GridInterface } from "./grid.interface";
-
-export const GridView = (): JSX.Element => {
-  const mockItems: GridInterface[] = [
-    {
-      md: 6,
-      lg: 4,
-      children: <>test</>,
-    },
-    {
-      md: 6,
-      lg: 4,
-      children: <>test 2 </>,
-    },
-    {
-      md: 6,
-      lg: 4,
-      children: <>test 3 </>,
-    },
-  ];
-
-  return <Grid items={mockItems} />;
-};
+import { Grid } from "./Grid";
+import { GridInterface } from "./grid.interface";
+
+export const GridView = (): JSX.Element => {
+  const mockItems: GridInterface[] = [
+    {
+      md: 6,
+      lg: 4,
+      children: <>test</>,
+    },
+    {
+      md: 6,
+      lg: 4,
+      children: <>test 2 </>,
+    },
+    {
+      md: 6,
+      lg: 4,
+      children: <>test 3 </>,
+    },
+  ];
+
+  return <Grid items={mockItems} />;
+};

package/src/grid/container/Container.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import "./container.css";
-type ContainerProps = {
-  children: React.ReactNode;
-};
-export const Container: React.FC<ContainerProps> = ({ children }) => (
-  <div className="container">{children}</div>
-);
+import React from "react";
+import "./container.css";
+type ContainerProps = {
+  children: React.ReactNode;
+};
+export const Container: React.FC<ContainerProps> = ({ children }) => (
+  <div className="container">{children}</div>
+);

package/src/grid/container/container.css

@@ -1,5 +1,5 @@
-.container {
-  width: 100%;
-  margin: 0 auto;
-  box-sizing: border-box;
+.container {
+  width: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
 }