diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 59235a6..0000000 --- a/.eslintignore +++ /dev/null @@ -1 +0,0 @@ -**/templates/**.* diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 1cc5102..0000000 --- a/.eslintrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "airbnb/legacy", - "rules": { - "func-names": 0 - } -} diff --git a/.gitignore b/.gitignore index eb03e3e..271a6cc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,24 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies node_modules -*.log + +# testing +coverage + +# publishing +dist + +# development +test-cdk-scripts + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/CHANGELOG.md b/CHANGELOG.md index b071528..d8de320 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ ## Changelog +### v3.0.0-alpha.0 +24-September-2017 + +Work for updating to version 3 is started + +* Add roadmap.md +* Init monorepo + ### v2.0.2 26-August-2016 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 9635473..3a9320b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -6,7 +6,7 @@ We welcome you help to make React CDK better. This document will help to streaml No software is bug free. So, if you got an issue, follow these steps: -* Search the [issue list](https://github.com/kadirahq/react-storybook/issues?utf8=%E2%9C%93&q=) for current and old issues. +* Search the [issue list](https://github.com/storybooks/react-cdk/issues?utf8=%E2%9C%93&q=) for current and old issues. * If non of that is helping, create an issue with with following information: * Clear title (make is shorter if possible). * Describe the issue in clear language. @@ -18,21 +18,9 @@ No software is bug free. So, if you got an issue, follow these steps: We welcome your contributions. There are many ways you can help us. This is few of those ways: * Fix typos and add more documentation. -* Try to fix some [bugs](https://github.com/kadirahq/react-cdk/labels/bug). +* Try to fix some [bugs](https://github.com/storybooks/react-cdk/labels/bug). * Add new features (try to discuss with what are building by creating an issue). Before you submit a new PR, make you to run `npm test`. Do not submit a PR if tests are failing. If you need any help, create an issue and ask. ## Development Guide - -This is Yeoman generator. There are two generators, which are: - -* app - main generator creates the project -* update - which update an existing project - -Before you start developing, you need to get familiar with yeoman first. Refer following links: - -* [Yeoman getting started guide](http://yeoman.io/learning/) -* [Creating a yeoman generator](http://yeoman.io/authoring/) - -Then link this project with `npm link`. Then you can try `yo react-cdk` and it'll use your development repo. diff --git a/README.md b/README.md index c498021..44b5c90 100644 --- a/README.md +++ b/README.md @@ -1,226 +1,5 @@ -# React CDK +# React-CDK v.3 -[![Storybook Slack](https://now-examples-slackin-nqnzoygycp.now.sh/badge.svg)](https://now-examples-slackin-nqnzoygycp.now.sh/) +This branch is under development. Any help with code review, bug reporting/fixes, ideas, wishes, objections, PR creation, docs writing is very appreciated! If you are interested, please contact us in the [Storybook Slack](https://now-examples-slackin-nqnzoygycp.now.sh/). -### Component Development Kit for React - -##### We are looking for an active maintainer for this repository. React CDK has been put on hold and may become deprecated in the future so our core team can focus on Storybook. If you are interested, please contact us in the [Storybook Slack](https://now-examples-slackin-nqnzoygycp.now.sh/). - -React CDK is not just another React boilerplate. With React CDK, you can focus on developing your React component or utility while React CDK takes care of all the other stuff. - -> Read why [Kadira created React CDK](https://voice.kadira.io/say-hello-to-react-cdk-97cff692e798#.2aaodkb6c). - -React CDK comes with following features: - -* Create a project with a single command. -* Write your component in [ES2016+ syntax](https://www.npmjs.com/package/babel-preset-react-app). -* Develop in a live environment with [React Storybook](https://github.com/kadirahq/react-storybook/). -* Write tests with Mocha and [Enzyme](https://github.com/airbnb/enzyme). -* Use ESLint with the [Airbnb style guide](https://github.com/airbnb/javascript). -* Publish correctly transpiled code into NPM. -* Deploy your storybook to GitHub Pages. -* Get **updates** to core building tools. - -## TOC - -* [Getting Started](#getting-started) -* [Developing Your Component](#developing-your-component) -* [Testing](#testing) -* [Lint Rules](#lint-rules) -* [Publishing](#publishing) -* [Deploying Storybook](#deploying-storybook) -* [CSS and Styles](#css-and-styles) -* [Updating Your Component with React CDK](#updating-your-component-with-react-cdk) -* [Customizing the Component](#customizing-the-component) - -## Getting Started - -Install React CDK with the following command: - -``` -npm install -g yo generator-react-cdk -``` - -> React CDK comes as a [yeoman](http://yeoman.io/) generator, which allows you to scaffold your component quickly. - - -Then, create your first component library with the following command: - -``` -yo react-cdk react-wizard -``` - -![Creating a project with React CDK](docs/create-project-with-react-cdk.png) - -> React CDK will create a directory called react-wizard with all the files you need to get started. - - -Visit that directory and install the NPM dependencies: - -``` -cd react-wizard -npm install -``` - -By default, this project contains a simple button created with React. It also includes tests and [React Storybook](https://github.com/kadirahq/react-storybook/) stories so you can get ideas for writing your own stories. - -## Developing Your Component - -Now we need to work with the component. Your component lives under the src directory. Open `src/index.js` in your favorite editor and start developing. - -Now, it’s time to start the Storybook so we can see what we are building: - -``` -npm run storybook -``` - -The above command starts the Storybook console on [http://localhost:9010](http://localhost:9010/). - -![React Storybook](docs/storybook.png) - -> You can see changes you make while you are editing your component. Visit [React Storybook](https://github.com/kadirahq/react-storybook/) repo to learn more. - - -You can write your component in ES2015+ syntax. It supports `react` and `babel-stage2` presets. - -## Testing - -You can write your tests inside the `src/tests` directory. By default, the project comes with two test cases demonstrating how to write tests. React CDK configures your component with Mocha, [Enzyme](https://github.com/airbnb/enzyme), jsdom, and other essential JS testing tools. - -This is the ideal way to write React tests. - -You can run tests with the following commands: - -* `npm run testonly` (run tests once) -* `npm run test-watch` (run tests and watch for changes) -* `npm test` (run tests and apply lint rules) - -## Lint Rules - -Your project is configured with ESLint based on the [Airbnb JavaScript style guide](https://github.com/airbnb/javascript) with some minor changes. - -You can apply lint rules with the following commands: - -* `npm run lint` (apply lint rules) -* `npm run lintfix` (apply lint rules and fix some common issues) - -## Publishing - -Now it’s time to publish your component to NPM. Before you publish, make sure you’ve customized the following files as necessary: - -* package.json -* README.md -* CONTRIBUTE.md -* LICENSE - -If everything is okay, simply publish your component to NPM with the following command: - -``` -npm publish -``` - -This command will transpile your component for ES5 before publishing it to NPM. Your component will work on any JavaScript environment. - -## Deploying Storybook - -You will usually write your stories while you are developing your component. That allows you to use your storybook as a living document. You could show what your component looks like and different ways to use it. - -Then you can simply deploy it to GitHub Pages with the following command: - -``` -npm run publish-storybook -``` - -You can link your Storybook URL inside the README file. - -Here’s a [sample component](https://github.com/kadira-samples/react-button) listing a Storybook URL. - - -> You can also publish your storybook automatically when you publish your component to NPM. To do that, simply add the following NPM script to your package.json file: - -```js -{ - "scripts": { - ... - "postpublish": "npm run publish-storybook" - ... - } -} -``` - -## CSS and Styles - -It’s common to include CSS and Styles with your component. There are many ways to do this. Some prefer to write CSS in JS, while some provide a CSS file that lives inside the repo. - -### CSS in JS - -With this approach, you don’t need to configure anything. You can just use it. However, you should make sure you accept some external styles, which allows the end user to change the look and feel of your component as needed. - -### Plain old CSS files - -If you are following this approach, make sure to place your CSS files inside the root of your component and not inside the src directory. Then, your end users can import it like this: - -```js -import 'my-comp/style.css' -``` - -You may also need to load this style sheet inside your stories. Simply import the above style sheet into src/stories/index.js with the following command: - -``` -import '../../style.css' -``` - -## Updating Your Component with React CDK - -This is a plain NPM module without any magic. However, it’s written in a way that allows us to push updates to your repo. - -You never need to worry about updating dependencies and build tools. React CDK will take care of that. - -First, update React CDK with the following command: - -``` -npm install -g generator-react-cdk -``` - -Then, visit your project and apply the following command: - -``` -yo react-cdk:update -``` - -This will update the core build tools and the package.json file for dependencies. - - -> It won’t update dependencies you’ve added; it will only update the dependencies and NPM script React CDK has added. - -## Customizing the Component - -Since your component is a plain NPM module, you can customize it any way you want. Here are some ways to do so: - -### Add dependencies - -You can add dependencies to the `package.json` file as needed. - -### Change the JavaScript environment - -Sometimes you may want to use cutting-edge JavaScript features. You can simply add the necessary Babel preset and change the `.babelrc` file. - -### Change other dotfiles - -You can change any of the dotfiles, including `.gitignore` and `.npmignore`. - -### Customize Storybook - -Sometimes you may need to customize your React Storybook. If you do, you’ll usually customize the `.storybook/webpack.config.js` file. Go ahead and do it. - -### Add some pre-publish code - -React CDK already uses the NPM `pre-publish` hook, so you won’t be able to use it directly. Instead, you can use `.scripts/user/prepublish.sh` to add your own code. - -### Configure test utilities - -We have included JSDOM(to support enzyme's [full DOM rendering](https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md)) and Babel configurations before running Mocha tests. If you want to add more stuff, simply use the `.scripts/user/pretest.js` file. - -### Configure something else - -You can configure this project in many ways. Give it a try, and I bet you can do it without our help. If you need help from the core React CDK tools, just create [an issue](https://github.com/kadirahq/react-cdk/issues). +See [Roadmap](ROADMAP.md) diff --git a/ROADMAP.md b/ROADMAP.md new file mode 100644 index 0000000..c59833e --- /dev/null +++ b/ROADMAP.md @@ -0,0 +1,51 @@ +# Roadmap + +This project is going to be a CRA and @Storybook/CLI based minimalistic boilerplate focused on the components development. General settings will be left to the CRA which is used as a dependency, while React-CDK provides only special scripts and project templates. + + +## Project development + +- create `cdk-scripts` package to wrap `react-scripts` +- use `cdk-scripts` as a custom scripts with CRA +- launch `getstorybook` from `cdk-scripts` +- create `create-react-cdk` package as a CLI for creating projects +- use `create-react-cdk` to launch `create-react-app` internally +- add `publish` script to `cdk-scripts` +- add `pack` script to `cdk-scripts` (publish:local) +- add `deploy` script to `cdk-scripts` +- add user templates support +- add default React-CDK template +- `create-react-cdk` should always use the latest version of `cdk-scripts` +- setup yarn workspace +- add docs & tests +- update CONTRIBUTING guide + + +## Features + +- setup [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) + +- add prettier support + +- setup [Debugging in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-in-the-editor) (for VSCode) + +- bundle libraries with webpack + + +## Templates + +- default template + +*Provides minimum required settings* + +- storybook-kitchen-sink + +*Goes with full @storybook/cra-kitchen-sink addons equipment* + +- storybook boilerplate + +*Creates the well-balanced development environment with most useful addons set from Storybook Addons Gallery* + +- addon development + +*Special template ready for the new Storybook addon creation/development* diff --git a/docs/create-project-with-react-cdk.png b/docs/create-project-with-react-cdk.png deleted file mode 100644 index c6c9be4..0000000 Binary files a/docs/create-project-with-react-cdk.png and /dev/null differ diff --git a/docs/readme.md b/docs/readme.md new file mode 100644 index 0000000..66537f4 --- /dev/null +++ b/docs/readme.md @@ -0,0 +1 @@ +# Docs folder diff --git a/docs/storybook.png b/docs/storybook.png deleted file mode 100644 index 20b8e77..0000000 Binary files a/docs/storybook.png and /dev/null differ diff --git a/generators/app/index.js b/generators/app/index.js deleted file mode 100644 index 8e1a151..0000000 --- a/generators/app/index.js +++ /dev/null @@ -1,112 +0,0 @@ -var generators = require('yeoman-generator'); -var _ = require('lodash'); - -module.exports = module.exports = generators.Base.extend({ - constructor: function () { - generators.Base.apply(this, arguments); - this.argument('componentName', { type: String, required: true }); - this.option('githubUrl', { type: String, desc: 'URL of your github repo' }); - this.option('description', { type: String, desc: 'One line description about your component' }); - - this.componentName = this.componentName || ''; - this.prettyComponentName = this.componentName - .split('-') - .map(function (word) { - return _.capitalize(word); - }) - .join(' '); - - this.githubUrl = this.options.githubUrl || 'https://github.com/you/repo.git'; - this.description = this.options.description || this.prettyComponentName + ' Component'; - }, - - configuring: { - copyDotFiles: function() { - var self = this; - [ - 'babelrc', - 'eslintrc', - 'gitignore', - 'npmignore' - ].forEach(function (fileName) { - self.copy(fileName, self.componentName + '/.' + fileName); - }); - }, - - copyCoreFiles: function () { - var self = this; - [ - '.storybook/config.js', - '.scripts/mocha_runner.js', - '.scripts/prepublish.sh', - '.scripts/get_gh_pages_url.js', - '.scripts/publish_storybook.sh', - '.scripts/user/prepublish.sh', - '.scripts/user/pretest.js', - ].forEach(function (fileName) { - self.copy(fileName, self.componentName + '/' + fileName); - }); - }, - - copyPackageJson: function () { - var self = this; - - self.template( - 'package.json', - self.componentName + '/package.json', - { - name: self.componentName, - description: self.description, - githubUrl: self.githubUrl - } - ); - }, - - copyOtherFiles: function () { - var self = this; - self.template( - 'README.md', - self.componentName + '/README.md', - { - name: self.prettyComponentName, - description: self.description - } - ); - - self.template( - 'CONTRIBUTING.md', - self.componentName + '/CONTRIBUTING.md', - { name: self.prettyComponentName } - ); - - self.copy('LICENSE', self.componentName + '/LICENSE'); - } - }, - - writing: { - copySrcFiles: function () { - var self = this; - [ - 'src/index.js', - 'src/stories/index.js', - 'src/tests/index.js' - ].forEach(function (fileName) { - self.copy(fileName, self.componentName + '/' + fileName); - }); - } - }, - - end: { - logMessage: function () { - this.log(''); - this.log('Awesome! Your component "' + this.prettyComponentName + '" is ready!'); - this.log('Apply following commands to install dependencies.'); - this.log(''); - this.log(' cd ' + this.componentName); - this.log(' npm install'); - this.log(''); - this.log('Visit https://github.com/kadirahq/react-cdk to get started!'); - this.log(''); - } - } -}); diff --git a/generators/app/templates/.npmrc b/generators/app/templates/.npmrc deleted file mode 100644 index c613ffe..0000000 --- a/generators/app/templates/.npmrc +++ /dev/null @@ -1 +0,0 @@ -@kadira:registry=https://registry.npmjs.org diff --git a/generators/app/templates/.scripts/get_gh_pages_url.js b/generators/app/templates/.scripts/get_gh_pages_url.js deleted file mode 100644 index 062c690..0000000 --- a/generators/app/templates/.scripts/get_gh_pages_url.js +++ /dev/null @@ -1,11 +0,0 @@ -// IMPORTANT -// --------- -// This is an auto generated file with React CDK. -// Do not modify this file. - -const parse = require('git-url-parse'); -var ghUrl = process.argv[2]; -const parsedUrl = parse(ghUrl); - -const ghPagesUrl = 'https://' + parsedUrl.owner + '.github.io/' + parsedUrl.name; -console.log(ghPagesUrl); diff --git a/generators/app/templates/.scripts/mocha_runner.js b/generators/app/templates/.scripts/mocha_runner.js deleted file mode 100644 index bc08ecc..0000000 --- a/generators/app/templates/.scripts/mocha_runner.js +++ /dev/null @@ -1,34 +0,0 @@ -// IMPORTANT -// --------- -// This is an auto generated file with React CDK. -// Do not modify this file. -// Use `.scripts/user/pretest.js instead`. - -process.env.NODE_ENV = 'development'; -require('babel-core/register'); -require('babel-polyfill'); - -// Add jsdom support, which is required for enzyme. -var jsdom = require('jsdom').jsdom; - -var exposedProperties = ['window', 'navigator', 'document']; - -global.document = jsdom(''); -global.window = document.defaultView; -Object.keys(document.defaultView).forEach((property) => { - if (typeof global[property] === 'undefined') { - exposedProperties.push(property); - global[property] = document.defaultView[property]; - } -}); - -global.navigator = { - userAgent: 'node.js' -}; - -process.on('unhandledRejection', function (error) { - console.error('Unhandled Promise Rejection:'); - console.error(error && error.stack || error); -}); - -require('./user/pretest.js'); diff --git a/generators/app/templates/.scripts/prepublish.sh b/generators/app/templates/.scripts/prepublish.sh deleted file mode 100644 index fe02330..0000000 --- a/generators/app/templates/.scripts/prepublish.sh +++ /dev/null @@ -1,16 +0,0 @@ -#!/bin/bash - -# IMPORTANT -# --------- -# This is an auto generated file with React CDK. -# Do not modify this file. -# Use `.scripts/user/prepublish.sh instead`. - -echo "=> Transpiling 'src' into ES5 ..." -echo "" -rm -rf ./dist -NODE_ENV=production ./node_modules/.bin/babel --ignore tests,stories --plugins "transform-runtime" --copy-files ./src --out-dir ./dist -echo "" -echo "=> Transpiling completed." - -. .scripts/user/prepublish.sh diff --git a/generators/app/templates/.scripts/publish_storybook.sh b/generators/app/templates/.scripts/publish_storybook.sh deleted file mode 100644 index f845730..0000000 --- a/generators/app/templates/.scripts/publish_storybook.sh +++ /dev/null @@ -1,47 +0,0 @@ -#!/bin/bash - -# IMPORTANT -# --------- -# This is an auto generated file with React CDK. -# Do not modify this file. - -set -e # exit with nonzero exit code if anything fails - -# get GIT url - -GIT_URL=`git config --get remote.origin.url` -if [[ $GIT_URL == "" ]]; then - echo "This project is not configured with a remote git repo". - exit 1 -fi - -# clear and re-create the out directory -rm -rf .out || exit 0; -mkdir .out; - -# run our compile script, discussed above -build-storybook -o .out - -# go to the out directory and create a *new* Git repo -cd .out -git init - -# inside this git repo we'll pretend to be a new user -git config user.name "GH Pages Bot" -git config user.email "hello@ghbot.com" - -# The first and only commit to this new Git repo contains all the -# files present with the commit message "Deploy to GitHub Pages". -git add . -git commit -m "Deploy Storybook to GitHub Pages" - -# Force push from the current repo's master branch to the remote -# repo's gh-pages branch. (All previous history on the gh-pages branch -# will be lost, since we are overwriting it.) We redirect any output to -# /dev/null to hide any sensitive credential data that might otherwise be exposed. -git push --force --quiet $GIT_URL master:gh-pages > /dev/null 2>&1 -cd .. -rm -rf .out - -echo "" -echo "=> Storybook deployed to: `node .scripts/get_gh_pages_url.js $GIT_URL`" diff --git a/generators/app/templates/.scripts/user/prepublish.sh b/generators/app/templates/.scripts/user/prepublish.sh deleted file mode 100644 index fdb6499..0000000 --- a/generators/app/templates/.scripts/user/prepublish.sh +++ /dev/null @@ -1 +0,0 @@ -# Use this file to your own code to run at NPM `prepublish` event. diff --git a/generators/app/templates/.scripts/user/pretest.js b/generators/app/templates/.scripts/user/pretest.js deleted file mode 100644 index a81bd36..0000000 --- a/generators/app/templates/.scripts/user/pretest.js +++ /dev/null @@ -1 +0,0 @@ -// Use this file to setup any test utilities. diff --git a/generators/app/templates/.storybook/config.js b/generators/app/templates/.storybook/config.js deleted file mode 100644 index d279dbf..0000000 --- a/generators/app/templates/.storybook/config.js +++ /dev/null @@ -1,12 +0,0 @@ -// IMPORTANT -// --------- -// This is an auto generated file with React CDK. -// Do not modify this file. - -import { configure } from '@kadira/storybook'; - -function loadStories() { - require('../src/stories'); -} - -configure(loadStories, module); diff --git a/generators/app/templates/CONTRIBUTING.md b/generators/app/templates/CONTRIBUTING.md deleted file mode 100644 index 4ac16d5..0000000 --- a/generators/app/templates/CONTRIBUTING.md +++ /dev/null @@ -1,7 +0,0 @@ -# Contributing to <%= name %> Component - -We welcome your help to make this component better. This document will help to streamline the contributing process and save everyone's precious time. - -## Development Setup - -This component has been setup with [React CDK](https://github.com/kadirahq/react-cdk). Refer [React CDK documentation](https://github.com/kadirahq/react-cdk)) to get started with the development. diff --git a/generators/app/templates/LICENSE b/generators/app/templates/LICENSE deleted file mode 100644 index c2d2a91..0000000 --- a/generators/app/templates/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2016 Your Name. - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. diff --git a/generators/app/templates/README.md b/generators/app/templates/README.md deleted file mode 100644 index e680463..0000000 --- a/generators/app/templates/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# <%= name %> Component - -<%= description %> diff --git a/generators/app/templates/babelrc b/generators/app/templates/babelrc deleted file mode 100644 index c14b282..0000000 --- a/generators/app/templates/babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["react-app"] -} diff --git a/generators/app/templates/eslintrc b/generators/app/templates/eslintrc deleted file mode 100644 index 91cad92..0000000 --- a/generators/app/templates/eslintrc +++ /dev/null @@ -1,21 +0,0 @@ -{ - "extends": "airbnb", - "rules": { - # We use _ to define private variables and methods in clases - "no-underscore-dangle": 0, - # This seems to be buggy we don't want eslint to check this - "import/no-extraneous-dependencies": 0, - # This is a depricated rule. So we turned off it. - "react/require-extension": 0, - # We can write JSX in anyfile we want. - "react/jsx-filename-extension": 0, - # We don't like this rule. - "arrow-body-style": 0, - # We don't like this rule. We write arrow functions only when we needed. - "prefer-arrow-callback": 0, - # We don't need to write function names always. - "func-names": 0, - # propTypes can be object - "react/forbid-prop-types": 0, - }, -} diff --git a/generators/app/templates/gitignore b/generators/app/templates/gitignore deleted file mode 100644 index 06b809a..0000000 --- a/generators/app/templates/gitignore +++ /dev/null @@ -1,4 +0,0 @@ -node_modules -*.log -.idea -dist diff --git a/generators/app/templates/npmignore b/generators/app/templates/npmignore deleted file mode 100644 index b467c37..0000000 --- a/generators/app/templates/npmignore +++ /dev/null @@ -1,2 +0,0 @@ -src -.babelrc diff --git a/generators/app/templates/package.json b/generators/app/templates/package.json deleted file mode 100644 index b6b20b5..0000000 --- a/generators/app/templates/package.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "name": "<%= name %>", - "version": "0.0.0", - "description": "<%= description %>", - "repository": { - "type": "git", - "url": "<%= githubUrl %>" - }, - "license": "MIT", - "scripts": { - "prepublish": ". ./.scripts/prepublish.sh", - "lint": "eslint src", - "lintfix": "eslint src --fix", - "testonly": "mocha --require .scripts/mocha_runner src/**/tests/**/*.js", - "test": "npm run lint && npm run testonly", - "test-watch": "npm run testonly -- --watch --watch-extensions js", - "storybook": "start-storybook -p 9010", - "publish-storybook": "bash .scripts/publish_storybook.sh" - }, - "devDependencies": { - "react": "^15.3.2", - "react-dom": "^15.3.2", - - "babel-loader": "^6.2.5", - "babel-polyfill": "^6.13.0", - "babel-preset-react-app": "^0.2.1", - "babel-cli": "^6.14.0", - "babel-core": "^6.14.0", - "babel-plugin-transform-runtime": "^6.15.0", - - "eslint": "^3.6.0", - "babel-eslint": "^6.1.2", - "eslint-config-airbnb": "^12.0.0", - "eslint-plugin-import": "^1.16.0", - "eslint-plugin-jsx-a11y": "^2.2.2", - "eslint-plugin-react": "^6.3.0", - - "mocha": "^3.0.2", - "chai": "^3.5.0", - "sinon": "^1.17.6", - "enzyme": "^2.2.0", - "react-addons-test-utils": "^15.3.2", - "jsdom": "^9.5.0", - - "@kadira/storybook": "^2.18.1", - "git-url-parse": "^6.0.1" - }, - "peerDependencies": { - "react": "^0.14.7 || ^15.0.0" - }, - "dependencies": { - "babel-runtime": "^6.11.6" - }, - "main": "dist/index.js", - "engines": { - "npm": "^3.0.0" - } -} diff --git a/generators/app/templates/src/index.js b/generators/app/templates/src/index.js deleted file mode 100644 index b30fc7d..0000000 --- a/generators/app/templates/src/index.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -const buttonStyles = { - border: '1px solid #eee', - borderRadius: 3, - backgroundColor: '#FFFFFF', - cursor: 'pointer', - fontSize: 15, - padding: '3px 10px', -}; - -const Button = ({ children, onClick, style = {} }) => ( - -); - -Button.propTypes = { - children: React.PropTypes.string.isRequired, - onClick: React.PropTypes.func, - style: React.PropTypes.object, -}; - -export default Button; diff --git a/generators/app/templates/src/stories/index.js b/generators/app/templates/src/stories/index.js deleted file mode 100644 index dd48fc0..0000000 --- a/generators/app/templates/src/stories/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { storiesOf, action } from '@kadira/storybook'; -import Button from '../index'; - -storiesOf('Button', module) - .add('default view', () => ( - - )) - .add('some emojies as the text', () => ( - - )) - .add('custom styles', () => { - const style = { - fontSize: 20, - textTransform: 'uppercase', - color: '#FF8833', - }; - return ( - - ); - }); diff --git a/generators/app/templates/src/tests/index.js b/generators/app/templates/src/tests/index.js deleted file mode 100644 index 23b4490..0000000 --- a/generators/app/templates/src/tests/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { shallow, mount } from 'enzyme'; -import Button from '../index'; -import { expect } from 'chai'; -import sinon from 'sinon'; -const { describe, it } = global; - -describe('Button', () => { - it('should show the given text', () => { - const text = 'The Text'; - const wrapper = shallow(); - expect(wrapper.text()).to.be.equal(text); - }); - - it('should handle the click event', () => { - const clickMe = sinon.stub(); - // Here we do a JSDOM render. So, that's why we need to - // wrap this with a div. - const wrapper = mount( -
- -
- ); - - wrapper.find('button').simulate('click'); - expect(clickMe.callCount).to.be.equal(1); - }); -}); diff --git a/generators/update/index.js b/generators/update/index.js deleted file mode 100644 index 6e30e29..0000000 --- a/generators/update/index.js +++ /dev/null @@ -1,69 +0,0 @@ -var generators = require('yeoman-generator'); -var _ = require('lodash'); - -module.exports = module.exports = generators.Base.extend({ - constructor: function () { - generators.Base.apply(this, arguments); - }, - - _updatePackageJsonSection: function (source, dest, section) { - var newDest = dest; - _.each(source[section], function (value, key) { - newDest[section][key] = value; - }); - }, - - configuring: { - updateDotFiles: function () { - var self = this; - [ - '.storybook/config.js', - '.scripts/mocha_runner.js', - '.scripts/prepublish.sh', - '.scripts/get_gh_pages_url.js', - '.scripts/publish_storybook.sh' - ].forEach(function (fileName) { - self.bulkCopy( - self.templatePath('../../app/templates', fileName), - self.destinationPath(fileName) - ); - }); - - [ - 'babelrc', - 'eslintrc' - ].forEach(function (fileName) { - self.copy( - self.templatePath('../../app/templates', fileName), - self.destinationPath('.' + fileName) - ); - }); - }, - - updatePackageJson: function () { - var self = this; - var dest = require(self.destinationPath('package.json')); - var source = require(self.templatePath('../../app/templates/package.json')); - - self._updatePackageJsonSection(source, dest, 'devDependencies'); - self._updatePackageJsonSection(source, dest, 'dependencies'); - self._updatePackageJsonSection(source, dest, 'peerDependencies'); - self._updatePackageJsonSection(source, dest, 'scripts'); - - self.write(self.destinationPath('package.json'), JSON.stringify(dest, null, 2)); - } - }, - - end: { - logMessage: function () { - this.log(''); - this.log('Your package has been updated to the latest React CDK version.'); - this.log('Apply following command to complete the update process.'); - this.log(''); - this.log(' npm install'); - this.log(''); - this.log('Keep rocking.'); - this.log(''); - } - } -}); diff --git a/package.json b/package.json index f5db452..bfdaf1c 100644 --- a/package.json +++ b/package.json @@ -1,32 +1,7 @@ { - "name": "generator-react-cdk", - "version": "2.0.2", - "description": "React Component Development Kit", - "repository": { - "type": "git", - "url": "https://github.com/kadirahq/react-cdk.git" - }, - "license": "MIT", - "files": [ - "generators" - ], - "keywords": [ - "yeoman-generator" - ], - "scripts": { - "lint": "eslint generators", - "lintfix": "eslint generators --fix", - "test": "npm run lint" - }, - "dependencies": { - "lodash": "^4.10.0", - "yeoman-generator": "^0.22.5" - }, - "devDependencies": { - "babel-eslint": "^6.0.2", - "eslint": "^2.7.0", - "eslint-config-airbnb": "^7.0.0", - "eslint-plugin-jsx-a11y": "^0.6.2", - "eslint-plugin-react": "^4.3.0" - } + "private": true, + "workspaces": [ + "packages/*", + "templates/*" + ] } diff --git a/packages/cdk-scripts/package.json b/packages/cdk-scripts/package.json new file mode 100644 index 0000000..3940c7f --- /dev/null +++ b/packages/cdk-scripts/package.json @@ -0,0 +1,24 @@ +{ + "name": "@storybook/cdk-scripts", + "version": "0.1.0-alpha.45", + "description": "custom cra scripts for react-cdk", + "bin": { + "cdk-scripts": "./bin/cdk-scripts.js" + }, + "scripts": { + "build": "rm *.tgz -rf && npm pack && node rebuild.js && sh build-sample.sh", + "dev": "nodemon --config .dev/nodemon.json -x 'npm run build'" + }, + "dependencies": { + "@storybook/cli": "^3.2.9", + "chalk": "^2.1.0", + "fs-extra": "^4.0.2", + "react-scripts": "^1.0.13", + "shelljs": "^0.7.8" + }, + "devDependencies": { + "nodemon": "^1.12.1" + }, + "author": "UsulPro", + "license": "MIT" +} diff --git a/packages/create-react-cdk/package.json b/packages/create-react-cdk/package.json new file mode 100644 index 0000000..d97c886 --- /dev/null +++ b/packages/create-react-cdk/package.json @@ -0,0 +1,5 @@ +{ + "name": "create-react-cdk", + "version": "0.1.0-alpha.0", + "description": "CLI for react-cdk" +} diff --git a/templates/readme.md b/templates/readme.md new file mode 100644 index 0000000..4158387 --- /dev/null +++ b/templates/readme.md @@ -0,0 +1,3 @@ +# Templates + +This folder is contain React-CDK templates