diff --git a/.eslintrc.js b/.eslintrc.js index e097a65..2dd634e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,11 +3,12 @@ module.exports = { env: { node: true }, - extends: ['plugin:vue/essential', '@vue/standard'], + extends: ['plugin:vue/essential', '@vue/standard', 'prettier', 'prettier/vue', 'plugin:prettier/recommended'], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' }, + plugins: ['prettier'], parserOptions: { parser: 'babel-eslint' } diff --git a/.gitignore b/.gitignore index 185e663..64b725c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ .DS_Store node_modules /dist +/build # local env files .env.local diff --git a/.node-version b/.node-version new file mode 100644 index 0000000..8351c19 --- /dev/null +++ b/.node-version @@ -0,0 +1 @@ +14 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..67eda0d --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +src/components/docs/*.vue diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..9f879c8 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "printWidth": 140, + "semi": false, + "singleQuote": true, + "trailingComma": "none" +} diff --git a/README.md b/README.md index 84f6f97..7c1a05c 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,25 @@ # cube-scss-components -## Why +## Key features + +- Dart Sass +- Mobile first +- Modern +- Fluid +- Responsive +- Composable +- Best practices +- Clean +- Functional +- Import what you need -Because at Cube we manage several web apps and we worry about UI consistency, this project aims to provide basic SCSS components, tailored for SPA and mobile environment. +## Why -And because we know you'll customize any CSS framework you use, we strive to keep it as simple and basic as possible. +Because at Cube we manage many web apps and we worry about consistency, this project aims to provide basic SCSS scaffoldings and components, tailored for SPA and mobile web projects. -## Documentation +## Demo -See the [Documentation Reference](https://cube-scss-components.netlify.com). +See the [demo](https://cube-scss-components.netlify.com). ## Installation @@ -18,28 +29,16 @@ yarn add cube-scss-components ## Getting Started -Usually you import SCSS components you need and you customize variables to match with your visual identity. There is several ways to do so ; here is one way to make it described below. +Here is one way to get started with Cube SCSS Components. -From your global `index.scss`: +From your main `index.scss` file: ```scss -// Imports your custom "_variables.scss", overrides !defaults -@import "variables"; - -// Imports the components you need -@import "node_modules/cube-scss-components/src/scss/scaffoldings"; -@import "node_modules/cube-scss-components/src/scss/badge"; -@import "node_modules/cube-scss-components/src/scss/bullets"; -@import "node_modules/cube-scss-components/src/scss/buttons"; -@import "node_modules/cube-scss-components/src/scss/buttons_variants"; -@import "node_modules/cube-scss-components/src/scss/cards"; -@import "node_modules/cube-scss-components/src/scss/forms"; -@import "node_modules/cube-scss-components/src/scss/labels"; -@import "node_modules/cube-scss-components/src/scss/list_group"; -@import "node_modules/cube-scss-components/src/scss/pagination"; -@import "node_modules/cube-scss-components/src/scss/slider"; -@import "node_modules/cube-scss-components/src/scss/tables"; -@import "node_modules/cube-scss-components/src/scss/types"; +// Imports your custom "_variables.scss" and overrides !defaults +@import 'variables'; + +// Imports Cube SCSS Components +@import 'node_modules/cube-scss-components/src/scss'; // Your other imports here… ``` @@ -47,15 +46,50 @@ From your global `index.scss`: Your `_variables.scss` file may looks like: ```scss +// Loads the "disabled" preset (all components disabled by default), otherwise all components will be written down on your SCSS +@import 'node_modules/cube-scss-components/src/scss/disabled'; + +// Then, enable the components you need +$badge-enabled: true; +$bullet-enabled: true; +$button-enabled: true; +$button-size-enabled: true; +$button-text-enabled: true; +$button-outline-enabled: true; +$button-filled-enabled: true; +$button-shadow-enabled: true; +$button-secondary-enabled: true; +$button-success-enabled: true; +$button-info-enabled: true; +$button-warning-enabled: true; +$button-danger-enabled: true; +$button-white-enabled: true; +$card-enabled: true; +$color-enabled: true; +$dark-color-scheme-enabled: true; +$prefers-color-scheme-enabled: true; +$form-enabled: true; +$label-enabled: true; +$layout-enabled: true; +$list-group-enabled: true; +$pagination-enabled: true; +$table-enabled: true; +$type-enabled: true; +$type-responsive-fonts-enabled: true; + +/// +/// Override defaults +/// + // Colors -$gray-700: hsl(210, 10%, 30%); -$brand-primary: #8d1760; -$brand-secondary: #ffa7e7; +$gray-700: hsl(210, 10%, 30%); +$primary: #8d1760; +$secondary: #ffa7e7; // Text $text-color: #54424a; $link-color: #00c9b1; -$text-muted: lighten($text-color, 30%); +$muted: lighten($text-color, 30%); // Fonts $font-weight-base: 400; @@ -64,12 +98,13 @@ $font-size-small: 85%; $line-height-base: 1.5; // Buttons -$button-primary-color: $brand-primary; +$button-primary-color: $primary; // Component commons $component-border-radius: 4px; $component-box-shadow: 0px 3px 16px -2px $gray-700; -// Imports other cube-scss-components variables -@import "node_modules/cube-scss-components/src/scss/_variables.scss"; +// Imports other cube-scss-components variables. +// Should be imported at the end of your own custom variables because of variables dependencies +@import 'node_modules/cube-scss-components/src/scss/_variables.scss'; ``` diff --git a/jest.config.js b/jest.config.js index 40186da..e92f8d2 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,10 +1,5 @@ module.exports = { - moduleFileExtensions: [ - 'js', - 'jsx', - 'json', - 'vue' - ], + moduleFileExtensions: ['js', 'jsx', 'json', 'vue'], transform: { '^.+\\.vue$': 'vue-jest', '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', @@ -13,10 +8,6 @@ module.exports = { moduleNameMapper: { '^@/(.*)$': '/src/$1' }, - snapshotSerializers: [ - 'jest-serializer-vue' - ], - testMatch: [ - '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' - ] + snapshotSerializers: ['jest-serializer-vue'], + testMatch: ['**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'] } diff --git a/package.json b/package.json index a51ace4..3350e22 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cube-scss-components", - "version": "1.3.4", + "version": "2.0.0-beta.7", "description": "Basic SCSS components of Cube web apps", "author": "Fred Gomez ", "license": "MIT", @@ -15,10 +15,14 @@ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", + "build:css": "sass src/scss/index.scss build/index.css --style=compressed", + "build:css:dev": "sass src/scss/index.scss build/index.css", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit" }, "files": [ + "*.md", + "src/scss/**/*.md", "src/scss/**/*.scss" ], "dependencies": {}, @@ -33,8 +37,11 @@ "babel-eslint": "^10.0.1", "babel-jest": "^23.6.0", "eslint": "^5.8.0", + "eslint-config-prettier": "^6.11.0", + "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-vue": "^5.0.0", - "node-sass": "^4.9.0", + "prettier": "^2.0.5", + "sass": "^1.26.3", "sass-loader": "^7.1.0", "v-clipboard": "^2.2.1", "vue": "^2.6.6", diff --git a/public/images/arrow-up-to-line.svg b/public/images/arrow-up-to-line.svg new file mode 100644 index 0000000..6e91f6d --- /dev/null +++ b/public/images/arrow-up-to-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 47bbe51..52ada57 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ - + cube-scss-components diff --git a/src/App.vue b/src/App.vue index ea3a6e5..95d3461 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,7 @@ + + diff --git a/src/components.js b/src/components.js index b2b3352..1118961 100644 --- a/src/components.js +++ b/src/components.js @@ -1,5 +1,31 @@ import Vue from 'vue' -import Example from './components/Example.vue' +import Example from './components/AppExample.vue' +import ArrowUpToLine from './components/icons/ArrowUpToLine.vue' +import ChevronRight from './components/icons/ChevronRight.vue' +import ChevronLeftSlashChevronRight from './components/icons/ChevronLeftSlashChevronRight.vue' +import CircleRighthalfFill from './components/icons/CircleRighthalfFill.vue' +import DocOnClipboard from './components/icons/DocOnClipboard.vue' +import Minus from './components/icons/Minus.vue' +import MoonFill from './components/icons/MoonFill.vue' +import PersonCropSquare from './components/icons/PersonCropSquare.vue' +import Plus from './components/icons/Plus.vue' +import SunMax from './components/icons/SunMax.vue' +import Star from './components/icons/Star.vue' +import StarFill from './components/icons/StarFill.vue' +import StarLefthalfFill from './components/icons/StarLefthalfFill.vue' Vue.component(Example.name, Example) +Vue.component('ArrowUpToLine', ArrowUpToLine) +Vue.component('ChevronRight', ChevronRight) +Vue.component('ChevronLeftSlashChevronRight', ChevronLeftSlashChevronRight) +Vue.component('CircleRighthalfFill', CircleRighthalfFill) +Vue.component('DocOnClipboard', DocOnClipboard) +Vue.component('Minus', Minus) +Vue.component('MoonFill', MoonFill) +Vue.component('PersonCropSquare', PersonCropSquare) +Vue.component('Plus', Plus) +Vue.component('SunMax', SunMax) +Vue.component('Star', Star) +Vue.component('StarFill', StarFill) +Vue.component('StarLefthalfFill', StarLefthalfFill) diff --git a/src/components/AppDocumentation.vue b/src/components/AppDocumentation.vue new file mode 100644 index 0000000..ade1b18 --- /dev/null +++ b/src/components/AppDocumentation.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/src/components/AppExample.vue b/src/components/AppExample.vue new file mode 100644 index 0000000..46e0e81 --- /dev/null +++ b/src/components/AppExample.vue @@ -0,0 +1,196 @@ + + + + + diff --git a/src/components/AppMenu.vue b/src/components/AppMenu.vue new file mode 100644 index 0000000..1715cbf --- /dev/null +++ b/src/components/AppMenu.vue @@ -0,0 +1,98 @@ + + + + + diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue new file mode 100644 index 0000000..c15be5b --- /dev/null +++ b/src/components/AppNav.vue @@ -0,0 +1,34 @@ + + + diff --git a/src/components/Buttons.vue b/src/components/Buttons.vue deleted file mode 100644 index eac68aa..0000000 --- a/src/components/Buttons.vue +++ /dev/null @@ -1,242 +0,0 @@ - - - diff --git a/src/components/Documentation.vue b/src/components/Documentation.vue deleted file mode 100644 index 6e8d60d..0000000 --- a/src/components/Documentation.vue +++ /dev/null @@ -1,99 +0,0 @@ - - - - - diff --git a/src/components/Example.vue b/src/components/Example.vue deleted file mode 100644 index 233af8a..0000000 --- a/src/components/Example.vue +++ /dev/null @@ -1,154 +0,0 @@ - - - - - diff --git a/src/components/RatingStar.vue b/src/components/RatingStar.vue new file mode 100644 index 0000000..8e2b306 --- /dev/null +++ b/src/components/RatingStar.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/src/components/Types.vue b/src/components/Types.vue deleted file mode 100644 index 3d308fe..0000000 --- a/src/components/Types.vue +++ /dev/null @@ -1,67 +0,0 @@ - diff --git a/src/components/Badges.vue b/src/components/docs/Badges.vue similarity index 91% rename from src/components/Badges.vue rename to src/components/docs/Badges.vue index 3b045b1..82f3eca 100644 --- a/src/components/Badges.vue +++ b/src/components/docs/Badges.vue @@ -1,6 +1,5 @@