mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-19 07:37:25 +01:00
Remove Storybook files and packages (#15040)
This commit is contained in:
negue
GitHub
36
.github/dependabot.yml
vendored
36
.github/dependabot.yml
vendored
@@ -104,42 +104,6 @@ updates:
|
|||||||
- 7.7.0
|
- 7.7.0
|
||||||
- 7.8.0
|
- 7.8.0
|
||||||
- 7.9.0
|
- 7.9.0
|
||||||
- dependency-name: "@storybook/addon-knobs"
|
|
||||||
versions:
|
|
||||||
- 6.1.17
|
|
||||||
- 6.1.18
|
|
||||||
- 6.1.20
|
|
||||||
- 6.1.21
|
|
||||||
- 6.2.2
|
|
||||||
- 6.2.3
|
|
||||||
- 6.2.7
|
|
||||||
- dependency-name: "@storybook/addon-links"
|
|
||||||
versions:
|
|
||||||
- 6.1.17
|
|
||||||
- 6.1.18
|
|
||||||
- 6.1.20
|
|
||||||
- 6.1.21
|
|
||||||
- 6.2.2
|
|
||||||
- 6.2.3
|
|
||||||
- 6.2.7
|
|
||||||
- dependency-name: "@storybook/vue"
|
|
||||||
versions:
|
|
||||||
- 6.1.17
|
|
||||||
- 6.1.18
|
|
||||||
- 6.1.20
|
|
||||||
- 6.1.21
|
|
||||||
- 6.2.2
|
|
||||||
- 6.2.3
|
|
||||||
- 6.2.7
|
|
||||||
- dependency-name: "@storybook/addon-actions"
|
|
||||||
versions:
|
|
||||||
- 6.1.17
|
|
||||||
- 6.1.18
|
|
||||||
- 6.1.20
|
|
||||||
- 6.1.21
|
|
||||||
- 6.2.2
|
|
||||||
- 6.2.3
|
|
||||||
- 6.2.7
|
|
||||||
- dependency-name: core-js
|
- dependency-name: core-js
|
||||||
versions:
|
versions:
|
||||||
- 3.10.0
|
- 3.10.0
|
||||||
|
|||||||
16
package-lock.json
generated
16
package-lock.json
generated
@@ -4005,7 +4005,7 @@
|
|||||||
"bin-pack": {
|
"bin-pack": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/bin-pack/-/bin-pack-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/bin-pack/-/bin-pack-1.0.2.tgz",
|
||||||
"integrity": "sha1-wqAU7b8L7XCjKSBi7UZXe5YSBnk="
|
"integrity": "sha512-aOk0SxEon5LF9cMxQFViSKb4qccG6rs7XKyMXIb1J8f8LA2acTIWnHdT0IOTe4gYBbqgjdbuTZ5f+UP+vlh4Mw=="
|
||||||
},
|
},
|
||||||
"bin-version": {
|
"bin-version": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
@@ -8872,7 +8872,7 @@
|
|||||||
"ignore-by-default": {
|
"ignore-by-default": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
|
||||||
"integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA=="
|
"integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk="
|
||||||
},
|
},
|
||||||
"image-size": {
|
"image-size": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
@@ -10197,7 +10197,7 @@
|
|||||||
"lodash.get": {
|
"lodash.get": {
|
||||||
"version": "4.4.2",
|
"version": "4.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
|
||||||
"integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
|
"integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"lodash.includes": {
|
"lodash.includes": {
|
||||||
@@ -11283,7 +11283,7 @@
|
|||||||
"ms": {
|
"ms": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||||
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
|
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -11650,7 +11650,7 @@
|
|||||||
"nopt": {
|
"nopt": {
|
||||||
"version": "1.0.10",
|
"version": "1.0.10",
|
||||||
"resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
|
"resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
|
||||||
"integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
|
"integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"abbrev": "1"
|
"abbrev": "1"
|
||||||
}
|
}
|
||||||
@@ -12249,7 +12249,7 @@
|
|||||||
"pause": {
|
"pause": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
|
||||||
"integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
|
"integrity": "sha1-HUCLP9t2kjuVQ9lvtMnf1TXZy10="
|
||||||
},
|
},
|
||||||
"pause-stream": {
|
"pause-stream": {
|
||||||
"version": "0.0.11",
|
"version": "0.0.11",
|
||||||
@@ -13359,7 +13359,7 @@
|
|||||||
"secure-keys": {
|
"secure-keys": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/secure-keys/-/secure-keys-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/secure-keys/-/secure-keys-1.0.0.tgz",
|
||||||
"integrity": "sha512-nZi59hW3Sl5P3+wOO89eHBAAGwmCPd2aE1+dLZV5MO+ItQctIvAqihzaAXIQhvtH4KJPxM080HsnqltR2y8cWg=="
|
"integrity": "sha1-8MgtmKOxOah3aogIBQuCRDEIf8o="
|
||||||
},
|
},
|
||||||
"seek-bzip": {
|
"seek-bzip": {
|
||||||
"version": "1.0.5",
|
"version": "1.0.5",
|
||||||
@@ -13707,7 +13707,7 @@
|
|||||||
"sliced": {
|
"sliced": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/sliced/-/sliced-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/sliced/-/sliced-1.0.1.tgz",
|
||||||
"integrity": "sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA=="
|
"integrity": "sha1-CzpmK10Ewxd7GSa+qCsD+Dei70E="
|
||||||
},
|
},
|
||||||
"snapdragon": {
|
"snapdragon": {
|
||||||
"version": "0.8.2",
|
"version": "0.8.2",
|
||||||
|
|||||||
@@ -28,34 +28,6 @@ npm run lint
|
|||||||
### Customize configuration
|
### Customize configuration
|
||||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
|
|
||||||
## Storybook
|
|
||||||
|
|
||||||
Storybook is mainly used while working on UI-Components to see changes faster instead of using the website.
|
|
||||||
|
|
||||||
### Start Storybook
|
|
||||||
|
|
||||||
```
|
|
||||||
npm run storybook:serve
|
|
||||||
```
|
|
||||||
|
|
||||||
This will start the storybook process, every `*.stories.js`-File is searched and added to the storybook overview.
|
|
||||||
|
|
||||||
### Storybook Worklow
|
|
||||||
|
|
||||||
Usually when you working on `component-name.vue` you also create a `component-name.stories.js` file.
|
|
||||||
|
|
||||||
Example of the stories structure - [Storybook Docs][StorybookDocsExample] - [CountBadge][CountBadgeExample]
|
|
||||||
|
|
||||||
[StorybookDocsExample]: https://storybook.js.org/docs/guides/guide-vue/#step-4-write-your-stories
|
|
||||||
[CountBadgeExample]: src/components/ui/countBadge.stories.js
|
|
||||||
|
|
||||||
Each function or example of this component will be put after `storiesOf('Your Component', module)`,
|
|
||||||
in a separate `.add('function of component', ...`
|
|
||||||
|
|
||||||
### Storybook Build
|
|
||||||
|
|
||||||
After each client build, storybook build is also triggered and will be available in `dist/storybook`
|
|
||||||
|
|
||||||
### Vue Structure
|
### Vue Structure
|
||||||
|
|
||||||
Currently pages and components are mixed in `/src/components` this is not a good way to find the files easy.
|
Currently pages and components are mixed in `/src/components` this is not a good way to find the files easy.
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
# Storybook Updates
|
|
||||||
|
|
||||||
Addon-Knobs has been deprecated inorder to update to the new `addons-controls` we need to:
|
|
||||||
|
|
||||||
1. Change to the new export syntax for each story `export const StoryTemplate`
|
|
||||||
2. And use `StoryTemplate.args` and `StoryTemplate.argTypes` to have the same `knobs` as before
|
|
||||||
|
|
||||||
Maybe this can be made story by story and not all at once
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import '@storybook/addon-actions/register';
|
|
||||||
import '@storybook/addon-knobs/register';
|
|
||||||
import '@storybook/addon-links/register';
|
|
||||||
import '@storybook/addon-notes/register';
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { configure } from '@storybook/vue';
|
|
||||||
import './margin.css';
|
|
||||||
import '../../src/assets/scss/index.scss';
|
|
||||||
|
|
||||||
import '../../src/assets/scss/sprites.scss';
|
|
||||||
|
|
||||||
import Vue from 'vue';
|
|
||||||
import BootstrapVue from 'bootstrap-vue';
|
|
||||||
import StoreModule from '@/libs/store';
|
|
||||||
import getStore from '@/store';
|
|
||||||
import '../../src/filters/registerGlobals';
|
|
||||||
|
|
||||||
import i18n from '../../../common/script/i18n';
|
|
||||||
|
|
||||||
// couldn't inject the languages easily,
|
|
||||||
// so just a "$t()" string to show that this will be translated
|
|
||||||
i18n.t = function translateString (...args) {
|
|
||||||
return `$t(${JSON.stringify(args)})`;
|
|
||||||
};
|
|
||||||
Vue.prototype.$t = i18n.t;
|
|
||||||
|
|
||||||
Vue.use(BootstrapVue);
|
|
||||||
Vue.use(StoreModule);
|
|
||||||
|
|
||||||
const store = getStore();
|
|
||||||
store.state.user.data = {
|
|
||||||
stats: {},
|
|
||||||
tags: [],
|
|
||||||
items: {
|
|
||||||
quests: {
|
|
||||||
moon1: 3,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
party: {
|
|
||||||
quest: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
auth: {
|
|
||||||
local: {
|
|
||||||
// email: 'example@example.com',
|
|
||||||
},
|
|
||||||
facebook: {
|
|
||||||
emails: [
|
|
||||||
{
|
|
||||||
value: 'test@test.de',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
Vue.prototype.$store = store;
|
|
||||||
|
|
||||||
const req = require.context('../../src', true, /.stories.js$/);
|
|
||||||
|
|
||||||
function loadStories () {
|
|
||||||
req.keys().forEach(filename => req(filename));
|
|
||||||
}
|
|
||||||
|
|
||||||
configure(loadStories, module);
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
.background {
|
|
||||||
background: teal;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inline-block {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.component-showcase {
|
|
||||||
position: absolute;
|
|
||||||
margin: 20px;
|
|
||||||
width: calc(100% - 40px);
|
|
||||||
}
|
|
||||||
@@ -1,107 +0,0 @@
|
|||||||
import { v4 as generateUUID } from 'uuid';
|
|
||||||
import getters from '@/store/getters';
|
|
||||||
|
|
||||||
export const userStyles = {
|
|
||||||
contributor: {
|
|
||||||
admin: true,
|
|
||||||
level: 9,
|
|
||||||
text: '',
|
|
||||||
},
|
|
||||||
items: {
|
|
||||||
gear: {
|
|
||||||
equipped: {
|
|
||||||
armor: 'armor_special_2',
|
|
||||||
head: 'head_special_2',
|
|
||||||
shield: 'shield_special_goldenknight',
|
|
||||||
headAccessory: 'headAccessory_base_0',
|
|
||||||
eyewear: 'eyewear_base_0',
|
|
||||||
weapon: 'weapon_special_1',
|
|
||||||
back: 'back_base_0',
|
|
||||||
},
|
|
||||||
costume: {
|
|
||||||
armor: 'armor_special_fallRogue',
|
|
||||||
head: 'head_special_fallRogue',
|
|
||||||
shield: 'shield_armoire_shieldOfDiamonds',
|
|
||||||
body: 'body_mystery_201706',
|
|
||||||
eyewear: 'eyewear_special_blackHalfMoon',
|
|
||||||
back: 'back_base_0',
|
|
||||||
headAccessory: 'headAccessory_special_wolfEars',
|
|
||||||
weapon: 'weapon_armoire_lamplighter',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
hair: {
|
|
||||||
color: 'black', base: 0, bangs: 3, beard: 0, mustache: 0, flower: 0,
|
|
||||||
},
|
|
||||||
tasks: { groupByChallenge: false, confirmScoreNotes: false },
|
|
||||||
size: 'broad',
|
|
||||||
skin: 'wolf',
|
|
||||||
shirt: 'zombie',
|
|
||||||
chair: 'none',
|
|
||||||
sleep: true,
|
|
||||||
disableClasses: false,
|
|
||||||
background: 'midnight_castle',
|
|
||||||
costume: true,
|
|
||||||
},
|
|
||||||
stats: {
|
|
||||||
buffs: {
|
|
||||||
str: 0,
|
|
||||||
int: 0,
|
|
||||||
per: 0,
|
|
||||||
con: 0,
|
|
||||||
stealth: 0,
|
|
||||||
streaks: false,
|
|
||||||
snowball: false,
|
|
||||||
spookySparkles: false,
|
|
||||||
shinySeed: false,
|
|
||||||
seafoam: false,
|
|
||||||
},
|
|
||||||
training: {
|
|
||||||
int: 0, per: 0, str: 0, con: 0,
|
|
||||||
},
|
|
||||||
hp: 50,
|
|
||||||
mp: 158,
|
|
||||||
exp: 227,
|
|
||||||
gp: 464.31937261345155,
|
|
||||||
lvl: 17,
|
|
||||||
class: 'rogue',
|
|
||||||
points: 17,
|
|
||||||
str: 0,
|
|
||||||
con: 0,
|
|
||||||
int: 0,
|
|
||||||
per: 0,
|
|
||||||
toNextLevel: 380,
|
|
||||||
maxHealth: 50,
|
|
||||||
maxMP: 158,
|
|
||||||
},
|
|
||||||
profile: {
|
|
||||||
name: 'user',
|
|
||||||
},
|
|
||||||
_id: generateUUID(),
|
|
||||||
flags: {
|
|
||||||
classSelected: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export function mockStore ({
|
|
||||||
userData,
|
|
||||||
...state
|
|
||||||
}) {
|
|
||||||
return {
|
|
||||||
getters,
|
|
||||||
dispatch: () => {
|
|
||||||
},
|
|
||||||
watch: () => {
|
|
||||||
},
|
|
||||||
state: {
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
...userData,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
...state,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
14241
website/client/package-lock.json
generated
14241
website/client/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -8,17 +8,9 @@
|
|||||||
"test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
|
"test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
|
||||||
"lint": "vue-cli-service lint .",
|
"lint": "vue-cli-service lint .",
|
||||||
"lint-no-fix": "vue-cli-service lint --no-fix .",
|
"lint-no-fix": "vue-cli-service lint --no-fix .",
|
||||||
"postinstall": "node ./scripts/npm-postinstall.js",
|
"postinstall": "node ./scripts/npm-postinstall.js"
|
||||||
"storybook:build": "vue-cli-service storybook:build -c config/storybook -o dist/storybook",
|
|
||||||
"storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addon-actions": "6.5.8",
|
|
||||||
"@storybook/addon-knobs": "6.2.9",
|
|
||||||
"@storybook/addon-links": "6.5.8",
|
|
||||||
"@storybook/addon-notes": "5.3.21",
|
|
||||||
"@storybook/addons": "6.5.9",
|
|
||||||
"@storybook/vue": "6.5.14",
|
|
||||||
"@vue/cli-plugin-babel": "^5.0.8",
|
"@vue/cli-plugin-babel": "^5.0.8",
|
||||||
"@vue/cli-plugin-eslint": "^4.5.19",
|
"@vue/cli-plugin-eslint": "^4.5.19",
|
||||||
"@vue/cli-plugin-router": "^5.0.8",
|
"@vue/cli-plugin-router": "^5.0.8",
|
||||||
@@ -57,7 +49,6 @@
|
|||||||
"uuid": "^9.0.1",
|
"uuid": "^9.0.1",
|
||||||
"validator": "^13.9.0",
|
"validator": "^13.9.0",
|
||||||
"vue": "^2.7.10",
|
"vue": "^2.7.10",
|
||||||
"vue-cli-plugin-storybook": "2.1.0",
|
|
||||||
"vue-fragment": "^1.6.0",
|
"vue-fragment": "^1.6.0",
|
||||||
"vue-mugen-scroll": "^0.2.6",
|
"vue-mugen-scroll": "^0.2.6",
|
||||||
"vue-router": "^3.6.5",
|
"vue-router": "^3.6.5",
|
||||||
|
|||||||
@@ -6,8 +6,4 @@ if (process.env.NODE_ENV === 'production') {
|
|||||||
execSync('npm run build', {
|
execSync('npm run build', {
|
||||||
stdio: 'inherit',
|
stdio: 'inherit',
|
||||||
});
|
});
|
||||||
|
|
||||||
/* execSync('npm run storybook:build', {
|
|
||||||
stdio: 'inherit',
|
|
||||||
}); */
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,43 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
|
|
||||||
import bugReportModal from '@/components/bugReportModal';
|
|
||||||
import bugReportSuccessModal from '@/components/bugReportSuccessModal';
|
|
||||||
|
|
||||||
const stories = storiesOf('Bug Report Modal', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('bugReportModal', () => ({
|
|
||||||
components: { bugReportModal },
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
};
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<bug-report-modal></bug-report-modal>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
mounted () {
|
|
||||||
this.$root.$emit('bv::show::modal', 'bug-report-modal');
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
.add('bugReportSuccessModal', () => ({
|
|
||||||
components: { bugReportSuccessModal },
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
};
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<bug-report-success-modal></bug-report-success-modal>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
mounted () {
|
|
||||||
this.$root.$emit('bv::show::modal', 'bug-report-success-modal');
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
|
|
||||||
import FaceAvatar from './faceAvatar.vue';
|
|
||||||
import Avatar from './avatar.vue';
|
|
||||||
import { userStyles } from '../../config/storybook/mock.data';
|
|
||||||
import content from '../../../common/script/content/index';
|
|
||||||
import getters from '@/store/getters';
|
|
||||||
|
|
||||||
storiesOf('Face Avatar', module)
|
|
||||||
.add('simple', () => ({
|
|
||||||
components: { FaceAvatar },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<face-avatar :member="user"></face-avatar>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
user: userStyles,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
.add('compare', () => ({
|
|
||||||
components: { FaceAvatar, Avatar },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<face-avatar :member="user"></face-avatar>
|
|
||||||
<avatar :member="user"></avatar>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
user: userStyles,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
state: {
|
|
||||||
content,
|
|
||||||
},
|
|
||||||
store: {
|
|
||||||
getters,
|
|
||||||
state: {
|
|
||||||
content,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,401 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import {
|
|
||||||
collectionQuestLeaderParticipating,
|
|
||||||
collectionQuestNotParticipating,
|
|
||||||
createStory,
|
|
||||||
groupBossQuestParticipating,
|
|
||||||
groupBossQuestRage,
|
|
||||||
groupCollectionQuest,
|
|
||||||
groupCollectionQuestPending,
|
|
||||||
} from './group.stories.utils';
|
|
||||||
|
|
||||||
storiesOf('Group Components|Party/Quest States', module)
|
|
||||||
.add('Not a Member', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="true"
|
|
||||||
:is-leader="false" :is-member="false"
|
|
||||||
class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: {
|
|
||||||
leader: {
|
|
||||||
|
|
||||||
},
|
|
||||||
quest: {
|
|
||||||
},
|
|
||||||
purchased: {
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: 'some-user',
|
|
||||||
party: {
|
|
||||||
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}))
|
|
||||||
.add('Member/No Quest', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="true"
|
|
||||||
:is-leader="false" :is-member="true"
|
|
||||||
class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: {
|
|
||||||
leader: {
|
|
||||||
|
|
||||||
},
|
|
||||||
quest: {
|
|
||||||
},
|
|
||||||
purchased: {
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: 'some-user',
|
|
||||||
party: {
|
|
||||||
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}))
|
|
||||||
.add('Leader/No Quest', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="true"
|
|
||||||
:is-leader="true" :is-member="true"
|
|
||||||
class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: {
|
|
||||||
description: 'Some text',
|
|
||||||
leader: {
|
|
||||||
|
|
||||||
},
|
|
||||||
quest: {
|
|
||||||
},
|
|
||||||
purchased: {
|
|
||||||
},
|
|
||||||
privacy: 'private',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: 'some-user',
|
|
||||||
party: {
|
|
||||||
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}))
|
|
||||||
.add('Quest Owner/Quest Not Started', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: groupCollectionQuest(false),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
|
|
||||||
party: {
|
|
||||||
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}))
|
|
||||||
.add('Member/Quest accepted/Quest Not Started', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: groupCollectionQuest(false),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: 'just-a-member',
|
|
||||||
party: {
|
|
||||||
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}))
|
|
||||||
.add('Member/Quest accepted/Started', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: groupCollectionQuest(true),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: 'just-a-member',
|
|
||||||
party: {
|
|
||||||
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}))
|
|
||||||
.add('Member/Quest Invite Pending', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="true"
|
|
||||||
:is-member="true"
|
|
||||||
class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: groupCollectionQuestPending,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: 'some-user',
|
|
||||||
party: {
|
|
||||||
quest: {
|
|
||||||
RSVPNeeded: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}))
|
|
||||||
.add('Collection Quest/Quest Owner Participating', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="true" :is-member="true" :is-leader="true" class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: collectionQuestLeaderParticipating,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
|
|
||||||
party: {
|
|
||||||
quest: {
|
|
||||||
progress: {
|
|
||||||
up: 0,
|
|
||||||
down: 0,
|
|
||||||
collectedItems: 2,
|
|
||||||
collect: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}))
|
|
||||||
.add('Collection Quest/Not Participating', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: collectionQuestNotParticipating,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: 'not-the-leader',
|
|
||||||
party: {
|
|
||||||
quest: {
|
|
||||||
progress: {
|
|
||||||
up: 0,
|
|
||||||
down: 0,
|
|
||||||
collectedItems: 2,
|
|
||||||
collect: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}))
|
|
||||||
.add('Boss Quest/Participating', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: groupBossQuestParticipating,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
|
|
||||||
party: {
|
|
||||||
quest: {
|
|
||||||
progress: {
|
|
||||||
up: 20,
|
|
||||||
down: 0,
|
|
||||||
collectedItems: 2,
|
|
||||||
collect: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}))
|
|
||||||
.add('Boss Quest/Participating - No Pending', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: groupBossQuestParticipating,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
|
|
||||||
party: {
|
|
||||||
quest: {
|
|
||||||
progress: {
|
|
||||||
up: 0,
|
|
||||||
down: 0,
|
|
||||||
collectedItems: 2,
|
|
||||||
collect: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}))
|
|
||||||
.add('Boss Quest/Rage Enabled', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: groupBossQuestRage,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
|
|
||||||
party: {
|
|
||||||
quest: {
|
|
||||||
progress: {
|
|
||||||
up: 20,
|
|
||||||
down: 0,
|
|
||||||
collectedItems: 2,
|
|
||||||
collect: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}))
|
|
||||||
.add('Not a party', () => createStory({
|
|
||||||
template: `
|
|
||||||
<div class="component-showcase">
|
|
||||||
<right-sidebar :group="group" :is-party="false" :is-member="true" class="col-12"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
group: {
|
|
||||||
quest: {},
|
|
||||||
leader: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
_id: 'some-user',
|
|
||||||
party: {
|
|
||||||
|
|
||||||
},
|
|
||||||
preferences: {
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challengeOptions: {},
|
|
||||||
}));
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import { quests } from '@/../../common/script/content/quests';
|
|
||||||
import content from '@/../../common/script/content';
|
|
||||||
import questDetailModal from './questDetailModal';
|
|
||||||
import questCompleted from '../achievements/questCompleted';
|
|
||||||
|
|
||||||
const stories = storiesOf('Quests/Dialog', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('selectQuestDialog', () => ({
|
|
||||||
components: { questDetailModal },
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
quest: quests.goldenknight2,
|
|
||||||
questWithDrop: quests.moon1,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<quest-detail-modal :group="{}"></quest-detail-modal>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
mounted () {
|
|
||||||
this.$root.$emit('bv::show::modal', 'quest-detail-modal');
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
.add('questDetailModal', () => ({
|
|
||||||
components: { questDetailModal },
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
quest: quests.goldenknight2,
|
|
||||||
questWithDrop: quests.moon1,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<quest-detail-modal :group="{}"></quest-detail-modal>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
mounted () {
|
|
||||||
this.$root.$emit('bv::show::modal', 'quest-detail-modal', {
|
|
||||||
key: 'moon1',
|
|
||||||
from: 'sidebar',
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
.add('quest-completed', () => ({
|
|
||||||
components: { questCompleted },
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
quest: quests.goldenknight2,
|
|
||||||
questWithDrop: quests.moon1,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<quest-completed></quest-completed>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
mounted () {
|
|
||||||
this.$root.$emit('bv::show::modal', 'quest-completed');
|
|
||||||
},
|
|
||||||
store: {
|
|
||||||
state: {
|
|
||||||
content,
|
|
||||||
user: {
|
|
||||||
data: {
|
|
||||||
stats: {},
|
|
||||||
tags: [],
|
|
||||||
items: {
|
|
||||||
quests: {
|
|
||||||
moon1: 3,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
party: {
|
|
||||||
quest: {
|
|
||||||
completed: 'vice3',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
|
|
||||||
import MemberDetails from './memberDetails.vue';
|
|
||||||
import MemberDetailsNew from './memberDetailsNew.vue';
|
|
||||||
import { userStyles } from '../../config/storybook/mock.data';
|
|
||||||
|
|
||||||
storiesOf('Member Details', module)
|
|
||||||
.add('party header (old)', () => ({
|
|
||||||
components: { MemberDetails },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<member-details :member="user"></member-details>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
user: userStyles,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
.add('quest participants (new)', () => ({
|
|
||||||
components: { MemberDetailsNew },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<member-details-new :member="user"></member-details-new>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
user: userStyles,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
|
|
||||||
import PaymentsButtonsList from './list.vue';
|
|
||||||
import getStore from '@/store';
|
|
||||||
import { setup as setupPayments } from '@/libs/payments';
|
|
||||||
|
|
||||||
setupPayments();
|
|
||||||
|
|
||||||
storiesOf('Subscriptions/Payments Buttons', module)
|
|
||||||
.add('simple', () => ({
|
|
||||||
components: { PaymentsButtonsList },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<payments-buttons-list
|
|
||||||
:amazon-data="{type: 'single'}"
|
|
||||||
:stripe-fn="() => {}"
|
|
||||||
:paypal-fn="() => {}"
|
|
||||||
></payments-buttons-list>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
store: getStore(),
|
|
||||||
}))
|
|
||||||
.add('disabled', () => ({
|
|
||||||
components: { PaymentsButtonsList },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<payments-buttons-list
|
|
||||||
:disabled="true"
|
|
||||||
:amazon-data="{type: 'single'}"
|
|
||||||
:stripe-fn="() => {}"
|
|
||||||
:paypal-fn="() => {}"
|
|
||||||
></payments-buttons-list>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
store: getStore(),
|
|
||||||
}))
|
|
||||||
.add('only stripe and amazon (example)', () => ({
|
|
||||||
components: { PaymentsButtonsList },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<payments-buttons-list
|
|
||||||
:amazon-data="{type: 'single'}"
|
|
||||||
:stripe-fn="() => {}"
|
|
||||||
></payments-buttons-list>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
store: getStore(),
|
|
||||||
}));
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
|
|
||||||
import Subscription from './subscription.vue';
|
|
||||||
import { mockStore } from '../../../config/storybook/mock.data';
|
|
||||||
|
|
||||||
storiesOf('Subscriptions/Detail Page', module)
|
|
||||||
.add('subscribed', () => ({
|
|
||||||
components: { Subscription },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<subscription ></subscription>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
};
|
|
||||||
},
|
|
||||||
store: mockStore({
|
|
||||||
userData: {
|
|
||||||
purchased: {
|
|
||||||
plan: {
|
|
||||||
customerId: 'customer-id',
|
|
||||||
planId: 'plan-id',
|
|
||||||
subscriptionId: 'sub-id',
|
|
||||||
gemsBought: 22,
|
|
||||||
dateUpdated: new Date(2021, 0, 15),
|
|
||||||
consecutive: {
|
|
||||||
count: 2,
|
|
||||||
gemCapExtra: 4,
|
|
||||||
offset: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
}));
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import { quests } from '@/../../common/script/content/quests';
|
|
||||||
import questRewards from './questRewards';
|
|
||||||
import itemWithLabel from '../itemWithLabel';
|
|
||||||
import questPopover from './questPopover';
|
|
||||||
|
|
||||||
const stories = storiesOf('Quests/Sub Components', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('questRewads', () => ({
|
|
||||||
components: { questRewards },
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
quest: quests.goldenknight2,
|
|
||||||
questWithDrop: quests.stressbeast,
|
|
||||||
questWithGear: quests.moon1,
|
|
||||||
evilsanta: quests.evilsanta,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<quest-rewards :quest="quest"></quest-rewards>
|
|
||||||
<quest-rewards :quest="questWithDrop"></quest-rewards>
|
|
||||||
<quest-rewards :quest="questWithGear"></quest-rewards>
|
|
||||||
<quest-rewards :quest="evilsanta"></quest-rewards>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
}))
|
|
||||||
.add('itemWithLabel', () => ({
|
|
||||||
components: { itemWithLabel },
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
};
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<item-with-label :item="{}">
|
|
||||||
<div slot="itemContent">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div slot="itemImage">
|
|
||||||
Image
|
|
||||||
</div>
|
|
||||||
<div slot="label">
|
|
||||||
Label
|
|
||||||
</div>
|
|
||||||
</item-with-label>
|
|
||||||
|
|
||||||
<item-with-label :item="{}" label-class="purple">
|
|
||||||
<div slot="itemContent">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div slot="itemImage">
|
|
||||||
Image
|
|
||||||
</div>
|
|
||||||
<div slot="label">
|
|
||||||
Label
|
|
||||||
</div>
|
|
||||||
</item-with-label>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
}))
|
|
||||||
.add('questPopover', () => ({
|
|
||||||
components: { questPopover },
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
quest: quests.goldenknight2,
|
|
||||||
quest2: quests.moon1,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<quest-popover :item="quest"></quest-popover>
|
|
||||||
<quest-popover :item="quest2"></quest-popover>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
}));
|
|
||||||
@@ -1,215 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { boolean, withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import Notification from './notification';
|
|
||||||
import Notifications from './notifications';
|
|
||||||
import notificationsMixin from '../../mixins/notifications';
|
|
||||||
|
|
||||||
const stories = storiesOf('Notifications', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('notifications overview', () => ({
|
|
||||||
components: {
|
|
||||||
Notification,
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<div style="display: flex; flex-wrap: wrap; align-items: flex-start">
|
|
||||||
<Notification v-for="notification of notifications"
|
|
||||||
:notification="notification"
|
|
||||||
:style="{outline: showBounds ? '1px solid green': ''}"
|
|
||||||
style="margin-right: 1rem">
|
|
||||||
|
|
||||||
</Notification> <br/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
|
|
||||||
data () {
|
|
||||||
const notifications = [];
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'hp',
|
|
||||||
sign: '+',
|
|
||||||
text: '+2',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'hp',
|
|
||||||
sign: '-',
|
|
||||||
text: '-2',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'mp',
|
|
||||||
sign: '+',
|
|
||||||
text: '+2',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'mp',
|
|
||||||
sign: '-',
|
|
||||||
text: '-2',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'xp',
|
|
||||||
sign: '+',
|
|
||||||
text: '+12',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'xp',
|
|
||||||
sign: '-',
|
|
||||||
text: '-12',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'gp',
|
|
||||||
sign: '+',
|
|
||||||
text: '+12',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'gp',
|
|
||||||
sign: '-',
|
|
||||||
text: '-12',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'streak',
|
|
||||||
text: '12',
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'damage',
|
|
||||||
sign: '+',
|
|
||||||
text: '12',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'drop',
|
|
||||||
icon: 'shop_weapon_wizard_2',
|
|
||||||
text: 'Dropped something with a longer text to try',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'drop',
|
|
||||||
icon: 'Pet_Egg_FlyingPig',
|
|
||||||
text: 'Dropped flying pig egg',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'drop',
|
|
||||||
icon: 'Pet_Food_Strawberry',
|
|
||||||
text: 'You’ve found a Strawberry!',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'info',
|
|
||||||
text: 'Info',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'success',
|
|
||||||
text: 'Success!',
|
|
||||||
});
|
|
||||||
notifications.push({
|
|
||||||
type: 'crit',
|
|
||||||
text: 'Crit!',
|
|
||||||
});
|
|
||||||
notifications.push({
|
|
||||||
type: 'lvl',
|
|
||||||
text: 'Lvl Up',
|
|
||||||
});
|
|
||||||
|
|
||||||
notifications.push({
|
|
||||||
type: 'error',
|
|
||||||
text: 'This is an error message. If it is too long, we can wrap to show the rest of the message',
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
notifications,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
showBounds: {
|
|
||||||
default: boolean('show bounds', false),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
.add('trigger notifications', () => ({
|
|
||||||
components: {
|
|
||||||
Notifications,
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<button @click="addNotification()">Add Notifications</button>
|
|
||||||
|
|
||||||
<button @click="crit(1337)">Crit</button>
|
|
||||||
|
|
||||||
<button @click="drop('Drop', {type:'weapon', key: 'wizard_2'})">Drop</button>
|
|
||||||
|
|
||||||
<button @click="quest('quest', 'val')">Quest</button>
|
|
||||||
<button @click="damage(-13)">Damage</button>
|
|
||||||
<button @click="exp(42)">Exp</button>
|
|
||||||
<button @click="error('some error')">Error</button>
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
<button @click="gp(23, 0)">Gold</button>
|
|
||||||
|
|
||||||
|
|
||||||
<button @click="hp(23)">HP</button>
|
|
||||||
<button @click="mp(23)">MP</button>
|
|
||||||
|
|
||||||
<button @click="lvl()">LVL</button>
|
|
||||||
|
|
||||||
<button @click="streak('Streak')">Streak</button>
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
<button @click="markdown('You cast a skill')">Markdown</button>
|
|
||||||
|
|
||||||
|
|
||||||
<Notifications :prevent-queue="preventQueue"
|
|
||||||
:debug-mode="debugMode"
|
|
||||||
:style="{outline: showBounds ? '1px solid green': ''}">
|
|
||||||
</Notifications>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
props: {
|
|
||||||
showBounds: {
|
|
||||||
default: boolean('show bounds', false),
|
|
||||||
},
|
|
||||||
preventQueue: {
|
|
||||||
default: boolean('prevent removing', false),
|
|
||||||
},
|
|
||||||
debugMode: {
|
|
||||||
default: boolean('debug mode', true),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
mixins: [notificationsMixin],
|
|
||||||
methods: {
|
|
||||||
addNotification () {
|
|
||||||
this.text('notification!!');
|
|
||||||
this.text('notification2!!');
|
|
||||||
this.text('notification3!!');
|
|
||||||
this.error('This should stay visible');
|
|
||||||
this.text('notification4!!');
|
|
||||||
this.exp(125);
|
|
||||||
this.damage(-2);
|
|
||||||
|
|
||||||
this.error('This should stay visible too');
|
|
||||||
this.text('notification5!!');
|
|
||||||
this.exp(125);
|
|
||||||
this.damage(-2);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import CheckList from './checklist.vue';
|
|
||||||
|
|
||||||
const stories = storiesOf('CheckList', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('simple', () => ({
|
|
||||||
components: { CheckList },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px; background: white">
|
|
||||||
<check-list :items.sync="checklist">
|
|
||||||
|
|
||||||
</check-list>
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
<br/>
|
|
||||||
Data: <br/>
|
|
||||||
{{ checklist }}
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
checklist: [
|
|
||||||
{
|
|
||||||
id: 'c0890cd2-3c69-4889-bf2c-b63ac0ee6628',
|
|
||||||
text: 'first',
|
|
||||||
completed: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '5b913020-b340-4099-9a53-afcd27dc5637',
|
|
||||||
text: 'second',
|
|
||||||
completed: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '77b52a8e-4a0e-4717-9650-55fb5462b42f',
|
|
||||||
text: 'third',
|
|
||||||
completed: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,124 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { withKnobs, number } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import MultiList from './multiList';
|
|
||||||
import SelectMulti from './selectMulti';
|
|
||||||
|
|
||||||
const stories = storiesOf('Multiple Select List', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
const exampleTagList = [
|
|
||||||
1, 2, 3,
|
|
||||||
];
|
|
||||||
|
|
||||||
const allTags = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'Small Tag',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'This is a long tag',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'This is a long tag',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 12,
|
|
||||||
name: 'This is a different tag',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 9001,
|
|
||||||
name: 'OVER 9000',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: 'Four',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
name: 'Five :tada:',
|
|
||||||
challenge: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
name: 'Six',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
name: 'Seven **Markdown**',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('tag-list', () => ({
|
|
||||||
components: { MultiList },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<MultiList :max-items="maxTags" :items="tagList"></MultiList>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
props: {
|
|
||||||
tagList: {
|
|
||||||
default: allTags,
|
|
||||||
},
|
|
||||||
maxTags: {
|
|
||||||
default: number('Max-Tags', 3),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
.add('select-tag', () => ({
|
|
||||||
components: { SelectMulti },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<SelectMulti :selectedItems="tagList"
|
|
||||||
:add-new="true"
|
|
||||||
:all-items="allTags"
|
|
||||||
style="width: 400px"
|
|
||||||
@changed="tagList = $event"
|
|
||||||
@addNew="added = $event">
|
|
||||||
|
|
||||||
</SelectMulti>
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
Added event: {{ added }}
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
tagList: exampleTagList,
|
|
||||||
added: '',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
allTags: {
|
|
||||||
default: allTags,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
.add('longer select-tag', () => ({
|
|
||||||
components: { SelectMulti },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<SelectMulti :selectedItems="tagList"
|
|
||||||
:all-items="allTags"
|
|
||||||
style="width: 400px"
|
|
||||||
@changed="tagList = $event"></SelectMulti>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
tagList: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
allTags: {
|
|
||||||
default: allTags,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import positiveIcon from '@/assets/svg/positive.svg';
|
|
||||||
|
|
||||||
const stories = storiesOf('Buttons', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('all', () => ({
|
|
||||||
components: { },
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
icon: positiveIcon,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px; display: flex; flex-direction: row;">
|
|
||||||
<div class="mr-3">
|
|
||||||
<h3>Button</h3>
|
|
||||||
<button class="btn btn-primary">Button Primary</button>
|
|
||||||
<br/><br/>
|
|
||||||
<button class="btn btn-primary" disabled>Button Primary Disabled</button>
|
|
||||||
<br/><br/>
|
|
||||||
|
|
||||||
<button class="btn btn-secondary">Button Secondary</button>
|
|
||||||
<br/><br/>
|
|
||||||
<button class="btn btn-secondary" disabled>Button Secondary Disabled</button>
|
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
<h3>Button with Icon</h3>
|
|
||||||
<button class="btn btn-primary with-icon">
|
|
||||||
<span class="svg-icon color inline icon-12 mr-2"
|
|
||||||
v-html="icon"
|
|
||||||
>
|
|
||||||
|
|
||||||
</span>
|
|
||||||
<span class="button-label">
|
|
||||||
Button Primary
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<br/>
|
|
||||||
<button class="btn btn-primary with-icon" disabled>
|
|
||||||
<span class="svg-icon color inline icon-12 mr-2"
|
|
||||||
v-html="icon"
|
|
||||||
>
|
|
||||||
|
|
||||||
</span>
|
|
||||||
<span class="button-label">
|
|
||||||
Button Primary Disabled
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
<button class="btn btn-secondary with-icon">
|
|
||||||
<span class="svg-icon color inline icon-12 mr-2"
|
|
||||||
v-html="icon"
|
|
||||||
>
|
|
||||||
|
|
||||||
</span>
|
|
||||||
<span class="button-label">
|
|
||||||
Button Secondary
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<br/>
|
|
||||||
<button class="btn btn-secondary with-icon" disabled>
|
|
||||||
<span class="svg-icon color inline icon-12 mr-2"
|
|
||||||
v-html="icon"
|
|
||||||
>
|
|
||||||
|
|
||||||
</span>
|
|
||||||
<span class="button-label">
|
|
||||||
Button Secondary Disabled
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
}))
|
|
||||||
.add('dropdowns', () => ({
|
|
||||||
components: { },
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
items: ['one', 'two', 'three'],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px; display: flex; flex-direction: row;">
|
|
||||||
<div class="mr-3">
|
|
||||||
<h3>Dropdowns</h3>
|
|
||||||
<b-dropdown
|
|
||||||
text="Dropdown Primary"
|
|
||||||
right="right"
|
|
||||||
>
|
|
||||||
<b-dropdown-item
|
|
||||||
v-for="item in items"
|
|
||||||
:key="item"
|
|
||||||
>
|
|
||||||
{{ item }}
|
|
||||||
</b-dropdown-item>
|
|
||||||
</b-dropdown>
|
|
||||||
<br/><br/>
|
|
||||||
<b-dropdown
|
|
||||||
text="Dropdown Primary Disabled"
|
|
||||||
right="right"
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
</b-dropdown>
|
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
<h3>Button</h3>
|
|
||||||
<button class="btn btn-secondary">
|
|
||||||
<span class="button-label">
|
|
||||||
Button Primary
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<br/>
|
|
||||||
<br/>
|
|
||||||
<button class="btn btn-secondary" disabled>
|
|
||||||
<span class="button-label">
|
|
||||||
Button Primary Disabled
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
}));
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import Checkbox from './checkbox';
|
|
||||||
import ToggleCheckbox from './toggleCheckbox';
|
|
||||||
|
|
||||||
const stories = storiesOf('Checkbox', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('checkbox', () => ({
|
|
||||||
components: {
|
|
||||||
Checkbox,
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<Checkbox text="My Checkbox" id="someId"></Checkbox> <br/>
|
|
||||||
<Checkbox text="My Checked Checkbox" id="someOtherId" :checked.sync="checked"></Checkbox>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
checked: true,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
.add('Toggle Checkbox Group', () => ({
|
|
||||||
components: {
|
|
||||||
ToggleCheckbox,
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
{{ checked }}
|
|
||||||
<div class="toggle-group" style="width: 300px">
|
|
||||||
<ToggleCheckbox text="Su"></ToggleCheckbox>
|
|
||||||
<ToggleCheckbox text="Mo"
|
|
||||||
:checked.sync="checked"></ToggleCheckbox>
|
|
||||||
<ToggleCheckbox text="Tu"></ToggleCheckbox>
|
|
||||||
<ToggleCheckbox text="We"
|
|
||||||
:checked.sync="checked"></ToggleCheckbox>
|
|
||||||
<ToggleCheckbox text="Th"></ToggleCheckbox>
|
|
||||||
<ToggleCheckbox text="Fr"
|
|
||||||
:checked.sync="checked"></ToggleCheckbox>
|
|
||||||
<ToggleCheckbox text="Sa"
|
|
||||||
:checked.sync="checked"
|
|
||||||
:disabled="true"></ToggleCheckbox>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
<br/>
|
|
||||||
Disabled:
|
|
||||||
<div class="toggle-group" style="width: 300px">
|
|
||||||
<ToggleCheckbox text="Su" :disabled="true"></ToggleCheckbox>
|
|
||||||
<ToggleCheckbox text="Mo" :disabled="true"></ToggleCheckbox>
|
|
||||||
<ToggleCheckbox text="Tu" :disabled="true"></ToggleCheckbox>
|
|
||||||
<ToggleCheckbox text="We" :disabled="true"></ToggleCheckbox>
|
|
||||||
<ToggleCheckbox text="Th" :disabled="true"></ToggleCheckbox>
|
|
||||||
<ToggleCheckbox text="Fr" :disabled="true"></ToggleCheckbox>
|
|
||||||
<ToggleCheckbox text="Sa" :disabled="true"></ToggleCheckbox>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
checked: true,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { withKnobs, number } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import CountBadge from './countBadge.vue';
|
|
||||||
|
|
||||||
const stories = storiesOf('Count Badge', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('simple', () => ({
|
|
||||||
components: { CountBadge },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<count-badge :count="2" :show="true"></count-badge>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
}))
|
|
||||||
.add('bind count', () => ({
|
|
||||||
components: { CountBadge },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<count-badge :count="count" :show="true"></count-badge>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
props: {
|
|
||||||
count: {
|
|
||||||
default: number('Count', 3),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import datepicker from './datepicker.vue';
|
|
||||||
|
|
||||||
const stories = storiesOf('Date Picker', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('simple', () => ({
|
|
||||||
components: { datepicker },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<datepicker></datepicker>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
}));
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { number, text, withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import positiveIcon from '@/assets/svg/positive.svg';
|
|
||||||
|
|
||||||
const stories = storiesOf('Input-Group', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('states', () => ({
|
|
||||||
components: { },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<div class="input-group">
|
|
||||||
<div class="input-group-prepend positive-addon input-group-icon">
|
|
||||||
<div
|
|
||||||
class="svg-icon"
|
|
||||||
v-html="icon"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
v-model="number"
|
|
||||||
class="form-control"
|
|
||||||
type="number"
|
|
||||||
min="0"
|
|
||||||
required="required"
|
|
||||||
ref="input"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
<button class="btn btn-dark" @click="$refs.input.focus()">Focus ^</button>
|
|
||||||
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<div class="input-group">
|
|
||||||
|
|
||||||
<input
|
|
||||||
v-model="number"
|
|
||||||
class="form-control"
|
|
||||||
type="number"
|
|
||||||
min="0"
|
|
||||||
required="required"
|
|
||||||
>
|
|
||||||
<div class="input-group-append positive-addon input-group-icon">
|
|
||||||
<div
|
|
||||||
class="svg-icon"
|
|
||||||
v-html="icon"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
icon: positiveIcon,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
text: {
|
|
||||||
default: text('Input Text', 'example text'),
|
|
||||||
},
|
|
||||||
number: {
|
|
||||||
default: number('Input Number', 0),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
|
|
||||||
const stories = storiesOf('Margins', module);
|
|
||||||
|
|
||||||
const margins = [
|
|
||||||
'mr-1 ml-1 my-1',
|
|
||||||
'mx-2 ml-3 my-2',
|
|
||||||
'mx-2 ml-1 my-1',
|
|
||||||
'ml-1 mr-4',
|
|
||||||
'ml-2 mr-2 my-1',
|
|
||||||
'ml-75 my-3 mr-2',
|
|
||||||
];
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('overview', () => ({
|
|
||||||
components: { },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<span class="background inline-block">
|
|
||||||
<span class="content mx-1 my-1 inline-block">
|
|
||||||
<span class="text mx-1 my-1 inline-block">
|
|
||||||
The margin between gray and teal is the margin content.
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<span v-for="m in margins"
|
|
||||||
class="background mx-1 my-1 inline-block">
|
|
||||||
<span class="content inline-block" :class="m">
|
|
||||||
<span class="mx-1 my-1 inline-block">{{m}}</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
margins,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { withKnobs, boolean } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import PinBadge from './pinBadge.vue';
|
|
||||||
|
|
||||||
const stories = storiesOf('Pin Badge', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('states', () => ({
|
|
||||||
components: { PinBadge },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<pin-badge :pinned="pinned"></pin-badge>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
props: {
|
|
||||||
pinned: {
|
|
||||||
default: boolean('Pinned', false),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import SelectList from './selectList.vue';
|
|
||||||
import SelectDifficulty from '../tasks/modal-controls/selectDifficulty';
|
|
||||||
import SelectTranslatedArray from '../tasks/modal-controls/selectTranslatedArray';
|
|
||||||
|
|
||||||
const stories = storiesOf('Select List', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('states', () => ({
|
|
||||||
components: { SelectList },
|
|
||||||
template: `
|
|
||||||
<div class="m-xl">
|
|
||||||
Hover / Click on:
|
|
||||||
<select-list class="mb-4"
|
|
||||||
:items="items"
|
|
||||||
:key-prop="'key'"
|
|
||||||
:value="selected"
|
|
||||||
@select="selected = $event">
|
|
||||||
<template v-slot:item="{ item }">
|
|
||||||
<div v-if="item">
|
|
||||||
Template: {{ item?.key }} - {{ item?.value.text }}
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
Nothing selected
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</select-list>
|
|
||||||
|
|
||||||
Disabled:
|
|
||||||
<select-list :disabled="true"
|
|
||||||
:value="selected"
|
|
||||||
:items="items"
|
|
||||||
:key-prop="'key'"
|
|
||||||
class="mb-4">
|
|
||||||
<template v-slot:item="{ item }">
|
|
||||||
Template: {{ item?.key }} - {{ item?.value.text }}
|
|
||||||
</template>
|
|
||||||
</select-list>
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
Selected: {{ selected }} <br/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
selected: null,
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
key: 1,
|
|
||||||
value: {
|
|
||||||
text: 'First',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2,
|
|
||||||
value: {
|
|
||||||
text: 'Second',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
.add('difficulty', () => ({
|
|
||||||
components: { SelectDifficulty },
|
|
||||||
template: `
|
|
||||||
<div class="m-xl">
|
|
||||||
<select-difficulty
|
|
||||||
:value="selected"
|
|
||||||
@select="selected = $event"
|
|
||||||
>
|
|
||||||
|
|
||||||
</select-difficulty>
|
|
||||||
|
|
||||||
Selected: {{ selected }}
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
selected: 2,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
.add('translated array', () => ({
|
|
||||||
components: { SelectTranslatedArray },
|
|
||||||
template: `
|
|
||||||
<div class="m-xl">
|
|
||||||
<select-translated-array
|
|
||||||
:items="['daily', 'weekly', 'monthly']"
|
|
||||||
:value="selected"
|
|
||||||
@select="selected = $event"
|
|
||||||
>
|
|
||||||
|
|
||||||
</select-translated-array>
|
|
||||||
|
|
||||||
Selected: {{ selected }}
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
selected: 'weekly',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { text, withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
const stories = storiesOf('Textarea', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('states', () => ({
|
|
||||||
components: { },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<textarea autofocus ref="area">Normal {{text}}</textarea>
|
|
||||||
<br />
|
|
||||||
<button class="btn btn-dark" @click="$refs.area.focus()">Focus ^</button>
|
|
||||||
<br />
|
|
||||||
<textarea placeholder="placeholder"></textarea>
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<textarea disabled>Disabled {{text}}</textarea><br />
|
|
||||||
|
|
||||||
<textarea readonly>Readonly {{text}}</textarea> <br />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
props: {
|
|
||||||
text: {
|
|
||||||
default: text('Area Message', 'example text'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
import { storiesOf } from '@storybook/vue';
|
|
||||||
import { text, withKnobs } from '@storybook/addon-knobs';
|
|
||||||
import toggleSwitch from './toggleSwitch';
|
|
||||||
|
|
||||||
const stories = storiesOf('Toggle Switch', module);
|
|
||||||
|
|
||||||
stories.addDecorator(withKnobs);
|
|
||||||
|
|
||||||
stories
|
|
||||||
.add('label only', () => ({
|
|
||||||
components: { toggleSwitch },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<toggle-switch :label="label"></toggle-switch>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
props: {
|
|
||||||
label: {
|
|
||||||
default: text('Label', 'example text'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
.add('with description', () => ({
|
|
||||||
components: { toggleSwitch },
|
|
||||||
template: `
|
|
||||||
<div style="position: absolute; margin: 20px">
|
|
||||||
<toggle-switch :label="label" :hover-text="description"></toggle-switch>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
props: {
|
|
||||||
label: {
|
|
||||||
default: text('Label', 'example text'),
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
default: text('Description', 'description text'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@@ -32,9 +32,6 @@ export default function staticMiddleware (expressApp) {
|
|||||||
/* The remaining files are not cached yet. */
|
/* The remaining files are not cached yet. */
|
||||||
expressApp.use('/static', express.static(`${BASE_DIR}/website/client/dist/static`));
|
expressApp.use('/static', express.static(`${BASE_DIR}/website/client/dist/static`));
|
||||||
|
|
||||||
/* Storybook files, not cached yet. */
|
|
||||||
expressApp.use('/storybook', express.static(`${BASE_DIR}/website/client/dist/storybook`));
|
|
||||||
|
|
||||||
/* APIdoc files, not cached yet. */
|
/* APIdoc files, not cached yet. */
|
||||||
expressApp.use('/apidoc', express.static(`${BASE_DIR}/apidoc/html`));
|
expressApp.use('/apidoc', express.static(`${BASE_DIR}/apidoc/html`));
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user