Skip to content

Latest commit

 

History

History
80 lines (59 loc) · 1.77 KB

README.md

File metadata and controls

80 lines (59 loc) · 1.77 KB
Raw

MarkLogic UI Component Library

React component library that extends Ant Design.

Installing the Library

npm install --save marklogic-ui-library

Using the Component Library

  • Setup your application repo to handle custom Ant Design theming https://ant.design/docs/react/use-with-create-react-app#Advanced-Guides
  • Copy config-overrides.js from /playground into application repo
  • Add Ant Design CSS file to app: '../node_modules/antd/dist/antd.css';
  • Add minifed Marklogic UI CSS file to app: path to '../node_modules/marklogic-ui-library/dist/styles.min.css'
import React from 'react'

import { MlButton } from 'marklogic-ui-library';

const App = () => {
  return (
    <MlButton>Submit</MlButton>
  )
}

Developing UI Components

# Install Dependencies
npm run install:all 

# Start Rollup (listens for changes for components in src folder)
root directory
npm start

# Start Playground (import and test new components here)
cd playground
npm start

Playground: localhost:3000
  • Add new components in the root/src folder
  • Add CSS to root/src/styles.scss file
  • Import/Export component in root/src/index.js
  • Create Stories for the component in the root/stories folder

Viewing UI Components

This repo uses Storybook to view components and provide usage guidelines and API documentation

# Install Dependencies
npm run install:all 

# Start Storybook
npm run storybook

Storybook: localhost:6006

Publishing static version of Storybook

# Build Storybook
npm run build-storybook

Static files will be in the /storybook-dist folder

Publishing the Library to NPM

Make sure you are logged in to npm

Update root/package.json
version needs to increase everytime it is published.

# Build minified CSS and publish library to NPM
npm publish