open-index/open-npm huggingface dataset:
npm package: @rebasejs/rebase
Description: Set of UI components built for React with styled-components and styled-system.
Author: Rafael Franco
Latest version: 1.2.0

# Rebase

Set of UI components built for [React][] with [styled-components][] and [styled-system][].

Read the docs: [https://rebasejs.com][]

[![Build Status][badge]][travis]
[![Coverage][coverage-badge]][coverage]
[![Downloads][downloads-badge]][npm]
[![Version][version-badge]][npm]
[![MIT License][license-badge]](LICENSE.md)

[badge]: https://flat.badgen.net/travis/rebasejs/rebase/master
[travis]: https://travis-ci.org/rebasejs/rebase
[coverage-badge]: https://flat.badgen.net/codecov/c/github/rebasejs/rebase
[coverage]: https://codecov.io/github/rebasejs/rebase
[downloads-badge]: https://flat.badgen.net/npm/dw/@rebasejs/rebase
[version-badge]: https://flat.badgen.net/npm/v/@rebasejs/rebase
[license-badge]: https://flat.badgen.net/badge/license/MIT/blue
[npm]: https://npmjs.com/package/@rebasejs/rebase

## Getting Started

### Installation

```bash
npm i @rebasejs/rebase
```

### Components

- [Badge](https://rebasejs.com/components/badge)
- [Box](https://rebasejs.com/components/box)
- [Button](https://rebasejs.com/components/button)
- [Flex](https://rebasejs.com/components/flex)
- [Heading](https://rebasejs.com/components/heading)
- [Image](https://rebasejs.com/components/image)
- [Link](https://rebasejs.com/components/link)
- [Table](https://rebasejs.com/components/table)
- [Text](https://rebasejs.com/components/text)

### Usage

```jsx
import React from 'react';
import { Box, Heading, Button } from '@rebasejs/rebase';

export default () => (
  <Box>
    <Heading>Hello</Heading>
    <Button variant="primary">Rebase</Button>
  </Box>
);
```

### Related

- [React][]
- [styled-system][]
- [styled-components][]

[https://rebasejs.com]: https://rebasejs.com
[react]: https://reactjs.org/
[styled-components]: https://www.styled-components.com/
[styled-system]: https://styled-system.com/
npm package: @rebass/components
Description: Create consistent styled-system based React UI components
Author: Brent Jackson
Latest version: 4.0.0-1


# @rebass/components

Create consistent styled-system based React UI components
(formerly system-components)

Built with [styled-system][sys],
with support for [styled-components][sc] & [emotion][emotion]

[![Build Status][build-badge]][build]

[build-badge]: https://img.shields.io/travis/rebassjs/components/master.svg?style=flat-square
[build]: https://travis-ci.org/rebassjs/components

```js
import system from '@rebass/components'

// creates a Box with default props tied to your theme
const Box = system({
  p: 2,
  bg: 'blue'
}, 'space', 'color')
```

Or, to use with [emotion][emotion]:

```js
import system from '@rebass/components/emotion'
```

## Usage

To create a styled-component with default props that hook into [styled-system][sys] props, pass a plain object as the first argument to the `system` function and pass the names of the styled-system functions as arguments after.

```js
const Card = system({
  px: 2,
  py: 3,
  border: '1px solid',
  borderColor: 'lightGray',
  borderRadius: 2
}, 'space', 'borders', 'borderColor', 'borderRadius')
```

@rebass/components automatically adds prop type definitions and removes style props from the underlying HTML element.

See the [styled-system docs][sys] for a complete list of the available style functions.

### Add style props without defaultProps

@rebass/components can also be created with [styled-system][sys] props without defining `defaultProps`.

```js
const Box = system(
  'space',
  'width',
  'color'
)
```

This allows for style props to be passed to the component instance:

```jsx
<Box
  width={1/2}
  px={3}
  py={4}
  bg='blue'
/>
```

### Using custom functions

Custom style functions can be passed as an argument.

```js
const Box = system(
  props => ({
    height: props.height
  })
)
```

### Changing the underlying HTML element

@rebass/components default to using a `<div>` as the HTML element.
To change the HTML element use the `is` prop.

```js
const Heading = system({
  is: 'h2',
  m: 0,
  fontSize: 6
})
```

Since `is` is a prop, it can also be passed to the element when used.
This is useful for one-off changes to ensure semantic markup.

```js
<Heading is='h1'>
  Hello
</Heading>
```

### Extending components

To extend another component, use the `extend` prop in your component definition.

```js
const Text = system({
  fontSize: 2,
}, 'fontSize')

const Bold = system({
  extend: Text,
  fontWeight: 'bold'
}, 'fontWeight')
```

### CSS prop

To add one-off custom CSS to any @rebass/component, use the `css` prop.

```js
<Heading css='opacity:0.75;'>
  Hello
</Heading>
```

The `css` prop can also accept object literal syntax.

```jsx
<Heading
  css={{
    opacity: 3/4
  }}>
  Hello
</Heading>
```

---

[MIT License](License.md)

[sys]: https://github.com/jxnblk/styled-system
[sc]: https://github.com/styled-components/styled-components
[emotion]: https://github.com/emotion-js/emotion
npm package: @rebass/form
Description: Semi-controlled React form component with render props, inspired by Formik
Author: Brent Jackson
Latest version: 1.0.0-2


# @rebass/form

Semi-controlled React form component with render props,
inspired by [Formik][]

```sh
npm i @rebass/form
```

```jsx
import React from 'react'
import Form from '@rebass/form'

const validate = ({ email, password }) => {
  const errors = {}

  if (!email) errors.email = 'Email address is required'

  if (!password) errors.password = 'Password is required'

  return errors
}

class SignUpForm extends React.Component {
  state = {
    email: '',
    password: ''
  }

  handleChange = values => {
    this.setState(values)
  }

  handleSubmit = (values, formState) => {
    // do something...
  }

  render () {
    return (
      <Form
        values={this.state}
        onChange={this.handleChange}
        onSubmit={this.handleSubmit}
        validate={validate}
        render={({
          values,
          touched,
          errors,
          onBlur,
          onChange,
          onSubmit
        }) => (
          <form onSubmit={onSubmit}>
            <label htmlFor='email'>Email</label>
            <input
              id='email'
              name='email'
              type='text'
              value={values.email}
              onBlur={onBlur}
              onChange={onChange}
            />
            <label htmlFor='password'>Email</label>
            <input
              id='password'
              name='password'
              type='password'
              value={values.password}
              onBlur={onBlur}
              onChange={onChange}
            />
            <button>Sign Up</button>
          </form>
        )}
      />
    )
  }
}
```

MIT License

[Formik]: https://github.com/jaredpalmer/formik
npm package: @rebass/forms
Description: Accessible and themeable form components for use with Rebass or Theme UI.
Latest version: 4.0.6


# @rebass/forms

Accessible and themeable form components for use with Rebass or Theme UI.

```sh
npm i @rebass/forms
```

```jsx
import React from 'react'
import { Box, Flex } from 'rebass'
import {
  Label,
  Input,
  Select,
  Textarea,
  Radio,
  Checkbox,
} from '@rebass/forms'

export default () =>
  <Box
    as='form'
    onSubmit={e => e.preventDefault()}
    py={3}>
    <Flex mx={-2} mb={3}>
      <Box width={1/2} px={2}>
        <Label htmlFor='name'>Name</Label>
        <Input
          id='name'
          name='name'
          defaultValue='Jane Doe'
        />
      </Box>
      <Box width={1/2} px={2}>
        <Label htmlFor='location'>Location</Label>
        <Select
          id='location'
          name='location'
          defaultValue='NYC'>
          <option>NYC</option>
          <option>DC</option>
          <option>ATX</option>
          <option>SF</option>
          <option>LA</option>
        </Select>
      </Box>
    </Flex>
    <Flex mx={-2} flexWrap='wrap'>
      <Label width={[ 1/2, 1/4 ]} p={2}>
        <Radio
          id='beep'
          name='beep'
          value='beep'
          defaultChecked
        />
        Beep
      </Label>
      <Label width={[ 1/2, 1/4 ]} p={2}>
        <Radio
          id='boop'
          name='beep'
          value='boop'
        />
        Boop
      </Label>
      <Label width={[1/2, 1/4]} p={2}>
        <Checkbox
          id='remember'
          name='remember'
        />
        Remember Me
      </Label>
      <Box px={2} ml='auto'>
        <Button>
          Beep
        </Button>
      </Box>
    </Flex>
  </Box>
```

See https://rebassjs.org/forms for full documentation.
npm package: @rebass/hide
Description: React UI component for responsively hiding elements
Author: Brent Jackson
Latest version: 1.0.0-2


# @rebass/hide

React UI components for responsively hiding elements

```sh
npm i @rebass/hide
```

```jsx
import React from 'react'
import { Hide } from '@rebass/hide'
```

```jsx
// Hide elements at the smallest two breakpoints
<Hide
  xsmall
  small
/>
```

MIT License
npm package: @rebass/markdown
Description: Rebass markdown component mapping
Author: John Otander
Latest version: 1.0.0


# Rebass Markdown

Rebass to HTML component mappings with smart defaults for use in markdown

```sh
npm i @rebass/markdown
```

## Usage with MDX

```js
// example app provider component
import React from 'react'
import { MDXProvider } from '@mdx-js/tag'
import { Provider as RebassProvider } from 'rebass'
import createScope from '@rebass/markdown'

const scope = createScope()

export default props =>
  <MDXProvider components={scope}>
    <RebassProvider>
      {props.children}
    </RebassProvider>
  </MDXProvider>
```

## Options

Rebass markdown can be customized by passing a props object.
The props object should map to the tags used in markdown.

```js
const scope = createScope({
  // adds custom props to the h1 Heading component
  h1: {
    fontSize: [ 5, 6, 7 ],
    color: 'tomato'
  }
})
```

The following tags are used in Rebass Markdown:

- `h1`
- `h2`
- `h3`
- `h4`
- `h5`
- `h6`
- `p`
- `a`
- `img`
- `hr`
- `blockquote`
- `pre`
- `code`
- `inlineCode`
- `ul`
- `li`
- `table`

MIT License
npm package: @rebass/position
Description: React UI components for CSS position
Author: Brent Jackson
Latest version: 1.0.0-3


# @rebass/position

React UI components for CSS position

```sh
npm i @rebass/position
```

```jsx
import React from 'react'
import {
  Position,
  Relative,
  Absolute,
  Fixed,
  Sticky
} from '@rebass/position'
```

```jsx
<Absolute
  zIndex={1}
  top='0'
  right='0'
/>
```

MIT License
npm package: @rebass/preset
Description: Base theme preset for use with Rebass
Author: Brent Jackson
Latest version: 4.0.5


# @rebass/preset

Base theme preset for use with [Rebass][]

```sh
npm i @rebass/preset
```

## Usage

For general usage with [Emotion][], pass the theme preset to Emotion's `ThemeProvider` component at the root of your application.

```jsx
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import theme from '@rebass/preset'

export default props =>
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>
```

For use with [Theme UI][], import the `ThemeProvider` from `theme-ui`.

```jsx
import { ThemeProvider } from 'theme-ui'
```

Or, if you're using `gatsby-plugin-theme-ui`, export the theme from `src/gatsby-plugin-theme-ui/index.js`.

```js
// src/gatsby-plugin-theme-ui/index.js
import preset from '@rebass/preset'

export default {
  ...preset
}
```

## Customizing

The base theme object can be customized by using either `deepmerge` or `lodash.merge` to deeply merge objects.

```js
import merge from 'lodash.merge'
import preset from '@rebass/preset'

export default merge(preset, {
  colors: {
    // custom primary color
    primary: 'tomato',
  }
})
```

[MIT License](LICENSE.md)

[rebass]: https://rebassjs.org
[emotion]: https://emotion.sh
[theme ui]: https://theme-ui.com
npm package: @rebass/preset-material
Description: Material Design theme preset for use with Rebass
Author: Brent Jackson
Latest version: 4.0.5


# @rebass/preset-material

Material Design theme preset for use with [Rebass][]

```sh
npm i @rebass/preset-material
```

## Usage

For general usage with [Emotion][], pass the theme preset to Emotion's `ThemeProvider` component at the root of your application.

```jsx
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import theme from '@rebass/preset-material'

export default props =>
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>
```

For use with [Theme UI][], import the `ThemeProvider` from `theme-ui`.

```jsx
import { ThemeProvider } from 'theme-ui'
```

Or, if you're using `gatsby-plugin-theme-ui`, export the theme from `src/gatsby-plugin-theme-ui/index.js`.

```js
// src/gatsby-plugin-theme-ui/index.js
import preset from '@rebass/preset-material'

export default {
  ...preset
}
```

[MIT License](LICENSE.md)

[rebass]: https://rebassjs.org
[emotion]: https://emotion.sh
[theme ui]: https://theme-ui.com
npm package: @rebass/space
Description: React component for applying responsive margin and padding to child elements without a wrapping HTML container. Built with Styled System.
Author: Brent Jackson
Latest version: 4.0.5


# @rebass/space

React component for applying responsive margin and padding to child elements without a wrapping HTML container.
Built with [Styled System][].

```sh
npm i @rebass/space
```

```js
import React from 'react'
import Space from '@rebass/space'

// Apply margin to child components without a wrapping <div>
const App = props => (
  <Space mx={3} my={[ 2, 3 ]}>
    <h1>Hello</h1>
    <h2>Hi</h2>
    <button>Beep</button>
  </Space>
)
```

## Props

The Space component uses [Styled System's][styled system] `space` utility to add margin and padding props.

Prop | Description | Type
---|---|---
`m` | margin | number, string, or array
`mt` | margin-top | number, string, or array
`mr` | margin-right | number, string, or array
`mb` | margin-bottom | number, string, or array
`ml` | margin-left | number, string, or array
`mx` | margin x-axis (left and right) | number, string, or array
`my` | margin y-axis (top and bottom) | number, string, or array
`p` | padding | number, string, or array
`pt` | padding-top | number, string, or array
`pr` | padding-right | number, string, or array
`pb` | padding-bottom | number, string, or array
`pl` | padding-left | number, string, or array
`px` | padding x-axis (left and right) | number, string, or array
`py` | padding y-axis (top and bottom) | number, string, or array

MIT License

[styled system]: https://styled-system.com
npm package: @rebaxe/parser
Description: 1DV610 Laboration 2 - parser.
Author: Rebecca Axelsson
Latest version: 1.0.1

# :pencil: Parser 
## :sparkles: Public interface
The module has the following public classes and methods:

```parse(text)```: The method to run the modules.
- Takes a string as an argument. The string can represent one or more sentences. Sentences must end with a valid end token. Accepted end tokens are: '.', '!' and '?'.
- Returns a ```Document``` object.

```Document```
- ```fetchAllSentences()```: returns a ```Sentences``` object
- ```fetchRegularSentences()```: returns an array with ```RegularSentence``` objects
- ```fetchExpressions()```: returns an array with ```Expression``` objects
- ```fetchQuestions```: returns an array with ```Question``` objects

```Sentences```
- ```parsedSentences```: a getter that returns an array with ```RegularSentence```, ```Expression``` and ```Question``` objects

```RegularSentence```, ```Expression``` and ```Question```
- ```getStringSentence```: a getter that returns the sentence in a string format

## :rocket: How to use 
The module can be downloaded from npm using the command: ```npm install @rebaxe/parser```



Example: 
```javascript 
import { parse } from '@rebaxe/parser'

const parsedDocument = parse('This is a text. I wish to parse it!')

// Get all sentences
// Returns a Sentences-object
parsedDocument.fetchAllSentences()

// Get all regular sentences (meaning: sentences that ends with a '.')
// Returns an array with RegularSentence-objects
parsedDocument.fetchRegularSentences()

// Get all expressions (meaning: sentences that ends with a '!')
// Returns an array with Expression-objects
parsedDocument.fetchExpressions()

// Get all questions (meaning: sentences that ends with a '.')
// Returns an array with questions objects
parsedDocument.fetchQuestions()
```
npm package: @rebaxe/tokenizer
Description: 1DV610 - Laboration 1 - Tokenizer
Author: Rebecca Axelsson
Latest version: 1.0.1

# Tokenizer
## How to use the tokenizer:
Import initTokenizer from the app.js file. You can then get a tokenizer object by calling initTokenizer and provide it with two arguments:
1. An array of objects containing the token type and a regular expression. The objects should be formatted like this:
```javascript
const grammarObject = {
  tokenType: 'NUMBER',
  tokenRegExp: /^.*[0-9]/
}
```
2. A string you wish to analyze for matching tokens.

You can then call the methods below on your Tokenizer-object.
## Public interface
### Methods
`currentActiveToken`
Returns the current active token.
The last token is always END.

`moveToNextToken()`
Moves active token one step forward. Does not return a token.
You can not move past the END token.

`moveToPreviousToken()`
Moves active token one step backwards. Does not return a token.
You can not move past the first token.

## Examples

```javascript
import { initTokenizer } from '<filepath>'

const grammars = [{
  tokenType: 'WORD',
  tokenRegExp: /^[\w|åäöÅÄÖ]+/
}, {
  tokenType: 'DOT',
  tokenRegExp: /\./
}]

const tokenizer = initTokenizer(grammars, 'Hello world.')

// To get the active token:

const activeToken = tokenizer.currentActiveToken

// If you wish to get the next token:
tokenizer.moveToNextToken()
const nextActiveToken = tokenizer.currentActiveToken()

// If you wish to get the previous token:
tokenizer.moveToPreviousToken()
const nextActiveToken = tokenizer.currentActiveToken()

```