7 | { children } 8 |
9 | ); 10 | } 11 | 12 | ModalTitle.propTypes = { 13 | children: PropTypes.element, 14 | }; 15 | 16 | export default ModalTitle; 17 | -------------------------------------------------------------------------------- /lib/images/arrow_down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/form/components/FileInput/FileInput.css: -------------------------------------------------------------------------------- 1 | .tyk-file-input__wrapper { 2 | position: relative; 3 | 4 | > input { 5 | padding-block: 6px; 6 | padding-inline: var(--spacing-md); 7 | } 8 | 9 | > button { 10 | background: none; 11 | border: none; 12 | cursor: pointer; 13 | position: absolute; 14 | inset-inline-end: var(--spacing-base); 15 | inset-block-start: 9px; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/form/components/Radio/Radio.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --radio-description-text-padding: 0 0 0 20px; 3 | } 4 | 5 | .tyk-radio { 6 | label { 7 | align-items: center; 8 | display: flex; 9 | } 10 | } 11 | 12 | .tyk-radio--is-disabled { 13 | label, p { 14 | cursor: not-allowed; 15 | opacity: 0.5; 16 | } 17 | } 18 | 19 | .tyk-radio__description-text { 20 | padding: var(--radio-description-text-padding); 21 | } -------------------------------------------------------------------------------- /src/components/Stepper/StepperContext.js: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from 'react'; 2 | 3 | const StepperContext = createContext(); 4 | 5 | export const StepperProvider = StepperContext.Provider; 6 | 7 | export const useStepper = () => { 8 | const context = useContext(StepperContext); 9 | if (!context) { 10 | throw new Error('useStepper must be used within a Stepper component'); 11 | } 12 | return context; 13 | }; -------------------------------------------------------------------------------- /src/components/Stepper/js/Step.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | const Step = ({ children }) => { 5 | return <>{children}; 6 | }; 7 | 8 | Step.displayName = "StepperStep"; 9 | 10 | Step.propTypes = { 11 | children: PropTypes.node.isRequired, 12 | title: PropTypes.string, 13 | description: PropTypes.string, 14 | id: PropTypes.string, 15 | }; 16 | 17 | export default Step; 18 | -------------------------------------------------------------------------------- /src/common/sass/mixins.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | @function theme-color($key: 'primary', $variant: 'base') { 4 | $map: map.get($theme-colors, $key); 5 | 6 | @return map.get($map, $variant); 7 | } 8 | 9 | @function text-scale($level) { 10 | @return map.get(map.get($text-settings, $level), 'font-size'); 11 | } 12 | 13 | @function line-height($level) { 14 | @return map.get(map.get($text-settings, $level), 'line-height'); 15 | } -------------------------------------------------------------------------------- /src/form/components/Select/images/arrow_down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/sass/common/sass/mixins.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | @function theme-color($key: 'primary', $variant: 'base') { 4 | $map: map.get($theme-colors, $key); 5 | 6 | @return map.get($map, $variant); 7 | } 8 | 9 | @function text-scale($level) { 10 | @return map.get(map.get($text-settings, $level), 'font-size'); 11 | } 12 | 13 | @function line-height($level) { 14 | @return map.get(map.get($text-settings, $level), 'line-height'); 15 | } -------------------------------------------------------------------------------- /src/components/Table/js/body.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { tableContext } from '../tableContext'; 3 | import { Row } from './row'; 4 | 5 | export function Body() { 6 | const { state } = useContext(tableContext); 7 | const { rows } = state; 8 | 9 | return ( 10 | 11 | { 12 | rows.map((row, i) =>
7 | {children}
8 |
9 | );
10 | }
11 |
12 | CardFooter.propTypes = {
13 | children: PropTypes.oneOfType([
14 | PropTypes.element,
15 | PropTypes.node,
16 | PropTypes.string,
17 | ]),
18 | };
19 |
20 | export default CardFooter;
21 |
--------------------------------------------------------------------------------
/src/components/Modal/js/ModalBody.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function ModalBody({ children }) {
5 | return (
6 |
7 | { children }
8 |
9 | );
10 | }
11 |
12 | ModalBody.propTypes = {
13 | children: PropTypes.oneOfType([
14 | PropTypes.element,
15 | PropTypes.node,
16 | PropTypes.string,
17 | ]),
18 | };
19 |
20 | export default ModalBody;
21 |
--------------------------------------------------------------------------------
/src/form/components/Radio/Readme.md:
--------------------------------------------------------------------------------
1 | *Themes*
2 | ```js
3 |
7 | { children }
8 |
9 | );
10 | }
11 |
12 | ModalFooter.propTypes = {
13 | children: PropTypes.oneOfType([
14 | PropTypes.element,
15 | PropTypes.node,
16 | PropTypes.string,
17 | ]),
18 | };
19 |
20 | export default ModalFooter;
21 |
--------------------------------------------------------------------------------
/src/components/Card/CardSubTitle.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function CardSubTitle({
5 | children,
6 | }) {
7 | return (
8 | 9 | {children} 10 |
11 | ); 12 | } 13 | 14 | CardSubTitle.propTypes = { 15 | children: PropTypes.oneOfType([ 16 | PropTypes.element, 17 | PropTypes.node, 18 | PropTypes.string, 19 | ]), 20 | }; 21 | 22 | export default CardSubTitle; 23 | -------------------------------------------------------------------------------- /src/components/FixedWrapper/FixedWrapper.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --fixed-wrapper-top: 0; 3 | --fixed-wrapper-left: 0; 4 | --fixed-wrapper-right: 0; 5 | } 6 | 7 | .tyk-fixed-wrapper { 8 | inset-inline-start: var(--fixed-wrapper-left); 9 | inset-inline-end: var(--fixed-wrapper-right); 10 | position: sticky; 11 | inset-block-start: var(--fixed-wrapper-top); 12 | z-index: 8; 13 | } 14 | 15 | .tyk-fixed-wrapper--scrolled { 16 | box-shadow: 2px 2px 5px rgba(0 0 0 / 10%); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/Card/CardTitleIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | function CardTitleIcon({ 5 | children, 6 | }) { 7 | return ( 8 |
9 | {children}
10 |
11 | );
12 | }
13 |
14 | CardTitleIcon.propTypes = {
15 | children: PropTypes.oneOfType([
16 | PropTypes.element,
17 | PropTypes.node,
18 | PropTypes.string,
19 | ]),
20 | };
21 |
22 | export default CardTitleIcon;
23 |
--------------------------------------------------------------------------------
/src/components/InfoNote/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Message from '../Message';
5 |
6 | function InfoNote({ children }) {
7 | return (
8 |
9 | {children}
10 |
11 | );
12 | }
13 |
14 | CardTitleGroup.propTypes = {
15 | children: PropTypes.oneOfType([
16 | PropTypes.element,
17 | PropTypes.node,
18 | PropTypes.string,
19 | ]),
20 | };
21 |
22 | export default CardTitleGroup;
23 |
--------------------------------------------------------------------------------
/logo/index.js:
--------------------------------------------------------------------------------
1 | const React = require('react')
2 | const { version } = require('../package.json')
3 |
4 | const Logo = () => {
5 | return (
6 |
11 | 
12 | v.{version}
13 |
14 | );
15 | };
16 |
17 | module.exports = Logo
--------------------------------------------------------------------------------
/src/components/Panel/js/PanelFooter.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function PanelFooter(props) {
5 | const { children } = props;
6 | return (
7 |
8 | { children }
9 |
10 | );
11 | }
12 |
13 | PanelFooter.propTypes = {
14 | children: PropTypes.oneOfType([
15 | PropTypes.element,
16 | PropTypes.node,
17 | PropTypes.string,
18 | ]),
19 | };
20 |
21 | export default PanelFooter;
22 |
--------------------------------------------------------------------------------
/src/components/Collapsible/Collapsible.css:
--------------------------------------------------------------------------------
1 | .collapse-exit,
2 | .collapse-exit-active,
3 | .collapse-exit-done {
4 | block-size: 0;
5 | }
6 |
7 | .collapse-wrapper {
8 | overflow: hidden;
9 | transition: all .2s;
10 | }
11 |
12 | .collapse-horizontal-exit,
13 | .collapse-horizontal-exit-active,
14 | .collapse-horizontal-exit-done {
15 | inline-size: 0;
16 | }
17 |
18 | .collapse-horizontal-enter,
19 | .collapse-horizontal-enter-active,
20 | .collapse-horizontal-enter-done {
21 | inline-size: 100%;
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/Modal/js/ModalHeader.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function ModalHeader({ children }) {
5 | return (
6 |
7 | { children }
8 |
9 | );
10 | }
11 |
12 | ModalHeader.propTypes = {
13 | children: PropTypes.oneOfType([
14 | PropTypes.arrayOf(PropTypes.node),
15 | PropTypes.element,
16 | PropTypes.node,
17 | PropTypes.string,
18 | ]),
19 | };
20 |
21 | export default ModalHeader;
22 |
--------------------------------------------------------------------------------
/src/components/Sidebar/Sidebar.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --sidebar-background-color: white;
3 | --sidebar-top: 58px;
4 | --sidebar-height: calc(100vh - 58px);
5 | --sidebar-width: 280px;
6 | --sidebar-padding: 0;
7 | }
8 |
9 | .tyk-sidebar {
10 | background-color: var(--sidebar-background-color);
11 | block-size: var(--sidebar-height);
12 | flex: 0 0 var(--sidebar-width);
13 | padding: var(--sidebar-padding);
14 | position: sticky;
15 | overflow: auto;
16 | inset-block-start: var(--sidebar-top);
17 | }
18 |
--------------------------------------------------------------------------------
/src/utils/debounce/index.js:
--------------------------------------------------------------------------------
1 | export default (func, wait, immediate) => {
2 | let timeout;
3 | return function debouncer(...args) {
4 | const context = this;
5 | const later = () => {
6 | timeout = null;
7 | if (!immediate) {
8 | func.apply(context, args);
9 | }
10 | };
11 | const callNow = immediate && !timeout;
12 | clearTimeout(timeout);
13 | timeout = setTimeout(later, wait);
14 | if (callNow) {
15 | func.apply(context, args);
16 | }
17 | };
18 | };
19 |
--------------------------------------------------------------------------------
/src/components/Navigation/js/NavigationItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function NavigationItem({ children }) {
5 | return (
6 | 10 | {children} 11 |
12 | ); 13 | } 14 | 15 | CardTitle.propTypes = { 16 | maxLines: PropTypes.number, 17 | children: PropTypes.oneOfType([ 18 | PropTypes.element, 19 | PropTypes.node, 20 | PropTypes.string, 21 | ]), 22 | }; 23 | 24 | export default CardTitle; 25 | -------------------------------------------------------------------------------- /docs/PublishingGuide.md: -------------------------------------------------------------------------------- 1 | *In order to publish the changes, please do the following* 2 | - After PR merge, make a new build and generates prod code of the library 3 | 4 | ```shell static 5 | npm run build-prod 6 | ``` 7 | 8 | - Increase the library version in `package.json` 9 | 10 | - Regenerate the `package-lock.json` file 11 | 12 | ```shell static 13 | npm i 14 | ``` 15 | 16 | ```shell static 17 | git add . 18 | ``` 19 | 20 | - Commit and Push changes 21 | ```shell static 22 | git commit -m "bump version" 23 | ``` 24 | 25 | - Publish the package to npm 26 | ```shell static 27 | npm publish 28 | ``` -------------------------------------------------------------------------------- /src/components/InfoNote/InfoNote.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import InfoNote from './index'; 3 | 4 | describe('InfoNote', () => { 5 | const selectors = { 6 | message: '.tyk-message', 7 | }; 8 | 9 | it('renders a Message component with the info theme', () => { 10 | const content = 'The Content'; 11 | cy 12 | .mount( 13 |-
8 | {children}
9 |
10 |
14 | );
15 | }
16 |
17 | CardBody.propTypes = {
18 | align: PropTypes.oneOf(['top', 'center', 'bottom']),
19 | children: PropTypes.oneOfType([
20 | PropTypes.element,
21 | PropTypes.node,
22 | PropTypes.string,
23 | ]),
24 | };
25 |
26 | export default CardBody;
27 |
--------------------------------------------------------------------------------
/.github/workflows/jira-pr-validator.yaml:
--------------------------------------------------------------------------------
1 | name: Validate PR against Jira
2 |
3 | on:
4 | pull_request:
5 | types: [opened, synchronize, reopened, edited]
6 |
7 | concurrency:
8 | group: jira-validator-${{ github.event.pull_request.number }}
9 | cancel-in-progress: true
10 |
11 | jobs:
12 | validate:
13 | if: ${{ !github.event.pull_request.draft }}
14 | runs-on: ubuntu-latest
15 | steps:
16 | - name: Validate Jira ticket
17 | uses: TykTechnologies/jira-linter@main
18 | with:
19 | jira-base-url: 'https://tyktech.atlassian.net'
20 | jira-api-token: ${{ secrets.JIRA_TOKEN }}
21 |
22 |
--------------------------------------------------------------------------------
/src/components/RevealPanel/RevealPanel.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import RevealPanel from './index';
3 |
4 | function Component() {
5 | return (
6 |
11 | {children}
12 |
13 |
7 | e and scrambled it to make a type specimen book.
8 | It has survived not only five centuries, but also
9 |
10 | Panel content to make a type specimen book.
11 |
12 |
13 | );
14 | }
15 |
16 | describe('RevealPanel.test.js', () => {
17 | it('renders RevealPanel component', () => {
18 | cy.mount(10 | {children} 11 |
12 | ); 13 | } 14 | 15 | CardSummary.propTypes = { 16 | maxLines: PropTypes.oneOfType([ 17 | PropTypes.number, 18 | PropTypes.string, 19 | ]), 20 | children: PropTypes.oneOfType([ 21 | PropTypes.element, 22 | PropTypes.node, 23 | PropTypes.string, 24 | ]), 25 | }; 26 | 27 | export default CardSummary; 28 | -------------------------------------------------------------------------------- /src/hooks/useTimeout/index.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from 'react'; 2 | 3 | const useTimeout = (callback, delay) => { 4 | const savedCallback = useRef(); 5 | 6 | useEffect( 7 | () => { 8 | savedCallback.current = callback; 9 | }, 10 | [callback], 11 | ); 12 | 13 | useEffect( 14 | () => { 15 | function tick() { 16 | savedCallback.current(); 17 | } 18 | if (delay !== null) { 19 | const id = setTimeout(tick, delay); 20 | return () => clearTimeout(id); 21 | } 22 | 23 | return () => {}; 24 | }, 25 | [delay], 26 | ); 27 | }; 28 | 29 | /** @component */ 30 | export default useTimeout; 31 | -------------------------------------------------------------------------------- /src/components/RevealPanel/images/drag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | -------------------------------------------------------------------------------- /src/components/CollapsibleList/js/CollapsibleListItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | function CollapsibleListItem(props) { 5 | const { 6 | className = '', 7 | children, 8 | } = props; 9 | 10 | return ( 11 |
14 | {hasError ? '!' : number}
15 |
16 | );
17 | };
18 |
19 | StepNumber.propTypes = {
20 | number: PropTypes.number,
21 | isCompleted: PropTypes.bool,
22 | isActive: PropTypes.bool,
23 | hasError: PropTypes.bool
24 | };
25 |
26 | export default StepNumber;
--------------------------------------------------------------------------------
/src/common/css/layout.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | background-color: var(--color-background);
7 | color: var(--text-color);
8 | font-size: var(--sm-font-size);
9 | line-height: var(--sm-line-height);
10 | font-family: var(--font-family-regular);
11 | }
12 |
13 | .tyk-main-wrapper {
14 | display: flex;
15 | flex-wrap: nowrap;
16 | }
17 |
18 | .tyk-main-content-wrapper {
19 | flex: 1;
20 | }
21 |
22 | .well {
23 | background: transparent;
24 | border: var(--general-border-width) solid var(--color-secondary-dark);
25 | border-radius: var(--general-border-radius);
26 | box-shadow: none;
27 |
28 | &.has-error {
29 | border-color: var(--color-danger-base);
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/utils/debounce/styleguidist-example.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import debounce from './index';
5 |
6 | function Debounce({ func, wait, immediate }) {
7 | const cbb = (e) => {
8 | console.log(`Debounced log after ${wait}ms:`, e.target.value);
9 | };
10 | return (
11 |
12 |
16 |
17 | );
18 | }
19 |
20 | Debounce.propTypes = {
21 | func: PropTypes.func,
22 | wait: PropTypes.number,
23 | immediate: PropTypes.bool,
24 | };
25 |
26 | export default Debounce;
27 |
--------------------------------------------------------------------------------
/src/components/Card/CardHeader.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function CardHeader({
5 | right = null,
6 | children,
7 | }) {
8 | return (
9 |
10 | {children &&
13 | );
14 | }
15 |
16 | CardHeader.propTypes = {
17 | right: PropTypes.oneOfType([
18 | PropTypes.element,
19 | PropTypes.node,
20 | PropTypes.string,
21 | ]),
22 | children: PropTypes.oneOfType([
23 | PropTypes.element,
24 | PropTypes.node,
25 | PropTypes.string,
26 | ]),
27 | };
28 |
29 | export default CardHeader;
30 |
--------------------------------------------------------------------------------
/src/components/Navigation/Navigation.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Navigation from './index';
3 |
4 | describe('Navigation', () => {
5 | const selectors = {
6 | navigation: '.tyk-navigation',
7 | item: '.tyk-navigation-item',
8 | };
9 |
10 | it('renders the component', () => {
11 | cy.mount({children}
}
11 | {right && {right}
}
12 |
7 | {Boolean(label) && }
8 |
10 | );
11 | });
12 |
13 | ButtonGroup.propTypes = {
14 | children: PropTypes.oneOfType([
15 | PropTypes.arrayOf(PropTypes.node),
16 | PropTypes.node,
17 | PropTypes.element,
18 | PropTypes.string,
19 | ]),
20 | className: PropTypes.string,
21 | label: PropTypes.string,
22 | };
23 |
24 | export default ButtonGroup;
25 |
--------------------------------------------------------------------------------
/.github/workflows/visor.yaml:
--------------------------------------------------------------------------------
1 | name: Visor
2 |
3 | on:
4 | pull_request:
5 | types: [opened, synchronize]
6 | issues:
7 | types: [opened]
8 | issue_comment:
9 | types: [created]
10 |
11 | permissions:
12 | contents: read
13 | pull-requests: write
14 | issues: write
15 | checks: write
16 |
17 | jobs:
18 | visor:
19 | runs-on: ubuntu-latest
20 | steps:
21 | - name: Checkout code
22 | uses: actions/checkout@v4
23 | - uses: probelabs/visor@main
24 | with:
25 | app-id: ${{ secrets.PROBE_APP_ID }}
26 | private-key: ${{ secrets.PROBE_APP_PRIVATE_KEY }}
27 | installation-id: ${{ secrets.PROBE_APP_INSTALLATION_ID }}
28 | env:
29 | GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}
30 |
--------------------------------------------------------------------------------
/docs/Contributing.md:
--------------------------------------------------------------------------------
1 | Contributions to the current library are welcome, so please follow these steps each time you want to make a change:
2 |
3 | - Create a GH issue / RFC, describing the necessary changes [here](https://github.com/TykTechnologies/tyk-ui/issues/new).
4 | - Create a component
5 | - Raise a PR for approval with initial documentation
6 | - Write a unit test
7 | - Document a component in the following format
8 |
9 | ```md
10 | 1. Description.
11 | 2. Usage with different combinations of examples.
12 | 3. Best practices.
13 | 4. Documents the proptypes for the component.
14 | 5. References if any
15 | ```
16 |
17 | ```md
18 | For internal component and proptypes documentation follow the guide here
19 | - https://react-styleguidist.js.org/docs/documenting/
20 | ```
21 |
--------------------------------------------------------------------------------
/src/form/components/Dropdown2/DropdownItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import List from '../../../components/List';
4 | import useDropdowContext from './useDrodpownContext';
5 |
6 | function DropdownItem({
7 | children,
8 | value,
9 | }) {
10 | const { onChange, value: dropdownValue } = useDropdowContext();
11 | return (
12 | {children}
9 | -
11 |
20 | { children }
21 |
22 | );
23 | }
24 |
25 | Row.propTypes = {
26 | children: PropTypes.oneOfType([
27 | PropTypes.element,
28 | PropTypes.node,
29 | ]),
30 | /** Css classes that can be passed to the Row element */
31 | className: PropTypes.string,
32 | /** Removes all the spaces between column */
33 | nogutters: PropTypes.bool,
34 | };
35 |
36 | export default Row;
37 |
--------------------------------------------------------------------------------
/src/common/images/arrow-down.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
42 |
--------------------------------------------------------------------------------
/cypress/support/commands.js:
--------------------------------------------------------------------------------
1 | // ***********************************************
2 | // This example commands.js shows you how to
3 | // create various custom commands and overwrite
4 | // existing commands.
5 | //
6 | // For more comprehensive examples of custom
7 | // commands please read more here:
8 | // https://on.cypress.io/custom-commands
9 | // ***********************************************
10 | //
11 | //
12 | // -- This is a parent command --
13 | // Cypress.Commands.add('login', (email, password) => { ... })
14 | //
15 | //
16 | // -- This is a child command --
17 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
18 | //
19 | //
20 | // -- This is a dual command --
21 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
22 | //
23 | //
24 | // -- This will overwrite an existing command --
25 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
26 |
--------------------------------------------------------------------------------
/src/components/Collapsible/Readme.md:
--------------------------------------------------------------------------------
1 |
2 | Collapsible component usage example
3 | ```jsx
4 | import React, {useState} from 'react';
5 | import Button from '../Button';
6 |
7 | const [toggle, setToggle] = useState(false);
8 |
9 | <>
10 |
11 |
17 |
18 | { children }
19 |
20 |
21 | );
22 | }
23 |
24 | AccordionItemContent.propTypes = {
25 | children: PropTypes.oneOfType([
26 | PropTypes.arrayOf(PropTypes.node),
27 | PropTypes.node,
28 | PropTypes.element,
29 | PropTypes.string,
30 | ]),
31 | className: PropTypes.string,
32 | };
33 |
34 | export default AccordionItemContent;
35 |
--------------------------------------------------------------------------------
/cypress/support/component.js:
--------------------------------------------------------------------------------
1 | // ***********************************************************
2 | // This example support/component.js is processed and
3 | // loaded automatically before your test files.
4 | //
5 | // This is a great place to put global configuration and
6 | // behavior that modifies Cypress.
7 | //
8 | // You can change the location of this file or turn off
9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 |
16 | // Import commands.js using ES2015 syntax:
17 | import './commands';
18 |
19 | import '@cypress/code-coverage/support';
20 |
21 | // Alternatively you can use CommonJS syntax:
22 | // require('./commands')
23 |
24 | import { mount } from 'cypress/react18';
25 | import '../../src/index.css';
26 |
27 | Cypress.Commands.add('mount', mount);
28 |
29 | // Example use:
30 | // cy.mount(
11 | {
12 | label
13 | ?
14 | : null
15 | }
16 | {!disabled && !readOnly && (
17 |
23 | )}
24 |
25 | );
26 | }
27 |
28 | Header.propTypes = {
29 | disabled: PropTypes.bool,
30 | readOnly: PropTypes.bool,
31 | onAddRow: PropTypes.func,
32 | addButtonName: PropTypes.string,
33 | label: PropTypes.oneOfType([
34 | PropTypes.string,
35 | PropTypes.element,
36 | PropTypes.node,
37 | ]),
38 | };
39 |
40 | export default Header;
41 |
--------------------------------------------------------------------------------
/src/components/List/Readme.md:
--------------------------------------------------------------------------------
1 | ```js
2 | -
3 |
-
12 |
- 13 | Item 1 14 | 15 |
- 16 | Item 2 17 | 18 |
- 19 | Item 3 20 | 21 |
- 22 | Item 4 23 | 24 |
-
29 |
- 30 | Item 1 31 | 32 |
- 33 | Item 2 34 | 35 |
- 36 | Item 3 37 | 38 |
- 39 | Item 4 40 | 41 |
10 | {steps.map((step, index) => (
11 |
30 | );
31 | };
32 |
33 | export default StepList;
--------------------------------------------------------------------------------
/src/components/CopyToClipboard/CopyToClipboard.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CopyToClipboard from './index';
3 | import Button from '../Button';
4 |
5 | describe('CoopyToClipboard', () => {
6 | it('Test component rendering and Test copy functionality', () => {
7 | const textToCopy = 'boooo';
8 | const displayText = 'BUTTON_TEST_NAME';
9 | cy.mount(
10 |
18 |
28 | ))}
29 |
11 | {
17 | document.querySelector('.dummy').innerText = textToCopy;
18 | }}
19 | />
20 | PLACEHOLDER
21 |
,
22 | );
23 | cy.get('span.dummy').invoke('text').should('eq', 'PLACEHOLDER');
24 | cy.contains(textToCopy).should('not.exist');
25 | cy.contains(displayText).should('exist').click();
26 | cy.get('span.dummy').invoke('text').should('eq', textToCopy);
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/src/form/redux-form/FieldToggle/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { fromJS } from 'immutable';
4 |
5 | import Toggle from '../../components/Toggle';
6 |
7 | class FieldToggle extends Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.handleOnChange = this.handleOnChange.bind(this);
12 | }
13 |
14 | handleOnChange(value) {
15 | const { input } = this.props;
16 |
17 | input.onChange(fromJS(value));
18 | }
19 |
20 | render() {
21 | const { children, ...props } = this.props;
22 |
23 | return (
24 |
26 | {children}
27 |
28 | );
29 | }
30 |
31 | Pill.propTypes = {
32 | children: PropTypes.oneOfType([
33 | PropTypes.arrayOf(PropTypes.node),
34 | PropTypes.node,
35 | PropTypes.element,
36 | PropTypes.string,
37 | ]),
38 | /** Css classes that can be passed to the Pill element */
39 | className: PropTypes.string,
40 | /** Theme that can be applied to a Pill */
41 | theme: PropTypes.string,
42 | };
43 |
44 | export default Pill;
45 |
--------------------------------------------------------------------------------
/src/hooks/useComponentSize/index.js:
--------------------------------------------------------------------------------
1 | import { useCallback, useState, useLayoutEffect } from 'react';
2 |
3 | const getSize = (el) => {
4 | if (!el) {
5 | return {
6 | width: 0,
7 | height: 0,
8 | };
9 | }
10 |
11 | return {
12 | width: el.offsetWidth,
13 | height: el.offsetHeight,
14 | };
15 | };
16 |
17 | const useComponentSize = (ref) => {
18 | const [componentSize, setComponentSize] = useState(getSize(ref ? ref.current : {}));
19 | const handleResize = useCallback(() => {
20 | if (ref.current) {
21 | setComponentSize(getSize(ref.current));
22 | }
23 | }, [ref]);
24 |
25 | useLayoutEffect(() => {
26 | handleResize();
27 |
28 | let resizeObserver = new ResizeObserver(() => {
29 | handleResize();
30 | });
31 | resizeObserver.observe(ref.current);
32 |
33 | return () => {
34 | resizeObserver.disconnect(ref.current);
35 | resizeObserver = null;
36 | };
37 | }, [ref.current]);
38 |
39 | return componentSize;
40 | };
41 |
42 | /** @component */
43 | export default useComponentSize;
44 |
--------------------------------------------------------------------------------
/src/components/Accordion/js/AccordionItemTrigger.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Icon from '../../Icon';
5 | import AccordionItemContext from './AccordionItemContext';
6 |
7 | function ItemTrigger({ wrap }) {
8 | const { collapsed, disabled, toggleChange } = useContext(AccordionItemContext);
9 |
10 | const iconType = collapsed ? 'chevron-down' : 'chevron-up';
11 | const classes = [
12 | 'tyk-accordion__trigger',
13 | disabled && 'tyk-accordion__trigger--disabled',
14 | ].filter(Boolean).join(' ');
15 | const trigger = (
16 |
24 | );
25 |
26 | return wrap
27 | ? {trigger}
28 | : trigger;
29 | }
30 |
31 | ItemTrigger.propTypes = {
32 | wrap: PropTypes.bool,
33 | };
34 |
35 | export default ItemTrigger;
36 |
--------------------------------------------------------------------------------
/src/components/Icon/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function Icon({
5 | className,
6 | family,
7 | type,
8 | weight,
9 | ...rest
10 | }) {
11 | function getCSSClasses() {
12 | const fontFamily = family || 'fa';
13 | const fontWeight = fontFamily === 'fa' ? `fa-${weight || 'regular'}` : '';
14 |
15 | return [
16 | 'tyk-icon',
17 | fontFamily !== 'fa' && fontFamily,
18 | `${fontFamily}-${type}`,
19 | fontWeight,
20 | className,
21 | ].filter(Boolean).join(' ');
22 | }
23 |
24 | return ;
25 | }
26 |
27 | Icon.propTypes = {
28 | // Additional CSS classes to apply
29 | className: PropTypes.string,
30 | // Font family to use. Default is 'fa'.
31 | family: PropTypes.string,
32 | // Icon type to use
33 | type: PropTypes.string.isRequired,
34 | // Icon weight to use. Only applicable for Font Awesome icons. Default is 'regular'. Also supports 'light' and 'solid'
35 | weight: PropTypes.string
36 | };
37 |
38 | export default Icon;
39 |
--------------------------------------------------------------------------------
/src/form/redux-form/FieldInput/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Input from '../../components/Input';
5 |
6 | class FieldInput extends Component {
7 | getInputError() {
8 | const { meta, validationmessages } = this.props;
9 | const { touched, error, warning } = meta;
10 | let message = null;
11 |
12 | if (touched && error && validationmessages[error]) {
13 | message = validationmessages[error];
14 | } else if (touched && warning) {
15 | message = 'warning';
16 | }
17 |
18 | return message;
19 | }
20 |
21 | render() {
22 | const { input, ...rest } = this.props;
23 |
24 | return (
25 |
31 | );
32 | }
33 | }
34 |
35 | FieldInput.propTypes = {
36 | meta: PropTypes.instanceOf(Object),
37 | input: PropTypes.instanceOf(Object),
38 | validationmessages: PropTypes.instanceOf(Object),
39 | };
40 |
41 | export default FieldInput;
42 |
--------------------------------------------------------------------------------
/src/typography/Readme.md:
--------------------------------------------------------------------------------
1 | -
2 |
3 | **Headings**
4 | ```js
5 | Heading one
6 |Heading two
7 |Heading three
8 |Heading four
9 |Heading five
10 | ``` 11 | **Colors** 12 | ```js 13 |Heading three
14 |Heading three
15 |Heading three
16 |Heading three
17 |Heading three
18 | ``` 19 | **Dashboard Usage** 20 | ```js 21 |H1. Product Page Header
22 |H2. Form Section Header
23 |H3. Name panel header
24 |H4. Sub Panel Header
25 |H5. Titles
26 |p.regular Regular font family paragraph
27 |p.medium Medium font family paragraph
28 | link medium 29 |30 | link bold 31 |
32 |
33 |
Section title
34 |Sub Section title
35 |Section Group title
36 | ``` -------------------------------------------------------------------------------- /src/components/TextEllipsis/TextEllipsis.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import TextEllipsis from './index'; 3 | 4 | function Component() { 5 | return ( 6 |
7 |
12 | );
13 | }
14 |
15 | describe('TextEllipsis', () => {
16 | const classes = {
17 | floatingContainer: 'floating-container',
18 | };
19 | it('should show just first 10 chars followed by "..."', () => {
20 | cy.mount(
21 | {field?.props?.label}
22 |
23 | );
24 | })
25 | }
26 | Delete
27 | custom content
;
36 | cy.mount(-
27 | { children }
28 |
22 |
25 | ```
26 |
27 | **Linear loader**
28 | ```js
29 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
23 |
26 | Content of a column
27 |
28 |
57 | Content of a column
58 |
59 | The Content
15 |
27 |
28 |
30 |
,
31 | )
32 | .get(selectors.scrolled)
33 | .should('not.exist');
34 |
35 | cy.scrollTo(0, 500);
36 | cy.get(selectors.scrolled)
37 | .should('exist');
38 |
39 | cy.scrollTo(0, 0);
40 | cy.get(selectors.scrolled)
41 | .should('not.exist');
42 | });
43 | });
44 |
--------------------------------------------------------------------------------
/src/components/Accordion/js/AccordionItemContent.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import React from 'react';
3 |
4 | import AccordionContext from './AccordionContext';
5 | import AccordionItemContext from './AccordionItemContext';
6 | import AccordionItemContent from './AccordionItemContent';
7 |
8 | function Component({
9 | usearrowastrigger = false,
10 | arrow = { position: 'right', expandToContent: false },
11 | collapsed = false,
12 | disabled = false,
13 | className,
14 | children,
15 | }) {
16 | return (
17 | The Content
29 |
22 | { children }
23 |
24 | );
25 | }
26 |
27 | Column.propTypes = {
28 | /**
29 | * This property describes how the column element will be aligned vertically
30 | * within a Row: bottom, center, top
31 | */
32 | align: PropTypes.string,
33 | /** Css classes that can be passed to the column element */
34 | className: PropTypes.string,
35 | /**
36 | * Specifies the size of the column within a Row (values must be between 1 - 12)
37 | */
38 | size: PropTypes.string.isRequired,
39 | /**
40 | * Specifies the left gap a column can have within a Row (values must be between 1 - 12)
41 | */
42 | offset: PropTypes.string,
43 | children: PropTypes.oneOfType([
44 | PropTypes.element,
45 | PropTypes.string,
46 | PropTypes.object,
47 | PropTypes.node,
48 | ]),
49 | };
50 |
51 | export default Column;
52 |
--------------------------------------------------------------------------------
/src/form/redux-form/FieldCodeEditor/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { fromJS } from 'immutable';
4 |
5 | import CodeEditor from '../../components/CodeEditor';
6 |
7 | class FieldCodeEditor extends Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.handleOnChange = this.handleOnChange.bind(this);
12 | }
13 |
14 | handleOnChange(value) {
15 | const { input } = this.prop;
16 | const { onChange } = input;
17 |
18 | onChange(fromJS(value));
19 | }
20 |
21 | getInputError() {
22 | const { meta, validationmessages } = this.props;
23 | const { touched, error, warning } = meta;
24 | let message = null;
25 |
26 | if (touched && error && validationmessages[error]) {
27 | message = validationmessages[error];
28 | } else if (touched && warning) {
29 | message = 'warning';
30 | }
31 |
32 | return message;
33 | }
34 |
35 | render() {
36 | const { input, ...rest } = this.props;
37 |
38 | return (
39 | {loader}
21 | : loader;
22 | }
23 |
24 | Loader.propTypes = {
25 | /** Add a class to loader */
26 | className: PropTypes.string,
27 | /** The type of the loader (linear || circular || brand) */
28 | type: PropTypes.string,
29 | /** The size of the loader (small || big). Only applicable to the circular loader. */
30 | size: PropTypes.string,
31 | /** Position of the loader (absolute || relative) */
32 | position: PropTypes.string,
33 | /** Defines whether loader should be rendered with or without background */
34 | withbackground: PropTypes.bool,
35 | /** Only applicable to the linear loader. Stops the animation and fills the entire bar. */
36 | isLoaded: PropTypes.bool,
37 | };
38 |
39 | export default Loader;
40 |
--------------------------------------------------------------------------------
/src/components/Navigation/Navigation.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --navigation-background-color: white;
3 | --navigation-item-padding-y: var(--spacing-sm);
4 | --navigation-item-padding-x: var(--spacing-md);
5 | --navigation-item-background-color: white;
6 | --navigation-item-color: var(--text-color);
7 | --navigation-item-hover-background-color: var(--color-primary-base);
8 | --navigation-item-hover-color: white;
9 | --navigation-item-active-background-color: var(--color-primary-dark);
10 | --navigation-item-active-color: white;
11 | --navigation-padding: 0;
12 | }
13 |
14 | .tyk-navigation {
15 | background-color: var(--navigation-background-color);
16 | block-size: 100%;
17 | overflow: auto;
18 | padding: var(--navigation-padding);
19 | inline-size: 100%;
20 |
21 | .tyk-navigation-item {
22 | inline-size: 100%;
23 |
24 | a {
25 | color: var(--navigation-item-color);
26 | display: flex;
27 | padding-block: var(--navigation-item-padding-y);
28 | padding-inline: var(--navigation-item-padding-x);
29 | text-decoration: none;
30 | transition: all .2s ease;
31 |
32 | &:hover {
33 | background-color: var(--navigation-item-hover-background-color);
34 | color: var(--navigation-item-hover-color);
35 | }
36 |
37 | &.active {
38 | background-color: var(--navigation-item-active-background-color);
39 | color: var(--navigation-item-active-color);
40 | }
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/common/css/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: Inter-Bold;
3 | src: url('../fonts/inter/Inter-Bold.woff2') format('woff2'),
4 | url('../fonts/inter/Inter-Bold.woff') format('woff');
5 | font-weight: normal;
6 | font-style: normal;
7 | }
8 |
9 | @font-face {
10 | font-family: Inter-Light;
11 | src: url('../fonts/inter/Inter-Light.woff2') format('woff2'),
12 | url('../fonts/inter/Inter-Light.woff') format('woff');
13 | font-weight: normal;
14 | font-style: normal;
15 | }
16 |
17 | @font-face {
18 | font-family: Inter-Medium;
19 | src: url('../fonts/inter/Inter-Medium.woff2') format('woff2'),
20 | url('../fonts/inter/Inter-Medium.woff') format('woff');
21 | font-weight: normal;
22 | font-style: normal;
23 | }
24 |
25 | @font-face {
26 | font-family: Inter-Regular;
27 | src: url('../fonts/inter/Inter-Regular.woff2') format('woff2'),
28 | url('../fonts/inter/Inter-Regular.woff') format('woff');
29 | font-weight: normal;
30 | font-style: normal;
31 | }
32 |
33 | @font-face {
34 | font-family: Inter-SemiBold;
35 | src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2'),
36 | url('../fonts/inter/Inter-SemiBold.woff') format('woff');
37 | font-weight: normal;
38 | font-style: normal;
39 | }
40 |
41 | @font-face {
42 | font-family: tykon;
43 | src: url('../fonts/tykon.woff2') format('woff2'),
44 | url('../fonts/tykon.woff') format('woff');
45 | font-weight: normal;
46 | font-style: normal;
47 | }
48 |
--------------------------------------------------------------------------------
/docs/GettingStarted.md:
--------------------------------------------------------------------------------
1 | Tyk-ui is library of reusable presentational UI components.
2 |
3 | ### **Installation**
4 |
5 | ```html
6 | npm install --save @tyk-technologies/tyk-ui
7 | ```
8 |
9 | ### **Loading tyk-ui into the project**
10 |
11 |
12 | - *Loading React components*
13 |
14 | ```jsx static
15 | import {
16 | Button,
17 | Column,
18 | Dropdown,
19 | Icon,
20 | InfoNote,
21 | Message,
22 | Modal,
23 | Panel,
24 | Row
25 | } from '@tyk-technologies/tyk-ui';
26 | ```
27 |
28 | ```md
29 | *Note*: for the projects that don't have React this is not usable, and we can use just the styling.
30 | ```
31 |
32 | - *Import the css before any other styles from your main js file*
33 | ```javascript static
34 | import '@tyk-technologies/tyk-ui/src/index.css';
35 | ```
36 |
37 | - *Loading SASS files (only if your project uses SASS)*
38 |
39 | ```scss
40 | @import '~@tyk-technologies/tyk-ui/lib/sass/index';
41 | ```
42 |
43 | ```html
44 |
45 | ```
46 |
47 | ```md
48 | NOTE : For projects that don't SASS but just pure css we are also exposing the compiled styles.
49 | ```
50 | ### Testing on local
51 |
52 | - You can test the changes on your local dev environment by replacing the your `@tyk-technologies/tyk-ui/lib` with newly built lib
53 |
54 | eg
55 | ```md
56 | cp -a lib/. /Users/me/go/src/github.com/TykTechnologies/tyk-analytics/webclient/node_modules/@tyk-technologies/tyk-ui/lib
57 | ```
--------------------------------------------------------------------------------
/src/components/Stepper/js/StepperButtons.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import Button from "../../Button";
4 | import { useStepper } from "../StepperContext";
5 | import Buttons from "./Buttons";
6 |
7 | export const DefaultButtons = ({
8 | nextBtnTxt,
9 | finishBtnTxt,
10 | backBtnTxt,
11 | skipBtnTxt,
12 | }) => {
13 | const { onSkip } = useStepper();
14 |
15 | return (
16 |
27 |
30 |
31 | )}
32 | {activeStep > 0 && (
33 |
36 | )}
37 |
40 |
41 | )}
42 |
31 | {children}
32 |
33 | );
34 | }
35 |
36 | Card.propTypes = {
37 | className: PropTypes.string,
38 | height: PropTypes.oneOfType([
39 | PropTypes.number,
40 | PropTypes.string,
41 | ]),
42 | children: PropTypes.oneOfType([
43 | PropTypes.element,
44 | PropTypes.node,
45 | PropTypes.string,
46 | ]),
47 | };
48 |
49 | Card.Header = CardHeader;
50 | Card.Body = CardBody;
51 | Card.Footer = CardFooter;
52 | Card.Title = CardTitle;
53 | Card.TitleGroup = CardTitleGroup;
54 | Card.Icon = CardTitleIcon;
55 | Card.SubTitle = CardSubTitle;
56 | Card.Summary = CardSummary;
57 |
58 | export default Card;
59 |
--------------------------------------------------------------------------------
/webpack.component.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | output: {
5 | path: path.resolve(__dirname, './'),
6 | filename: '[name].js',
7 | },
8 | module: {
9 | rules: [
10 | {
11 | test: /\.js?$/,
12 | include: [
13 | path.resolve(__dirname, 'src'),
14 | ],
15 | exclude: /node_modules/,
16 | use: [
17 | '@jsdevtools/coverage-istanbul-loader',
18 | {
19 | loader: 'esbuild-loader',
20 | options: {
21 | loader: 'jsx',
22 | target: 'es2015',
23 | },
24 | },
25 | ],
26 | },
27 | {
28 | test: /\.css$/,
29 | use: [
30 | 'style-loader',
31 | 'css-loader',
32 | ],
33 | },
34 | {
35 | test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
36 | exclude: [/images/],
37 | type: 'asset/resource',
38 | generator: {
39 | filename: 'fonts/[name][ext]',
40 | },
41 | },
42 | {
43 | test: /\.(png|svg|jpg|gif)$/,
44 | type: 'asset/resource',
45 | generator: {
46 | filename: 'images/[name][ext]',
47 | },
48 | },
49 | {
50 | test: /worker-.*\.js/,
51 | include: [/node_modules\/ace-build/],
52 | type: 'asset/resource',
53 | },
54 | ],
55 | },
56 | devtool: 'source-map',
57 | devServer: {
58 | client: {
59 | overlay: false,
60 | },
61 | },
62 | };
63 |
--------------------------------------------------------------------------------
/src/form/redux-form/FieldMultiselect/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { fromJS } from 'immutable';
4 |
5 | import Multiselect from '../../components/Multiselect';
6 |
7 | class FieldMultiselect extends Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.handleOnChange = this.handleOnChange.bind(this);
12 | }
13 |
14 | handleOnChange(value) {
15 | const { input } = this.props;
16 | const { onChange } = input;
17 |
18 | onChange(fromJS(value));
19 | }
20 |
21 | getMultiselectError() {
22 | const { meta, validationmessages } = this.props;
23 | const { touched, error, warning } = meta;
24 | let message = null;
25 |
26 | if (touched && error && validationmessages[error]) {
27 | message = validationmessages[error];
28 | } else if (touched && warning) {
29 | message = 'warning';
30 | }
31 |
32 | return message;
33 | }
34 |
35 | render() {
36 | const { ...props } = this.props;
37 |
38 | return (
39 |
41 | { children }
42 |
43 | )
44 | )
45 | }
46 |
26 |
27 | {children}
28 |
29 |
30 | );
31 | }
32 |
33 | Accordion.propTypes = {
34 | children: PropTypes.oneOfType([
35 | PropTypes.arrayOf(PropTypes.node),
36 | PropTypes.node,
37 | PropTypes.element,
38 | PropTypes.string,
39 | ]),
40 | className: PropTypes.string,
41 | usearrowastrigger: PropTypes.bool,
42 | arrow: PropTypes.shape({
43 | position: PropTypes.oneOf(['left', 'right']),
44 | expandToContent: PropTypes.bool,
45 | }),
46 | };
47 |
48 | // For Readme.md : Start
49 | Accordion.Item = AccordionItem;
50 | Accordion.Item.Header = AccordionItemHeader;
51 | Accordion.Item.Content = AccordionItemContent;
52 | // For Readme.md : End
53 |
54 | export default Accordion;
55 |
--------------------------------------------------------------------------------
/src/components/Accordion/js/AccordionItemTrigger.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import React from 'react';
3 |
4 | import AccordionItemContext from './AccordionItemContext';
5 | import ItemTrigger from './AccordionItemTrigger';
6 |
7 | function Component({
8 | collapsed = false,
9 | disabled = false,
10 | wrap = false,
11 | }) {
12 | return (
13 |
7 | e and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including vers
8 | e and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including vers
9 |
10 | e and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including verse and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including vers
11 | eeee
12 |
13 |
14 | ```
--------------------------------------------------------------------------------
/.github/workflows/build-and-publish.yml:
--------------------------------------------------------------------------------
1 | name: Build and Publish
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 |
8 | jobs:
9 | build-lib:
10 | runs-on: ${{ matrix.os }}
11 |
12 | strategy:
13 | matrix:
14 | os: [ubuntu-latest]
15 | node-version: [16.x]
16 |
17 | steps:
18 | - name: Checkout repo
19 | uses: actions/checkout@v3
20 | with:
21 | fetch-depth: 0
22 | token: ${{ secrets.TYK_UI_TOKEN }}
23 | - name: Use node ${{ matrix.node-version }}
24 | uses: actions/setup-node@v3
25 | with:
26 | node-version: ${{ matrix.node-version }}
27 | - name: Install dependencies
28 | run: |
29 | npm config set //registry.npmjs.org/:_authToken "${{ secrets.NPM_TOKEN }}" && npm ci
30 | - name: Run production build
31 | run: |
32 | npm run build-prod
33 | - name: Generate package-lock.json
34 | run: |
35 | npm i --package-lock-only
36 | - name: get-npm-version
37 | id: package-version
38 | uses: martinbeentjes/npm-get-version-action@master
39 | - name: Push changes
40 | run: |
41 | git config --local user.email "tyk-ui-bot@tyk.io"
42 | git config --local user.name "tyk-ui bot"
43 | git add .
44 | git commit -m "Update lib to version ${{ steps.package-version.outputs.current-version}}"
45 | git push
46 | - name: Publish lib to npm
47 | uses: JS-DevTools/npm-publish@v1
48 | with:
49 | token: ${{ secrets.NPM_PUBLISH_TOKEN }}
50 |
51 | env:
52 | CI: true
53 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
54 |
--------------------------------------------------------------------------------
/src/layout/Row/Readme.md:
--------------------------------------------------------------------------------
1 | Example of a Row with 3 columns
2 | ```jsx
3 | import React from 'react';
4 | import Column from '../Column';
5 | import Row from './index';
6 |
7 | const containerStyle = {
8 | backgroundColor: '#F0F0F0',
9 | };
10 | const rowStyle = {
11 | marginTop: '20px',
12 | };
13 | const columnStyle = {
14 | backgroundColor: '#ccc',
15 | padding: '10px',
16 | width: '100%',
17 | };
18 |
19 |
26 | 1
27 |
28 |
33 | 2
34 |
35 |
40 | 3
41 |
42 |
72 | 1
73 |
74 |
79 | 2
80 |
81 |
86 | 3
87 |
88 |
42 | {
43 | Object.keys(messages).map((msgID) => (
44 | messages[msgID]
45 | ? (
46 |
52 | {messages[msgID].message}
53 |
54 | )
55 | : null
56 | ))
57 | }
58 |
59 | );
60 | }
61 |
62 | ToastContainer.propTypes = {
63 | notify: PropTypes.func,
64 | };
65 |
66 | export default ToastContainer;
67 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Tyk-ui is our library of reusable presentational UI components. The full list of components and their documentation can be checked here:
2 | https://nifty-johnson-6002dd.netlify.app/
3 |
4 | *Installation*
5 | ```javascript
6 | npm install --save @tyk-technologies/tyk-ui
7 | ```
8 |
9 | **Loading tyk-ui into the project**
10 |
11 | *Import the css before any other styles from your main js file*
12 | ```javascript static
13 | import '@tyk-technologies/tyk-ui/src/index.css';
14 | ```
15 |
16 | *Loading SASS files (only if your project uses SASS)*
17 | ```scss
18 | @import '~@tyk-technologies/tyk-ui/lib/sass/index';
19 | ```
20 | *NOTE*:
21 | For projects that don't use SASS but just pure css we are also exposing the compiled styles.
22 | ```html
23 |
24 | ```
25 |
26 | *Loading React components*
27 | ```javascript static
28 | import {
29 | Button,
30 | Column,
31 | Dropdown,
32 | Icon,
33 | InfoNote,
34 | Message,
35 | Modal,
36 | Panel,
37 | Row
38 | } from '@tyk-technologies/tyk-ui';
39 | ```
40 |
41 | *Note*: for the projects that don't have React this is not usable, and we can use just the styling.
42 |
43 | ## Build tyk-ui project
44 | Contributions to the current library are welcome, so please follow these steps each time you want to make a change:
45 |
46 | - Create a GH issue, describing the necessary change
47 | - Raise a PR with the change
48 |
49 | *In order to publish the changes, please do the following*
50 | - After PR merge, run `npm run build-prod` which generates prod code of the library
51 | - Increase the library version in `package.json`
52 | - Run `npm i` to regenerate the `package-lock.json` file
53 | - Commit and Push changes
54 | - Run `npm publish`
55 |
--------------------------------------------------------------------------------
/src/components/Table/js/header.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { HeaderCell } from './header-cell';
4 | import { tableContext } from '../tableContext';
5 |
6 | export function Header({ allRowsSelected }) {
7 | const { state, sendMessage } = useContext(tableContext);
8 | const { columns, selectable } = state;
9 |
10 | const generateHeaders = () => columns.map((column) => (
11 |
25 | {
29 | const isCheckbox = v?.target?.tagName.toLowerCase() === 'input' && v?.target?.type.toLowerCase() === 'checkbox';
30 | sendMessage('header.selectAll.change', isCheckbox ? v.target.checked : Boolean(v));
31 | }}
32 | >
33 | {selectable.values?.value}
34 |
35 |
36 | ) : (
37 | selectable.name || 'Select'
38 | )}
39 |
40 | {
41 | label !== undefined
42 | ? (
43 |
49 | )
50 | : null
51 | }
52 |
56 | );
57 | }
58 |
59 | List.propTypes = {
60 | children: PropTypes.oneOfType([
61 | PropTypes.arrayOf(PropTypes.node),
62 | PropTypes.node,
63 | PropTypes.element,
64 | PropTypes.string,
65 | ]),
66 | className: PropTypes.string,
67 | label: PropTypes.string,
68 | labelwidth: PropTypes.string,
69 | theme: PropTypes.string,
70 | style: PropTypes.instanceOf(Object),
71 | };
72 |
73 | List.Item = ListItem;
74 |
75 | export default List;
76 |
--------------------------------------------------------------------------------
/src/components/Accordion/js/AccordionItemHeader.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import React from 'react';
3 |
4 | import AccordionContext from './AccordionContext';
5 | import AccordionItemContext from './AccordionItemContext';
6 | import AccordionItemHeader from './AccordionItemHeader';
7 |
8 | function Component({
9 | usearrowastrigger = false,
10 | arrow = { position: 'right', expandToContent: false },
11 | collapsed = false,
12 | disabled = false,
13 | className,
14 | children,
15 | }) {
16 | return (
17 | -
53 | {children}
54 |
{ subtitle }
: null; 15 | return ( 16 |
18 | {pre && (
19 |
40 | { children }
41 | {pre}
20 | )}
21 | {
22 | title
23 | ? (
24 |
25 |
28 | )
29 | : subtitleContent
30 | }
31 | { title }
26 | { subtitleContent } 27 |
32 | {left && (
33 |
39 | { left }
34 | )}
35 | {right && (
36 | { right }
37 | )}
38 |
28 |
51 | );
52 | }
53 |
54 | CollapsibleList.propTypes = {
55 | children: PropTypes.node.isRequired,
56 | open: PropTypes.bool,
57 | visibleCount: PropTypes.number,
58 | className: PropTypes.string,
59 | };
60 |
61 | CollapsibleList.Item = CollapsibleListItem;
62 |
63 | export default CollapsibleList;
64 |
--------------------------------------------------------------------------------
/src/components/FixedWrapper/index.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useEffect, useRef } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import debounce from '../../utils/debounce';
5 |
6 | /**
7 | * FixedWrapper component, keeps all its children in a fix position on the page,
8 | * even if the scroll position changes
9 | * i.e: The top navigation bar of a page sits within FixedWrapper component
10 | */
11 | function FixedWrapper({ children, className = '', showShadow }) {
12 | const fixedWrapperRef = useRef(null);
13 |
14 | const attachShadow = useCallback(() => {
15 | const element = fixedWrapperRef.current;
16 |
17 | if (!element) {
18 | return;
19 | }
20 |
21 | if (window.scrollY) {
22 | element.classList.add('tyk-fixed-wrapper--scrolled');
23 | } else {
24 | element.classList.remove('tyk-fixed-wrapper--scrolled');
25 | }
26 | }, [fixedWrapperRef.current]);
27 |
28 | const debouncedAttachShadow = useCallback(debounce(attachShadow, 100), [attachShadow]);
29 |
30 | useEffect(() => {
31 | if (showShadow) {
32 | window.addEventListener('scroll', debouncedAttachShadow);
33 | }
34 |
35 | return () => {
36 | window.removeEventListener('scroll', debouncedAttachShadow);
37 | };
38 | }, [debouncedAttachShadow, showShadow]);
39 |
40 | return (
41 | -
29 | {items.map((item, index) => {
30 | const shouldShow = open || index < visibleCount;
31 | const isAnimated = index >= visibleCount;
32 |
33 | return (
34 |
45 | {item}
46 |
47 | );
48 | })}
49 |
42 | { children }
43 |
44 | );
45 | }
46 |
47 | FixedWrapper.propTypes = {
48 | children: PropTypes.oneOfType([
49 | PropTypes.element,
50 | PropTypes.node,
51 | PropTypes.string,
52 | ]),
53 | /** Css classes that can be passed to the FixedWraper element */
54 | className: PropTypes.string,
55 | /** If true, bottom shadow on the FixedWrapper component
56 | * is being displayed when scroll happens
57 | */
58 | showShadow: PropTypes.bool,
59 | };
60 |
61 | export default FixedWrapper;
62 |
--------------------------------------------------------------------------------
/src/components/CopyToClipboard/index.js:
--------------------------------------------------------------------------------
1 | import React, { createRef, useCallback } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import toast from '../Toast';
5 |
6 | /**
7 | * - CopyToClipboard is used to copy string for a user.
8 | * - Can be used normally with a text or a custom components (Eg. Button, Icon, etc)
9 | */
10 |
11 | function CopyToClipboard(props) {
12 | const {
13 | display, copy, children, onCopy, message = 'copied',
14 | } = props;
15 | const txtRef = createRef();
16 | const handleClick = useCallback(() => {
17 | if (onCopy) {
18 | onCopy();
19 | }
20 |
21 | if (!window.navigator.clipboard) {
22 | txtRef.current.select();
23 | document.execCommand('copy');
24 | toast.success(message);
25 | return;
26 | }
27 | window.navigator.clipboard.writeText(copy);
28 | toast.success(message);
29 | }, [onCopy, txtRef]);
30 |
31 | return (
32 | <>
33 |
21 | {
22 | !usearrowastrigger
23 | ? (
24 |
32 | )
33 | : (
34 | <>
35 | {!arrow.expandToContent && arrow.position === 'left' && (
36 |
46 | );
47 | }
48 |
49 | AccordionItemHeader.propTypes = {
50 | children: PropTypes.oneOfType([
51 | PropTypes.arrayOf(PropTypes.node),
52 | PropTypes.node,
53 | PropTypes.element,
54 | PropTypes.string,
55 | ]),
56 | className: PropTypes.string,
57 | };
58 |
59 | export default AccordionItemHeader;
60 |
--------------------------------------------------------------------------------
/src/components/InfiniteScroller/InfiniteScroller.test.js:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react';
2 | import InfiniteScroller from './index';
3 |
4 | // eslint-disable-next-line react/prop-types
5 | function Component({ content, ...rest }) {
6 | const refChild = useRef();
7 |
8 | return (
9 | {children}
39 | {!arrow.expandToContent && arrow.position === 'right' && (
40 |
10 |
11 |
15 |
16 | );
17 | }
18 |
19 | describe('InfiniteScroller', () => {
20 | const selectors = {
21 | scroller: '.tyk-infinite-scroller',
22 | wrapper: '.tyk-infinite-scroller__wrapper',
23 | loader: '.loading',
24 | };
25 |
26 | it('renders content inside the component', () => {
27 | cy.mount(
12 | { content ??
14 | The Content
} 13 |{`Item ${index}`}
47 | ))}
48 |
49 | );
50 |
51 | cy.mount(
47 |
48 | {arrow.expandToContent && (
49 |
53 |
54 | );
55 | });
56 |
57 | AccordionItem.propTypes = {
58 | children: PropTypes.oneOfType([
59 | PropTypes.arrayOf(PropTypes.node),
60 | PropTypes.node,
61 | PropTypes.element,
62 | PropTypes.string,
63 | ]),
64 | collapsed: PropTypes.bool,
65 | className: PropTypes.string,
66 | disabled: PropTypes.bool,
67 | };
68 |
69 | export default AccordionItem;
70 |
--------------------------------------------------------------------------------
/src/components/Stepper/js/Buttons.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import { useStepper } from "../StepperContext";
4 |
5 | const Buttons = ({ children }) => {
6 | const {
7 | activeStep,
8 | steps,
9 | setActiveStep,
10 | setErrors,
11 | onFinish,
12 | onChange,
13 | onSkip,
14 | stepValidator,
15 | stepErrMessage,
16 | setValidationAttempted,
17 | } = useStepper();
18 |
19 | const isLastStep = activeStep === steps.length - 1;
20 |
21 | const goToNextStep = async () => {
22 | setValidationAttempted(true);
23 | const isNextStepAllowed = await stepValidator(steps[activeStep]?.props?.id);
24 |
25 | if (isNextStepAllowed) {
26 | if (activeStep < steps.length - 1) {
27 | setActiveStep((prev) => prev + 1);
28 | setErrors((prev) => ({ ...prev, [activeStep]: null }));
29 | onChange(steps[activeStep]?.props?.id);
30 | } else if (activeStep === steps.length - 1) {
31 | onFinish();
32 | }
33 | setValidationAttempted(false);
34 | } else {
35 | setErrors((prev) => ({
36 | ...prev,
37 | [activeStep]: stepErrMessage,
38 | }));
39 | }
40 | };
41 |
42 | const goToPreviousStep = () => {
43 | if (activeStep > 0) {
44 | setActiveStep((prev) => prev - 1);
45 | setValidationAttempted(false);
46 | onChange(steps[activeStep]?.props?.id);
47 | }
48 | };
49 |
50 | const onSkipStep = () => {
51 | onSkip(steps[activeStep]?.props?.id);
52 | };
53 |
54 | return (
55 |
56 | {children({
57 | goToNextStep,
58 | goToPreviousStep,
59 | onSkipStep,
60 | isLastStep,
61 | activeStep,
62 | stepId: steps[activeStep]?.props?.id || "",
63 | })}
64 |
65 | );
66 | };
67 |
68 | Buttons.displayName = "StepperButtons";
69 | Buttons.propTypes = {
70 | children: PropTypes.func.isRequired,
71 | };
72 |
73 | export default Buttons;
74 |
--------------------------------------------------------------------------------
/src/components/RevealPanel/RevealPanel.css:
--------------------------------------------------------------------------------
1 | .tyk-ui-reveal-wrapper {
2 | display: flex;
3 | flex-direction: column;
4 | justify-content: flex-end;
5 | align-items: stretch;
6 | inline-size: 100%;
7 | block-size: 100%;
8 | z-index: 1000;
9 | position: absolute;
10 | inset-block-end: 0;
11 | inset-inline-start: 0;
12 | pointer-events: none;
13 | }
14 |
15 | .tyk-ui-reveal-wrapper__panel {
16 | max-block-size: calc(100% - 2rem);
17 | background-color: white;
18 | padding: 0;
19 | margin: 0;
20 | display: flex;
21 | flex-direction: column;
22 | pointer-events: all;
23 | flex-shrink: 0;
24 | overflow: auto;
25 | }
26 |
27 | .tyk-ui-reveal-wrapper__hole {
28 | flex-grow: 1;
29 | opacity: 0;
30 | inline-size: 100%;
31 | background-color: green;
32 | -webkit-user-select: none;
33 | user-select: none;
34 | pointer-events: none;
35 | z-index: -1;
36 | }
37 |
38 | .tyk-ui-reveal-wrapper__gutter {
39 | block-size: 2rem;
40 | inline-size: 100%;
41 | cursor: row-resize;
42 | display: flex;
43 | background-color: var(--color-primary-base);
44 | z-index: 2;
45 | pointer-events: all;
46 | justify-content: space-between;
47 | align-items: stretch;
48 | position: relative;
49 | box-shadow: 0 5px 10px rgba(0 0 0 / 30%);
50 | }
51 |
52 | .tyk-ui-reveal-wrapper__gutter__headerleft,
53 | .tyk-ui-reveal-wrapper__gutter__headerright {
54 | display: flex;
55 | align-items: center;
56 | flex: 1;
57 | }
58 |
59 | .tyk-ui-reveal-wrapper__gutter__headerleft {
60 | justify-content: flex-start;
61 | }
62 |
63 | .tyk-ui-reveal-wrapper__gutter__headerright {
64 | justify-content: flex-end;
65 | }
66 |
67 | .tyk-ui-reveal-wrapper__gutter__logo {
68 | inline-size: 1rem;
69 | block-size: 1rem;
70 | -webkit-user-select: none;
71 | user-select: none;
72 | pointer-events: none;
73 | padding: 0.2rem;
74 | z-index: 2;
75 | background-image: url('./images/drag.svg');
76 | align-self: center;
77 |
78 | &:hover {
79 | border: dashed;
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/form/components/Textarea/Readme.md:
--------------------------------------------------------------------------------
1 | ```js
2 |