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.8.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
|
||||
versions:
|
||||
- 3.10.0
|
||||
|
||||
16
package-lock.json
generated
16
package-lock.json
generated
@@ -4005,7 +4005,7 @@
|
||||
"bin-pack": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/bin-pack/-/bin-pack-1.0.2.tgz",
|
||||
"integrity": "sha1-wqAU7b8L7XCjKSBi7UZXe5YSBnk="
|
||||
"integrity": "sha512-aOk0SxEon5LF9cMxQFViSKb4qccG6rs7XKyMXIb1J8f8LA2acTIWnHdT0IOTe4gYBbqgjdbuTZ5f+UP+vlh4Mw=="
|
||||
},
|
||||
"bin-version": {
|
||||
"version": "3.1.0",
|
||||
@@ -8872,7 +8872,7 @@
|
||||
"ignore-by-default": {
|
||||
"version": "1.0.1",
|
||||
"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": {
|
||||
"version": "1.0.2",
|
||||
@@ -10197,7 +10197,7 @@
|
||||
"lodash.get": {
|
||||
"version": "4.4.2",
|
||||
"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
|
||||
},
|
||||
"lodash.includes": {
|
||||
@@ -11283,7 +11283,7 @@
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -11650,7 +11650,7 @@
|
||||
"nopt": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
|
||||
"integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
|
||||
"integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
|
||||
"requires": {
|
||||
"abbrev": "1"
|
||||
}
|
||||
@@ -12249,7 +12249,7 @@
|
||||
"pause": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
|
||||
"integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
|
||||
"integrity": "sha1-HUCLP9t2kjuVQ9lvtMnf1TXZy10="
|
||||
},
|
||||
"pause-stream": {
|
||||
"version": "0.0.11",
|
||||
@@ -13359,7 +13359,7 @@
|
||||
"secure-keys": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/secure-keys/-/secure-keys-1.0.0.tgz",
|
||||
"integrity": "sha512-nZi59hW3Sl5P3+wOO89eHBAAGwmCPd2aE1+dLZV5MO+ItQctIvAqihzaAXIQhvtH4KJPxM080HsnqltR2y8cWg=="
|
||||
"integrity": "sha1-8MgtmKOxOah3aogIBQuCRDEIf8o="
|
||||
},
|
||||
"seek-bzip": {
|
||||
"version": "1.0.5",
|
||||
@@ -13707,7 +13707,7 @@
|
||||
"sliced": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/sliced/-/sliced-1.0.1.tgz",
|
||||
"integrity": "sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA=="
|
||||
"integrity": "sha1-CzpmK10Ewxd7GSa+qCsD+Dei70E="
|
||||
},
|
||||
"snapdragon": {
|
||||
"version": "0.8.2",
|
||||
|
||||
@@ -28,34 +28,6 @@ npm run lint
|
||||
### Customize configuration
|
||||
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
|
||||
|
||||
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,
|
||||
},
|
||||
};
|
||||
}
|
||||
14245
website/client/package-lock.json
generated
14245
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",
|
||||
"lint": "vue-cli-service lint .",
|
||||
"lint-no-fix": "vue-cli-service lint --no-fix .",
|
||||
"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"
|
||||
"postinstall": "node ./scripts/npm-postinstall.js"
|
||||
},
|
||||
"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-eslint": "^4.5.19",
|
||||
"@vue/cli-plugin-router": "^5.0.8",
|
||||
@@ -57,7 +49,6 @@
|
||||
"uuid": "^9.0.1",
|
||||
"validator": "^13.9.0",
|
||||
"vue": "^2.7.10",
|
||||
"vue-cli-plugin-storybook": "2.1.0",
|
||||
"vue-fragment": "^1.6.0",
|
||||
"vue-mugen-scroll": "^0.2.6",
|
||||
"vue-router": "^3.6.5",
|
||||
|
||||
@@ -6,8 +6,4 @@ if (process.env.NODE_ENV === 'production') {
|
||||
execSync('npm run build', {
|
||||
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. */
|
||||
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. */
|
||||
expressApp.use('/apidoc', express.static(`${BASE_DIR}/apidoc/html`));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user