npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fashiontrade/wardrobe

v6.0.1

Published

FashionTrade Component Library

Downloads

3

Readme

Wardrobe

FashionTrade Component Library.

Components styleguide

How to use

yarn add @fashiontrade/wardrobe styled-components@3

Wrap you app in a ThemeProvider and pass Theme object imported from @fashiontrade/wardrobe

import React from 'react';
import { render } from 'react-dom';
import { ThemeProvider } from 'styled-components';
import { Theme } from '@fashiontrade/wardrobe';
import App from './App';

render(
  <ThemeProvider theme={Theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

You can now use the wardrobe components:

import { Dialog } from '@fashiontrade/wardrobe';

const MyComponent = () => (
  <Dialog size="normal" open={true}>
    <Dialog.Header>Please select your profile</Dialog.Header>
    <Dialog.Body>Body text goes here</Dialog.Body>
  </Dialog>
);

export default MyComponent;

Supporting IE11

To make icons display correctly in IE11 we use svg4everybody. Add it in your app, if you need to support IE11 too.

Using what-input.

Some components use what-input-generated attributes to determine styling. To support this option in your project, follow these steps.

How to run

Workflow & conventions

Creating a new component:

Using the script

node scripts/generateComponent.js --name <ComponentName>

OR

yarn generate-component -- --name <ComponentName>

This runs the script found in scripts/generateComponent.js. which will create all the files listed below.

  1. Create a folder with component name in src/components following the current naming conventions.
  2. Create the component JS file with the same name as the folder name .js.
  3. Create the component styles file with the same name as the folder .scss (following BEM conventions).
  4. Create the markdown file with the same name as the folder .md.
  5. Inside the markdown file (Built with Styleguidist)) create all possible states of the component, to illustrate how it is used and how it looks with different prop values.
  6. Finally export your component in src/components/index.js to be bundled in the index file.

Generating Tests:

After you have created your component and ensured that it looks good in the styleguide. run the follwing command

yarn generate-tests

This runs the script found in scripts/generateTests.js. which will generate snapshots tests found in src/components/ComponentName/ComponentName.spec.js. with some conditions:

Only single components in a code block will be captured (that means that siblings will be ignored).

Example (in your markdown file):

<MyComponent foo="bar" /> // will be captured and tests generated.
<MyComponent baz="cuz" /> // will be ignored

If the component is a child of another element it will also be ignored.

Example:

<div>
  <MyComponent foo="bar" /> // Entire block will be ignored
</div>

If the component is not inside a code block wrapper, it will be ignored

Example:

// inside a code block
```jsx
<MyComponent /> // will be captured and tests generated.
```

// outside a code block
<MyComponent /> // will be ignored

Also you can use a special version of your component for Styleguide this way:

Example:

// with custom require
const MyComponentStyleguide = require('./MyComponentStyleguide').default;
<MyComponentStyleguide />; // will work

The name of the variable with required component should be <ComponenName>Styleguide.

You may need this feature in case your component, when used directly, breaks of blocks the Styleguide, e.g. Modal component.

Release process

  • Update the package version in the package.json file.
  • Open the changelog and update everything from the unreleased section to the new release version and date.
  • Commit your changes to master.
  • Go to the releases tab on Github and draft a new release.
  • Use the same tag version you added in the changelog (e.g 1.0.0).
  • Release title should be the tag prefixed with 'v' (e.g v1.0.0).
  • Copy what was Added/Changed/Fixed from the changelog and paste it in the description of the release.
  • Publish the release.
  • Go back to your terminal, run git pull and checkout the release tag (git checkout 1.0.0).
  • Publish the package to NPM registry: npm publish.

License

Apache 2.0