{"id":20572551,"url":"https://github.com/nucliweb/generator-sui-react","last_synced_at":"2025-03-06T10:22:03.261Z","repository":{"id":34496800,"uuid":"38437252","full_name":"nucliweb/generator-sui-react","owner":"nucliweb","description":"A yeoman generator for react components","archived":false,"fork":false,"pushed_at":"2016-03-22T09:49:48.000Z","size":142,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-16T21:16:48.923Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nucliweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-02T14:25:21.000Z","updated_at":"2021-01-12T11:58:56.000Z","dependencies_parsed_at":"2022-09-14T10:03:03.208Z","dependency_job_id":null,"html_url":"https://github.com/nucliweb/generator-sui-react","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Fgenerator-sui-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Fgenerator-sui-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Fgenerator-sui-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Fgenerator-sui-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nucliweb","download_url":"https://codeload.github.com/nucliweb/generator-sui-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242188020,"owners_count":20086276,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T05:21:35.493Z","updated_at":"2025-03-06T10:22:03.230Z","avatar_url":"https://github.com/nucliweb.png","language":"JavaScript","readme":"# generator-sui-react\n\n[![NPM Version][npm-image]][npm-url]\n\nA yeoman generator for Schibsted User Interface (**sui**) ReactJS components. By using this generator, you can create components to work as a part of a complex application (atoms or mollecules) or stand-alone components, ready for production.. For more information about **atomic design**, read the following blog post: http://bradfrost.com/blog/post/atomic-web-design/.\n\n## Features\nThe generator provides a basic structure to start developing a component, including coding standard rules, naming conventions and a unit testing suite.\n\n* A basic structure for your component, prepared for publishing in npm or deploying to production\n* Automatic installation of all npm dependencies\n* Linting rules for all `js`, `jsx`, `s(c|a)ss` and `css` files\n* Support for [ES2015](https://babeljs.io/docs/learn-es2015/)\n* Unit testing suite\n* A local development environment with webpack\n* A `docs` folder to generate the component's documentation and a deployment task to create a Github page.\n* A set of pre-commit rules for launching linting and tests before commiting changes in Github\n* Common editor config rules\n\n## Previous steps\n\nThe SUI Generator for React.JS components is a Yeoman generator, so make sure to have already installed Node.JS and Yeoman first:\n\n* Install Node.JS: [nodejs.org/download](http://nodejs.org/download)\n* Install Yeoman: http://yeoman.io/\n\nYou can install yeoman using npm:\n\n```\n$ npm install -g yo\n```\n\n## Installation\n\nTo install the generator, just type in your terminal:\n\n```\n$ npm install -g @schibstedspain/generator-sui-react\n```\nTo make sure it's installed correctly, type `yo` in your terminal. A list of options should appear, including the installation of the generator:\n\n```\n~ ❯ yo\n? 'Allo [your-username]! What would you like to do? (Use arrow keys)\n  Run a generator\n❯ @schibstedspain/sui React \n  ──────────────\n  Update your generators \n  Install a generator \n  Find some help \n  Get me out of here! \n```\n\n## Create your first React.JS component\n\nFirst of all, let's create a folder for your component in the desired path with:\n\n```\n$ mkdir your-component-name\n```\n\nOnce created, enter the folder and aunch the generator by typing:\n\n```\n$ cd your-component-name\n$ yo @schibstedspain/sui-react\n```\n\nYou will be prompted about the component name, the prefix you want to use and the Github repository url (which you should be created already), and that's it!\n\n## Folder structure\nThe generator will generate the following structure:\n```\n├── README.md\n├── docs\n│   ├── index.html\n│   ├── index.jsx\n│   └── style.scss\n├── package.json\n├── src\n│   ├── index.jsx\n│   ├── index.scss\n│   └── sui-test\n│       ├── _sui-test.scss\n│       └── index.jsx\n├── test\n│   └── sui-test-test.js\n└── webpack.config.js\n```\n\n## Publishing\nWhen you are ready to publish your component, a npm package will be generated, including the following folders: A `lib` folder with the same structure as the `src` folder, but with the `js` and `jsx` preprocessed with `babel`:\n```\nlib\n├── index.js\n├── index.scss\n└── component-name\n    ├── _component-name.scss\n    └── index.js\n```\n\nAnd a `dist` folder, with the `js` and `css` bundle.\n```\ndist\n├── index.css\n└── index.js\n```\n\n## Commands allowed\n* `clean:lib`: cleans the `lib` folder\n* `clean:dist`: cleans the `dist` folder\n* `predist`: executes the task `npm run clean:dist`\n* `dist`: creates a `js` and `css` bundle using `webpack`\n* `prelib`: executes the task `npm run clean:lib`\n* `lib`: executes both tasks `npm run lib:scripts` and `npm run lib:styles`\n* `lib:scripts`: transpiles the code in the `src` folder using `babel` and outputs the result in the `lib` folder\n* `lib:styles`: just copies the `.scss` files from the `src` folder to the `lib` folder\n* `prepublish`: executes both tasks `npm run lib` and `npm run dist`\n* `lint`: executes both tasks `npm run lint:eslint` and `npm run lint:sass`\n* `lint:eslint`: lints your javascript files using `eslint`\n* `lint:sass`: lints your sass style files using `sass-lint`\n* `test`: executes your tests using `mocha`\n* `test:watch`: executes the task `npm run test` in watch mode, watching for changes in your source files\n* `start`: executes both `npm run start:open` and `npm run start:server`\n* `start:server`: launches `webpack-dev-server` in [http://localhost:8080](http://localhost:8080) with your application running\n* `start:open`: opens a browser with [http://localhost:8080](http://localhost:8080)\n* `predoc`: cleans your `docs/dist` folder\n* `doc`: executes `npm run dist`, `npm run doc:copy` and `npm run doc:publish` tasks\n* `doc:copy`: copies the files generated in the `dist` folder into your `docs` folder\n* `doc:publish`: publishes your documentation in your repository's Github page\n* `phoenix`: cleans your `node_modules` folder and launches `npm install` to restore all your dependencies\n\n[npm-image]: https://img.shields.io/npm/v/@schibstedspain/generator-sui-react.svg?style=flat\n[npm-url]: https://npmjs.com/@schibstedspain/generator-sui-react\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucliweb%2Fgenerator-sui-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnucliweb%2Fgenerator-sui-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucliweb%2Fgenerator-sui-react/lists"}