@mands/mns-fe-pattern-library
Advanced tools
Welcome to the FESK Pattern Library. This npm module is designed to allow consumers to easily include M&S styles and layouts through elements, components, modules and templates in their projects.
To install the module
npm install @mands/mns-fe-pattern-library
In order for the project to use the styles, include sassPath config in your build config file. For example, if you are using webpack add the following to your webpack.config.js
const patternLibrary = require('@mands/mns-fe-pattern-library');
[{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true,
sourceMapContents: true,
includePaths: [patternLibrary.sassPath]
}
}]
To implement specific parts of the pattern library visit fesk-pattern-library-dev.eu-gb.mybluemix.net for more detailed implementation information.
The style guide is purely a SASS library to provide global styling for:
These are all located in lib/mns-fe-styles and as lib is set as a sass path you can @import parts of this using mns-fe-styles as the first part of the path. e.g @import 'mns-fe-styles/colors'. You can also import everything using @import 'mns-fe-styles/all'. It is important that you only import parts of the style guide styles once in your application otherwise you will get duplication in your CSS output.
brew update
brew install node
Check it's installed using node -v
Alternatively you can follow the official NodeJS installation guide.
Only if you are using a Mac
cd ~/
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
nvm install 8.9.0
Within the fesk-pattern-library repository run:
npm install
The fesk-pattern-library repository is shrink-wrapped (find more on Shrinkwrapping here - https://docs.npmjs.com/cli/shrinkwrap). Hence the dependencies would be downloaded from npm-shrinkwrap.json instead of from package.json.
Delete the npm-shrinkwrap.json file and then run:
npm install
Create a new shrinkwrap file:
npm shrinkwrap --dev
Find more here - https://github.com/DigitalInnovation/fesk-documentation/blob/master/how_tos/shrinkwrap_npm_dependencies.md
When this is running locally it will run Liniting checks, unit tests and will automatically reload the application when making live code changes both client and server side.
npm run dev
This is how the application is started after deployment to an environment. This requires the bundled assets.
npm start
If you need to create a bundle locally.
npm run bundle
FESK is equipped with lazyloading of images.
Import the lazyloading script into your javascript:
import '../../lib/lazysizes.min';
Render it with handlebars:
res.render('productList', {
cssBundle: getAssetsPromise.then(bundles => bundles['productList.css']),
jsBundle: getAssetsPromise.then(bundles => bundles['productList.js']),
commonjsBundle: getAssetsPromise.then(bundles => bundles['common.js']),
lazysizesBundle: getAssetsPromise.then(bundles => bundles['lib/lazysizes.min.js']),
title: 'productList',
});
In your view:
<div class="product__image">
<noscript>
<img alt="" src="{{{fullImageUrl}}}" itemprop="image"/>
</noscript>
<img class="lazyload" data-srcset="{{{fullImageUrl}}}?wid=135&fmt=pjpeg 135w, {{{fullImageUrl}}}?wid=270&fmt=pjpeg&qlt=45 270w,
{{{fullImageUrl}}}?wid=245&fmt=pjpeg 245w, {{{fullImageUrl}}}?wid=490&fmt=pjpeg&qlt=45 490w,
{{{fullImageUrl}}}?wid=335&fmt=pjpeg&qlt=90 335w, {{{fullImageUrl}}}?wid=670&fmt=pjpeg&qlt=45 670w,
{{{fullImageUrl}}}?wid=218&fmt=pjpeg 218w, {{{fullImageUrl}}}?wid=436&fmt=pjpeg&qlt=50 436w,
{{{fullImageUrl}}}?wid=264&fmt=pjpeg&qlt=80 264w, {{{fullImageUrl}}}?wid=528&fmt=pjpeg&qlt=35 528w"
sizes="auto"
src="{{{fullImageUrl}}}&fmt=pjpeg" alt="" itemprop="image"/>
</div>
To lint all JS files in the src/ directory and webpack config files.
npm run lint:js
To check linting issues in all .scss and .sass files in src directory.
npm run lint:sass
A config file named .sass-lint.yml is added at the root folder which contains the list of files included for lint test and rules. This overrides the default config file which is available with same name in node_module.
To run all unit test files that end in .test.js
npm run test:unit
We have extensive Concourse documentation which can be found here!
Before you can deploy your pipeline you will need to update TEAM_NAME in /ci/deploy-ci-dachs.sh to your concourse team name.
In majority of the cases deployment should be done via Concourse following the steps listed below:
Run ./deployment/deploy-ci.sh target hash providing two arguments:
This will create a new tag in the project repo's master branch which will be picked up by the Concourse pipeline.
At this point you should be able to go to Concourse and see how the build is progressing.
Please note: this style of deployment can ONLY be done on master, it is not possible to deploy from a branch.
Emergency local deployment is created for the cases where Concourse is unavailable but deployment needs to proceed. To run emergency deploy the following prerequisites must be met.
On Mac
Tap the Cloud Foundry formula repository:
brew tap cloudfoundry/tap
Install the cf-cli:
brew install cf-cli
On Linux
Use instructions provided in the Cloud Foundry documentation.
Download correct binary from the Autopilot's latest release page.
Make binary executable by running
chmod a+x path_to_your_downloaded_binary
Then
cf install-plugin path_to_your_downloaded_binary
Checkout commit you want to deploy to your local machine.
Run ./deployment/deploy-emergency.sh target hash providing two arguments:
As with deployment from Concourse, this will create a tag on your current branch as a record of deployment.
Create a new handlebars template in the views directory.
In src/server/routes create a new directory with the handlers and routes you need. Don't forget to load them in src/server/routes/index.js
If you want client-side JavaScript and CSS, create a directory in src/client. Add an entry point to the JavaScript file in webpack.config.js. Require the SCSS file in the javascript file in order for it to be recognised by the build system.
/src
/client
/examplePage
examplePage.js
examplePage.scss
/server
/routes
/examplePage
handlers.js
handlers.test.js
routes.js
/views
examplePage.hbs
index.js <-- Edit
webpack.config.js <-- Edit
Decide whether the new pattern is an element, component or module.
Select an appropriate name for the pattern.
Then:
npm run new:pattern [location of pattern] [name of pattern]
The location of the pattern assumes that the path will continue from ./lib/mns-fe-patterns/* For example, if I wanted to create an element called house:
npm run new:pattern elements house
If the generation is successful, you will find your pattern with the skeleton files:
NOTE: The generator is not capable of adding directories to paths therefore it is imperative to ensure that all directories listed in the path already exist. For example, if I had a folder of elements but wanted to create the house pattern in a subfolder called houses, the build would fail without the creation of the houses directory prior to the generation of the house pattern.
At current state a set of changes need to be made every time you update mns-fe-deployment.
Delete pipelines/build-test-deploy-sit3 folder.
Rename pipelines/publish-to-npm/publish-to-npm.optional.yml to publish-to-npm.optional.pipe.yml.
Copy contents of pipelines/publish-to-npm/resources.optional.yml into dashboard.yml replacing the sit3 resource.
Edit pipelines/test-pull-request/test-pull-request.sh and comment out this code
echo "== Run acceptance tests with saucelabs =="
npm run bundle
npm run start:cf &
npm run test:ui:sauce:ci
Team Pegasus
FAQs
FESK Pattern Library
The npm package @mands/mns-fe-pattern-library receives a total of 0 weekly downloads. As such, @mands/mns-fe-pattern-library popularity was classified as not popular.
We found that @mands/mns-fe-pattern-library demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.