Merge pull request #59 from mapado/add-style-makeup-variables

Add rule about using makeup variables

Author: cmeiller

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

docs/js/style.mdx

@@ -2,8 +2,8 @@
 title: Guide de style
 ---
 
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 ## Comment est-ce qu'on écrit une fonction (arrow function vs function declaration)
 
@@ -116,8 +116,8 @@ setTimeout(doSomething, TIMEOUT_DELAY);
 ```
 
 ```jsx
-const EVENT_DATE_BY_LIST = "list";
-const EVENT_DATE_BY_DATE = "date";
+const EVENT_DATE_BY_LIST = 'list';
+const EVENT_DATE_BY_DATE = 'date';
 // ...
 const [selectedTab, setSelectedTab] = useState(EVENT_DATE_BY_LIST);
 ```
@@ -126,9 +126,9 @@ Dans le cas où plusieurs constantes sont utilisées à plusieurs endroits, on p
 
 ```tsx
 export enum MODULE_TYPE {
-  INFORMATION = "information",
-  RECOMMENDATION = "recommendation",
-  PROMOTE = "promote",
+  INFORMATION = 'information',
+  RECOMMENDATION = 'recommendation',
+  PROMOTE = 'promote',
 }
 
 function generateModule(moduleType: MODULE_TYPE) {
@@ -156,10 +156,10 @@ Afin de gagner en lisibilité dans la lecture du code, on DOIT ajouter une ligne
 function Foo() {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(true);
-  let name = "JD";
+  let name = 'JD';
 
   if (!loading) {
-    name = "Chris";
+    name = 'Chris';
   }
 
   useEffect(() => {
@@ -172,7 +172,7 @@ function Foo() {
     return <MpdLoader />;
   }
 
-  return <div>{t("hello", { name })}</div>;
+  return <div>{t('hello', { name })}</div>;
 }
 ```
 
@@ -212,7 +212,7 @@ Cette syntaxe est difficilement compréhensible car on ne comprends pas directem
 
 ## Extension de fichier dans les imports
 
-On **NE DEVRAIT PAS** avoir le nom de l'extension dans les imports 
+On **NE DEVRAIT PAS** avoir le nom de l'extension dans les imports
 
 <Tabs
   defaultValue="good"
@@ -222,14 +222,57 @@ On **NE DEVRAIT PAS** avoir le nom de l'extension dans les imports
   ]}
 >
   <TabItem value="bad">
+
 ```tsx
 import Component from './components.jsx';
 ```
+
 </TabItem>
-  <TabItem value="good">
+<TabItem value="good">
+
 ```tsx
 import Component from './components';
 ```
 
   </TabItem>
 </Tabs>
+
+## Variables makeup
+
+On **DEVRAIT** privilégier les [variables makeup](https://makeup.mapado.net/?path=/docs/overview-variables--docs) lorsqu'on style un composant React.
+
+<Tabs
+  defaultValue="good"
+  values={[
+    { label: 'Pas bien 👎', value: 'bad', },
+    { label: 'Bien 👍', value: 'good', },
+  ]}
+>
+  <TabItem value="bad">
+
+```tsx
+const styled = 'styled-components';
+
+// ...
+
+const Container = styled.div`
+  margin: 5px 0;
+`;
+```
+
+</TabItem>
+<TabItem value="good">
+
+```tsx
+const styled = 'styled-components';
+import { $marginSmall } from '@mapado/makeup/build/variables';
+
+// ...
+
+const Container = styled.div`
+  margin: ${$marginSmall} 0;
+`;
+```
+
+  </TabItem>
+</Tabs>

package.json

@@ -26,5 +26,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }