Skip to content

Commit bd93769

Browse files
WezomDevWezomDev
committed
0.2.0-alpha
1 parent 681a2f8 commit bd93769

File tree

10 files changed

+670
-43
lines changed

10 files changed

+670
-43
lines changed

‎package-lock.json

Lines changed: 552 additions & 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 & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
{
22
"name": "react-microbe-ui",
3-
"version": "0.1.0-alpha",
3+
"version": "0.2.0-alpha",
44
"description": "microbe-ui for React",
55
"scripts": {
6+
"prebuild": "del-cli ./components",
67
"build": "rollup -c",
8+
"postbuild": "del-cli ./components/blank.d.ts ./components/blank.js",
79
"prepare": "npm run build",
810
"test": "npm run prettier",
911
"fix": "npm run prettier -- --write",
@@ -38,6 +40,7 @@
3840
"@types/react": "^16.9.23",
3941
"@types/react-dom": "^16.9.5",
4042
"@types/react-test-renderer": "^16.9.2",
43+
"del-cli": "^3.0.0",
4144
"prettier": "^1.19.1",
4245
"react": "^16.13.0",
4346
"react-dom": "^16.13.0",

‎rollup.config.js

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,16 @@ const files = [
1616
input: 'src/ModuleGrid/index.tsx',
1717
output: 'components/ModuleGrid/index.js',
1818
outputES: 'components/ModuleGrid/index.es.js'
19+
},
20+
{
21+
input: 'src/Spacer/index.tsx',
22+
output: 'components/Spacer/index.js',
23+
outputES: 'components/Spacer/index.es.js'
24+
},
25+
{
26+
input: 'src/blank.ts',
27+
output: 'components/blank.js',
28+
outputES: 'components/blank.js'
1929
}
2030
];
2131

@@ -30,13 +40,13 @@ export default files.map((file) => ({
3040
file: file.output,
3141
format: 'cjs',
3242
exports: 'named',
33-
sourcemap: true
43+
sourcemap: file.input !== 'src/blank.ts'
3444
},
3545
{
3646
file: file.outputES,
3747
format: 'es',
3848
exports: 'named',
39-
sourcemap: true
49+
sourcemap: file.input !== 'src/blank.ts'
4050
}
4151
],
4252
plugins: [
@@ -45,7 +55,12 @@ export default files.map((file) => ({
4555
typescript({
4656
rollupCommonJSResolveHack: true,
4757
exclude: '**/__tests__/**',
48-
clean: true
58+
clean: true,
59+
tsconfigOverride: {
60+
compilerOptions: {
61+
declaration: file.input === 'src/blank.ts'
62+
}
63+
}
4964
}),
5065
commonjs({
5166
include: ['node_modules/**'],

‎src/ModuleGrid/index.tsx

Lines changed: 6 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,17 @@
33
// -----------------------------------------------------------------------------
44

55
import * as React from 'react';
6+
import { TRootAttributes, TRootComponent } from '../models/TRootElement';
7+
import { TInnerAttributes, TInnerComponent } from '../models/TInnerElement';
68

79
// -----------------------------------------------------------------------------
810
// ModuleGrid Component
911
// -----------------------------------------------------------------------------
1012

1113
export type TModuleGridCol = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
1214

13-
export interface IModuleGridProps
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';
15+
export interface IModuleGridProps extends React.HTMLAttributes<TRootAttributes> {
16+
component?: TRootComponent;
3217
cols?: TModuleGridCol;
3318
xxsCols?: TModuleGridCol;
3419
xsCols?: TModuleGridCol;
@@ -94,24 +79,8 @@ export const ModuleGrid: React.FC<IModuleGridProps> = ({
9479

9580
export type TModuleCellSpan = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
9681

97-
export interface IModuleCellProps
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';
82+
export interface IModuleCellProps extends React.HTMLAttributes<TInnerAttributes> {
83+
component?: TInnerComponent;
11584
span?: TModuleCellSpan;
11685
xxsSpan?: TModuleCellSpan;
11786
xsSpan?: TModuleCellSpan;

‎src/Spacer/index.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// -----------------------------------------------------------------------------
2+
// Deps
3+
// -----------------------------------------------------------------------------
4+
5+
import * as React from 'react';
6+
import { TSize } from '../models/TSpace';
7+
import { TRootAttributes, TRootComponent } from '../models/TRootElement';
8+
9+
// -----------------------------------------------------------------------------
10+
// Spacer Component
11+
// -----------------------------------------------------------------------------
12+
13+
export interface ISpacerProps extends React.HTMLAttributes<TRootAttributes> {
14+
size?: TSize;
15+
component?: TRootComponent;
16+
xxsSize?: TSize;
17+
xsSize?: TSize;
18+
smSize?: TSize;
19+
mdSize?: TSize;
20+
dfSize?: TSize;
21+
lgSize?: TSize;
22+
xlSize?: TSize;
23+
xxlSize?: TSize;
24+
hdSize?: TSize;
25+
}
26+
27+
const sizeClassName = (size?: TSize, mq: string = ''): string | boolean => {
28+
return typeof size === 'string' ? `_${mq}spacer--${size}` : false;
29+
};
30+
31+
export const Spacer: React.FC<ISpacerProps> = ({
32+
size,
33+
xxsSize,
34+
xsSize,
35+
smSize,
36+
mdSize,
37+
dfSize,
38+
lgSize,
39+
xlSize,
40+
xxlSize,
41+
hdSize,
42+
className,
43+
component = 'div',
44+
children
45+
}) => {
46+
return React.createElement(
47+
component,
48+
{
49+
// ...htmlProps,
50+
classNames: [
51+
'_spacer',
52+
sizeClassName(size),
53+
sizeClassName(xxsSize, 'xxs:'),
54+
sizeClassName(xsSize, 'xs:'),
55+
sizeClassName(smSize, 'sm:'),
56+
sizeClassName(mdSize, 'md:'),
57+
sizeClassName(dfSize, 'df:'),
58+
sizeClassName(lgSize, 'lg:'),
59+
sizeClassName(xlSize, 'xl:'),
60+
sizeClassName(xxlSize, 'xxl:'),
61+
sizeClassName(hdSize, 'hd:'),
62+
className
63+
]
64+
.filter(Boolean)
65+
.join(' ')
66+
},
67+
children
68+
);
69+
};

‎src/blank.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// blank

‎src/models/TInnerElement.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export type TInnerAttributes = HTMLDivElement | HTMLSpanElement | HTMLLIElement;
2+
3+
export type TInnerComponent = 'div' | 'span' | 'li' | 'article';

‎src/models/TRootElement.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export type TRootAttributes =
2+
| HTMLDivElement
3+
| HTMLSpanElement
4+
| HTMLUListElement
5+
| HTMLOListElement;
6+
7+
export type TRootComponent =
8+
| 'div'
9+
| 'span'
10+
| 'ul'
11+
| 'ol'
12+
| 'header'
13+
| 'footer'
14+
| 'aside'
15+
| 'section';

‎src/models/TSpace.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export type TSize = 'xxs' | 'xs' | 'sm' | 'md' | 'df' | 'lg' | 'xl' | 'xxl' | 'hg';

‎tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"sourceMap": true,
88
"allowJs": false,
99
"jsx": "react",
10-
"declaration": true,
10+
"declaration": false,
1111
"moduleResolution": "node",
1212
"forceConsistentCasingInFileNames": true,
1313
"noImplicitReturns": true,

0 commit comments

Comments
 (0)