https://github.com/marklogic/design-system
MarkLogic Engineering UX design system
https://github.com/marklogic/design-system
Last synced: 7 months ago
JSON representation
MarkLogic Engineering UX design system
- Host: GitHub
- URL: https://github.com/marklogic/design-system
- Owner: marklogic
- License: apache-2.0
- Created: 2020-02-13T20:47:13.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-08T00:50:09.000Z (about 2 years ago)
- Last Synced: 2024-04-26T03:20:48.666Z (about 1 year ago)
- Language: JavaScript
- Size: 9.85 MB
- Stars: 2
- Watchers: 8
- Forks: 8
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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'
```jsx
import React from 'react'
import { MlButton } from 'marklogic-ui-library';
const App = () => {
return (
Submit
)
}
```
## 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
```