Setup commit for github

update "yarn build" improve build generation Update Loader component update Loader Test snapshots add layout component (css part) optimize Layout component update icon size update tests Add storybook build/deploy Add Button component with theme management Make SideBar themable and remove semantic ui dependencies Add themable Dropdown component Add Themable Layout Component Add fontawesome icons Add title to navbar Add MergeTheme management upfate fontawesome version Fix SVG Icons import problem when integrating with Apps upgrade fontawesome fix fontawesome import update fontawesome package export Button component add dropdown auto positioning management add @babel/plugin-proposal-class-properties Add button loading state Add Plop to generate component template files gitignore logs Add caret to the dropdown Add checkbox component Add Toggle Component Add Color story
scality · Mar 4, 2019 · 3db6447 · 3db6447
1 parent e10ec7a
commit 3db6447
Show file tree

Hide file tree

Showing 65 changed files with 10,317 additions and 12,221 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,9 @@
+{ 
+    "presets": [
+        "@babel/preset-env", 
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-class-properties",
+        ]
+ }
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,10 @@
 node_modules/
 dist/
+.build-storybook
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1 +1,36 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+<style>
+    html, body {
+        font-family: "Font Awesome 5 Free";
+    }
+    .main {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .storybook-button .sc-button{
+        margin: 10px;
+    }
+
+    .storybook-dropdown .sc-dropdown{
+       margin: 10px; 
+    }
+
+    .card {
+       margin: 15px; 
+       height: 150px;
+       width: 100px;
+       display: flex;
+       flex-direction: column;
+    }
+
+    .card .color {
+        height: 120px;
+        width: 100px;
+    }
+
+    .card .text {
+        font-weight: bold;
+    }
+</style>
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1 @@
+Licensed under the Scality RING license.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Welcom to Scality UI
+# Welcome to Scality UI
 
 This project is a library containing all commun React components, layouts, icons and themes for all Scality UI projects.
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
@@ -13,14 +13,45 @@ Install all project dependencies.
 
 ### `npm test`
 
-Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Launches the test runner in the interactive watch mode. 
+It will generate test snapshots by using Storybook Storyshot add-on.
+You have to run all the tests and update all snapshots before each commit.
 
 ### `npm run build`
 
-Builds the app for production to the `dist` folder.<br>
-In this folder, you will find all components, icons and theme.
+Builds the app for production to the `dist` folder.
+In this folder, you will find all components, icons and themes.
 
-### `npm run storybook`
+### `npm run start`
 
-Launch Storybook display all the components for testing.
+Launch Storybook to test all the components on the `http://localhost:3000`.
+
+
+### `npm run storybook:build`
+
+This will build the storybook configured in the Storybook directory into a static web app and place it inside the `.build-storybook` directory. Then you can deploy the content in the `.build-storybook` directory wherever you want.
+
+For example:
+
+Run the following commands with Python HTTP Server:
+```
+cd .build-storybook
+python -m SimpleHTTPServer
+```
+
+or Node HTTP Server:
+```
+npm install http-server -g
+cd .build-storybook
+http-server
+```
+
+### `npm run plop`
+
+You can use plop when you want to create a new react component. Plop generates component template files.
+```
+✔  ++ /src/lib/components/menuitem/MenuItem.component.js
+✔  ++ /src/lib/components/menuitem/MenuItem.component.test.js
+✔  ++ /src/lib/components/menuitem/__snapshots__/config.js
+✔  ++ /stories/menuitem.js
+```
diff --git a/package.json b/package.json
@@ -1,45 +1,64 @@
 {
   "name": "scality-ui",
   "version": "0.1.0",
+  "description": "Scality commun React component library",
+  "repository": {
+    "type": "git",
+    "url": "git://bitbucket.org/scality/scality-ui.git"
+  },
+  "author": "Scality Engineering",
+  "license": "SEE LICENSE IN LICENSE",
   "main": "dist/index.js",
-  "module": "dist/index.js",
-  "files": ["dist"],
+  "mainSrc": "src/lib/index.js",
+  "resolutions": {
+    "babel-core": "7.0.0-bridge.0"
+  },
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/polyfill": "^7.0.0",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/polyfill": "7.2.5",
+    "@babel/preset-env": "7.2.3",
+    "@babel/preset-react": "7.0.0",
+    "@babel/register": "7.0.0",
+    "@babel/runtime": "7.2.0",
+    "@fortawesome/fontawesome-free": "5.7.2",
     "@storybook/addon-actions": "^4.0.12",
     "@storybook/addon-info": "^4.0.12",
     "@storybook/addon-links": "^4.0.12",
     "@storybook/addon-knobs": "^4.0.12",
     "@storybook/addon-storyshots": "^4.0.12",
     "@storybook/react": "^4.0.12",
-    "babel-cli": "^6.26.0",
+    "babel-core": "7.0.0-beta.3",
     "babel-loader": "8.0.4",
+    "babel-jest": "23.6.0",
+    "babel-plugin-lodash": "3.3.4",
+    "color": "3.1.0",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-15": "^1.2.0",
     "enzyme-adapter-react-16": "^1.7.0",
+    "plop": "^2.2.1",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-scripts": "2.1.3",
     "react-storybook-addon-props-combinations": "^1.1.0",
     "react-test-renderer": "^16.7.0",
-    "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^0.85.0",
+    "rimraf": "^2.6.1",
     "styled-components": "^4.1.2"
   },
+  "peerDependencies": {
+    "@fortawesome/fontawesome-free": "5.7.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
   "scripts": {
     "test": "react-scripts test --env=jsdom",
-    "storybook": "start-storybook -p 6006",
-    "build":
-      "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__"
+    "start": "start-storybook -p 3000",
+    "build": "rimraf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files && rimraf dist/**/*.test.js && rimraf dist/**/__snapshots__",
+    "storybook:build": "build-storybook -c .storybook -o .build-storybook",
+    "plop": "plop"
   },
   "eslintConfig": {
     "extends": "react-app"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
-}
+  }
+}
diff --git a/plop-templates/component.config.hbs b/plop-templates/component.config.hbs
@@ -0,0 +1,7 @@
+import { configure } from "@storybook/react";
+
+function loadStories() {
+  require("../../../../../stories/{{lowerCase name}}");
+}
+
+configure(loadStories, module);
diff --git a/plop-templates/component.hbs b/plop-templates/component.hbs
@@ -0,0 +1,14 @@
+import React from "react";
+import styled from "styled-components";
+
+const {{properCase name}}Container = styled.div``;
+
+function {{properCase name}}(props) {
+  return (
+    <{{properCase name}}Container className="sc-{{lowerCase name}}">
+
+    </{{properCase name}}Container>
+  );
+}
+
+export default {{properCase name}};
diff --git a/plop-templates/component.test.hbs b/plop-templates/component.test.hbs
@@ -0,0 +1,5 @@
+import initStoryshots from "@storybook/addon-storyshots";
+
+initStoryshots({
+  configPath: "src/lib/components/{{lowerCase name}}/__snapshots__"
+});
diff --git a/plop-templates/stories.hbs b/plop-templates/stories.hbs
@@ -0,0 +1,30 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { ThemeProvider } from "styled-components";
+import {{properCase name}} from "../src/lib/components/{{lowerCase name}}/{{properCase name}}.component";
+import { jade } from "../src/lib/style/theme";
+
+storiesOf("{{properCase name}}", module)
+  .add("Default", () => {
+    return (
+      <div>
+          <{{properCase name}} />
+      </div>
+    );
+  })
+  .add("ThemeProvider", () => {
+    const theme = {
+      brand: {
+        primary: jade
+      }
+    };
+    return (
+      <div>
+        <ThemeProvider theme={theme}>
+            <div>
+                <{{properCase name}} />
+            </div>
+        </ThemeProvider>
+      </div>
+    );
+  });
diff --git a/plopfile.js b/plopfile.js
@@ -0,0 +1,43 @@
+module.exports = function(plop) {
+  plop.addHelper("lowerCase", text => text.toLowerCase());
+  plop.addHelper("properCase", text =>
+    text.replace(/\w\S*/g, function(txt) {
+      return txt.charAt(0).toUpperCase() + txt.substr(1);
+    })
+  );
+
+  plop.setGenerator("component", {
+    description: "Add a react component",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "Component name please (ex: layout, breadcrumbs, menuItem)!"
+      }
+    ],
+    actions: [
+      {
+        type: "add",
+        path:
+          "src/lib/components/{{lowerCase name}}/{{properCase name}}.component.js",
+        templateFile: "plop-templates/component.hbs"
+      },
+      {
+        type: "add",
+        path:
+          "src/lib/components/{{lowerCase name}}/{{properCase name}}.component.test.js",
+        templateFile: "plop-templates/component.test.hbs"
+      },
+      {
+        type: "add",
+        path: "src/lib/components/{{lowerCase name}}/__snapshots__/config.js",
+        templateFile: "plop-templates/component.config.hbs"
+      },
+      {
+        type: "add",
+        path: "stories/{{lowerCase name}}.js",
+        templateFile: "plop-templates/stories.hbs"
+      }
+    ]
+  });
+};
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
diff --git a/public/manifest.json b/public/manifest.json