mirror of
https://github.com/SomboChea/ui
synced 2026-01-19 01:25:51 +07:00
feat: migrating flow to typescript (#47)
This PR convert the code base to Typescript, the changes are the following: - migrate code base to Typescript (3.4.x) - enable `eslint` and `@typescript-eslint/eslint-plugin` (warnings still need to be addressed in future pull request - update relevant dependencies for this PR (linting, etc) - enable `bundlezise` (it was disabled for some reason) * refactor: refactoring to typescript * refactor: migrating to typescript * refactor: applied feedbacks * fix: fixed conflicts * refactored: changed registry * refactor: updated registry & removed unnecessary lib * fix: fixed registry ur * fix: fixed page load * refactor: refactored footer wip * refactor: converting to ts..wip * refactor: converting to ts. wip * refactor: converting to ts. wip * refactor: converting to ts * refactor: converting to ts * fix: fixed load errors * refactor: converted files to ts * refactor: removed flow from tests * fix: removed transpiled files * refactor: added ts-ignore * fix: fixed errors * fix: fixed types * fix: fixing jest import -.- * fix: fixing lint errors * fix: fixing lint errors * fix: fixed lint errors * refactor: removed unnecessary tsconfig's config * fix: fixing errors * fix: fixed warning * fix: fixed test * refactor: wip * refactor: wip * refactor: wip * fix: fixing tests: wip * wip * wip * fix: fixed search test * wip * fix: fixing lint errors * fix: re-added stylelint * refactor: updated stylelint script * fix: fixed: 'styles.js' were found. * fix: fixed Search tests * chore: enable eslint eslint needs expecitely to know which file has to lint, by default is JS, in this case we need also ts,tsx files eslint . --ext .js,.ts * chore: vcode eslint settings * chore: restore eslint previous conf * chore: clean jest config * chore: fix eslint warnings * chore: eslint errors cleared chore: clean warnings chore: remove github actions test phases chore: remove dupe rule * chore: update handler name * chore: restore logo from img to url css prop - loading images with css is more performant than using img html tags, switching this might be a breaking change - restore no-empty-source seems the linting do not accept false - update snapshots - remove @material-ui/styles * chore: update stylelint linting * chore: update stylelint linting * chore: fix a mistake on move tabs to a function * chore: eanble bundlezie * chore: use default_executor in circleci * chore: update readme
This commit is contained in:
Priscila Oliveira
committed by
Juan Picado @jotadeveloper
Juan Picado @jotadeveloper
parent
7d1764458b
commit
6b5d0b7e2e
23
src/components/Footer/Footer.test.tsx
Normal file
23
src/components/Footer/Footer.test.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
|
||||
import Footer from './Footer';
|
||||
|
||||
jest.mock('../../../package.json', () => ({
|
||||
version: '4.0.0-alpha.3',
|
||||
}));
|
||||
|
||||
describe('<Footer /> component', () => {
|
||||
let wrapper;
|
||||
beforeEach(() => {
|
||||
// @ts-ignore : Property 'VERDACCIO_VERSION' does not exist on type 'Window'
|
||||
window.VERDACCIO_VERSION = 'v.1.0.0';
|
||||
wrapper = mount(<Footer />);
|
||||
// @ts-ignore : Property 'VERDACCIO_VERSION' does not exist on type 'Window'
|
||||
delete window.VERDACCIO_VERSION;
|
||||
});
|
||||
|
||||
test('should load the initial state of Footer component', () => {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
53
src/components/Footer/Footer.tsx
Normal file
53
src/components/Footer/Footer.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
|
||||
import { goToVerdaccioWebsite } from '../../utils/windows';
|
||||
|
||||
const renderTooltip = () => (
|
||||
<ToolTip>
|
||||
<Earth name="earth" size="md" />
|
||||
<Flags>
|
||||
<Flag name="spain" size="md" />
|
||||
<Flag name="nicaragua" size="md" />
|
||||
<Flag name="india" size="md" />
|
||||
<Flag name="brazil" size="md" />
|
||||
<Flag name="china" size="md" />
|
||||
<Flag name="austria" size="md" />
|
||||
</Flags>
|
||||
</ToolTip>
|
||||
);
|
||||
const POWERED_LABEL = 'Powered by';
|
||||
const MADEWITH_LABEL = ' Made with';
|
||||
const ON_LABEL = 'on';
|
||||
const HEARTH_EMOJI = '♥';
|
||||
|
||||
// @ts-ignore
|
||||
const renderRight = (version = window.VERDACCIO_VERSION) => {
|
||||
return (
|
||||
<Right>
|
||||
{POWERED_LABEL}
|
||||
<Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
|
||||
{`/ ${version}`}
|
||||
</Right>
|
||||
);
|
||||
};
|
||||
|
||||
const renderLeft = () => (
|
||||
<Left>
|
||||
{MADEWITH_LABEL}
|
||||
<Love>{HEARTH_EMOJI}</Love>
|
||||
{ON_LABEL}
|
||||
{renderTooltip()}
|
||||
</Left>
|
||||
);
|
||||
|
||||
const Footer: React.FC = () => (
|
||||
<Wrapper>
|
||||
<Inner>
|
||||
{renderLeft()}
|
||||
{renderRight()}
|
||||
</Inner>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
export default Footer;
|
||||
3
src/components/Footer/__snapshots__/Footer.test.tsx.snap
Normal file
3
src/components/Footer/__snapshots__/Footer.test.tsx.snap
Normal file
@@ -0,0 +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-1kgp95j ek145dl0\\"><title>Earth</title><use xlink:href=\\"[object Object]#earth\\"></use></svg><span class=\\"css-8631ip ezbsl486\\"><svg class=\\"ezbsl488 css-f1ndto ek145dl0\\"><title>Spain</title><use xlink:href=\\"[object Object]#spain\\"></use></svg><svg class=\\"ezbsl488 css-f1ndto ek145dl0\\"><title>Nicaragua</title><use xlink:href=\\"[object Object]#nicaragua\\"></use></svg><svg class=\\"ezbsl488 css-f1ndto ek145dl0\\"><title>India</title><use xlink:href=\\"[object Object]#india\\"></use></svg><svg class=\\"ezbsl488 css-f1ndto ek145dl0\\"><title>Brazil</title><use xlink:href=\\"[object Object]#brazil\\"></use></svg><svg class=\\"ezbsl488 css-f1ndto ek145dl0\\"><title>China</title><use xlink:href=\\"[object Object]#china\\"></use></svg><svg class=\\"ezbsl488 css-f1ndto 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>"`;
|
||||
1
src/components/Footer/index.ts
Normal file
1
src/components/Footer/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Footer';
|
||||
112
src/components/Footer/styles.ts
Normal file
112
src/components/Footer/styles.ts
Normal file
@@ -0,0 +1,112 @@
|
||||
import styled, { css } from 'react-emotion';
|
||||
import mq from '../../utils/styles/media';
|
||||
import Icon from '../Icon/Icon';
|
||||
import colors from '../../utils/styles/colors';
|
||||
|
||||
export const Wrapper = styled('div')`
|
||||
&& {
|
||||
background: ${colors.snow};
|
||||
border-top: 1px solid ${colors.greyGainsboro};
|
||||
color: ${colors.nobel01};
|
||||
font-size: 14px;
|
||||
padding: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Inner = styled('div')`
|
||||
&& {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
${() => {
|
||||
// @ts-ignore
|
||||
return mq.medium(css`
|
||||
min-width: 400px;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
justify-content: space-between;
|
||||
`);
|
||||
}};
|
||||
${() => {
|
||||
// @ts-ignore
|
||||
return mq.large(css`
|
||||
max-width: 1240px;
|
||||
`);
|
||||
}};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Left = styled('div')`
|
||||
&& {
|
||||
align-items: center;
|
||||
display: none;
|
||||
${() => {
|
||||
// @ts-ignore
|
||||
return mq.medium(css`
|
||||
display: flex;
|
||||
`);
|
||||
}};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Right = styled(Left)`
|
||||
&& {
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ToolTip = styled('span')`
|
||||
&& {
|
||||
position: relative;
|
||||
height: 18px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Earth = styled(Icon)`
|
||||
&& {
|
||||
padding: 0 10px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Flags = styled('span')`
|
||||
&& {
|
||||
position: absolute;
|
||||
background: ${colors.greyAthens};
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
visibility: hidden;
|
||||
top: -2px;
|
||||
:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 29%;
|
||||
left: -4px;
|
||||
margin-left: -5px;
|
||||
border: 5px solid;
|
||||
border-color: ${colors.greyAthens} transparent transparent transparent;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
${ToolTip}:hover & {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const Love = styled('span')`
|
||||
&& {
|
||||
color: ${colors.love};
|
||||
padding: 0 5px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Flag = styled(Icon)`
|
||||
&& {
|
||||
padding: 0 5px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Logo = Flag;
|
||||
Reference in New Issue
Block a user