Skip to content

Commit

Permalink
Merge pull request #52 from Proskynete/dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
Proskynete committed Sep 8, 2022
2 parents 9e73e6c + cdece8f commit aec4724
Show file tree
Hide file tree
Showing 57 changed files with 1,021 additions and 230 deletions.
2 changes: 1 addition & 1 deletion .github/funding.yml
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
github: Proskynete
custom: https://donate.eduardoalvarez.dev
custom: https://thanks.eduardoalvarez.dev/donate
8 changes: 4 additions & 4 deletions .github/pull_request_template.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Description
# 📚 Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context. List any dependencies that are required for this change.

Fixes # (issue)

## Type of change
## 👾 Type of change

Please delete options that are not relevant.

Expand All @@ -14,14 +14,14 @@ Please delete options that are not relevant.
- [ ] This change requires a documentation update
- [ ] Other (If yes, please write one phrase about this update)

# How Has This Been Tested?
# 👀 How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

- [ ] Test A
- [ ] Test B

# Checklist
# Checklist

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ name: '👾 CI'

on:
push:
branches: [master, dev]
branches: [dev]
pull_request:
branches: [master,dev]
branches: [dev]

jobs:
build:
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/coverage.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ name: '🦊 Coverage'

on:
push:
branches: [master,dev]
branches: [dev]
pull_request:
branches: [master,dev]
branches: [dev]

jobs:
build:
Expand Down
42 changes: 42 additions & 0 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,50 @@ on:
branches: [master]

jobs:
coverage:
name: Build
runs-on: ubuntu-latest
steps:
- name: 📚 Checkout git repository
uses: actions/checkout@v2
- name: 🟢 Setup Node.js
uses: actions/setup-node@v1
with:
node-version: 16
- name: 🛠 Install dependencies
run: npm install
- name: ⚙️ Create coverage
run: npm run test:coveralls
env:
COVERALLS_REPO_TOKEN: ${{secrets.COVERALLS_REPO_TOKEN}}
- name: 📨 Send report to Coveralls
uses: coverallsapp/github-action@master
with:
github-token: ${{secrets.GITHUB_TOKEN}}

ci:
runs-on: ${{matrix.os}}
needs: coverage
strategy:
max-parallel: 24
matrix:
os: [ubuntu-latest, macos-latest, windows-latest]
node-version: [14.x, 16.x]
steps:
- name: 📚 Checkout git repository
uses: actions/checkout@v2
- name: 🟢 Setup Node.js ${{matrix.node-version}}
uses: actions/setup-node@v1
with:
node-version: ${{matrix.node-version}}
- name: 🛠 Install Node.js dependencies
run: npm install
- name: 🤖 Run tests
run: npm run test

publish:
name: '🚀 Publish'
needs: [coverage, ci]
runs-on: ubuntu-latest
steps:
- name: 📚 Checkout git repository
Expand Down
15 changes: 12 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,8 @@ This is the wrapper component that creates the vertical timeline.
| 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` | `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 |
| collapse | boolean | false | `true` or `false` | `false` | Allow collapse the description of Content component |
| collapse | boolean | false | `true` or `false` | `false` | Allow collapsing description of all Content components |
| withoutDay | boolean | false | `true` or `false` | `false` | Will hide the day of the dates of all Content components |

`dateFormat`: The next table shows the different formats that can be used in the `dateFormat` prop and the result that will be displayed.

Expand All @@ -80,6 +81,12 @@ This is the wrapper component that creates the vertical timeline.

This component is the container of the content of each year. It is required to have at least one `Container` component as a child of the `Timeline` component. It can have as many `Container` components as you want.

- Childrens

| Number of children | Required | Value Allowed |
| ------------------ | ---------------------------------------------------- | --------------------------- |
| Many | At least the first `Content` component is required | Only `Content` components |

- Props

| Name | Type | Required | Values Allowed | default values | Description |
Expand All @@ -88,6 +95,8 @@ This component is the container of the content of each year. It is required to h
| startDate | string | true | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the start of the content or contents |
| endDate | string | false | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the end of the content or contents |
| today | boolean | false | `true` or `false` | current year | The value is the current year, it is recommended to use it in the last Container |
| collapse | boolean | false | `true` or `false` | `false` | Allow collapsing description for this component only |
| withoutDay | boolean | false | `true` or `false` | `false` | Will hide the day of the dates for this component only |

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

Expand Down Expand Up @@ -126,7 +135,7 @@ const customTheme = {
class Main extends Component {
render() {
return (
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse>
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
<Container title="What is lorem Ipsum?" startDate="2020/12/02" today>
<Content
title="Lorem Ipsum"
Expand Down Expand Up @@ -166,7 +175,7 @@ const Main = () => {
};

return (
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse>
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
<Container title="What is lorem Ipsum?" startDate="2020/12/02" today>
<Content
title="Lorem Ipsum"
Expand Down
10 changes: 2 additions & 8 deletions lib/cjs/components/container/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
import { PropsWithChildren } from 'react';
interface ContainerProps {
title: string;
startDate: string;
endDate?: string;
today?: boolean;
}
declare const Container: ({ title, startDate, endDate, today, children, }: PropsWithChildren<ContainerProps>) => JSX.Element;
import { ContainerProps } from '../../interfaces';
declare const Container: ({ title, startDate, endDate, today, withoutDay, children }: ContainerProps) => JSX.Element;
export { Container };
9 changes: 6 additions & 3 deletions lib/cjs/components/container/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,18 @@ exports.Container = void 0;
var react_1 = __importDefault(require("react"));
var useConfig_1 = require("../../hooks/useConfig");
var main_1 = require("../../styles/main");
var content_1 = require("../content");
var validate_1 = require("../validate");
var year_content_1 = __importDefault(require("../year-content"));
var Container = function (_a) {
var _b;
var title = _a.title, startDate = _a.startDate, endDate = _a.endDate, today = _a.today, children = _a.children;
var title = _a.title, startDate = _a.startDate, endDate = _a.endDate, today = _a.today, withoutDay = _a.withoutDay, children = _a.children;
var config = (0, useConfig_1.useConfig)().config;
return (react_1.default.createElement(main_1.ContainerWrapper, null,
react_1.default.createElement(year_content_1.default, { startDate: startDate, endDate: endDate, today: today }),
react_1.default.createElement(year_content_1.default, { startDate: startDate, endDate: endDate, today: today, withoutDay: withoutDay }),
react_1.default.createElement(main_1.BodyWrapper, null,
react_1.default.createElement(main_1.Title, { style: (_b = config.customStyles) === null || _b === void 0 ? void 0 : _b.title }, title),
react_1.default.createElement(main_1.BodyInner, null, children))));
react_1.default.createElement(main_1.BodyInner, null,
react_1.default.createElement(validate_1.Validate, { componentToValidate: content_1.Content }, children)))));
};
exports.Container = Container;
6 changes: 1 addition & 5 deletions lib/cjs/components/content/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
interface ContentProps {
title: string;
description: string[];
collapse?: boolean;
}
import { ContentProps } from '../../interfaces';
declare const Content: ({ title, description, collapse }: ContentProps) => JSX.Element;
export { Content };
6 changes: 6 additions & 0 deletions lib/cjs/components/error-message/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
interface ErrorMessageProps {
type: 'atLeast' | 'onlySupports';
component: string;
}
declare const ErrorMessage: ({ type, component }: ErrorMessageProps) => JSX.Element;
export { ErrorMessage };
19 changes: 19 additions & 0 deletions lib/cjs/components/error-message/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 });
exports.ErrorMessage = void 0;
var react_1 = __importDefault(require("react"));
var main_1 = require("../../styles/main");
var ErrorMessage = function (_a) {
var type = _a.type, component = _a.component;
return (react_1.default.createElement(react_1.default.Fragment, null, type === 'atLeast' ? (react_1.default.createElement(main_1.TextErrorMessage, null,
"You need at least one ",
react_1.default.createElement("code", null, "<".concat(component, " />")),
" to correctly render this component")) : (react_1.default.createElement(main_1.TextErrorMessage, null,
"This component only supports ",
react_1.default.createElement("code", null, "<".concat(component, " />")),
" components as children"))));
};
exports.ErrorMessage = ErrorMessage;
3 changes: 1 addition & 2 deletions lib/cjs/components/timeline/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { PropsWithChildren } from 'react';
import { TimelineProps } from '../../interfaces';
declare const Timeline: ({ theme, lang, dateFormat, collapse, customStyles, children, }: PropsWithChildren<TimelineProps>) => JSX.Element;
declare const Timeline: ({ theme, lang, dateFormat, collapse, withoutDay, customStyles, children, }: TimelineProps) => JSX.Element;
export { Timeline };
9 changes: 6 additions & 3 deletions lib/cjs/components/timeline/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,14 @@ 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 container_1 = require("../container");
var validate_1 = require("../validate");
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, _d = _a.dateFormat, dateFormat = _d === void 0 ? config_1.defaultValues.dateFormat : _d, _e = _a.collapse, collapse = _e === void 0 ? config_1.defaultValues.collapse : _e, customStyles = _a.customStyles, children = _a.children;
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, _d = _a.dateFormat, dateFormat = _d === void 0 ? config_1.defaultValues.dateFormat : _d, _e = _a.collapse, collapse = _e === void 0 ? config_1.defaultValues.collapse : _e, _f = _a.withoutDay, withoutDay = _f === void 0 ? config_1.defaultValues.withoutDay : _f, customStyles = _a.customStyles, children = _a.children;
return (react_1.default.createElement(main_1.TimelineWrapper, null,
react_1.default.createElement(main_1.TimelineWrapperInner, null,
react_1.default.createElement(config_context_1.ConfigProvider, { config: { theme: theme, lang: lang, dateFormat: dateFormat, collapse: collapse, customStyles: customStyles } },
react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme }, children)))));
react_1.default.createElement(config_context_1.ConfigProvider, { config: { theme: theme, lang: lang, dateFormat: dateFormat, collapse: collapse, customStyles: customStyles, withoutDay: withoutDay } },
react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
react_1.default.createElement(validate_1.Validate, { componentToValidate: container_1.Container }, children))))));
};
exports.Timeline = Timeline;
6 changes: 6 additions & 0 deletions lib/cjs/components/validate/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { JSXElementConstructor, PropsWithChildren } from 'react';
interface ValidateProps {
componentToValidate: JSXElementConstructor<any>;
}
declare const Validate: ({ children, componentToValidate }: PropsWithChildren<ValidateProps>) => JSX.Element;
export { Validate };
41 changes: 41 additions & 0 deletions lib/cjs/components/validate/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Validate = void 0;
var react_1 = __importStar(require("react"));
var error_message_1 = require("../error-message");
var Validate = function (_a) {
var children = _a.children, componentToValidate = _a.componentToValidate;
var count = react_1.Children.count(children);
if (count === 0)
return react_1.default.createElement(error_message_1.ErrorMessage, { type: "atLeast", component: componentToValidate.name });
if (count === 1 && children.type !== componentToValidate)
return react_1.default.createElement(error_message_1.ErrorMessage, { type: "onlySupports", component: componentToValidate.name });
var elements = react_1.Children.map(children, function (element) {
return element.type === componentToValidate ? element : null;
});
return react_1.default.createElement(react_1.default.Fragment, null, elements);
};
exports.Validate = Validate;
9 changes: 2 additions & 7 deletions lib/cjs/components/year-content/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
import { PropsWithChildren } from 'react';
interface YearContentProps {
startDate: string;
endDate?: string;
today?: boolean;
}
declare const YearContent: ({ startDate, endDate, today, }: PropsWithChildren<YearContentProps>) => JSX.Element;
import { YearContentProps } from '../../interfaces';
declare const YearContent: ({ startDate, endDate, today, withoutDay }: YearContentProps) => JSX.Element;
export default YearContent;

0 comments on commit aec4724

Please sign in to comment.