Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Osamah Aldoaiss Saifadin

🎯
Focusing
View GitHub Profile
@Saifadin
Saifadin / .prettierrc
Created Jun 24, 2018
Default prettier config
View .prettierrc
printWidth: 140
trailingComma: "es5"
jsxBracketSameLine: true
singleQuote: true
esLintIntegration: true
@Saifadin
Saifadin / component.js
Created Aug 29, 2018
Example of a stateful component
View component.js
class NavigationBar extends React.Component {
state = {
scroll: window.pageYOffset,
navContainer: null,
active: false,
};
componentDidMount() {
this.setState({
navContainer: document.getElementById('NavContainer').offsetTop,
@Saifadin
Saifadin / Button.scss
Created Dec 17, 2018
Why we use Css-in-JS 1
View Button.scss
.button {
/** to override bootstrap styling */
compose: unstyled-btn from '../../styles/button.scss';
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid #66aacc;
background: transparent;
// ...
}
@Saifadin
Saifadin / styles.jsx
Created Dec 17, 2018
Why we use Css-in-JS 2
View styles.jsx
import styled from 'styled-components';
export const Button = styled('button')`
display: block;
align-items: center;
color: ${({ primary}) => primary ? 'blue' : 'white'};
...
`;
...
@Saifadin
Saifadin / styles.js
Created Dec 17, 2018
Why we use CSS-in-JS 3
View styles.js
import styled from 'react-emotion';
import { NavLink } from 'react-router-dom';
import { Icon } from '@homelike/ui-kit';
export const Header = styled('header')`
display: grid;
grid-template-columns: 24px 1fr 24px;
align-items: center;
padding: 0 ${({ theme: { spacing } }) => spacing * 2}px;
`;
@Saifadin
Saifadin / Navigation.jsx
Created Dec 17, 2018
Why we use CSS-in-JS 4
View Navigation.jsx
import React from 'react';
import { Translate } from 'react-redux-i18n';
import { Header, Logo, Menu, MenuItem, Spacer } from './styles';
const Navigation = ({ email }) => {
return (
<Header>
<Logo name="logo-small" fill="primary" color="primary" size="large" />
<Menu>
@Saifadin
Saifadin / styles.js
Created Dec 17, 2018
Why we use CSS-in-JS 5
View styles.js
export const Panel = styled('div')`
max-width: 1200px;
width: 100%;
margin-bottom: ${({ theme: { spacing } }) => spacing}px;
@media screen and (max-width: 768px) {
max-width: 400px;
}
`;
@Saifadin
Saifadin / VerificationMail.jsx
Last active Jan 2, 2019
Verification Code Email
View VerificationMail.jsx
import React from 'react';
import { Email, Container, Row, Column, Header, FullWidth, Footer, Text, Link, PostonentsProvider } from 'postonents';
// Data here represents the Example Data we might get passed to from the backend.
// This can be anything and you need, you have to define it beforehand
const VerificationEmail = ({ lang, data }) => {
const { verifyToken, email } = data;
return (
<PostonentsProvider theme={{ typo: { fontFamily: 'Roboto, sans-serif' } }}>
View renderEmail.js
import { renderEmail } from 'postonents';
import VerificationCodeMail from './templates/VerificationCode';
...
// Get your email templates, pass it as the entry point for the server side rendering
// data in this case should align with the data needed in the template
const html = renderEmail(VerificationCodeMail, { lang: 'en', data });
// This is just a generic send function
@Saifadin
Saifadin / EmailComponent.js
Created Jan 2, 2019
Main email component
View EmailComponent.js
import React from 'react';
import { getEmail } from './utils';
/** utils.js
import { AccountUserDeleted } from './emails';
export const getEmail = name => {
switch (name) {
case 'ACCOUNT_USER_DELETED':