@moda/om NPM | npm.io

@moda/om

Moda Operandi's design system expressed as React components.

Developing

Getting Started

Clone this repository and install dependencies:

git clone git@github.com:ModaOperandi/om.git
cd om
npm install

This repo includes scaffolders for generating folder/file structure for: React Components, as well as SASS mixins and functions.

npm run scaffold:component FooBar
# => Wrote: ./src/components/FooBar/index.ts
# => Wrote: ./src/components/FooBar/FooBar.scss
# => Wrote: ./src/components/FooBar/FooBar.stories.tsx
# => Wrote: ./src/components/FooBar/FooBar.tsx
# => Wrote: ./src/components/FooBar/FooBar.test.tsx
# => Updated index.
# => ✨Done in 0.10s.

This creates a folder in the correct place in addition to immediately runnable test and story. The React component it generates has some reasonable defaults, such as extending the base HTML element types as well as ensuring the component can be extended using CSS. It updates the components/index.ts with it's own export so that when built the component is importable via named import.

The SASS scaffolders functions in a similar manner.

npm run scaffold:mixin foobar
# => Wrote: ./src/mixins/foobar/_foobar.scss
# => Wrote: ./src/mixins/foobar/foobar.stories.scss
# => Wrote: ./src/mixins/foobar/foobar.stories.tsx
# => Updated index.
# => ✨Done in 0.10s.

Developing

Once you've scaffolded out the file structure, boot up Storybook to drive out the component's development.

npm run storybook
# => Local: http://localhost:6006/

You'll see your scaffolded story in the appropriate place in the story tree.

Committing and Releasing

We are using semantic release to automate versioning and publishing the package, and commitizen to assist with formatting commits conforming to conventional changelog.

Once you want to commit something, git add it then run the commitizen CLI. If you have it installed globally (npm install -g commitizen), you can run git cz and it will walk you through the steps.

When you're happy push to a feature branch and once the code is in master, semantic release will detect how to version it and automatically publish it to NPM.

Usage

Getting Started

npm install --save @moda/om

Import the Component CSS in your global SCSS file:

@import '~@moda/om/dist/styles';

Import and use components:

import { Button } from '@moda/om';

<Button>Click me</Button>;

Import and use the mixins/functions library:

@import '~@moda/om';

body {
  @include text(body1);
  padding: spacing(2, 4);
}

@moda/icons @moda/tokens @storybook/addon-styling @types/classnames classnames credit-card-type focus-visible proportional-scale react-focus-on react-input-mask scroll-into-view-if-needed storybook use-cursor

@infinitebrahmanuniverse/nolb-_mod @everything-registry/sub-chunk-612 @zalastax/nolb-_mod

1 month ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

@moda/om v19.4.1

@moda/om

Meta

Developing

Getting Started

Developing

Committing and Releasing

Usage

Getting Started