Merge pull request #555 from sebgroup/develop

release new doc

.github/workflows/gh-pages.yml

@@ -5,27 +5,120 @@ on:
     branches: [master, beta]
 
 jobs:
+  get_tags:
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.matrix }}
+    steps:
+      - name: Get list of releases 📋
+        uses: octokit/[email protected]
+        id: get_latest_release
+        with:
+          route: GET /repos/kherp/react-components/tags
+          owner: octokit
+          repo: request-action
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Convert list of releases to json and filter out versions less than minimum version 📝
+        id: set-matrix
+        run: |
+          arr=( $(echo $data | jq -r '.[].name') )
+          major=""
+          JSON="{\"include\":["
+          for i in "${arr[@]}"
+          do
+            if [ "$(printf '%s\n' "$minver" "$i" | sort -V | head -n1)" = "$minver" ]; then 
+              if [ "$major" != "$(echo $i | cut -d. -f1)" ]; then
+                major=`echo $i | cut -d. -f1`
+                JSON="$JSON$(printf '{"name": "%s"}, ' "${i}")"
+              fi
+            fi
+          done
+          JSON="${JSON%,*} ${JSON##*,}"
+          JSON="$JSON]}"
+          echo "test: $JSON"
+          echo "::set-output name=matrix::$JSON"
+        env:
+          data: ${{steps.get_latest_release.outputs.data}}
+          minver: v4.0.0
   gh_pages:
+    needs: get_tags
     runs-on: ubuntu-latest
-
+    outputs:
+      matrix: ${{ needs.get_tags.outputs.matrix }}
+      path: ${{ steps.get_version_list.outputs.path }}
+      file: ${{ steps.get_version_list.outputs.file }}
     steps:
       - uses: actions/checkout@v2
 
-      - name: Setup Node
+      - name: Setup Node 🏗️
         uses: actions/setup-node@v2
         with:
           node-version: 14.x
 
-      - name: Installing dependencies
+      - name: Installing dependencies ⏳
         run: npm ci
-
-      - name: Building docs
+      - name: Generating versions list
+        id: get_version_list
+        run: |
+          echo "$data" > $jsonPath$jsonFileName
+          echo "::set-output name=path::$jsonPath"
+          echo "::set-output name=file::$jsonFileName"
+        env:
+          data: ${{needs.get_tags.outputs.matrix}}
+          jsonPath: ./docs/src/assets/jsons/
+          jsonFileName: versions.json
+      - name: Building docs 🔨
         run: npm run build:docs
 
-      - name: Publish
+      - name: Publish 🚀
         uses: crazy-max/[email protected]
         with:
           build_dir: docs/public
         env:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+  build_docs:
+    needs: gh_pages
+    runs-on: ubuntu-latest
+    strategy:
+      max-parallel: 1
+      matrix: ${{fromJson(needs.gh_pages.outputs.matrix)}}
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ matrix.name }}
+      - name: Setup Node 🏗️
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+      - name: Installing dependencies ⏳
+        run: npm ci
+      - name: Building docs 🔨
+        id: get_doc_folder
+        run: |
+          if [ "$(printf '%s\n' "$requiredver" "$currentver" | sort -V | head -n1)" = "$requiredver" ]; then 
+            echo "base=\"/react-components/${currentver}\"" >> .env
+            mkdir -p $jsonPath && touch $jsonPath$jsonFile
+            echo "$data" > $jsonPath$jsonFile
+            npm run build:docs
+            echo "::set-output name=doc_folder::docs/public"
+          else
+            npm run docs
+            echo "::set-output name=doc_folder::docs"
+          fi
+        env:
+          requiredver: v5.0.0 # oldest version where gatsby is implemented
+          data: ${{needs.gh_pages.outputs.matrix}}
+          jsonPath: ${{ needs.gh_pages.outputs.path }}
+          jsonFile: ${{ needs.gh_pages.outputs.file }}
+          currentver: ${{ matrix.name }}
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages # The branch the action should deploy to.
+          FOLDER: ${{steps.get_doc_folder.outputs.doc_folder}} # The folder the action should deploy.
+          TARGET_FOLDER: ${{ matrix.name }}
+          CLEAN: true # Automatically remove deleted files from the deploy branch
+          CLEAN_EXCLUDE: '["version"]'
 

docs/gatsby-config.js

@@ -1,7 +1,10 @@
 const pkg = require("../package.json");
+require("dotenv").config({
+    path: `../.env`,
+});
 
 module.exports = {
-    pathPrefix: pkg.config.base,
+    pathPrefix: process.env.base || pkg.config.base,
     siteMetadata: {
         title: "react-comps",
         siteUrl: "https://sebgroup.github.io/react-components/",

docs/package.json

@@ -30,6 +30,7 @@
         "@sebgroup/frontend-tools": "^2.0.2"
     },
     "devDependencies": {
-        "@types/react-helmet": "^6.1.0"
+        "@types/react-helmet": "^6.1.0",
+        "dotenv": "^8.2.0"
     }
 }

docs/src/assets/jsons/versions.json

@@ -0,0 +1,25 @@
+{
+    "include": [
+        { "name": "v5.0.0-beta.3" },
+        { "name": "v5.0.0-beta.2" },
+        { "name": "v5.0.0-beta.1" },
+        { "name": "v4.5.2" },
+        { "name": "v4.5.1" },
+        { "name": "v4.5.0" },
+        { "name": "v4.4.1" },
+        { "name": "v4.4.0" },
+        { "name": "v4.3.1" },
+        { "name": "v4.3.0" },
+        { "name": "v4.2.1" },
+        { "name": "v4.2.0" },
+        { "name": "v4.1.0" },
+        { "name": "v4.0.1" },
+        { "name": "v4.0.0" },
+        { "name": "v3.2.0" },
+        { "name": "v3.1.0" },
+        { "name": "v3.0.3" },
+        { "name": "v3.0.2" },
+        { "name": "v3.0.1" },
+        { "name": "v3.0.0" }
+    ]
+}

docs/src/components/Navbar.tsx

@@ -4,6 +4,7 @@ import { Link } from "gatsby";
 import { urls } from "@configs";
 import { useIsMobile } from "@hooks/useIsMobile";
 import ExternalLinkIcon from "../../static/icons/external-link.svg";
+import VersionsDropdown from "./VersionsDropdown";
 import "../styles/navbar.scss";
 
 export const Navbar: React.FC = React.memo(() => {
@@ -35,6 +36,11 @@ export const Navbar: React.FC = React.memo(() => {
 
 const Navs: React.FC = React.memo(() => (
     <ul className="nav nav-dark">
+        <li className="nav-item">
+            <div className="nav-link">
+                <VersionsDropdown className="top-nav" />
+            </div>
+        </li>
         <li className="nav-item">
             <Link className="nav-link" to="/docs">
                 Docs

docs/src/components/SideMenu.tsx

@@ -8,6 +8,7 @@ import { Link } from "gatsby";
 import { urls } from "@configs";
 import comps from "../../static/components-list.json";
 import { Textbox } from "@sebgroup/react-components/Textbox";
+import VersionsDropdown from "./VersionsDropdown";
 import "../styles/sidemenu.scss";
 
 const SIDE_MENU_STORAGE_KEY = "SIDEMENU";
@@ -199,6 +200,9 @@ export const SideMenu: React.FC = React.memo(() => {
                     <Link to="/docs/getting-started" activeClassName="highlighted" className="list-item">
                         Getting Started
                     </Link>
+                    <Link to="/docs/dynamic-forms" activeClassName="highlighted" className="list-item">
+                        Dynamic Forms
+                    </Link>
                     <a href={urls.releases} target="_blank" rel="noreferrer noopener nofollow" className="list-item">
                         Release notes
                         <ExternalLinkIcon className="align-icon-with-text" />
@@ -207,8 +211,8 @@ export const SideMenu: React.FC = React.memo(() => {
                         Issues
                         <ExternalLinkIcon className="align-icon-with-text" />
                     </a>
-                    <a href={urls.v4} className="list-item">
-                        Earlier version?
+                    <a className="list-item">
+                        <VersionsDropdown />
                     </a>
                 </nav>
                 <hr />

docs/src/components/VersionsDropdown.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import classnames from "classnames";
+import { Dropdown } from "@sebgroup/react-components/Dropdown";
+import { withPrefix } from "gatsby-link";
+import "../styles/versions-dropdown.scss";
+const versions = require("../assets/jsons/versions.json").include;
+
+interface VersionItem {
+    name: string;
+}
+interface FormattedVersionItem {
+    value: string;
+    label: string;
+}
+
+export interface VersionsDropdownProps {
+    className?: string;
+}
+
+const VersionsDropdown: React.FC<React.PropsWithChildren<VersionsDropdownProps>> = (props: VersionsDropdownProps) => {
+    const [currentVersion, setCurrentVersion] = React.useState<string>("");
+    const [formattedList, setFormattedList] = React.useState<Array<FormattedVersionItem>>([]);
+
+    /** format dropdown list */
+    const formatList = () => {
+        setFormattedList(
+            versions?.length > 0
+                ? versions.map((item: VersionItem) => ({
+                      value: item.name,
+                      label: item.name.replace(/[^.]+$/, "x"),
+                  }))
+                : []
+        );
+    };
+
+    React.useEffect(() => {
+        const currentpath: string = window.location.href;
+        const regex: RegExp = new RegExp("v(\\d+\\.)(\\d+\\.)(\\d)(-(beta|alpha)(\\.\\d))?", "g");
+        const matchedVersions: Array<string> = currentpath.match(regex);
+        setCurrentVersion(matchedVersions?.length > 0 ? matchedVersions[0] : versions[0].name);
+        formatList();
+    }, []);
+
+    return (
+        <Dropdown
+            wrapperProps={{ className: classnames("version-dropdown", props.className) }}
+            value={currentVersion}
+            selectedLabel={(value: string) => formattedList.find((item: FormattedVersionItem) => item.value === value)?.label}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => (window.location.href = `${window.location.origin}${withPrefix(e.target.value)}/`)}
+        >
+            {formattedList.map((item: FormattedVersionItem, index: number) => (
+                <option key={index} value={item.value}>
+                    {item.label}
+                </option>
+            ))}
+        </Dropdown>
+    );
+};
+
+export default VersionsDropdown;

docs/src/configs.ts

@@ -1,10 +1,10 @@
 const pkg = require("../package.json");
 
 export const urls: NavsURLs = {
-    releases: "https://github.com/sebgroup/ng-components/releases",
-    github: "https://github.com/sebgroup/ng-components/",
-    contribute: "https://github.com/sebgroup/ng-components/blob/alpha/CONTRIBUTING.md",
-    issues: "https://github.com/sebgroup/ng-components/issues",
+    releases: "https://github.com/sebgroup/react-components/releases",
+    github: "https://github.com/sebgroup/react-components/",
+    contribute: "https://github.com/sebgroup/react-components/blob/alpha/CONTRIBUTING.md",
+    issues: "https://github.com/sebgroup/react-components/issues",
     v4: "/v4/index.html",
 };
 

docs/src/pages/404.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "gatsby";
+import { Link, withPrefix } from "gatsby";
 import { Helmet } from "react-helmet";
 import "../styles/notfound.scss";
 
@@ -9,7 +9,7 @@ const NotFound: React.FC = React.memo(() => {
             <Helmet>
                 <title>Not found - SEB React Components</title>
             </Helmet>
-            <img width="80%" src="/404.svg" alt="Page not found" />
+            <img width="80%" src={withPrefix("/404.svg")} alt="Page not found" />
             <h1 className="display-4">Page not found</h1>
             <Link className="btn btn-primary" to="/">
                 Return Home

docs/src/pages/docs/button.tsx

@@ -40,7 +40,7 @@ const ButtonPage: React.FC = () => {
             exampleTheme={controls.theme === "light" ? "dark" : controls.theme === "dark" ? "warning" : null}
             mainFile={importString}
             example={
-                <Button size={controls.size?.value} theme={controls.theme} disabled={controls.disabled} block={controls.block}>
+                <Button size={controls.size} theme={controls.theme} disabled={controls.disabled} block={controls.block}>
                     Click me
                 </Button>
             }

docs/src/pages/docs/buttongroup.tsx

@@ -32,7 +32,7 @@ const ButtonGroupPage: React.FC = (): React.ReactElement<void> => {
         <Docs
             mainFile={importString}
             example={
-                <ButtonGroup size={controls.size?.value} vertical={controls.vertical}>
+                <ButtonGroup size={controls.size} vertical={controls.vertical}>
                     <Button>Add</Button>
                     <Button>Edit</Button>
                     <Button>Delete</Button>

docs/src/pages/docs/carousel.tsx

@@ -31,7 +31,7 @@ const CarouselPage: React.FC = (): React.ReactElement<void> => {
                 { key: "infinite", label: "infinite", controlType: "Checkbox", value: false },
                 { key: "autoplay", label: "autoplay", controlType: "Checkbox", value: false },
                 { key: "showIndicators", label: "showIndicators", controlType: "Checkbox" },
-                { key: "transitionStyle", label: "transitionStyle", controlType: "Radio", inline: true, options: transitionStyles, value: transitionStyles[0] },
+                { key: "transitionStyle", label: "transitionStyle", controlType: "Radio", inline: true, options: transitionStyles, value: transitionStyles[0].value },
             ],
         },
     ]);
@@ -47,7 +47,7 @@ const CarouselPage: React.FC = (): React.ReactElement<void> => {
                         showIndicators={controls.showIndicators}
                         autoplay={controls.autoplay}
                         infinite={controls.infinite}
-                        transitionStyle={controls.transitionStyle?.value}
+                        transitionStyle={controls.transitionStyle}
                     >
                         {images.map((image, i) => (
                             <CarouselItem key={i}>

docs/src/pages/docs/checkbox.tsx

@@ -30,24 +30,34 @@ const CheckboxPage: React.FC = (): React.ReactElement<void> => {
             items: [
                 { key: "inline", label: "inline", controlType: "Checkbox", value: false },
                 { key: "indicator", label: "indicator", controlType: "Checkbox", value: false },
-                { key: "indicatorType", rulerKey: "indicator", condition: true, label: "Indicator type", options: indicators, inline: true, controlType: "Radio", value: indicators[0], indent: true },
+                {
+                    key: "indicatorType",
+                    rulerKey: "indicator",
+                    condition: true,
+                    label: "Indicator type",
+                    options: indicators,
+                    inline: true,
+                    controlType: "Radio",
+                    value: indicators[0].value,
+                    indent: true,
+                },
                 {
                     key: "indicatorGrouping",
                     label: "Indicator choices",
                     controlType: "Radio",
                     rulerKey: "indicator",
                     condition: true,
                     options: indicatorGrouping,
-                    value: indicatorGrouping[0],
+                    value: indicatorGrouping[0].value,
                     indent: true,
                 },
             ],
         },
     ]);
 
-    const isIndividual: boolean = controls.indicatorGrouping?.value === "1";
-    const isGrouped: boolean = controls.indicatorGrouping?.value === "2";
-    const indicator: Indicator = controls.indicator ? { type: controls.indicatorType?.value, message: "Indicator message" } : null;
+    const isIndividual: boolean = controls.indicatorGrouping === "1";
+    const isGrouped: boolean = controls.indicatorGrouping === "2";
+    const indicator: Indicator = controls.indicator ? { type: controls.indicatorType, message: "Indicator message" } : null;
 
     return (
         <Docs