docs(Examples): allow to use TS in examples #617

layershifter · 2018-12-14T15:27:36Z

Refs #495. This PR is a first part.

This PR:

adds ability use TypeScript in our examples via:
- Babel plugin that transforms imports to JS-like in our examples
- Gulp plugin that transforms our TS code to plain JS
drops raw-loader

Known issues

1. JS examples lose some formatting.

Babel is the transpiler so some formatting things are lost.

Input: TS code

  state = { isMounted: false }

  createdRef = React.createRef<HTMLButtonElement>()
  functionalRef = null

  handleRef = (node: HTMLButtonElement) => (this.functionalRef = node)

  componentDidMount() {
    this.setState({ isMounted: true })
  }

Babel: JS output

  state = {
    isMounted: false,
  }
  createdRef = React.createRef()
  functionalRef = null
  handleRef = node => (this.functionalRef = node)

  componentDidMount() {
    this.setState({
      isMounted: true,
    })
  }

I don't have a better idea how we can it be saved. I tried to use TS compiler there, but it gives more confusing result:

    constructor() {
        super(...arguments);
        this.state = { isMounted: false };
        this.createdRef = React.createRef();
        this.functionalRef = null;
        this.handleRef = (node) => (this.functionalRef = node);
    }
    componentDidMount() {
        this.setState({ isMounted: true });
    }

2. There are no toggle for Typescript

It will be done in a separate PR with a new SourceManager.

DustyTheBot · 2018-12-14T15:35:24Z

	Warnings
⚠️	There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS

…cs/use-ts

build/gulp/plugins/gulp-example-source.ts

…cs/use-ts

layershifter · 2018-12-18T13:38:41Z

After #600 will be merged we can also apply ESLint's fixes and get more accurate output.

build/babel/transform-star-import.ts

build/babel/types.ts

build/gulp/plugins/gulp-example-source.ts

build/gulp/tasks/docs.ts

layershifter · 2018-12-18T15:29:50Z

TODO for next PR

Remove examples from exampleContext, we should require only index.tsx files
Create a new context for *.source.json files and use it in ExternalExampleLayout with SourceRender (Docs example can be broken and merge into master without any check #554) and in ContributionPrompt.

…ust-ui/react into docs/use-ts

kuzhelov · 2018-12-19T10:36:38Z

build/gulp/tasks/docs.ts

@@ -62,7 +69,8 @@ task(

 const componentsSrc = [`${paths.posix.src()}/components/*/[A-Z]*.tsx`, '!**/Slot.tsx']
 const behaviorSrc = [`${paths.posix.src()}/lib/accessibility/Behaviors/*/[a-z]*.ts`]
-const examplesSrc = `${paths.posix.docsSrc()}/examples/*/*/*/index.tsx`
+const examplesIndexSrc = `${paths.posix.docsSrc()}/examples/*/*/*/index.tsx`
+const examplesSrc = `${paths.posix.docsSrc()}/examples/*/*/*/!(*index|.knobs).tsx`


👍 for filtering out index files

build/gulp/plugins/gulp-example-source.ts

…ust-ui/react into docs/use-ts

* docs(Examples): allow to use TS in examples * add jsdoc * fix typo * rename file * add comment * `createExample` to `createExampleSourceCode` * rework with `path.relative()` * remove JSON files on remove tsx * create getRelativePathToSource function

* feat(menuItem: add menu prop) * Only one submenu open at a time * Fix bug: submenu noe closes on clicking a menuItem with no submenu * Code cleanup * Remove the activeIndex prop passed to the menuItem * Remove Popup and implement submenu without it * initial keyboard support * left/right arrow handling * simplify keyboard handlers * -fixed import in the MenuItem * -added submenuIndicator -small fixes in the styles and the way the submenu is generated * -clicking on leaf element should close the submenus (the same should be done for enter/space) -applied consistent (left-right) navigation for horizontal menu and (up-down) navigation for vertical menu * -implemented outside click to close all menus -implemented enter key on leaf menu item to close the menu * -fixed import * -refactored MenuItem handlers - fixed issues -removed onClick handler for the Menu (not necessary for now) -added onKeyDown in the creation of the MenuItem in the Menu component for handling the action prop * -added setActiveIndex callback and removed onKeyDown in the creation of MenuItems in the Menu component * -right arrow key is closing the submenus and goes to the next element if the menu is horizontal, or is focusing the first MenuItem if it is vertical * -handled left arrow key * -changed ref -focus trap wip * -added Ref component instead of using the itemRef on the ElementType -removed subscription for focus * -fixes * -moved ref //TODO: figure out tests failing * -close menu on outside focus * -improved comments * -fixed escape key not focusing the active element -changed parentRef to inSubmenu boolean * -fixing key problems -added dependency for generating id * -refactored submenuRef element * fix broken tests * -added comments in the tests -changed the submenuDomElement so submenuRef * -renamed inSubmenu to submenu prop in the Menu * -fixed with the auto-controlled prop in the Menu * -added state interface in the Menu -improved menu variables' names * -fixed variables in examples * -remove state initialization in the MenuItem component * -added new handler for escape -changed submenu examples titles * -refactored conditions using doesNodeContainClick * -renamed submenu* props to menu in the MenuItem component -changed setActiveIndex with onActiveChanged -introduced different styles for the hovering vs active elements * -improved example -fixed issue with the condition for the active prop * -exported MenuState -added correct typings to the menuStyles * -fixed underlined active + hovered style * -fixed border corner clipped by adding custom styles for the first child menu items and the last child menu items in vertical menu * -addressed comments on PR * chore: prepare release 0.15.0 [ci skip] * 0.15.0 * fix(Prototype): Fix Popover prototype after breaking changes (#623) * chore: cache results of vulnerability scans (#621) * implement caching strategy * adjust file name of scan marker * add yarn lock hash to marker file name * add change to build config * fix dir name in build config * improve caching strategy * just restore cache * temporary remove lint and tests * try * fix caching strategy * try * try * try * try epoch * create file on scan * return lint and test steps * introduce comment for the caching approach taken * remove unnecessary function * simplify expression for marker file name * feat(text): color prop (#597) * feat(text): color prop * addressed comments * changelog * amended changelog * made text color override other props that change color * feat(header): header and header description color prop (#628) * feat(header): header and header description color prop * changelog * fixed examples * addressed PR comments * fix(Popup): allow to 'detach' from trigger and RTL adjustments (#612) * introduce offset prop * correct description of supported values * update changelog * introduce fix * ensure RTL is properly applied to complex offset expressions * rename method to make logic more expressive * add unit tests * remove unnecessary grid props from offset example * update changelog * fix(SelectableList): Items in list should be selectable (#566) * Reflect which item is selected in list * Make list derived from autocontrolled component * small fix * Update ListExampleSelection.tsx * Update ListExampleSelection.shorthand.tsx * Small improvement * Rename *ItemIndex -> *Index * Names refactoring * Minor improvements * update changelog * Add onSelectedIndexChange * Add some tests * Small improvements afer CR * Small improvements afer CR * Small improvements afer CR * create focus handler when List is constructed * fix changelog * changelog * docs(Examples): allow to use TS in examples (#617) * docs(Examples): allow to use TS in examples * add jsdoc * fix typo * rename file * add comment * `createExample` to `createExampleSourceCode` * rework with `path.relative()` * remove JSON files on remove tsx * create getRelativePathToSource function * -updated changelog * -updated changelog * -updated changelog with breaking changes -removed TODO comment * -fixed imports in examples

docs(Examples): allow to use TS in examples

5bcb881

layershifter requested review from dvdzkwsk, kuzhelov, levithomason, miroslavstastny and mnajdova as code owners December 14, 2018 15:27

layershifter added 2 commits December 17, 2018 16:47

add jsdoc

9326241

Merge branch 'master' of https://github.com/stardust-ui/react into do…

4a0f1b8

…cs/use-ts

layershifter changed the title ~~[WIP] docs(Examples): allow to use TS in examples~~ docs(Examples): allow to use TS in examples Dec 17, 2018

layershifter added the 🚀 ready for review label Dec 17, 2018

mnajdova reviewed Dec 18, 2018

View reviewed changes

build/gulp/plugins/gulp-example-source.ts Outdated Show resolved Hide resolved

layershifter added 2 commits December 18, 2018 14:29

fix typo

e0bc87e

Merge branch 'master' of https://github.com/stardust-ui/react into do…

2cc4aa7

…cs/use-ts

layershifter mentioned this pull request Dec 18, 2018

docs(Examples): fix imports in all examples to TS style #631

Merged

kuzhelov reviewed Dec 18, 2018

View reviewed changes

layershifter added 6 commits December 18, 2018 16:44

rename file

b7ccf3e

add comment

1dcb574

createExample to createExampleSourceCode

cba2827

rework with path.relative()

ac10ffe

remove JSON files on remove tsx

4a7f5a3

Merge branches 'docs/use-ts' and 'master' of https://github.com/stard…

8754a60

…ust-ui/react into docs/use-ts

mnajdova approved these changes Dec 19, 2018

View reviewed changes

kuzhelov reviewed Dec 19, 2018

View reviewed changes

kuzhelov approved these changes Dec 19, 2018

View reviewed changes

build/gulp/plugins/gulp-example-source.ts Outdated Show resolved Hide resolved

layershifter added 2 commits December 19, 2018 13:03

Merge branches 'docs/use-ts' and 'master' of https://github.com/stard…

bdb403f

…ust-ui/react into docs/use-ts

create getRelativePathToSource function

ed110c5

layershifter merged commit 03c0bd2 into master Dec 19, 2018

layershifter deleted the docs/use-ts branch December 19, 2018 12:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(Examples): allow to use TS in examples #617

docs(Examples): allow to use TS in examples #617

layershifter commented Dec 14, 2018 •

edited

Loading

DustyTheBot commented Dec 14, 2018

layershifter commented Dec 18, 2018

layershifter commented Dec 18, 2018

kuzhelov Dec 19, 2018

docs(Examples): allow to use TS in examples #617

docs(Examples): allow to use TS in examples #617

Conversation

layershifter commented Dec 14, 2018 • edited Loading

Known issues

1. JS examples lose some formatting.

Input: TS code

Babel: JS output

2. There are no toggle for Typescript

DustyTheBot commented Dec 14, 2018

layershifter commented Dec 18, 2018

layershifter commented Dec 18, 2018

TODO for next PR

kuzhelov Dec 19, 2018

Choose a reason for hiding this comment

layershifter commented Dec 14, 2018 •

edited

Loading