mirror of
https://github.com/SomboChea/ui
synced 2024-12-25 05:34:26 +07:00
Merge branch 'master' into refactor/migrate_autocomplete_to_mui
This commit is contained in:
Priscila Oliveira
commit
d9f463688d
34
package.json
34
package.json
@ -15,26 +15,26 @@
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "8.2.0",
|
||||
"@commitlint/config-conventional": "8.2.0",
|
||||
"@material-ui/core": "4.6.0",
|
||||
"@material-ui/core": "4.6.1",
|
||||
"@material-ui/icons": "4.5.1",
|
||||
"@octokit/rest": "16.34.1",
|
||||
"@testing-library/react": "9.3.0",
|
||||
"@octokit/rest": "16.35.0",
|
||||
"@testing-library/react": "9.3.2",
|
||||
"@types/autosuggest-highlight": "3.1.0",
|
||||
"@types/enzyme": "3.10.3",
|
||||
"@types/jest": "24.0.20",
|
||||
"@types/jest": "24.0.23",
|
||||
"@types/js-base64": "2.3.1",
|
||||
"@types/lodash": "4.14.144",
|
||||
"@types/node": "12.12.6",
|
||||
"@types/lodash": "4.14.146",
|
||||
"@types/node": "12.12.7",
|
||||
"@types/react": "16.9.11",
|
||||
"@types/react-autosuggest": "9.3.13",
|
||||
"@types/react-dom": "16.9.4",
|
||||
"@types/react-router-dom": "5.1.0",
|
||||
"@types/react-router-dom": "5.1.2",
|
||||
"@types/request": "2.48.3",
|
||||
"@types/validator": "10.11.3",
|
||||
"@types/webpack-env": "1.14.1",
|
||||
"@typescript-eslint/parser": "2.5.0",
|
||||
"@typescript-eslint/parser": "2.7.0",
|
||||
"@verdaccio/babel-preset": "8.2.0",
|
||||
"@verdaccio/commons-api": "8.2.0",
|
||||
"@verdaccio/commons-api": "8.3.0",
|
||||
"@verdaccio/eslint-config": "8.2.0",
|
||||
"@verdaccio/types": "8.3.0",
|
||||
"autosuggest-highlight": "3.1.1",
|
||||
@ -45,8 +45,8 @@
|
||||
"concurrently": "5.0.0",
|
||||
"cross-env": "6.0.3",
|
||||
"css-loader": "3.2.0",
|
||||
"date-fns": "2.6.0",
|
||||
"detect-secrets": "1.0.4",
|
||||
"date-fns": "2.7.0",
|
||||
"detect-secrets": "1.0.5",
|
||||
"emotion": "9.2.12",
|
||||
"enzyme": "3.10.0",
|
||||
"enzyme-adapter-react-16": "1.15.1",
|
||||
@ -75,7 +75,7 @@
|
||||
"jest-fetch-mock": "2.1.2",
|
||||
"js-base64": "2.5.1",
|
||||
"js-yaml": "3.13.1",
|
||||
"lint-staged": "8.2.1",
|
||||
"lint-staged": "9.4.2",
|
||||
"localstorage-memory": "1.0.3",
|
||||
"lockfile-lint": "2.2.0",
|
||||
"lodash": "^4.17.15",
|
||||
@ -84,17 +84,17 @@
|
||||
"normalize.css": "8.0.1",
|
||||
"optimize-css-assets-webpack-plugin": "5.0.3",
|
||||
"ora": "4.0.2",
|
||||
"prettier": "1.18.2",
|
||||
"prettier": "1.19.1",
|
||||
"prop-types": "15.7.2",
|
||||
"puppeteer": "2.0.0",
|
||||
"react": "16.11.0",
|
||||
"react-autosuggest": "9.4.3",
|
||||
"react-dom": "16.11.0",
|
||||
"react-emotion": "9.2.12",
|
||||
"react-hot-loader": "4.12.15",
|
||||
"react-hot-loader": "4.12.16",
|
||||
"react-router-dom": "5.1.2",
|
||||
"request": "2.88.0",
|
||||
"resolve-url-loader": "3.1.0",
|
||||
"resolve-url-loader": "3.1.1",
|
||||
"rimraf": "3.0.0",
|
||||
"source-map-loader": "0.2.4",
|
||||
"standard-version": "7.0.0",
|
||||
@ -106,10 +106,10 @@
|
||||
"stylelint-webpack-plugin": "1.0.3",
|
||||
"supertest": "4.0.2",
|
||||
"typeface-roboto": "0.0.75",
|
||||
"typescript": "3.7.1-rc",
|
||||
"typescript": "3.7.2",
|
||||
"uglifyjs-webpack-plugin": "2.2.0",
|
||||
"url-loader": "2.2.0",
|
||||
"validator": "11.1.0",
|
||||
"validator": "12.0.0",
|
||||
"verdaccio": "4.3.4",
|
||||
"verdaccio-auth-memory": "8.3.0",
|
||||
"verdaccio-memory": "8.3.0",
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import React, { Component, ReactElement } from 'react';
|
||||
import isNil from 'lodash/isNil';
|
||||
import 'normalize.css';
|
||||
import 'typeface-roboto/index.css';
|
||||
|
||||
import storage from '../utils/storage';
|
||||
import { makeLogin, isTokenExpire } from '../utils/login';
|
||||
@ -10,8 +8,8 @@ import LoginModal from '../components/Login';
|
||||
import Header from '../components/Header';
|
||||
import { Container, Content } from '../components/Layout';
|
||||
import API from '../utils/api';
|
||||
import '../utils/styles/global';
|
||||
import Footer from '../components/Footer';
|
||||
import StyleBaseline from '../design-tokens/StyleBaseline';
|
||||
|
||||
import AppRoute from './AppRoute';
|
||||
import { AppProps, AppContextProvider } from './AppContext';
|
||||
@ -46,10 +44,13 @@ export default class App extends Component<{}, AppProps> {
|
||||
const context = { isUserLoggedIn, packages, logoUrl, user, scope };
|
||||
|
||||
return (
|
||||
<Container isLoading={isLoading}>
|
||||
{isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
|
||||
{this.renderLoginModal()}
|
||||
</Container>
|
||||
<>
|
||||
<StyleBaseline />
|
||||
<Container isLoading={isLoading}>
|
||||
{isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
|
||||
{this.renderLoginModal()}
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Footer /> component should load the initial state of Footer component 1`] = `"<div class=\\"css-i0nj2g ezbsl480\\"><div class=\\"css-hzfs9b ezbsl481\\"><div class=\\"css-d8nsp7 ezbsl482\\"> Made with<span class=\\"css-1so4oe0 ezbsl487\\">♥</span>on<span class=\\"css-1ie354y ezbsl484\\"><svg class=\\"ezbsl485 css-tsfgle ek145dl0\\"><title>Earth</title><use xlink:href=\\"[object Object]#earth\\"></use></svg><span class=\\"css-8631ip ezbsl486\\"><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>Spain</title><use xlink:href=\\"[object Object]#spain\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>Nicaragua</title><use xlink:href=\\"[object Object]#nicaragua\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>India</title><use xlink:href=\\"[object Object]#india\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>Brazil</title><use xlink:href=\\"[object Object]#brazil\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>China</title><use xlink:href=\\"[object Object]#china\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg></span></span></div><div class=\\"css-1wbzdyy ezbsl483\\">Powered by<span class=\\"ezbsl488 css-i15wza ek145dl1\\" name=\\"verdaccio\\" title=\\"Verdaccio\\"><img alt=\\"Verdaccio\\" src=\\"[object Object]\\" class=\\"css-1ncdhax ek145dl2\\"></span>/ v.1.0.0</div></div></div>"`;
|
||||
exports[`<Footer /> component should load the initial state of Footer component 1`] = `"<div class=\\"css-i0nj2g ezbsl480\\"><div class=\\"css-hzfs9b ezbsl481\\"><div class=\\"css-d8nsp7 ezbsl482\\"> Made with<span class=\\"css-1so4oe0 ezbsl487\\">♥</span>on<span class=\\"css-1ie354y ezbsl484\\"><svg class=\\"ezbsl485 css-151fgib ek145dl0\\"><title>Earth</title><use xlink:href=\\"[object Object]#earth\\"></use></svg><span class=\\"css-8631ip ezbsl486\\"><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>Spain</title><use xlink:href=\\"[object Object]#spain\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>Nicaragua</title><use xlink:href=\\"[object Object]#nicaragua\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>India</title><use xlink:href=\\"[object Object]#india\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>Brazil</title><use xlink:href=\\"[object Object]#brazil\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>China</title><use xlink:href=\\"[object Object]#china\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg></span></span></div><div class=\\"css-1wbzdyy ezbsl483\\">Powered by<span class=\\"ezbsl488 css-ommwhu ek145dl1\\" name=\\"verdaccio\\" title=\\"Verdaccio\\"><img alt=\\"Verdaccio\\" src=\\"[object Object]\\" class=\\"css-1ncdhax ek145dl2\\"></span>/ v.1.0.0</div></div></div>"`;
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Icon /> component should render the component in default state 1`] = `"<svg class=\\"css-snirlv ek145dl0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg>"`;
|
||||
exports[`<Icon /> component should render the component in default state 1`] = `"<svg class=\\"css-j2zgvv ek145dl0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg>"`;
|
||||
|
||||
@ -28,9 +28,8 @@ const commonStyle = ({ size = 'sm' as Breakpoint, pointer, modifiers = null }):
|
||||
`;
|
||||
|
||||
export const Svg = styled('svg')`
|
||||
&& {
|
||||
${commonStyle};
|
||||
}
|
||||
${commonStyle};
|
||||
box-sizing: initial;
|
||||
`;
|
||||
|
||||
export const ImgWrapper: StyledOtherComponent<
|
||||
@ -43,9 +42,8 @@ export const ImgWrapper: StyledOtherComponent<
|
||||
DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
|
||||
{}
|
||||
> = styled('span')`
|
||||
&& {
|
||||
${commonStyle};
|
||||
}
|
||||
${commonStyle};
|
||||
box-sizing: initial;
|
||||
`;
|
||||
|
||||
export const Img = styled('img')({
|
||||
|
||||
38
src/design-tokens/ResetStyles.tsx
Normal file
38
src/design-tokens/ResetStyles.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import React from 'react';
|
||||
|
||||
import { fontWeight } from '../utils/styles/sizes';
|
||||
import { breakpoints } from '../utils/styles/media';
|
||||
|
||||
const resetStyles = makeStyles(() => ({
|
||||
'@global': {
|
||||
// eslint-disable-next-line max-len
|
||||
'html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video': {
|
||||
fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
|
||||
},
|
||||
strong: {
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'html, body, #root': {
|
||||
height: '100%',
|
||||
},
|
||||
'.container': {
|
||||
padding: 15,
|
||||
flex: 1,
|
||||
|
||||
[`@media screen and (min-width: ${breakpoints.container}px)`]: {
|
||||
maxWidth: breakpoints.container,
|
||||
width: '100%',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const ResetStyles: React.FC = ({ children }) => {
|
||||
resetStyles();
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default ResetStyles;
|
||||
15
src/design-tokens/StyleBaseline.tsx
Normal file
15
src/design-tokens/StyleBaseline.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import CssBaseline from '@material-ui/core/CssBaseline';
|
||||
import React from 'react';
|
||||
import 'normalize.css';
|
||||
import 'typeface-roboto/index.css';
|
||||
|
||||
import ResetCSS from './ResetStyles';
|
||||
|
||||
const StyleBaseline: React.FC = () => (
|
||||
<>
|
||||
<CssBaseline />
|
||||
<ResetCSS />
|
||||
</>
|
||||
);
|
||||
|
||||
export default StyleBaseline;
|
||||
@ -1,80 +0,0 @@
|
||||
import { injectGlobal } from 'emotion';
|
||||
|
||||
import { fontSize, fontWeight } from './sizes';
|
||||
import colors from './colors';
|
||||
import { breakpoints } from './media';
|
||||
|
||||
const fontFamily = `-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
|
||||
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
|
||||
|
||||
export default injectGlobal`
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: ${fontFamily};
|
||||
font-size: ${fontSize.base};
|
||||
color: ${colors.eclipse};
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: ${fontWeight.semiBold};
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
flex: 1;
|
||||
|
||||
@media screen and (min-width: ${breakpoints.container}px) {
|
||||
max-width: ${breakpoints.container}px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
};
|
||||
|
||||
.el-loading-spinner {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page-full-height {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
&:hover, &:focus {
|
||||
color: ${colors.primary};
|
||||
border-color: ${colors.primary};
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
&:hover, &:focus {
|
||||
border-color: ${colors.primary};
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn:hover .el-dialog__close {
|
||||
color: ${colors.eclipse};
|
||||
}
|
||||
|
||||
.package-list-items {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
`;
|
||||
@ -67,7 +67,8 @@ module.exports = {
|
||||
test: /\.(woff|woff2|eot|ttf|otf)$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
name: '/fonts/[name].[ext]',
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'fonts',
|
||||
limit: 50,
|
||||
},
|
||||
},
|
||||
|
||||
8
types/custom.d.ts
vendored
8
types/custom.d.ts
vendored
@ -1,11 +1,3 @@
|
||||
// https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript
|
||||
declare module '*.svg' {
|
||||
const content: string;
|
||||
export default content;
|
||||
}
|
||||
|
||||
declare module '*.png';
|
||||
|
||||
declare module 'localstorage-memory' {
|
||||
const memoryStorage: Storage;
|
||||
export default memoryStorage;
|
||||
|
||||
9
types/files.d.ts
vendored
Normal file
9
types/files.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
declare module '*.svg' {
|
||||
const content: string;
|
||||
export default content;
|
||||
}
|
||||
|
||||
declare module '*.png' {
|
||||
const value: string;
|
||||
export = value;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user