From 83caf505d9392657a6143acdf2aad5c7d7f3624d Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Fri, 25 Feb 2022 12:57:19 +0100 Subject: [PATCH 1/6] Improve description in package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ed49859..e96d677 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "foris", "version": "5.4.1", - "description": "Set of components and utils for Foris and its plugins.", + "description": "Foris JS library is a set of components and utils for reForis application and plugins.", "author": "CZ.NIC, z.s.p.o.", "repository": { "type": "git", From 68c560078bce1c3fd934b256094b824f882925d6 Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Fri, 25 Feb 2022 15:00:26 +0100 Subject: [PATCH 2/6] Improve docs introduction section --- docs/forisjs-npm.svg | 4 ++++ docs/intro.md | 6 ------ docs/introduction.md | 37 +++++++++++++++++++++++++++++++++++++ styleguide.config.js | 4 ++-- 4 files changed, 43 insertions(+), 8 deletions(-) create mode 100644 docs/forisjs-npm.svg delete mode 100644 docs/intro.md create mode 100644 docs/introduction.md diff --git a/docs/forisjs-npm.svg b/docs/forisjs-npm.svg new file mode 100644 index 0000000..8ebd3d8 --- /dev/null +++ b/docs/forisjs-npm.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/docs/intro.md b/docs/intro.md deleted file mode 100644 index 4637cbc..0000000 --- a/docs/intro.md +++ /dev/null @@ -1,6 +0,0 @@ -Foris JS library is set of components and utils for Foris JS application and -plugins. - -Please notice that all of these components or utils are used in reForis and -plugins. If you like to study by example I would recommend to full-text search -these repos. diff --git a/docs/introduction.md b/docs/introduction.md new file mode 100644 index 0000000..767327f --- /dev/null +++ b/docs/introduction.md @@ -0,0 +1,37 @@ +Welcome! This is the official documentation for Foris JS. + +## What Foris JS is + +Foris JS library is a set of components and utils for reForis application and +plugins. + +Please notice that all of these components or utils are used in reForis and +plugins. If you want to study them by example, I recommend you to full-text +search those repositories. + +# Installation + +## Prerequisites + +Please make sure that [Node.js](https://nodejs.org/en/) is installed on your +system. + +The current Long Term Support (LTS) release is an ideal starting point, see +[here](https://github.com/nodejs/Release#release-schedule). + +## Installation + +To install the latest release: + +```plain +npm install foris +``` + +To install a specific version: + +```plain +npm install foris@version +``` + +Check +on diff --git a/styleguide.config.js b/styleguide.config.js index 295c93a..83ca76f 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -11,8 +11,8 @@ module.exports = { title: "Foris JS docs", sections: [ { - name: "Foris JS", - content: "docs/intro.md", + name: "Introduction", + content: "docs/introduction.md", }, { name: "Development (Linking)", From d95fdf8517cb8f0ea58cbd6af22a2959384a284e Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Fri, 25 Feb 2022 15:04:16 +0100 Subject: [PATCH 3/6] Restructure styleguide configuration file * Add version of the library * Change colors * Set tocMode to "collapse" --- styleguide.config.js | 55 ++++++++++++++++++++++++++++++-------------- 1 file changed, 38 insertions(+), 17 deletions(-) diff --git a/styleguide.config.js b/styleguide.config.js index 83ca76f..1e5a790 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -1,39 +1,56 @@ /* - * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/) + * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/) * * This is free software, licensed under the GNU General Public License v3. * See /LICENSE for more information. */ - const path = require("path"); +const pjson = require("./package.json"); module.exports = { - title: "Foris JS docs", + title: "Foris JS Docs", + version: `v${pjson.version}`, + theme: { + color: { + link: "#0075a3", + linkHover: "#00a2e2", + }, + }, + tocMode: "collapse", + pagePerSection: true, sections: [ { name: "Introduction", content: "docs/introduction.md", }, { - name: "Development (Linking)", + name: "Development", content: "docs/development.md", }, { - name: "Foris forms", - components: [ - "src/form/components/ForisForm.js", - "src/form/components/alerts.js", - "src/form/components/SubmitButton.js", + name: "Components", + description: "Set of main components.", + sections: [ + { + name: "Foris forms", + components: [ + "src/form/components/ForisForm.js", + "src/form/components/alerts.js", + "src/form/components/SubmitButton.js", + ], + exampleMode: "expand", + usageMode: "expand", + }, + { + name: "Alert Context", + components: ["src/alertContext/AlertContext.js"], + exampleMode: "expand", + usageMode: "expand", + }, ], - exampleMode: "expand", - usageMode: "expand", - }, - { - name: "Alert Context", - components: ["src/alertContext/AlertContext.js"], - exampleMode: "expand", - usageMode: "expand", + sectionDepth: 1, }, + { name: "Bootstrap components", description: "Set of bootstrap components.", @@ -41,6 +58,7 @@ module.exports = { exampleMode: "expand", usageMode: "expand", ignore: ["src/bootstrap/constants.js"], + sectionDepth: 0, }, ], require: [ @@ -73,5 +91,8 @@ module.exports = { }, ], }, + devServer: { + publicPath: "/", + }, }, }; From fd7cd49790de0ed2d3178798536b43d780da8092 Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Fri, 25 Feb 2022 15:05:00 +0100 Subject: [PATCH 4/6] Add custom logo & favicon --- docs/components/Logo.js | 36 ++++++++++++++++++++++++++++++++++++ docs/components/logo.svg | 3 +++ styleguide.config.js | 6 ++++++ 3 files changed, 45 insertions(+) create mode 100644 docs/components/Logo.js create mode 100644 docs/components/logo.svg diff --git a/docs/components/Logo.js b/docs/components/Logo.js new file mode 100644 index 0000000..afa9748 --- /dev/null +++ b/docs/components/Logo.js @@ -0,0 +1,36 @@ +import React from "react"; +import PropTypes from "prop-types"; +import Styled from "rsg-components/Styled"; +import logo from "./logo.svg"; + +const styles = ({ fontFamily }) => ({ + logo: { + display: "flex", + alignItems: "center", + margin: 0, + fontFamily: fontFamily.base, + fontSize: 18, + fontWeight: "normal", + }, + image: { + height: "1.3em", + marginLeft: "-0.2em", + marginRight: "0.2em", + }, +}); + +export function LogoRenderer({ classes, children }) { + return ( +

+ React logo + {children} +

+ ); +} + +LogoRenderer.propTypes = { + classes: PropTypes.object.isRequired, + children: PropTypes.node, +}; + +export default Styled(styles)(LogoRenderer); diff --git a/docs/components/logo.svg b/docs/components/logo.svg new file mode 100644 index 0000000..7fb7f23 --- /dev/null +++ b/docs/components/logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/styleguide.config.js b/styleguide.config.js index 1e5a790..219e045 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -61,6 +61,9 @@ module.exports = { sectionDepth: 0, }, ], + template: { + favicon: "/docs/components/logo.svg", + }, require: [ "babel-polyfill", path.join(__dirname, "src/testUtils/mockGlobals"), @@ -73,6 +76,9 @@ module.exports = { "node_modules/@fortawesome/fontawesome-free/css/all.min.css" ), ], + styleguideComponents: { + LogoRenderer: path.join(__dirname, "docs/components/Logo"), + }, webpackConfig: { module: { rules: [ From caf8af44d1c63904ee20290a04552f24685cc358 Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Fri, 25 Feb 2022 15:09:18 +0100 Subject: [PATCH 5/6] Improve docs development section --- docs/development.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/development.md b/docs/development.md index 585213c..21f7e67 100644 --- a/docs/development.md +++ b/docs/development.md @@ -1,15 +1,15 @@ -Sooner or later you will face with situation when you want/need to make some -changes in the library. Then the most important tool for you it's +Sooner or later, you will face with situation when you want/need to make some +changes in the library. Then the most important tool for you it's the [`npm link`](https://docs.npmjs.com/cli/link). -Please, notice that it will not work if you link library just from root of the -repo. It happens due to location of sources `./src`. You need to pack library -first `make pack` and then link it from `./dist` directory. +Please, notice that it will not work if you link the library just from the root +of the repo. It happens due to the location of sources `./src`. You need to pack +the library first, `make pack` and then link it from the `./dist` directory. -Yeah it's not such comfortable solution for development. But it can fixed by -writing small script similar as `make pack` but with linking every file and -directory from `./src` to the some directory and linking then from it. Notice -that you need to link `package.json` and `package-lock.json` as well. +Yeah, it's not such a comfortable solution for development. But it can be fixed +by writing a small script similar to making a pack but by linking every file and +directory from `./src` to the same directory and linking then from it. Notice +that you need to link a `package.json` and a `package-lock.json` as well. So step by step: From b0e2f62a414e0878520ea98e3c8de9f44566be13 Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Fri, 25 Feb 2022 15:09:43 +0100 Subject: [PATCH 6/6] Add Switch example to the docs --- src/bootstrap/Switch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/bootstrap/Switch.md diff --git a/src/bootstrap/Switch.md b/src/bootstrap/Switch.md new file mode 100644 index 0000000..4969b9b --- /dev/null +++ b/src/bootstrap/Switch.md @@ -0,0 +1,5 @@ +Switch example: + +```js + +```