Merge pull request #17 from texttree/develop

Develop

Author: foxprogs

README.md

@@ -1,3 +1,7 @@
-### demo-bsa-reference-rcl
+### @texttree/tt-reference-rcl
 
-### This is the component library used in the project BSA.
+This library of components was made as part of the development of the Bible Study App and helps to display books and chapters from the books of the Bible.
+
+![Book example](/images/1.png)
+
+![Chapter example](/images/2.png)

images/1.png

@@ -1,9 +1,9 @@
 {
-  "name": "@texttree/demo-bsa-reference-rcl",
+  "name": "@texttree/tt-reference-rcl",
   "version": "0.3.4",
   "main": "dist/index.js",
   "license": "MIT",
-  "url": "https://github.com/gecraft/demo-bsa-reference-rcl",
+  "url": "https://github.com/texttree/tt-reference-rcl",
   "scripts": {
     "start": "styleguidist server",
     "build": "styleguidist build",
@@ -31,11 +31,11 @@
   "description": "",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/gecraft/tt-reference-rcl.git"
+    "url": "git+https://github.com/texttree/tt-reference-rcl.git"
   },
   "author": "",
   "bugs": {
-    "url": "https://github.com/gecraft/tt-reference-rcl/issues"
+    "url": "https://github.com/texttree/tt-reference-rcl/issues"
   },
-  "homepage": "https://github.com/gecraft/tt-reference-rcl#readme"
+  "homepage": "https://github.com/texttree/tt-reference-rcl#readme"
 }

images/2.png

@@ -18,7 +18,6 @@ function BibleBookList({
   BibleBookListClasses,
   bookClasses,
   testaments,
-  showTitle,
   sortFirstNT,
 }) {
   const [checkState, setCheckState] = useState(!showInactive);
@@ -99,7 +98,7 @@ function BibleBookList({
       {testamentList.map((el, index) => {
         return (
           <BookList
-            title={showTitle ? el.title : ''}
+            title={el.title}
             bookList={el.bookList}
             showInactive={!checkState}
             onClickBook={onClickBook}
@@ -119,71 +118,52 @@ function BibleBookList({
 }
 
 BibleBookList.defaultProps = {
-  showCheckbox: false,
+  showCheckbox: true,
+  sortFirstNT: false,
   testaments: 'all',
-  titleOT: 'Old Testament',
-  titleNT: 'New Testament',
+  titleOT: '',
+  titleNT: '',
   showInactive: true,
-  onClickBook: () => {},
+  onClickBook: (bookId) => {},
   labelForCheckbox: 'Show only existing books',
   titleBooks: {},
-  BibleBookListClasses: {},
   availableBookList: [],
 };
 
 BibleBookList.propTypes = {
   testaments: PropTypes.oneOf(['all', 'nt', 'ot']),
-  /**
-   * Block header of "New Testament"
-   */
+  /** block header of "New Testament" */
   titleNT: PropTypes.string,
-  /**
-   * Block header of "New Testament"
-   */
+  /** block header of "Old Testament" */
   titleOT: PropTypes.string,
-  /**
-   * Show block header
-   */
-  showTitle: PropTypes.bool,
-  /**
-   * When true, show first New Testament, second - Old Testament
-   */
+  /** when true, show first New Testament, second - Old Testament */
   sortFirstNT: PropTypes.bool,
-  /**
-   * Array of existing bookId's
-   */
+  /** array of existing bookId's */
   availableBookList: PropTypes.array,
-  /**
-   * Array of bookId with the titles to be translated. If not set - get the default value in English
-   */
+  /** Array of bookId with the titles to be translated. If not set - get the default value in English */
   titleBooks: PropTypes.object,
-  /**
-   * show or hide checkbox that show only existing books
-   */
+  /** show or hide checkbox that show only existing books */
   showCheckbox: PropTypes.bool,
-  /** Whether to display inactive books */
+  /** whether to display inactive books */
   showInactive: PropTypes.bool,
-  /**
-   * label of checkbox
-   */
+  /** label of checkbox */
   labelForCheckbox: PropTypes.string,
-
-  BibleBookListClasses: PropTypes.objectOf(
-    PropTypes.shape({
-      /** title className */
-      title: PropTypes.string,
-      /** book className */
-      book: PropTypes.string,
-      /** bookList className */
-      bookList: PropTypes.string,
-      /** className for label of checkbox */
-      label: PropTypes.string,
-    })
-  ),
+  /** object of className */
+  BibleBookListClasses: PropTypes.shape({
+    /** title className */
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    /** book className */
+    book: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    /** bookList className */
+    bookList: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    /** className for label of checkbox */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  }),
+  /** override the style of the Button mui component */
   bookClasses: PropTypes.object,
-  /** An open book, a different style will be applied to it */
+  /** an open book, a different style will be applied to it */
   selectedBookId: PropTypes.string,
-  /** Event by clicking on the book. Receives a book ID at the entrance.  */
+  /** Event by clicking on the book. Receives a bookId at the entrance.  */
   onClickBook: PropTypes.func,
 };
 

package.json

@@ -2,11 +2,10 @@ Show 2 Testaments
 
 ```jsx
 import React from "react";
-import { BibleBookList } from "demo-bsa-reference-rcl";
+import { BibleBookList } from "@texttree/tt-reference-rcl";
 
 const titleBooks = {
-  mat: "Матфей", mrk: "Марк",
-  luk: "Лука", tit: "Титу",
+  mat: "Матфей", mrk: "Марк", luk: "Лука", tit: "Титу",
 };
 
 const [selectedBookId, setSelectedBookId] = React.useState("exo");
@@ -19,25 +18,23 @@ const availableBookList = [
 ];
 
 <BibleBookList
-  titleBooks={titleBooks}
+  testaments="all"
+  sortFirstNT={true}
   showInactive={false}
+  titleOT="Old Testament"
+  titleNT="New Testament"
+  titleBooks={titleBooks}
   availableBookList={availableBookList}
-  labelForCheckbox="show existing book"
-  showCheckbox={true}
   selectedBookId={selectedBookId}
   onClickBook={onClickBook}
-  testaments="all"
-  titleOT="Ветхий завет"
-  showTitle={true}
-  sortFirstNT={true}
 />;
 ```
 
 Show 1 Testament
 
 ```jsx
 import React from "react";
-import { BibleBookList } from "demo-bsa-reference-rcl";
+import { BibleBookList } from "@texttree/tt-reference-rcl";
 
 const titleBooks = {
   mat: "Матфей", mrk: "Марк",
@@ -49,21 +46,21 @@ const availableBookList = [
   "mat", "1ko", "rev", "tit",
 ];
 
-  <BibleBookList
-  titleBooks={titleBooks}
-  availableBookList={availableBookList}
-  showCheckbox={true}
+<BibleBookList
   testaments="ot"
   titleOT="OT"
   titleNT="NT"
-  showTitle={true}/>;
+  showCheckbox={false}
+  titleBooks={titleBooks}
+  availableBookList={availableBookList}
+/>;
 ```
 
 Use styles
 
 ```jsx
 import React from "react";
-import { BibleBookList } from "demo-bsa-reference-rcl";
+import { BibleBookList } from "@texttree/tt-reference-rcl";
 import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles((theme) => ({
@@ -90,12 +87,10 @@ const availableBookList = [
 ];
 
 <BibleBookList
+  testaments="ot"
+  titleOT="Ветхий завет"
   availableBookList={availableBookList}
   selectedBookId="exo"
   BibleBookListClasses={classes}
-  showCheckbox={true}
-  testaments="ot"
-  titleOT="Ветхий завет"
-  showTitle={true}
 />;
 ```

src/components/BibleBookList/BibleBookList.js

@@ -1,53 +1,51 @@
-import React from "react";
-import ChapterList from "../ChapterList";
-import { ChaptersConfig } from "./config";
-import PropTypes from "prop-types";
+import React from 'react';
+import ChapterList from '../ChapterList';
+import { BOOK_CHAPTERS } from './config';
+import PropTypes from 'prop-types';
 
 function BibleChapterList({
-  text,
+  chapterPrefix,
   bookId,
   chapterListClasses,
   chapterClasses,
   selectedChapter,
   onClickChapter,
-
 }) {
-
-  const chapters = bookId?(Object.keys(ChaptersConfig[bookId])):[];
+  const chapters = bookId ? Object.keys(BOOK_CHAPTERS[bookId]) : [];
 
   return (
-      <ChapterList
-        text={text}
-        chapterListClasses={chapterListClasses}
-        chapterClasses={chapterClasses}
-        selectedChapter={selectedChapter}
-        chapterList={chapters}
-        onClickChapter={onClickChapter}
-      />
+    <ChapterList
+      chapterPrefix={chapterPrefix}
+      chapterListClasses={chapterListClasses}
+      chapterClasses={chapterClasses}
+      selectedChapter={selectedChapter}
+      chapterList={chapters}
+      onClickChapter={onClickChapter}
+    />
   );
 }
 
 BibleChapterList.defaultProps = {
-  chapterListClasses: {},
   onClickChapter: (chapterId) => {},
 };
 
 BibleChapterList.propTypes = {
-  /** chapter's title */
-  text: PropTypes.string,
-  /** bookId*/
-  bookId: PropTypes.string,
-  chapterListClasses: PropTypes.objectOf(
-    PropTypes.shape({
-      /** chapter className */
-      chapter: PropTypes.string,
-      /** chapterList className */
-      chapterList: PropTypes.string,
-    })
-  ),
+  /** chapter prefix (chapter, psalm, etc. ) */
+  chapterPrefix: PropTypes.string,
+  /** unique three-letter identifier of book from which the chapters are shown  */
+  bookId: PropTypes.string.isRequired,
+  /** object of className */
+  chapterListClasses: PropTypes.shape({
+    /** chapter className */
+    chapter: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    /** chapterList className */
+    chapterList: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  }),
+  /** override the style of the Button mui component */
   chapterClasses: PropTypes.object,
-   /** An open chapter, a different style will be applied to it */
-  selectedChapter: PropTypes.string,
+  /** an open chapter, a different style will be applied to it */
+  selectedChapter: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    .isRequired,
   /** Event by clicking on the chapter. Receives a chapter ID at the entrance. */
   onClickChapter: PropTypes.func,
 };

src/components/BibleBookList/BibleBookList.md

@@ -1,22 +1,34 @@
-Array of buttons - selected current chapter
+Show chapters from a specific book
 
 ```jsx
 import React from "react";
-import { BibleChapterList } from "demo-bsa-reference-rcl";
+import { BibleChapterList } from "@texttree/tt-reference-rcl";
 import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles((theme) => ({
   chapterList: {
     margin: theme.spacing(1),
   },
+  chapter: {
+    margin: 2,
+    padding: 2,
+    fontSize: 12,
+    width:72,
+    textTransform:"inherit",
+    border:"1px solid #ccc",
+  },
 }));
+
 const classes = useStyles();
+
+const [selectedChapter, setSelectedChapter] = React.useState(1);
+
 <BibleChapterList
-  selectedChapter="3"
-  bookId="gen"
-  text="Ch."
+  selectedChapter={selectedChapter}
+  bookId="psa"
+  chapterPrefix="Psalm"
   onClickChapter={(chapterId) => {
-    alert("chapterId " + chapterId);
+    setSelectedChapter(chapterId);
   }}
   chapterListClasses={classes}
 />;

src/components/BibleChapterList/BibleChapterList.js

@@ -1,4 +1,4 @@
-export const ChaptersConfig = {
+export const BOOK_CHAPTERS = {
   gen: {
     '1': '31',
     '2': '25',