mirror of https://github.com/ghostfolio/ghostfolio
Browse Source
* Setup ui library with storybook * Add value component with story * Update changelogpull/344/head
Thomas Kaul
3 years ago
committed by
GitHub
GitHub
43 changed files with 4441 additions and 184 deletions
@ -0,0 +1,11 @@ |
|||
module.exports = { |
|||
stories: [], |
|||
addons: ['@storybook/addon-essentials'] |
|||
// uncomment the property below if you want to apply some webpack config globally
|
|||
// webpackFinal: async (config, { configType }) => {
|
|||
// // Make whatever fine-grained changes you need that should apply to all storybook configs
|
|||
|
|||
// // Return the altered config
|
|||
// return config;
|
|||
// },
|
|||
}; |
|||
@ -0,0 +1,10 @@ |
|||
{ |
|||
"extends": "../tsconfig.base.json", |
|||
"exclude": [ |
|||
"../**/*.spec.js", |
|||
"../**/*.spec.ts", |
|||
"../**/*.spec.tsx", |
|||
"../**/*.spec.jsx" |
|||
], |
|||
"include": ["../**/*"] |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
{ |
|||
"extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], |
|||
"ignorePatterns": ["!**/*"], |
|||
"overrides": [ |
|||
{ |
|||
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"], |
|||
"rules": {} |
|||
}, |
|||
{ |
|||
"files": ["src/plugins/index.js"], |
|||
"rules": { |
|||
"@typescript-eslint/no-var-requires": "off", |
|||
"no-undef": "off" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
{ |
|||
"fileServerFolder": ".", |
|||
"fixturesFolder": "./src/fixtures", |
|||
"integrationFolder": "./src/integration", |
|||
"modifyObstructiveCode": false, |
|||
"supportFile": "./src/support/index.ts", |
|||
"pluginsFile": "./src/plugins/index", |
|||
"video": true, |
|||
"videosFolder": "../../dist/cypress/apps/ui-e2e/videos", |
|||
"screenshotsFolder": "../../dist/cypress/apps/ui-e2e/screenshots", |
|||
"chromeWebSecurity": false, |
|||
"baseUrl": "http://localhost:4400" |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"name": "Using fixtures to represent data", |
|||
"email": "hello@cypress.io" |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
describe('ui', () => { |
|||
beforeEach(() => cy.visit('/iframe.html?id=valuecomponent--loading')); |
|||
it('should render the component', () => { |
|||
cy.get('gf-value').should('exist'); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,22 @@ |
|||
// ***********************************************************
|
|||
// This example plugins/index.js can be used to load plugins
|
|||
//
|
|||
// You can change the location of this file or turn off loading
|
|||
// the plugins file with the 'pluginsFile' configuration option.
|
|||
//
|
|||
// You can read more here:
|
|||
// https://on.cypress.io/plugins-guide
|
|||
// ***********************************************************
|
|||
|
|||
// This function is called when a project is opened or re-opened (e.g. due to
|
|||
// the project's config changing)
|
|||
|
|||
const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor'); |
|||
|
|||
module.exports = (on, config) => { |
|||
// `on` is used to hook into various events Cypress emits
|
|||
// `config` is the resolved Cypress config
|
|||
|
|||
// Preprocess Typescript file using Nx helper
|
|||
on('file:preprocessor', preprocessTypescript(config)); |
|||
}; |
|||
@ -0,0 +1,33 @@ |
|||
// ***********************************************
|
|||
// This example commands.js shows you how to
|
|||
// create various custom commands and overwrite
|
|||
// existing commands.
|
|||
//
|
|||
// For more comprehensive examples of custom
|
|||
// commands please read more here:
|
|||
// https://on.cypress.io/custom-commands
|
|||
// ***********************************************
|
|||
|
|||
// eslint-disable-next-line @typescript-eslint/no-namespace
|
|||
declare namespace Cypress { |
|||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|||
interface Chainable<Subject> { |
|||
login(email: string, password: string): void; |
|||
} |
|||
} |
|||
//
|
|||
// -- This is a parent command --
|
|||
Cypress.Commands.add('login', (email, password) => { |
|||
console.log('Custom command example: Login', email, password); |
|||
}); |
|||
//
|
|||
// -- This is a child command --
|
|||
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
|
|||
//
|
|||
//
|
|||
// -- This is a dual command --
|
|||
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
|
|||
//
|
|||
//
|
|||
// -- This will overwrite an existing command --
|
|||
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
|
|||
@ -0,0 +1,17 @@ |
|||
// ***********************************************************
|
|||
// This example support/index.js is processed and
|
|||
// loaded automatically before your test files.
|
|||
//
|
|||
// This is a great place to put global configuration and
|
|||
// behavior that modifies Cypress.
|
|||
//
|
|||
// You can change the location of this file or turn off
|
|||
// automatically serving support files with the
|
|||
// 'supportFile' configuration option.
|
|||
//
|
|||
// You can read more here:
|
|||
// https://on.cypress.io/configuration
|
|||
// ***********************************************************
|
|||
|
|||
// Import commands.js using ES2015 syntax:
|
|||
import './commands'; |
|||
@ -0,0 +1,10 @@ |
|||
{ |
|||
"extends": "../../tsconfig.base.json", |
|||
"compilerOptions": { |
|||
"sourceMap": false, |
|||
"outDir": "../../dist/out-tsc", |
|||
"allowJs": true, |
|||
"types": ["cypress", "node"] |
|||
}, |
|||
"include": ["src/**/*.ts", "src/**/*.js"] |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
{ |
|||
"extends": ["../../.eslintrc.json"], |
|||
"ignorePatterns": ["!**/*"], |
|||
"overrides": [ |
|||
{ |
|||
"files": ["*.ts"], |
|||
"extends": [ |
|||
"plugin:@nrwl/nx/angular", |
|||
"plugin:@angular-eslint/template/process-inline-templates" |
|||
], |
|||
"rules": { |
|||
"@angular-eslint/directive-selector": [ |
|||
"error", |
|||
{ |
|||
"type": "attribute", |
|||
"prefix": "ghostfolio", |
|||
"style": "camelCase" |
|||
} |
|||
], |
|||
"@angular-eslint/component-selector": [ |
|||
"error", |
|||
{ |
|||
"type": "element", |
|||
"prefix": "ghostfolio", |
|||
"style": "kebab-case" |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"files": ["*.html"], |
|||
"extends": ["plugin:@nrwl/nx/angular-template"], |
|||
"rules": {} |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
const rootMain = require('../../../.storybook/main'); |
|||
|
|||
module.exports = { |
|||
...rootMain, |
|||
|
|||
core: { ...rootMain.core, builder: 'webpack5' }, |
|||
|
|||
stories: [ |
|||
...rootMain.stories, |
|||
'../src/lib/**/*.stories.mdx', |
|||
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)' |
|||
], |
|||
addons: [...rootMain.addons], |
|||
webpackFinal: async (config, { configType }) => { |
|||
// apply any global webpack configs that might have been specified in .storybook/main.js
|
|||
if (rootMain.webpackFinal) { |
|||
config = await rootMain.webpackFinal(config, { configType }); |
|||
} |
|||
|
|||
// add your own webpack tweaks if needed
|
|||
|
|||
return config; |
|||
} |
|||
}; |
|||
@ -0,0 +1 @@ |
|||
import '!style-loader!css-loader!sass-loader!../../../apps/client/src/styles.scss'; |
|||
@ -0,0 +1,9 @@ |
|||
{ |
|||
"extends": "../tsconfig.json", |
|||
"compilerOptions": { |
|||
"emitDecoratorMetadata": true |
|||
}, |
|||
|
|||
"exclude": ["../**/*.spec.ts"], |
|||
"include": ["../src/**/*", "*.js"] |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
# ui |
|||
|
|||
This library was generated with [Nx](https://nx.dev). |
|||
|
|||
## Running unit tests |
|||
|
|||
Run `nx test ui` to execute the unit tests. |
|||
@ -0,0 +1,20 @@ |
|||
module.exports = { |
|||
displayName: 'ui', |
|||
preset: '../../jest.preset.js', |
|||
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'], |
|||
globals: { |
|||
'ts-jest': { |
|||
tsconfig: '<rootDir>/tsconfig.spec.json', |
|||
stringifyContentPathRegex: '\\.(html|svg)$' |
|||
} |
|||
}, |
|||
coverageDirectory: '../../coverage/libs/ui', |
|||
transform: { |
|||
'^.+\\.(ts|js|html)$': 'jest-preset-angular' |
|||
}, |
|||
snapshotSerializers: [ |
|||
'jest-preset-angular/build/serializers/no-ng-attributes', |
|||
'jest-preset-angular/build/serializers/ng-snapshot', |
|||
'jest-preset-angular/build/serializers/html-comment' |
|||
] |
|||
}; |
|||
@ -0,0 +1 @@ |
|||
export * from './value.module'; |
|||
@ -0,0 +1,24 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { ValueComponent } from './value.component'; |
|||
|
|||
describe('ValueComponent', () => { |
|||
let component: ValueComponent; |
|||
let fixture: ComponentFixture<ValueComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ValueComponent] |
|||
}).compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(ValueComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,45 @@ |
|||
import { Meta, Story, moduleMetadata } from '@storybook/angular'; |
|||
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; |
|||
|
|||
import { ValueComponent } from './value.component'; |
|||
|
|||
export default { |
|||
title: 'Value', |
|||
component: ValueComponent, |
|||
decorators: [ |
|||
moduleMetadata({ |
|||
imports: [NgxSkeletonLoaderModule] |
|||
}) |
|||
] |
|||
} as Meta<ValueComponent>; |
|||
|
|||
const Template: Story<ValueComponent> = (args: ValueComponent) => ({ |
|||
props: args |
|||
}); |
|||
|
|||
export const Loading = Template.bind({}); |
|||
Loading.args = { |
|||
value: undefined |
|||
}; |
|||
|
|||
export const Currency = Template.bind({}); |
|||
Currency.args = { |
|||
currency: 'USD', |
|||
locale: 'en-US', |
|||
value: 7 |
|||
}; |
|||
|
|||
export const Integer = Template.bind({}); |
|||
Integer.args = { |
|||
isInteger: true, |
|||
locale: 'en-US', |
|||
value: 7 |
|||
}; |
|||
|
|||
export const Label = Template.bind({}); |
|||
Label.args = { |
|||
isInteger: true, |
|||
label: 'Label', |
|||
locale: 'en-US', |
|||
value: 7 |
|||
}; |
|||
@ -0,0 +1 @@ |
|||
import 'jest-preset-angular/setup-jest'; |
|||
@ -0,0 +1,27 @@ |
|||
{ |
|||
"extends": "../../tsconfig.base.json", |
|||
"files": [], |
|||
"include": [], |
|||
"references": [ |
|||
{ |
|||
"path": "./tsconfig.lib.json" |
|||
}, |
|||
{ |
|||
"path": "./tsconfig.spec.json" |
|||
}, |
|||
{ |
|||
"path": "./.storybook/tsconfig.json" |
|||
} |
|||
], |
|||
"compilerOptions": { |
|||
"forceConsistentCasingInFileNames": true, |
|||
"strict": true, |
|||
"noImplicitReturns": true, |
|||
"noFallthroughCasesInSwitch": true |
|||
}, |
|||
"angularCompilerOptions": { |
|||
"strictInjectionParameters": true, |
|||
"strictInputAccessModifiers": true, |
|||
"strictTemplates": true |
|||
} |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
{ |
|||
"extends": "./tsconfig.json", |
|||
"compilerOptions": { |
|||
"outDir": "../../dist/out-tsc", |
|||
"target": "es2015", |
|||
"declaration": true, |
|||
"declarationMap": true, |
|||
"inlineSources": true, |
|||
"types": [], |
|||
"lib": ["dom", "es2018"] |
|||
}, |
|||
"exclude": [ |
|||
"src/test-setup.ts", |
|||
"**/*.spec.ts", |
|||
"**/*.stories.ts", |
|||
"**/*.stories.js" |
|||
], |
|||
"include": ["**/*.ts"] |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
{ |
|||
"extends": "./tsconfig.json", |
|||
"compilerOptions": { |
|||
"outDir": "../../dist/out-tsc", |
|||
"module": "commonjs", |
|||
"types": ["jest", "node"] |
|||
}, |
|||
"files": ["src/test-setup.ts"], |
|||
"include": ["**/*.spec.ts", "**/*.d.ts"] |
|||
} |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue