https://github.com/zepdev/zeppelin-element-library-react

React Components library based on the zeppelin-element-library
https://github.com/zepdev/zeppelin-element-library-react

design-system

Last synced: about 3 hours ago
JSON representation

React Components library based on the zeppelin-element-library

• Host: GitHub
• URL: https://github.com/zepdev/zeppelin-element-library-react
• Owner: zepdev
• Created: 2019-05-16T08:28:40.000Z (over 5 years ago)
• Default Branch: development
• Last Pushed: 2023-09-15T14:19:32.000Z (about 1 year ago)
• Last Synced: 2024-11-01T09:39:43.493Z (16 days ago)
• Topics: design-system
• Language: JavaScript
• Homepage:
• Size: 7.14 MB
• Stars: 1
• Watchers: 6
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# A React Component and Icon Library using Zeppelin Element Library

## ⚠️ This Design System is deprecated and no longer maintained. npm packges will stay available, but please make sure to opt out until 2025 ⚠️

Please see (Zeppelin Design System)[https://live-zds.zepdev.net/] for more detailed information.

install

```

yarn add @zlab-de/zel-react

```

## Getting Started: Components

This library requires the import of **\*zel.css** for apply all styles from the Zeppelin Element Library.

```

// MyComponent.jsx

import React from 'react'

import Button from '@zlab-de/zel-react/Button'

function MyComponent(){

    return(

        


            Click Me!

        

    )

}


export default MyComponent

// App.js

import React, { Component } from 'react';

import "@zlab-de/zel-react/zel.css"

import MyComponent from "./MyComponent"

class App extends Component {

  render() {

    return (

      

    );

  }

}

export default App;

```

## guidelines.json from Zeppelin Element Library

This repository also have a **guidelines.json** file available for you to help with styling. This file contains the following information (see the guidelines section for more information); colors, spacing, and typography specifications. Its intended use if for users using a CSS-in-JS solution to be able to call colors and spacing easier.

Example with React-JSS Theming

```

import React from 'react'

import withStyles, {ThemeProvider} from 'react-jss'

import theme from '@zlab-de/zel-react/guidelines.json'

const styles = theme => ({

  div: {

    marginBottom: `${ theme.spacing.component.xxl.rem }rem`,

    color: theme.colors.primary.indigoBlue.hex,

  },

})

function MyComponent(){

    return(

        


            i'm a component

        

    )

}


export default withStyles(styles)(MyComponent)

const App = () => (

  

    I am a button with green background

  

)

```

## Props

Any alternative props that you wish to pass to a component (ie inline styles) will always be passed to the outer element of that component. For example, see the code for Tag below.

```

import React from 'react';

import PropTypes from 'prop-types';

import clsx from 'clsx';

import ZepiconsClose from '@zlab-de/zel-react-icons/ZepiconsClose';

const Tag = ({ className: classNameProp, children, onClose, ...other }) => {

  return (

    

      {children}

      

        

      

    

  );

};

Tag.propTypes = {

  className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),

  children: PropTypes.string

};

export default Tag;

```

## Build files

This project uses the build files from Material UI (../../babel.config.js). To build this package successfully, you must first clone the Material UI repository and then add this package into @material-ui/packages/.

Note if we remove Downshift, please update the rollup file. We had to change ForwardRef to isForwardRef.

Publish TO NPM from build folder after running yarn build