@integrigo/integrigo-ui 1.6.16-f → 1.6.17

package/lib/src/components/atoms/DateTime/DateTime.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "dayjs/locale/pl";
+import "dayjs/locale/en";
+export interface DateTimeProps {
+    date: Date;
+    format?: string;
+    locale?: "en" | "pl";
+    size?: "xl" | "l" | "m" | "s";
+}
+export declare const DateTime: React.FC<DateTimeProps>;

package/lib/src/components/atoms/DateTime/DateTime.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const _default: ComponentMeta<import("react").FC<import("./DateTime").DateTimeProps>>;
+export default _default;
+export declare const Basic: ComponentStory<import("react").FC<import("./DateTime").DateTimeProps>>;

package/lib/src/components/atoms/DateTime/index.d.ts

@@ -0,0 +1 @@
+export { DateTime } from './DateTime';

package/lib/src/components/molecules/Checkbox/Checkbox.stories.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/molecules/Radio/Radio.stories.d.ts

@@ -1,20 +1,20 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Size } from './Radio';
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.6.16f",
+  "version": "1.6.17",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -28,6 +28,7 @@
     "@typescript-eslint/eslint-plugin": "^5.33.1",
     "@typescript-eslint/parser": "^5.33.1",
     "babel-loader": "^8.2.3",
+    "dayjs": "^1.11.5",
     "eslint": "^8.22.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",

package/src/components/atoms/DateTime/DateTime.stories.tsx

@@ -0,0 +1,22 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { DateTime } from './DateTime';
+
+export default {
+  title: 'Atoms/DateTime',
+  component: DateTime,
+  argTypes: {
+    format: {
+      name: 'format',
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof DateTime>;
+
+const Template: ComponentStory<typeof DateTime> = (args) => <DateTime {...args} />;
+
+export const Basic = Template.bind({
+  date: new Date('2022-10-10 11:23')
+});

package/src/components/atoms/DateTime/DateTime.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+import dayjs from "dayjs";
+
+import "dayjs/locale/pl";
+import "dayjs/locale/en";
+
+const DEFAULT_FORMAT = "DD-MM-YYYY | HH:mm";
+
+export interface DateTimeProps {
+  date: Date;
+  format?: string;
+  locale?: "en" | "pl";
+  size?: "xl" | "l" | "m" | "s";
+}
+
+const sizeVariant = {
+  xl: 20,
+  l: 16,
+  m: 12,
+  s: 8,
+};
+
+export const DateTime: React.FC<DateTimeProps> = ({
+  date,
+  format = DEFAULT_FORMAT,
+  locale = "en",
+  size = "m",
+}) => {
+  const dateTime = dayjs(date).locale(locale).format(format);
+
+  return <DateTimeString size={size}>{dateTime}</DateTimeString>;
+};
+
+const DateTimeString = styled.span<{
+  size: Exclude<DateTimeProps["size"], undefined>;
+}>`
+  font-size: ${(p) => sizeVariant[p.size]}px;
+`;

package/src/components/atoms/DateTime/index.ts

@@ -0,0 +1 @@
+export { DateTime } from './DateTime'