sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2026-01-18 17:16:00 +07:00
Code Issues Releases Wiki Activity

feat(i18n): added i18next for user interface translations (#432)

Browse Source
This commit is contained in:
Priscila Oliveira
2020-03-08 16:45:07 +01:00
committed by GitHub
parent 8d4b3cee7e
commit 7428384b55
76 changed files with 1114 additions and 720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Developers/Developers.test.tsx
View File

@@ -3,7 +3,8 @@ import React from 'react';
import { mount } from '../../utils/test-enzyme';
import { DetailContextProvider } from '../../pages/Version';
import Developers, { DeveloperType, Fab } from './Developers';
import Developers, { Fab } from './Developers';
import { DeveloperType } from './types';
describe('test Developers', () => {
const packageMeta = {

20
src/components/Developers/Developers.tsx
View File

@@ -1,38 +1,29 @@
import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
import Add from '@material-ui/icons/Add';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import { DetailContext } from '../../pages/Version';
import Tooltip from '../../muiComponents/Tooltip';
import Avatar from '../../muiComponents/Avatar';
import Box from '../../muiComponents/Box';
import Text from '../../muiComponents/Text';
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
import { Theme } from '../../design-tokens/theme';
import getUniqueDeveloperValues from './get-unique-developer-values';
import DevelopersTitle from './DevelopersTitle';
import { DeveloperType } from './types';
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
backgroundColor: props.theme && props.theme.palette.primary.main,
color: props.theme && props.theme.palette.white,
}));
export enum DeveloperType {
CONTRIBUTORS = 'contributors',
MAINTAINERS = 'maintainers',
}
interface Props {
type: DeveloperType;
visibleMax?: number;
}
export const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
fontWeight: theme && theme.fontWeight.bold,
marginBottom: '10px',
textTransform: 'capitalize',
}));
const StyledBox = styled(Box)({
'> *': {
margin: 5,
@@ -43,9 +34,10 @@ export const VISIBLE_MAX = 6;
const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
const detailContext = useContext(DetailContext);
const { t } = useTranslation();
if (!detailContext) {
throw Error("The app's detail Context was not correct used");
throw Error(t('app-context-not-correct-used'));
}
const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
@@ -69,7 +61,7 @@ const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
return (
<>
<StyledText variant={'subtitle1'}>{type}</StyledText>
<DevelopersTitle type={type} />
<StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
{visibleDevelopers.map(visibleDeveloper => (
<Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>

30
src/components/Developers/DevelopersTitle.tsx Normal file
View File

@@ -0,0 +1,30 @@
import React from 'react';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import Text from '../../muiComponents/Text';
import { Theme } from '../../design-tokens/theme';
import { DeveloperType } from './types';
interface Props {
type: DeveloperType;
}
const DevelopersTitle: React.FC<Props> = ({ type }) => {
const { t } = useTranslation();
switch (type) {
case DeveloperType.CONTRIBUTORS:
return <StyledText variant={'subtitle1'}>{t('sidebar.contributors.title')}</StyledText>;
case DeveloperType.MAINTAINERS:
return <StyledText variant={'subtitle1'}>{t('sidebar.maintainers.title')}</StyledText>;
return null;
}
};
export default DevelopersTitle;
const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
fontWeight: theme && theme.fontWeight.bold,
marginBottom: '10px',
}));

202
src/components/Developers/__snapshots__/Developers.test.tsx.snap
View File

@@ -4,7 +4,6 @@ exports[`test Developers should render the component for contributors with items
.emotion-0 {
font-weight: 700;
margin-bottom: 10px;
text-transform: capitalize;
}
.emotion-8 > * {
@@ -14,64 +13,68 @@ exports[`test Developers should render the component for contributors with items
<Developers
type="contributors"
>
<StyledText
variant="subtitle1"
<DevelopersTitle
type="contributors"
>
<ForwardRef(Text)
className="emotion-0 emotion-1"
<StyledText
variant="subtitle1"
>
<WithStyles(ForwardRef(Typography))
<ForwardRef(Text)
className="emotion-0 emotion-1"
variant="subtitle1"
>
<ForwardRef(Typography)
<WithStyles(ForwardRef(Typography))
className="emotion-0 emotion-1"
classes={
Object {
"alignCenter": "MuiTypography-alignCenter",
"alignJustify": "MuiTypography-alignJustify",
"alignLeft": "MuiTypography-alignLeft",
"alignRight": "MuiTypography-alignRight",
"body1": "MuiTypography-body1",
"body2": "MuiTypography-body2",
"button": "MuiTypography-button",
"caption": "MuiTypography-caption",
"colorError": "MuiTypography-colorError",
"colorInherit": "MuiTypography-colorInherit",
"colorPrimary": "MuiTypography-colorPrimary",
"colorSecondary": "MuiTypography-colorSecondary",
"colorTextPrimary": "MuiTypography-colorTextPrimary",
"colorTextSecondary": "MuiTypography-colorTextSecondary",
"displayBlock": "MuiTypography-displayBlock",
"displayInline": "MuiTypography-displayInline",
"gutterBottom": "MuiTypography-gutterBottom",
"h1": "MuiTypography-h1",
"h2": "MuiTypography-h2",
"h3": "MuiTypography-h3",
"h4": "MuiTypography-h4",
"h5": "MuiTypography-h5",
"h6": "MuiTypography-h6",
"noWrap": "MuiTypography-noWrap",
"overline": "MuiTypography-overline",
"paragraph": "MuiTypography-paragraph",
"root": "MuiTypography-root",
"srOnly": "MuiTypography-srOnly",
"subtitle1": "MuiTypography-subtitle1",
"subtitle2": "MuiTypography-subtitle2",
}
}
variant="subtitle1"
>
<h6
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
<ForwardRef(Typography)
className="emotion-0 emotion-1"
classes={
Object {
"alignCenter": "MuiTypography-alignCenter",
"alignJustify": "MuiTypography-alignJustify",
"alignLeft": "MuiTypography-alignLeft",
"alignRight": "MuiTypography-alignRight",
"body1": "MuiTypography-body1",
"body2": "MuiTypography-body2",
"button": "MuiTypography-button",
"caption": "MuiTypography-caption",
"colorError": "MuiTypography-colorError",
"colorInherit": "MuiTypography-colorInherit",
"colorPrimary": "MuiTypography-colorPrimary",
"colorSecondary": "MuiTypography-colorSecondary",
"colorTextPrimary": "MuiTypography-colorTextPrimary",
"colorTextSecondary": "MuiTypography-colorTextSecondary",
"displayBlock": "MuiTypography-displayBlock",
"displayInline": "MuiTypography-displayInline",
"gutterBottom": "MuiTypography-gutterBottom",
"h1": "MuiTypography-h1",
"h2": "MuiTypography-h2",
"h3": "MuiTypography-h3",
"h4": "MuiTypography-h4",
"h5": "MuiTypography-h5",
"h6": "MuiTypography-h6",
"noWrap": "MuiTypography-noWrap",
"overline": "MuiTypography-overline",
"paragraph": "MuiTypography-paragraph",
"root": "MuiTypography-root",
"srOnly": "MuiTypography-srOnly",
"subtitle1": "MuiTypography-subtitle1",
"subtitle2": "MuiTypography-subtitle2",
}
}
variant="subtitle1"
>
contributors
</h6>
</ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</ForwardRef(Text)>
</StyledText>
<h6
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
>
sidebar.contributors.title
</h6>
</ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</ForwardRef(Text)>
</StyledText>
</DevelopersTitle>
<StyledBox
display="flex"
flexWrap="wrap"
@@ -427,7 +430,6 @@ exports[`test Developers should render the component for maintainers with items
.emotion-0 {
font-weight: 700;
margin-bottom: 10px;
text-transform: capitalize;
}
.emotion-8 > * {
@@ -437,64 +439,68 @@ exports[`test Developers should render the component for maintainers with items
<Developers
type="maintainers"
>
<StyledText
variant="subtitle1"
<DevelopersTitle
type="maintainers"
>
<ForwardRef(Text)
className="emotion-0 emotion-1"
<StyledText
variant="subtitle1"
>
<WithStyles(ForwardRef(Typography))
<ForwardRef(Text)
className="emotion-0 emotion-1"
variant="subtitle1"
>
<ForwardRef(Typography)
<WithStyles(ForwardRef(Typography))
className="emotion-0 emotion-1"
classes={
Object {
"alignCenter": "MuiTypography-alignCenter",
"alignJustify": "MuiTypography-alignJustify",
"alignLeft": "MuiTypography-alignLeft",
"alignRight": "MuiTypography-alignRight",
"body1": "MuiTypography-body1",
"body2": "MuiTypography-body2",
"button": "MuiTypography-button",
"caption": "MuiTypography-caption",
"colorError": "MuiTypography-colorError",
"colorInherit": "MuiTypography-colorInherit",
"colorPrimary": "MuiTypography-colorPrimary",
"colorSecondary": "MuiTypography-colorSecondary",
"colorTextPrimary": "MuiTypography-colorTextPrimary",
"colorTextSecondary": "MuiTypography-colorTextSecondary",
"displayBlock": "MuiTypography-displayBlock",
"displayInline": "MuiTypography-displayInline",
"gutterBottom": "MuiTypography-gutterBottom",
"h1": "MuiTypography-h1",
"h2": "MuiTypography-h2",
"h3": "MuiTypography-h3",
"h4": "MuiTypography-h4",
"h5": "MuiTypography-h5",
"h6": "MuiTypography-h6",
"noWrap": "MuiTypography-noWrap",
"overline": "MuiTypography-overline",
"paragraph": "MuiTypography-paragraph",
"root": "MuiTypography-root",
"srOnly": "MuiTypography-srOnly",
"subtitle1": "MuiTypography-subtitle1",
"subtitle2": "MuiTypography-subtitle2",
}
}
variant="subtitle1"
>
<h6
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
<ForwardRef(Typography)
className="emotion-0 emotion-1"
classes={
Object {
"alignCenter": "MuiTypography-alignCenter",
"alignJustify": "MuiTypography-alignJustify",
"alignLeft": "MuiTypography-alignLeft",
"alignRight": "MuiTypography-alignRight",
"body1": "MuiTypography-body1",
"body2": "MuiTypography-body2",
"button": "MuiTypography-button",
"caption": "MuiTypography-caption",
"colorError": "MuiTypography-colorError",
"colorInherit": "MuiTypography-colorInherit",
"colorPrimary": "MuiTypography-colorPrimary",
"colorSecondary": "MuiTypography-colorSecondary",
"colorTextPrimary": "MuiTypography-colorTextPrimary",
"colorTextSecondary": "MuiTypography-colorTextSecondary",
"displayBlock": "MuiTypography-displayBlock",
"displayInline": "MuiTypography-displayInline",
"gutterBottom": "MuiTypography-gutterBottom",
"h1": "MuiTypography-h1",
"h2": "MuiTypography-h2",
"h3": "MuiTypography-h3",
"h4": "MuiTypography-h4",
"h5": "MuiTypography-h5",
"h6": "MuiTypography-h6",
"noWrap": "MuiTypography-noWrap",
"overline": "MuiTypography-overline",
"paragraph": "MuiTypography-paragraph",
"root": "MuiTypography-root",
"srOnly": "MuiTypography-srOnly",
"subtitle1": "MuiTypography-subtitle1",
"subtitle2": "MuiTypography-subtitle2",
}
}
variant="subtitle1"
>
maintainers
</h6>
</ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</ForwardRef(Text)>
</StyledText>
<h6
className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
>
sidebar.maintainers.title
</h6>
</ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</ForwardRef(Text)>
</StyledText>
</DevelopersTitle>
<StyledBox
display="flex"
flexWrap="wrap"

3
src/components/Developers/index.ts
View File

@@ -1 +1,2 @@
export { default, DeveloperType } from './Developers';
export { default } from './Developers';
export { DeveloperType } from './types';

4
src/components/Developers/types.ts Normal file
View File

@@ -0,0 +1,4 @@
export enum DeveloperType {
CONTRIBUTORS = 'contributors',
MAINTAINERS = 'maintainers',
}