Skip to content

Instantly share code, notes, and snippets.

View evasconcelos's full-sized avatar

Eduardo Machemer de Vasconcelos Moniz evasconcelos

  • Porto Alegre, Rio Grande do Sul, Brazil
View GitHub Profile
@evasconcelos
evasconcelos / goodInput.tsx
Created March 30, 2021 11:45
goodInput.tsx
<InputContainer ...props>
<InputLabel ...props />
<InputLeftAddon ...props />
<InputControl ...props />
<InputRightAddon ...props />
</InputContainer>
import React, { FC } from "react";
interface InputProps {
inputRef: React.RefObject<
HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
>;
className?: string;
containerClassName?: string;
formGroupClassName?: string;
@evasconcelos
evasconcelos / badInput.tsx
Created March 30, 2021 11:29
open closed bad example
import React, { FC } from "react";
interface InputProps {
value: string;
onChange: React.ChangeEventHandler<HTMLInputElement>;
className?: string;
label: string;
}
const Input: FC<InputProps> = ({ label, ...props }) => {
@evasconcelos
evasconcelos / BreakISP.tsx
Created March 30, 2021 08:18
Breaking Interface segregation principle
interface CatFactData {
facts: string[];
color: string;
link: string;
}
const CatFact = ({ facts }: CatFactData) => {
return (
<ul>
{facts.map((fact) => (
@evasconcelos
evasconcelos / LSP.tsx
Created March 30, 2021 08:01
LSP Example
interface CatFact {
facts: string[];
color: string;
}
const CatFactA = ({ facts, color }: CatFact) => {
return (
<>
{facts.map((fact, index) => (
<p style={{ color }}>
@evasconcelos
evasconcelos / App.tsx
Last active March 30, 2021 09:43
SOLID example
import { useEffect, useState } from "react";
import RequestCatFactService from "./RequestCatFactService";
export default function App() {
const [fact, setFact] = useState("");
useEffect(() => {
RequestCatFactService().then((res) => {
setFact(res);
});
@evasconcelos
evasconcelos / brokenDependencyInversion.tsx
Created March 30, 2021 07:26
Dependency inversion principle: Breaking it
import { useEffect, useState } from "react";
import axios from "axios";
export default function App() {
const [fact, setFact] = useState("");
useEffect(() => {
axios.get("https://cat-fact-herokuapp.com/facts").then((res) => {
setFact(res.data[0].text);
});
@evasconcelos
evasconcelos / webpack.config.js
Created August 3, 2020 20:41
Storybook 5 webpack config for typescript and postcss
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'postcss-loader',