binary-com · ashkanx · Jun 24, 2019 · Jun 20, 2019 · Jun 21, 2019 · Jun 21, 2019
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,4 @@
+.cache/
+.vscode/
+node_modules/
+public/
diff --git a/documents/implementation-guide.md b/documents/implementation-guide.md
@@ -0,0 +1,77 @@
+## Implementation guide
+
+### Styled Component
+
+to use styled component you can import it
+
+```
+import styled from 'styled-components'
+```
+
+to use it you can create a function using the imported `styled`
+
+```
+const _component_name_ = styled._any_html_tag`
+    _your_css_style_ (for e.g.)
+    color: var(--color-red);
+    margin: 1rem 0.4rem;
+    background-color: ${props => props.is_testing ? var(--color-white) : var(--color-black)}
+
+    &:hover {
+        _your_css_style_
+    }
+    &._any_class_name {
+        _your_css_style_
+    }
+`
+```
+
+Then in your react component
+
+```
+<_component_name_>
+    <children>
+/_component_name_>
+```
+
+you can extend style component like this
+
+```
+const _want_extend_ = styled(_component_name_)`
+    _your_css_style_
+`
+```
+
+*noted that we are using `rem` as value where `10px = 1rem`
+*for further information you can take a look at [Styled Component](https://www.styled-components.com/)
+
+### Image Component
+
+#### (png|jpg|jpeg|gif) file type
+
+image will be located anywhere within `src/images` directory.
+this project uses GatsbyImageSharpFluid lazy load image built in gatsby-iamge. for further information, can take a look at [Gatsby Image](https://www.gatsbyjs.org/packages/gatsby-image), the configuration is located at
+`src/components/elements/image.js`.
+
+Usage example:
+
+```
+<Image
+    width="_image_size_" // this is max width
+    img_name="_image_name_"
+    alt="_image_alt_"
+/>
+```
+
+#### svg file type
+
+svg willl be located anywhere within `src/images/svg` directory.
+SVG will be handled by `gatsby-plugin-react-svg` which overriding `svg-react-loader`, you can take a look at [Gatsby SVG](https://www.gatsbyjs.org/packages/gatsby-plugin-react-svg/)
+
+Usage example:
+
+```
+import Logo from '../images/logo.svg'
+
+<Logo />
+```
diff --git a/documents/style-guide.md b/documents/style-guide.md
@@ -0,0 +1,104 @@
+# Development Style Guide
+
+In this project, tey to keep relevant files in 5 major directories which are `common`, `components`, `images`, `pages`, `themes`.
+We will describe them more in the enxt sections.
+
+## File Structure
+
+Below is a sample file structure of the project.
+
+```
+src
+    ├── common/
+    │   ├── websocket/
+    │   ├── storage.js
+    │   └── utility.js
+    ├── components/
+    │   ├── containers/
+    │   ├── elements/
+    │   ├── form/
+    │   ├── layout/
+    ├── images/
+    │   ├── common/
+    │   ├── svg/
+    ├── pages/
+    │   ├── index.js
+    │   ├── 404.js
+    │   ├── ...
+    ├── themes/
+    │   ├── global-style.js
+    │   ├── reset.js
+    │   ├── variables.js
+
+gatsby-browser.js
+gatsby-config.js
+gatsby-node.js
+```
+
+## common
+
+The `common` directory contains common javascript to be used for utilities or for websocket calls.
+
+## components
+
+All reusable components will be stored in this directory.
+contains React components, of either stateless or stateful varieties.
+The optimal structure for components is to place files relevant to a component inside
+its own subdirectory, e.g.:
+
+```
+Components/
+├── containers/
+└── elements/
+└── form/
+└── layout/
+```
+
+`containers` used to store specific function component for e.g. (Localization or SEO); `elements` used to store reusable piece of ui component such as card, image, header, wrapper, etc; `form` used to store form component such as button or input; and lastly `layout` used to store main wrapper for pages.
+
+## images
+
+This directory contains all image resources. all images are handled with `gatsby-image` for `lazy-loading` image purposes. you can take a look at [Gatsby Image](https://www.gatsbyjs.org/packages/gatsby-image/?=gatsby-image) page to understand more about its function and the usage. except for svg will be handled by `gatsby-plugin-react-svg` which overriding `svg-react-loader`, you can take a look at [Gatsby SVG](https://www.gatsbyjs.org/packages/gatsby-plugin-react-svg/) to see its usage.
+
+## pages
+
+This directories contains all pages, the name of the file here will be the redirection link to each of the page.
+
+### COMPONENTS
+
+This directory contains React components, of either stateless or stateful varieties
+(e.g. `function` or `class` components).
+
+The optimal structure for components is to place files relevant to a component inside
+its own subdirectory, e.g.:
+
+```
+Components/
+├── Elements/
+│   ├── full-screen-dialog.jsx
+│   └── mobile-widget.jsx
+└── Form/
+    ├── ContractType/
+    ├── Purchase/
+    ├── TradeParams/
+    ├── form-layout.jsx
+    ├── screen-large.jsx
+    └── screen-small.jsx
+```
+
+#### Do:
+
+-   Keep all files immediately relevant to a component inside the given component directory.
+
+-   make it dead simple to import the component from elsewhere.
+-   Feel free to create subdirectories for relevant utils or helpers
+    if it helps to keep things tidy
+-   Keep components small, focused and easy to test, breaking up complex components into smaller components
+-   Try to create new, reusable components instead of "sub-components"
+    (i.e. prefer not to create sub-directories that contain more components)
+-   **Be consistent** — however, you choose to lay things out
+
+#### Don't:
+
+-   Mix concerns (files, modules) that should really belong to other components
+-   Forget to write tests... :wink:
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,5 +1,6 @@
 import { BinarySocketGeneral } from './src/common/websocket/socket_general'
 import { NetworkMonitorBase } from './src/common/websocket/network_base'
+import 'typeface-ibm-plex-sans'
 
 export const onInitialClientRender = () => {
     NetworkMonitorBase.init(BinarySocketGeneral)

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -7,6 +7,7 @@ module.exports = {
     },
     plugins: [
         `gatsby-plugin-react-helmet`,
+        `gatsby-plugin-styled-components`,
         {
             resolve: `gatsby-source-filesystem`,
             options: {
@@ -25,7 +26,15 @@ module.exports = {
                 background_color: `#663399`,
                 theme_color: `#663399`,
                 display: `minimal-ui`,
-                icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+                icon: `src/images/common/logo.png`, // This path is relative to the root of the site.
+            },
+        },
+        {
+            resolve: 'gatsby-plugin-react-svg',
+            options: {
+                rule: {
+                    include: /svg/, // See below to configure properly
+                },
             },
         },
         // this (optional) plugin enables Progressive Web App + Offline functionality