Skip to content

Commit 707a51d

Browse files
MykolaGolubyevMykolaGolubyev
committed
ComponentsViewer -> ComponentViewer
1 parent 5038bb8 commit 707a51d

11 files changed

Lines changed: 47 additions & 47 deletions

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
npm install react-component-viewer --save-dev
55
```
66

7-
# React Components Viewer
7+
# React Component Viewer
88

99
Is a React component to preview and develop your components.
1010
Use it in your CRA created app as a demo app.
1111

1212
```typescript
1313
import * as React from 'react';
1414

15-
import { Registry, ComponentsViewer } from 'react-components-viewer';
15+
import { Registry, ComponentViewer } from 'react-component-viewer';
1616

1717
import { buttonsDemo } from './demos/buttons';
1818
import { linksDemo } from './demos/links';
@@ -34,7 +34,7 @@ layouts
3434

3535
export function App() {
3636
return (
37-
<ComponentsViewer registries={[widgets, layouts]}/>
37+
<ComponentViewer registries={[widgets, layouts]}/>
3838
);
3939
}
4040
```

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
{
22
"name": "react-component-viewer",
33
"version": "0.11.0",
4-
"description": "components viewer for UI library development",
4+
"description": "React Component to help with development of other React components",
55
"repository": {
66
"type": "git",
7-
"url": "git+https://github.com/MykolaGolubyev/react-components-viewer.git"
7+
"url": "git+https://github.com/MykolaGolubyev/react-component-viewer.git"
88
},
99
"author": "mykolagolubyev",
1010
"license": "Apache-2.0",
1111
"bugs": {
12-
"url": "https://github.com/MykolaGolubyev/react-components-viewer/issues"
12+
"url": "https://github.com/MykolaGolubyev/react-component-viewer/issues"
1313
},
14-
"homepage": "https://github.com/MykolaGolubyev/react-components-viewer#readme",
14+
"homepage": "https://github.com/MykolaGolubyev/react-component-viewer#readme",
1515
"private": false,
1616
"main": "build/lib/components/index.js",
1717
"types": "build/lib/components/index.d.ts",

‎src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22

33
import { Registry } from './components';
4-
import { ComponentsViewer } from './components';
4+
import { ComponentViewer } from './components';
55
import { buttonsDemo } from './demos/buttons';
66
import { linksDemo } from './demos/links';
77
import { profileScreenDemo } from './demos/profileScreen';
@@ -27,7 +27,7 @@ layouts
2727
export class App extends React.Component {
2828
render() {
2929
return (
30-
<ComponentsViewer
30+
<ComponentViewer
3131
registries={[widgets, layouts]}
3232
dropDown={{
3333
label: 'Brand',

‎src/components/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Registry } from './registry/Registry';
22
import { Registries } from './registry/Registries';
33
import { ComponentDemo } from './viewer/ComponentDemo';
4-
import { ComponentsViewer } from './viewer/ComponentsViewer';
4+
import { ComponentViewer } from './viewer/ComponentViewer';
55
import { GridLayout } from './layouts/GridLayout';
66
import { TabsLayout } from './layouts/TabsLayout';
77
import { LayoutProps } from './layouts/LayoutProps';
@@ -12,7 +12,7 @@ export {
1212
Registry,
1313
Registries,
1414
ComponentDemo,
15-
ComponentsViewer,
15+
ComponentViewer,
1616
LayoutProps,
1717
GridLayout,
1818
TabsLayout,

‎src/components/registry/Registry.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,34 +18,34 @@ class Registry {
1818
this.name = name;
1919
}
2020

21-
registerAsGrid(name: string, minWidth: number, componentsRegistrator: (registry: Registry) => void) {
22-
return this.register(name, GridLayout, componentsRegistrator, '', {minWidth});
21+
registerAsGrid(name: string, minWidth: number, componentRegistrator: (registry: Registry) => void) {
22+
return this.register(name, GridLayout, componentRegistrator, '', {minWidth});
2323
}
2424

25-
registerAsRows(name: string, componentsRegistrator: (registry: Registry) => void) {
26-
return this.register(name, GridLayout, componentsRegistrator, '', {minWidth: 0});
25+
registerAsRows(name: string, componentRegistrator: (registry: Registry) => void) {
26+
return this.register(name, GridLayout, componentRegistrator, '', {minWidth: 0});
2727
}
2828

29-
registerAsTabs(name: string, componentsRegistrator: (registry: Registry) => void) {
30-
return this.register(name, TabsLayout, componentsRegistrator);
29+
registerAsTabs(name: string, componentRegistrator: (registry: Registry) => void) {
30+
return this.register(name, TabsLayout, componentRegistrator);
3131
}
3232

33-
registerAsTwoColumnTable(name: string, componentsRegistrator: (registry: Registry) => void) {
34-
return this.register(name, LabelInstanceTableLayout, componentsRegistrator);
33+
registerAsTwoColumnTable(name: string, componentRegistrator: (registry: Registry) => void) {
34+
return this.register(name, LabelInstanceTableLayout, componentRegistrator);
3535
}
3636

37-
registerSingle(name: string, componentsRegistrator: (registry: Registry) => void) {
38-
this.register(name, SingleItemLayout, componentsRegistrator);
37+
registerSingle(name: string, componentRegistrator: (registry: Registry) => void) {
38+
this.register(name, SingleItemLayout, componentRegistrator);
3939
return this;
4040
}
4141

42-
registerAsMiniApp(name: string, urlPrefix: string, componentsRegistrator: (registry: Registry) => void) {
43-
this.register(name, SingleItemLayout, componentsRegistrator, urlPrefix);
42+
registerAsMiniApp(name: string, urlPrefix: string, componentRegistrator: (registry: Registry) => void) {
43+
this.register(name, SingleItemLayout, componentRegistrator, urlPrefix);
4444
}
4545

4646
register(name: string,
4747
layoutComponent: React.ComponentType<LayoutProps>,
48-
componentsRegistrator: (registry: Registry) => void,
48+
componentRegistrator: (registry: Registry) => void,
4949
urlPrefix: string = '',
5050
layoutOpts: object = {}) {
5151

@@ -58,7 +58,7 @@ class Registry {
5858

5959
this._usedNames.push(name);
6060

61-
componentsRegistrator(this);
61+
componentRegistrator(this);
6262

6363
return this;
6464
}

src/components/viewer/ComponentsViewer.css renamed to src/components/viewer/ComponentViewer.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ body {
1616
margin: 0;
1717
}
1818

19-
.rcv-components-viewer {
19+
.rcv-component-viewer {
2020
display: grid;
2121

2222
grid-template-columns: 280px 1fr auto;

src/components/viewer/ComponentsViewer.tsx renamed to src/components/viewer/ComponentViewer.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import { RegistrySelection } from './RegistrySelection';
1010
import { TableOfContents } from './toc/TableOfContents';
1111

1212
import { Toolbar } from './toolbar/Toolbar';
13-
import { ComponentsViewerState } from './ComponentsViewerState';
14-
import { ComponentsViewerStateCreator } from './ComponentsViewerStateCreator';
13+
import { ComponentViewerState } from './ComponentViewerState';
14+
import { ComponentViewerStateCreator } from './ComponentViewerStateCreator';
1515

1616
import { DemoEntry } from '../registry/DemoEntry';
1717

@@ -21,16 +21,16 @@ import { HotKeyBoundActions } from '../hotkeys/HotKeyBoundActions';
2121

2222
import { ComponentViewerDropDown } from './ComponentViewerDropDown';
2323

24-
import './ComponentsViewer.css';
24+
import './ComponentViewer.css';
2525

2626
export interface Props {
2727
registries: Registry[];
2828
dropDown?: ComponentViewerDropDown;
2929
}
3030

31-
class ComponentsViewer extends Component<Props, ComponentsViewerState> {
31+
class ComponentViewer extends Component<Props, ComponentViewerState> {
3232
private registries: Registries;
33-
private stateCreator: ComponentsViewerStateCreator;
33+
private stateCreator: ComponentViewerStateCreator;
3434

3535
private hotKeyBoundActions: HotKeyBoundActions;
3636

@@ -40,7 +40,7 @@ class ComponentsViewer extends Component<Props, ComponentsViewerState> {
4040
const {registries} = this.props;
4141

4242
this.registries = new Registries(registries);
43-
this.stateCreator = new ComponentsViewerStateCreator(this.registries);
43+
this.stateCreator = new ComponentViewerStateCreator(this.registries);
4444

4545
this.state = this.stateFromUrl();
4646
this.hotKeyBoundActions = {'Alt F': this.onFullScreenToggle};
@@ -78,7 +78,7 @@ class ComponentsViewer extends Component<Props, ComponentsViewerState> {
7878
} = this.state;
7979

8080
return (
81-
<div className="rcv-components-viewer">
81+
<div className="rcv-component-viewer">
8282
<div className="rcv-registry-selection-panel">
8383
<RegistrySelection
8484
names={this.registries.names}
@@ -263,4 +263,4 @@ class ComponentsViewer extends Component<Props, ComponentsViewerState> {
263263
}
264264
}
265265

266-
export { ComponentsViewer };
266+
export { ComponentViewer };

src/components/viewer/ComponentsViewerState.ts renamed to src/components/viewer/ComponentViewerState.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export interface ComponentsViewerState {
1+
export interface ComponentViewerState {
22
registryName: string;
33
demoName: string;
44
entryTitle: string;

src/components/viewer/ComponentsViewerStateCreator.test.tsx renamed to src/components/viewer/ComponentViewerStateCreator.test.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import * as React from 'react';
22

33
import { Registries, Registry } from '../';
4-
import { ComponentsViewerStateCreator } from './ComponentsViewerStateCreator';
4+
import { ComponentViewerStateCreator } from './ComponentViewerStateCreator';
55

6-
describe('ComponentsViewerStateCreator', () => {
6+
describe('ComponentViewerStateCreator', () => {
77
let registryA: Registry;
88
let registryB: Registry ;
99

@@ -20,7 +20,7 @@ describe('ComponentsViewerStateCreator', () => {
2020
});
2121

2222
it('should pick the first registry, first demo and demo entry if url has no query params', () => {
23-
const stateCreator = new ComponentsViewerStateCreator(registries);
23+
const stateCreator = new ComponentViewerStateCreator(registries);
2424
const state = stateCreator.stateFromUrl('/path');
2525

2626
expect(state).toEqual({
@@ -34,14 +34,14 @@ describe('ComponentsViewerStateCreator', () => {
3434
});
3535

3636
it('should take fullscreen state from url', () => {
37-
const stateCreator = new ComponentsViewerStateCreator(registries);
37+
const stateCreator = new ComponentViewerStateCreator(registries);
3838
const state = stateCreator.stateFromUrl('fullScreen=true');
3939

4040
expect(state.isFullScreen).toEqual(true);
4141
});
4242

4343
it('should build url search params based on state', () => {
44-
const stateCreator = new ComponentsViewerStateCreator(registries);
44+
const stateCreator = new ComponentViewerStateCreator(registries);
4545
const url = stateCreator.buildUrlSearchParams({
4646
registryName: 'core',
4747
demoName: 'demo-name',

0 commit comments

Comments
 (0)