Skip to content

Commit bb627c3

Browse files
OlehDutchenkoOlehDutchenko
authored
Merge pull request #1 from dutchenkoOleg/master
Add first component
2 parents 3d97d99 + d2fdddf commit bb627c3

File tree

7 files changed

+22780
-0
lines changed

7 files changed

+22780
-0
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/.cache
2+
/.idea
3+
/components
4+
/node_modules

‎package-lock.json

Lines changed: 22430 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"name": "react-microbe-ui",
3+
"version": "0.0.1",
4+
"description": "microbe-ui for React",
5+
"main": "components/index.js",
6+
"module": "components/index.es.js",
7+
"jsnext:main": "components/index.es.js",
8+
"scripts": {
9+
"build": "rollup -c",
10+
"test": "echo \"Error: no test specified\" && exit 1"
11+
},
12+
"files": [
13+
"components"
14+
],
15+
"prettier": {
16+
"arrowParens": "always",
17+
"bracketSpacing": true,
18+
"jsxBracketSameLine": false,
19+
"printWidth": 90,
20+
"semi": true,
21+
"singleQuote": true,
22+
"trailingComma": "none",
23+
"tabWidth": 4,
24+
"useTabs": true
25+
},
26+
"repository": {
27+
"type": "git",
28+
"url": "git+https://github.com/microbe-ui/react-microbe-ui.git"
29+
},
30+
"keywords": [],
31+
"author": "",
32+
"license": "MIT",
33+
"bugs": {
34+
"url": "https://github.com/microbe-ui/react-microbe-ui/issues"
35+
},
36+
"homepage": "https://github.com/microbe-ui/react-microbe-ui#readme",
37+
"devDependencies": {
38+
"@types/react": "^16.9.23",
39+
"@types/react-dom": "^16.9.5",
40+
"@types/react-test-renderer": "^16.9.2",
41+
"prettier": "^1.19.1",
42+
"react": "^16.13.0",
43+
"react-dom": "^16.13.0",
44+
"react-scripts-ts": "^4.0.8",
45+
"react-test-renderer": "^16.13.0",
46+
"rollup": "^2.0.2",
47+
"rollup-plugin-commonjs": "^10.1.0",
48+
"rollup-plugin-node-resolve": "^5.2.0",
49+
"rollup-plugin-peer-deps-external": "^2.2.2",
50+
"rollup-plugin-typescript2": "^0.26.0",
51+
"typescript": "^3.8.3"
52+
},
53+
"peerDependencies": {
54+
"react": "^16.0.0",
55+
"react-dom": "^16.0.0"
56+
}
57+
}

‎rollup.config.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
// -----------------------------------------------------------------------------
2+
// Deps
3+
// -----------------------------------------------------------------------------
4+
5+
import typescript from 'rollup-plugin-typescript2';
6+
import commonjs from 'rollup-plugin-commonjs';
7+
import external from 'rollup-plugin-peer-deps-external';
8+
import resolve from 'rollup-plugin-node-resolve';
9+
10+
import pkg from './package.json';
11+
12+
// -----------------------------------------------------------------------------
13+
// Files
14+
// -----------------------------------------------------------------------------
15+
16+
const files = [
17+
{
18+
input: 'src/ModuleGrid/index.tsx',
19+
output: 'components/ModuleGrid/index.js',
20+
outputES: 'components/ModuleGrid/index.es.js'
21+
},
22+
{
23+
input: 'src/index.tsx',
24+
output: pkg.main,
25+
outputES: pkg.module
26+
}
27+
];
28+
29+
// -----------------------------------------------------------------------------
30+
// Config
31+
// -----------------------------------------------------------------------------
32+
33+
export default files.map((file) => {
34+
return {
35+
input: file.input,
36+
output: [
37+
{
38+
file: file.output,
39+
format: 'cjs',
40+
exports: 'named',
41+
sourcemap: true
42+
},
43+
{
44+
file: file.outputES,
45+
format: 'es',
46+
exports: 'named',
47+
sourcemap: true
48+
}
49+
],
50+
plugins: [
51+
external(),
52+
resolve(),
53+
typescript({
54+
rollupCommonJSResolveHack: true,
55+
exclude: '**/__tests__/**',
56+
clean: true
57+
}),
58+
commonjs({
59+
include: ['node_modules/**'],
60+
namedExports: {
61+
'node_modules/react/react.js': [
62+
'Children',
63+
'Component',
64+
'PropTypes',
65+
'createElement'
66+
],
67+
'node_modules/react-dom/index.js': ['render']
68+
}
69+
})
70+
]
71+
}
72+
});

‎src/ModuleGrid/index.tsx

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
// -----------------------------------------------------------------------------
2+
// Deps
3+
// -----------------------------------------------------------------------------
4+
5+
import * as React from 'react';
6+
7+
// -----------------------------------------------------------------------------
8+
// ModuleGrid Component
9+
// -----------------------------------------------------------------------------
10+
11+
export type ModuleGridCol = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
12+
13+
export interface ModuleGridProps
14+
extends React.HTMLAttributes<
15+
| HTMLDivElement
16+
| HTMLSpanElement
17+
| HTMLUListElement
18+
| HTMLOListElement
19+
| HTMLLIElement
20+
> {
21+
component?:
22+
| 'div'
23+
| 'span'
24+
| 'ul'
25+
| 'ol'
26+
| 'li'
27+
| 'header'
28+
| 'footer'
29+
| 'aside'
30+
| 'section'
31+
| 'main';
32+
cols?: ModuleGridCol;
33+
xxsCols?: ModuleGridCol;
34+
xsCols?: ModuleGridCol;
35+
smCols?: ModuleGridCol;
36+
mdCols?: ModuleGridCol;
37+
dfCols?: ModuleGridCol;
38+
lgCols?: ModuleGridCol;
39+
xlCols?: ModuleGridCol;
40+
xxlCols?: ModuleGridCol;
41+
hdCols?: ModuleGridCol;
42+
}
43+
44+
const colClassName = (col?: ModuleGridCol, mq: string = ''): string | boolean => {
45+
return typeof col === 'number' || col === 'auto'
46+
? `_${mq}module-grid--${col}`
47+
: false;
48+
};
49+
50+
export const ModuleGrid: React.FC<ModuleGridProps> = ({
51+
cols,
52+
xxsCols,
53+
xsCols,
54+
smCols,
55+
mdCols,
56+
dfCols,
57+
lgCols,
58+
xlCols,
59+
xxlCols,
60+
hdCols,
61+
className,
62+
component = 'div',
63+
children,
64+
...htmlProps
65+
}) => {
66+
return React.createElement(
67+
component,
68+
{
69+
...htmlProps,
70+
classNames: [
71+
'_module-grid',
72+
colClassName(cols),
73+
colClassName(xxsCols, 'xxs:'),
74+
colClassName(xsCols, 'xs:'),
75+
colClassName(smCols, 'sm:'),
76+
colClassName(mdCols, 'md:'),
77+
colClassName(dfCols, 'df:'),
78+
colClassName(lgCols, 'lg:'),
79+
colClassName(xlCols, 'xl:'),
80+
colClassName(xxlCols, 'xxl:'),
81+
colClassName(hdCols, 'hd:'),
82+
className
83+
]
84+
.filter(Boolean)
85+
.join(' ')
86+
},
87+
children
88+
);
89+
};
90+
91+
// -----------------------------------------------------------------------------
92+
// ModuleCell Component
93+
// -----------------------------------------------------------------------------
94+
95+
export type ModuleCellSpan = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
96+
97+
export interface ModuleCellProps
98+
extends React.HTMLAttributes<
99+
| HTMLDivElement
100+
| HTMLSpanElement
101+
| HTMLUListElement
102+
| HTMLOListElement
103+
| HTMLLIElement
104+
> {
105+
component?:
106+
| 'div'
107+
| 'span'
108+
| 'ul'
109+
| 'ol'
110+
| 'li'
111+
| 'header'
112+
| 'footer'
113+
| 'aside'
114+
| 'section';
115+
span?: ModuleCellSpan;
116+
xxsSpan?: ModuleCellSpan;
117+
xsSpan?: ModuleCellSpan;
118+
smSpan?: ModuleCellSpan;
119+
mdSpan?: ModuleCellSpan;
120+
dfSpan?: ModuleCellSpan;
121+
lgSpan?: ModuleCellSpan;
122+
xlSpan?: ModuleCellSpan;
123+
xxlSpan?: ModuleCellSpan;
124+
hdSpan?: ModuleCellSpan;
125+
}
126+
127+
const spanClassName = (span?: ModuleCellSpan, mq: string = ''): string | boolean => {
128+
return typeof span === 'number' || span === 'auto'
129+
? `_${mq}module-cell--${span}`
130+
: false;
131+
};
132+
133+
export const ModuleCell: React.FC<ModuleCellProps> = ({
134+
span,
135+
xxsSpan,
136+
xsSpan,
137+
smSpan,
138+
mdSpan,
139+
dfSpan,
140+
lgSpan,
141+
xlSpan,
142+
xxlSpan,
143+
hdSpan,
144+
className,
145+
component = 'div',
146+
children,
147+
...htmlProps
148+
}) => {
149+
return React.createElement(
150+
component,
151+
{
152+
...htmlProps,
153+
classNames: [
154+
'_module-cell',
155+
spanClassName(span),
156+
spanClassName(xxsSpan, 'xxs:'),
157+
spanClassName(xsSpan, 'xs:'),
158+
spanClassName(smSpan, 'sm:'),
159+
spanClassName(mdSpan, 'md:'),
160+
spanClassName(dfSpan, 'df:'),
161+
spanClassName(lgSpan, 'lg:'),
162+
spanClassName(xlSpan, 'xl:'),
163+
spanClassName(xxlSpan, 'xxl:'),
164+
spanClassName(hdSpan, 'hd:'),
165+
className
166+
]
167+
.filter(Boolean)
168+
.join(' ')
169+
},
170+
children
171+
);
172+
};

‎src/index.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// -----------------------------------------------------------------------------
2+
// Deps
3+
// -----------------------------------------------------------------------------
4+
5+
import * as React from 'react';
6+
7+
// -----------------------------------------------------------------------------
8+
// Types
9+
// -----------------------------------------------------------------------------
10+
11+
export type Props = { text: string };
12+
13+
// -----------------------------------------------------------------------------
14+
// Component
15+
// -----------------------------------------------------------------------------
16+
17+
export default class MyComponent extends React.Component<Props> {
18+
render(): React.ReactNode {
19+
const { text, children } = this.props;
20+
return <div title={text}>{children}</div>;
21+
}
22+
}

‎tsconfig.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"compilerOptions": {
3+
"outDir": "components",
4+
"module": "esnext",
5+
"target": "es5",
6+
"lib": ["es6", "dom", "es2016", "es2017"],
7+
"sourceMap": true,
8+
"allowJs": false,
9+
"jsx": "react",
10+
"declaration": true,
11+
"moduleResolution": "node",
12+
"forceConsistentCasingInFileNames": true,
13+
"noImplicitReturns": true,
14+
"noImplicitThis": true,
15+
"noImplicitAny": true,
16+
"strictNullChecks": true,
17+
"suppressImplicitAnyIndexErrors": true,
18+
"noUnusedLocals": true,
19+
"noUnusedParameters": true
20+
},
21+
"include": ["src"],
22+
"exclude": ["node_modules", "build"]
23+
}

0 commit comments

Comments
 (0)