diff --git a/.babelrc b/.babelrc index cb456f1ef..fdc09d9fa 100644 --- a/.babelrc +++ b/.babelrc @@ -8,7 +8,7 @@ "test": { "presets": [ [ - "babel-preset-env", + "@babel/preset-env", { "targets": { "node": "current" diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 000000000..214388fe4 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,3 @@ +> 1% +last 2 versions +not dead diff --git a/.circleci/config.yml b/.circleci/config.yml index c7cf2b8eb..91b7962e1 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,12 +1,36 @@ version: 2 jobs: - build: + lint: docker: - - image: circleci/node:dubnium + - image: circleci/node:lts steps: - checkout + - restore_cache: + key: dependency-cache-{{ checksum "package.json" }} - run: yarn + - save_cache: + key: dependency-cache-{{ checksum "package.json" }} + paths: + - node_modules - run: yarn eslint - run: yarn stylelint + test: + docker: + - image: circleci/node:lts + steps: + - checkout + - restore_cache: + key: dependency-cache-{{ checksum "package.json" }} + - run: yarn + - save_cache: + key: dependency-cache-{{ checksum "package.json" }} + paths: + - node_modules - run: yarn test - - run: yarn codecov + +workflows: + version: 2 + lint-and-test: + jobs: + - lint + - test diff --git a/.eslintignore b/.eslintignore index 212d41268..5a35b1183 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,4 @@ node_modules /index.js -!/.storybook +.storybook/* src/atoms/icon/templates/* diff --git a/.gitignore b/.gitignore index 9b3c055ba..10eb1094e 100644 --- a/.gitignore +++ b/.gitignore @@ -77,3 +77,5 @@ typings/ # Project /index.js +/default.config.js +dist/ diff --git a/.node-version b/.node-version index 6695c0939..21cce914a 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ ->=10.0.0 <=11.1.0 +>=12.13.0 <13.0.0 diff --git a/.storybook/addons.js b/.storybook/addons.js deleted file mode 100644 index 1c64cfbff..000000000 --- a/.storybook/addons.js +++ /dev/null @@ -1,7 +0,0 @@ -import 'storybook-addon-vue-info/lib/register' -import '@storybook/addon-knobs/register' -import '@storybook/addon-actions/register' -import '@storybook/addon-a11y/register' -import '@storybook/addon-storysource/register' -import '@storybook/addon-notes/register' -import '@storybook/addon-viewport/register' diff --git a/.storybook/config.js b/.storybook/config.js deleted file mode 100644 index 61d945c20..000000000 --- a/.storybook/config.js +++ /dev/null @@ -1,45 +0,0 @@ -// Storybook -import { configure, addDecorator, addParameters } from '@storybook/vue' - -// Polyfills -import 'focus-visible' -import 'svgxuse' - -// Addons -import { withInfo } from 'storybook-addon-vue-info' -import { withA11y } from '@storybook/addon-a11y' -import { withKnobs } from '@storybook/addon-knobs' - -// Wrap every story in Alpaca App component -import AApp from '../src/templates/app/App.vue' - -addDecorator(withInfo) -addDecorator(withA11y) -addDecorator(withKnobs) -addDecorator(() => ({ - components: { - AApp - }, - template: ` - - - - ` -})) - -addParameters({ - options: { - theme: { - brandTitle: 'Alpaca UI', - brandImage: 'assets/icons/alpaca.svg', - brandUrl: 'https://github.com/SnowdogApps/alpaca-ui' - } - } -}) - -function loadStories () { - const req = require.context('../src', true, /.stories.js$/) - req.keys().forEach(filename => req(filename)) -} - -configure(loadStories, module) diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 000000000..20c5c0879 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,16 @@ +module.exports = { + stories: ['../src/**/*.stories.@(js|mdx)'], + addons: [ + '@storybook/addon-a11y', + '@storybook/addon-links', + '@storybook/addon-essentials', + { + name: '@storybook/addon-postcss', + options: { + postcssLoaderOptions: { + implementation: require('postcss'), + }, + }, + }, + ] +} diff --git a/.storybook/manager.js b/.storybook/manager.js new file mode 100644 index 000000000..44979a7ca --- /dev/null +++ b/.storybook/manager.js @@ -0,0 +1,8 @@ +import { create } from '@storybook/theming/create'; + +export default create({ + base: 'light', + brandTitle: 'Alpaca UI', + brandImage: 'assets/icons/alpaca.svg', + brandUrl: 'https://github.com/SnowdogApps/alpaca-ui' +}) diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 000000000..bba0b9834 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,23 @@ +import { addDecorator, addParameters } from '@storybook/vue' + +import 'focus-visible' +import 'svgxuse' + +import '../assets/styles/tailwind.css' +// Wrap every story in Alpaca App component +import AApp from '../src/atoms/app/App.vue' + +addDecorator(() => ({ + components: { AApp }, + template: ` + + + + ` +})) + +addParameters({ + docs: { + iframeHeight: '60px' + } +}); diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 7ea5dea76..68babb62b 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -2,45 +2,32 @@ const StyleLintPlugin = require('stylelint-webpack-plugin') const path = require('path') module.exports = ({ config }) => { - config.module.rules.push({ - test: /\.stories\.jsx?$/, - loaders: [require.resolve('@storybook/addon-storysource/loader')], - enforce: 'pre' - }) - - config.module.rules.push({ - test: /\.vue$/, - loader: 'storybook-addon-vue-info/loader', - enforce: 'post' - }) - - config.module.rules.push({ - test: /\.scss$/, - use: [ - 'vue-style-loader', - 'css-loader', - 'sass-loader' - ] - }) config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, - loader: 'eslint-loader' + exclude: /node_modules/, + loader: 'eslint-loader', + options: { + emitWarning: true + } }) - config.plugins.push(new StyleLintPlugin({ files: [ 'src/**/*.vue', - 'src/**/*.scss', - 'assets/styles/**/*.scss' + 'src/**/*.css', + 'assets/styles/**/*.css' ], fix: true })) config.resolve.alias = { ...config.resolve.alias, - '@utils': path.resolve(__dirname, '../utils') + '@utils': path.resolve(__dirname, '../utils'), + '@atoms': path.resolve(__dirname, '../src/atoms'), + '@molecules': path.resolve(__dirname, '../src/molecules'), + '@organisms': path.resolve(__dirname, '../src/organisms'), + '@mocks': path.resolve(__dirname, '../mocks') } return config diff --git a/.stylelintrc b/.stylelintrc index ccb49930d..a88a99005 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,16 +1,23 @@ { - "plugins": [ - "stylelint-scss" - ], "extends": [ "stylelint-config-standard", "stylelint-config-rational-order" ], "rules": { - "at-rule-no-unknown": null, + "at-rule-no-unknown": [ + true, + { + ignoreAtRules: [ + 'tailwind', + 'apply', + 'variants', + 'responsive', + 'screen', + ] + } + ], + "declaration-block-trailing-semicolon": null, "no-descending-specificity": null, - "scss/at-rule-no-unknown": true, - "scss/dollar-variable-colon-space-after": "always", "block-no-empty": null, "color-no-invalid-hex": true, "comment-empty-line-before": [ "always", { @@ -18,7 +25,7 @@ } ], "declaration-colon-space-after": "always", "indentation": 2, - "max-empty-lines": 2, + "max-empty-lines": 1, "rule-empty-line-before": [ "always", { "except": ["first-nested"], "ignore": ["after-comment"] diff --git a/README.md b/README.md index 360e1fee5..5b6f798af 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ npm install @snowdog/alpaca-ui ### Usage -Import component in your app using named imports: +#### 1. Import component in your app using named imports `import { AButton } from '@snowdog/alpaca-ui'` @@ -49,7 +49,9 @@ Import component in your app using named imports: Alpaca button +``` +```vue ``` -If you need more flexibility you can take the source: +Requires adding aliases for atoms, molecules and organisms. +Nuxt.js example: + +```js +alias: { + '@atoms': resolve(__dirname, './node_modules/@snowdog/alpaca-ui/src/atoms'), + '@molecules': resolve(__dirname, './node_modules/@snowdog/alpaca-ui/src/molecules'), + '@organisms': resolve(__dirname, './node_modules/@snowdog/alpaca-ui/src/organisms'), +} +``` + +#### 2. Create a new component and import all component parts for more flexibility ```vue