Skip to content
This repository was archived by the owner on May 19, 2025. It is now read-only.

Commit 02f8373

Browse files
onurkerimovonurkerimov
committed
Remove old demo folder content
1 parent 03095ef commit 02f8373

File tree

6 files changed

+193
-0
lines changed

6 files changed

+193
-0
lines changed

‎demo/components/Logo.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import Styled from 'rsg-components/Styled';
4+
import logo from './logo.svg';
5+
6+
const styles = ({ fontFamily, color }) => ({
7+
logo: {
8+
display: 'flex',
9+
alignItems: 'center',
10+
margin: 0,
11+
fontFamily: fontFamily.base,
12+
fontSize: 18,
13+
fontWeight: 'normal',
14+
color: color.baseBackground,
15+
},
16+
image: {
17+
width: '2.5em',
18+
marginLeft: '-0.5em',
19+
},
20+
});
21+
22+
export function LogoRenderer({ classes, children }) {
23+
return (
24+
<h1 className={classes.logo}>
25+
<img className={classes.image} src={logo} />
26+
{children}
27+
</h1>
28+
);
29+
}
30+
31+
LogoRenderer.propTypes = {
32+
classes: PropTypes.object.isRequired,
33+
children: PropTypes.node,
34+
};
35+
36+
export default Styled(styles)(LogoRenderer);

‎demo/components/SectionsRenderer.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import Styled from 'rsg-components/Styled';
4+
import Heading from 'rsg-components/Heading';
5+
// Import default implementation from react-styleguidist using the full path
6+
import DefaultSectionsRenderer from 'react-styleguidist/lib/client/rsg-components/Sections/SectionsRenderer';
7+
8+
const styles = ({ fontFamily, space }) => ({
9+
headingSpacer: {
10+
marginBottom: space[2],
11+
},
12+
descriptionText: {
13+
marginTop: space[0],
14+
fontFamily: fontFamily.base,
15+
},
16+
});
17+
18+
export function SectionsRenderer({ classes, children }) {
19+
return (
20+
<div>
21+
<DefaultSectionsRenderer>{children}</DefaultSectionsRenderer>
22+
</div>
23+
);
24+
}
25+
26+
SectionsRenderer.propTypes = {
27+
classes: PropTypes.object.isRequired,
28+
children: PropTypes.node,
29+
};
30+
31+
export default Styled(styles)(SectionsRenderer);

‎demo/components/StyleGuide.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import Logo from 'rsg-components/Logo';
4+
import Markdown from 'rsg-components/Markdown';
5+
import Styled from 'rsg-components/Styled';
6+
7+
const xsmall = '@media (max-width: 600px)';
8+
9+
const styles = ({ font, base, light, link, baseBackground, mq }) => ({
10+
root: {
11+
color: base,
12+
backgroundColor: baseBackground,
13+
},
14+
header: {
15+
color: '#fff',
16+
backgroundColor: link,
17+
},
18+
bar: {
19+
display: 'flex',
20+
alignItems: 'center',
21+
[xsmall]: {
22+
flexDirection: 'column',
23+
alignItems: 'center',
24+
},
25+
},
26+
nav: {
27+
marginLeft: 'auto',
28+
marginRight: '-0.5em',
29+
[xsmall]: {
30+
margin: [[10, 0, 0]],
31+
},
32+
},
33+
headerLink: {
34+
'&, &:link, &:visited': {
35+
marginLeft: '0.5em',
36+
marginRight: '0.5em',
37+
fontFamily: font,
38+
color: '#efefef',
39+
},
40+
'&:hover, &:active': {
41+
color: '#fff',
42+
cursor: 'pointer',
43+
},
44+
},
45+
content: {
46+
maxWidth: 1000,
47+
padding: [[15, 30]],
48+
margin: [[0, 'auto']],
49+
[mq.small]: {
50+
padding: 15,
51+
},
52+
display: 'block',
53+
},
54+
components: {
55+
overflow: 'auto', // To prevent the pane from growing out of the screen
56+
},
57+
footer: {
58+
display: 'block',
59+
color: light,
60+
fontFamily: font,
61+
fontSize: 12,
62+
},
63+
});
64+
65+
export function StyleGuideRenderer({ classes, title, homepageUrl, children }) {
66+
return (
67+
<div className={classes.root}>
68+
<header className={classes.header}>
69+
<div className={classes.content}>
70+
<div className={classes.bar}>
71+
<Logo>{title}</Logo>
72+
<nav className={classes.nav}>
73+
<a
74+
className={classes.headerLink}
75+
href="https://github.com/styleguidist/react-styleguidist/tree/master/docs">
76+
Docs
77+
</a>
78+
<a
79+
className={classes.headerLink}
80+
href="https://github.com/styleguidist/react-styleguidist">
81+
GitHub
82+
</a>
83+
<a className={classes.headerLink} href="https://gitter.im/styleguidist/styleguidist">
84+
Gitter
85+
</a>
86+
</nav>
87+
</div>
88+
</div>
89+
</header>
90+
<main className={classes.content}>
91+
{children}
92+
<footer className={classes.footer}>
93+
<Markdown text={`Created with [React Styleguidist](${homepageUrl}) ❤️`} />
94+
</footer>
95+
</main>
96+
</div>
97+
);
98+
}
99+
100+
StyleGuideRenderer.propTypes = {
101+
classes: PropTypes.object.isRequired,
102+
title: PropTypes.string.isRequired,
103+
homepageUrl: PropTypes.string.isRequired,
104+
children: PropTypes.node.isRequired,
105+
};
106+
107+
export default Styled(styles)(StyleGuideRenderer);

‎demo/components/logo.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎demo/ss.png‎

201 KB
Loading

‎demo/styles.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
body {
2+
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
3+
}
4+
5+
[data-testid=mountNode] {
6+
display: flex;
7+
}
8+
9+
[data-testid=mountNode] > * {
10+
margin: auto;
11+
box-shadow: 1px 1px 81px rgba(41,60,74,.18);
12+
}

0 commit comments

Comments
 (0)