initial commit

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "modules": false
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-flow"
+  ],
+  "plugins": [["@babel/proposal-class-properties", { "loose": true }]]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "react-app",
+    "plugin:prettier/recommended"
+  ]
+}

.flowconfig

@@ -0,0 +1,11 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]

.gitignore

@@ -0,0 +1,22 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# builds
+build
+dist
+.rpt2_cache
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "all"
+}

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - 9
+  - 8

README.md

@@ -0,0 +1,29 @@
+# react-truncate-format
+
+> A React component to truncate text with format
+
+[![NPM](https://img.shields.io/npm/v/react-truncate-format.svg)](https://www.npmjs.com/package/react-truncate-format) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save truncated-component
+```
+
+## Usage
+
+```jsx
+import React, { Component } from "react";
+
+import MyComponent from "react-truncate-format";
+
+class Example extends Component {
+  render() {
+    return <MyComponent />;
+  }
+}
+```
+
+## License
+
+MIT © [juangl](https://github.com/juangl)

package.json

@@ -0,0 +1,85 @@
+{
+  "name": "truncated-component",
+  "version": "1.0.0",
+  "description": "A React component to truncate text with format",
+  "author": "juangl",
+  "license": "MIT",
+  "repository": "juangl/truncated-component",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "jsnext:main": "dist/index.es.js",
+  "engines": {
+    "node": ">=8",
+    "npm": ">=5"
+  },
+  "scripts": {
+    "test": "cross-env CI=1 SKIP_PREFLIGHT_CHECK=true react-scripts test",
+    "flow": "flow check --max-warnings=0 src && flow check example",
+    "test:watch": "react-scripts test",
+    "build": "rollup -c",
+    "start": "rollup -c -w",
+    "prepare": "yarn run build",
+    "predeploy": "cd example && yarn install && yarn run build",
+    "deploy": "gh-pages -d example/build",
+    "prettier": "prettier --write '**/*.{js,json,css,md}'",
+    "eslint-check-config": "eslint --print-config . | eslint-config-prettier-check",
+    "lint": "eslint src"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/*.js": [
+      "eslint"
+    ],
+    "**/*.{js,json,css,md}": [
+      "prettier --write",
+      "yarn test --findRelatedTests",
+      "git add"
+    ]
+  },
+  "peerDependencies": {
+    "prop-types": "^15.5.4",
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@svgr/rollup": "^2.4.1",
+    "babel-eslint": "^9.0.0",
+    "cross-env": "^5.1.4",
+    "eslint": "^5.10.0",
+    "eslint-config-prettier": "^3.3.0",
+    "eslint-config-react-app": "^3.0.5",
+    "eslint-plugin-flowtype": "^3.2.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-prettier": "^3.0.0",
+    "eslint-plugin-react": "^7.11.1",
+    "flow-bin": "^0.89.0",
+    "gh-pages": "^1.2.0",
+    "husky": "^1.2.1",
+    "lint-staged": "^8.1.0",
+    "prettier": "1.15.3",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-scripts": "^2.1.1",
+    "rollup": "^0.67.4",
+    "rollup-plugin-babel": "^4.1.0",
+    "rollup-plugin-commonjs": "^9.1.3",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-postcss": "^1.6.2",
+    "rollup-plugin-url": "^1.4.0"
+  },
+  "files": [
+    "dist"
+  ]
+}

rollup.config.js

@@ -0,0 +1,38 @@
+import babel from "rollup-plugin-babel";
+import commonjs from "rollup-plugin-commonjs";
+import external from "rollup-plugin-peer-deps-external";
+import postcss from "rollup-plugin-postcss";
+import resolve from "rollup-plugin-node-resolve";
+import url from "rollup-plugin-url";
+import svgr from "@svgr/rollup";
+
+import pkg from "./package.json";
+
+export default {
+  input: "src/index.js",
+  output: [
+    {
+      file: pkg.main,
+      format: "cjs",
+      sourcemap: true,
+    },
+    {
+      file: pkg.module,
+      format: "es",
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    external(),
+    postcss({
+      modules: true,
+    }),
+    url(),
+    svgr(),
+    babel({
+      exclude: "node_modules/**",
+    }),
+    resolve(),
+    commonjs(),
+  ],
+};

src/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}

src/__tests__/getLevelInfo.test.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { getLevelInfo } from "../treeUtils";
+
+describe("getLevelInfo", () => {
+  test("basic usage", () => {
+    const tree = (
+      <>
+        <p />
+        <p>text</p>
+      </>
+    );
+
+    const childrenArray = tree.props.children;
+
+    expect(getLevelInfo(childrenArray, 0)).toEqual({ length: 2 });
+    expect(getLevelInfo(childrenArray, 1)).toEqual({ length: 1 });
+    expect(getLevelInfo(childrenArray, 2)).toEqual({ length: 4 });
+    expect(getLevelInfo(childrenArray, 3)).toEqual({ length: 0 });
+  });
+
+  test("getLevelInfo with falsy children", () => {
+    const tree = (
+      <>
+        <p />
+        <p children={undefined} />
+      </>
+    );
+
+    const childrenArray = tree.props.children;
+
+    expect(getLevelInfo(childrenArray, 1)).toEqual({ length: 0 });
+  });
+
+  test("getLevelInfo with arrays as children", () => {
+    const tree = (
+      <>
+        <p />
+        <p>{["text", <p key="a">text</p>]}</p>
+      </>
+    );
+
+    const childrenArray = tree.props.children;
+
+    expect(getLevelInfo(childrenArray, 0)).toEqual({ length: 2 });
+    expect(getLevelInfo(childrenArray, 1)).toEqual({ length: 2 });
+    expect(getLevelInfo(childrenArray, 2)).toEqual({ length: 1 });
+    expect(getLevelInfo(childrenArray, 3)).toEqual({ length: 4 });
+  });
+
+  test("getLevelInfo with arrays as children and text", () => {
+    const tree = (
+      <>
+        <p>
+          <p>{["text"]} text</p>
+        </p>
+      </>
+    );
+
+    const childrenArray = tree.props.children;
+
+    expect(getLevelInfo(childrenArray, 0)).toEqual({ length: 1 });
+    expect(getLevelInfo(childrenArray, 1)).toEqual({ length: 1 });
+    expect(getLevelInfo(childrenArray, 2)).toEqual({ length: 2 });
+    expect(getLevelInfo(childrenArray, 3)).toEqual({ length: 5 });
+  });
+});

src/__tests__/truncateLevel.test.js

@@ -0,0 +1,91 @@
+import React from "react";
+import { getLevelInfo, truncateLevel } from "../treeUtils";
+
+describe("TruncateLevel", () => {
+  const tree = (
+    <>
+      <p />
+      <p>{["text", <p key="a">text</p>]}</p>
+    </>
+  );
+
+  const childrenArray = tree.props.children;
+
+  test("level 0", () => {
+    expect(getLevelInfo(childrenArray, 0)).toEqual({ length: 2 });
+    expect(truncateLevel(childrenArray, 0)).toMatchInlineSnapshot(`<p />`);
+  });
+
+  test("level 1", () => {
+    expect(getLevelInfo(childrenArray, 1)).toEqual({ length: 2 });
+    expect(truncateLevel(childrenArray, 1)).toMatchInlineSnapshot(`
+Array [
+  <p />,
+  <p>
+    text
+  </p>,
+]
+`);
+  });
+
+  test("level 2", () => {
+    expect(getLevelInfo(childrenArray, 2)).toEqual({ length: 1 });
+    expect(truncateLevel(childrenArray, 2)).toMatchInlineSnapshot(`
+Array [
+  <p />,
+  <p>
+    text
+  </p>,
+]
+`);
+  });
+
+  test("level 3", () => {
+    expect(getLevelInfo(childrenArray, 3)).toEqual({ length: 4 });
+    expect(truncateLevel(childrenArray, 3)).toMatchInlineSnapshot(`
+Array [
+  <p />,
+  <p>
+    text
+    <p>
+      tex
+    </p>
+  </p>,
+]
+`);
+  });
+
+  test("Truncating an array shound always keep the children array", () => {
+    const tree = (
+      <>
+        <p>{["text", "test"]}</p>
+      </>
+    );
+
+    const childrenArray = tree.props.children;
+
+    expect(getLevelInfo(childrenArray, 1)).toEqual({ length: 2 });
+    const truncate1 = truncateLevel(childrenArray, 1);
+    expect(getLevelInfo(truncate1, 1)).toEqual({ length: 1 });
+  });
+
+  test("truncateLevel to specific index ", () => {
+    const tree = (
+      <>
+        <p>
+          <p>text</p>
+        </p>
+      </>
+    );
+
+    const childrenArray = tree.props.children;
+
+    expect(truncateLevel(childrenArray, 3, 1)).toMatchInlineSnapshot(`
+<p>
+  <p>
+    t
+  </p>
+</p>
+`);
+  });
+});