chore: Change Readme file and fix some visual bugs

Proskynete · Proskynete · commit dd30e760cc7c · 2022-03-07T02:15:44.000-03:00
diff --git a/README.md b/README.md
@@ -60,20 +60,20 @@ This is the wrapper component that creates the vertical timeline.
 
 - Props
 
-| name       | Type   | Required | Values Allowed              | default values                                                                                                                                                        | Description                                                                  |
-| ---------- | ------ | -------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| theme      | object | false    | colors                      | { yearColor: "#888888", lineColor: "#c5c5c5", dotColor: "#c5c5c5", borderDotColor: "#ffffff", titleColor: "#cccccc", subtitleColor: "#888888", textColor: "#cccccc" } | Set colors in all components                                                 |
-| lang       | node   | false    | `en`, `es`, `de` or `zh_CN` | `en`                                                                                                                                                                  | Change the language `from` and `to` texts and change the format in the dates |
-| dateFormat | string | false    | `L`, `l` or `ll`            | `L`                                                                                                                                                                   | Change the presentation format of dates                                      |
+| name       | Type   | Required | Values Allowed                                   | default values                                                                                                                                                        | Description                                                                  |
+| ---------- | ------ | -------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| theme      | object | false    | colors                                           | { yearColor: "#888888", lineColor: "#c5c5c5", dotColor: "#c5c5c5", borderDotColor: "#ffffff", titleColor: "#cccccc", subtitleColor: "#888888", textColor: "#cccccc" } | Set colors in all components                                                 |
+| lang       | string | false    | `en`, `es`, `de` or `zh_CN`                      | `en`                                                                                                                                                                  | Change the language `from` and `to` texts and change the format in the dates |
+| dateFormat | string | false    | `only-number`, `short`, `with-weekday` or `full` | `only-number`                                                                                                                                                         | Change the presentation format of dates                                      |
 
-`dateFormat`: Receive only one of three options. (The options are same the [moment.js](https://momentjs.com/) using).
+`dateFormat`: Receive only one of four options (The options are same the [moment.js](https://momentjs.com/) using)
 
-|                             | `L`                   | `l`                 | `ll`               |
-| :-------------------------: | --------------------- | ------------------- | ------------------ |
-|        English(`en`)        | `MM/DD/YYYY`          | `M/D/YYYY`          | `MMM DD, YYYY`     |
-|        Spanish(`es`)        | `DD/MM/YYYY`          | `D/M/YYYY`          | `DD de MMM, YYYY`  |
-|        German(`de`)         | `DD.MM.YYYY`          | `D.M.YYYY`          | `DD. MMM YYYY`     |
-| Simplified Chinese(`zh_CN`) | `YYYY 年 MM 月 DD 日` | `YYYY 年 M 月 D 日` | `YYYY 年MMM DD 日` |
+|                             | `only-number` | `short`          | `with-weekday`          | `full`                         |
+| :-------------------------: | ------------- | ---------------- | ----------------------- | ------------------------------ |
+|        English(`en`)        | `MM/D/YYYY`   | `MMM DD, YYYY`   | `ddd, MMM DD, YYYY`     | `dddd, MMMM DD, YYYY`          |
+|        Spanish(`es`)        | `D/MM/YYYY`   | `DD MMM YYYY`    | `ddd, DD [de] MMM YYYY` | `dddd, DD [de] MMMM [de] YYYY` |
+|        German(`de`)         | `D.MM.YYYY`   | `DD.MMM.YYYY`    | `ddd., DD. MMM. YYYY`   | `dddd, DD. MMMM YYYY`          |
+| Simplified Chinese(`zh_CN`) | `YYYY/MM/D`   | `YYYY年MM月DD日` | `YYYY年MMM月DD日`       | `YYYY年MM月DD日dddd`           |
 
 <h3 id="container">Container</h3>
 
@@ -87,7 +87,7 @@ Each event in the timeline will be represented by the `Content` component. This
 
 <h3 id="year-content">YearContent</h3>
 
-For each `Container` you need `YearContent` (like firts children) since with this component you mark the events in the given year.
+For each `Container` you need `YearContent` (like first children) since with this component you mark the events in the given year.
 
 - Props
 
@@ -165,7 +165,7 @@ const customTheme = {
 class Main extends Component {
  render() {
   return(
-   <Timeline theme={customTheme} dateFormat='ll'>
+   <Timeline theme={customTheme} dateFormat='full'>
     <Container>
      <YearContent startDate='2020/07/01' currentYear />
      <BodyContent>
@@ -211,7 +211,7 @@ const Main = () => {
 	};
 
 	return (
-		<Timeline theme={customTheme} dateFormat='ll'>
+		<Timeline theme={customTheme} dateFormat='full'>
 			<Container>
 				<YearContent startDate='2020/07/01' currentYear />
 				<BodyContent>
diff --git a/lib/cjs/components/timeline/index.d.ts b/lib/cjs/components/timeline/index.d.ts
@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { DateFormat, Theme } from '../../config';
+import { DateFormat, Theme } from '../../interfaces';
 interface TimelineProps {
     theme?: Theme;
     lang?: string;
diff --git a/lib/cjs/config/index.d.ts b/lib/cjs/config/index.d.ts
@@ -1,18 +1,4 @@
-export interface Theme {
-    yearColor: string;
-    lineColor: string;
-    dotColor: string;
-    borderDotColor: string;
-    titleColor: string;
-    subtitleColor: string;
-    textColor: string;
-}
-export declare type DateFormat = 'only-number' | 'short' | 'with-weekday' | 'full';
-export interface DefaultValues {
-    theme?: Theme;
-    lang: string;
-    dateFormat: DateFormat;
-}
+import { DefaultValues } from '../interfaces';
 export declare const defaultValues: DefaultValues;
 export declare const mapText: {
     en: {
diff --git a/lib/cjs/context/config.context.d.ts b/lib/cjs/context/config.context.d.ts
@@ -1,2 +1,2 @@
-import { DefaultValues } from '../config';
+import { DefaultValues } from '../interfaces';
 export declare const ConfigContext: import("react").Context<DefaultValues>;
diff --git a/lib/cjs/helpers/transform-date.helper.d.ts b/lib/cjs/helpers/transform-date.helper.d.ts
@@ -1,4 +1,4 @@
-import { DateFormat } from '../config/index';
+import { DateFormat } from '../interfaces';
 interface ITransformDate {
     date: string;
     lang: string;
diff --git a/lib/cjs/interfaces/index.d.ts b/lib/cjs/interfaces/index.d.ts
@@ -0,0 +1,15 @@
+export interface Theme {
+    yearColor: string;
+    lineColor: string;
+    dotColor: string;
+    borderDotColor: string;
+    titleColor: string;
+    subtitleColor: string;
+    textColor: string;
+}
+export declare type DateFormat = 'only-number' | 'short' | 'with-weekday' | 'full';
+export interface DefaultValues {
+    theme?: Theme;
+    lang: string;
+    dateFormat: DateFormat;
+}
diff --git a/lib/cjs/interfaces/index.js b/lib/cjs/interfaces/index.js
@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
diff --git a/lib/cjs/styles/main.d.ts b/lib/cjs/styles/main.d.ts
@@ -1,4 +1,4 @@
-import { DateFormat } from '../config';
+import { DateFormat } from '../interfaces';
 export declare const TimelineWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TimelineWrapperInner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContainerWrapper: import("styled-components").StyledComponent<"section", any, {}, never>;
diff --git a/lib/cjs/styles/main.js b/lib/cjs/styles/main.js
diff --git a/lib/esm/components/timeline/index.d.ts b/lib/esm/components/timeline/index.d.ts
@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { DateFormat, Theme } from '../../config';
+import { DateFormat, Theme } from '../../interfaces';
 interface TimelineProps {
     theme?: Theme;
     lang?: string;
diff --git a/lib/esm/config/index.d.ts b/lib/esm/config/index.d.ts
@@ -1,18 +1,4 @@
-export interface Theme {
-    yearColor: string;
-    lineColor: string;
-    dotColor: string;
-    borderDotColor: string;
-    titleColor: string;
-    subtitleColor: string;
-    textColor: string;
-}
-export declare type DateFormat = 'only-number' | 'short' | 'with-weekday' | 'full';
-export interface DefaultValues {
-    theme?: Theme;
-    lang: string;
-    dateFormat: DateFormat;
-}
+import { DefaultValues } from '../interfaces';
 export declare const defaultValues: DefaultValues;
 export declare const mapText: {
     en: {
diff --git a/lib/esm/context/config.context.d.ts b/lib/esm/context/config.context.d.ts
@@ -1,2 +1,2 @@
-import { DefaultValues } from '../config';
+import { DefaultValues } from '../interfaces';
 export declare const ConfigContext: import("react").Context<DefaultValues>;
diff --git a/lib/esm/helpers/transform-date.helper.d.ts b/lib/esm/helpers/transform-date.helper.d.ts
@@ -1,4 +1,4 @@
-import { DateFormat } from '../config/index';
+import { DateFormat } from '../interfaces';
 interface ITransformDate {
     date: string;
     lang: string;
diff --git a/lib/esm/interfaces/index.d.ts b/lib/esm/interfaces/index.d.ts
@@ -0,0 +1,15 @@
+export interface Theme {
+    yearColor: string;
+    lineColor: string;
+    dotColor: string;
+    borderDotColor: string;
+    titleColor: string;
+    subtitleColor: string;
+    textColor: string;
+}
+export declare type DateFormat = 'only-number' | 'short' | 'with-weekday' | 'full';
+export interface DefaultValues {
+    theme?: Theme;
+    lang: string;
+    dateFormat: DateFormat;
+}
diff --git a/lib/esm/interfaces/index.js b/lib/esm/interfaces/index.js
@@ -0,0 +1 @@
+export {};
diff --git a/lib/esm/styles/main.d.ts b/lib/esm/styles/main.d.ts
@@ -1,4 +1,4 @@
-import { DateFormat } from '../config';
+import { DateFormat } from '../interfaces';
 export declare const TimelineWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TimelineWrapperInner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContainerWrapper: import("styled-components").StyledComponent<"section", any, {}, never>;
diff --git a/lib/esm/styles/main.js b/lib/esm/styles/main.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vertical-timeline-component-react",
-	"version": "2.2.0",
+	"version": "3.0.0",
 	"description": "A simple component for create a vertical timeline with React",
 	"main": "./lib/cjs/index.js",
 	"module": "./lib/esm/index.js",
diff --git a/src/styles/main.ts b/src/styles/main.ts
@@ -36,12 +36,12 @@ const minWidth = () => ({
 	short_zh: '115',
 	'with-weekday_es': '125',
 	'with-weekday_en': '125',
-	'with-weekday_de': '120',
-	'with-weekday_zh': '120',
-	full_es: '135',
-	full_en: '135',
-	full_de: '135',
-	full_zh: '135',
+	'with-weekday_de': '130',
+	'with-weekday_zh': '140',
+	full_es: '125',
+	full_en: '125',
+	full_de: '125',
+	full_zh: '125',
 });
 
 export const YearWrapper = styled.p<YearContentProps>`
@@ -53,7 +53,7 @@ export const YearWrapper = styled.p<YearContentProps>`
 	font-weight: 400;
 	height: max-content;
 	margin: 0;
-	max-width: 35%;
+	max-width: ${({ format, lang }) => `${minWidth()[`${format}_${lang}`]}px`};
 	min-width: ${({ format, lang }) => `${minWidth()[`${format}_${lang}`]}px`};
 	text-align: end;
 `;

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-import { DefaultValues } from '../config';`
	`1`	`+import { DefaultValues } from '../interfaces';`
`2`	`2`	`export declare const ConfigContext: import("react").Context<DefaultValues>;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { DateFormat } from '../config/index';`
	`1`	`+import { DateFormat } from '../interfaces';`
`2`	`2`	`interface ITransformDate {`
`3`	`3`	`date: string;`
`4`	`4`	`lang: string;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+"use strict";`
	`2`	`+Object.defineProperty(exports, "__esModule", { value: true });`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { DateFormat } from '../config';`
	`1`	`+import { DateFormat } from '../interfaces';`
`2`	`2`	`export declare const TimelineWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;`
`3`	`3`	`export declare const TimelineWrapperInner: import("styled-components").StyledComponent<"div", any, {}, never>;`
`4`	`4`	`export declare const ContainerWrapper: import("styled-components").StyledComponent<"section", any, {}, never>;`