diff --git a/.babel-preset.js b/.babel-preset.js index 5e321de840..3a35ab5ced 100644 --- a/.babel-preset.js +++ b/.babel-preset.js @@ -1,7 +1,8 @@ const { NODE_ENV } = process.env const isESBuild = NODE_ENV === 'build-es' -const isLibBuild = NODE_ENV === 'build' || isESBuild +const isUMDBuild = NODE_ENV === 'build-umd' +const isLibBuild = NODE_ENV === 'build' || isESBuild || isUMDBuild const isDocsBuild = NODE_ENV === 'development' || NODE_ENV === 'production' const browsers = [ @@ -22,7 +23,6 @@ const plugins = [ [ '@babel/plugin-transform-runtime', { - polyfill: false, regenerator: isDocsBuild, }, ], @@ -32,7 +32,8 @@ const plugins = [ [ 'transform-react-remove-prop-types', { - mode: 'wrap', + mode: isUMDBuild ? 'remove' : 'wrap', + removeImport: isUMDBuild, }, ], // A plugin for react-static diff --git a/.eslintignore b/.eslintignore index e4fdcd8780..d38d818d18 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,3 +3,4 @@ dist/* docs/dist/* examples/webpack3/scripts/* dll/* +tmp/* diff --git a/.github/stale.yml b/.github/stale.yml index e99f6ebef4..1dfebfc380 100644 --- a/.github/stale.yml +++ b/.github/stale.yml @@ -1,8 +1,8 @@ # Number of days of inactivity before an issue becomes stale -daysUntilStale: 90 +daysUntilStale: 180 # Number of days of inactivity before a stale issue is closed -daysUntilClose: 90 +daysUntilClose: 180 # Issues with these labels will never be considered stale exemptLabels: @@ -14,7 +14,7 @@ staleLabel: stale # Comment to post when marking an issue as stale. Set to `false` to disable markComment: > - There has been no activity in this thread for 90 days. While we care about + There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one. @@ -23,11 +23,11 @@ markComment: > However, PRs for this issue will of course be accepted and welcome! - If there is no more activity in the next 90 days, this issue will be closed + If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks! # Comment to post when closing a stale issue. Set to `false` to disable closeComment: > - This issue will be closed due to lack of activity for 6 months. If you’d + This issue will be closed due to lack of activity for 12 months. If you’d like this to be reopened, just leave a comment; we do monitor them! diff --git a/.prettierignore b/.prettierignore index 166429ef5b..21bed9d588 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,7 +4,6 @@ .idea/ .vscode/ - coverage/ dist/ @@ -16,3 +15,4 @@ docs/src/exampleMenus docs/dist/ package.json +tmp/ diff --git a/CHANGELOG.md b/CHANGELOG.md index 9eedea0b1f..3b21b90a2b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,93 @@ # Change Log +## [v0.83.0](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.83.0) (2018-10-20) +[Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.82.5...v0.83.0) + +**Merged pull requests:** + +- fix\(Input\): fix typings for onChange [\#3230](https://github.com/Semantic-Org/Semantic-UI-React/pull/3230) ([layershifter](https://github.com/layershifter)) +- docs\(Layouts\): fix examples with incorrect props [\#3227](https://github.com/Semantic-Org/Semantic-UI-React/pull/3227) ([AlanFoster](https://github.com/AlanFoster)) +- docs\(Ads\): fix rendering in SSR [\#3218](https://github.com/Semantic-Org/Semantic-UI-React/pull/3218) ([layershifter](https://github.com/layershifter)) +- docs\(Ads\): fix multiple ads [\#3215](https://github.com/Semantic-Org/Semantic-UI-React/pull/3215) ([layershifter](https://github.com/layershifter)) +- chore\(build\): update babel deps, fix production build of docs and build on Windows [\#3214](https://github.com/Semantic-Org/Semantic-UI-React/pull/3214) ([layershifter](https://github.com/layershifter)) +- docs\(Search\): fix resolver imports [\#3213](https://github.com/Semantic-Org/Semantic-UI-React/pull/3213) ([layershifter](https://github.com/layershifter)) +- docs\(README\): fix link to CSS Usage page [\#3212](https://github.com/Semantic-Org/Semantic-UI-React/pull/3212) ([jahvi](https://github.com/jahvi)) +- fix\(typings\): fix definition for SemanticShorthandItemFunc [\#3204](https://github.com/Semantic-Org/Semantic-UI-React/pull/3204) ([layershifter](https://github.com/layershifter)) +- docs\(Prototypes\): add example integration with redux-form [\#3203](https://github.com/Semantic-Org/Semantic-UI-React/pull/3203) ([layershifter](https://github.com/layershifter)) +- docs\(mixed\): add MDX support, update pages, styling updates [\#3196](https://github.com/Semantic-Org/Semantic-UI-React/pull/3196) ([layershifter](https://github.com/layershifter)) +- feat\(Sidebar\): add `target` prop [\#3191](https://github.com/Semantic-Org/Semantic-UI-React/pull/3191) ([layershifter](https://github.com/layershifter)) +- BREAKING\(eventStack\): fix issues with event subscriptions [\#3189](https://github.com/Semantic-Org/Semantic-UI-React/pull/3189) ([layershifter](https://github.com/layershifter)) +- fix\(Input\): pass `title` down to an input element [\#3187](https://github.com/Semantic-Org/Semantic-UI-React/pull/3187) ([layershifter](https://github.com/layershifter)) +- docs\(props\): improve parsing of customPropTypes.every\(\) [\#3185](https://github.com/Semantic-Org/Semantic-UI-React/pull/3185) ([layershifter](https://github.com/layershifter)) +- fix\(Grid\): improve propTypes check for width props [\#3184](https://github.com/Semantic-Org/Semantic-UI-React/pull/3184) ([layershifter](https://github.com/layershifter)) +- fix\(customPropTypes|typings\): allow to pass a function to itemShorthand, update typings [\#3183](https://github.com/Semantic-Org/Semantic-UI-React/pull/3183) ([layershifter](https://github.com/layershifter)) +- docs\(Advertisement\): update a base Advertisement example [\#3179](https://github.com/Semantic-Org/Semantic-UI-React/pull/3179) ([layershifter](https://github.com/layershifter)) +- docs\(Document\): use only https sources [\#3178](https://github.com/Semantic-Org/Semantic-UI-React/pull/3178) ([layershifter](https://github.com/layershifter)) +- docs\(Grid\): fix typo in GridExampleStretched example description [\#3167](https://github.com/Semantic-Org/Semantic-UI-React/pull/3167) ([sgarrity](https://github.com/sgarrity)) +- chore\(package\): update to SUI 2.4.0 [\#3162](https://github.com/Semantic-Org/Semantic-UI-React/pull/3162) ([layershifter](https://github.com/layershifter)) +- docs\(Form\): add an example of accessible Form.Select [\#3157](https://github.com/Semantic-Org/Semantic-UI-React/pull/3157) ([arthurdenner](https://github.com/arthurdenner)) +- chore\(typings\): add strict props [\#3107](https://github.com/Semantic-Org/Semantic-UI-React/pull/3107) ([evollu](https://github.com/evollu)) +- chore\(Sidebar\): use EventStack component [\#2990](https://github.com/Semantic-Org/Semantic-UI-React/pull/2990) ([layershifter](https://github.com/layershifter)) + +## [v0.82.5](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.82.5) (2018-09-12) +[Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.82.4...v0.82.5) + +**Merged pull requests:** + +- fix\(EventStack\): fix issues with event handling [\#3148](https://github.com/Semantic-Org/Semantic-UI-React/pull/3148) ([layershifter](https://github.com/layershifter)) + +## [v0.82.4](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.82.4) (2018-09-10) +[Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.82.3...v0.82.4) + +**Merged pull requests:** + +- chore\(package\): update babel-plugin-filter-imports [\#3145](https://github.com/Semantic-Org/Semantic-UI-React/pull/3145) ([layershifter](https://github.com/layershifter)) +- chore\(build\): fix prettier imports [\#3142](https://github.com/Semantic-Org/Semantic-UI-React/pull/3142) ([layershifter](https://github.com/layershifter)) +- fix\(customPropTypes\): allow to pass an object to "as" [\#3139](https://github.com/Semantic-Org/Semantic-UI-React/pull/3139) ([tomitrescak](https://github.com/tomitrescak)) +- chore\(package\): update deps [\#3131](https://github.com/Semantic-Org/Semantic-UI-React/pull/3131) ([layershifter](https://github.com/layershifter)) +- chore\(package\): update Babel 7 [\#3129](https://github.com/Semantic-Org/Semantic-UI-React/pull/3129) ([layershifter](https://github.com/layershifter)) +- docs\(README\): fix CircleCI image [\#3128](https://github.com/Semantic-Org/Semantic-UI-React/pull/3128) ([layershifter](https://github.com/layershifter)) +- feat\(List\): allow overriding role prop [\#3125](https://github.com/Semantic-Org/Semantic-UI-React/pull/3125) ([johannao76](https://github.com/johannao76)) +- fix\(EventStack\): fix compatibility with IE11 [\#3124](https://github.com/Semantic-Org/Semantic-UI-React/pull/3124) ([layershifter](https://github.com/layershifter)) +- fix\(Dropdown\): override onChange in DropdownSearchInput [\#3123](https://github.com/Semantic-Org/Semantic-UI-React/pull/3123) ([layershifter](https://github.com/layershifter)) +- fix\(Popup\): missing CSS style update [\#3109](https://github.com/Semantic-Org/Semantic-UI-React/pull/3109) ([pferreir](https://github.com/pferreir)) +- fix\(Dropdown\): fix deepEqual bug [\#3104](https://github.com/Semantic-Org/Semantic-UI-React/pull/3104) ([pedromtorres](https://github.com/pedromtorres)) +- fix\(docs\): fix issues with local builds [\#3098](https://github.com/Semantic-Org/Semantic-UI-React/pull/3098) ([layershifter](https://github.com/layershifter)) + +## [v0.82.3](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.82.3) (2018-08-22) +[Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.82.2...v0.82.3) + +**Merged pull requests:** + +- fix\(Icon\): update icon names [\#3092](https://github.com/Semantic-Org/Semantic-UI-React/pull/3092) ([levithomason](https://github.com/levithomason)) +- chore\(package\): update Babel to RC1 [\#3086](https://github.com/Semantic-Org/Semantic-UI-React/pull/3086) ([layershifter](https://github.com/layershifter)) +- chore\(build\): fixes for UMD build [\#3085](https://github.com/Semantic-Org/Semantic-UI-React/pull/3085) ([layershifter](https://github.com/layershifter)) +- chore\(package\): bump react-sandbox-render [\#3084](https://github.com/Semantic-Org/Semantic-UI-React/pull/3084) ([layershifter](https://github.com/layershifter)) +- fix\(Message\): export size prop in typings [\#3083](https://github.com/Semantic-Org/Semantic-UI-React/pull/3083) ([layershifter](https://github.com/layershifter)) +- docs\(Item\): cleanup examples [\#3082](https://github.com/Semantic-Org/Semantic-UI-React/pull/3082) ([ChenjieZhou](https://github.com/ChenjieZhou)) +- chore\(config\): remove unused options [\#3080](https://github.com/Semantic-Org/Semantic-UI-React/pull/3080) ([layershifter](https://github.com/layershifter)) +- docs\(build\): fix reloading of examples sources [\#3075](https://github.com/Semantic-Org/Semantic-UI-React/pull/3075) ([layershifter](https://github.com/layershifter)) +- docs\(ComponentExample\): fix display of children [\#3070](https://github.com/Semantic-Org/Semantic-UI-React/pull/3070) ([layershifter](https://github.com/layershifter)) + +## [v0.82.2](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.82.2) (2018-08-07) +[Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.82.1...v0.82.2) + +**Merged pull requests:** + +- docs\(perf\): refactor ComponentControls [\#3069](https://github.com/Semantic-Org/Semantic-UI-React/pull/3069) ([layershifter](https://github.com/layershifter)) +- chore\(package\): use react 16.4 in docs and tests [\#3068](https://github.com/Semantic-Org/Semantic-UI-React/pull/3068) ([layershifter](https://github.com/layershifter)) +- chore\(package\): update Babel dependencies [\#3067](https://github.com/Semantic-Org/Semantic-UI-React/pull/3067) ([layershifter](https://github.com/layershifter)) +- docs\(Examples\): use react-source-render [\#3065](https://github.com/Semantic-Org/Semantic-UI-React/pull/3065) ([layershifter](https://github.com/layershifter)) +- docs\(IconExampleFitted\): better demonstrate fitted [\#3058](https://github.com/Semantic-Org/Semantic-UI-React/pull/3058) ([levithomason](https://github.com/levithomason)) +- fix\(Dropdown\): fix `additionLabel` definition [\#3055](https://github.com/Semantic-Org/Semantic-UI-React/pull/3055) ([DavidHall](https://github.com/DavidHall)) +- fix\(Sidebar\): clear timer when unmounting [\#3052](https://github.com/Semantic-Org/Semantic-UI-React/pull/3052) ([hissalht](https://github.com/hissalht)) +- docs\(src\): fix Sidebar filter and Intro editors [\#3044](https://github.com/Semantic-Org/Semantic-UI-React/pull/3044) ([levithomason](https://github.com/levithomason)) +- test\(Rating\): clean up tests [\#3041](https://github.com/Semantic-Org/Semantic-UI-React/pull/3041) ([layershifter](https://github.com/layershifter)) +- docs\(ComponentExample\): fix and improve edit experience [\#3038](https://github.com/Semantic-Org/Semantic-UI-React/pull/3038) ([levithomason](https://github.com/levithomason)) +- chore\(package\): update dev deps [\#3035](https://github.com/Semantic-Org/Semantic-UI-React/pull/3035) ([layershifter](https://github.com/layershifter)) +- fix\(Modal\): prevent resize loop for full screen height [\#3024](https://github.com/Semantic-Org/Semantic-UI-React/pull/3024) ([marcdavi-es](https://github.com/marcdavi-es)) +- docs\(build\): use react-static for prerender [\#2925](https://github.com/Semantic-Org/Semantic-UI-React/pull/2925) ([layershifter](https://github.com/layershifter)) + ## [v0.82.1](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.82.1) (2018-07-22) [Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.82.0...v0.82.1) @@ -164,7 +252,7 @@ - fix\(Checkbox\): only add "fitted" class if label is nil [\#2660](https://github.com/Semantic-Org/Semantic-UI-React/pull/2660) ([SimonKinds](https://github.com/SimonKinds)) - docs\(changelog\): capture all PRs [\#2659](https://github.com/Semantic-Org/Semantic-UI-React/pull/2659) ([levithomason](https://github.com/levithomason)) - docs\(readme\): add Distense to the built with list [\#2655](https://github.com/Semantic-Org/Semantic-UI-React/pull/2655) ([JohnAllen](https://github.com/JohnAllen)) -- docs\(Responsive\): fix spelling [\#2653](https://github.com/Semantic-Org/Semantic-UI-React/pull/2653) ([cptbrkfst](https://github.com/cptbrkfst)) +- docs\(Responsive\): fix spelling [\#2653](https://github.com/Semantic-Org/Semantic-UI-React/pull/2653) ([dyyyl](https://github.com/dyyyl)) - docs\(Search\): debounce search change handler [\#2650](https://github.com/Semantic-Org/Semantic-UI-React/pull/2650) ([ryanflowers](https://github.com/ryanflowers)) - fix\(Input\): add missing accept prop [\#2647](https://github.com/Semantic-Org/Semantic-UI-React/pull/2647) ([fastman](https://github.com/fastman)) - fix\(factories\): fix typo in exception [\#2645](https://github.com/Semantic-Org/Semantic-UI-React/pull/2645) ([eightnoteight](https://github.com/eightnoteight)) @@ -198,7 +286,7 @@ - feat\(Dropdown\): 'wrapSelecion' prop: option to disable "infinity" list [\#2533](https://github.com/Semantic-Org/Semantic-UI-React/pull/2533) ([GCrispino](https://github.com/GCrispino)) - fix\(Responsive\): use root element client width [\#2531](https://github.com/Semantic-Org/Semantic-UI-React/pull/2531) ([Autarc](https://github.com/Autarc)) - fix\(ComponentDoc\): clickable subcomponent props menu [\#2526](https://github.com/Semantic-Org/Semantic-UI-React/pull/2526) ([levithomason](https://github.com/levithomason)) -- docs\(Pagination\): add missing prop in PaginationExampleOptions [\#2510](https://github.com/Semantic-Org/Semantic-UI-React/pull/2510) ([Elliott32](https://github.com/Elliott32)) +- docs\(Pagination\): add missing prop in PaginationExampleOptions [\#2510](https://github.com/Semantic-Org/Semantic-UI-React/pull/2510) ([elliottspirit](https://github.com/elliottspirit)) - fix\(Progress\): use correct width for value/total [\#2503](https://github.com/Semantic-Org/Semantic-UI-React/pull/2503) ([rachelslurs](https://github.com/rachelslurs)) - docs\(README\): add 173app to the built with list [\#2495](https://github.com/Semantic-Org/Semantic-UI-React/pull/2495) ([Carrotzpc](https://github.com/Carrotzpc)) - docs\(ComponentExample\): fix code editor body regex [\#2481](https://github.com/Semantic-Org/Semantic-UI-React/pull/2481) ([nieroda](https://github.com/nieroda)) @@ -262,7 +350,7 @@ - docs\(Step\): fix display of an icon in StepExampleEvenlyDivided [\#2365](https://github.com/Semantic-Org/Semantic-UI-React/pull/2365) ([jeroenvervaeke](https://github.com/jeroenvervaeke)) - feat\(Button\): add `buttons` shorthand to ButtonGroup [\#2361](https://github.com/Semantic-Org/Semantic-UI-React/pull/2361) ([layershifter](https://github.com/layershifter)) -- docs\(README.md\): add bailfacile.fr to list of websites using Semantic UI React [\#2357](https://github.com/Semantic-Org/Semantic-UI-React/pull/2357) ([potioventures](https://github.com/potioventures)) +- docs\(README.md\): add bailfacile.fr to list of websites using Semantic UI React [\#2357](https://github.com/Semantic-Org/Semantic-UI-React/pull/2357) ([valentinfily](https://github.com/valentinfily)) - docs\(README.md\): add re.yomeshgupta.com to the build with list [\#2351](https://github.com/Semantic-Org/Semantic-UI-React/pull/2351) ([yomeshgupta](https://github.com/yomeshgupta)) - fix\(Transition\): fix of the choice of duration [\#2350](https://github.com/Semantic-Org/Semantic-UI-React/pull/2350) ([layershifter](https://github.com/layershifter)) - chore\(docgen|menugen\): fix problems with paths on Windows [\#2349](https://github.com/Semantic-Org/Semantic-UI-React/pull/2349) ([layershifter](https://github.com/layershifter)) @@ -289,90 +377,6 @@ - docs\(ComponentSidebar\): add sidebar navigation [\#2070](https://github.com/Semantic-Org/Semantic-UI-React/pull/2070) ([layershifter](https://github.com/layershifter)) - docs\(DropdownExamplePointing\): Fix nested Dropdown [\#1644](https://github.com/Semantic-Org/Semantic-UI-React/pull/1644) ([Jimeno0](https://github.com/Jimeno0)) -## [v0.76.0](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.76.0) (2017-11-04) -[Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.75.1...v0.76.0) - -**Merged pull requests:** - -- docs\(readme\): update link and desc of `react-semantic.ui-starter` [\#2288](https://github.com/Semantic-Org/Semantic-UI-React/pull/2288) ([Metnew](https://github.com/Metnew)) -- docs\(readme\): add Bandwidth Hero to built with [\#2284](https://github.com/Semantic-Org/Semantic-UI-React/pull/2284) ([ayastreb](https://github.com/ayastreb)) -- docs\(Advertisement\): fix AdvertisementExampleBannerTop example [\#2275](https://github.com/Semantic-Org/Semantic-UI-React/pull/2275) ([tuzhu008](https://github.com/tuzhu008)) -- docs\(HOC\): remove reexport to avoid warning in test [\#2270](https://github.com/Semantic-Org/Semantic-UI-React/pull/2270) ([layershifter](https://github.com/layershifter)) -- chore\(test\): fix browser config [\#2269](https://github.com/Semantic-Org/Semantic-UI-React/pull/2269) ([layershifter](https://github.com/layershifter)) -- Update README.md [\#2268](https://github.com/Semantic-Org/Semantic-UI-React/pull/2268) ([garysieling](https://github.com/garysieling)) -- fix\(Modal\): fix errors with SSR [\#2260](https://github.com/Semantic-Org/Semantic-UI-React/pull/2260) ([adam-26](https://github.com/adam-26)) -- docs\(README\): fix URL collision [\#2258](https://github.com/Semantic-Org/Semantic-UI-React/pull/2258) ([neslinesli93](https://github.com/neslinesli93)) -- docs\(README\): add ForecastCycles to built-with list [\#2257](https://github.com/Semantic-Org/Semantic-UI-React/pull/2257) ([neslinesli93](https://github.com/neslinesli93)) -- fix\(Modal\): fix state update after close [\#2254](https://github.com/Semantic-Org/Semantic-UI-React/pull/2254) ([layershifter](https://github.com/layershifter)) -- fix\(Dropdown\): isEqual over shallowEqual for props [\#2252](https://github.com/Semantic-Org/Semantic-UI-React/pull/2252) ([chrisjbrown](https://github.com/chrisjbrown)) -- docs\(Dropdown\): add dedicated example for controlled Dropdown [\#2251](https://github.com/Semantic-Org/Semantic-UI-React/pull/2251) ([layershifter](https://github.com/layershifter)) -- fix\(docs\): fix propTypes warnings [\#2244](https://github.com/Semantic-Org/Semantic-UI-React/pull/2244) ([layershifter](https://github.com/layershifter)) -- docs\(Accordion\): fix typo in AccordionExampleForm [\#2239](https://github.com/Semantic-Org/Semantic-UI-React/pull/2239) ([rabbl](https://github.com/rabbl)) -- docs\(README\): add gitconnected to built-with list [\#2238](https://github.com/Semantic-Org/Semantic-UI-React/pull/2238) ([treyhuffine](https://github.com/treyhuffine)) -- feat\(Grid\): allow multiple values for `reversed` prop [\#2235](https://github.com/Semantic-Org/Semantic-UI-React/pull/2235) ([layershifter](https://github.com/layershifter)) -- fix\(Portal\): pass additional agruments to trigger handlers [\#2234](https://github.com/Semantic-Org/Semantic-UI-React/pull/2234) ([layershifter](https://github.com/layershifter)) -- docs\(Usage\): switch from NPM to yarn [\#2232](https://github.com/Semantic-Org/Semantic-UI-React/pull/2232) ([lielfr](https://github.com/lielfr)) -- docs\(Views\): add \ tags to docs [\#2231](https://github.com/Semantic-Org/Semantic-UI-React/pull/2231) ([RetroCraft](https://github.com/RetroCraft)) -- docs\(Ref\): add a basic example [\#2226](https://github.com/Semantic-Org/Semantic-UI-React/pull/2226) ([layershifter](https://github.com/layershifter)) -- breaking\(Image\): Inconsistent prop usage between Image and Icon for circular shape [\#2225](https://github.com/Semantic-Org/Semantic-UI-React/pull/2225) ([RetroCraft](https://github.com/RetroCraft)) -- feat\(Dropdown\): make deburr opt-in, and deburr input [\#2223](https://github.com/Semantic-Org/Semantic-UI-React/pull/2223) ([patrikmolsson](https://github.com/patrikmolsson)) -- docs\(Icon\): fix similar icon search [\#2220](https://github.com/Semantic-Org/Semantic-UI-React/pull/2220) ([patrikmolsson](https://github.com/patrikmolsson)) -- feat\(Portal\): use Ref for handling trigger refs [\#2219](https://github.com/Semantic-Org/Semantic-UI-React/pull/2219) ([layershifter](https://github.com/layershifter)) -- docs\(index\): don't use prod libs in dev [\#2216](https://github.com/Semantic-Org/Semantic-UI-React/pull/2216) ([levithomason](https://github.com/levithomason)) -- docs\(Props\): make large code blocks more legible [\#2215](https://github.com/Semantic-Org/Semantic-UI-React/pull/2215) ([redbmk](https://github.com/redbmk)) -- fix\(Popup\): execute `onClose` when Popup closes on scroll [\#2182](https://github.com/Semantic-Org/Semantic-UI-React/pull/2182) ([mkarajohn](https://github.com/mkarajohn)) -- feat\(TransitionablePortal\): add component [\#2155](https://github.com/Semantic-Org/Semantic-UI-React/pull/2155) ([layershifter](https://github.com/layershifter)) -- perf\(customPropTypes\): Memoize `suggest` [\#2149](https://github.com/Semantic-Org/Semantic-UI-React/pull/2149) ([ayastreb](https://github.com/ayastreb)) -- feat\(Responsive\): add `fireOnMount` prop [\#2137](https://github.com/Semantic-Org/Semantic-UI-React/pull/2137) ([layershifter](https://github.com/layershifter)) -- docs\(ComponentDoc\): refactor and optimize [\#2123](https://github.com/Semantic-Org/Semantic-UI-React/pull/2123) ([layershifter](https://github.com/layershifter)) - -## [v0.75.1](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.75.1) (2017-10-18) -[Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.75.0...v0.75.1) - -**Merged pull requests:** - -- fix\(FormField\): pass content prop through [\#2212](https://github.com/Semantic-Org/Semantic-UI-React/pull/2212) ([levithomason](https://github.com/levithomason)) -- fix\(Responsive\): fix usage of `window` for SSR [\#2209](https://github.com/Semantic-Org/Semantic-UI-React/pull/2209) ([layershifter](https://github.com/layershifter)) -- docs\(Form\): fix typo in label [\#2208](https://github.com/Semantic-Org/Semantic-UI-React/pull/2208) ([layershifter](https://github.com/layershifter)) -- feat\(typings\): export DropdownOnSearchChangeData [\#2205](https://github.com/Semantic-Org/Semantic-UI-React/pull/2205) ([pierre-H](https://github.com/pierre-H)) -- chore\(circleci\): fix typo in a step name [\#2200](https://github.com/Semantic-Org/Semantic-UI-React/pull/2200) ([WiNloSt](https://github.com/WiNloSt)) -- fix\(TextArea\): fix autoHeight calculate wrong value on long text [\#2199](https://github.com/Semantic-Org/Semantic-UI-React/pull/2199) ([WiNloSt](https://github.com/WiNloSt)) - -## [v0.75.0](https://github.com/Semantic-Org/Semantic-UI-React/tree/v0.75.0) (2017-10-16) -[Full Changelog](https://github.com/Semantic-Org/Semantic-UI-React/compare/v0.74.2...v0.75.0) - -**Merged pull requests:** - -- docs\(ISSUE\_TEMPLATE\): update link to SO and code template [\#2198](https://github.com/Semantic-Org/Semantic-UI-React/pull/2198) ([layershifter](https://github.com/layershifter)) -- feat\(Message\): add `top` to possible values of `attached` [\#2197](https://github.com/Semantic-Org/Semantic-UI-React/pull/2197) ([layershifter](https://github.com/layershifter)) -- style\(mixed\): fix spelling and grammar issues in comments and tests [\#2196](https://github.com/Semantic-Org/Semantic-UI-React/pull/2196) ([direvus](https://github.com/direvus)) -- docs\(Button\): add missing props to example [\#2191](https://github.com/Semantic-Org/Semantic-UI-React/pull/2191) ([patrikmolsson](https://github.com/patrikmolsson)) -- fix\(typings\): fix definition for Accordion.Accordion [\#2180](https://github.com/Semantic-Org/Semantic-UI-React/pull/2180) ([swASO](https://github.com/swASO)) -- docs\(README\): add aircip.ir and platform.nazarbazaar.ir to `built with` section [\#2179](https://github.com/Semantic-Org/Semantic-UI-React/pull/2179) ([ali-master](https://github.com/ali-master)) -- style\(Form\): fix typo in examples [\#2178](https://github.com/Semantic-Org/Semantic-UI-React/pull/2178) ([abhn](https://github.com/abhn)) -- docs\(examples\): fix webpack.config.js [\#2171](https://github.com/Semantic-Org/Semantic-UI-React/pull/2171) ([armendarabyan](https://github.com/armendarabyan)) -- feat\(typings\): add icon names for Icon [\#2167](https://github.com/Semantic-Org/Semantic-UI-React/pull/2167) ([vincealdrin](https://github.com/vincealdrin)) -- fix\(Form\): don't prevent form submission when action='' [\#2165](https://github.com/Semantic-Org/Semantic-UI-React/pull/2165) ([eug48](https://github.com/eug48)) -- fix\(Dropdown\): update text when item selected with keyboard [\#2162](https://github.com/Semantic-Org/Semantic-UI-React/pull/2162) ([ayastreb](https://github.com/ayastreb)) -- docs\(Portal\): remove useless props in PortalExampleControlled [\#2159](https://github.com/Semantic-Org/Semantic-UI-React/pull/2159) ([layershifter](https://github.com/layershifter)) -- test\(typings\): restore assertion for typings and propTypes order [\#2158](https://github.com/Semantic-Org/Semantic-UI-React/pull/2158) ([layershifter](https://github.com/layershifter)) -- docs\(Portal\): add controlled example [\#2156](https://github.com/Semantic-Org/Semantic-UI-React/pull/2156) ([layershifter](https://github.com/layershifter)) -- fix\(Modal\): set scrolling body class on re-open [\#2152](https://github.com/Semantic-Org/Semantic-UI-React/pull/2152) ([ayastreb](https://github.com/ayastreb)) -- test\(common\): support isConformant for portals [\#2146](https://github.com/Semantic-Org/Semantic-UI-React/pull/2146) ([levithomason](https://github.com/levithomason)) -- breaking\(Step\): refactor Step to use factories, update content props, add missing props [\#2145](https://github.com/Semantic-Org/Semantic-UI-React/pull/2145) ([layershifter](https://github.com/layershifter)) -- test\(mixed\): add test for `content` prop, remove useless tests [\#2144](https://github.com/Semantic-Org/Semantic-UI-React/pull/2144) ([layershifter](https://github.com/layershifter)) -- breaking\(Statistic\): refactor Statistic to use factories, update content props [\#2143](https://github.com/Semantic-Org/Semantic-UI-React/pull/2143) ([layershifter](https://github.com/layershifter)) -- feat\(Ref\): add component [\#2142](https://github.com/Semantic-Org/Semantic-UI-React/pull/2142) ([layershifter](https://github.com/layershifter)) -- perf\(Breadcrumb\): move computer of ElementType to method on BreadcrumbSection [\#2141](https://github.com/Semantic-Org/Semantic-UI-React/pull/2141) ([layershifter](https://github.com/layershifter)) -- fix\(Search\): simplify propTypes on SearchResult [\#2138](https://github.com/Semantic-Org/Semantic-UI-React/pull/2138) ([layershifter](https://github.com/layershifter)) -- docs\(readme\): url update in built with [\#2134](https://github.com/Semantic-Org/Semantic-UI-React/pull/2134) ([GautierT](https://github.com/GautierT)) -- chore\(package\): update to react 16 [\#2131](https://github.com/Semantic-Org/Semantic-UI-React/pull/2131) ([layershifter](https://github.com/layershifter)) -- fix\(Transition\): fix component wrapping inside Transition.Group [\#2130](https://github.com/Semantic-Org/Semantic-UI-React/pull/2130) ([layershifter](https://github.com/layershifter)) -- docs\(Dropdown\): fix DropdownRemoteExample [\#2126](https://github.com/Semantic-Org/Semantic-UI-React/pull/2126) ([patrikmolsson](https://github.com/patrikmolsson)) -- docs\(readme\): add amazon publishing to built with [\#2122](https://github.com/Semantic-Org/Semantic-UI-React/pull/2122) ([austinfox](https://github.com/austinfox)) -- perf\(lodash\): remove \_.omit and \_.isEqual [\#2111](https://github.com/Semantic-Org/Semantic-UI-React/pull/2111) ([levithomason](https://github.com/levithomason)) -- fix\(Modal\): add/remove dimmer classes in raf [\#2010](https://github.com/Semantic-Org/Semantic-UI-React/pull/2010) ([levithomason](https://github.com/levithomason)) - \* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)* \ No newline at end of file diff --git a/README.md b/README.md index 66b2291990..00e5c51fc3 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Gitter - Circle + Circle Codecov @@ -112,6 +112,7 @@ This is a listing of example projects and guides that will help you integrate Se
How do I setup CSS? + There are several options. Refer to our doc on [CSS Usage][23].
diff --git a/config.js b/config.js index e7ce1b70cb..86db5a6784 100644 --- a/config.js +++ b/config.js @@ -1,4 +1,4 @@ -import path from 'path' +const path = require('path') // ------------------------------------ // Environment vars @@ -42,12 +42,6 @@ const config = { ...envConfig, paths, - // ---------------------------------- - // Server Configuration - // ---------------------------------- - server_host: 'localhost', - server_port: process.env.PORT || 8080, - // ---------------------------------- // Compiler Configuration // ---------------------------------- @@ -92,11 +86,10 @@ const config = { 'classnames', 'copy-to-clipboard', 'faker', - 'prettier/standalone', 'react', 'react-ace', 'react-dom', ], } -export default config +module.exports = config diff --git a/docs/public/images/prototypes/redux-form.png b/docs/public/images/prototypes/redux-form.png new file mode 100644 index 0000000000..53e347284c Binary files /dev/null and b/docs/public/images/prototypes/redux-form.png differ diff --git a/docs/public/style.css b/docs/public/style.css index 02f94b9a75..1dc5de91e0 100644 --- a/docs/public/style.css +++ b/docs/public/style.css @@ -80,7 +80,7 @@ code:not(.hljs)::after { } #carbonads { - display: block; + line-height: 1.4; } #carbonads span { @@ -93,17 +93,28 @@ code:not(.hljs)::after { .carbon-img img { display: block; + width: 98px; + height: 75px; } .carbon-text { display: block; - margin-top: 1em; + margin-top: 0.25em; + font-size: 0.9em; + color: #aaa; +} +.carbon-text:hover { + color: #ddd } .carbon-poweredby { display: block; - margin-top: 0.5em; - font-size: 0.8em; + margin-top: 0.125em; + font-size: 0.75em; + text-align: right; color: #ffffff; opacity: 0.5; } +.carbon-poweredby:hover { + color: #ddd; +} diff --git a/docs/src/Style.js b/docs/src/Style.js index 2b95bcf73d..6d25ee4d36 100644 --- a/docs/src/Style.js +++ b/docs/src/Style.js @@ -1,19 +1,18 @@ const style = {} const sidebarWidth = 250 -style.container = {} - style.menu = { position: 'fixed', + display: 'flex', + flexDirection: 'column', top: 0, bottom: 0, left: 0, width: sidebarWidth, - paddingBottom: '1em', // match menu background // prevents a white background when items are filtered out by search background: '#1B1C1D', - overflowY: 'scroll', + overflowX: 'hidden', } style.sidebarMain = { diff --git a/docs/src/components/CarbonAd/CarbonAd.js b/docs/src/components/CarbonAd/CarbonAd.js index a3a6899fe2..ca8af59fea 100644 --- a/docs/src/components/CarbonAd/CarbonAd.js +++ b/docs/src/components/CarbonAd/CarbonAd.js @@ -1,26 +1,58 @@ import _ from 'lodash' import React, { Component } from 'react' -const style = { minHeight: 173 } +import { isBrowser } from 'src/lib' + +const style = { + padding: '0.5rem', + background: '#222', + boxShadow: '0 0 2rem black', +} + +let isLoading = true +let script + +const adExist = () => !!document.querySelector('#docs-carbonads #carbonads') + +// Heads up! +// We render docs with React-Static which performs SSR rendering. +if (isBrowser()) { + script = document.createElement('script') + + script.async = true + script.id = '_carbonads_js' + script.type = 'text/javascript' + script.src = '//cdn.carbonads.com/carbon.js?serve=CK7DT23J&placement=reactsemanticuicom' + script.onload = () => { + isLoading = false + } +} + +const waitForLoad = () => { + if (adExist()) isLoading = false + else setTimeout(waitForLoad, 50) +} class CarbonAd extends Component { componentDidMount() { - this.lastHref = location.href - - const script = document.createElement('script') - script.async = true - script.id = '_carbonads_js' - script.type = 'text/javascript' - script.src = '//cdn.carbonads.com/carbon.js?serve=CK7DT23J&placement=reactsemanticuicom' + this.ifRef((ref) => { + // always add the script as it is used to insert the ad + ref.appendChild(script) - this.ifRef(ref => ref.appendChild(script)) + // On the first mount, the script fetches the first ad itself, so do nothing + // On subsequent mounts, we need to call refresh to insert a new ad + // Ensure we don't call refresh during an existing refresh or we'll get a double ad insert + // https://github.com/Semantic-Org/Semantic-UI-React/pull/3215 + if (!isLoading) { + isLoading = true + _.invoke(window._carbonads, 'refresh') + waitForLoad() + } + }) } - componentWillUpdate() { - if (location.href !== this.lastHref) { - this.lastHref = location.href - _.invoke(window._carbonads, 'refresh') - } + shouldComponentUpdate() { + return false } ifRef = (cb) => { diff --git a/docs/src/components/CarbonAd/CarbonAdNative.js b/docs/src/components/CarbonAd/CarbonAdNative.js index bbc9189181..e292551301 100644 --- a/docs/src/components/CarbonAd/CarbonAdNative.js +++ b/docs/src/components/CarbonAd/CarbonAdNative.js @@ -2,6 +2,9 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { Label } from 'semantic-ui-react' +import { makeDebugger } from '../../../../src/lib' + +const debug = makeDebugger('carbon-ad-native') class CarbonAdNative extends Component { static propTypes = { @@ -11,13 +14,16 @@ class CarbonAdNative extends Component { state = {} componentDidMount() { - this.getAd() - + debug('componentDidMount', { mounted: this.mounted }) this.mounted = true + + this.getAd() } componentWillUpdate() { - if (Date.now() - this.timeOfLastAd > 10000) { + const shouldGetAd = Date.now() - this.timeOfLastAd > 10000 + debug('componentWillUpdate', { mounted: this.mounted, shouldGetAd }) + if (shouldGetAd) { this.getAd() } } @@ -28,6 +34,7 @@ class CarbonAdNative extends Component { } cleanup = () => { + debug('cleanup', { script: this.script, mounted: this.mounted }) if (!this.script) return document.getElementsByTagName('head')[0].removeChild(this.script) @@ -35,6 +42,9 @@ class CarbonAdNative extends Component { } getAd = () => { + debug('getAd', { mounted: this.mounted }) + if (!this.mounted) return + window._handleNativeJSON = this.handleNativeJSON this.timeOfLastAd = Date.now() @@ -51,15 +61,18 @@ class CarbonAdNative extends Component { } handleNativeJSON = (json) => { + debug('handleNativeJSON', { mounted: this.mounted }) try { - const sanitized = json.ads + const sanitizedAd = json.ads .filter(ad => Object.keys(ad).length > 0) .filter(ad => !!ad.statlink) + .filter(Boolean)[0] + debug('handleNativeJSON sanitizedAd', sanitizedAd) - if (this.mounted) { - this.setState({ ad: sanitized[0] }) - } else { - this.cleanup() + if (!sanitizedAd) { + this.getAd() + } else if (this.mounted) { + this.setState({ ad: sanitizedAd }) } } catch (err) { // eslint-disable-next-line no-console @@ -71,6 +84,7 @@ class CarbonAdNative extends Component { const { inverted } = this.props const { ad } = this.state + debug('render', ad) if (!ad) return null const id = `carbon-native-${ad.timestamp}` diff --git a/docs/src/components/Editor/EditorAce.js b/docs/src/components/CodeEditor/CodeEditor.js similarity index 94% rename from docs/src/components/Editor/EditorAce.js rename to docs/src/components/CodeEditor/CodeEditor.js index 3073306df5..89875b59d9 100644 --- a/docs/src/components/Editor/EditorAce.js +++ b/docs/src/components/CodeEditor/CodeEditor.js @@ -6,6 +6,7 @@ import 'brace' import 'brace/ext/language_tools' import 'brace/mode/jsx' import 'brace/mode/html' +import 'brace/mode/sh' import 'brace/theme/tomorrow_night' import { componentInfoContext } from 'docs/src/utils' @@ -94,6 +95,8 @@ const semanticUIReactCompleter = { }, } -const EditorAce = props => +const CodeEditor = props => ( + +) -export default EditorAce +export default CodeEditor diff --git a/docs/src/components/Editor/Editor.js b/docs/src/components/CodeEditor/CodeEditorUniveral.js similarity index 84% rename from docs/src/components/Editor/Editor.js rename to docs/src/components/CodeEditor/CodeEditorUniveral.js index 119cf04d71..0c03333773 100644 --- a/docs/src/components/Editor/Editor.js +++ b/docs/src/components/CodeEditor/CodeEditorUniveral.js @@ -12,17 +12,17 @@ export const EDITOR_GUTTER_COLOR = '#25282d' // Heads up! // Brace doesn't support SSR, so we don't include it during SSR build. The usage of the universal // component also allows us to load Editor lazy. -const AceEditor = isBrowser() - ? universal(import('./EditorAce'), { +const CodeEditor = isBrowser() + ? universal(import('./CodeEditor'), { loading: () => , }) : () => null -function Editor(props) { +function CodeEditorUniveral(props) { const { id, mode, readOnly, value, ...rest } = props return ( - ( +
+
{label || mode}
+ + +
+) + +CodeSnippet.propTypes = { + label: PropTypes.string, + mode: PropTypes.oneOf(['html', 'jsx', 'sh']).isRequired, + value: PropTypes.string.isRequired, +} + +export default CodeSnippet diff --git a/docs/src/components/CodeSnippet/index.js b/docs/src/components/CodeSnippet/index.js new file mode 100644 index 0000000000..5116355cf9 --- /dev/null +++ b/docs/src/components/CodeSnippet/index.js @@ -0,0 +1 @@ +export default from './CodeSnippet' diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.js b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.js index 35769d0d74..f3dd3addd3 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.js +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.js @@ -12,11 +12,11 @@ const ComponentControls = (props) => { const { anchorName, examplePath, showHTML, showCode, onCopyLink, onShowHTML, onShowCode } = props return ( - - - - + + + + ) } @@ -29,7 +29,6 @@ ComponentControls.propTypes = { onShowHTML: PropTypes.func, showCode: PropTypes.bool, showHTML: PropTypes.bool, - visible: PropTypes.bool, } -export default updateForKeys(['showCode', 'showHTML', 'visible'])(ComponentControls) +export default updateForKeys(['showCode', 'showHTML'])(ComponentControls) diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.js b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.js index c31fa24a49..6e90bef819 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.js +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.js @@ -2,8 +2,6 @@ import PropTypes from 'prop-types' import React, { Component } from 'react' import { Icon, Menu } from 'semantic-ui-react' -import ComponentControlsToolTip from './ComponentControlsToolTip' - export default class ComponentControlsCopyLink extends Component { state = {} @@ -41,11 +39,10 @@ export default class ComponentControlsCopyLink extends Component { const { active } = this.state return ( - - - - - + + + {active ? ' Copied!' : 'Permalink'} + ) } } diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsEditCode.js b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsEditCode.js index f4a5d2c1ee..8f09425276 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsEditCode.js +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsEditCode.js @@ -2,15 +2,11 @@ import PropTypes from 'prop-types' import React from 'react' import { Icon, Menu } from 'semantic-ui-react' -import { updateForKeys } from 'docs/src/hoc' -import ComponentControlsToolTip from './ComponentControlsToolTip' - const ComponentControlsEditCode = ({ active, onClick }) => ( - - - - - + + + Try it + ) ComponentControlsEditCode.propTypes = { @@ -18,4 +14,4 @@ ComponentControlsEditCode.propTypes = { onClick: PropTypes.func, } -export default updateForKeys(['active'])(ComponentControlsEditCode) +export default ComponentControlsEditCode diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.js b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.js index f92a7b555c..e5c7ccd0eb 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.js +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.js @@ -3,22 +3,18 @@ import PropTypes from 'prop-types' import React from 'react' import { Icon, Menu } from 'semantic-ui-react' -import { neverUpdate } from 'docs/src/hoc' -import ComponentControlsToolTip from './ComponentControlsToolTip' - const ComponentControlsMaximize = ({ examplePath }) => { const href = `/maximize/${_.kebabCase(examplePath.split('/').slice(-1))}` return ( - - - - - + + + Maximize + ) } ComponentControlsMaximize.propTypes = { examplePath: PropTypes.string.isRequired, } -export default neverUpdate(ComponentControlsMaximize) +export default ComponentControlsMaximize diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowHtml.js b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowHtml.js index fb0b5393f3..cfd8cd2660 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowHtml.js +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowHtml.js @@ -2,15 +2,11 @@ import PropTypes from 'prop-types' import React from 'react' import { Icon, Menu } from 'semantic-ui-react' -import { updateForKeys } from 'docs/src/hoc' -import ComponentControlsToolTip from './ComponentControlsToolTip' - const ComponentControlsShowHtml = ({ active, onClick }) => ( - - - - - + + + Show HTML + ) ComponentControlsShowHtml.propTypes = { @@ -18,4 +14,4 @@ ComponentControlsShowHtml.propTypes = { onClick: PropTypes.func, } -export default updateForKeys(['active'])(ComponentControlsShowHtml) +export default ComponentControlsShowHtml diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsToolTip.js b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsToolTip.js deleted file mode 100644 index bbaf350ac6..0000000000 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsToolTip.js +++ /dev/null @@ -1,28 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import { Popup } from 'semantic-ui-react' - -const toolTipStyle = { - padding: '0.5em', - textAlign: 'center', - width: 100, -} - -const ComponentControlsToolTip = ({ children, content }) => ( - -) - -ComponentControlsToolTip.propTypes = { - children: PropTypes.node, - content: PropTypes.node, -} - -export default ComponentControlsToolTip diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js index 027dba8e7b..641f2679e6 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js @@ -9,12 +9,13 @@ import { examplePathToHash, getFormattedHash, repoURL, scrollToAnchor } from 'do import CarbonAdNative from 'docs/src/components/CarbonAd/CarbonAdNative' import ComponentControls from '../ComponentControls' -import ComponentExampleRenderExample from './ComponentExampleRenderExample' +import ComponentExampleRenderEditor from './ComponentExampleRenderEditor' import ComponentExampleRenderHtml from './ComponentExampleRenderHtml' +import ComponentExampleRenderSource from './ComponentExampleRenderSource' import ComponentExampleTitle from './ComponentExampleTitle' -import renderExampleSourceCode from './renderExampleSourceCode' const childrenStyle = { + paddingBottom: 0, paddingTop: 0, maxWidth: '50rem', } @@ -27,6 +28,11 @@ const editorStyle = { padding: 0, } +const componentControlsStyle = { + flex: '0 0 auto', + width: 'auto', +} + /** * Renders a `component` and the raw `code` that produced it. * Allows toggling the the raw `code` code block. @@ -41,6 +47,7 @@ class ComponentExample extends PureComponent { static propTypes = { children: PropTypes.node, description: PropTypes.node, + displayName: PropTypes.string.isRequired, exampleKeys: PropTypes.arrayOf(PropTypes.string).isRequired, exampleSources: PropTypes.objectOf(PropTypes.string).isRequired, examplePath: PropTypes.string.isRequired, @@ -55,30 +62,27 @@ class ComponentExample extends PureComponent { const { examplePath } = this.props this.anchorName = examplePathToHash(examplePath) - const sourceCode = this.getOriginalSourceCode() - - const { error, exampleElement, htmlMarkup } = renderExampleSourceCode(examplePath, sourceCode) - this.setState({ handleMouseLeave: this.handleMouseLeave, handleMouseMove: this.handleMouseMove, showCode: this.isActiveHash(), - error, - htmlMarkup, - exampleElement, - sourceCode, + sourceCode: this.getOriginalSourceCode(), }) } componentWillReceiveProps(nextProps) { + const { examplePath, exampleSources, location } = nextProps + const nextSourceCode = exampleSources[examplePath] + // deactivate examples when switching from one to the next - if ( - this.isActiveHash() && - this.isActiveState() && - this.props.location.hash !== nextProps.location.hash - ) { + if (this.isActiveHash() && this.isActiveState() && this.props.location.hash !== location.hash) { this.clearActiveState() } + + // for local environment + if (process.env.NODE_ENV !== 'production' && this.getOriginalSourceCode() !== nextSourceCode) { + this.setState({ sourceCode: nextSourceCode }) + } } clearActiveState = () => { @@ -110,14 +114,6 @@ class ComponentExample extends PureComponent { scrollToAnchor() } - removeHash = () => { - const { history, location } = this.props - - history.replace(location.pathname) - - this.clearActiveState() - } - handleDirectLinkClick = () => { this.setHashAndScroll() copyToClipboard(window && window.location.href) @@ -187,25 +183,17 @@ class ComponentExample extends PureComponent { } handleChangeCode = _.debounce((sourceCode) => { - const { examplePath } = this.props - const { error, htmlMarkup, exampleElement } = renderExampleSourceCode(examplePath, sourceCode) + this.setState({ sourceCode }) + }, 30) - const newState = { error, sourceCode } + handleRenderError = error => this.setState({ error: error.toString() }) - // preserve the last good render if there is an error - if (!error) { - newState.htmlMarkup = htmlMarkup - newState.exampleElement = exampleElement - } - - this.setState(newState) - }, 30) + handleRenderSuccess = (error, { markup }) => this.setState({ error, htmlMarkup: markup }) render() { - const { children, description, examplePath, suiVersion, title } = this.props + const { children, description, displayName, examplePath, suiVersion, title } = this.props const { error, - exampleElement, handleMouseLeave, handleMouseMove, htmlMarkup, @@ -246,29 +234,31 @@ class ComponentExample extends PureComponent { onMouseMove={handleMouseMove} style={exampleStyle} > - - - - - - + + + + + + + + {children && ( - - {children} - + + {children} + )} - {exampleElement} + {(showCode || showHTML) && ( {showCode && ( - { + if (externals[importPath]) return externals[importPath] + if (commons[displayName] && _.endsWith(importPath, '/common')) return commons[displayName] + + if (_.endsWith(importPath, '/Wireframe')) return Wireframe + if (_.endsWith(importPath, '/SearchExampleCategory')) return SearchExampleCategory + if (_.endsWith(importPath, '/SearchExampleStandard')) return SearchExampleStandard + + throw new Error( + [ + 'An error in resolver(), please check that import is defined, details:', + JSON.stringify({ displayName, importPath }), + ].join('\n'), + ) +} + +const ComponentExampleRenderSource = ({ displayName, onError, onSuccess, sourceCode }) => ( + +) + +ComponentExampleRenderSource.propTypes = { + displayName: PropTypes.string.isRequired, + onError: PropTypes.func.isRequired, + onSuccess: PropTypes.func.isRequired, + sourceCode: PropTypes.string.isRequired, +} + +export default updateForKeys(['sourceCode'])(ComponentExampleRenderSource) diff --git a/docs/src/components/ComponentDoc/ComponentExample/renderExampleSourceCode.js b/docs/src/components/ComponentDoc/ComponentExample/renderExampleSourceCode.js deleted file mode 100644 index a7135f7156..0000000000 --- a/docs/src/components/ComponentDoc/ComponentExample/renderExampleSourceCode.js +++ /dev/null @@ -1,113 +0,0 @@ -import * as Babel from '@babel/standalone' -import _ from 'lodash' -import React, { isValidElement } from 'react' -import { renderToStaticMarkup } from 'react-dom/server' - -const babelConfig = { - presets: [ - [ - 'env', - { - targets: { - browsers: ['last 4 versions', 'not dead'], - }, - }, - ], - 'react', - ['stage-1', { decoratorsLegacy: true }], - ], -} - -/** - * Renders a component example. - * @param examplePath - * @param sourceCode - */ -const renderExampleSourceCode = (examplePath, sourceCode) => { - // Heads Up! - // - // These are used in the code editor scope when rewriting imports to const statements - // We use require() to preserve variable names - // Webpack rewrites import names - /* eslint-disable no-unused-vars */ - const FAKER = require('faker') - const LODASH = require('lodash') - const REACT = require('react') - const SEMANTIC_UI_REACT = require('semantic-ui-react') - let WIREFRAME - let COMMON - /* eslint-enable no-unused-vars */ - - // Should use an AST transform here... oh well :/ - // Rewrite the example file into an IIFE that returns a component - // which can be rendered in this ComponentExample's render() method - - // rewrite imports to const statements against the UPPERCASE module names - const imports = _ - .get(/(^[\s\S])*import[\s\S]*from[\s\S]*['"]\n/.exec(sourceCode), '[0]', '') - .replace(/[\s\n]+/g, ' ') // normalize spaces and make one line - .replace(/ import/g, '\nimport') // one import per line - .split('\n') // split lines - .filter(Boolean) // remove empty lines - .map((l) => { - // rewrite imports to const statements - const [defaultImport, destructuredImports, _module] = _.tail( - /import\s+([\w]+)?(?:\s*,\s*)?({[\s\w,]+})?\s+from\s+['"](?:.*\/)?([\w\-_]+)['"]/.exec(l), - ) - - const module = _.snakeCase(_module).toUpperCase() - - if (module === 'COMMON') { - const componentPath = examplePath - .split('/') - .splice(0, 2) - .join('/') - COMMON = require(`docs/src/examples/${componentPath}/common`) - } else if (module === 'WIREFRAME') { - WIREFRAME = require('docs/src/examples/behaviors/Visibility/Wireframe').default - } - - const constStatements = [] - if (defaultImport) constStatements.push(`const ${defaultImport} = ${module}`) - if (destructuredImports) constStatements.push(`const ${destructuredImports} = ${module}`) - constStatements.push('\n') - - return constStatements.join('\n') - }) - .join('\n') - - // capture the default export so we can return it from the IIFE - const defaultExport = _.get( - /export\s+default\s+(?:class|function)?(?:\s+)?(\w+)/.exec(sourceCode), - '[1]', - ) - - const body = _ - .get(/(export\sdefault\sclass|const|class\s\S*\sextends)[\s\S]*/.exec(sourceCode), '[0]', '') - .replace(/export\s+default\s+(?!class|function)\w+([\s\n]+)?/, '') // remove `export default Foo` statements - .replace(/export\s+default\s+/, '') // remove `export default ...` - - const IIFE = `(function() {\n${imports}${body}return ${defaultExport}\n}())` - - try { - const { code } = Babel.transform(IIFE, babelConfig) - const Example = eval(code) // eslint-disable-line no-eval - const exampleElement = _.isFunction(Example) ? : Example - - if (!isValidElement(exampleElement)) { - return { - error: `Default export is not a valid element. Type:${{}.toString.call(exampleElement)}`, - } - } - - return { - exampleElement, - error: null, - htmlMarkup: renderToStaticMarkup(exampleElement), - } - } catch (err) { - return { error: err.toString() } - } -} - -export default renderExampleSourceCode diff --git a/docs/src/components/Document.js b/docs/src/components/Document.js index 93fcff439c..09ce9e397f 100644 --- a/docs/src/components/Document.js +++ b/docs/src/components/Document.js @@ -10,50 +10,55 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) = - + -