diff --git a/.gitattributes b/.gitattributes
deleted file mode 100644
index dfe077042..000000000
--- a/.gitattributes
+++ /dev/null
@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto
diff --git a/.github/workflows/build-check.yml b/.github/workflows/build-check.yml
index ec2196440..17ea969a9 100644
--- a/.github/workflows/build-check.yml
+++ b/.github/workflows/build-check.yml
@@ -7,7 +7,7 @@ jobs:
runs-on: ubuntu-latest
strategy:
matrix:
- node: [ '12', '14' ]
+ node: [ '15' ]
name: Node ${{ matrix.node }}
steps:
- uses: actions/checkout@v2
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index d9d83990b..324222237 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -5,26 +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/request-action@v2.x
+ 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
+ node-version: 15.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/ghaction-github-pages@v2.2.0
with:
build_dir: docs/public
env:
- GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
\ No newline at end of file
+ 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: 15.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/github-pages-deploy-action@3.7.1
+ 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"]'
+
\ No newline at end of file
diff --git a/.github/workflows/greetings.yml b/.github/workflows/greetings.yml
deleted file mode 100644
index d413eadf6..000000000
--- a/.github/workflows/greetings.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-name: Greetings
-
-on: [pull_request, issues]
-
-jobs:
- greeting:
- runs-on: ubuntu-latest
- steps:
- - uses: actions/first-interaction@v1
- with:
- repo-token: ${{ secrets.GITHUB_TOKEN }}
- issue-message: 'Thank you for submitting your first issue. We will look into it as soon as we can. If you want to address this issue yourself, please read our [contributing guide](https://github.com/sebgroup/react-components/blob/develop/CONTRIBUTING.md) and submit a pull request.'
- pr-message: '### :tada: Thank you for taking the time to contribute to our components library :tada:\nYour contribution is much appreciated. Please be reminded that code review might take a while so please bare with us. In the meantime, please make sure you run through the following:\n- [ ] Read our [contributing guide](https://github.com/sebgroup/react-components/blob/develop/CONTRIBUTING.md)\n- [ ] Submitted an issue describing the feature or bug with screenshots if possible\n- [ ] [Referencing the issue](https://help.github.com/en/github/managing-your-work-on-github/closing-issues-using-keywords) on this pull request so it can be automatically closed when the pull request is merged'
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 3cf0cfdeb..44512a5c1 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -14,7 +14,7 @@ jobs:
- name: Setup node
uses: actions/setup-node@v2
with:
- node-version: 14.x
+ node-version: 15.x
- name: Installing dependencies
run: npm ci
@@ -40,5 +40,7 @@ jobs:
uses: coverallsapp/github-action@v1.0.1
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
+ path-to-lcov: ./lib/coverage/lcov.info
env:
- COVERALLS_REPO_TOKEN: ${{ secrets.COVERALLS_TOKEN }}
\ No newline at end of file
+ COVERALLS_REPO_TOKEN: ${{ secrets.COVERALLS_TOKEN }}
+
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 7c89c1af2..aba283414 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,9 +6,7 @@ npm-debug.log
.idea/
# VS Code - everything but the prettier config files
-.vscode/*
-!.vscode/extensions.json
-!.vscode/settings.json
+.vscode/
.history/
# Windows
@@ -23,4 +21,6 @@ dist
tmp
build
coverage
-docs
+public
+
+.cache
diff --git a/.npmignore b/.npmignore
deleted file mode 100644
index dcc39104a..000000000
--- a/.npmignore
+++ /dev/null
@@ -1,38 +0,0 @@
-# Node
-node_modules
-npm-debug.log
-
-# Yarn
-yarn-error.log
-
-# JetBrains
-.idea/
-
-# VS Code
-.vscode/
-
-# Windows
-Thumbs.db
-Desktop.ini
-
-# Mac
-.DS_Store
-
-# Temporary files
-coverage/
-demo/
-docs
-tmp
-
-# Library files
-src/
-develop/
-tsconfig.json
-webpack.*
-
-# Test files and configs
-jest.configs.js
-__mocks__/
-src/**/**.test.ts?(x)
-setupTests.js
-coverage/
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index c94b2d663..f6a3d0369 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,10 +1,16 @@
+# Files
*.md
*.yml
-__mocks__
-coverage
-node_modules
-dist
-.github
-.vscode
package.json
-package-lock.json
\ No newline at end of file
+package-lock.json
+
+# Directories
+.github/
+.vscode/
+test/
+coverage/
+node_modules/
+dist/
+docs/public/
+docs/static/
+
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index 974188b8d..000000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "recommendations": ["esbenp.prettier-vscode"]
-}
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 6e55c4213..000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "editor.defaultFormatter": "esbenp.prettier-vscode",
- "editor.formatOnSave": true,
- "[markdown]": {
- "editor.defaultFormatter": "yzhang.markdown-all-in-one"
- }
-}
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/README.md b/README.md
index d49c9a14d..96a90f249 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
# SEB React Components
+[![https://img.shields.io/npm/v/@sebgroup/react-components](https://img.shields.io/npm/v/@sebgroup/react-components)](https://www.npmjs.com/package/@sebgroup/react-components)
![Deployment](https://github.com/sebgroup/react-components/workflows/Deployment/badge.svg)
![Github Pages](https://github.com/sebgroup/react-components/workflows/Github%20Pages/badge.svg)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
@@ -18,9 +19,9 @@ This is a set of react components some of which are based on SEB's bootstrap. Th
This version of components has been developed with:
-- React `^16.12`
-- Typescript `^3.7`
-- SEB Bootstrap `^5.1`
+- React
+- Typescript
+- SEB Bootstrap
## Installation
@@ -43,7 +44,7 @@ For `Visual Studio Code` users, please install the [recommended plugins](.vscode
## Development
-This project uses `prettier` for a more consistent (less annoying) coding. We are using 4 different builds for this project. The `src` folder is where the actual components exist with all their necessary dependencies. and `develop` folder is where we develop and test those components. Unit tests are based on `jest` and `enzyme`.
+This project uses `prettier` for a more consistent (less annoying) coding. We are using 4 different builds for this project. The `src` folder is where the actual components exist with all their necessary dependencies. and `develop` folder is where we develop and test those components.
1. Development: `npm start`
2. Check formatting rules, Compile components and Create Docs folder: `npm run build`
@@ -57,19 +58,19 @@ This project uses `prettier` for a more consistent (less annoying) coding. We ar
For performance benefits we are not combining all the components into single Index rather they are chunked into their subpackage. Therefore, to use a component, you need to import the `Component` submodule from the `dist` folder, in whichever Class you want to use it. Here is a sample of how to import a `Button` component in a page.
```javascript
-import { Button } from "@sebgroup/react-components/dist/Button";
+import { Button } from "@sebgroup/react-components";
-const Comp = () => {
+const Component = () => {
const onClick = (e) => {
console.log("Im Clicked");
}
return (
-
+ Button label
);
}
-export default Comp;
+export default Component;
```
diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js
deleted file mode 100644
index a09954537..000000000
--- a/__mocks__/styleMock.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = {};
\ No newline at end of file
diff --git a/develop/__utils/makeData.tsx b/develop/__utils/makeData.tsx
deleted file mode 100644
index 12c0cb26d..000000000
--- a/develop/__utils/makeData.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-import { loremIpsum } from "lorem-ipsum";
-import { randomId } from "@sebgroup/frontend-tools/dist/randomId";
-import { ActionLinkItem, TableRow } from "../../src/Table/Table";
-
-function range(len: number): Array {
- const arr: Array = [];
- for (let i = 0; i < len; i++) {
- arr.push(i);
- }
- return arr;
-}
-
-function newPerson(): object {
- const statusChance: number = Math.random();
- return {
- id: parseInt(randomId("").substr(8, 4), 10),
- firstName: loremIpsum({ units: "words", count: 1 }),
- lastName: loremIpsum({ units: "words", count: 1 }),
- age: Math.floor(Math.random() * 30),
- visits: Math.floor(Math.random() * 100),
- progress: Math.floor(Math.random() * 100),
- status: statusChance > 0.66 ? "relationship" : statusChance > 0.33 ? "complicated" : "single",
- };
-}
-
-const actionLinks: Array = [
- {
- label: "Edit",
- onClick: (event: React.MouseEvent, selectedRow: TableRow) => {},
- },
-];
-
-export default function makeData(lens: Array, useRowActionColumn?: boolean): T {
- const makeDataLevel: Function = (depth: number = 0): object | Function => {
- const len: number = lens[depth];
- return range(len).map((d: number) => {
- return {
- ...newPerson(),
- subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
- actionLinks: useRowActionColumn ? (d % 2 === 0 ? actionLinks : null) : null,
- actionButtonState: useRowActionColumn ? (d % 2 === 0 ? "disabled" : null) : null,
- rowContentDetail: {loremIpsum({ units: "sentences", count: 2 })}
,
- };
- });
- };
-
- return makeDataLevel();
-}
diff --git a/develop/__utils/queryString.ts b/develop/__utils/queryString.ts
deleted file mode 100644
index 742334b49..000000000
--- a/develop/__utils/queryString.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Find the value of an item in the query string
- * @param queryString The query string
- * @param name The name of the query item needs to be retrieved
- * @returns The value of the query item found in the query string
- */
-export function getParameterByName(queryString: string, name: string): string {
- const match: RegExpExecArray = RegExp("[?&]" + name + "=([^&]*)").exec(queryString);
- return match && decodeURIComponent(match[1].replace(/\+/g, " "));
-}
diff --git a/develop/assets/components-list.json b/develop/assets/components-list.json
deleted file mode 100644
index f91cbe4c5..000000000
--- a/develop/assets/components-list.json
+++ /dev/null
@@ -1,207 +0,0 @@
-{
- "links": [
- {
- "name": "About",
- "path": "/about"
- },
- {
- "name": "Issues",
- "path": "https://github.com/sebgroup/react-components/issues"
- },
- {
- "name": "Release notes",
- "path": "https://github.com/sebgroup/react-components/releases"
- }
- ],
- "form": [
- {
- "name": "Textbox",
- "path": "/textbox",
- "filePath": "pages/TextBoxPage"
- },
- {
- "name": "TextboxGroup",
- "path": "/textboxgroup",
- "filePath": "pages/TextBoxGroupPage"
- },
- {
- "name": "Textarea",
- "path": "/textarea",
- "filePath": "pages/TextAreaPage"
- },
- {
- "name": "Textlabel",
- "path": "/textlabel",
- "filePath": "pages/TextLabelPage"
- },
- {
- "name": "Checkbox",
- "path": "/checkbox",
- "filePath": "pages/CheckBoxPage"
- },
- {
- "name": "Dropdown",
- "path": "/dropdown",
- "filePath": "pages/DropdownPage"
- },
- {
- "name": "Datepicker",
- "path": "/datepicker",
- "filePath": "pages/DatepickerPage"
- },
- {
- "name": "Radio Group",
- "path": "/radiogroup",
- "filePath": "pages/RadioGroupPage"
- },
- {
- "name": "Radio Button",
- "path": "/radiobtn",
- "filePath": "pages/RadioButtonPage"
- },
- {
- "name": "Rating",
- "path": "/rating",
- "filePath": "pages/RatingPage"
- },
- {
- "name": "Toggle",
- "path": "/toggle",
- "filePath": "pages/TogglePage"
- },
- {
- "name": "Slider",
- "path": "/slider",
- "filePath": "pages/SliderPage"
- },
- {
- "name": "Stepper",
- "path": "/stepper",
- "filePath": "pages/StepperPage"
- },
- {
- "name": "Timepicker",
- "path": "/timepicker",
- "filePath": "pages/TimepickerPage"
- },
- {
- "name": "Image Cropper",
- "path": "/imagecropper",
- "filePath": "pages/ImageCropperPage"
- }
- ],
- "ui": [
- {
- "name": "Button",
- "path": "/button",
- "filePath": "pages/ButtonPage"
- },
- {
- "name": "Chip",
- "path": "/chip",
- "filePath": "pages/ChipPage"
- },
- {
- "name": "Tooltip",
- "path": "/tooltip",
- "filePath": "pages/TooltipPage"
- },
- {
- "name": "Loader",
- "path": "/loader",
- "filePath": "pages/LoaderPage"
- },
- {
- "name": "Progress Bar",
- "path": "/progressbar",
- "filePath": "pages/ProgressBarPage"
- },
- {
- "name": "Carousel",
- "path": "/carousel",
- "filePath": "pages/CarouselPage"
- },
- {
- "name": "Pagination/DotNav",
- "path": "/pagination",
- "filePath": "pages/PaginationPage"
- },
- {
- "name": "Timeline",
- "path": "/timeline",
- "filePath": "pages/TimelinePage"
- },
- {
- "name": "Step Tracker",
- "path": "/steptracker",
- "filePath": "pages/StepTrackerPage"
- },
- {
- "name": "Breadcrumb",
- "path": "/breadcrumb",
- "filePath": "pages/BreadcrumbPage"
- },
- {
- "name": "Accordion",
- "path": "/accordion",
- "filePath": "pages/AccordionPage"
- },
- {
- "name": "Tabs",
- "path": "/tabs",
- "filePath": "pages/TabsPage"
- },
- {
- "name": "Notification",
- "path": "/notification",
- "filePath": "pages/NotificationPage"
- }
- ],
- "other": [
- {
- "name": "Table",
- "path": "/table",
- "filePath": "pages/TablePage"
- },
- {
- "name": "Dialogue",
- "path": "/dialogue",
- "filePath": "pages/DialoguePage"
- },
- {
- "name": "Modal",
- "path": "/modal",
- "filePath": "pages/ModalPage"
- },
- {
- "name": "Charts",
- "path": "/chart",
- "filePath": "pages/ChartPage"
- },
- {
- "name": "Image Holder",
- "path": "/image",
- "filePath": "pages/ImagePage"
- },
- {
- "name": "Inline Link",
- "path": "/inlinelink",
- "filePath": "pages/InlineLinkPage"
- },
- {
- "name": "Video Holder",
- "path": "/video",
- "filePath": "pages/VideoPage"
- },
- {
- "name": "Timer",
- "path": "/timer",
- "filePath": "pages/TimerPage"
- },
- {
- "name": "Icons",
- "path": "/icons",
- "filePath": "pages/IconPage"
- }
- ]
-}
diff --git a/develop/assets/images/icons/user.svg b/develop/assets/images/icons/user.svg
deleted file mode 100644
index 378a1078d..000000000
--- a/develop/assets/images/icons/user.svg
+++ /dev/null
@@ -1 +0,0 @@
-regular_black
\ No newline at end of file
diff --git a/develop/components/App.tsx b/develop/components/App.tsx
deleted file mode 100644
index 4ecbb61fd..000000000
--- a/develop/components/App.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-import { Switch, withRouter, Route, Redirect } from "react-router-dom";
-import { RouteComponentProps } from "react-router";
-// Components
-import TitleBar from "./common/TitleBar";
-import SideBar from "./common/SideBar";
-import { Loader } from "../../src/Loader/Loader";
-import { getParameterByName } from "../__utils/queryString";
-import { SideBarContent, SideBarItem } from "typings/generic.type";
-const sidebarData: SideBarContent = require("../assets/components-list.json");
-type RouteItem = { path: string; component: React.LazyExoticComponent };
-
-/** Routes are generated dynamically based on the information provided in `assets/components-list.json` */
-const routes: Array = [{ path: "/about", component: React.lazy(() => import("./common/About")) }];
-[sidebarData.form, sidebarData.ui, sidebarData.other].map((category: Array) =>
- category.map((item: SideBarItem) => {
- routes.push({ path: item.path, component: React.lazy(() => import(`./${item.filePath}`)) });
- })
-);
-routes.push({ path: "*", component: React.lazy(() => import("./common/NotFound")) });
-
-const storedSidebarToggle: boolean = localStorage.getItem("sidebar") === null ? true : JSON.parse(localStorage.getItem("sidebar"));
-
-const App: React.FC = (props: RouteComponentProps) => {
- const [sidebarToggle, setSidebarToggle] = React.useState(storedSidebarToggle);
- const [brief, setBrief] = React.useState(false);
-
- const toggleSidebar = React.useCallback(() => {
- localStorage.setItem("sidebar", String(!sidebarToggle));
- setSidebarToggle(!sidebarToggle);
- }, [sidebarToggle]);
-
- React.useEffect(() => {
- const mode: string = getParameterByName(props.location.search, "mode");
- const isBrief: boolean = mode && mode.toLowerCase() === "dl";
- isBrief !== brief && setBrief(isBrief);
- }, [props.location, brief]);
-
- return (
-
-
-
- }>
-
-
-
-
- {routes.map((item: RouteItem, index: number) => (
-
- ))}
-
-
-
-
-
- );
-};
-
-export default withRouter(App);
diff --git a/develop/components/Routing.tsx b/develop/components/Routing.tsx
deleted file mode 100644
index 137e26813..000000000
--- a/develop/components/Routing.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import * as React from "react";
-import { Route } from "react-router-dom";
-
-export default ({ component: C, props: cProps, ...rest }) => } />;
diff --git a/develop/components/common/About.tsx b/develop/components/common/About.tsx
deleted file mode 100644
index 299a2053e..000000000
--- a/develop/components/common/About.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from "react";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../README.md");
-
-const About: React.FunctionComponent = () => {
- return (
-
- );
-};
-
-export default About;
diff --git a/develop/components/common/NotFound.tsx b/develop/components/common/NotFound.tsx
deleted file mode 100644
index 611581de3..000000000
--- a/develop/components/common/NotFound.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from "react";
-import { NavLink } from "react-router-dom";
-
-const NotFound: React.FunctionComponent = (): React.ReactElement => {
- return (
-
-
-
404
-
Page not found!
-
- Return Home
-
-
-
- );
-};
-
-export default NotFound;
diff --git a/develop/components/common/SideBar.tsx b/develop/components/common/SideBar.tsx
deleted file mode 100644
index eadab076e..000000000
--- a/develop/components/common/SideBar.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from "react";
-import * as H from "history";
-import { sortBy } from "lodash";
-import { SideBarContent, SideBarItem } from "../../typings/generic.type";
-const sidebarData: SideBarContent = require("../../assets/components-list.json");
-
-const forms: Array = sortBy(sidebarData.form, "name");
-const uis: Array = sortBy(sidebarData.ui, "name");
-const others: Array = sortBy(sidebarData.other, "name");
-
-interface SideBarProps {
- toggle: boolean;
- history: H.History;
-}
-
-const SideBar: React.FunctionComponent = (props: SideBarProps): React.ReactElement => {
- const currentPath: string = props.history.location.pathname;
-
- /**
- * Navigates to the link provided in the `href`
- * @param e The click event from an `a`
- */
- function navigate(e: React.MouseEvent): void {
- e.preventDefault();
- const to: string = e.currentTarget.getAttribute("href").replace("#", "");
- if (to.charAt(0) !== "/") {
- window.open(to, e.currentTarget.getAttribute("target"));
- } else if (props.history.location.pathname.replace("#", "") !== to) {
- props.history.push(to);
- }
- }
-
- return (
-
-
-
-
- Components
{forms.length + uis.length + others.length}
-
-
-
-
-
-
-
-
- );
-};
-
-type SideBarListProps = {
- title?: string;
- list: Array;
- currentPath: string;
- onClick: (e: React.MouseEvent) => void;
-};
-
-const SideBarList: React.FunctionComponent = (props: SideBarListProps) => (
- <>
- {props.title && {props.title}
}
- {props.list.map((item: SideBarItem, index: number) => (
-
- {item.name}
-
- ))}
- >
-);
-
-export default SideBar;
diff --git a/develop/components/common/TitleBar.tsx b/develop/components/common/TitleBar.tsx
deleted file mode 100644
index 9491f67bb..000000000
--- a/develop/components/common/TitleBar.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-import * as React from "react";
-import { TextBoxGroup } from "../../../src/TextBoxGroup/TextBoxGroup";
-import { Icon } from "../../../src/Icon/Icon";
-const SEBLogo: string = require("../../assets/images/icons/seblogo.svg");
-const reactLogo: string = require("../../assets/images/icons/ReactLogo.png");
-const sidebarData = require("../../assets/components-list.json");
-
-interface SideBarDataItem {
- name: string;
- path: string;
-}
-
-interface TitleBarProps {
- onToggleClick: () => any;
- history?: any;
-}
-
-interface TitleBarState {
- searchTerm: string;
- componentsList: Array;
- searchList: Array;
- searchInFocus: boolean;
- highlighted: number;
-}
-
-export default class TitleBar extends React.Component {
- private searchRef: React.RefObject;
- constructor(props: any) {
- super(props);
-
- this.state = {
- componentsList: [],
- searchTerm: "",
- searchList: [],
- searchInFocus: false,
- highlighted: 0,
- };
- this.searchRef = React.createRef();
- this.chooseHighlightedItem = this.chooseHighlightedItem.bind(this);
- this.searchItemClicked = this.searchItemClicked.bind(this);
- this.searchTermChange = this.searchTermChange.bind(this);
- this.handleKeyDown = this.handleKeyDown.bind(this);
- this.handleFocus = this.handleFocus.bind(this);
- this.dismissSearch = this.dismissSearch.bind(this);
- }
-
- /**
- * Handle input change
- * @param {React.ChangeEvent} event Change event
- */
- searchTermChange(event: React.ChangeEvent) {
- event.preventDefault();
- this.setState({ searchTerm: event.target.value.toLowerCase(), highlighted: 0 }, () => this.searchComponents());
- }
-
- /** Search components list as you type */
- searchComponents(): void {
- if (this.state.searchTerm.length >= 2) {
- const result = this.state.componentsList.filter((x) => x.name.toLowerCase().match(escape(this.state.searchTerm))).slice(0, 5);
- this.setState({ searchList: result });
- }
- if (this.state.searchTerm === "") {
- this.setState({ searchList: [] });
- }
- }
-
- /** Choose the highlighted item and navigate to it */
- chooseHighlightedItem() {
- if (this.state.searchList && this.state.searchList.length > 0) {
- const path: string = this.state.searchList[this.state.highlighted].path;
- if (document.activeElement === this.searchRef.current) {
- (this.searchRef.current as HTMLInputElement).blur();
- }
- this.setState({ searchList: [], searchTerm: "", searchInFocus: false }, () => this.props.history.push(path));
- }
- }
-
- /**
- * Navigate to the component page when its clicked in the search list
- * @param {string} path The path to navigate to
- */
- searchItemClicked(path: string) {
- this.setState({ searchList: [], searchTerm: "", searchInFocus: false }, () => this.props.history.push(path));
- }
-
- /**
- * Handle keyboard key down (Enter)
- * @param {React.KeyboardEvent} event The keyboard event
- */
- handleKeyDown(event: React.KeyboardEvent): void {
- if (event.which === 13) {
- this.chooseHighlightedItem();
- }
- }
-
- /**
- * Enable search mode when the search input is in focus
- * @note if the search term already has a value, the value will be used to search for components
- */
- handleFocus(): void {
- this.setState({ searchInFocus: true }, () => this.searchComponents());
- }
-
- /**
- * Dismiss the search mode when clicked on the focus div covering the whole page
- * @param {React.MouseEvent} event The mouse click event
- */
- dismissSearch(event: React.MouseEvent): void {
- event.stopPropagation();
- this.setState({ searchInFocus: false, searchList: [] });
- }
-
- /**
- * Checks whether the input key is an `Escape` key
- * @param {React.KeyboardEvent} event The keyboard event
- * @returns {boolean} True if it is `Escape` key
- */
- isEscapeKey(event: React.KeyboardEvent): boolean {
- if (event.key.toLowerCase() === "escape" || event.key.toLowerCase() === "esc") {
- return true;
- } else if (event.keyCode === 27) {
- return true;
- } else {
- return false;
- }
- }
-
- onKeyPressListener: EventListener = (e: KeyboardEvent) => {
- if (e.ctrlKey && e.shiftKey && (e.key.toLowerCase() === "f" || e.keyCode === 6)) {
- this.searchRef.current.focus();
- }
- };
-
- onKeyUpListener: EventListener = (e: KeyboardEvent) => {
- if (document.activeElement === this.searchRef.current) {
- if (e.key.toLowerCase() === "escape" || e.keyCode === 27) {
- if (document.activeElement === this.searchRef.current) {
- this.setState({ searchTerm: "", searchList: [], searchInFocus: false }, () => (this.searchRef.current as HTMLInputElement).blur());
- }
- }
- if (e.key.toLowerCase() === "arrowup" || e.keyCode === 38) {
- e.preventDefault();
- if (this.state.highlighted > 0) {
- this.setState({ highlighted: this.state.highlighted - 1 });
- }
- }
- if (e.key.toLowerCase() === "arrowdown" || e.keyCode === 40) {
- e.preventDefault();
- if (this.state.highlighted < this.state.searchList.length - 1) {
- this.setState({ highlighted: this.state.highlighted + 1 });
- }
- }
- }
- };
-
- componentDidMount() {
- this.setState({ componentsList: [].concat(...[sidebarData.form, sidebarData.ui, sidebarData.other]) });
- document.addEventListener("keyup", this.onKeyUpListener);
- document.addEventListener("keypress", this.onKeyPressListener);
- }
-
- componentWillUnmount() {
- document.removeEventListener("keyup", this.onKeyUpListener);
- document.removeEventListener("keypress", this.onKeyPressListener);
- }
-
- render() {
- return (
-
-
-
-
-
-
SEB React components
-
- {this.state.searchInFocus &&
}
-
) => e.key.toLowerCase() === "escape" && e.preventDefault()}
- reference={this.searchRef}
- rightIcon={
-
-
-
- }
- />
-
- {this.state.searchList && this.state.searchList.length > 0 && (
-
- {this.state.searchList.map((item, index) => (
-
this.setState({ highlighted: index })}
- className={"search-item" + (this.state.highlighted === index ? " highlighted" : "")}
- onClick={() => {
- this.searchItemClicked(item.path);
- }}
- >
- {item.name}
-
- ))}
-
- )}
- {this.state.searchList && !this.state.searchList.length && this.state.searchTerm && this.state.searchInFocus && (
-
- )}
-
-
-
-
-
-
-
-
-
@sebgroup/react-components
-
-
- );
- }
-}
diff --git a/develop/components/pages/AccordionPage.tsx b/develop/components/pages/AccordionPage.tsx
deleted file mode 100644
index 682d7ccb6..000000000
--- a/develop/components/pages/AccordionPage.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as React from "react";
-import { Accordion, AccrodionListItem } from "../../../src/Accordion/Accordion";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Accordion/readme.md");
-
-const plusIcon: JSX.Element = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-const angleDoubleRightIcon: JSX.Element = (
-
-
-
-);
-
-const AccordionPage: React.FunctionComponent = () => {
- return (
-
-
-
-
-
-
Output
-
Here is a sample output
-
-
-
Here is a sample with active or collapsed item
-
-
-
Custom icon when expanded
-
-
-
Custom icon on the right
-
-
-
Alternative theme
-
-
-
-
- );
-};
-
-const accordionList: Array = [
- {
- header: "Accordion List Item 1",
- subHeaderText: "Accordion Sub Header",
- content: {
- title: "Tempor incididun",
- desc:
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " +
- "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tristique senectus et netus. Lectus mauris ultrices eros in cursus turpis massa tincidunt.",
- },
- },
- {
- header: "Accordion List Item 2",
- content: [
- {
- title: "Excepteur sint",
- desc:
- "Vitae suscipit tellus mauris a diam maecenas sed. Feugiat in fermentum posuere urna nec tincidunt praesent semper." +
- "Tellus id interdum velit laoreet id donec. Morbi enim nunc faucibus a pellentesque sit. Vitae congue mauris rhoncus aenean.",
- },
- {
- title: "Duis aute",
- desc:
- "Eleifend donec pretium vulputate sapien nec sagittis. Malesuada fames ac turpis egestas." +
- "Molestie ac feugiat sed lectus vestibulum mattis. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed.",
- },
- ],
- },
- {
- header: "Accordion List Item 3",
- content: (
- <>
- Ut nemo corporis inventore neque qui. Est quos facere et id praesentium ut in iusto qui. Labore vel est ab.
-
- Link to seb.se
-
- >
- ),
- },
-];
-
-export default AccordionPage;
diff --git a/develop/components/pages/BreadcrumbPage.tsx b/develop/components/pages/BreadcrumbPage.tsx
deleted file mode 100644
index 63fec0844..000000000
--- a/develop/components/pages/BreadcrumbPage.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from "react";
-import { Breadcrumb } from "../../../src/Breadcrumb/Breadcrumb";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Breadcrumb/readme.md");
-
-const userIcon: JSX.Element = (
-
- regular_black
-
-
-
-);
-
-const BreadcrumbPage: React.FunctionComponent = () => {
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
- alert(`Should navigate to ${breadcrumbList[i]}`)} />
-
-
-
Passing icons as a breadcrumb item
-
- alert(`Should navigate to ${i}`)} />
-
-
-
-
- );
-};
-
-const breadcrumbList: Array = ["First", "Second", "Third"];
-const breadcrumbList2: Array = [userIcon, "Details"];
-
-export default BreadcrumbPage;
diff --git a/develop/components/pages/ButtonPage.tsx b/develop/components/pages/ButtonPage.tsx
deleted file mode 100644
index dd27525ef..000000000
--- a/develop/components/pages/ButtonPage.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import * as React from "react";
-import { Button, ButtonTheme, ButtonIconPosition, ButtonSizes } from "../../../src/Button/Button";
-import { Loader } from "../../../src/Loader/Loader";
-import { RadioGroup, RadioListModel } from "../../../src/RadioGroup/RadioGroup";
-import { CheckBox } from "../../../src/CheckBox/CheckBox";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Button/readme.md");
-
-const mysvg: JSX.Element = (
-
-
-
-);
-
-const ButtonPage: React.FunctionComponent = () => {
- const themeList: Array> = [
- { label: "Primary", value: "primary" },
- { label: "Primary (outlined)", value: "outline-primary" },
- { label: "Secondary", value: "secondary" },
- { label: "Danger", value: "danger" },
- { label: "Ghost-dark", value: "ghost-dark" },
- { label: "Ghost-light", value: "ghost-light" },
- { label: "Link", value: "link" },
- ];
- const iconPositionList: Array> = [
- { label: "Right", value: "right" },
- { label: "Left", value: "left" },
- ];
- const sizeList: Array> = [
- { label: "Small", value: "sm" },
- { label: "Medium", value: "md" },
- { label: "Large", value: "lg" },
- ];
- const [theme, setTheme] = React.useState("primary");
- const [iconPosition, setIconPosition] = React.useState("right");
- const [disabled, setDisabled] = React.useState(false);
- const [hasLoader, setHasLoader] = React.useState(false);
- const [hasIcon, setHasIcon] = React.useState(false);
- const [hasSize, setHasSize] = React.useState(false);
- const [size, setSize] = React.useState("md");
-
- function iconCheckboxChanged(e: React.ChangeEvent) {
- setHasIcon(e.target.checked);
- !e.target.checked && setIconPosition("right"); // Clear icon position
- }
-
- function sizeCheckboxChanged(e: React.ChangeEvent) {
- setHasSize(e.target.checked);
- !e.target.checked && setSize("md"); // Reset size
- }
-
- return (
-
-
-
-
-
-
Output
-
-
- {hasLoader && }
-
-
-
-
Options
-
-
-
Themes
-
setTheme(e.currentTarget.value as ButtonTheme)} condensed />
-
-
-
Options
-
setDisabled(e.target.checked)} condensed />
- setHasLoader(e.target.checked)} condensed />
-
- {hasIcon && (
- setIconPosition(e.target.value as ButtonIconPosition)}
- />
- )}
-
- {hasSize && setSize(e.target.value as ButtonSizes)} />}
-
-
-
-
-
- );
-};
-
-export default ButtonPage;
diff --git a/develop/components/pages/CarouselPage.tsx b/develop/components/pages/CarouselPage.tsx
deleted file mode 100644
index ea8e10e61..000000000
--- a/develop/components/pages/CarouselPage.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from "react";
-import { Carousel, CarouselItem } from "../../../src/Carousel/Carousel";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Carousel/readme.md");
-
-const firstImg: string = require("../../assets/images/cat-pet-animal-1.jpeg");
-const secondImg: string = require("../../assets/images/cat-pet-animal-2.jpg");
-const thirdImg: string = require("../../assets/images/cat-pet-animal-3.jpg");
-
-const CarouselPage: React.FunctionComponent = () => {
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
- {
- console.log("changed");
- }}
- autoPlay={true}
- infinite={true}
- />
-
-
-
-
- );
-};
-
-const carouselList: Array = [
- {
- title: "Ipsum consequat nisl",
- desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
- image: firstImg,
- },
- {
- title: "Interdum velit euismod",
- desc: "Lectus quam id leo in",
- image: secondImg,
- },
- {
- title: "Risus in hendrerit",
- desc: "Augue eget arcu dictum varius",
- image: thirdImg,
- },
-];
-
-export default CarouselPage;
diff --git a/develop/components/pages/ChartPage.tsx b/develop/components/pages/ChartPage.tsx
deleted file mode 100644
index d5fab0e42..000000000
--- a/develop/components/pages/ChartPage.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from "react";
-import { Chart, ExtendedChartOptions } from "../../../src/Chart/Chart";
-import { ChartData, ChartOptions } from "chart.js";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Chart/readme.md");
-
-const ChartPage: React.FunctionComponent = () => {
- function randomScalingFactor() {
- return Math.round(Math.random() * 100);
- }
-
- const data: ChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [
- {
- label: "My First dataset",
- data: [65, 59, 80, 81, 56, 55, 40],
- backgroundColor: "rgba(255,99,132,0.5)",
- },
- ],
- };
-
- const pieData: ChartData = {
- datasets: [
- {
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- backgroundColor: ["#ff6384", "#36a2eb", "#cc65fe", "#ffce56"],
- label: "Pie Dataset 1",
- },
- ],
- labels: ["value 1", "value 2", "value 3", "value 4"],
- };
-
- const options: ChartOptions = {
- responsive: true,
- maintainAspectRatio: false,
- };
-
- const optionsAnnotation: ExtendedChartOptions = {
- responsive: true,
- maintainAspectRatio: false,
- annotation: {
- annotations: [
- {
- drawTime: "afterDraw", // overrides annotation.drawTime if set
- type: "line",
- id: "a-line-1", // optional
- mode: "vertical",
- scaleID: "y-axis-0",
- value: 25,
- borderColor: "#406980",
- borderWidth: 2,
- label: {
- fontStyle: "normal",
- fontSize: "14",
- backgroundColor: "#406980",
- position: "top",
- content: "Annotaion",
- enabled: true,
- },
- },
- ],
- },
- };
-
- return (
-
-
-
-
-
-
Output
-
-
Here are sample outputs pie chart
-
- {
- console.log("On cliking on chart", e);
- }}
- />
-
-
-
Here are sample outputs line chart
-
- {
- console.log("On cliking on chart", e);
- }}
- />
-
-
-
Here are sample outputs bar chart
-
-
-
-
-
Here are sample outputs bar chart
-
-
-
-
-
-
- );
-};
-
-export default ChartPage;
diff --git a/develop/components/pages/CheckBoxPage.tsx b/develop/components/pages/CheckBoxPage.tsx
deleted file mode 100644
index 0cadaab4e..000000000
--- a/develop/components/pages/CheckBoxPage.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from "react";
-import { CheckBox } from "../../../src/CheckBox/CheckBox";
-import { Tabs } from "../../../src/Tabs/Tabs";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/CheckBox/readme.md");
-
-const CheckBoxPage: React.FunctionComponent = () => {
- const [checkbox1, setCheckbox1] = React.useState(true);
- const [checkbox2, setCheckbox2] = React.useState(false);
- const [checkbox3, setCheckbox3] = React.useState(true);
- const [tabValue, setTabValue] = React.useState(0);
-
- const [input, setInput] = React.useState("");
-
- return (
-
-
-
-
-
-
Output
-
Here are few checkboxes with different configurations:
-
-
- ) => setCheckbox1(e.target.checked)}
- condensed={tabValue === 1}
- inline={tabValue === 2}
- />
- ) => setCheckbox2(e.target.checked)}
- condensed={tabValue === 1}
- inline={tabValue === 2}
- description="Some description"
- />
- ) => setCheckbox3(e.target.checked)}
- condensed={tabValue === 1}
- inline={tabValue === 2}
- disabled={true}
- />
-
-
-
-
- );
-};
-
-export default CheckBoxPage;
diff --git a/develop/components/pages/ChipPage.tsx b/develop/components/pages/ChipPage.tsx
deleted file mode 100644
index ee664c0c0..000000000
--- a/develop/components/pages/ChipPage.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-import { Chip } from "../../../src/Chip/Chip";
-import Highlight from "react-highlight";
-import { Button } from "../../../src/Button/Button";
-import { loremIpsum } from "lorem-ipsum";
-const docMD: string = require("../../../src/Chip/readme.md");
-
-const generateWord = () => loremIpsum({ units: "words", count: 1 });
-
-const ChipPage: React.FunctionComponent = () => {
- const [chips, setChips] = React.useState>([generateWord()]);
-
- const closeChip: (index: number) => void = React.useCallback(
- (index: number) => {
- const newChips: Array = [...chips];
- newChips.splice(index, 1);
- setChips(newChips);
- },
- [chips, setChips]
- );
-
- const addChip: VoidFunction = React.useCallback(() => {
- setChips([...chips, generateWord()]);
- }, [chips, setChips]);
-
- return (
-
-
-
-
-
-
Output
-
- {chips.map((chip: string, i: number) => (
- closeChip(i)}>
- {chip}
-
- ))}
-
-
-
Options
-
-
-
-
-
-
- );
-};
-
-export default ChipPage;
diff --git a/develop/components/pages/DatepickerPage.tsx b/develop/components/pages/DatepickerPage.tsx
deleted file mode 100644
index a552818d1..000000000
--- a/develop/components/pages/DatepickerPage.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from "react";
-import { Datepicker } from "../../../src/Datepicker/Datepicker";
-import * as moment from "moment";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Datepicker/readme.md");
-
-const moreIcon: JSX.Element = (
-
-
-
-);
-
-const minDate: Date = moment().subtract(30, "years").toDate();
-const maxDate: Date = moment().add(8, "years").toDate();
-
-const DatepickerPage: React.FunctionComponent = () => {
- const [datepicker, setDatepicker] = React.useState(new Date());
- const [datepicker2, setDatepicker2] = React.useState(new Date());
- const [datepicker3, setDatepicker3] = React.useState(new Date());
- const [datepicker4, setDatepicker4] = React.useState(new Date());
-
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
-
-
-
-
With custom locale
-
-
-
-
-
With custom custom calendar icon and clearable
-
-
-
-
-
Month picker
-
-
-
-
-
Disabled
-
-
-
-
-
-
- );
-};
-
-export default DatepickerPage;
diff --git a/develop/components/pages/DialoguePage.tsx b/develop/components/pages/DialoguePage.tsx
deleted file mode 100644
index 1aaccf15b..000000000
--- a/develop/components/pages/DialoguePage.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react";
-import { Dialogue } from "../../../src/Dialogue/Dialogue";
-import { Button } from "../../../src/Button/Button";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Dialogue/readme.md");
-
-const DialoguePage: React.FunctionComponent = () => {
- const [dialogue, setDialogue] = React.useState(false);
-
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
- setDialogue(true)} />
- setDialogue(false)}
- primaryAction={() => setDialogue(false)}
- enableCloseButton
- enableBackdropDismiss
- onDismiss={() => setDialogue(false)}
- />
-
-
-
-
- );
-};
-
-export default DialoguePage;
diff --git a/develop/components/pages/DropdownPage.tsx b/develop/components/pages/DropdownPage.tsx
deleted file mode 100644
index 20a4e2a44..000000000
--- a/develop/components/pages/DropdownPage.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from "react";
-import { Dropdown, DropdownItem } from "../../../src/Dropdown/Dropdown";
-import { Toggle } from "../../../src/Toggle/Toggle";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Dropdown/readme.md");
-
-const DropdownPage: React.FunctionComponent = () => {
- const [dropDownList1Selected, setDropdownList1Selected] = React.useState(null);
- const [dropDownList2Selected, setDropdownList2Selected] = React.useState>([]);
- const [dropDownList3Selected, setDropdownList3Selected] = React.useState(null);
- const [dropDownList4Selected, setDropdownList4Selected] = React.useState(null);
- const [dropDownList5Selected, setDropdownList5Selected] = React.useState>([]);
- const [disabled, setDisabled] = React.useState(false);
- const [error, setError] = React.useState("");
-
- const handleToggleError = React.useCallback(() => {
- setError((currentError) => (currentError === "" ? "Example error message" : ""));
- }, [setError]);
-
- return (
-
-
-
-
-
-
Output
-
Here is the basic one:
-
- setDropdownList1Selected(value)}
- disabled={disabled}
- error={error}
- />
-
-
-
Here is the multi select one with search:
-
- ) => setDropdownList2Selected(value)}
- searchable={true}
- placeholder="Multi option"
- multi={true}
- disabled={disabled}
- error={error}
- />
-
-
-
Here is the more button version:
-
- setDropdownList3Selected(value)}
- more={true}
- disabled={disabled}
- error={error}
- />
-
-
-
Here is the native version:
-
- ) => {
- setDropdownList4Selected({ value: e.target.value, label: dropDownList4[e.target.selectedIndex].label });
- }}
- native={true}
- disabled={disabled}
- error={error}
- />
- ) => {
- if (e && e.currentTarget.selectedOptions) {
- const values: Array = [];
- let option: HTMLOptionElement;
- for (let i = 0; i < e.currentTarget.selectedOptions.length; i++) {
- option = e.currentTarget.selectedOptions[i];
- values.push({ label: option.label, value: option.value });
- }
- setDropdownList5Selected(values);
- }
- }}
- multi={true}
- native={true}
- disabled={disabled}
- error={error}
- />
-
-
-
- setDisabled(e.target.checked)} />
-
-
-
-
-
- );
-};
-
-const dropDownList1: Array = [
- { value: "1", label: "Serbia" },
- { value: "2", label: "Nicaragua" },
- { value: "3", label: "Singapore" },
- { value: "4", label: "Guinea" },
- { value: "5", label: "Syrian Arab Republic" },
- { value: "6", label: "Tanzania" },
- { value: "7", label: "Anguilla" },
-];
-const dropDownList2: Array = [
- { value: "1", label: "Mexico" },
- { value: "2", label: "Guernsey" },
- { value: "3", label: "Lithuania" },
- { value: "4", label: "Poland" },
- { value: "5", label: "Montenegro" },
- { value: "6", label: "Iran" },
- { value: "7", label: "Myanmar" },
-];
-const dropDownList3: Array = [
- { value: "1", label: "Paraguay" },
- { value: "2", label: "Dominican Republic" },
- { value: "3", label: "Mongolia" },
- { value: "4", label: "Montserrat" },
- { value: "5", label: "Thailand" },
- { value: "6", label: "Japan" },
- { value: "7", label: "Saint Vincent and the Grenadines" },
-];
-const dropDownList4: Array = [
- { value: "1", label: "Sierra Leone" },
- { value: "2", label: "Malawi" },
- { value: "3", label: "Marshall Islands" },
- { value: "4", label: "Latvia" },
- { value: "5", label: "Slovenia" },
- { value: "6", label: "Argentina" },
- { value: "7", label: "Solomon Islands" },
-];
-
-export default DropdownPage;
diff --git a/develop/components/pages/IconPage.tsx b/develop/components/pages/IconPage.tsx
deleted file mode 100644
index 21191230c..000000000
--- a/develop/components/pages/IconPage.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from "react";
-import { Icon } from "../../../src/Icon/Icon";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Icon/readme.md");
-
-const mySvg: JSX.Element = (
-
- regular_black
-
-
-
-
-
-);
-
-const IconPage: React.FunctionComponent = () => {
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
-
-
-
-
-
- );
-};
-
-export default IconPage;
diff --git a/develop/components/pages/ImageCropperPage.tsx b/develop/components/pages/ImageCropperPage.tsx
deleted file mode 100644
index 5f47710f5..000000000
--- a/develop/components/pages/ImageCropperPage.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from "react";
-import { ImageCropper, OptionProps } from "../../../src/ImageCropper";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/ImageCropper/readme.md");
-
-const ImageCropperPage: React.FunctionComponent = () => {
- const [cropResult, setCropResult] = React.useState("");
-
- return (
-
-
-
-
-
Output
-
Here is sample output
-
- setCropResult(croppedData)} />
-
-
-
-
- );
-};
-
-const cropperConfigs: OptionProps = {
- preview: ".image-preview",
- checkCrossOrigin: false,
- guides: false,
- responsive: true,
- zoomable: false,
- aspectRatio: 1 / 1,
- rotatable: false,
-};
-
-export default ImageCropperPage;
diff --git a/develop/components/pages/ImagePage.tsx b/develop/components/pages/ImagePage.tsx
deleted file mode 100644
index 0058738d6..000000000
--- a/develop/components/pages/ImagePage.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from "react";
-import { Image } from "../../../src/Image/Image";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Image/readme.md");
-const imgSrc: string = require("../../assets/images/cat-pet-animal-1.jpeg");
-
-const ImagePage: React.FunctionComponent = () => {
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs using "div" tag (default)
-
-
-
-
-
Here are sample outputs using "img" tag
-
-
-
-
-
-
- );
-};
-
-export default ImagePage;
diff --git a/develop/components/pages/InlineLinkPage.tsx b/develop/components/pages/InlineLinkPage.tsx
deleted file mode 100644
index ebccac537..000000000
--- a/develop/components/pages/InlineLinkPage.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from "react";
-import { InlineLink } from "../../../src/InlineLink/InlineLink";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/InlineLink/readme.md");
-
-const InlineLinkPage: React.FunctionComponent = () => {
- return (
-
-
-
-
-
-
Output
-
Here is a sample output
-
-
- alert("Redirect or do some other action")}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
-
-
- );
-};
-
-export default InlineLinkPage;
diff --git a/develop/components/pages/LoaderPage.tsx b/develop/components/pages/LoaderPage.tsx
deleted file mode 100644
index 5bb8b01f5..000000000
--- a/develop/components/pages/LoaderPage.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import * as React from "react";
-import { Loader } from "../../../src/Loader/Loader";
-import { Button } from "../../../src/Button/Button";
-import { TextBoxGroup } from "../../../src/TextBoxGroup/TextBoxGroup";
-
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Loader/readme.md");
-const mysvg: JSX.Element = (
-
- regular_black
-
-
-
-);
-
-const LoaderPage: React.FunctionComponent = () => {
- const [textBox1, setTextBox1] = React.useState("Text box group with loader");
- return (
-
-
-
-
-
-
Output
-
-
Here is a sample tiny example
-
-
-
-
-
-
Here is a sample default example
-
-
-
-
-
-
Here is a sample large example
-
-
-
-
-
-
Here is a sample in primary button
-
- null} theme="primary">
-
-
-
-
-
Here is a sample in primary button with icon left
-
- null}>
-
-
-
-
-
Here is a sample in secondary with icon right
-
- null}>
-
-
-
-
-
Here is a sample input field
-
- ) => setTextBox1(e.target.value)}
- rightIcon={ }
- disabled={true}
- />
-
-
-
-
- );
-};
-
-type SampleContainerProps = {
- height: number | string;
- width?: number | string;
- text: string;
-};
-
-const SampleContainer: React.FC = (props: SampleContainerProps) => (
-
-
-
- {props.text}
-
-
-);
-
-export default LoaderPage;
diff --git a/develop/components/pages/ModalPage.tsx b/develop/components/pages/ModalPage.tsx
deleted file mode 100644
index 0776c70f6..000000000
--- a/develop/components/pages/ModalPage.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from "react";
-import { Button } from "../../../src/Button/Button";
-import { Modal, ModalProps } from "../../../src/Modal/Modal";
-import Highlight from "react-highlight";
-import { RadioGroup, RadioListModel } from "../../../src/RadioGroup/RadioGroup";
-const docMD: string = require("../../../src/Modal/readme.md");
-
-const initialState: ModalProps = {
- toggle: false,
- fullscreen: false,
- position: null,
- centered: false,
- size: null,
- disableBackdropDismiss: false,
- onDismiss: null,
-};
-
-const ModalPage: React.FC = React.memo(() => {
- const [modalProps, setModalProps] = React.useState({ ...initialState });
- const [radioListSelected, setRadioListSelected] = React.useState("second");
-
- const openModal = React.useCallback(
- (e: React.MouseEvent, props: Partial = {}) => {
- setModalProps({ ...initialState, ...props, toggle: true });
- },
- [modalProps]
- );
-
- const onDismiss = React.useCallback(() => setModalProps({ ...modalProps, toggle: false }), [modalProps]);
-
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
-
Modal
-
-
Modal without backdrop dismiss
-
openModal(e, { disableBackdropDismiss: true })} />
- Modal Size
-
- openModal(e, { size: "modal-lg" })} />
- openModal(e, { size: "modal-sm" })} />
-
- Vertically Centered
- openModal(e, { centered: true })} />
- Aside Modal
-
- openModal(e, { position: "left" })} />
- openModal(e, { position: "right" })} />
-
- Aside Large Modal
-
- openModal(e, { position: "left", size: "modal-lg" })} />
- openModal(e, { position: "right", size: "modal-lg" })} />
-
- Fullscreen modal
- openModal(e, { fullscreen: true })} />
- Header}
- body={
-
-
This is the body
-
-
) => setRadioListSelected(e.target.value)}
- />
- {modalProps.size && modalProps.position && }
-
- }
- footer={ }
- ariaLabel="My Label"
- ariaDescribedby="My Description"
- />
-
-
-
-
- );
-});
-
-const radioList: Array = [
- { value: "first", label: "Radio 1" },
- { value: "second", label: "Radio 2" },
- { value: "third", label: "Radio 3" },
-];
-
-export default ModalPage;
diff --git a/develop/components/pages/NotificationPage.tsx b/develop/components/pages/NotificationPage.tsx
deleted file mode 100644
index bc103b9af..000000000
--- a/develop/components/pages/NotificationPage.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from "react";
-import { Notification, NotificationAction } from "../../../src/Notification/Notification";
-import { Button } from "../../../src/Button/Button";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Notification/readme.md");
-
-const NotificationPage: React.FunctionComponent = () => {
- const [notification1Toggle, setNotification1Toggle] = React.useState(false);
- const [notification2Toggle, setNotification2Toggle] = React.useState(false);
- const [notification3Toggle, setNotification3Toggle] = React.useState(false);
-
- const description: string = "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.";
- const notificationActions: Array = [
- { text: "Yes, I'm in", action: () => setNotification2Toggle(false) },
- { text: "Ignore", action: () => setNotification2Toggle(false) },
- ];
-
- return (
-
-
-
-
-
-
Output
-
Here is a sample output
-
- {
- console.log("Notification clicked");
- }}
- dismissable={true}
- onDismiss={() => setNotification1Toggle(false)}
- />
- setNotification1Toggle(!notification1Toggle)} />
-
-
Notification with actions
-
- setNotification2Toggle(false)}
- persist={true}
- position="bottom-right"
- theme="primary"
- />
- setNotification2Toggle(!notification2Toggle)} />
-
-
Bar notification
-
-
{
- console.log("Notification clicked");
- }}
- dismissable={true}
- onDismiss={() => setNotification3Toggle(false)}
- style="bar"
- position="bottom"
- theme="danger"
- >
-
- {description && (
- {
- e.stopPropagation();
- console.log("Link Clicked");
- }}
- >
- Click here
-
- )}
-
-
-
setNotification3Toggle(!notification3Toggle)} />
-
-
-
-
- );
-};
-
-export default NotificationPage;
diff --git a/develop/components/pages/PaginationPage.tsx b/develop/components/pages/PaginationPage.tsx
deleted file mode 100644
index 7a0eecfd1..000000000
--- a/develop/components/pages/PaginationPage.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from "react";
-import { Pagination } from "../../../src/Pagination/Pagination";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Pagination/readme.md");
-
-const PaginationPage: React.FunctionComponent = () => {
- const [pagination, setPagination] = React.useState(1);
- const [pagination2, setPagination2] = React.useState(1);
- const [dotnav, setDotnav] = React.useState(1);
-
- return (
-
-
-
-
-
-
Output
-
-
Here are sample outputs
-
-
-
- With first and last enabled
-
-
-
-
Here are sample outputs of DotNav: {dotnav}
-
-
-
-
- );
-};
-
-export default PaginationPage;
diff --git a/develop/components/pages/ProgressBarPage.tsx b/develop/components/pages/ProgressBarPage.tsx
deleted file mode 100644
index d8bd64e19..000000000
--- a/develop/components/pages/ProgressBarPage.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from "react";
-import { ProgressBar, ProgressBarProps } from "../../../src/ProgressBar/ProgressBar";
-import { RouteComponentProps } from "react-router";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/ProgressBar/readme.md");
-
-interface ProgressBarPageState {
- progress: number;
-}
-
-class ProgressBarPage extends React.Component {
- timerRef: any;
-
- constructor(props: RouteComponentProps) {
- super(props);
-
- this.state = {
- progress: 1,
- };
- }
-
- simulateProgress(): void {
- if (this.timerRef) {
- clearInterval(this.timerRef);
- }
- this.setState({ progress: 0 }, () => {
- this.timerRef = setInterval((): void => {
- if (this.state.progress < 100) {
- this.setState({ progress: this.state.progress + 1 });
- } else {
- clearInterval(this.timerRef);
- }
- }, 100);
- });
- }
-
- componentDidMount(): void {
- this.simulateProgress();
- }
-
- componentWillUnmount() {
- if (this.timerRef) {
- clearInterval(this.timerRef);
- }
- }
-
- render() {
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
-
-
Progress bar with percentage
-
-
-
-
- );
- }
-}
-
-export default ProgressBarPage;
diff --git a/develop/components/pages/RadioButtonPage.tsx b/develop/components/pages/RadioButtonPage.tsx
deleted file mode 100644
index 970f5cfd3..000000000
--- a/develop/components/pages/RadioButtonPage.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from "react";
-import { RadioButton } from "../../../src/RadioButton/RadioButton";
-import { Tabs } from "../../../src/Tabs/Tabs";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/RadioButton/readme.md");
-
-const RadioButtonPage: React.FunctionComponent = () => {
- const [radioListSelected, setRadioListSelected] = React.useState("third");
- const [tabValue, setTabValue] = React.useState(0);
-
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs, here is selected value: {radioListSelected}
-
- setTabValue(index)} list={[{ text: "Normal" }, { text: "Condensed" }, { text: "Inline" }]} />
- setRadioListSelected(value)}
- condensed={tabValue === 1}
- inline={tabValue === 2}
- />
-
- setRadioListSelected(value)}
- condensed={tabValue === 1}
- inline={tabValue === 2}
- description="Some description"
- />
-
- setRadioListSelected(value)}
- disabled={true}
- condensed={tabValue === 1}
- inline={tabValue === 2}
- description="Disabled"
- />
-
-
-
-
- );
-};
-
-export default RadioButtonPage;
diff --git a/develop/components/pages/RadioGroupPage.tsx b/develop/components/pages/RadioGroupPage.tsx
deleted file mode 100644
index d4ea6fbde..000000000
--- a/develop/components/pages/RadioGroupPage.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from "react";
-import { RadioGroup, RadioListModel } from "../../../src/RadioGroup/RadioGroup";
-import { Tabs } from "../../../src/Tabs/Tabs";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/RadioGroup/readme.md");
-
-const RadioGroupPage: React.FunctionComponent = () => {
- const [radioListSelected, setRadioListSelected] = React.useState("second");
- const [tabValue, setTabValue] = React.useState(0);
-
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs, here is selected value: {radioListSelected}
-
- setTabValue(index)} list={[{ text: "Normal" }, { text: "Condensed" }, { text: "Inline" }]} />
- ) => setRadioListSelected(e.target.value)}
- condensed={tabValue === 1}
- inline={tabValue === 2}
- />
-
-
-
-
- );
-};
-
-const radioList: Array = [
- { value: "first", label: "Radio 1" },
- { value: "second", label: "Radio 2", description: "Some description" },
- { value: "third", label: "Radio 3", description: "Disabled", disabled: true },
-];
-
-export default RadioGroupPage;
diff --git a/develop/components/pages/RatingPage.tsx b/develop/components/pages/RatingPage.tsx
deleted file mode 100644
index 3a4c51d98..000000000
--- a/develop/components/pages/RatingPage.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from "react";
-import { Rating } from "../../../src/Rating/Rating";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Rating/readme.md");
-
-const RatingPage: React.FunctionComponent = () => {
- const [rating, setRating] = React.useState(3.5);
-
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs, selected value: {rating}
-
- setRating(value)} tooltipList={["Very Poor", "Poor", "Average", "Very Good", "Excellent"]} />
-
-
-
Disabled
-
- setRating(value)} disabled={true} />
-
-
-
-
- );
-};
-
-export default RatingPage;
diff --git a/develop/components/pages/SliderPage.tsx b/develop/components/pages/SliderPage.tsx
deleted file mode 100644
index 7d9bcc6f0..000000000
--- a/develop/components/pages/SliderPage.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import * as React from "react";
-import { Slider, RangeSliderLabel, SliderTheme, SliderProps, SliderAppearance } from "../../../src/Slider/Slider";
-import { TextBoxGroup } from "../../../src/TextBoxGroup/TextBoxGroup";
-import { RadioListModel, RadioGroup } from "../../../src/RadioGroup/RadioGroup";
-import { CheckBox } from "../../../src/CheckBox/CheckBox";
-import { TextBox } from "../../../src/TextBox/TextBox";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Slider/readme.md");
-
-const SliderPage: React.FunctionComponent = () => {
- return (
-
- );
-};
-
-const SliderDocs: React.FunctionComponent = React.memo(() => {
- return (
-
- );
-});
-
-type SliderPageProps = {};
-
-interface SliderPageState {
- slider: number;
- theme: SliderTheme;
- tooltipTheme: SliderTheme;
- appearance: SliderAppearance;
- disabled: boolean;
- hasError: boolean;
- hasLabels: boolean;
- showTicks: boolean;
- alwaysShowTooltip: boolean;
- withInput: boolean;
- withInputError: string;
- min: number;
- minInputError: string;
- max: number;
- maxInputError: string;
- step: number;
- stepInputError: string;
- sliderLabels: Array;
-}
-
-const SliderPageStateNames: { [K in keyof SliderPageState]: keyof SliderPageState } = {
- slider: "slider",
- theme: "theme",
- tooltipTheme: "tooltipTheme",
- appearance: "appearance",
- disabled: "disabled",
- hasError: "hasError",
- hasLabels: "hasLabels",
- showTicks: "showTicks",
- alwaysShowTooltip: "alwaysShowTooltip",
- withInput: "withInput",
- withInputError: "withInputError",
- min: "min",
- minInputError: "minInputError",
- max: "max",
- maxInputError: "maxInputError",
- step: "step",
- stepInputError: "stepInputError",
- sliderLabels: "sliderLabels",
-};
-
-class SliderExamples extends React.Component {
- themeList: Array> = [
- { label: "Danger", value: "danger" },
- { label: "Inverted", value: "inverted" },
- { label: "Primary", value: "primary" },
- { label: "Purple", value: "purple" },
- { label: "Success", value: "success" },
- { label: "Warning", value: "warning" },
- ];
-
- appearanceList: Array> = [
- { label: "Normal (new default)", value: "normal" },
- { label: "Alternative (old default)", value: "alternative" },
- ];
-
- constructor(props: SliderPageProps) {
- super(props);
-
- this.state = {
- appearance: "normal",
- slider: 25,
- theme: "primary",
- tooltipTheme: "inverted",
- disabled: false,
- hasError: false,
- hasLabels: false,
- showTicks: false,
- alwaysShowTooltip: false,
- withInput: false,
- withInputError: "",
- min: 0,
- minInputError: "",
- max: 100,
- maxInputError: "",
- step: 1,
- stepInputError: "",
- sliderLabels: [],
- };
-
- this.onFormChange = this.onFormChange.bind(this);
- }
-
- /**
- * Generates labels for the slider
- * @returns {Array {
- const size: number = Math.abs(max > min ? max - min : min - max);
- const middle: number = min + Math.ceil(size / 2);
- const list: Array = [
- { text: String(min), position: min },
- { text: String(middle), position: middle },
- { text: String(max), position: max },
- ];
- if ((min !== 0 && min < 0 && max > 0) || (max !== 0 && max > 0 && min < 0)) {
- list[1].position !== 0 && list.push({ text: "0", position: 0 });
- }
- return list;
- }
-
- onFormChange(e: React.ChangeEvent): void {
- const newState: Partial = {};
- let sliderLabels: Array;
- const { name, type, value, checked } = e.target;
- const min: number = name === SliderPageStateNames.min ? Number(value) || 0 : this.state.min;
- const max: number = name === SliderPageStateNames.max ? Number(value) || 100 : this.state.max;
- switch (type) {
- case "checkbox":
- newState[name] = checked;
- break;
- case "range":
- newState[name] = Number(value) || 0;
- break;
- case "number":
- newState[name] = Number(value) || value;
- break;
- default:
- newState[name] = value;
- }
- if ([SliderPageStateNames.min, SliderPageStateNames.max, SliderPageStateNames.hasLabels].indexOf(name as any) !== -1) {
- const hasLabels = name === SliderPageStateNames.hasLabels ? value : this.state.hasLabels;
- sliderLabels = hasLabels ? this.generateLabels(min, max) : [];
- sliderLabels && (newState.sliderLabels = sliderLabels);
- }
- if (name === SliderPageStateNames.slider) {
- if (newState[name] < min) {
- newState.withInputError = "Cannot be less the minimum";
- } else if (newState[name] > max) {
- newState.withInputError = "Cannot exceeded the maximum";
- } else {
- newState.withInputError = "";
- }
- }
- this.setState(newState as any);
- }
-
- render() {
- return (
- <>
-
-
Output
-
- {this.state.withInput && (
-
-
- Select a value
-
-
-
-
-
- )}
-
-
-
-
Options
-
-
-
- >
- );
- }
-}
-
-export default SliderPage;
diff --git a/develop/components/pages/StepTrackerPage.tsx b/develop/components/pages/StepTrackerPage.tsx
deleted file mode 100644
index 0888a68db..000000000
--- a/develop/components/pages/StepTrackerPage.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from "react";
-import { StepTracker } from "../../../src/StepTracker/StepTracker";
-import Highlight from "react-highlight";
-const docMD = require("../../../src/StepTracker/readme.md");
-
-const StepTrackerPage: React.FunctionComponent = () => {
- const [stepTracker, setStepTracker] = React.useState(1);
-
- return (
-
-
-
-
-
-
Output
-
-
Here is an example of a horizontal step tracker:
-
- setStepTracker(index)} />
-
-
-
Here is an example of a vertical step tracker:
-
- setStepTracker(index)} />
-
-
-
-
- );
-};
-
-const stepList: Array = ["Getting Started", "Personal Information", "Account Information", "Finish"];
-
-export default StepTrackerPage;
diff --git a/develop/components/pages/StepperPage.tsx b/develop/components/pages/StepperPage.tsx
deleted file mode 100644
index 93df3d080..000000000
--- a/develop/components/pages/StepperPage.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from "react";
-import { Stepper } from "../../../src/Stepper/Stepper";
-import Highlight from "react-highlight";
-const docMD = require("../../../src/Stepper/readme.md");
-
-const StepperPage: React.FunctionComponent = () => {
- const [stepper, setStepper] = React.useState(1);
-
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
- setStepper(stepper + 1)} onDecrease={() => setStepper(stepper - 1)} />
-
-
- setStepper(stepper + 1)} onDecrease={() => setStepper(stepper - 1)} disabled={true} />
-
-
-
-
- );
-};
-
-export default StepperPage;
diff --git a/develop/components/pages/TablePage.tsx b/develop/components/pages/TablePage.tsx
deleted file mode 100644
index c970537fb..000000000
--- a/develop/components/pages/TablePage.tsx
+++ /dev/null
@@ -1,375 +0,0 @@
-import * as React from "react";
-import { Table, Column, TableRow, PrimaryActionButton, ActionLinkItem, TableHeader, DataItem, FilterItem, FilterProps, EditProps, EditMode } from "../../../src/Table/Table";
-import makeData from "../../__utils/makeData";
-import { Pagination } from "../../../src/Pagination/Pagination";
-import { Dropdown, DropdownItem } from "../../../src/Dropdown/Dropdown";
-import { TextBox } from "../../../src/TextBox/TextBox";
-import { Button } from "../../../src/Button/Button";
-import Highlight from "react-highlight";
-import { Chip } from "../../../src/Chip/Chip";
-const docMD = require("../../../src/Table/readme.md");
-
-interface TableDataProps {
- id: string;
- firstName: string;
- lastName: string;
- age: number;
- visits: number;
- progress: number;
- status: string;
-}
-
-const TablePage: React.FunctionComponent = () => {
- const [paginationValue, setPagination] = React.useState(1);
- const [paginationValue1, setPagination1] = React.useState(1);
- const [dropDownList1Selected, setDropdownList1Selected] = React.useState>([]);
- const [statusDropdownSelected, setStatusDropdownSelected] = React.useState>([]);
- const [ageDropdownSelected, setAgeDropdownSelected] = React.useState>([]);
- const [blackListDropdownSelected, setBlacklisteDropdownSelected] = React.useState>([]);
- const [textBoxValue2, setTextBoxValue2] = React.useState("");
- const [searchTriggered, setSearchTriggered] = React.useState(false);
- const [editMode, setEditMode] = React.useState(null);
- const [editableColumns, setEditableColumns] = React.useState>([
- {
- label: "id",
- accessor: "id",
- canSort: false,
- },
- {
- label: "First Name",
- accessor: "firstName",
- },
- {
- label: "Last Name",
- accessor: "lastName",
- },
- {
- label: "Age",
- accessor: "age",
- },
- {
- label: "Visits",
- accessor: "visits",
- },
- {
- label: "Profile Progress",
- accessor: "progress",
- },
- {
- label: "Status",
- accessor: "status",
- },
- ]);
-
- const columns: Array = React.useMemo(
- () => [
- {
- label: "id",
- accessor: "id",
- canSort: false,
- },
- {
- label: "First Name",
- accessor: "firstName",
- },
- {
- label: "Last Name",
- accessor: "lastName",
- },
- {
- label: "Age",
- accessor: "age",
- },
- {
- label: "Visits",
- accessor: "visits",
- },
- {
- label: "Profile Progress",
- accessor: "progress",
- },
- {
- label: "Status",
- accessor: "status",
- },
- ],
- []
- );
-
- const [filters, setFilters] = React.useState>(columns.map((column: Column) => ({ accessor: column.accessor, filters: [] })));
-
- React.useEffect(() => {
- const isBlackListed: (c: string) => boolean = (accessor: string) => blackListDropdownSelected?.some((item: DropdownItem) => item.value === accessor);
- const updateColumns: Array = editableColumns?.map((column: Column) => {
- if (isBlackListed(column?.accessor)) {
- return { ...column, isHidden: true };
- }
-
- return { ...column, isHidden: false };
- });
-
- setEditableColumns(updateColumns);
- }, [blackListDropdownSelected]);
-
- React.useEffect(() => {
- const updatedFilter: Array = statusDropdownSelected?.map((item: DropdownItem) => item.value);
- const updatedFilterItems: Array = filters?.map((filterItem: FilterItem) => {
- if (filterItem.accessor === "status") {
- return { ...filterItem, filters: updatedFilter };
- }
- return filterItem;
- });
- setFilters(updatedFilterItems);
- }, [statusDropdownSelected]);
-
- React.useEffect(() => {
- const updatedFilter: Array = ageDropdownSelected?.map((item: DropdownItem) => item.value);
- const updatedFilterItems: Array = filters?.map((filterItem: FilterItem) => {
- if (filterItem.accessor === "age") {
- return { ...filterItem, filters: updatedFilter };
- }
- return filterItem;
- });
-
- setFilters(updatedFilterItems);
- }, [ageDropdownSelected]);
-
- const pageSize: number = 10;
- const listSize: number = 30;
-
- const primaryButton: PrimaryActionButton = {
- label: "Buy",
- onClick: (e: React.MouseEvent, selectedRow: TableRow) => {},
- };
-
- const actionLinks: Array = [
- { label: "Add", onClick: (event: React.MouseEvent, selectedRow: TableRow) => {} },
- { label: "Edit", onClick: (event: React.MouseEvent, selectedRow: TableRow) => {} },
- ];
-
- const filterProps: FilterProps = {
- onAfterFilter: (rows: Array) => {},
- filterItems: filters,
- };
-
- const editProps: EditProps = {
- onAfterEdit: (rows: Array) => {
- setEditMode(null);
- },
- mode: editMode,
- blackListedAccessors: ["firstName"],
- };
-
- const data: Array> = React.useMemo(
- () => makeData>>([listSize, 5]),
- []
- );
-
- const smallData: Array> = React.useMemo(() => makeData>>([5, 5], true), []);
-
- const smallEditableData: Array> = React.useMemo(
- () => makeData>>([5, 5]),
- []
- );
-
- const statusDropDownList: Array = React.useMemo(
- () =>
- smallData
- .map((data: DataItem) => ({ value: data.status, label: data.status }))
- .filter((item: DropdownItem, index: number, self: Array) => {
- const selfIndex: number = self.findIndex((filter: DropdownItem) => filter.value === item.value);
- return selfIndex === index;
- })
- .sort(),
- []
- );
-
- const ageDropDownList: Array = React.useMemo(
- () =>
- smallData
- .map((data: DataItem) => ({ value: data.age, label: String(data.age) }))
- .filter((item: DropdownItem, index: number, self: Array) => {
- const selfIndex: number = self.findIndex((filter: DropdownItem) => filter.value === item.value);
- return selfIndex === index;
- })
- .sort(),
- []
- );
-
- const columnsDropDownList: Array = React.useMemo(() => columns.map((column: Column) => ({ value: column.accessor, label: column.label as string })).sort(), []);
-
- return (
-
-
-
-
-
-
Output
-
-
Here are sample outputs of plain table
-
-
-
Here an example with sorting
-
-
, sortByColumn: TableHeader) => {},
- }}
- />
-
-
- Here are sample outputs with hidden columns
-
-
-
- ) => setBlacklisteDropdownSelected(value)}
- multi={true}
- />
-
-
-
-
-
- Here an example with pagination
-
-
- Here is an example with expandable subrows and rowDetails
-
-
) => {}} />
-
-
- Here is an example with row selection
-
-
) => {}} />
-
-
- Here is an example with inline edit
-
-
-
- setEditMode("cancel")} className="mr-2" />
- setEditMode(editMode === "edit" ? "save" : "edit")} />
-
-
-
) => {}} onRowExpanded={(rows: Array) => {}} editProps={editProps} />
-
-
- Here is an example with row selection and subRows
-
-
) => {}} onRowExpanded={(rows: Array) => {}} />
-
-
- Here is an example with actions column
-
-
- Here is an example with filter
-
-
-
- ) => setStatusDropdownSelected(value)} multi={true} />
-
-
- ) => setAgeDropdownSelected(value)} multi={true} />
-
-
-
-
- {statusDropdownSelected.map((status: DropdownItem) => {
- return (
-
- {status.label}
-
- );
- })}
-
- {ageDropdownSelected.map((status: DropdownItem) => {
- return (
-
- {status.label}
-
- );
- })}
-
-
) => {}} onRowExpanded={(rows: Array) => {}} />
-
-
- Here is an example with search, sorting, pagination, subRows etc.:
-
-
-
- ) => setDropdownList1Selected(value)} multi={true} />
-
-
- ) => setTextBoxValue2(e.target.value)}
- />
-
-
- setSearchTriggered(!searchTriggered)} />
-
-
-
item.value) : [],
- searchText: textBoxValue2,
- triggerSearchOn: "Submit",
- searchTriggered: searchTriggered,
- onSearch: (searchResults: Array) => {},
- }}
- primaryActionButton={primaryButton}
- actionLinks={actionLinks}
- sortProps={{
- onAfterSorting: (rows: Array, sortByColumn: TableHeader) => {},
- }}
- onRowSelected={(rows: Array) => {}}
- onRowExpanded={(rows: Array) => {}}
- footer={ }
- />
-
-
-
-
- );
-};
-
-const dropDownList1: Array = [
- { value: "id", label: "Id" },
- { value: "firstName", label: "First Name" },
- { value: "lastName", label: "Last Name" },
-];
-
-export default TablePage;
diff --git a/develop/components/pages/TabsPage.tsx b/develop/components/pages/TabsPage.tsx
deleted file mode 100644
index e43f2f633..000000000
--- a/develop/components/pages/TabsPage.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from "react";
-import { Tabs, TabsListItem } from "../../../src/Tabs/Tabs";
-import Highlight from "react-highlight";
-const docMD = require("../../../src/Tabs/readme.md");
-
-const TabsPage: React.FunctionComponent = () => {
- const [activeTab, setActiveTab] = React.useState(0);
-
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
-
setActiveTab(index)} />
- {activeTab >= 0 &&
{tabContent[activeTab]}
}
-
-
-
-
- );
-};
-
-const tabList: Array = [{ text: "First" }, { text: "Second" }, { text: "Third" }, { text: "Fourth", disabled: true }];
-const tabContent: Array = ["First tab content", "Second tab content", "Third tab content", "Fourth tab content"];
-
-export default TabsPage;
diff --git a/develop/components/pages/TextAreaPage.tsx b/develop/components/pages/TextAreaPage.tsx
deleted file mode 100644
index 3baa1af40..000000000
--- a/develop/components/pages/TextAreaPage.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from "react";
-import { TextArea } from "../../../src/TextArea/TextArea";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/TextArea/readme.md");
-
-const TextAreaPage: React.FunctionComponent = () => {
- const [textBoxValue, setTextBoxValue] = React.useState("");
- const [textBox2Value, setTextBox2Value] = React.useState("");
-
- return (
-
-
-
-
-
-
Output
-
Here is the basic bootstrap one:
-
-
-
-
Here is the input with error:
-
-
-
-
-
- );
-};
-
-export default TextAreaPage;
diff --git a/develop/components/pages/TextBoxGroupPage.tsx b/develop/components/pages/TextBoxGroupPage.tsx
deleted file mode 100644
index d64a13f52..000000000
--- a/develop/components/pages/TextBoxGroupPage.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import * as React from "react";
-import { TextBoxGroup } from "../../../src/TextBoxGroup/TextBoxGroup";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/TextBoxGroup/readme.md");
-
-const moneyIcon: JSX.Element = (
-
- regular_black
-
-
-
-
-
-);
-const userIcon: JSX.Element = (
-
- regular_black
-
-
-
-);
-
-const TextBoxGroupPage: React.FunctionComponent = () => {
- const [textBoxGroupValue, setTextBoxGroupValue] = React.useState("");
- const [textBoxGroupValue2, setTextBoxGroupValue2] = React.useState("");
- const [textBoxGroupValue3, setTextBoxGroupValue3] = React.useState("Not good");
- const [textBoxGroupValue4, setTextBoxGroupValue4] = React.useState("All good");
-
- return (
-
-
-
-
-
-
Output
-
text box group with right text:
-
- ) => setTextBoxGroupValue(e.target.value)}
- rightText="kr"
- />
-
-
text box group with left icon and disabled:
-
- ) => setTextBoxGroupValue2(e.target.value)}
- leftIcon={moneyIcon}
- disabled={true}
- />
-
-
text box group with both sides and error:
-
- ) => setTextBoxGroupValue3(e.target.value)}
- leftIcon={moneyIcon}
- rightIcon={userIcon}
- onLeftClick={() => alert("Im clicking on Left icon")}
- onRightClick={() => alert("Im clicking on Right icon")}
- leftTitle="Click to view more of the left"
- rightTitle="Click to view more of the right"
- error="some error message"
- />
-
-
-
text box group with both sides and error:
-
- ) => setTextBoxGroupValue4(e.target.value)}
- leftIcon={moneyIcon}
- rightIcon={userIcon}
- onLeftClick={() => alert("Im clicking on Left icon")}
- onRightClick={() => alert("Im clicking on Right icon")}
- leftTitle="Click to view more of the left"
- rightTitle="Click to view more of the right"
- success={true}
- />
-
-
-
-
- );
-};
-
-export default TextBoxGroupPage;
diff --git a/develop/components/pages/TextBoxPage.tsx b/develop/components/pages/TextBoxPage.tsx
deleted file mode 100644
index cf71001a6..000000000
--- a/develop/components/pages/TextBoxPage.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from "react";
-import { TextBox } from "../../../src/TextBox/TextBox";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/TextBox/readme.md");
-
-const TextBoxPage: React.FunctionComponent = () => {
- const [textBoxValue, setTextBoxValue] = React.useState("");
- const [textBoxValue2, setTextBoxValue2] = React.useState("Not good");
- const [textBoxValue3, setTextBoxValue3] = React.useState("All good");
-
- return (
-
-
-
-
-
-
Output
-
Here is the basic bootstrap one:
-
- ) => setTextBoxValue(e.target.value)}
- />
-
-
-
Here is the input with error:
-
- ) => setTextBoxValue2(e.target.value)}
- />
-
-
-
Here is the input with success:
-
- ) => setTextBoxValue3(e.target.value)}
- />
-
-
-
-
- );
-};
-
-export default TextBoxPage;
diff --git a/develop/components/pages/TextLabelPage.tsx b/develop/components/pages/TextLabelPage.tsx
deleted file mode 100644
index 7f44bd44b..000000000
--- a/develop/components/pages/TextLabelPage.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react";
-import { TextLabel } from "../../../src/TextLabel/TextLabel";
-import { Tooltip } from "../../../src/Tooltip/Tooltip";
-import { TextBox } from "../../../src/TextBox/TextBox";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/TextLabel/readme.md");
-
-const TextLabelPage: React.FunctionComponent = () => {
- return (
-
-
-
-
-
-
Output
-
Here is the basic bootstrap one:
-
-
-
-
-
An example with passing ReactNode as the value (tooltip):
-
-
- 400,000 kr
-
- >
- }
- label="Current savings"
- />
-
-
-
-
- );
-};
-
-export default TextLabelPage;
diff --git a/develop/components/pages/TimelinePage.tsx b/develop/components/pages/TimelinePage.tsx
deleted file mode 100644
index b3ea16426..000000000
--- a/develop/components/pages/TimelinePage.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from "react";
-import { Timeline, TimelineListItem } from "../../../src/Timeline/Timeline";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Timeline/readme.md");
-
-const TimelinePage: React.FunctionComponent = () => {
- return (
-
-
-
-
-
-
Output
-
-
Here is a sample of a clickable vertical timeline
-
- {
- alert(`Item ${i} clicked`);
- }}
- />
-
-
-
Here is a sample of a horizontal timeline
-
-
-
-
-
-
- );
-};
-
-const list: Array = [
- {
- title: "Current Day",
- time: "2016 - Present",
- desc: "Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae semper quis lectus nulla at volutpat.",
- },
- {
- title: "Previously",
- time: "2012 - 2016",
- desc: "Leo in vitae turpis massa sed elementum tempus egestas sed. Suspendisse ultrices gravida dictum fusce ut.",
- },
- {
- title: "At the begining",
- time: "2008 - 2012",
- desc: "Fermentum dui faucibus in ornare quam viverra orci. Vitae tempus quam pellentesque nec. Praesent tristique magna sit amet purus gravida.",
- },
-];
-
-export default TimelinePage;
diff --git a/develop/components/pages/TimepickerPage.tsx b/develop/components/pages/TimepickerPage.tsx
deleted file mode 100644
index fc2e38bbd..000000000
--- a/develop/components/pages/TimepickerPage.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from "react";
-import { Timepicker, TimepickerValue, TimepickerDayperiodTypes } from "../../../src/Timepicker/Timepicker";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Timepicker/readme.md");
-
-const TimepickerPage: React.FunctionComponent = () => {
- const [timepickerValue, setTimepickerValue] = React.useState({ hours: 10, minutes: 0, dayperiod: TimepickerDayperiodTypes.AM });
-
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
- setTimepickerValue(value)} name="myTimepicker" />
-
-
-
-
- );
-};
-
-export default TimepickerPage;
diff --git a/develop/components/pages/TimerPage.tsx b/develop/components/pages/TimerPage.tsx
deleted file mode 100644
index 873fae197..000000000
--- a/develop/components/pages/TimerPage.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from "react";
-import { Timer } from "../../../src/Timer/Timer";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Timer/readme.md");
-
-const TimerPage: React.FunctionComponent = () => {
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
- {
- console.log("TIMER ENDED callback");
- }}
- />
-
-
-
-
- );
-};
-
-export default TimerPage;
diff --git a/develop/components/pages/TogglePage.tsx b/develop/components/pages/TogglePage.tsx
deleted file mode 100644
index bd3b07864..000000000
--- a/develop/components/pages/TogglePage.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from "react";
-import { Toggle } from "../../../src/Toggle/Toggle";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Toggle/readme.md");
-
-const TogglePage: React.FunctionComponent = () => {
- const [toggleValue, setToggleValue] = React.useState(true);
-
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
- ) => setToggleValue(e.target.checked)} />
-
-
-
Disabled
-
- null} />
- null} />
-
-
-
-
- );
-};
-
-export default TogglePage;
diff --git a/develop/components/pages/TooltipPage.tsx b/develop/components/pages/TooltipPage.tsx
deleted file mode 100644
index 34fdb194b..000000000
--- a/develop/components/pages/TooltipPage.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import * as React from "react";
-import { Tooltip, TooltipTrigger, TooltipTheme, TooltipPosition, TooltipMessageGroupItem } from "../../../src/Tooltip/Tooltip";
-import { RadioListModel, RadioGroup } from "../../../src/RadioGroup/RadioGroup";
-import { CheckBox } from "../../../src/CheckBox/CheckBox";
-import { Notification } from "../../../src/Notification/Notification";
-import Highlight from "react-highlight";
-
-const docMD: string = require("../../../src/Tooltip/readme.md");
-
-const TooltipPage: React.FunctionComponent = () => {
- const triggerList: Array> = [
- { label: "Click", value: "click" },
- { label: "Hover", value: "hover" },
- { label: "Focus", value: "focus" },
- ];
- const themeList: Array> = [
- { label: "Primary", value: "primary" },
- { label: "Danger", value: "danger" },
- { label: "Default", value: "default" },
- { label: "Light", value: "light" },
- { label: "Purple", value: "purple" },
- { label: "Success", value: "success" },
- { label: "Warning", value: "warning" },
- ];
- const positionList: Array> = [
- { label: "Top", value: "top" },
- { label: "Top Left", value: "top-left" },
- { label: "Top Right", value: "top-right" },
- { label: "Right", value: "right" },
- { label: "Right Top", value: "right-top" },
- { label: "Right Bottom", value: "right-bottom" },
- { label: "Bottom", value: "bottom" },
- { label: "Bottom Left", value: "bottom-left" },
- { label: "Bottom Right", value: "bottom-right" },
- { label: "Left", value: "left" },
- { label: "Left Top", value: "left-top" },
- { label: "Left Bottom", value: "left-bottom" },
- ];
- const defaultTooltipContent: string = "Tooltip content could be long, therefore, controlling the position and width is important";
- const nodeTooltipContent: React.ReactNode = (
-
-
Tooltip Header
-
tooltip content
-
- );
- const [theme, setTheme] = React.useState(themeList[0].value);
- const [position, setPosition] = React.useState(positionList[0].value);
- const [trigger, setTrigger] = React.useState(triggerList[0].value);
- const [hasCallback, setHasCallback] = React.useState(false);
- const [hasNodeAsContent, setHasNodeAsContent] = React.useState(false);
- const [hasCustomReference, setHasCustomReference] = React.useState(false);
- const [disableAutoPosition, setDisableAutoPosition] = React.useState(false);
- const [notifcationToggle, setNotifcationToggle] = React.useState(false);
-
- return (
-
-
-
-
-
-
Output
-
Here are sample outputs
-
-
setNotifcationToggle(true))}
- >
- {hasCustomReference && This is custom tooltip reference
}
-
-
-
Options
-
-
- setHasCallback(e.target.checked)} condensed />
-
-
- ) => setHasNodeAsContent(e.target.checked)}
- condensed
- />
-
-
- setDisableAutoPosition(e.target.checked)} condensed />
-
-
- ) => setHasCustomReference(e.target.checked)}
- condensed
- />
-
-
-
-
-
Position
-
) => setPosition(e.currentTarget.value as TooltipPosition)}
- condensed
- />
-
-
-
Themes
-
) => setTheme(e.currentTarget.value as TooltipTheme)} condensed />
-
-
-
Triggers
-
) => setTrigger(e.currentTarget.value as TooltipTrigger)}
- condensed
- />
-
-
-
-
-
setNotifcationToggle(false)}>
- Tooltip visibility changed!
-
-
- );
-};
-
-export default TooltipPage;
diff --git a/develop/components/pages/VideoPage.tsx b/develop/components/pages/VideoPage.tsx
deleted file mode 100644
index 4ab42b210..000000000
--- a/develop/components/pages/VideoPage.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from "react";
-import { Video } from "../../../src/Video/Video";
-import Highlight from "react-highlight";
-const docMD: string = require("../../../src/Video/readme.md");
-const videoSrc: string = require("../../assets/videos/sample.mp4").default;
-const vimeoSrc: string = "https://player.vimeo.com/video/259422408";
-const youtubeSrc: string = "https://www.youtube.com/embed/f19fctL72CY";
-
-const VideoPage: React.FunctionComponent = () => {
- return (
-
-
-
-
-
-
Output
-
Here are sample of a locally stored video (no controls, autoplay, loop)
-
-
-
-
- Here are sample video streamed from{" "}
-
- Vimeo™
-
-
-
-
-
-
- Here are sample video streamed from{" "}
-
- YouTube™
-
-
-
-
-
-
-
-
- );
-};
-
-export default VideoPage;
diff --git a/develop/configs.ts b/develop/configs.ts
deleted file mode 100644
index d24d7ed48..000000000
--- a/develop/configs.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// API CALL TYPE
-const TYPE_LOCAL = "LOCAL";
-const TYPE_REST = "REST";
-
-// LANGUAGES
-const LANG_EN = "en";
-const LANG_DK = "dk";
-const LANG_SW = "sw";
-
-// resources
-const SOCKET_URL = "http://localhost:4001";
-
-// API contexts
-// We will pass this to swagger class constractor if we need different base urls
-const DEFAULT = "";
-const SECONDARY = "/something";
-
-// CONFIG DATA (Please change here only)
-const configs = {
- delay: 500,
- toastDelay: 5000,
- socket: SOCKET_URL,
- type: TYPE_LOCAL,
- context: DEFAULT,
- lang: LANG_EN,
- activateSW: false,
- verNo: 0.1,
-};
-
-export default configs;
diff --git a/develop/index.html b/develop/index.html
deleted file mode 100644
index eb85cc9dd..000000000
--- a/develop/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
- React Components Docs
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/develop/index.tsx b/develop/index.tsx
deleted file mode 100644
index 2f2091689..000000000
--- a/develop/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import { render } from "react-dom";
-import { HashRouter as Router } from "react-router-dom";
-import App from "./components/App";
-import "./favicon.ico";
-import "./styles/main.scss";
-
-// Use browserHistory if your are going to use URL without hash
-render(
-
-
- ,
- document.getElementById("app")
-);
diff --git a/develop/styles/main.scss b/develop/styles/main.scss
deleted file mode 100644
index e19e395e1..000000000
--- a/develop/styles/main.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@import "~@sebgroup/bootstrap/scss/bootstrap";
-@import url("../../node_modules/highlight.js/styles/vs2015.css");
-@import "./shared/titleBar";
-@import "./shared/sideBar";
-@import "./shared/releases";
-div.app-container {
- position: absolute;
- top: 0px;
- bottom: 0px;
- right: 0px;
- left: 0px;
- overflow: hidden;
- div.route-holder {
- @import "./shared/route-template";
- position: absolute;
- top: 100px;
- left: 0;
- right: 0px;
- bottom: 0px;
- overflow: auto;
- transition: 200ms;
- &.sidebar-opened {
- left: 250px;
- }
- &.brief {
- > div.route-template {
- position: fixed;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- background: $white;
- z-index: 10;
- overflow: auto;
- min-width: inherit;
- max-width: inherit;
- padding: 0;
- margin: 0;
- .info-holder {
- .info {
- > h2,
- p:first-child {
- display: none;
- }
- > .md-file {
- display: none;
- > div {
- > * {
- display: none;
- }
- #basic-use,
- #basic-use + pre {
- display: inherit;
- }
- }
- }
- }
- }
- }
- }
- }
-}
diff --git a/develop/styles/shared/mixins.scss b/develop/styles/shared/mixins.scss
deleted file mode 100644
index 85c65ff3e..000000000
--- a/develop/styles/shared/mixins.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@mixin transform($props) {
- -webkit-transform: $props;
- -moz-transform: $props;
- -o-transform: $props;
- -ms-transform: $props;
- transform: $props;
-}
-
-@mixin transition($props) {
- -webkit-transition: $props;
- -moz-transition: $props;
- -o-transition: $props;
- transition: $props;
-}
\ No newline at end of file
diff --git a/develop/styles/shared/releases.scss b/develop/styles/shared/releases.scss
deleted file mode 100644
index e764fcecc..000000000
--- a/develop/styles/shared/releases.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@import './variable';
-
-.releases-page {
- padding-bottom: 40px;
- margin: 15px 20px;
- width: 80%;
- >.title {
- font-size: $large;
- border-bottom: 1px solid $gray-400;
- padding: 5px 0px;
- margin-bottom: 10px;
- }
- >.desc {
- color: $gray-600;
- margin-bottom: 30px;
- }
- >.note-holder {
- .item {
- padding-bottom: 25px;
- >.name {
- font-weight: bold;
- font-size: $medium;
- }
- >.date {
- font-style: italic;
- font-size: $default;
- }
- >.desc {
- padding-bottom: 5px;
- color: $gray-600;
- }
- >.notes {
- .noteItems {
- padding-bottom: 5px;
- >.note-title {
- font-weight: bold;
- }
- >.note-desc {
- color: $gray-600;
- padding-left: 10px;
- }
- }
- }
- }
- }
-}
\ No newline at end of file
diff --git a/develop/styles/shared/reset.scss b/develop/styles/shared/reset.scss
deleted file mode 100644
index 7d8b763ff..000000000
--- a/develop/styles/shared/reset.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
-}
-body {
- line-height: 1;
-}
-ol, ul {
- list-style: none;
-}
-blockquote, q {
- quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
-}
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-a {
- text-decoration: none; /* no underline */
-}
-
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- margin: 0;
-}
\ No newline at end of file
diff --git a/develop/styles/shared/route-template.scss b/develop/styles/shared/route-template.scss
deleted file mode 100644
index a5242edaa..000000000
--- a/develop/styles/shared/route-template.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@import './variable';
-.route-template,
-.about-page {
- padding: 5px 20px 40px;
- min-width: 320px;
- >.title {
- font-size: $large;
- border-bottom: 1px solid $gray-400;
- padding: 5px 0px;
- margin-bottom: 10px;
- }
- >.desc {
- color: $gray-600;
- margin-bottom: 30px;
- }
- p {
- color: $gray-600;
- margin: 15px 0px 10px 0px;
- }
- .info-holder {
- >.title {
- font-size: $large;
- border-bottom: 1px solid $gray-400;
- padding: 5px 0px;
- }
- .info {
- h2 {
- font-size: $large;
- border-bottom: 1px solid $gray-400;
- padding: 5px 0px;
- margin-bottom: 10px;
- }
- >.md-file {
- h2 {
- font-size: $large;
- border-bottom: 1px solid $gray-400;
- padding: 5px 0px;
- margin-bottom: 10px;
- }
- table {
- display: table;
- border-spacing: 2px;
- border-color: $gray-600;
- width: 100%;
- max-width: 100%;
- margin-bottom: 1rem;
- background-color: transparent;
- border: solid 1px $gray-300;
- border-collapse: collapse;
- thead {
- display: table-header-group;
- vertical-align: middle;
- border-color: inherit;
- background: $gray-900;
- color: $white;
- tr {
- th {
- padding: 10px;
- }
- }
- }
- tbody {
- display: table-row-group;
- vertical-align: middle;
- border-color: inherit;
- }
- tr {
- display: table-row;
- vertical-align: inherit;
- border-color: inherit;
- td {
- padding: 0.5rem 0.75rem;
- vertical-align: top;
- border-top: 1px solid $gray-300;
- }
- }
- }
- >div {
- hr,
- p,
- h2 {
- &:nth-of-type(1) {
- display: none !important;
- }
- }
- // p:last-child {
- // display: none !important;
- // }
- }
- }
- >.result {
- position: relative;
- max-width: 300px;
- code,
- p {
- display: block;
- padding: 5px 0px;
- }
- &.wide {
- max-width: none;
- width: 100%;
- }
- &.chart {
- height: 300px;
- min-width: 600px;
- }
- }
- }
- }
-}
\ No newline at end of file
diff --git a/develop/styles/shared/sideBar.scss b/develop/styles/shared/sideBar.scss
deleted file mode 100644
index 43f423261..000000000
--- a/develop/styles/shared/sideBar.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@import "./mixins";
-@import "./variable";
-
-$sidebar-width: 250px;
-
-.side-bar {
- position: fixed;
- top: 100px;
- bottom: 0px;
- width: $sidebar-width;
- left: -$sidebar-width - 10;
- overflow: auto;
- box-shadow: 0 17px 28px rgba(0, 0, 0, 0.25), 0 2px 2px rgba(0, 0, 0, 0.22);
- padding-bottom: 40px;
- will-change: left;
- @include transition(left 200ms);
- &.open {
- left: 0;
- }
- > .category {
- > .title {
- font-size: $large;
- font-weight: bold;
- padding: 10px 5px 0px 10px;
- >.badge {
- line-height: 22px;
- float: right;
- margin: 0;
- }
- }
- > .nav-holder {
- > .sub-title {
- font-size: $medium;
- color: $green;
- font-weight: bold;
- padding: 5px 20px;
- }
- > a {
- display: block;
- color: $black;
- height: 50px;
- position: relative;
- font-weight: normal;
- > span {
- position: absolute;
- top: 13px;
- left: 30px;
- }
- &:hover,
- &:active,
- &.active {
- background: $green;
- color: $white;
- }
- &.active {
- cursor: default;
- }
- }
- }
- }
-}
diff --git a/develop/styles/shared/titleBar.scss b/develop/styles/shared/titleBar.scss
deleted file mode 100644
index f18eb0757..000000000
--- a/develop/styles/shared/titleBar.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-@import './mixins';
-@import './variable';
-.title-bar {
- position: absolute;
- left: 0px;
- right: 0px;
- height: 100px;
- z-index: 10;
- >.main-title {
- background: $black;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 60px;
- >.title {
- color: $white;
- font-size: $large;
- position: absolute;
- left: 60px;
- right: 60px;
- top: 50%;
- @include transform(translateY(-50%));
- padding: 0 10px;
- }
- >.tech-logo {
- position: absolute;
- left: 0px;
- >.logo-icon {
- height: 60px;
- width: 60px;
- }
- }
- >.logo {
- position: absolute;
- right: 0px;
- >.logo-icon {
- height: 60px;
- width: 60px;
- }
- }
- >.search-holder {
- width: 300px;
- position: absolute;
- right: 90px;
- top: 10px;
- z-index: 2;
- .input-box-group {
- z-index: 3;
- .input-group {
- .input-box-group-wrapper {
- background-color: $white;
- }
- }
- }
- >.search-result {
- position: relative; // z-index: 3;
- >.search-list {
- background: $white;
- margin-top: -10px;
- z-index: 2;
- border-radius: 5px;
- padding: 10px;
- border: 1px solid $black;
- .search-item {
- color: $black;
- display: block;
- padding: 5px;
- &:not(.no-match) {
- cursor: pointer;
- }
- &.highlighted {
- background-color: $gray-200;
- }
- }
- }
- }
- >.input-cover {
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- top: 0;
- background-color: rgba(0, 0, 0, 0.5);
- z-index: -1;
- }
- }
- }
- >.subtitle-bar {
- position: absolute;
- top: 60px;
- left: 0;
- height: 40px;
- right: 0;
- border-bottom: 1px solid $gray-300;
- box-shadow: 0px 2px 10px -4px rgba(0, 0, 0, 0.2);
- .sidebar-toggler {
- display: inline-block;
- position: relative;
- top: 50%;
- @include transform(translateY(-50%));
- left: 10px;
- .bars {
- cursor: pointer;
- >svg {
- width: 20px;
- height: 20px;
- }
- }
- }
- .sidebar-title {
- position: absolute;
- left: 40px;
- top: 50%;
- @include transform(translateY(-50%));
- }
- .version {
- font-size: 12px;
- position: absolute;
- right: 10px;
- top: 50%;
- @include transform(translateY(-50%));
- }
- }
-}
-
-@media only screen and (max-width: 500px) {
- .title-bar {
- >.main-title {
- >.title {
- font-size: $default;
- }
- >.search-holder {
- display: none;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/develop/styles/shared/variable.scss b/develop/styles/shared/variable.scss
deleted file mode 100644
index e2cd12530..000000000
--- a/develop/styles/shared/variable.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-//Fonts-size----------------------------------------------------
-$largest: 30px;
-$larger: 25px;
-$large: 20px;
-$medium: 18px;
-$standard: 16px;
-$default: 14px;
-$small: 12px;
-$white: #fff;
-$black: #000;
-//custom colors:
-$transparent-black: rgba(0, 0, 0, 0.4);
-$popup-background: rgba(0, 0, 0, 0.7);
-//Mixins
-@mixin container-holder-defaults {
- overflow: auto;
- position: absolute;
- top: 50px;
- bottom: 60px;
- left: 0px;
- right: 0px;
- padding: 0px 14px 10px 14px;
- margin: auto;
-}
\ No newline at end of file
diff --git a/develop/tsconfig.json b/develop/tsconfig.json
deleted file mode 100644
index 06cd9c8c4..000000000
--- a/develop/tsconfig.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "compilerOptions": {
- "outDir": "./docs",
- "baseUrl": ".",
- "module": "esnext",
- "moduleResolution": "node",
- "target": "es5",
- "lib": [
- "es2015",
- "es6",
- "es7",
- "dom"
- ],
- "jsx": "react",
- "declaration": false,
- "sourceMap": true,
- "importHelpers": true,
- "noImplicitReturns": false,
- "noImplicitThis": false,
- "noImplicitAny": false,
- "strictNullChecks": false,
- "allowSyntheticDefaultImports": true
- },
- "exclude": [
- "**/*.test.tsx"
- ]
-}
\ No newline at end of file
diff --git a/develop/typings/generic.type.ts b/develop/typings/generic.type.ts
deleted file mode 100644
index 337cbcab8..000000000
--- a/develop/typings/generic.type.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { RouteComponentProps, StaticContext } from "react-router";
-
-export interface AppSharedProps extends Partial> {
- mode: string;
- readonly brief: string;
-}
-
-export type SideBarItem = {
- name: string;
- path: string;
- filePath: string;
-};
-export type SideBarContent = {
- links: Array;
- form: Array;
- ui: Array;
- other: Array;
-};
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 000000000..82d5c7f8a
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ Gatsby minimal starter
+
+
+## 🚀 Quick start
+
+1. **Create a Gatsby site.**
+
+ Use the Gatsby CLI to create a new site, specifying the minimal starter.
+
+ ```shell
+ # create a new Gatsby site using the minimal starter
+ npm init gatsby
+ ```
+
+2. **Start developing.**
+
+ Navigate into your new site’s directory and start it up.
+
+ ```shell
+ cd my-gatsby-site/
+ npm run develop
+ ```
+
+3. **Open the code and start customizing!**
+
+ Your site is now running at http://localhost:8000!
+
+ Edit `src/pages/index.js` to see your site update in real-time!
+
+4. **Learn more**
+
+ - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+ - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+ - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+ - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+ - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+ - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
diff --git a/docs/gatsby-browser.js b/docs/gatsby-browser.js
new file mode 100644
index 000000000..f6c3ea0ca
--- /dev/null
+++ b/docs/gatsby-browser.js
@@ -0,0 +1 @@
+import "./src/styles/global.scss";
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
new file mode 100644
index 000000000..8b94473ba
--- /dev/null
+++ b/docs/gatsby-config.js
@@ -0,0 +1,38 @@
+const pkg = require("../package.json");
+require("dotenv").config({
+ path: `../.env`,
+});
+
+module.exports = {
+ pathPrefix: process.env.base || pkg.config.base,
+ siteMetadata: {
+ title: "react-comps",
+ siteUrl: "https://sebgroup.github.io/react-components/",
+ },
+ plugins: [
+ "gatsby-plugin-sass",
+ "gatsby-plugin-react-helmet",
+ "gatsby-plugin-sitemap",
+ "gatsby-plugin-offline",
+ {
+ resolve: "gatsby-plugin-manifest",
+ options: {
+ icon: "src/assets/images/icon.png",
+ },
+ },
+ {
+ resolve: "gatsby-plugin-react-svg",
+ options: {
+ rule: {
+ include: /static/,
+ },
+ },
+ },
+ {
+ resolve: `gatsby-plugin-polyfill-io`,
+ options: {
+ features: [`String.prototype.codePointAt`, `fetch`],
+ },
+ },
+ ],
+};
diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js
new file mode 100644
index 000000000..2e33e752f
--- /dev/null
+++ b/docs/gatsby-node.js
@@ -0,0 +1,23 @@
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+
+exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
+ const config = getConfig();
+ const miniCssExtractPlugin = config.plugins.find((plugin) => plugin.constructor.name === "MiniCssExtractPlugin");
+ if (miniCssExtractPlugin) {
+ miniCssExtractPlugin.options.ignoreOrder = true;
+ }
+ actions.setWebpackConfig({
+ resolve: {
+ plugins: [
+ new TsconfigPathsPlugin({
+ configFile: `${__dirname}/tsconfig.json`,
+ silent: true,
+ }),
+ ],
+ fallback: {
+ os: require.resolve("os-browserify/browser"),
+ path: require.resolve("path-browserify"),
+ },
+ },
+ });
+};
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 000000000..b7b029856
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "react-components-docs",
+ "version": "1.0.0",
+ "description": "The documentation for SEB's React components",
+ "keywords": [
+ "gatsby",
+ "react"
+ ],
+ "scripts": {
+ "start": "gatsby develop -p 3000",
+ "build": "gatsby build --prefix-paths",
+ "serve": "gatsby serve",
+ "clean": "gatsby clean"
+ },
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@sebgroup/frontend-tools": "^2.0.2",
+ "browser-typescript-parser": "^2.6.7",
+ "classnames": "^2.2.6",
+ "gatsby": "^3.2.1",
+ "gatsby-plugin-manifest": "^3.2.0",
+ "gatsby-plugin-offline": "^4.2.0",
+ "gatsby-plugin-polyfill-io": "^1.1.0",
+ "gatsby-plugin-react-helmet": "^4.2.0",
+ "gatsby-plugin-react-svg": "^3.0.0",
+ "gatsby-plugin-sass": "^4.2.0",
+ "gatsby-plugin-sitemap": "^3.2.0",
+ "lorem-ipsum": "^2.0.3",
+ "react-helmet": "^6.1.0",
+ "react-syntax-highlighter": "^15.4.3"
+ },
+ "devDependencies": {
+ "@types/react-helmet": "^6.1.0",
+ "dotenv": "^8.2.0",
+ "os-browserify": "^0.3.0",
+ "path-browserify": "^1.0.1",
+ "tsconfig-paths-webpack-plugin": "^3.5.1"
+ },
+ "resolutions": {
+ "graphql": "^15.4.0",
+ "graphql-compose": "^7.25.0",
+ "webpack": "^5.24.2"
+ }
+}
diff --git a/docs/src/@types/contributor.d.ts b/docs/src/@types/contributor.d.ts
new file mode 100644
index 000000000..72c743040
--- /dev/null
+++ b/docs/src/@types/contributor.d.ts
@@ -0,0 +1,21 @@
+declare interface GithubContributor {
+ avatar_url?: string;
+ contributions?: number;
+ events_url?: string;
+ followers_url?: string;
+ following_url?: string;
+ gists_url?: string;
+ gravatar_id?: string;
+ html_url?: string;
+ id?: number;
+ login?: string;
+ node_id?: string;
+ organizations_url?: string;
+ received_events_url?: string;
+ repos_url?: string;
+ site_admin?: false;
+ starred_url?: string;
+ subscriptions_url?: string;
+ type?: "User" | "Bot";
+ url?: string;
+}
diff --git a/docs/src/@types/highlightjs-langs.d.ts b/docs/src/@types/highlightjs-langs.d.ts
new file mode 100644
index 000000000..c35aa7787
--- /dev/null
+++ b/docs/src/@types/highlightjs-langs.d.ts
@@ -0,0 +1,309 @@
+declare type HighlightLanguage =
+ | "1c"
+ | "abnf"
+ | "accesslog"
+ | "ada"
+ | "armasm"
+ | "arm"
+ | "avrasm"
+ | "actionscript"
+ | "as"
+ | "angelscript"
+ | "asc"
+ | "apache"
+ | "apacheconf"
+ | "applescript"
+ | "osascript"
+ | "arcade"
+ | "asciidoc"
+ | "adoc"
+ | "aspectj"
+ | "autohotkey"
+ | "autoit"
+ | "awk"
+ | "mawk"
+ | "nawk"
+ | "gawk"
+ | "axapta"
+ | "bash"
+ | "sh"
+ | "zsh"
+ | "basic"
+ | "bnf"
+ | "brainfuck"
+ | "bf"
+ | "csharp"
+ | "cs"
+ | "c"
+ | "h"
+ | "cpp"
+ | "hpp"
+ | "cc"
+ | "hh"
+ | "c++"
+ | "h++"
+ | "cxx"
+ | "hxx"
+ | "cal"
+ | "cos"
+ | "cls"
+ | "cmake"
+ | "cmake.in"
+ | "coq"
+ | "csp"
+ | "css"
+ | "capnproto"
+ | "capnp"
+ | "clojure"
+ | "clj"
+ | "coffeescript"
+ | "coffee"
+ | "cson"
+ | "iced"
+ | "crmsh"
+ | "crm"
+ | "pcmk"
+ | "crystal"
+ | "cr"
+ | "d"
+ | "dns"
+ | "zone"
+ | "bind"
+ | "dos"
+ | "bat"
+ | "cmd"
+ | "dart"
+ | "delphi"
+ | "dpr"
+ | "dfm"
+ | "pas"
+ | "pascal"
+ | "freepascal"
+ | "lazarus"
+ | "lpr"
+ | "lfm"
+ | "diff"
+ | "patch"
+ | "django"
+ | "jinja"
+ | "dockerfile"
+ | "docker"
+ | "dsconfig"
+ | "dts"
+ | "dust"
+ | "dst"
+ | "highlight-dyla"
+ | "ebnf"
+ | "elixir"
+ | "elm"
+ | "erlang"
+ | "erl"
+ | "excel"
+ | "xls"
+ | "xlsx"
+ | "fsharp"
+ | "fs"
+ | "fix"
+ | "fortran"
+ | "f90"
+ | "f95"
+ | "gcode"
+ | "nc"
+ | "gams"
+ | "gms"
+ | "gauss"
+ | "gss"
+ | "gherkin"
+ | "go"
+ | "golang"
+ | "golo"
+ | "gololang"
+ | "gradle"
+ | "groovy"
+ | "xml"
+ | "html"
+ | "xhtml"
+ | "rss"
+ | "atom"
+ | "xjb"
+ | "xsd"
+ | "xsl"
+ | "plist"
+ | "svg"
+ | "http"
+ | "https"
+ | "haml"
+ | "handlebars"
+ | "hbs"
+ | "html.hbs"
+ | "html.handlebars"
+ | "haskell"
+ | "hs"
+ | "haxe"
+ | "hx"
+ | "hy"
+ | "hylang"
+ | "ini"
+ | "toml"
+ | "inform7"
+ | "i7"
+ | "irpf90"
+ | "json"
+ | "java"
+ | "jsp"
+ | "javascript"
+ | "js"
+ | "jsx"
+ | "kotlin"
+ | "kt"
+ | "tex"
+ | "leaf"
+ | "lasso"
+ | "ls"
+ | "lassoscript"
+ | "less"
+ | "ldif"
+ | "lisp"
+ | "livecodeserver"
+ | "livescript"
+ | "ls"
+ | "lua"
+ | "makefile"
+ | "mk"
+ | "mak"
+ | "markdown"
+ | "md"
+ | "mkdown"
+ | "mkd"
+ | "mathematica"
+ | "mma"
+ | "wl"
+ | "matlab"
+ | "maxima"
+ | "mel"
+ | "mercury"
+ | "mizar"
+ | "mojolicious"
+ | "monkey"
+ | "moonscript"
+ | "moon"
+ | "n1ql"
+ | "nsis"
+ | "nginx"
+ | "nginxconf"
+ | "nimrod"
+ | "nix"
+ | "ocaml"
+ | "ml"
+ | "objectivec"
+ | "mm"
+ | "objc"
+ | "obj-c"
+ | "glsl"
+ | "openscad"
+ | "scad"
+ | "ruleslanguage"
+ | "oxygene"
+ | "pf"
+ | "pf.conf"
+ | "php"
+ | "php3"
+ | "php4"
+ | "php5"
+ | "php6"
+ | "php7"
+ | "parser3"
+ | "perl"
+ | "pl"
+ | "pm"
+ | "plaintext"
+ | "txt"
+ | "text"
+ | "pony"
+ | "pgsql"
+ | "postgres"
+ | "postgresql"
+ | "powershell"
+ | "ps"
+ | "ps1"
+ | "processing"
+ | "prolog"
+ | "properties"
+ | "protobuf"
+ | "puppet"
+ | "pp"
+ | "python"
+ | "py"
+ | "gyp"
+ | "profile"
+ | "python-repl"
+ | "pycon"
+ | "k"
+ | "kdb"
+ | "qml"
+ | "r"
+ | "reasonml"
+ | "re"
+ | "rib"
+ | "rsl"
+ | "graph"
+ | "instances"
+ | "ruby"
+ | "rb"
+ | "gemspec"
+ | "podspec"
+ | "thor"
+ | "irb"
+ | "rust"
+ | "rs"
+ | "SAS"
+ | "sas"
+ | "scss"
+ | "sql"
+ | "p21"
+ | "step"
+ | "stp"
+ | "scala"
+ | "scheme"
+ | "scilab"
+ | "sci"
+ | "shell"
+ | "console"
+ | "smali"
+ | "smalltalk"
+ | "st"
+ | "stan"
+ | "stanfuncs"
+ | "stata"
+ | "stylus"
+ | "styl"
+ | "subunit"
+ | "swift"
+ | "tcl"
+ | "tk"
+ | "tap"
+ | "thrift"
+ | "tp"
+ | "twig"
+ | "craftcms"
+ | "typescript"
+ | "ts"
+ | "vbnet"
+ | "vb"
+ | "vbscript"
+ | "vbs"
+ | "vhdl"
+ | "vala"
+ | "verilog"
+ | "v"
+ | "vim"
+ | "x86asm"
+ | "xl"
+ | "tao"
+ | "xquery"
+ | "xpath"
+ | "xq"
+ | "yml"
+ | "yaml"
+ | "zephir"
+ | "zep";
diff --git a/docs/src/@types/hljs.d.ts b/docs/src/@types/hljs.d.ts
new file mode 100644
index 000000000..4adba4b0b
--- /dev/null
+++ b/docs/src/@types/hljs.d.ts
@@ -0,0 +1,139 @@
+// Type definitions for highlight.js v9.12
+// Project: https://github.com/isagalaev/highlight.js
+// Definitions by: Niklas Mollenhauer
+// Jeremy Hull
+// Josh Goldberg
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare namespace HLJS {
+ interface Node {}
+
+ export function highlight(name: string, value: string, ignore_illegals?: boolean, continuation?: ICompiledMode): IHighlightResult;
+ export function highlightAuto(value: string, languageSubset?: string[]): IAutoHighlightResult;
+
+ export function fixMarkup(value: string): string;
+
+ export function highlightBlock(block: Node): void;
+
+ export function configure(options: IOptions): void;
+
+ export function initHighlighting(): void;
+ export function initHighlightingOnLoad(): void;
+
+ export function registerLanguage(name: string, language: (hljs?: HLJSStatic) => IModeBase): void;
+ export function listLanguages(): string[];
+ export function getLanguage(name: string): IMode;
+
+ export function inherit(parent: Object, obj: Object): Object;
+
+ export function COMMENT(begin: string | RegExp, end: string | RegExp, inherits: IModeBase): IMode;
+
+ // Common regexps
+ export var IDENT_RE: string;
+ export var UNDERSCORE_IDENT_RE: string;
+ export var NUMBER_RE: string;
+ export var C_NUMBER_RE: string;
+ export var BINARY_NUMBER_RE: string;
+ export var RE_STARTERS_RE: string;
+
+ // Common modes
+ export var BACKSLASH_ESCAPE: IMode;
+ export var APOS_STRING_MODE: IMode;
+ export var QUOTE_STRING_MODE: IMode;
+ export var PHRASAL_WORDS_MODE: IMode;
+ export var C_LINE_COMMENT_MODE: IMode;
+ export var C_BLOCK_COMMENT_MODE: IMode;
+ export var HASH_COMMENT_MODE: IMode;
+ export var NUMBER_MODE: IMode;
+ export var C_NUMBER_MODE: IMode;
+ export var BINARY_NUMBER_MODE: IMode;
+ export var CSS_NUMBER_MODE: IMode;
+ export var REGEX_MODE: IMode;
+ export var TITLE_MODE: IMode;
+ export var UNDERSCORE_TITLE_MODE: IMode;
+
+ export interface IHighlightResultBase {
+ relevance: number;
+ language: string;
+ value: string;
+ }
+
+ export interface IAutoHighlightResult extends IHighlightResultBase {
+ second_best?: IAutoHighlightResult;
+ }
+
+ export interface IHighlightResult extends IHighlightResultBase {
+ top: ICompiledMode;
+ }
+
+ export interface HLJSStatic {
+ inherit(parent: Object, obj: Object): Object;
+
+ // Common regexps
+ IDENT_RE: string;
+ UNDERSCORE_IDENT_RE: string;
+ NUMBER_RE: string;
+ C_NUMBER_RE: string;
+ BINARY_NUMBER_RE: string;
+ RE_STARTERS_RE: string;
+
+ // Common modes
+ BACKSLASH_ESCAPE: IMode;
+ APOS_STRING_MODE: IMode;
+ QUOTE_STRING_MODE: IMode;
+ PHRASAL_WORDS_MODE: IMode;
+ C_LINE_COMMENT_MODE: IMode;
+ C_BLOCK_COMMENT_MODE: IMode;
+ HASH_COMMENT_MODE: IMode;
+ NUMBER_MODE: IMode;
+ C_NUMBER_MODE: IMode;
+ BINARY_NUMBER_MODE: IMode;
+ CSS_NUMBER_MODE: IMode;
+ REGEX_MODE: IMode;
+ TITLE_MODE: IMode;
+ UNDERSCORE_TITLE_MODE: IMode;
+ }
+
+ // Reference:
+ // https://github.com/isagalaev/highlight.js/blob/master/docs/reference.rst
+ export interface IModeBase {
+ className?: string;
+ aliases?: string[];
+ begin?: string | RegExp;
+ end?: string | RegExp;
+ case_insensitive?: boolean;
+ beginKeyword?: string;
+ endsWithParent?: boolean;
+ lexems?: string;
+ illegal?: string;
+ excludeBegin?: boolean;
+ excludeEnd?: boolean;
+ returnBegin?: boolean;
+ returnEnd?: boolean;
+ starts?: string;
+ subLanguage?: string;
+ subLanguageMode?: string;
+ relevance?: number;
+ variants?: IMode[];
+ }
+
+ export interface IMode extends IModeBase {
+ keywords?: any;
+ contains?: IMode[];
+ }
+
+ export interface ICompiledMode extends IModeBase {
+ compiled: boolean;
+ contains?: ICompiledMode[];
+ keywords?: Object;
+ terminators: RegExp;
+ terminator_end?: string;
+ }
+
+ export interface IOptions {
+ classPrefix?: string;
+ tabReplace?: string;
+ useBR?: boolean;
+ languages?: string[];
+ }
+}
diff --git a/docs/src/@types/index.d.ts b/docs/src/@types/index.d.ts
new file mode 100644
index 000000000..f70379859
--- /dev/null
+++ b/docs/src/@types/index.d.ts
@@ -0,0 +1,144 @@
+declare interface NavsURLs {
+ releases: string;
+ github: string;
+ contribute: string;
+ issues: string;
+ v4: string;
+}
+
+declare module "*.svg" {
+ const comp: React.FC;
+ export default comp;
+}
+
+declare module "@pkg" {
+ const data: NPMPackage;
+ export default data;
+}
+
+declare module "*components-list.json" {
+ const data: Array;
+ export default data;
+}
+
+declare interface ComponentsListItem {
+ name: string;
+ path: string;
+ filePath: string;
+ module: string;
+}
+
+declare interface NPMPackage {
+ name: string;
+ version: string;
+ description: string;
+ license: string;
+ keywords: Array;
+ repository: {
+ type: string;
+ url: string;
+ };
+ bugs: {
+ url: string;
+ };
+ homepage: string;
+ dependencies: {
+ [key: string]: string;
+ };
+ devDependencies: {
+ [key: string]: string;
+ };
+}
+
+declare interface ApiSection {
+ name: string;
+ description: string;
+ interfaces?: Array;
+}
+
+declare interface APIInputs {
+ default: any;
+ description: string;
+ end: number;
+ isOptional: boolean;
+ isStatic: boolean;
+ name: string;
+ start: number;
+ type: string | Array;
+ visibility: any;
+}
+
+declare interface APIOutputs {
+ description: string;
+ end: number;
+ functionCall: string;
+ isAbstract: boolean;
+ isAsync: boolean;
+ isOptional: boolean;
+ isStatic: boolean;
+ name: string;
+ parameters: any[];
+ start: number;
+ type: string;
+ variables: any[];
+ visibility: undefined;
+}
+
+declare interface APIInput {
+ comment?: string;
+ skip?: string;
+ decorator?: string;
+ name?: string;
+ type?: string | Array;
+ default?: string;
+ alias?: string;
+ accessor?: string;
+ optional?: string;
+ private?: string;
+ parameter?: string;
+ return?: string;
+ isExtended?: boolean;
+}
+
+declare interface ParsedAPI {
+ [key: string]: APIInput;
+}
+
+declare interface DocDropdownItem {
+ value: T;
+ label: string;
+}
+
+declare type QuerySize = "xl" | "lg" | "md" | "sm" | "xs" | "never";
+
+declare interface MetaTag {
+ name?: string;
+ property?: string;
+ content: string;
+}
+
+declare interface MetaConfig {
+ keywords: string;
+ siteUrl: string;
+ description: string;
+ sitePreviewImageUrl: string;
+ title: string;
+ jsonLD: {
+ "@context": string;
+ "@type": "WebApplication";
+ name: string;
+ description: string;
+ url: string;
+ image: string;
+ screenshot: string;
+ applicationCategory: string;
+ operatingSystem: string;
+ author: {
+ "@type": string;
+ name: string;
+ description: string;
+ url: string;
+ logo: string;
+ };
+ };
+}
diff --git a/docs/src/assets/images/icon.png b/docs/src/assets/images/icon.png
new file mode 100644
index 000000000..38b2fb0e4
Binary files /dev/null and b/docs/src/assets/images/icon.png differ
diff --git a/docs/src/assets/jsons/versions.json b/docs/src/assets/jsons/versions.json
new file mode 100644
index 000000000..af2547f6f
--- /dev/null
+++ b/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" }
+ ]
+}
diff --git a/docs/src/components/CodeSnippet.tsx b/docs/src/components/CodeSnippet.tsx
new file mode 100644
index 000000000..59717fb1c
--- /dev/null
+++ b/docs/src/components/CodeSnippet.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import classnames from "classnames";
+import { Prism as Highlight } from "react-syntax-highlighter";
+import theme from "react-syntax-highlighter/dist/esm/styles/prism/cb";
+import FilesIcon from "../../static/icons/files.svg";
+import CheckIcon from "../../static/icons/check.svg";
+import "../styles/code-snippet.scss";
+
+type CodeSnippetProps = JSX.IntrinsicElements["div"] & {
+ angular?: boolean;
+ language?: HighlightLanguage;
+ showLineNumbers?: boolean;
+};
+
+export const CodeSnippet: React.FC = React.memo(({ angular, language, showLineNumbers = true, ...props }: CodeSnippetProps) => {
+ const [copied, setCopied] = React.useState(false);
+ const timer: React.MutableRefObject = React.useRef();
+
+ const copySnippet = (): void => {
+ navigator.clipboard.writeText(props.children.toString()).then(() => {
+ setCopied(true);
+ timer.current = setTimeout(() => {
+ if (timer.current) {
+ setCopied(false);
+ clearTimeout(timer.current);
+ }
+ }, 3000);
+ });
+ };
+
+ return (
+
+
+ {props.children}
+
+ {copied ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+ );
+});
diff --git a/docs/src/components/Docs.tsx b/docs/src/components/Docs.tsx
new file mode 100644
index 000000000..b24b59c7a
--- /dev/null
+++ b/docs/src/components/Docs.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { Tabs, TabItem } from "@sebgroup/react-components/Tabs";
+import Layout from "./Layout";
+import { Helmet } from "react-helmet";
+import { APIExtractService } from "@utils/api-parser";
+import DocsPlayground, { DocsPlaygroundProps } from "./DocsPlaygroud";
+import DocsAPI from "./DocsAPIs";
+
+export interface DocsProps extends DocsPlaygroundProps {
+ mainFile: string;
+ importedFiles?: Array;
+ note?: React.ReactNode;
+}
+
+const Docs: React.FC = ({ mainFile, importedFiles, ...props }: DocsProps) => {
+ const [apis, setApis] = React.useState(null);
+ const [activeTab, setActiveTab] = React.useState(0);
+
+ React.useEffect(() => {
+ new APIExtractService()
+ .initParse(mainFile, importedFiles)
+ .then(async (res) => setApis(await res[0]))
+ .catch(console.error);
+ }, []);
+
+ return (
+
+
+ {apis?.name || ""} - SEB React Components
+
+
+
+
{apis?.name}
+
{apis?.description}
+
+ Playground
+ APIs
+ {props.note && Notes }
+
+ {
+ /* prettier-ignore */ [
+
,
+
,
+
{props.note}
+ ][activeTab]
+ }
+
+
+ );
+};
+
+export default Docs;
diff --git a/docs/src/components/DocsAPIs.tsx b/docs/src/components/DocsAPIs.tsx
new file mode 100644
index 000000000..ebe75d905
--- /dev/null
+++ b/docs/src/components/DocsAPIs.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { ParsedPropertyDeclartion, ExtendedPropertyDeclaration } from "@utils/api-parser";
+
+export interface DocsAPIProps {
+ list: Array;
+}
+
+const DocsAPI: React.FC = (props: DocsAPIProps) => {
+ const [defaultProp, setDefaultProp] = React.useState(null);
+
+ React.useEffect(() => {
+ if (props.list) {
+ setDefaultProp(props.list.find((item: ParsedPropertyDeclartion) => item.isDefault));
+ }
+ }, [props.list]);
+
+ return (
+ !!props.list?.length && (
+
+
Inputs
+
+
+
+
+ Inputs
+ Type
+ Description
+
+
+
+ {defaultProp?.properties
+ ?.filter(({ isExtended }: ExtendedPropertyDeclaration) => !isExtended)
+ .map((input: ExtendedPropertyDeclaration, index: number) => (
+
+ {input.name}
+
+ {input.type}
+
+
+
+ ))}
+
+
+
+
+ )
+ );
+};
+
+export default DocsAPI;
diff --git a/docs/src/components/DocsPlaygroud.tsx b/docs/src/components/DocsPlaygroud.tsx
new file mode 100644
index 000000000..13cc1adc2
--- /dev/null
+++ b/docs/src/components/DocsPlaygroud.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import classnames from "classnames";
+import { CodeSnippet } from "./CodeSnippet";
+
+export type BackgroundTheme = "primary" | "secondary" | "danger" | "warning" | "success" | "dark" | "light";
+
+export interface DocsPlaygroundProps {
+ className?: string;
+ example?: React.ReactNode;
+ code?: React.ReactNode;
+ controls?: React.ReactNode;
+ exampleTheme?: BackgroundTheme;
+}
+
+const DocsPlayground: React.FC = (props: DocsPlaygroundProps) => {
+ const navs: string[] = ["Component", "Code"];
+ const [activeTab, setActiveTab] = React.useState(0);
+
+ const switchTab = React.useCallback((index: number): void => {
+ if (!isNaN(index)) {
+ setActiveTab(index);
+ }
+ }, []);
+
+ return (
+
+
+ {navs.map((item: string, index: number) => (
+ switchTab(index)} data-value={index}>
+ {item}
+
+ ))}
+
+
+ {props.controls &&
Try these props }
+ {
+ [
+
+
{props.example}
+ {props.exampleTheme && (
+
+ * This background is only to demonstrate the component's theme in its potential environement. It will not be applied by the component.
+
+ )}
+
,
+
+ {props.code}
+ ,
+ ][activeTab]
+ }
+
+ {props.controls &&
{props.controls}
}
+
+ );
+};
+
+export default DocsPlayground;
diff --git a/docs/src/components/Footer.tsx b/docs/src/components/Footer.tsx
new file mode 100644
index 000000000..05aa47dce
--- /dev/null
+++ b/docs/src/components/Footer.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import "../styles/footer.scss";
+
+export const Footer: React.FC = React.memo(() => {
+ return (
+
+ );
+});
diff --git a/docs/src/components/Layout.tsx b/docs/src/components/Layout.tsx
new file mode 100644
index 000000000..0139ebf5c
--- /dev/null
+++ b/docs/src/components/Layout.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { SideMenu } from "./SideMenu";
+import { Footer } from "./Footer";
+import classnames from "classnames";
+import "../styles/docs-wrapper.scss";
+
+const Layout: React.FC = React.memo(({ children, ...props }) => {
+ return (
+
+ );
+});
+
+export default Layout;
diff --git a/docs/src/components/Navbar.tsx b/docs/src/components/Navbar.tsx
new file mode 100644
index 000000000..0cef33bdf
--- /dev/null
+++ b/docs/src/components/Navbar.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { Collapse } from "@sebgroup/react-components/Collapse";
+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(() => {
+ const [toggle, setToggle] = React.useState(false);
+ const isMobile = useIsMobile();
+
+ return (
+
+
+ SEB React Components
+ setToggle(!toggle)}>
+
+
+
+
+ {isMobile ? (
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+ );
+});
+
+const Navs: React.FC = React.memo(() => (
+
+
+
+
+
+
+
+
+ Docs
+
+
+
+
+ Release notes
+
+
+
+
+
+ Github
+
+
+
+
+
+ Contribute
+
+
+
+
+));
diff --git a/docs/src/components/SideMenu.tsx b/docs/src/components/SideMenu.tsx
new file mode 100644
index 000000000..7746b0b83
--- /dev/null
+++ b/docs/src/components/SideMenu.tsx
@@ -0,0 +1,260 @@
+import React, { useState } from "react";
+import classnames from "classnames";
+import { useIsMobile } from "@hooks/useIsMobile";
+import BarsIcon from "../../static/icons/bars.svg";
+import SearchIcon from "../../static/icons/search.svg";
+import ExternalLinkIcon from "../../static/icons/external-link.svg";
+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";
+
+const components: Array = comps.sort((a, b) => (a.name > b.name ? 1 : -1));
+
+/**
+ * Retrieves the value of the side menu toggle from local storage
+ * @returns The value of the side menu's toggle
+ */
+function getStoredValue(): boolean {
+ let value: boolean = true;
+ if (typeof window !== "undefined") {
+ try {
+ const lsValue: string = localStorage.getItem(SIDE_MENU_STORAGE_KEY);
+ value = lsValue !== null ? JSON.parse(lsValue) : true;
+ } catch (e) {}
+ }
+ return value;
+}
+
+export const SideMenu: React.FC = React.memo(() => {
+ const [className, setClassName] = useState("side-menu");
+ const [prestine, setPrestine] = React.useState(true);
+ const [toggle, setToggle] = React.useState(getStoredValue());
+ const [isAnimating, setIsAnimating] = React.useState(false);
+ const [search, setSearch] = React.useState("");
+ const [highlighted, setHighlighted] = React.useState(-1);
+ const listRef: React.MutableRefObject = React.useRef();
+ const isMobile = useIsMobile();
+
+ const getChildIndex = (children: HTMLCollectionOf, value: number): number => {
+ let i: number = 0;
+ let found: number = -1;
+ do {
+ if (Number(children.item(i).getAttribute("data-value")) === value) {
+ found = i;
+ }
+ i++;
+ } while (i < children.length && found === -1);
+ return found;
+ };
+
+ const searchNavigations = (e: React.KeyboardEvent): void => {
+ let highlightedItem: number;
+ let children: HTMLCollectionOf;
+ switch (e.key?.toLowerCase()) {
+ case "escape":
+ if (search === "" && highlighted === -1) {
+ document.getElementById("searchTextbox").blur();
+ } else {
+ setHighlighted(-1);
+ setSearch("");
+ }
+ break;
+ case "enter":
+ const currentElements: HTMLCollection = listRef.current.children;
+ if (currentElements.length) {
+ if (highlighted !== -1) {
+ (currentElements.item(highlighted) as HTMLElement).click();
+ setHighlighted(-1);
+ setSearch("");
+ } else {
+ setHighlighted(0);
+ }
+ }
+ break;
+ case "arrowdown":
+ e.preventDefault();
+ children = listRef.current.children as HTMLCollectionOf;
+ if (children.length) {
+ highlightedItem = getChildIndex(children, highlighted);
+ if (highlightedItem === -1) {
+ setHighlighted(Number(children.item(0).getAttribute("data-value")));
+ } else {
+ if (children.item(highlightedItem).nextSibling) {
+ setHighlighted(Number(children.item(highlightedItem).nextElementSibling.getAttribute("data-value")));
+ }
+ }
+ }
+ break;
+ case "arrowup":
+ e.preventDefault();
+ children = listRef.current.children as HTMLCollectionOf;
+ if (children.length) {
+ highlightedItem = getChildIndex(children, highlighted);
+ if (highlightedItem === -1) {
+ setHighlighted(Number(children.item(0).getAttribute("data-value")));
+ } else {
+ if (children.item(highlightedItem).previousSibling) {
+ setHighlighted(Number(children.item(highlightedItem).previousElementSibling.getAttribute("data-value")));
+ }
+ }
+ }
+ break;
+ }
+ };
+
+ React.useEffect(() => {
+ if (listRef !== undefined && typeof window !== "undefined" && !!window["document"] && !!window.document["querySelector"]) {
+ const target: HTMLElement = listRef.current.querySelector(".sidemenu-content > nav.components-list > .list-item.active");
+ target?.scrollIntoView({ block: "center", inline: "nearest", behavior: "auto" });
+ }
+ }, [listRef]);
+
+ const onToggle = () => {
+ setIsAnimating(true);
+ if (prestine) {
+ setPrestine(false);
+ }
+
+ setToggle((old: boolean) => {
+ localStorage.setItem(SIDE_MENU_STORAGE_KEY, String(!old));
+ return !old;
+ });
+ };
+
+ React.useEffect(() => {
+ const initialToggle: boolean = getStoredValue();
+ setClassName(
+ classnames("side-menu", {
+ opened: (initialToggle && prestine) || (toggle && !isAnimating),
+ closed: (!initialToggle && prestine) || (!toggle && !isAnimating),
+ openning: !prestine && toggle && isAnimating,
+ closing: !prestine && !toggle && isAnimating,
+ mobile: isMobile,
+ })
+ );
+ }, [prestine, isMobile, isAnimating, toggle]);
+
+ React.useEffect(() => {
+ if (isMobile) {
+ // Only change the value if it's `false`, otherwise, no need to trigger re-render
+ if (!isMobile) {
+ if (toggle) {
+ setToggle(false);
+ }
+ }
+ } else {
+ // Only change the value if it's `true`, otherwise, no need to trigger re-render
+ if (isMobile) {
+ if (!toggle) {
+ setToggle(true);
+ }
+ }
+ }
+ }, [isMobile]);
+
+ React.useEffect(() => {
+ const handler = (e: KeyboardEvent) => {
+ if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "f") {
+ const search = document.getElementById("searchTextbox");
+ search.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+ search.focus();
+ } else if (e.ctrlKey && e.shiftKey && ["`", "~"].some((i) => i === e.key)) {
+ onToggle();
+ }
+ };
+
+ document.addEventListener("keypress", handler);
+
+ return () => {
+ document.removeEventListener("keypress", handler);
+ };
+ }, []);
+
+ return (
+
+ );
+});
diff --git a/docs/src/components/TechStack.tsx b/docs/src/components/TechStack.tsx
new file mode 100644
index 000000000..36ca29eb9
--- /dev/null
+++ b/docs/src/components/TechStack.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { withPrefix } from "gatsby";
+import pkg from "@pkg";
+import "../styles/tech-stack.scss";
+
+function clean(version: string): string {
+ return version?.replace(/^[~^]/g, "");
+}
+
+const reactVersion: string = clean(pkg.dependencies["react"]);
+const bootstrapVersion: string = clean(pkg.dependencies["@sebgroup/bootstrap"]);
+const typescriptVersion: string = clean(pkg.devDependencies.typescript);
+
+export const TechStack: React.FC = React.memo(() => {
+ return (
+
+
+
+
React
+
{reactVersion}
+
+
+
+
Typescript
+
{typescriptVersion}
+
+
+
+
SEB Bootstrap
+
{bootstrapVersion}
+
+
+ );
+});
diff --git a/docs/src/components/VersionsDropdown.tsx b/docs/src/components/VersionsDropdown.tsx
new file mode 100644
index 000000000..9a0189c0a
--- /dev/null
+++ b/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> = (props: VersionsDropdownProps) => {
+ const [currentVersion, setCurrentVersion] = React.useState("");
+ const [formattedList, setFormattedList] = React.useState>([]);
+
+ /** 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 = currentpath.match(regex);
+ setCurrentVersion(matchedVersions?.length > 0 ? matchedVersions[0] : versions[0].name);
+ formatList();
+ }, []);
+
+ return (
+ formattedList.find((item: FormattedVersionItem) => item.value === value)?.label}
+ onChange={(e: React.ChangeEvent) => (window.location.href = `${window.location.origin}${withPrefix(e.target.value)}/`)}
+ >
+ {formattedList.map((item: FormattedVersionItem, index: number) => (
+
+ {item.label}
+
+ ))}
+
+ );
+};
+
+export default VersionsDropdown;
diff --git a/docs/src/configs.ts b/docs/src/configs.ts
new file mode 100644
index 000000000..641dd5779
--- /dev/null
+++ b/docs/src/configs.ts
@@ -0,0 +1,38 @@
+const pkg = require("../package.json");
+
+export const urls: NavsURLs = {
+ 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",
+};
+
+const imageUrl: string = `${pkg.homepage}/site-preview.png`;
+const siteName: string = "SEB React Components";
+
+export const metaConfigs: MetaConfig = {
+ keywords: "SEB, React, react components, typescript, mobile, web, ui, ux, open source, components",
+ siteUrl: pkg.homepage,
+ description: pkg.description,
+ title: siteName,
+ sitePreviewImageUrl: imageUrl,
+ jsonLD: {
+ "@context": "http://schema.org",
+ "@type": "WebApplication",
+ name: siteName,
+ description: pkg.description,
+ url: pkg.homepage,
+ image: imageUrl,
+ screenshot: imageUrl,
+ applicationCategory: "Software Documentation",
+ operatingSystem: "Android, Chrome OS, iOS, iPadOS, macOS, OS X, Linux, Windows",
+ author: {
+ "@type": "Organization",
+ name: "SEB",
+ description: "SEB is a Swedish financial group for corporate customers, institutions and private individuals with headquarters in Stockholm",
+ url: "https://seb.se",
+ logo: "https://seb.se/Static/Images/SebLogo.svg",
+ },
+ },
+};
diff --git a/docs/src/hooks/useIsMobile.ts b/docs/src/hooks/useIsMobile.ts
new file mode 100644
index 000000000..9eebdc85d
--- /dev/null
+++ b/docs/src/hooks/useIsMobile.ts
@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+export function useIsMobile(): boolean {
+ if (typeof window !== "undefined") {
+ const mobileQuery: string = "(max-width: 767px)";
+ const mediaQueryLists: MediaQueryList = window.matchMedia(mobileQuery);
+ const [isMobile, setIsMobile] = useState(window.matchMedia(mobileQuery).matches);
+
+ useEffect(() => {
+ const handler: VoidFunction = () => setIsMobile(mediaQueryLists?.matches);
+ mediaQueryLists?.addEventListener("change", handler);
+ return () => mediaQueryLists?.removeEventListener("change", handler);
+ }, []);
+
+ return isMobile;
+ }
+}
diff --git a/docs/src/hooks/useMedia.ts b/docs/src/hooks/useMedia.ts
new file mode 100644
index 000000000..84f66770c
--- /dev/null
+++ b/docs/src/hooks/useMedia.ts
@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+export function useMedia(queries: string[], values: T[], defaultValue: T): T {
+ // Array containing a media query list for each query
+ const mediaQueryLists: MediaQueryList[] = queries.map((query: string) => window.matchMedia(query));
+
+ // Function that gets value based on matching media query
+ const getValue = (): T => {
+ // Get index of first media query that matches
+ const index: number = mediaQueryLists.findIndex((mql: MediaQueryList) => mql.matches);
+ // Return related value or defaultValue if none
+ return typeof values[index] !== "undefined" ? values[index] : defaultValue;
+ };
+
+ // State and setter for matched value
+ const [value, setValue] = useState(getValue);
+
+ useEffect(
+ () => {
+ // Event listener callback
+ // Note: By defining getValue outside of useEffect we ensure that it has ...
+ // ... current values of hook args (as this hook callback is created once on mount).
+ const handler: VoidFunction = () => setValue(getValue);
+ // Set a listener for each media query with above handler as callback.
+ mediaQueryLists.forEach((mql: MediaQueryList) => mql.addListener(handler));
+ // Remove listeners on cleanup
+ return () => mediaQueryLists.forEach((mql: MediaQueryList) => mql.removeListener(handler));
+ },
+ [] // Empty array ensures effect is only run on mount and unmount
+ );
+
+ return value;
+}
diff --git a/docs/src/pages/404.tsx b/docs/src/pages/404.tsx
new file mode 100644
index 000000000..dff7326ca
--- /dev/null
+++ b/docs/src/pages/404.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { Link, withPrefix } from "gatsby";
+import { Helmet } from "react-helmet";
+import "../styles/notfound.scss";
+
+const NotFound: React.FC = React.memo(() => {
+ return (
+
+
+ Not found - SEB React Components
+
+
+
Page not found
+
+ Return Home
+
+
+ );
+});
+
+export default NotFound;
diff --git a/docs/src/pages/docs/accordion.tsx b/docs/src/pages/docs/accordion.tsx
new file mode 100644
index 000000000..a6d13527f
--- /dev/null
+++ b/docs/src/pages/docs/accordion.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import Docs from "@common/Docs";
+import { Accordion, AccordionItem } from "@sebgroup/react-components/Accordion";
+import { useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
+import { Button } from "@sebgroup/react-components/Button";
+import { Textbox } from "@sebgroup/react-components/Textbox";
+
+const importString: string = require("!raw-loader!@sebgroup/react-components/Accordion/Accordion");
+const importedFiles: Array = [require("!raw-loader!@sebgroup/react-components/Accordion/AccordionItem")];
+const code: string = `
+ First content
+ Second content
+ Third content
+ `;
+
+const AccordionPage: React.FC = () => {
+ const [renderControls, { controls }] = useDynamicForm([
+ {
+ key: "controls",
+ items: [
+ { key: "inverted", label: "inverted", description: "Renders the toggle icons to the right", controlType: "Checkbox" },
+ { key: "alternative", label: "alternative", description: "The alternative accordion uses links-like appearance", controlType: "Checkbox" },
+ ],
+ },
+ ]);
+
+ return (
+
+
+ Illum amet voluptas minus aut esse totam blanditiis. Et corporis vel aspernatur dicta fugit et est placeat. Beatae dolor nisi aut minus placeat et at accusantium.
+
+
+ Asperiores nihil voluptatem
+
+ Omnis quia eum accusamus ipsum. Odit magni voluptas reprehenderit quia iste unde. Quam harum ex consequatur. Ad vitae ipsam et illo architecto aut ipsa laboriosam optio.
+ Quae quis iusto tempore. Quo consequuntur dolorem qui omnis ducimus.
+
+ Exercitationem fugit earum
+ Suscipit quis quia. Et veniam sit est vero. Aut ut est. Et porro saepe aspernatur dolorum rem beatae blanditiis. Repudiandae veritatis ut.
+
+
+
+
+
+ }
+ code={code}
+ controls={renderControls()}
+ />
+ );
+};
+
+export default AccordionPage;
diff --git a/docs/src/pages/docs/breadcrumb.tsx b/docs/src/pages/docs/breadcrumb.tsx
new file mode 100644
index 000000000..f4385a725
--- /dev/null
+++ b/docs/src/pages/docs/breadcrumb.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import Docs from "@common/Docs";
+import { Breadcrumb, BreadcrumbItem } from "@sebgroup/react-components/Breadcrumb";
+import { useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
+
+const homeIcon: JSX.Element = (
+
+
+
+);
+
+const importString: string = require("!raw-loader!@sebgroup/react-components/Breadcrumb/Breadcrumb");
+const importedFiles: Array = [require("!raw-loader!@sebgroup/react-components/Breadcrumb/BreadcrumbItem")];
+const code: string = ` e.preventDefault(); /** Or do something else */}>
+ Home
+ Users
+ Edit
+ `;
+
+const BreadcrumbPage: React.FC = () => {
+ const [renderControls, { controls }] = useDynamicForm([
+ {
+ key: "controls",
+ items: [{ key: "light", label: "light", description: "Enable light mode", controlType: "Checkbox" }],
+ },
+ ]);
+
+ return (
+ {
+ e.preventDefault();
+ alert(`'${e.currentTarget.title}' clicked`);
+ }}
+ light={controls.light}
+ >
+ {homeIcon}
+ Users
+ Edit
+
+ }
+ code={code}
+ controls={renderControls()}
+ />
+ );
+};
+
+export default BreadcrumbPage;
diff --git a/docs/src/pages/docs/button.tsx b/docs/src/pages/docs/button.tsx
new file mode 100644
index 000000000..7ecfe6c9a
--- /dev/null
+++ b/docs/src/pages/docs/button.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import Docs from "@common/Docs";
+import { Button, ButtonSize, ButtonTheme } from "@sebgroup/react-components/Button";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
+
+const importString: string = require("!raw-loader!@sebgroup/react-components/Button/Button");
+const code: string = `Click me `;
+
+const buttonSizes: Array> = [
+ { key: "sm", label: "sm", value: "sm", additionalProps: { wrapperProps: { className: "d-inline-block" } } },
+ { key: "md", label: "md", value: "md", additionalProps: { wrapperProps: { className: "d-inline-block" } } },
+ { key: "lg", label: "lg", value: "lg", additionalProps: { wrapperProps: { className: "d-inline-block" } } },
+];
+const buttonThemes: Array> = [
+ { key: "primary", label: "primary", value: "primary" },
+ { key: "outline-primary", label: "outline-primary", value: "outline-primary" },
+ { key: "secondary", label: "secondary", value: "secondary" },
+ { key: "danger", label: "danger", value: "danger" },
+ { key: "outline-danger", label: "outline-danger", value: "outline-danger" },
+ { key: "dark", label: "dark", value: "dark" },
+ { key: "light", label: "light", value: "light" },
+ { key: "link", label: "link", value: "link" },
+];
+
+const ButtonPage: React.FC = () => {
+ const [renderControls, { controls }] = useDynamicForm([
+ {
+ key: "controls",
+ items: [
+ { key: "size", label: "size", options: buttonSizes, controlType: "Radio" },
+ { key: "theme", label: "theme", options: buttonThemes, controlType: "Dropdown", placeholder: "Select theme" },
+ { key: "disabled", label: "disabled", controlType: "Checkbox" },
+ { key: "block", label: "block", description: "Sets the display of the button to block so it can take up the container width", controlType: "Checkbox" },
+ ],
+ },
+ ]);
+
+ return (
+
+ Click me
+
+ }
+ code={code}
+ controls={renderControls()}
+ />
+ );
+};
+
+export default ButtonPage;
diff --git a/docs/src/pages/docs/buttongroup.tsx b/docs/src/pages/docs/buttongroup.tsx
new file mode 100644
index 000000000..0c7ab2e4a
--- /dev/null
+++ b/docs/src/pages/docs/buttongroup.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import Docs from "@common/Docs";
+import { ButtonGroup, ButtonGroupProps } from "@sebgroup/react-components/ButtonGroup";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
+import { Button } from "@sebgroup/react-components/Button";
+
+const importString: string = require("!raw-loader!@sebgroup/react-components/ButtonGroup/ButtonGroup");
+const code: string = `