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/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: 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/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", 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 + +``` diff --git a/styleguide.config.js b/styleguide.config.js index 295c93a..219e045 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: "Foris JS", - content: "docs/intro.md", + 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,8 +58,12 @@ module.exports = { exampleMode: "expand", usageMode: "expand", ignore: ["src/bootstrap/constants.js"], + sectionDepth: 0, }, ], + template: { + favicon: "/docs/components/logo.svg", + }, require: [ "babel-polyfill", path.join(__dirname, "src/testUtils/mockGlobals"), @@ -55,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: [ @@ -73,5 +97,8 @@ module.exports = { }, ], }, + devServer: { + publicPath: "/", + }, }, };