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