New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@sproutsocial/racine

Package Overview
Dependencies
Maintainers
44
Versions
677
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sproutsocial/racine - npm Package Compare versions

Comparing version 0.0.7 to 0.1.0

15

CHANGELOG.md

@@ -5,2 +5,17 @@ # Change Log

<a name="0.1.0"></a>
# [0.1.0](https://github.com/sproutsocial/racine/compare/v0.0.7...v0.1.0) (2018-04-04)
### Features
* **EducationTip:** remove EducationTip component ([#74](https://github.com/sproutsocial/racine/issues/74)) ([18e72d3](https://github.com/sproutsocial/racine/commit/18e72d3))
### BREAKING CHANGES
* **EducationTip:** remove EducationTip component
<a name="0.0.7"></a>

@@ -7,0 +22,0 @@ ## [0.0.7](https://github.com/sproutsocial/racine/compare/v0.0.6...v0.0.7) (2018-03-27)

99

dist/racine.js

@@ -79,3 +79,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 10);
/******/ return __webpack_require__(__webpack_require__.s = 9);
/******/ })

@@ -480,83 +480,2 @@ /************************************************************************/

var _propTypes = _interopRequireDefault(__webpack_require__(0));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**
* Description of how to use EducationTip
*/
var EducationTip =
/*#__PURE__*/
function (_React$Component) {
_inherits(EducationTip, _React$Component);
function EducationTip() {
_classCallCheck(this, EducationTip);
return _possibleConstructorReturn(this, (EducationTip.__proto__ || Object.getPrototypeOf(EducationTip)).apply(this, arguments));
}
_createClass(EducationTip, [{
key: "render",
value: function render() {
return React.createElement("div", {
className: "EducationTip " + (this.props.ornamental ? "EducationTip--ornamental" : "")
}, React.createElement("div", {
className: "EducationTip-panel"
}, this.props.title && React.createElement("span", {
className: "EducationTip-title"
}, this.props.title), React.createElement("p", {
className: "EducationTip-description"
}, this.props.description)));
}
}]);
return EducationTip;
}(React.Component);
exports.default = EducationTip;
Object.defineProperty(EducationTip, "propTypes", {
configurable: true,
enumerable: true,
writable: true,
value: {
/** Title of the tip */
title: _propTypes.default.string.isRequired,
/** Description of tip */
description: _propTypes.default.string.isRequired,
/** Whether the tip is ornamental or not */
ornamental: _propTypes.default.bool
}
});
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(__webpack_require__(1));
var _classnames = _interopRequireDefault(__webpack_require__(2));

@@ -651,3 +570,3 @@

/***/ }),
/* 9 */
/* 8 */
/***/ (function(module, exports, __webpack_require__) {

@@ -774,3 +693,3 @@

/***/ }),
/* 10 */
/* 9 */
/***/ (function(module, exports, __webpack_require__) {

@@ -802,8 +721,2 @@

});
Object.defineProperty(exports, "EducationTip", {
enumerable: true,
get: function get() {
return _EducationTip.default;
}
});
Object.defineProperty(exports, "Indicator", {

@@ -830,8 +743,6 @@ enumerable: true,

var _Alert = _interopRequireDefault(__webpack_require__(9));
var _Alert = _interopRequireDefault(__webpack_require__(8));
var _Badge = _interopRequireDefault(__webpack_require__(8));
var _Badge = _interopRequireDefault(__webpack_require__(7));
var _EducationTip = _interopRequireDefault(__webpack_require__(7));
var _Indicator = _interopRequireDefault(__webpack_require__(6));

@@ -838,0 +749,0 @@

@@ -24,8 +24,2 @@ "use strict";

});
Object.defineProperty(exports, "EducationTip", {
enumerable: true,
get: function get() {
return _EducationTip.default;
}
});
Object.defineProperty(exports, "Indicator", {

@@ -56,4 +50,2 @@ enumerable: true,

var _EducationTip = _interopRequireDefault(require("./EducationTip"));
var _Indicator = _interopRequireDefault(require("./Indicator"));

@@ -60,0 +52,0 @@

@@ -24,8 +24,2 @@ "use strict";

});
Object.defineProperty(exports, "EducationTip", {
enumerable: true,
get: function get() {
return _EducationTip.default;
}
});
Object.defineProperty(exports, "Indicator", {

@@ -56,4 +50,2 @@ enumerable: true,

var _EducationTip = _interopRequireDefault(require("./EducationTip"));
var _Indicator = _interopRequireDefault(require("./Indicator"));

@@ -60,0 +52,0 @@

{
"name": "@sproutsocial/racine",
"version": "0.0.7",
"version": "0.1.0",
"homepage": ".",

@@ -17,3 +17,3 @@ "license": "ISC",

"precommit": "lint-staged",
"commitmsg": "commitlint -e $GIT_PARAMS || (echo \"\nUse 'yarn commit' for help formatting your commit message\" && exit 1)",
"commitmsg": "commitlint -e $GIT_PARAMS || (echo \"\nRead about commit message formatting here: https://github.com/sproutsocial/racine#committing-changes\" && exit 1)",
"build-css": "node-sass-chokidar --include-path ./node_modules src/racine -o src/generated",

@@ -35,3 +35,3 @@ "build-js": "node ./bin/build.js",

"new": "node ./bin/scaffold.js",
"release": "standard-version"
"release": "node ./bin/prerelease.js && yarn test && standard-version"
},

@@ -48,10 +48,4 @@ "lint-staged": {

},
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
},
"standard-version": {
"scripts": {
"postbump": "yarn test",
"posttag": "git push --follow-tags"

@@ -72,3 +66,2 @@ }

"@commitlint/config-conventional": "^6.1.3",
"@commitlint/prompt-cli": "^6.1.3",
"@sproutsocial/seeds-color": "^0.4.1",

@@ -83,2 +76,3 @@ "@sproutsocial/seeds-depth": "^0.0.2",

"babel-standalone": "^6.26.0",
"chalk": "^2.3.2",
"chokidar": "^1.7.0",

@@ -99,2 +93,3 @@ "codemirror": "^5.32.0",

"lodash": "^4.17.4",
"markdown-to-jsx": "^6.6.1",
"moment-timezone": "^0.5.14",

@@ -115,4 +110,3 @@ "node-sass": "^4.7.2",

"react-dom": "^16.2.0",
"react-element-to-jsx-string": "^5.0.0",
"react-remarkable": "^1.1.3",
"react-element-to-jsx-string": "^13.2.0",
"react-router": "^4.2.0",

@@ -133,5 +127,9 @@ "react-router-dom": "^4.2.2",

"peerDependencies": {
"react": ">=15.6.0 || >=16.2.0",
"prop-types": "^15.0.0"
"prop-types": "^15.0.0",
"react": ">=15.6.0 || >=16.2.0"
},
"resolutions": {
"csscomb/glob": "^7.1.2",
"react-element-to-jsx-string/stringify-object": "2.4.0"
}
}
# Racine
> “A single word often betrays a great design.”
–Jean Racine
> — Jean Racine
Racine is a component library consisting of documented, reusable components built for consumption in Sprout Social’s web products. The design principals of this library are based off Sprout Social’s Design System [SEEDS](https://sproutsocial.github.io/seeds/) and the components are expressed as React components which encapsulate logic, styling, example usage and documentation.
<Lead>Racine is a component library consisting of documented, reusable components built for consumption in Sprout Social’s web products. The design principals of this library are based off Sprout Social’s Design System [SEEDS](https://sproutsocial.github.io/seeds/) and the components are expressed as React components which encapsulate logic, styling, example usage and documentation.</Lead>
## Racine Setup
To get started running Racine locally, assure you have [Node.js](https://nodejs.org/en/) and [NPM](https://www.npmjs.com/) installed and then simply clone or download [this GitHub repo](https://github.com/sproutsocial/racine) and run the following commands:
To get started running Racine locally, make sure you have [Node.js](https://nodejs.org/en/), [NPM](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/lang/en/docs/install/) installed and then clone or download [this GitHub repo](https://github.com/sproutsocial/racine), navigate in terminal to the project's folder and run the following commands:

@@ -18,5 +19,6 @@ ```

Contributions to Racine are welcome from any part of the team, whether updating component presets, documentation or adding a new component to the library. If you are interested in getting involved, feel free to submit a Pull Request, [create a ticket on the Racine Initiatives Jira Board](https://sprout.atlassian.net/secure/RapidBoard.jspa?rapidView=154&useStoredSettings=true), or join us at the [Component Library Guild](https://sprout.atlassian.net/wiki/spaces/WEB/pages/33456255/Component+Library+Guild) meeting.
Contributions to Racine are welcome from any part of the team, whether updating component presets, documentation or adding a new component to the library. If you are interested in getting involved, feel free to submit a Pull Request, [create a ticket on the Design Systems Jira Board](https://sprout.atlassian.net/secure/RapidBoard.jspa?rapidView=276), or join us at the [Component Library Guild](https://sprout.atlassian.net/wiki/spaces/WEB/pages/33456255/Component+Library+Guild) meeting.
**Contents**
- [**New Components**](#new-components)

@@ -30,4 +32,5 @@ - [A good Racine component should…](#a-good-racine-component-should)

- [Committing Changes](#committing-changes)
- [Submitting PRs](#submitting-prs)
- [Submitting PRs to Racine](#submitting-prs-to-racine)
- [Releasing](#releasing)
- [Consuming a Racine Component](#consuming-a-racine-component)

@@ -114,7 +117,7 @@ ## New Components

* [Component Library Guild](https://sprout.atlassian.net/wiki/spaces/WEB/pages/33456255/Component+Library+Guild) meeting is the best place to discuss the benefits of a particular component
* For quicker questions, use the _#eng-guild-components_ or _#eng_web_ channels in Slack
* For quicker questions, use the _#design-systems_ or _#eng_web_ channels in Slack
**What category does this belong to?**
After discussion, it's agreed that, yes, `KurtRussell` belongs in Racine. Of course, naming things is hard. If `KurtRussell` doesn't fit in any of our existing categories, discuss with the Design developer and or Front-End engineers on your team, add it to the agenda of the [Component Library Guild](https://sprout.atlassian.net/wiki/spaces/WEB/pages/33456255/Component+Library+Guild) meeting at or reach out in the _#racine_ _#eng_web_ Slack channels to get advice.
After discussion, it's agreed that, yes, `KurtRussell` belongs in Racine. Of course, naming things is hard. If `KurtRussell` doesn't fit in any of our existing categories, discuss with the Design developer and or Front-End engineers on your team, add it to the agenda of the [Component Library Guild](https://sprout.atlassian.net/wiki/spaces/WEB/pages/33456255/Component+Library+Guild) meeting at or reach out in the _#design-systems_ _#eng_web_ Slack channels to get advice.

@@ -133,3 +136,3 @@ **What should I name the component?**

```
yarn new
$ yarn new
```

@@ -140,8 +143,9 @@

One complete, the scaffolding tool will generate three files for your new component:
- `index.js`: The component JavaScript and JSX goes here
- `index.test.js`: Jest tests for the component
- `presets.js`: Presets and example use cases for the component
- `data.js`: Component Metadata like categories, tags and accessibility status
- `_styles.scss`: Component styles. Note: global variables and Sass mixins are automatically imported, so there's no need to `@import` them in these files.
- `index.js`: The component JavaScript and JSX goes here
- `index.test.js`: Jest tests for the component
- `presets.js`: Presets and example use cases for the component
- `data.js`: Component Metadata like categories, tags and accessibility status
- `_styles.scss`: Component styles. Note: global variables and Sass mixins are automatically imported, so there's no need to `@import` them in these files.
### Documenting Your Component

@@ -157,3 +161,3 @@

As the author of a global component, _you are accountable_ for soliciting feedback from fellow designers and developers on your team as well other teams who might be affected. If you would like to start a discussion about the component, the _#eng-guild-components_ and _#eng-web_ channels on Slack are a great place to start.
As the author of a global component, _you are accountable_ for soliciting feedback from fellow designers and developers on your team as well other teams who might be affected. If you would like to start a discussion about the component, the _#design-systems_ and _#eng-web_ channels on Slack are a great place to start.

@@ -163,23 +167,27 @@ ## Working with Code

We use [standard-version](https://github.com/conventional-changelog/standard-version) to automatically update the changelog and decide new version numbers. As such, we need commit messages to follow a consistent format.
We use [standard-version](https://github.com/conventional-changelog/standard-version) to automatically update the changelog and decide new version numbers. As such, we need commit messages to follow a consistent format (drawn from [conventional commits](https://conventionalcommits.org/)).
Example commit messages (simply match this pattern and your commit message will be accepted):
- `feat: add alert component`
- `fix(alert): display the correct icon when type is "danger"`
- `feat(alert): remove "danger" alert type[\n]BREAKING CHANGE: removes one option for "type" prop`
- `feat(icons): add reporting range icon`
- `feat(dependencies): upgrade classnames to 2.2.5`
- `chore(dependencies): upgrade babel dependencies to latest version` (chore because they are devDependencies)
- `feat(build): add dist/iconList.js to package output`
- `git commit -m "feat: add Alert component"`
- `git commit -m "fix(Alert): display the correct icon when type is \"danger\"" -m "fixes RD-999"`
- `git commit -m "feat(Alert): remove \"danger\" Alert type" -m "BREAKING CHANGE: removes one option for \"type\" prop"`
- `git commit -m "feat(icons): add reporting range icon"`
- `git commit -m "docs: update accessibility statuses"`
- `git commit -m "feat(dependencies): upgrade classnames to 2.2.5"`
- `git commit -m "chore(dependencies): upgrade babel dependencies to latest version"` (chore because they are devDependencies)
- `git commit -m "feat(build): add dist/iconList.js to package output"`
Commit message format:
```
type(scope): message
type(scope?): subject
body
body?
footer
footer?
```
`type` is one of the following:
- **fix**: Solves a bug

@@ -194,3 +202,4 @@ - **feat**: Adds a new feature

`scope` is optional but, with few exceptions, should be used for all `feat` and `fix` commits. Common scopes include:
- **[component name]**: Changes to a racine component
- **[ComponentName]**: Changes to a racine component
- **icons**: Changes to the SVG icon files

@@ -200,3 +209,6 @@ - **dependencies**: Changes to `dependencies` should be `feat`, and `devDependencies` should be `chore`

`message` requirements:
Feel free to suggest additional scope options
`subject` requirements:
- starts with lower case

@@ -206,9 +218,17 @@ - uses the imperative, present tense: "change" not "changed" nor "changes"

### Submitting PRs
`body` is optional and allows for more details to be added
`footer` contains meta-information about pull requests, e.g. "fixes RD-999", referring to a Jira ticket
### Submitting PRs to Racine
Before submitting a PR to Racine, please review the Racine Git Worflow Chart for an overview of the process.
<img src="https://d672eyudr6aq1.cloudfront.net/img/Racine-Git-Workflow.png" height="800px" alt="Racine Git Worflow Chart" />
1. Create a new branch
```
$ git checkout -b my-branch-name
```
```
$ git checkout -b my-branch-name
```

@@ -219,21 +239,23 @@ 2. Make your changes

```
$ yarn test
```
```
$ yarn test
```
4. Commit your changes, following the commit message guidelines above. For additional help, you can use the `yarn commit` command instead of `git commit`
4. Commit your changes, following the commit message guidelines above
```
$ git add -A
$ git commit -m "MESSAGE"
```
```
$ git add -A
$ git commit -m "MESSAGE"
```
5. Push your change
```
$ git push origin my-branch-name
```
```
$ git push origin my-branch-name
```
6. Open a PR (you should see the option to open a PR at the top of the racine github page)
6. Open a PR (you should see the option to open a PR at the top of the Racine Github page)
7. Once your PR is tested, approved and passes the automated validation tasks, you can "Squash and Merge" it (this will be the only merge option available). Please double check that the squashed commit message still follows our commit guidelines.
Congrats, thanks for contributing!

@@ -246,2 +268,3 @@

- Ben Rothman
- Chase McCoy
- Doug Garofalo

@@ -252,7 +275,59 @@ - Kevin Bertram

To publish, run the following from the `master` branch
**Admins**: The release script will automatically pick a new package version based on the commits since the last release. For information about explicitly setting the new version, pre-releases, and other concepts see the [standard-version docs](https://github.com/conventional-changelog/standard-version#cli-usage).
```
$ git checkout master
$ git pull origin master
$ yarn release
```
See the [standard-version docs](https://github.com/conventional-changelog/standard-version#cli-usage) for details about specifying the new version, pre-releases, etc.
### Consuming a Racine Component
Consuming a Racine component can be done in a number of ways, depending on it's stage of development.
#### To use a new component or test unpublished changes, you can use [Yarn Link](https://yarnpkg.com/lang/en/docs/cli/link/). See below for an example of this workflow in action:
* Add new component or makes changes to an existing component
* Navigate to your local copy of Racine in a terminal window
```
$ cd ~/YourCodeFolder/racine
$ yarn run build:package
$ yarn link
```
**Note**: this build task packages _all_ Racine components into the bundle, not just the specific components you are adding or modifying.
* Navigate to the folder you wish to use Racine components in your terminal (such as `web-app-core`) and complete the link:
```
$ cd ~/YourCodeFolder/web-app-core
$ yarn link "@sproutsocial/racine"
$ yarn start
```
* You can now use any components from your local instance of Racine in your project. See below for an example usage:
```
# ~/YourCodeFolder/web-app-core/YourFile.js
import {NavWidget} from ‘@sproutsocial/racine/NavWidget';
...
<NavWidget {...props} />
```
**Note**: If you make additional changes to the Racine component after the `$ yarn link "@sproutsocial/racine"` step, *you must re-run* `$ yarn run build:package` in your `Racine` project folder and then restart your Sprout web app development environment (`$ yarn start`) to see the changes.
A Video walkthrough of this process [can be found here](https://www.dropbox.com/s/ui8vrjbr49x2jnz/testing-Racine-in-webapp.mp4?dl=0).
#### Consuming a published Racine component in your project
To consume a Racine component that has been merged and published, do the following:
* Check your project's `package.json` to make sure you are importing the latest version of Racine. If you need to update the Racine version. If an update is needed, you can either run `$ yarn upgrade @sproutsocial/racine` or manually update the version number in your project’s `package.json`.
* Import and use the component as desired
```
import {NavWidget} from ‘@sproutsocial/racine/NavWidget';
...
<NavWidget {...props} />
```

@@ -6,4 +6,3 @@ // @flow

export { default as Badge } from "./Badge";
export { default as EducationTip } from "./EducationTip";
export { default as Indicator } from "./Indicator";
export { default as CharacterCounter } from "./CharacterCounter";

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc