diff --git a/README.md b/README.md index 8de7701..ca03526 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -[![npm version](https://img.shields.io/npm/v/for-react-css-themr.svg?style=flat-square)](https://www.npmjs.com/package/for-react-css-themr) -[![Build Status](http://img.shields.io/travis/FriendsOfReactJS/for-react-css-themr/master.svg?style=flat-square)](https://travis-ci.org/FriendsOfReactJS/for-react-css-themr) -[![NPM Status](http://img.shields.io/npm/dm/for-react-css-themr.svg?style=flat-square)](https://www.npmjs.com/package/for-react-css-themr) +[![npm version](https://img.shields.io/npm/v/@friendsofreactjs/react-css-themr.svg?style=flat-square)](https://www.npmjs.com/package/@friendsofreactjs/react-css-themr) +[![Build Status](http://img.shields.io/travis/FriendsOfReactJS/@friendsofreactjs/react-css-themr/master.svg?style=flat-square)](https://travis-ci.org/FriendsOfReactJS/@friendsofreactjs/react-css-themr) +[![NPM Status](http://img.shields.io/npm/dm/@friendsofreactjs/react-css-themr.svg?style=flat-square)](https://www.npmjs.com/package/@friendsofreactjs/react-css-themr) # Friends of react: React CSS Themr @@ -9,13 +9,13 @@ This is a fork of React CSS Themr, that is not maintained anymore. We thank Javi Velasco for all his efforts and for creating such a great package. This package should not be unmaintained - so the friends of react will continue. -Sadly Javi did not responed so we can not continue with the same package name. You find us now on npm with the prefix `for-`. +Sadly Javi did not responed so we can not continue with the same package name. You find us now on npm with the prefix/scope `@friendsofreactjs`. ``` Easy theming and composition for CSS Modules. ``` -$ npm install --save for-react-css-themr +$ npm install --save @friendsofreactjs/react-css-themr ``` **Note: Feedback and contributions on the docs are highly appreciated.** @@ -30,7 +30,7 @@ Taking ideas from [future-react-ui](https://github.com/nikgraf/future-react-ui) The most immediate way of providing a classname object is via *props*. In case you want to import a component with a theme already injected, you have to write a higher order component that does the job. This is ok for your own components, but for ui-kits like [React Toolbox](http://www.react-toolbox.com) or [Belle](http://nikgraf.github.io/belle/), you'd have to write a wrapper for every single component you want to use. In this fancy, you can understand the theme as a **set** of related classname objects for different components. It makes sense to group them together in a single object and move it through the component tree using a context. This way, you can provide a theme either via **context**, **hoc** or **props**. -The approach of for-react-css-themr consists of a *provider* and a *decorator*. The provider sets a context theme. The decorator adds to your components the logic to figure out which theme should be used or how should it be composed, depending on configuration, context and props. +The approach of @friendsofreactjs/react-css-themr consists of a *provider* and a *decorator*. The provider sets a context theme. The decorator adds to your components the logic to figure out which theme should be used or how should it be composed, depending on configuration, context and props. ## Combining CSS modules @@ -49,7 +49,7 @@ Say you have a `Button` component you want to make themeable. You should pass a ```jsx // Button.js import React, { Component } from 'react'; -import { themr } from 'for-react-css-themr'; +import { themr } from '@friendsofreactjs/react-css-themr'; @themr('MyThemedButton') class Button extends Component { @@ -88,7 +88,7 @@ If you use a component with a base theme, you may want to import the component w ```jsx // SuccessButton.js import React, { Component } from 'react'; -import { themr } from 'for-react-css-themr'; +import { themr } from '@friendsofreactjs/react-css-themr'; import successTheme from './SuccessButton.css'; @themr('MySuccessButton', successTheme) @@ -137,7 +137,7 @@ Although context theming is not limited to ui-kits, it's very useful to avoid de ```jsx import React from 'react'; import { render } from 'react-dom'; -import { ThemeProvider } from 'for-react-css-themr'; +import { ThemeProvider } from '@friendsofreactjs/react-css-themr'; import App from './app' const contextTheme = { @@ -182,4 +182,4 @@ Thanks to [Nik Graf](http://www.twitter.com/nikgraf) and [Mark Dalgleish](http:/ ## License -This project is licensed under the terms of the [MIT license](https://github.com/FriendsOfReactJS/for-react-css-themr/blob/master/LICENSE). +This project is licensed under the terms of the [MIT license](https://github.com/FriendsOfReactJS/@friendsofreactjs/react-css-themr/blob/master/LICENSE). diff --git a/index.d.ts b/index.d.ts index b37454b..db49f54 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,6 +1,6 @@ import * as React from "react"; -declare module "react-css-themr" { +declare module "@friendsofreactjs/react-css-themr" { type TReactCSSThemrTheme = { [key: string]: string | TReactCSSThemrTheme } diff --git a/package.json b/package.json index a075476..f10f9e7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "for-react-css-themr", + "name": "@friendsofreactjs/react-css-themr", "description": "Friends of ReactJS: React CSS Themr", - "homepage": "https://github.com/FriendsOfReactJS/for-react-css-themr#readme", + "homepage": "https://github.com/FriendsOfReactJS/@friendsofreactjs/react-css-themr#readme", "version": "2.1.2", "main": "./lib", "author": { @@ -11,10 +11,10 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/FriendsOfReactJS/for-react-css-themr.git" + "url": "git+https://github.com/FriendsOfReactJS/@friendsofreactjs/react-css-themr.git" }, "bugs": { - "url": "https://github.com/FriendsOfReactJS/for-react-css-themr/issues" + "url": "https://github.com/FriendsOfReactJS/@friendsofreactjs/react-css-themr/issues" }, "keywords": [ "css-modules", @@ -22,7 +22,6 @@ "react", "react-css-themr", "theming", - "for-react-css-themr", "friends of react" ], "dependencies": { diff --git a/src/components/themr.js b/src/components/themr.js index 829f7e4..c43662d 100644 --- a/src/components/themr.js +++ b/src/components/themr.js @@ -94,7 +94,7 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) => if (!themeNamespace) return theme if (themeNamespace && !theme) { - throw new Error('Invalid themeNamespace use in for-react-css-themr. ' + + throw new Error('Invalid themeNamespace use in friendsofreactjs/react-css-themr. ' + 'themeNamespace prop should be used only with theme prop.') } @@ -266,7 +266,7 @@ function merge(original = {}, mixin = {}) { function validateComposeOption(composeTheme) { if ([ COMPOSE_DEEPLY, COMPOSE_SOFTLY, DONT_COMPOSE ].indexOf(composeTheme) === -1) { throw new Error( - `Invalid composeTheme option for for-react-css-themr. Valid composition options\ + `Invalid composeTheme option for friendsofreactjs/react-css-themr. Valid composition options\ are ${COMPOSE_DEEPLY}, ${COMPOSE_SOFTLY} and ${DONT_COMPOSE}. The given\ option was ${composeTheme}` ) diff --git a/test/components/themr.spec.js b/test/components/themr.spec.js index 4b72931..1be43c7 100644 --- a/test/components/themr.spec.js +++ b/test/components/themr.spec.js @@ -351,7 +351,7 @@ describe('Themr decorator function', () => { - )).toThrow(/Invalid themeNamespace use in for-react-css-themr. themeNamespace prop should be used only with theme prop./) + )).toThrow(/Invalid themeNamespace use in friendsofreactjs\/react-css-themr. themeNamespace prop should be used only with theme prop./) }) it('when providing a themeNamespace prop composes a theme', () => {