@takaro/lib-components 0.0.7 → 0.0.9

package/Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:18.18.2-alpine as build
+FROM node:18.20.4-alpine AS build
 
 ENV NODE_ENV=development
 WORKDIR /app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "private": false,
   "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
   "license": "AGPL-3.0-or-later",
@@ -12,8 +12,7 @@
     "_test": "jest",
     "test:unit": "CI=true vitest",
     "test:watch": "jest --watch",
-    "test:update": "jest --updateSnapshot",
-    "sort-package": "sort-package-json"
+    "test:update": "jest --updateSnapshot"
   },
   "devDependencies": {
     "@hookform/devtools": "^4.2.2",
@@ -24,7 +23,6 @@
     "@types/topojson-client": "^3.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sort-package-json": "^1.53.1",
     "storybook": "7.6.20"
   },
   "peerDependencies": {
@@ -37,7 +35,7 @@
     "@tanstack/react-router": "1.35.3",
     "@types/luxon": "3.4.2",
     "framer-motion": "^10.16.12",
-    "luxon": "3.3.0",
+    "luxon": "3.5.0",
     "notistack": "^3.0.1",
     "polished": "^4.1.3",
     "rc-slider": "^9.7.5",
@@ -47,7 +45,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",
-    "react-icons": "^4.11.0",
+    "react-icons": "^4.11.0 || ^5.0.0",
     "react-intersection-observer": "^9.5.1",
     "react-virtualized-auto-sizer": "^1.0.9",
     "react-window": "^1.8.8",

package/src/components/charts/AreaChart/AreaChart.stories.tsx

@@ -56,8 +56,8 @@ interface PingData {
 function generateData() {
   const data: PingData[] = [];
   for (let i = 0; i < 100; i++) {
-    const timestamp = faker.date.between('2021-01-01T00:00:00Z', '2021-01-31T23:59:59Z').toISOString();
-    const latency = faker.datatype.number({ min: 0, max: 70, precision: 1 });
+    const timestamp = faker.date.between({ from: '2021-01-01T00:00:00Z', to: '2021-01-31T23:59:59Z' }).toISOString();
+    const latency = faker.number.float({ min: 0, max: 70, precision: 1 });
     data.push({ timestamp, latency });
   }
   data.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());

package/src/components/inputs/Date/DatePicker/DatePicker.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { StrictMode, useState } from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { styled } from '../../../../styled';
 import { Button, DatePicker, DatePickerProps } from '../../../../components';
@@ -231,3 +231,37 @@ export const RelativeSubmit: StoryFn<DatePickerProps> = (args) => {
     </Wrapper>
   );
 };
+
+export const AbsoluteSubmit = () => {
+  const [result, setResult] = useState<string>();
+  const { control, handleSubmit } = useForm<FormFields>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = ({ date }) => {
+    setResult(date);
+  };
+
+  return (
+    <StrictMode>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DatePicker
+          mode="absolute"
+          control={control}
+          label="Expiration date"
+          name="date"
+          required={false}
+          loading={false}
+          description={'The role will be automatically removed after this date'}
+          popOverPlacement={'bottom'}
+          timePickerOptions={{ interval: 30 }}
+          allowPastDates={false}
+          format={DateTime.TIME_SIMPLE}
+        />
+        <Button type="submit" text="Submit form" />
+      </form>
+      <p>result: {result}</p>
+    </StrictMode>
+  );
+};

package/src/components/inputs/Date/DatePicker/Generic.tsx

@@ -103,8 +103,10 @@ export const GenericDatePicker: FC<GenericDatePickerProps> = ({
   const [selectedDateTime, setSelectedDateTime] = useState<DateTime>(initialSelectedDateTime);
   const [friendlyName, setFriendlyName] = useState<string | undefined>(undefined);
 
-  const isDateOnly = !timeFormats.includes(format);
-  const isTimeOnly = !dateFormats.includes(format);
+  const isFormatInTimeFormats = timeFormats.includes(JSON.stringify(format));
+  const isFormatInDateFormats = dateFormats.includes(JSON.stringify(format));
+  const isDateOnly = !isFormatInTimeFormats;
+  const isTimeOnly = !isFormatInDateFormats;
   const isDateTime = !isDateOnly && !isTimeOnly;
 
   const isAbsolute = mode === 'absolute';
@@ -181,7 +183,7 @@ export const GenericDatePicker: FC<GenericDatePickerProps> = ({
         <ContentContainer>
           {isAbsolute && (
             <InnerContainer>
-              {dateFormats.includes(format) && (
+              {isFormatInDateFormats && (
                 <Calendar
                   id={`calendar-${id}`}
                   // should be start of day to not update the time when only selecting a date
@@ -200,7 +202,7 @@ export const GenericDatePicker: FC<GenericDatePickerProps> = ({
                   }}
                 />
               )}
-              {timeFormats.includes(format) && (
+              {isFormatInTimeFormats && (
                 <TimePicker
                   selectedDate={selectedDateTime}
                   interval={timePickerOptions?.interval}

package/src/components/inputs/Date/DatePicker/formats.tsx

@@ -21,7 +21,7 @@ export const timeFormats = [
   DateTime.TIME_24_WITH_SHORT_OFFSET,
   DateTime.TIME_24_WITH_LONG_OFFSET,
   ...DateAndTimeFormats,
-];
+].map((format) => JSON.stringify(format));
 
 export const dateFormats = [
   DateTime.DATE_SHORT,
@@ -29,4 +29,4 @@ export const dateFormats = [
   DateTime.DATE_FULL,
   DateTime.DATE_HUGE,
   ...DateAndTimeFormats,
-];
+].map((format) => JSON.stringify(format));

package/src/helpers/makeData.ts

@@ -11,8 +11,8 @@ const range = (len: number) => {
 const newPerson = () => {
   const statusChance = Math.random();
   return {
-    firstName: faker.name.firstName(),
-    lastName: faker.name.lastName(),
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
     age: Math.floor(Math.random() * 30),
     visits: Math.floor(Math.random() * 100),
     progress: Math.floor(Math.random() * 100),