Merge pull request #1 from ryanlanciaux/addStorybook

Adds Storybook and initial Toolbar component

Author: ryanlanciaux

.gitignore

@@ -0,0 +1,5 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist

.storybook/main.js

@@ -0,0 +1,24 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.(ts|tsx)'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true,
+          },
+        },
+        {
+          loader: require.resolve('react-docgen-typescript-loader'),
+        },
+      ],
+    });
+
+    config.resolve.extensions.push('.ts', '.tsx');
+
+    return config;
+  },
+};

LICENSE

@@ -0,0 +1,27 @@
+Copyright (c) 2016, nteract contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of nteract nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -1,3 +1,8 @@
 # ui-refresh
 
 This repository is a playground for the React compoennts compromising the new nteract UI. These components will be moved into the monorepo once they are ready for integration into the desktop app.
+
+## Getting started
+
+The main way to interact with this repository is through Storybook[https://storybook.js.org/]. To start Storybook, run `npm run storybook` (or `yarn storybook`). The Component workspace will run by default on port 6006. Storybook should automatically launch, but if it does not, you can view the workspace at http://localhost:6006. This functionality also is under the `start` script, instead of the default build & watch.
+

bundle.css

@@ -0,0 +1,66 @@
+{
+  "version": "0.1.0",
+  "license": "BSD-3-Clause",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "start-storybook -p 6006",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "ui-refres",
+  "author": "nteract contributors",
+  "module": "dist/ui-refres.esm.js",
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-docs": "^5.3.18",
+    "@storybook/addon-info": "^5.3.18",
+    "@storybook/addon-links": "^5.3.18",
+    "@storybook/addons": "^5.3.18",
+    "@storybook/react": "^5.3.18",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.7",
+    "babel-loader": "^8.1.0",
+    "husky": "^4.2.5",
+    "react": "^16.13.1",
+    "react-docgen-typescript-loader": "^3.7.2",
+    "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
+    "ts-loader": "^7.0.2",
+    "tsdx": "^0.13.2",
+    "tslib": "^1.11.1",
+    "typescript": "^3.8.3"
+  },
+  "dependencies": {
+    "@rollup/plugin-image": "^2.0.4",
+    "@types/classnames": "^2.2.10",
+    "classnames": "^2.2.6",
+    "rollup-plugin-css-only": "^2.0.0"
+  }
+}

package.json

@@ -0,0 +1,29 @@
+.toolbar {
+  position: relative;
+  overflow: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: rgba(255,255,255,0);
+  box-sizing: border-box;
+  box-shadow: none;
+  width: 100%;
+  height: 40px;
+  padding: 24px 0;
+
+  transition-property: height background-color box-shadow;
+  transition-duration: 500ms;
+  transition-timing-function: ease;
+}
+
+.toolbar > span {
+  display: flex;
+  justify-content: space-between;
+  width: 600px;
+}
+
+.toolbar.expanded {
+  height: 120px;
+  background-color: #FFF;
+  box-shadow: 0px 2px 8px rgba(41, 49, 58, 0.15);
+}