Ios-theme-toolkit NPM

Deprecated ⚠

This project will be discontinued. I recommend using the Ionic 4 that supports React well.

ios-theme-toolkit

A simple library of components in React that follow the style guide of iOS for you to use in your web apps.

All credits go to @nolimits4web, he had all the work that recreated the iOS visual identity for Framework7, this project just extracted theses styles in a separate package and created a library of components in React on top of that. Why?

How to use

Install it:

yarn add ios-theme-toolkit
or
npm install ios-theme-toolkit --save

and import the package from anywhere in your project that is accessible to your bundler (Webpack or Rollup). Example:

import React, { Component } from 'react'

import { Button, Input } from 'ios-theme-toolkit'

class Example extends Component {
  render () {
    return (
      <div>
      	<Input fill block value="Hello world" />
      </div>
      <Button fill block color="blue"></Button>
    )
  }
}

See how to use the components in the 📚 online documentation with live preview.

Libraries and tools used:

React: To create the components.
Gulp: To concatenate and minify style files.
Gulp-less: To process the original style files in .less.
Docz: To do components documentation.
Rollup: To bundle all components in "dist" folder.
Release-it: To automate the process of publishing a new release.

CLI Commands 🤓

yarn run create-component: Create a new component inside the "./src/components" folder with all the .js, .less, .test.js and .mdx files already configured.
yarn run test: Run all tests of project.
yarn run dev: Start gulp watch.
yarn run docz: Start docz on port 8000.
yarn run build: Prepare the package to be published (Generate all final files).
yarn run deploy-docs: Send a new documentation update to remote branch gh-pages and refresh the website.
yarn run release: Uses release-it to:
- Prevent new releases without all tests running before
- Bump package.json version
- Create git tag
- Push to remote Github repository
- Post new release in https://github.com/httpiago/ios-theme-toolkit/releases with changelog
- Publish package in npm registry