diff --git a/.changeset/perfect-weeks-push.md b/.changeset/perfect-weeks-push.md new file mode 100644 index 00000000000..5596019fb62 --- /dev/null +++ b/.changeset/perfect-weeks-push.md @@ -0,0 +1,7 @@ +--- +'@talend/react-components': patch +'@talend/react-containers': patch +'@talend/react-cmf': patch +--- + +docs: update links from surge to github.io diff --git a/.github/workflows/surge-cleanup.yml b/.github/workflows/surge-cleanup.yml deleted file mode 100644 index 860648e6bdc..00000000000 --- a/.github/workflows/surge-cleanup.yml +++ /dev/null @@ -1,20 +0,0 @@ -name: Cleanup - Remove surge demo - -on: - pull_request: - types: [ closed ] - -permissions: {} - -jobs: - cleanup: - name: Remove NR on surge - runs-on: ubuntu-latest - environment: pull_request_unsafe - - steps: - - name: Use Node.js - uses: ./.github/actions/setup-node - - - name: Push to surge - run: npx surge teardown ${{ github.event.pull_request.number }}.talend.surge.sh --token ${{ secrets.SURGE_TOKEN }} diff --git a/packages/cmf/docs/api.md b/packages/cmf/docs/api.md index 95b3d1cdc86..2f74492b2af 100644 --- a/packages/cmf/docs/api.md +++ b/packages/cmf/docs/api.md @@ -7,12 +7,11 @@ sidebar_label: API API documentation is written as md files along the source files in github. They are all linked and accessible from the [README](https://github.com/Talend/ui/tree/master/packages/cmf/README.md) - Direct access to all the exposed APIs: -* [cmf.bootstrap](https://github.com/Talend/ui/tree/master/packages/cmf/src/bootstrap.md) -* [cmfConnect](https://github.com/Talend/ui/tree/master/packages/cmf/src/cmfConnect.md) -* [cmf.*](https://github.com/Talend/ui/tree/master/packages/cmf/src/api.md) +- [cmf.bootstrap](https://github.com/Talend/ui/tree/master/packages/cmf/src/bootstrap.md) +- [cmfConnect](https://github.com/Talend/ui/tree/master/packages/cmf/src/cmfConnect.md) +- [cmf.\*](https://github.com/Talend/ui/tree/master/packages/cmf/src/api.md) - [cmf.actionCreator](https://github.com/Talend/ui/tree/master/packages/cmf/src/actionCreator.md) - [cmf.actions](https://github.com/Talend/ui/blob/master/packages/cmf/src/api.md#cmfactions) - [cmf.component](https://github.com/Talend/ui/tree/master/packages/cmf/src/api.md#cmfcomponent) @@ -21,4 +20,4 @@ Direct access to all the exposed APIs: - [cmf.sagas](https://github.com/Talend/ui/blob/master/packages/cmf/src/api.md#cmfsaga) - [cmf.selectors](https://github.com/Talend/ui/blob/master/packages/cmf/src/selectors/index.md) -You can also check the [jsdoc generated website](http://talend.surge.sh/cmf/jsdoc/) +You can also check the [jsdoc generated website](http://talend.github.io/ui/main/cmf/jsdoc/) diff --git a/packages/components/README.md b/packages/components/README.md index 2ca823dd8ed..0e289d70ffa 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -43,16 +43,16 @@ But what is a leaf component ? It's a component that is not supposed to contain another component. For example the following components are leaf components: -* AppHeaderBar -* SidePanel -* List -* Breadcrumb -* Icon -* Action(s) +- AppHeaderBar +- SidePanel +- List +- Breadcrumb +- Icon +- Action(s) But the following are not leaf: -* Layout +- Layout If you feel the need to add {children} this means we have forget a use case. In this case please expose your use case and try to see how @@ -104,18 +104,13 @@ If you want to use Button from react-bootstrap don't forget to add the role + bsStyle="link". ```javascript -const model = {id: 'my-id'}; +const model = { id: 'my-id' }; function onClick(event, payload) { //do what ever you want payload.action.label === 'click me'; payload.model === model; -}; - +} +; ``` ### Use Icon for icon @@ -131,7 +126,7 @@ Icon.register( 'svg-test', - + , ); ``` @@ -144,30 +139,30 @@ The stories are registred this way: ```json { - "Action": { - "default": [ - { - "name": "action-default", - "selector": ["#default", "#hidelabel"] - } - ] - } + "Action": { + "default": [ + { + "name": "action-default", + "selector": ["#default", "#hidelabel"] + } + ] + } } ``` -* _Action_ is the string name of 'storiesOf(' call -* _default_ is the exact string of the .add / .add call -* the content is an array of Object with name + selector -* _name_ will be the name of the screenshot(s) -* _selector_ is a string or an array of string which is behind used to call document.querySelect(_selector_) so you can try your selector. +- _Action_ is the string name of 'storiesOf(' call +- _default_ is the exact string of the .add / .add call +- the content is an array of Object with name + selector +- _name_ will be the name of the screenshot(s) +- _selector_ is a string or an array of string which is behind used to call document.querySelect(_selector_) so you can try your selector. ## npm scripts -* npm start -> launch storybook on localhost:6006 -* npm run prepublish -> build the sources into the lib folder -* npm test -> to execute unit test -* npm run lint -> check the code style -* npm run watch -> watch the source to trigger a build +- npm start -> launch storybook on localhost:6006 +- npm run prepublish -> build the sources into the lib folder +- npm test -> to execute unit test +- npm run lint -> check the code style +- npm run watch -> watch the source to trigger a build ## LICENSE @@ -177,6 +172,6 @@ Licensed under the Apache V2 License # List of components -You can find full demo at http://talend.surge.sh/components +You can find full demo at http://talend.github.io/ui/main/components -* [SubHeaderBar](src/SubHeaderBar/SubHeaderBar.md) +- [SubHeaderBar](src/SubHeaderBar/SubHeaderBar.md) diff --git a/packages/components/src/List/ListComposition/doc/principle.md b/packages/components/src/List/ListComposition/doc/principle.md index ae608902f16..c3baafd8464 100644 --- a/packages/components/src/List/ListComposition/doc/principle.md +++ b/packages/components/src/List/ListComposition/doc/principle.md @@ -3,22 +3,24 @@ ## The Problem With current List, we have a static layout. It is practical to control what is inside, but it comes with a bunch of drawbacks -* with new needs, adding a div inside can be complicated -* with different needs, having different layouts is impossible -* we pass all the props for all the subcomponents making the apropscalypse we have today + +- with new needs, adding a div inside can be complicated +- with different needs, having different layouts is impossible +- we pass all the props for all the subcomponents making the apropscalypse we have today The result is a component that is really complicated to use and maintain, and not flexible at all. -*Example*: how would you develop a filter bar that display current filters between the toolbar and the VirtualizedList ? +_Example_: how would you develop a filter bar that display current filters between the toolbar and the VirtualizedList ? I guess you would create a div, insert it if we have a flag prop, or configuration props, and the filters to display will be added to the current apropcalypse, making the api even more heavier. ## Principle Let's try to make it flexible. What do we need ? -* a component where we can compose subcomponents -* possibility to adapt the layout for different needs -* all subcomponents must work with the List, and have synchronized data with other related subcomponents. For example, the sort order is synchronized between the VirtualizedList and Sort toolbar element -* simplify the components api + +- a component where we can compose subcomponents +- possibility to adapt the layout for different needs +- all subcomponents must work with the List, and have synchronized data with other related subcomponents. For example, the sort order is synchronized between the VirtualizedList and Sort toolbar element +- simplify the components api Nicolas Maligne started a PoC to turn the List into Compound components. @@ -26,125 +28,133 @@ Nicolas Maligne started a PoC to turn the List into Compound components. ```javascript ``` ```javascript - First link - Second link + + First link + + Second link ``` ### Complex example: The List Before + ```javascript const toolbarProps = { - actionBar: { - actions: { - left: [ - { id: 'add', label: 'Add Folder' }, - { id: 'remove', label: 'Remove Folder' }, - ], - }, - }, - display: { - onChange: this.onDisplayChange, - }, - sort: { - field: 'name', - onChange: action('sort.onChange'), - options: [{ id: 'id', name: 'Id' }, { id: 'name', name: 'Name' }], - } + actionBar: { + actions: { + left: [ + { id: 'add', label: 'Add Folder' }, + { id: 'remove', label: 'Remove Folder' }, + ], + }, + }, + display: { + onChange: this.onDisplayChange, + }, + sort: { + field: 'name', + onChange: action('sort.onChange'), + options: [ + { id: 'id', name: 'Id' }, + { id: 'name', name: 'Name' }, + ], + }, }; const listProps = { - columns: [ - { key: 'id', label: 'Id' }, - { key: 'name', label: 'Name' }, - { key: 'author', label: 'Author' }, - { key: 'created', label: 'Created' }, - { key: 'modified', label: 'Modified' }, - ], - items: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }], - titleProps: { - key: 'name', - iconKey: 'icon', - displayModeKey: 'display', - onClick: action('onTitleClick'), - onEditCancel: action('onEditCancel'), - onEditSubmit: action('onEditSubmit'), - }, - itemProps: { - classNameKey: 'className', - }, + columns: [ + { key: 'id', label: 'Id' }, + { key: 'name', label: 'Name' }, + { key: 'author', label: 'Author' }, + { key: 'created', label: 'Created' }, + { key: 'modified', label: 'Modified' }, + ], + items: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }], + titleProps: { + key: 'name', + iconKey: 'icon', + displayModeKey: 'display', + onClick: action('onTitleClick'), + onEditCancel: action('onEditCancel'), + onEditSubmit: action('onEditSubmit'), + }, + itemProps: { + classNameKey: 'className', + }, }; - +; ``` After + ```javascript const list = ( - - - - - - - + + + + + + + ); - - - - - - - {list} - + + + + + + + {list} +; ``` The example above is a List -* that display the collection props -* with controlled display mode -* with controlled sort -* with 2 actions on the left: add and remove + +- that display the collection props +- with controlled display mode +- with controlled sort +- with 2 actions on the left: add and remove Even easier if you don't want to control all the subfeatures (display mode, sort, ...), just remove the values and callbacks. @@ -179,48 +189,52 @@ Even easier if you don't want to control all the subfeatures (display mode, sort What are the pros ? -* With compound components you will write more code but easier to reason about code (it's jsx). For nested components, you see nested jsx instead of a complex props object -* The set of props each part need is waaaaay lighter than the big List one's -* It is flexible, you can apply the layout you want and insert anything you want +- With compound components you will write more code but easier to reason about code (it's jsx). For nested components, you see nested jsx instead of a complex props object +- The set of props each part need is waaaaay lighter than the big List one's +- It is flexible, you can apply the layout you want and insert anything you want #### Example 1: add pagination + We want to add pagination, what do you do to write it ? **Non-compound** -* read doc/code of List to spot where to insert the props. You see that the toolbar instantiates it, passing the props the List pass to the toolbar, having a pagination property -* now what to pass in pagination prop ? You look at the pagination doc/code to see its api -* finally to add the props to the List nested toolbar props + +- read doc/code of List to spot where to insert the props. You see that the toolbar instantiates it, passing the props the List pass to the toolbar, having a pagination property +- now what to pass in pagination prop ? You look at the pagination doc/code to see its api +- finally to add the props to the List nested toolbar props ```javascript const props = { - toolbar: { - pagination: { - itemsPerPage: 5, - totalResults: 10, - onChange: action('pagination.onChange'), - }, - } -} + toolbar: { + pagination: { + itemsPerPage: 5, + totalResults: 10, + onChange: action('pagination.onChange'), + }, + }, +}; ``` **Compound** -* You look at your jsx, you want to add it in the toolbar, you add the subcomponent, looking at its api -* To control it, you look at the list manager api + +- You look at your jsx, you want to add it in the toolbar, you add the subcomponent, looking at its api +- To control it, you look at the list manager api ```javascript - - - + + + ``` Even easier in uncontrolled mode + ```javascript @@ -256,13 +270,15 @@ Even easier in uncontrolled mode #### Example 3: develop a filter div between toolbar and VList **Non-compound** -* Develop the FilterBar -* List: instantiate the FilterBar depending on the List props + callback management -* App: add more props in the List props + +- Develop the FilterBar +- List: instantiate the FilterBar depending on the List props + callback management +- App: add more props in the List props **Compound** -* Develop the FilterBar -* App: instantiate the the FilterBar wherever you want + +- Develop the FilterBar +- App: instantiate the the FilterBar wherever you want ```javascript - - - - - - - - - ); + const simpleCollection = [ + { + id: 1, + name: 'My first item', + description: 'First element', + author: 'me', + created: 15464354400, + }, + ]; + + return ( + + + + + + + + + + ); } ``` ### Display mode -[Demo](http://2026.talend.surge.sh/components/?selectedKind=JSOList&selectedStory=Display%20mode%3A%20uncontrolled&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) +[Demo](https://talend.github.io/ui/main/storybook-one/?path=/story/components-list-list-composition--display-mode-uncontrolled) Add a toolbar and the display mode component @@ -343,7 +371,7 @@ function MySimpleList() { You want to control it ? -[Demo](http://2026.talend.surge.sh/components/?selectedKind=JSOList&selectedStory=Display%20mode%3A%20controlled&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) +[Demo](https://talend.github.io/ui/main/storybook-one/?path=/story/components-list-list-composition--display-mode-controlled) ```diff import CellTitle from '../../src/VirtualizedList/CellTitle'; @@ -377,4 +405,3 @@ function MySimpleList() { ); } ``` - diff --git a/packages/containers/README.md b/packages/containers/README.md index 48d5fb8d3bd..1a67ae7b7fc 100644 --- a/packages/containers/README.md +++ b/packages/containers/README.md @@ -20,13 +20,12 @@ This library provide a set of widgets to be ready to start with [react-cmf](http [peerdependencies-image]: https://david-dm.org/Talend/ui/peer-status.svg?path=packages/containers [peerdependencies-url]: https://david-dm.org/Talend/ui?path=packages/containers&type=peer - ## Dependencies -* react -* @talend/react-cmf -* @talend/react-components -* classnames +- react +- @talend/react-cmf +- @talend/react-components +- classnames ## How to use @@ -65,6 +64,6 @@ First please take a look at our contributing guildelines. # List of containers -You can find full demo at http://talend.surge.sh/containers +You can find full demo at http://talend.github.io/ui/main/containers -* [SubHeaderBar](src/SubHeaderBar/SubHeaderBar.md) +- [SubHeaderBar](src/SubHeaderBar/SubHeaderBar.md) diff --git a/packages/containers/src/SidePanel/SidePanel.container.js b/packages/containers/src/SidePanel/SidePanel.container.js index 350d3c054b8..be28c2988df 100644 --- a/packages/containers/src/SidePanel/SidePanel.container.js +++ b/packages/containers/src/SidePanel/SidePanel.container.js @@ -1,8 +1,11 @@ import { Component as RComponent } from 'react'; -import Component from '@talend/react-components/lib/SidePanel'; -import { cmfConnect } from '@talend/react-cmf'; + import { Map } from 'immutable'; import omit from 'lodash/omit'; + +import { cmfConnect } from '@talend/react-cmf'; +import Component from '@talend/react-components/lib/SidePanel'; + import { ACTION_TYPE_LINK } from './constants'; export const DEFAULT_STATE = new Map({ @@ -10,7 +13,7 @@ export const DEFAULT_STATE = new Map({ }); /** - * Checkout the {@link http://talend.surge.sh/containers/?selectedKind=SidePanelExample&selectedStory=Default|examples} + * Checkout the {@link http://talend.github.io/ui/main/containers/?selectedKind=SidePanelExample&selectedStory=Default|examples} * @param {object} props react props */ class SidePanel extends RComponent { diff --git a/packages/icons/groovy/CreateIconTypes.groovy b/packages/icons/groovy/CreateIconTypes.groovy index 4bc760daa57..e40a6739cea 100644 --- a/packages/icons/groovy/CreateIconTypes.groovy +++ b/packages/icons/groovy/CreateIconTypes.groovy @@ -82,17 +82,17 @@ type.text = """/* package org.talend.icons; /** - * See http://talend.surge.sh/icons/ + * See http://talend.github.io/ui/main/icons/ */ public enum Type { ${generateEnumValues(allIcons, iconsDeprecated)} - + private final String key; - + Type(String key) { this.key = key; } - + public String getKey() { return key; } diff --git a/packages/playground-vite/README.md b/packages/playground-vite/README.md index 24ab0aa14e7..0d7b93ea28f 100644 --- a/packages/playground-vite/README.md +++ b/packages/playground-vite/README.md @@ -3,7 +3,6 @@ This app is aiming to help demonstrate `ui/container` containers in an environement where we can run a `cmf` app and mock a backend. It can also be used as a development environment. -It is published to each PR on surge. ## How to use diff --git a/packages/playground/README.md b/packages/playground/README.md index 24ab0aa14e7..0d7b93ea28f 100644 --- a/packages/playground/README.md +++ b/packages/playground/README.md @@ -3,7 +3,6 @@ This app is aiming to help demonstrate `ui/container` containers in an environement where we can run a `cmf` app and mock a backend. It can also be used as a development environment. -It is published to each PR on surge. ## How to use