starting blog models

.gitignore

@@ -7,6 +7,7 @@
 
 # Environment
 .env
+.coveralls.yml
 
 # testing
 /coverage

.prettierrc

@@ -4,5 +4,8 @@
     "tabWidth": 2,
     "useTabs": false,
     "jsxBracketSameLine": false,
-    "singleQuote": true
+    "singleQuote": true,
+    "trailingComma": "all",
+    "arrowParens": "always",
+    "printWidth": 100
 }

.storybook/addons.js

@@ -0,0 +1,8 @@
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-viewport/register';
+import '@storybook/addon-backgrounds/register';
+import '@storybook/addon-actions/register';
+import 'storybook-addon-themes/register';

.storybook/config.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { configure, addDecorator, addParameters } from '@storybook/react';
+import { withThemes } from 'storybook-addon-themes';
+import { withKnobs } from '@storybook/addon-knobs';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import theme from './theme';
+
+addDecorator((storyFn) => <div style={{ textAlign: 'center' }}>{storyFn()}</div>);
+addDecorator(withThemes);
+addDecorator(withKnobs);
+
+addParameters({
+  themes: [
+    { name: 'twitter', class: 'theme-twt', color: '#00aced', default: true },
+    { name: 'facebook', class: 'theme-fb', color: '#3b5998' },
+  ],
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+  },
+});
+
+configure(require.context('../src', true, /\.stories\.js$/), module);

.storybook/theme.js

@@ -0,0 +1,37 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'dark',
+
+  colorPrimary: 'hotpink',
+  colorSecondary: 'deepskyblue',
+
+  // UI
+  appBg: 'black',
+  appContentBg: 'silver',
+  appBorderColor: 'teal',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: 'white',
+  textInverseColor: 'rgba(30,30,30,0.9)',
+
+  // Toolbar default and active colors
+  barTextColor: 'silver',
+  barSelectedColor: 'black',
+  barBg: 'hotpink',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: 'silver',
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+
+  brandTitle: 'My custom storybook',
+  brandUrl: 'https://example.com',
+  brandImage: 'https://placehold.it/350x150',
+});

.storybook/webpack.config.js

@@ -0,0 +1,25 @@
+module.exports = function({ config }) {
+  config.module.rules.push({
+    test: /\.stories\.jsx?$/,
+    loaders: [
+      {
+        loader: require.resolve('@storybook/source-loader'),
+        options: {
+          prettierConfig: {
+            printWidth: 100,
+            semi: true,
+            tabWidth: 2,
+            useTabs: false,
+            jsxBracketSameLine: false,
+            singleQuote: true,
+            trailingComma: 'all',
+            arrowParens: 'always',
+          },
+        },
+      },
+    ],
+    enforce: 'pre',
+  });
+
+  return config;
+};

.vscode/launch.json

@@ -0,0 +1,19 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+          "name": "Debug CRA Tests",
+          "type": "node",
+          "request": "launch",
+          "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
+          "args": ["test", "--runInBand", "--no-cache", "--env=jsdom"],
+          "cwd": "${workspaceRoot}",
+          "protocol": "inspector",
+          "console": "integratedTerminal",
+          "internalConsoleOptions": "neverOpen"
+        }
+      ]
+}

jsconfig.json

@@ -0,0 +1,10 @@
+{
+    "typeAcquisition": {
+        "include": [
+            "jest"
+        ]
+    },
+    "compilerOptions": {
+
+    }
+}

package.json

@@ -4,10 +4,12 @@
   "private": true,
   "dependencies": {
     "chalk": "^2.4.2",
+    "date-fns": "^2.5.1",
     "lodash": "^4.17.15",
     "mobx": "^5.14.2",
     "mobx-react-lite": "^1.5.0",
     "mobx-state-tree": "^3.14.1",
+    "prop-types": "^15.7.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-scripts": "3.2.0",
@@ -18,7 +20,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "coveralls": "cat ./coverage/lcov.info | node node_modules/.bin/coveralls"
+    "coveralls": "cat ./coverage/lcov.info | node node_modules/.bin/coveralls",
+    "storybook": "start-storybook"
   },
   "eslintConfig": {
     "extends": [
@@ -34,7 +37,11 @@
     }
   },
   "lint-staged": {
-    "*.{js,jsx}": ["eslint --fix", "prettier --write", "git add"]
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "prettier --write",
+      "git add"
+    ]
   },
   "browserslist": {
     "production": [
@@ -49,10 +56,29 @@
     ]
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.2.4",
+    "@storybook/addon-backgrounds": "^5.2.4",
+    "@storybook/addon-console": "^1.2.1",
+    "@storybook/addon-info": "^5.2.4",
+    "@storybook/addon-knobs": "^5.2.4",
+    "@storybook/addon-links": "^5.2.4",
+    "@storybook/addon-notes": "^5.2.4",
+    "@storybook/addon-storysource": "^5.2.4",
+    "@storybook/addon-viewport": "^5.2.4",
+    "@storybook/addons": "^5.2.4",
+    "@storybook/react": "^5.2.4",
+    "@storybook/theming": "^5.2.4",
+    "@testing-library/jest-dom": "^4.1.2",
+    "@testing-library/react": "^9.3.0",
+    "@types/jest": "^24.0.19",
     "coveralls": "^3.0.7",
     "danger": "^9.2.2",
     "husky": "^3.0.9",
+    "jest-chain": "^1.1.2",
+    "jest-extended": "^0.11.2",
     "lint-staged": "^9.4.2",
-    "prettier": "^1.18.2"
+    "prettier": "^1.18.2",
+    "prettier-plugin-packagejson": "^2.0.1",
+    "storybook-addon-themes": "^5.2.0"
   }
 }