1
0
mirror of https://github.com/SomboChea/ui synced 2024-11-05 06:04:28 +07:00

Refactor: move styles utils to theme (#363)

This commit is contained in:
Priscila Oliveira 2019-12-12 12:10:27 -03:00 committed by GitHub
parent 172e470780
commit fd99be6818
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 130 additions and 216 deletions

View File

@ -11,20 +11,20 @@ import Footer from '../components/Footer';
import Box from '../muiComponents/Box';
import Loading from '../components/Loading';
import StyleBaseline from '../design-tokens/StyleBaseline';
import { breakpoints } from '../utils/styles/media';
import { Theme } from '../design-tokens/theme';
import AppContextProvider from './AppContextProvider';
import AppRoute, { history } from './AppRoute';
const StyledBoxContent = styled(Box)({
const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
padding: 15,
[`@media screen and (min-width: ${breakpoints.container}px)`]: {
maxWidth: breakpoints.container,
[`@media screen and (min-width: ${theme && theme.breakPoints.container}px)`]: {
maxWidth: theme && theme.breakPoints.container,
width: '100%',
marginLeft: 'auto',
marginRight: 'auto',
},
});
}));
/* eslint-disable react/jsx-no-bind */
/* eslint-disable react-hooks/exhaustive-deps */

View File

@ -1,14 +1,14 @@
import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem';
import Text from '../../muiComponents/Text';
import ListItemText from '../../muiComponents/ListItemText';
import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
});
}));
export const AuthorListItem = styled(ListItem)({
padding: 0,

View File

@ -4,13 +4,13 @@ import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } fro
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import { fontWeight } from '../../utils/styles/sizes';
import MenuItem from '../../muiComponents/MenuItem';
import { Theme } from '../../design-tokens/theme';
import { Wrapper, InputField, SuggestionContainer } from './styles';
const StyledAnchor = styled('a')<{ fw: number }>(props => ({
fontWeight: props.fw,
const StyledAnchor = styled('a')<{ highlight: boolean; theme?: Theme }>(props => ({
fontWeight: props.theme && props.highlight ? props.theme.fontWeight.semiBold : props.theme.fontWeight.light,
}));
const StyledMenuItem = styled(MenuItem)({
@ -64,9 +64,8 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): JSX.Element =>
<StyledMenuItem component="div" selected={isHighlighted}>
<div>
{parts.map((part, index) => {
const fw = part.highlight ? fontWeight.semiBold : fontWeight.light;
return (
<StyledAnchor fw={fw} key={String(index)}>
<StyledAnchor highlight={part.highlight} key={String(index)}>
{part.text}
</StyledAnchor>
);

View File

@ -1,18 +1,18 @@
import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text';
import Card from '../../muiComponents/Card';
import Chip from '../../muiComponents/Chip';
import { Theme } from '../../design-tokens/theme';
export const CardWrap = styled(Card)({
margin: '0 0 16px',
});
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
});
}));
export const Tags = styled('div')({
display: 'flex',

View File

@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text';
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
import { Theme } from '../../design-tokens/theme';
@ -20,11 +19,11 @@ export const Content = styled('div')({
},
});
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
marginBottom: '10px',
textTransform: 'capitalize',
});
}));
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
backgroundColor: props.theme && props.theme.palette.primary.main,

View File

@ -1,16 +1,15 @@
import styled from '@emotion/styled';
import { Theme } from '../../design-tokens/theme';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem';
import Text from '../../muiComponents/Text';
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
import Chip from '../../muiComponents/Chip';
import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
});
}));
export const DistListItem = styled(ListItem)({
paddingLeft: 0,

View File

@ -1,13 +1,13 @@
import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem';
import Text from '../../muiComponents/Text';
import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
});
}));
export const EngineListItem = styled(ListItem)({
paddingLeft: 0,

View File

@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { breakpoints } from '../../utils/styles/media';
import Icon from '../Icon/Icon';
import { Theme } from '../../design-tokens/theme';
@ -12,29 +11,29 @@ export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
padding: '20px',
}));
export const Inner = styled('div')({
export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
width: '100%',
[`@media (min-width: ${breakpoints.medium}px)`]: {
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
minWidth: 400,
maxWidth: 800,
margin: 'auto',
justifyContent: 'space-between',
},
[`@media (min-width: ${breakpoints.large}px)`]: {
[`@media (min-width: ${theme && theme.breakPoints.large}px)`]: {
maxWidth: 1240,
},
});
}));
export const Left = styled('div')({
export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
alignItems: 'center',
display: 'none',
[`@media (min-width: ${breakpoints.medium}px)`]: {
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
display: 'flex',
},
});
}));
export const Right = styled(Left)({
display: 'flex',

View File

@ -2,7 +2,6 @@ import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { Theme } from '../../design-tokens/theme';
import { breakpoints } from '../../utils/styles/media';
import IconButton from '../../muiComponents/IconButton';
import AppBar from '../../muiComponents/AppBar';
import Toolbar from '../../muiComponents/Toolbar';
@ -54,12 +53,12 @@ export const SearchWrapper = styled('div')({
width: '100%',
});
export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
backgroundColor: props.theme && props.theme.palette.primary.main,
export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
backgroundColor: theme && theme.palette.primary.main,
minHeight: 60,
display: 'flex',
justifyContent: 'center',
[`@media (min-width: ${breakpoints.medium}px)`]: css`
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: css`
${SearchWrapper} {
display: flex;
}
@ -70,12 +69,12 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
display: none;
}
`,
[`@media (min-width: ${breakpoints.large}px)`]: css`
[`@media (min-width: ${theme && theme.breakPoints.large}px)`]: css`
${InnerNavBar} {
padding: 0 20px;
}
`,
[`@media (min-width: ${breakpoints.xlarge}px)`]: css`
[`@media (min-width: ${theme && theme.breakPoints.xlarge}px)`]: css`
${InnerNavBar} {
max-width: 1240px;
width: 100%;

View File

@ -2,16 +2,16 @@ import React, { useContext } from 'react';
import styled from '@emotion/styled';
import { DetailContext } from '../../pages/Version';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text';
import List from '../../muiComponents/List';
import { Theme } from '../../design-tokens/theme';
import InstallListItem, { DependencyManager } from './InstallListItem';
const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
});
}));
const Install: React.FC = () => {
const detailContext = useContext(DetailContext);

View File

@ -1,7 +1,7 @@
import React from 'react';
import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import { Theme } from '../../design-tokens/theme';
interface Props {
text: string;
@ -14,8 +14,8 @@ interface WrapperProps {
weight: string;
}
const Wrapper = styled('div')<WrapperProps>(props => ({
fontWeight: fontWeight[props.weight],
const Wrapper = styled('div')<WrapperProps & { theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight[props.weight],
textTransform: props.capitalize ? 'capitalize' : 'none',
}));

View File

@ -5,7 +5,6 @@ import { useHistory } from 'react-router-dom';
import Box from '../../muiComponents/Box';
import Button from '../../muiComponents/Button';
import Heading from '../../muiComponents/Heading';
import { spacings } from '../../utils/styles/spacings';
import { Theme } from '../../design-tokens/theme';
import PackageImg from './img/package.svg';
@ -21,7 +20,7 @@ const EmptyPackage = styled('img')({
const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
color: props.theme && props.theme.palette.primary.main,
marginBottom: spacings.sm,
marginBottom: 16,
}));
const NotFound: React.FC = () => {

View File

@ -1,10 +1,8 @@
import styled from '@emotion/styled';
import { Link } from 'react-router-dom';
import { breakpoints } from '../../utils/styles/media';
import Ico from '../Icon';
import Label from '../Label';
import { fontWeight } from '../../utils/styles/sizes';
import { default as MuiIconButton } from '../../muiComponents/IconButton';
import { default as Photo } from '../../muiComponents/Avatar';
import List from '../../muiComponents/List';
@ -13,18 +11,18 @@ import Grid from '../../muiComponents/Grid';
import ListItemText from '../../muiComponents/ListItemText';
import { Theme } from '../../design-tokens/theme';
export const OverviewItem = styled('span')<{ theme?: Theme }>(props => ({
export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
display: 'flex',
alignItems: 'center',
margin: '0 0 0 16px',
color: props.theme && props.theme.palette.greyLight2,
color: theme && theme.palette.greyLight2,
fontSize: 12,
[`@media (max-width: ${breakpoints.medium}px)`]: {
[`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
':nth-of-type(3)': {
display: 'none',
},
},
[`@media (max-width: ${breakpoints.small}px)`]: {
[`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
':nth-of-type(4)': {
display: 'none',
},
@ -43,7 +41,7 @@ export const Published = styled('span')<{ theme?: Theme }>(props => ({
export const Text = styled(Label)<{ theme?: Theme }>(props => ({
fontSize: '12px',
fontWeight: fontWeight.semiBold,
fontWeight: props.theme && props.theme.fontWeight.semiBold,
color: props.theme && props.theme.palette.greyLight2,
}));
@ -68,17 +66,17 @@ export const WrapperLink = styled(Link)({
textDecoration: 'none',
});
export const PackageTitle = styled('span')<{ theme?: Theme }>(props => ({
fontWeight: 600,
export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
fontWeight: theme && theme.fontWeight.bold,
fontSize: 20,
display: 'block',
marginBottom: 12,
color: props.theme && props.theme.palette.eclipse,
color: theme && theme.palette.eclipse,
cursor: 'pointer',
':hover': {
color: props.theme && props.theme.palette.black,
color: theme && theme.palette.black,
},
[`@media (max-width: ${breakpoints.small}px)`]: {
[`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
fontSize: 14,
marginBottom: 8,
},
@ -105,14 +103,14 @@ export const IconButton = styled(MuiIconButton)({
},
});
export const TagContainer = styled('span')({
export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
marginTop: 8,
marginBottom: 12,
display: 'block',
[`@media (max-width: ${breakpoints.medium}px)`]: {
[`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
display: 'none',
},
});
}));
export const PackageListItemText = styled(ListItemText)({
paddingRight: 0,

View File

@ -1,4 +1,5 @@
import React, { Fragment, ReactNode } from 'react';
import styled from '@emotion/styled';
import Package from '../Package';
import Help from '../Help';
@ -6,7 +7,10 @@ import { formatLicense } from '../../utils/package';
import { PackageInterface } from '../Package/Package';
import Divider from '../../muiComponents/Divider';
import * as classes from './styles';
const PkgContainer = styled('div')({
margin: 0,
padding: 0,
});
interface Props {
packages: PackageInterface[];
@ -32,7 +36,7 @@ export const PackageList: React.FC<Props> = ({ packages }) => {
return (
<div className={'package-list-items'}>
<div className={classes.pkgContainer}>{hasPackages() ? renderPackages() : <Help />}</div>
<PkgContainer>{hasPackages() ? renderPackages() : <Help />}</PkgContainer>
</div>
);
};

View File

@ -1,18 +0,0 @@
import { css } from 'emotion';
import { fontWeight, fontSize } from '../../utils/styles/sizes';
export const listTitle = css({
fontWeight: fontWeight.regular,
fontSize: fontSize.xl,
margin: `0 0 10px 0`,
});
export const pkgContainer = css`
margin: 0;
padding: 0;
& .listTitle {
${listTitle}
}
`;

View File

@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { fontSize } from '../../utils/styles/sizes';
import DialogTitle from '../../muiComponents/DialogTitle';
import DialogContent from '../../muiComponents/DialogContent';
import { Theme } from '../../design-tokens/theme';
@ -8,7 +7,7 @@ import { Theme } from '../../design-tokens/theme';
export const Title = styled(DialogTitle)<{ theme?: Theme }>(props => ({
backgroundColor: props.theme && props.theme.palette.primary.main,
color: props.theme && props.theme.palette.white,
fontSize: fontSize.lg,
fontSize: props.theme && props.theme.fontSize.lg,
}));
export const Content = styled(DialogContent)({

View File

@ -10,14 +10,13 @@ import CopyToClipBoard from '../CopyToClipBoard';
import List from '../../muiComponents/List';
import { DetailContext } from '../../pages/Version';
import { Theme } from '../../design-tokens/theme';
import { fontWeight } from '../../utils/styles/sizes';
import git from './img/git.png';
const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
textTransform: 'capitalize',
});
}));
const GithubLink = styled('a')<{ theme?: Theme }>(props => ({
color: props.theme && props.theme.palette.primary.main,

View File

@ -2,11 +2,11 @@ import styled from '@emotion/styled';
import Text from '../../muiComponents/Text';
import { default as MuiListItemText } from '../../muiComponents/ListItemText';
import { fontWeight } from '../../utils/styles/sizes';
import { Theme } from '../../design-tokens/theme';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
});
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
}));
export const Spacer = styled('div')({
flex: '1 1 auto',

View File

@ -1,13 +1,13 @@
import styled from '@emotion/styled';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text';
import { default as MuiListItemText } from '../../muiComponents/ListItemText';
import { Theme } from '../../design-tokens/theme';
import Link from '../Link';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
});
export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
fontWeight: props.theme && props.theme.fontWeight.bold,
}));
export const Spacer = styled('div')({
flex: '1 1 auto',

View File

@ -1,17 +1,16 @@
import { makeStyles } from '@material-ui/styles';
import React from 'react';
import { fontWeight } from '../utils/styles/sizes';
import { breakpoints } from '../utils/styles/media';
import { Theme } from './theme';
const resetStyles = makeStyles(() => ({
const resetStyles = makeStyles(({ theme }: { theme?: Theme }) => ({
'@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,
fontWeight: theme && theme.fontWeight.semiBold,
},
'html, body, #root': {
height: '100%',
@ -25,8 +24,8 @@ const resetStyles = makeStyles(() => ({
padding: 15,
flex: 1,
[`@media screen and (min-width: ${breakpoints.container}px)`]: {
maxWidth: breakpoints.container,
[`@media screen and (min-width: ${theme && theme.breakPoints.container}px)`]: {
maxWidth: theme && theme.breakPoints.container,
width: '100%',
marginLeft: 'auto',
marginRight: 'auto',

View File

@ -28,6 +28,44 @@ const colors = {
export type Colors = keyof typeof colors;
const fontSize = {
xxl: 26,
xl: 24,
lg: 21,
md: 18,
default: 16,
sm: 14,
};
export type FontSize = keyof typeof fontSize;
const fontWeight = {
light: 300,
regular: 400,
semiBold: 500,
bold: 700,
};
export type FontWeight = keyof typeof fontWeight;
export const breakPoints = {
small: 576,
medium: 768,
large: 1024,
container: 1240,
xlarge: 1275,
};
export type BreakPoints = typeof breakPoints;
const customizedTheme = {
fontSize,
fontWeight,
breakPoints,
};
type CustomizedTheme = typeof customizedTheme;
export const theme = createMuiTheme({
typography: {
fontFamily: 'inherit',
@ -38,10 +76,18 @@ export const theme = createMuiTheme({
secondary: { main: colors.secondary },
error: { main: colors.red },
},
...customizedTheme,
});
export type Theme = typeof theme;
declare module '@material-ui/core/styles/createMuiTheme' {
/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
interface Theme extends CustomizedTheme {}
/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
interface ThemeOptions extends CustomizedTheme {}
}
declare module '@material-ui/core/styles/createPalette' {
interface CustomPalette {
black: string;

View File

@ -1,38 +0,0 @@
import { css, Interpolation } from 'emotion';
export const breakpoints = {
small: 576,
medium: 768,
large: 1024,
container: 1240,
xlarge: 1275,
};
type Breakpoints = typeof breakpoints;
type Sizes = keyof Breakpoints;
type MediaQuery<T> = {
[P in keyof T]: (args: Interpolation, key?: P) => string;
};
function constructMQ(breakpoint: Sizes, args: Interpolation): string {
const label = breakpoints[breakpoint];
const prefix = typeof label === 'string' ? '' : 'min-width:';
const suffix = typeof label === 'string' ? '' : 'px';
return css`
@media (${prefix + breakpoints[breakpoint] + suffix}) {
${args};
}
`;
}
const mq: MediaQuery<Breakpoints> = {
small: (args, b = 'small') => constructMQ(b, args),
large: (args, b = 'large') => constructMQ(b, args),
container: (args, b = 'container') => constructMQ(b, args),
medium: (args, b = 'medium') => constructMQ(b, args),
xlarge: (args, b = 'xlarge') => constructMQ(b, args),
};
export default mq;

View File

@ -1,40 +0,0 @@
/**
* CSS to represent truncated text with an ellipsis.
*/
export function ellipsis(width: string | number): {} {
return {
display: 'inline-block',
maxWidth: width,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
wordWrap: 'normal',
};
}
/**
* Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
*/
interface SpacingShortHand<type> {
top?: type;
right?: type;
bottom?: type;
left?: type;
}
const positionMap = ['Top', 'Right', 'Bottom', 'Left'];
export function spacing(property: 'padding' | 'margin', ...values: SpacingShortHand<number | string>[]): {} {
const [firstValue = 0, secondValue = 0, thirdValue = 0, fourthValue = 0] = values;
const valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
let styles = {};
for (let i = 0; i < valuesWithDefaults.length; i += 1) {
if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
styles = {
...styles,
[`${property}${positionMap[i]}`]: valuesWithDefaults[i],
};
}
}
return styles;
}

View File

@ -1,22 +0,0 @@
export const fontSize = {
xxl: '26px',
xl: '24px',
lg: '21px',
md: '18px',
base: '16px',
sm: '14px',
};
export const lineHeight = {
xl: '30px',
sm: '18px',
xs: '2',
xxs: '1.5',
};
export const fontWeight = {
light: 300,
regular: 400,
semiBold: 500,
bold: 700,
};

View File

@ -1,7 +0,0 @@
// Spacings
// -------------------------
export const spacings = {
lg: '30px',
sm: '16px',
};