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 (
-
); } -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 ( -
-
- {docMD} -
-
- ); -}; - -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 ( -
-
-
How it works?
-
- -
-
-
-
- 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 && ( -
-
No match
-
- )} -
-
-
- -
-
-
-
- - - - } - /> -
-
@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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

Output

-
- -
- -

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

Output

-

Here are sample outputs

-
-
-
-
-
- ); -}; - -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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
-
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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

-
- -
- -

Here is a sample in primary button with icon left

-
- -
- -

Here is a sample in secondary with icon right

-
- -
- -

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 ( -
-
-
-
- {docMD} -
-
- -
-

Output

-

Here are sample outputs

-
-

Modal

-
-

Vertically Centered

-
-

Aside Large Modal

-
-
-

Fullscreen modal

-
-
-
- - ); -}); - -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 ( -
-
-
-
- {docMD} -
-
- -
-

Output

-

Here is a sample output

-
- { - console.log("Notification clicked"); - }} - dismissable={true} - onDismiss={() => setNotification1Toggle(false)} - /> -
-

Notification with actions

-
- setNotification2Toggle(false)} - persist={true} - position="bottom-right" - theme="primary" - /> -
-

Bar notification

-
- { - console.log("Notification clicked"); - }} - dismissable={true} - onDismiss={() => setNotification3Toggle(false)} - style="bar" - position="bottom" - theme="danger" - > -
- {description && ( - - )} -
-
-
-
-
-
- ); -}; - -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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
- {docMD} -
-
- ); -}); - -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 && ( -
-
- -
-
- -
-
- )} -
-
- -
-
-
- -

Options

-
-
- -
-
- -
-
- -
-
-
-
-

Themes

- -
-
-

Tooltip Themes

- -
-
-

Appearance

- -
-
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

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

-
-
-
-
-
-
) => {}} 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)} - /> -
-
-
-
-
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 ( -
-
-
-
- {docMD} -
-
- -
-

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 ( -
-
-
-
- {docMD} -
-
- -
-

Output

-

Here is the basic bootstrap one:

-
-