From d1f1f876bc6f15387bbfbb26e9b4bb1875bb3e07 Mon Sep 17 00:00:00 2001 From: Christian Kienle Date: Mon, 10 Dec 2018 17:13:34 +0100 Subject: [PATCH] removes dependencies and integrates fundamentals via npm --- .env | 3 + CONTRIBUTING.md | 8 +- README.md | 11 ++- package-lock.json | 11 ++- package.json | 13 +-- public/index.html | 5 +- src/components/index.ts | 4 +- src/config.ts | 9 +++ .../ComponentExample/ComponentExample.tsx | 3 +- src/docs/components/index.ts | 1 - src/docs/layouts/DefaultLayout.tsx | 4 +- src/docs/main.scss | 5 ++ src/docs/main.ts | 2 +- src/docs/static-pages/start.md | 79 +++++++++++++++++-- 14 files changed, 118 insertions(+), 40 deletions(-) create mode 100644 .env create mode 100644 src/config.ts create mode 100644 src/docs/main.scss diff --git a/.env b/.env new file mode 100644 index 00000000..4288b7b1 --- /dev/null +++ b/.env @@ -0,0 +1,3 @@ +VUE_APP_FD_VUE_DEV_TOOLS=disabled +VUE_APP_FD_NAME=Fundamental Vue +VUE_APP_VERSION=0.0.1-beta \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c4fc079d..2ea877da 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,4 @@ -# Contributing to Fundamental-vue +# Contributing to Fundamental Vue We're excited that you're interested in contributing to Fundamental-vue! Your contribution can make this library even better. Please read the guidelines regarding contributions: @@ -56,7 +56,7 @@ Status of closed issues: ## Contribute Code -You are welcome to contribute code to Fundamental-vue in order to fix issues or to add new features. +You are welcome to contribute code to Fundamental Vue in order to fix issues or to add new features. There are three important things to consider: @@ -93,12 +93,12 @@ You must follow the coding style as best you can when submitting code. Take note ### How to contribute - the Process 1. Make sure the issue you've filed in the [issue tracker] has the label "contribution welcome" - otherwise, it is not ready to be worked on. -2. Fork the Fundamental-vue repository to your GitHub account. +2. Fork the Fundamental Vue repository to your GitHub account. 3. Create a branch for your issue or feature, and commit or push your changes on that branch. 4. Create a Pull Request from your forked repository to github.com/SAP/fundamental-vue. In the subject of the pull request, briefly describe the bug fix or enhancement you're contributing. In the pull request description, please provide a link to the issue in the issue tracker. 5. Follow the link posted by the CLA assistant to your pull request and accept it, as described above. 6. Wait for our code review and approval. We may ask you for additional commits, or make changes to your pull request ourselves. - - Note that the Fundamental-vue developers also have their regular duties so, depending on the required effort for reviewing, testing, and clarification, this may take a while. + - Note that the Fundamental Vue developers also have their regular duties so, depending on the required effort for reviewing, testing, and clarification, this may take a while. 7. Once the change has been approved, we inform you in a comment. 8. Your pull request cannot be merged directly into the branch (internal SAP processes), but is merged internally and immediately appears in the public repository as well. 9. We close the pull request. You can then delete the now obsolete branch. diff --git a/README.md b/README.md index 2e84938b..2cceb450 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# fundamental-vue +# Fundamental Vue Vue.JS components for [SAP Fiori Fundamentals](https://github.com/SAP/fundamental) - [Playground](https://dist-gjxmmg5hv.now.sh) @@ -28,7 +28,7 @@ $ npm pack ## Install To download and use this library, you first need to install the node package manager - [npm](https://www.npmjs.com/get-npm). - + 1. Install Fundamental Vue ``` $ npm install --save fundamental-vue @@ -45,7 +45,7 @@ Vue.use(FundamentalVue); // ... ``` -Fundamental Vue does not include the ['Fiori Fundamentals' library](https://github.com/SAP/fundamental) which is required for styling. +Fundamental Vue does not include the ['Fiori Fundamentals' library](https://github.com/SAP/fundamental) which is required for styling. 2. Install Fiori Fundamentals @@ -68,9 +68,9 @@ The following assumes the usage of a module bundler such as [webpack](https://we $ npm install sass-loader node-sass --save-dev ``` -Loading the SCSS and running your project at this point will result in errors relating to the path configuration for icons and fonts. This is a [known issue](https://github.com/SAP/fundamental#known-issues). +Loading the SCSS and running your project at this point will result in errors relating to the path configuration for icons and fonts. This is a [known issue](https://github.com/SAP/fundamental#known-issues). -To rectify this, start by creating a new directory ('scss') in your project's `src`. Within this directory, create a main SCSS file ('main.scss') from which to manage your imports, configurations and customisations. +To rectify this, start by creating a new directory ('scss') in your project's `src`. Within this directory, create a main SCSS file ('main.scss') from which to manage your imports, configurations and customisations. Add the following to the main SCSS file: ``` @@ -114,7 +114,6 @@ If you encounter an issue, you can [create a ticket](https://github.com/SAP/fund ## Contributing -If you want to contribute, please check the [CONTRIBUTING.md](./CONTRIBUTING.md) documentation for contribution guidelines. ## License diff --git a/package-lock.json b/package-lock.json index a7b62952..a4fc59e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4985,6 +4985,11 @@ "locate-path": "^2.0.0" } }, + "fiori-fundamentals": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/fiori-fundamentals/-/fiori-fundamentals-1.4.0.tgz", + "integrity": "sha512-cLg0frknpwQsRpEsNA7g+Vo1mRjN+80P3Acvs/HnQ9FwCQV8PUOvSaD5evN8HwZr8YwTI116fJ8GX93SDvp+oA==" + }, "flatten": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz", @@ -13936,9 +13941,9 @@ "dev": true }, "typescript": { - "version": "3.3.0-dev.20181122", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.0-dev.20181122.tgz", - "integrity": "sha512-tYYZPLAMfweT/HN+0MsTLZ2Poqq6LoccRzzyvTMkruRRXpxooqo91g9C9yhTD1eFf8hTsiy6j7HJzkrSTflr1A==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.2.tgz", + "integrity": "sha512-VCj5UiSyHBjwfYacmDuc/NOk4QQixbE+Wn7MFJuS0nRuPQbof132Pw4u53dm264O8LPc2MVsc7RJNml5szurkg==", "dev": true }, "uglify-js": { diff --git a/package.json b/package.json index 4b3c2282..a53914b8 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "fundamental-vue", "version": "0.0.1-beta", "private": true, - "homepage": "https://github.wdf.sap.corp/hybris-pd/fundamental-vue", + "homepage": "https://github.com/SAP/fundamental-vue", "scripts": { "serve:docs": "vue-cli-service serve src/docs/main.ts", "serve": "vue-cli-service serve", @@ -15,15 +15,13 @@ }, "main": "dist/fundamentalvue.umd.js", "dependencies": { + "fiori-fundamentals": "^1.4.0", "vue": "^2.5.17", "vue-class-component": "^6.3.2", "vue-property-decorator": "^7.2.0", "vue-router": "^3.0.1" }, "devDependencies": { - "vuex": "^3.0.1", - "markdown-loader": "^4.0.0", - "highlight.js": "^9.13.1", "@babel/plugin-proposal-class-properties": "^7.1.0", "@babel/plugin-proposal-object-rest-spread": "^7.0.0", "@babel/preset-env": "^7.1.6", @@ -35,15 +33,18 @@ "@vue/cli-service": "^3.1.4", "@vue/test-utils": "^1.0.0-beta.25", "babel-core": "7.0.0-bridge.0", + "highlight.js": "^9.13.1", "html-loader": "^1.0.0-alpha.0", + "markdown-loader": "^4.0.0", "node-sass": "^4.11.0", "raw-loader": "^1.0.0-beta.0", "sass-loader": "^7.1.0", "ts-jest": "^23.10.5", "tslint": "^5.11.0", "tslint-react": "^3.6.0", - "typescript": "^3.3.0-dev.20181122", + "typescript": "^3.1.0", "vue-gh-pages": "^1.19.0", - "vue-template-compiler": "^2.5.17" + "vue-template-compiler": "^2.5.17", + "vuex": "^3.0.1" } } diff --git a/public/index.html b/public/index.html index 99805b38..0eaecdc9 100644 --- a/public/index.html +++ b/public/index.html @@ -6,10 +6,7 @@ - fundamental-vue - - - + Fundamental Vue diff --git a/src/components/index.ts b/src/components/index.ts index 34d99652..370dbdc2 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -59,6 +59,7 @@ import * as Layout from './Layout'; import * as Tile from './Tile'; import * as TileGrid from './TileGrid'; import * as SearchInput from './SearchInput'; +import { version, libName } from '@/config'; export const all = { Token, @@ -99,9 +100,8 @@ const $plugin: Plugin = () => { const comp = all[name]; api.registerComponent(vue, comp, name); } - const version = '0.0.1'; console.log( - `%c Welcome to fundamental-vue %c Detected v${version} %c`, + `%c Welcome to ${libName} %c Detected v${version} %c`, 'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px; color: #fff', 'background:#1661be ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff', 'background:transparent', diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 00000000..fe3cf74f --- /dev/null +++ b/src/config.ts @@ -0,0 +1,9 @@ +const { + VUE_APP_FD_VUE_DEV_TOOLS, + VUE_APP_FD_NAME, + VUE_APP_VERSION, +} = process.env; + +export const devToolsEnabled = VUE_APP_FD_VUE_DEV_TOOLS === 'enabled'; +export const libName = (VUE_APP_FD_NAME as string) || ''; +export const version = VUE_APP_VERSION as string; diff --git a/src/docs/components/ComponentExample/ComponentExample.tsx b/src/docs/components/ComponentExample/ComponentExample.tsx index 582f8a5d..1a035e0b 100644 --- a/src/docs/components/ComponentExample/ComponentExample.tsx +++ b/src/docs/components/ComponentExample/ComponentExample.tsx @@ -59,7 +59,6 @@ export class ComponentExample extends TsxComponent { private codeShown = false; public render() { const buttonTitle = this.codeShown ? 'Hide Code' : 'Show Code'; - const iconClass = this.codeShown ? 'fas fa-caret-up' : 'fas fa-caret-down'; const renderCodeIfNeeded = () => { const backgroundColor = 'rgb(250, 250, 250) !important'; const style = { @@ -141,7 +140,7 @@ export class ComponentExample extends TsxComponent { on-click={event => this.toggleCode(event)} > - + {buttonTitle} diff --git a/src/docs/components/index.ts b/src/docs/components/index.ts index 8a54aa01..a6963b7e 100644 --- a/src/docs/components/index.ts +++ b/src/docs/components/index.ts @@ -21,7 +21,6 @@ export const registerComponents = (vue: VueConstructor) => { all.forEach(component => { // @ts-ignore const name = component.options.name; - console.info('Register Docs Component: %s', name); vue.component(name, component); }); }; diff --git a/src/docs/layouts/DefaultLayout.tsx b/src/docs/layouts/DefaultLayout.tsx index 74cf0192..89107770 100644 --- a/src/docs/layouts/DefaultLayout.tsx +++ b/src/docs/layouts/DefaultLayout.tsx @@ -102,8 +102,6 @@ export class DefaultLayout extends Vue { return collections.map(renderExampleCollection); }; - // @ts-ignore - const VueDevToolsEnabled = this.$$VueDevToolsEnabled || false; const renderSideNav = () => { return ( - Fundamental-Vue + Fundamental Vue diff --git a/src/docs/main.scss b/src/docs/main.scss new file mode 100644 index 00000000..f80df9b9 --- /dev/null +++ b/src/docs/main.scss @@ -0,0 +1,5 @@ +$fd-icons-path : "../../node_modules/fiori-fundamentals/scss/icons/"; // should be declared before the scss import + +$fd-scss-font-path : "../../node_modules/fiori-fundamentals/scss/fonts/"; + +@import "../../node_modules/fiori-fundamentals/scss/all.scss"; diff --git a/src/docs/main.ts b/src/docs/main.ts index a04bb600..fb62b269 100644 --- a/src/docs/main.ts +++ b/src/docs/main.ts @@ -1,4 +1,5 @@ import './class-component-hooks'; +import './main.scss'; import Vue from 'vue'; Vue.config.productionTip = false; import FundamentalVue from '@/index'; @@ -23,7 +24,6 @@ Vue.use(Router); // Create Store + misc const store = new Vuex.Store({}); registerComponents(Vue); -Vue.prototype.$$VueDevToolsEnabled = process.env.VUE_APP_FD_VUE_DEV_TOOLS === 'enabled'; new Vue({ components: { App }, diff --git a/src/docs/static-pages/start.md b/src/docs/static-pages/start.md index a9a884b6..1ffd3a46 100644 --- a/src/docs/static-pages/start.md +++ b/src/docs/static-pages/start.md @@ -1,16 +1,79 @@ # Introduction -> SAP Fundamental-Vue is a UI framework based on [SAP Fiori Fundamentals](https://sap.github.io/fundamental/) and [Vue.js](htts://vuejs.org). +> SAP Fundamental Vue is a UI framework based on [SAP Fiori Fundamentals](https://sap.github.io/fundamental/) and [Vue.js](htts://vuejs.org). ## Installation -There are two ways to install SAP Fundamental-Vue. +Install Fundamental Vue via **NPM**: -### Via **NPM** -_todo_ +```bash +npm install --save fundamental-vue +``` -### Via **unpkg** -_todo_ +## Usage -## Changelog +After installing, you will need to import `fundamental-vue` and make it available to your Vue application. These instructions assume the usage of Vue CLI to scaffold your project. -* Nothing has changed - yet. \ No newline at end of file +In your project's `main.js`: + +``` +// ... +import FundamentalVue from 'fundamental-vue'; +Vue.use(FundamentalVue); +// ... +``` + +Fundamental Vue does not include the ['Fiori Fundamentals' library](https://github.com/SAP/fundamental) which is required for styling. + +## Install Fiori Fundamentals +The quickest way to get Fiori Fundamentals styling for your components is to include the compiled and minified Fiori Fundamentals CSS library with the following CDN link in your public `index.html` file: +``` + +``` + +However, installing the Fiori Fundamentals library with npm (recommended) will give you the flexibility to use individual components and enable [advanced customisation options](https://github.com/SAP/fundamental/wiki/Advanced-Customization). In this case, you do not need the CDN link as this method uses the SASS/SCSS source. + +To install the Fiori Fundamentals SASS/SCSS source: +``` +$ npm install --save fiori-fundamentals +``` + +The following assumes the usage of a module bundler such as [webpack](https://webpack.js.org/). To compile Fiori Fundamentals SASS/SCSS to CSS, two additional packages are required for your bundling process - [sass-loader](https://github.com/webpack-contrib/sass-loader) and [node-sass](https://github.com/sass/node-sass). To install these packages as development dependencies: + +``` +$ npm install sass-loader node-sass --save-dev +``` + +Loading the SCSS and running your project at this point will result in errors relating to the path configuration for icons and fonts. This is a [known issue](https://github.com/SAP/fundamental#known-issues). + +To rectify this, start by creating a new directory ('scss') in your project's `src`. Within this directory, create a main SCSS file ('main.scss') from which to manage your imports, configurations and customisations. + +Add the following to the main SCSS file: +``` +$fd-icons-path : "../node_modules/fiori-fundamentals/scss/icons/"; // should be declared before the scss import + +$fd-scss-font-path : "../node_modules/fiori-fundamentals/scss/fonts/"; + +@import "../node_modules/fiori-fundamentals/scss/all.scss"; +``` + +Import the main SCSS file in your `App.js` style block to add Fiori Fundamentals styles to your project. + +``` + +``` + +You can now use the [Playground](https://dist-4d2gqwr8y.now.sh/#/start) to browse the components currently available with Fundamental Vue. + +To use a Fundamental Vue component, paste the desired code snippet from the Playground and configure it as necessarry: + +``` +... + + Happy building! 🚀 + +... +```