Merge pull request #52 from Proskynete/dev

Dev

Author: Proskynete

.github/funding.yml

@@ -1,2 +1,2 @@
 github: Proskynete
-custom: https://donate.eduardoalvarez.dev
+custom: https://thanks.eduardoalvarez.dev/donate

.github/pull_request_template.md

@@ -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.
 
@@ -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

.github/workflows/ci.yml

@@ -2,9 +2,9 @@ name: '👾 CI'
 
 on:
   push:
-    branches: [master, dev]
+    branches: [dev]
   pull_request:
-    branches: [master,dev]
+    branches: [dev]
 
 jobs:
   build:

.github/workflows/coverage.yml

@@ -2,9 +2,9 @@ name: '🦊 Coverage'
 
 on:
   push:
-    branches: [master,dev]
+    branches: [dev]
   pull_request:
-    branches: [master,dev]
+    branches: [dev]
 
 jobs:
   build:

.github/workflows/publish.yml

@@ -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

README.md

@@ -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.
 
@@ -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                                                                      |
@@ -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>
 
@@ -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"
@@ -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"

lib/cjs/components/container/index.d.ts

@@ -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 };

lib/cjs/components/container/index.js

@@ -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;

lib/cjs/components/content/index.d.ts

@@ -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 };

lib/cjs/components/error-message/index.d.ts

@@ -0,0 +1,6 @@
+interface ErrorMessageProps {
+    type: 'atLeast' | 'onlySupports';
+    component: string;
+}
+declare const ErrorMessage: ({ type, component }: ErrorMessageProps) => JSX.Element;
+export { ErrorMessage };