Skip to content

Commit

Permalink
Merge pull request #45 from Proskynete/add-typescript
Browse files Browse the repository at this point in the history
Add typescript
  • Loading branch information
Proskynete authored Mar 7, 2022
2 parents b31311a + e280e13 commit 37b1ded
Show file tree
Hide file tree
Showing 96 changed files with 9,815 additions and 9,149 deletions.
19 changes: 0 additions & 19 deletions .babelrc

This file was deleted.

174 changes: 110 additions & 64 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,54 @@
# vertical-timeline-component-react
<div id="top">
<h1>vertical-timeline-component-react
<img src="https://cdn.iconscout.com/icon/free/png-256/typescript-1174965.png" width="25" height="25" />
</h1>

<p>A simple component to generate a responsive vertical timeline</p>
</div>

A simple component to generate a responsive vertical timeline
![Vertical Timeline Component React](https://i.imgur.com/KBqLIlK.png 'How to see vertical-timeline-component-react')

## Status

[![Coverage Status](https://coveralls.io/repos/github/Proskynete/vertical-timeline-component-react/badge.svg?branch=unit-tests)](https://coveralls.io/github/Proskynete/vertical-timeline-component-react?branch=unit-tests) [![Version](https://img.shields.io/npm/v/vertical-timeline-component-react.svg)](https://www.npmjs.com/package/vertical-timeline-component-react) [![Build Status](https://travis-ci.org/Proskynete/vertical-timeline-component-react.svg?branch=master)](https://travis-ci.org/Proskynete/vertical-timeline-component-react) [![Dependencies](https://david-dm.org/proskynete/vertical-timeline-component-react.svg)](https://david-dm.org/proskynete/vertical-timeline-component-react) [![devDependencies Status](https://david-dm.org/proskynete/vertical-timeline-component-react/dev-status.svg)](https://david-dm.org/proskynete/vertical-timeline-component-react?type=dev) [![peerDependencies Status](https://david-dm.org/proskynete/vertical-timeline-component-react/peer-status.svg)](https://david-dm.org/proskynete/vertical-timeline-component-react?type=peer)

## Getting started

![PRs welcome](https://img.shields.io/badge/PRs-welcome-green) [![Coverage Status](https://coveralls.io/repos/github/Proskynete/vertical-timeline-component-react/badge.svg?branch=unit-tests)](https://coveralls.io/github/Proskynete/vertical-timeline-component-react?branch=unit-tests) [![Version](https://img.shields.io/npm/v/vertical-timeline-component-react.svg)](https://www.npmjs.com/package/vertical-timeline-component-react) [![Build Status](https://travis-ci.org/Proskynete/vertical-timeline-component-react.svg?branch=master)](https://travis-ci.org/Proskynete/vertical-timeline-component-react) [![Package Quality](https://packagequality.com/shield/vertical-timeline-component-react.svg)](https://packagequality.com/#?package=vertical-timeline-component-react)

<br />
<br />

<details>
<summary>Table of contents</summary>
<ol>
<li>
<a href="#getting-started">Getting started</a>
</li>
<li>
<a href="#api-documentation">API Documentation</a>
<ul>
<li><a href="#timeline">Timeline</a></li>
<li><a href="#container">Container</a></li>
<li><a href="#year-content">YearContent</a></li>
<li><a href="#body-content">BodyContent</a></li>
<li><a href="#section">Section</a></li>
<li><a href="#description">Description</a></li>
</ul>
</li>
<li><a href="#how-to-use">How to use it</a></li>
<li><a href="#contributors">Contributors</a></li>
</ol>
</details>

<h2 id="getting-started">Getting started</h2>
To install as npm dependency

```sh
npm install --save vertical-timeline-component-react
```

## API Documentation
<p align="right"><a href="#top">🔝</a></p>

<h2 id="api-documentation">API Documentation</h2>

### Timeline
<h3 id="timeline">Timeline</h3>

This is the wrapper component that creates the vertical timeline.

Expand All @@ -29,22 +60,23 @@ 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`, `tr` 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` |
| Turk (`tr`) | `DD.MM.YYYY` | `DD MMM YYYY` | `DD MMM YYYY ddd` | `DD MMMM YYYY dddd` |
| Simplified Chinese (`zh_CN`) | `YYYY/MM/D` | `YYYY年MM月DD日` | `YYYY年MMM月DD日` | `YYYY年MM月DD日dddd` |

### Container
<h3 id="container">Container</h3>

Each event in the timeline will be represented by the `Content` component. This component receive only two children's, the first is `YearContent` and the second is `BodyContent`. There can be multiple repeating instances of this component inside `Timeline` wrapper.

Expand All @@ -54,9 +86,9 @@ Each event in the timeline will be represented by the `Content` component. This
| ------------------ | -------- | ------------------------------- |
| 2 | true | `YearContent` and `BodyContent` |

### YearContent
<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

Expand All @@ -66,7 +98,7 @@ For each `Container` you need `YearContent` (like firts children) since with thi
| endDate | string | false | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the end of the content or contents |
| currentYear | boolean | false | `true` or `false` | current year | The value is the current year, it is recommended to use it in the last Container |

### BodyContent
<h3 id="body-content">BodyContent</h3>

For each `Container` you need `ContentBody` (like second children). This component will be the container of the one or more `Sections`.

Expand All @@ -76,7 +108,7 @@ For each `Container` you need `ContentBody` (like second children). This compone
| ------------------ | -------------------------------------------------- | ------------------------- |
| Many | At least the first `Section` component is required | Only `Section` components |

### Section
<h3 id="section">Section</h3>

This component is the container for one or more `Description`.

Expand All @@ -92,7 +124,7 @@ This component is the container for one or more `Description`.
| ----- | ------ | -------- | ----------------------------- |
| title | string | true | It's the title of any section |

### Description
<h3 id="description">Description</h3>

This component can be the text of the description or a subtitle

Expand All @@ -103,7 +135,9 @@ This component can be the text of the description or a subtitle
| variant | string | false | `subtitle` or `description` | `description` | Transform the format of the text |
| text | string | true | Any text | does not apply | Show the description of the `Section` |

## How to use it
<p align="right"><a href="#top">🔝</a></p>

<h2 id="how-to-use">How to use it</h2>

The following snippet will show you how to use the library:

Expand Down Expand Up @@ -132,7 +166,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>
Expand All @@ -158,47 +192,59 @@ class Main extends Component {

```js
import {
Timeline,
Container,
YearContent,
BodyContent,
Section,
Description,
Timeline,
Container,
YearContent,
BodyContent,
Section,
Description,
} from 'vertical-timeline-component-react';

const Main = () => {
const customTheme = {
yearColor: '#405b73',
lineColor: '#d0cdc4',
dotColor: '#262626',
borderDotColor: '#d0cdc4',
titleColor: '#405b73',
subtitleColor: '#bf9765',
textColor: '#262626',
};

return (
<Timeline theme={customTheme} dateFormat='ll'>
<Container>
<YearContent startDate='2020/07/01' currentYear />
<BodyContent>
<Section title='Title'>
<Description variant='subtitle' text='Subtitle' />
<Description text='Description' />
<Description text='Another description' />
</Section>

<Section title='Another title'>
<Description text='Description' />
<Description text='Another description' />
</Section>
</BodyContent>
</Container>
</Timeline>
);
const customTheme = {
yearColor: '#405b73',
lineColor: '#d0cdc4',
dotColor: '#262626',
borderDotColor: '#d0cdc4',
titleColor: '#405b73',
subtitleColor: '#bf9765',
textColor: '#262626',
};

return (
<Timeline theme={customTheme} dateFormat='full'>
<Container>
<YearContent startDate='2020/07/01' currentYear />
<BodyContent>
<Section title='Title'>
<Description variant='subtitle' text='Subtitle' />
<Description text='Description' />
<Description text='Another description' />
</Section>

<Section title='Another title'>
<Description text='Description' />
<Description text='Another description' />
</Section>
</BodyContent>
</Container>
</Timeline>
);
};
```

## License
<p align="right"><a href="#top">🔝</a></p>

<h2 id="contributors">Contributors</h2>

<a href="https://github.com/Proskynete/vertical-timeline-component-react/graphs/contributors">
<img src="https://contrib.rocks/image?repo=Proskynete/vertical-timeline-component-react"/>
</a>

<p align="right"><a href="#top">🔝</a></p>

<h2 id="license">License</h2>

MIT

<p align="right"><a href="#top">🔝</a></p>
3 changes: 3 additions & 0 deletions lib/cjs/components/body-content/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { FC } from 'react';
declare const BodyContent: FC;
export default BodyContent;
11 changes: 11 additions & 0 deletions lib/cjs/components/body-content/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var BodyContent = function (_a) {
var children = _a.children;
return react_1.default.createElement(react_1.default.Fragment, null, children);
};
exports.default = BodyContent;
3 changes: 3 additions & 0 deletions lib/cjs/components/container/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { FC } from 'react';
declare const Container: FC;
export default Container;
14 changes: 14 additions & 0 deletions lib/cjs/components/container/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var main_1 = require("../../styles/main");
var Container = function (_a) {
var children = _a.children;
return children ? (react_1.default.createElement(main_1.ContainerWrapper, null,
children[0],
react_1.default.createElement(main_1.BodyContent, null, children[1]))) : (react_1.default.createElement(react_1.default.Fragment, null));
};
exports.default = Container;
6 changes: 6 additions & 0 deletions lib/cjs/components/description/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
interface DescriptionProps {
text: string;
variant?: 'description' | 'subtitle' | 'descriptionSubtitle';
}
declare const Description: ({ text, variant }: DescriptionProps) => JSX.Element;
export default Description;
19 changes: 19 additions & 0 deletions lib/cjs/components/description/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var main_1 = require("../../styles/main");
var Description = function (_a) {
var text = _a.text, _b = _a.variant, variant = _b === void 0 ? 'description' : _b;
switch (variant) {
case 'subtitle':
return react_1.default.createElement(main_1.Subtitle, null, text);
case 'descriptionSubtitle':
return react_1.default.createElement(main_1.DescriptionSubtitle, null, text);
default:
return react_1.default.createElement(main_1.DescriptionText, null, text);
}
};
exports.default = Description;
6 changes: 6 additions & 0 deletions lib/cjs/components/section/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { PropsWithChildren } from 'react';
interface SectionProps {
title: string;
}
declare const Section: ({ title, children }: PropsWithChildren<SectionProps>) => JSX.Element;
export default Section;
14 changes: 14 additions & 0 deletions lib/cjs/components/section/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var main_1 = require("../../styles/main");
var Section = function (_a) {
var title = _a.title, children = _a.children;
return (react_1.default.createElement(main_1.BodyWrapper, null,
react_1.default.createElement(main_1.Title, null, title),
react_1.default.createElement(main_1.BodyInner, null, children)));
};
exports.default = Section;
9 changes: 9 additions & 0 deletions lib/cjs/components/timeline/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { PropsWithChildren } from 'react';
import { DateFormat, Theme } from '../../interfaces';
interface TimelineProps {
theme?: Theme;
lang?: string;
dateFormat?: DateFormat;
}
declare const Timeline: ({ theme, lang, children, dateFormat, }: PropsWithChildren<TimelineProps>) => JSX.Element;
export default Timeline;
18 changes: 18 additions & 0 deletions lib/cjs/components/timeline/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var styled_components_1 = require("styled-components");
var config_1 = require("../../config");
var config_context_1 = require("../../context/config.context");
var main_1 = require("../../styles/main");
var Timeline = function (_a) {
var _b = _a.theme, theme = _b === void 0 ? config_1.defaultValues.theme : _b, _c = _a.lang, lang = _c === void 0 ? config_1.defaultValues.lang : _c, children = _a.children, _d = _a.dateFormat, dateFormat = _d === void 0 ? config_1.defaultValues.dateFormat : _d;
return (react_1.default.createElement(main_1.TimelineWrapper, null,
react_1.default.createElement(main_1.TimelineWrapperInner, null,
react_1.default.createElement(config_context_1.ConfigContext.Provider, { value: { lang: lang, dateFormat: dateFormat } },
react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme }, children)))));
};
exports.default = Timeline;
8 changes: 8 additions & 0 deletions lib/cjs/components/year-content/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { PropsWithChildren } from 'react';
interface YearContentProps {
startDate: string;
endDate?: string;
currentYear?: boolean;
}
declare const YearContent: ({ startDate, endDate, currentYear, }: PropsWithChildren<YearContentProps>) => JSX.Element;
export default YearContent;
Loading

0 comments on commit 37b1ded

Please sign in to comment.