# react-common-ts > ## Setup Latest version **6.3.0** (published 2022-01-28) · ISC license · 0 weekly downloads ## Install ```sh npm install react-common-ts pnpm add react-common-ts yarn add react-common-ts bun add react-common-ts ``` Provides the command `bfa-next`. ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 6.3.0 | | Published | 2022-01-28 | | First published | 2022-01-28 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 36 | | Unpacked size | 2.4 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | yes | | Maintainers | selvazhagan08 | | Keywords | ts, reactjs, styled-component, styled-system | ## Links - npm: https://www.npmjs.com/package/react-common-ts - npm.io page: https://npm.io/package/react-common-ts ## Dependencies (36) - [yup](https://npm.io/package/yup.md) ^0.32.8 - [uuid](https://npm.io/package/uuid.md) ^8.3.2 - [debug](https://npm.io/package/debug.md) ^4.3.1 - [urijs](https://npm.io/package/urijs.md) ^1.19.6 - [nookies](https://npm.io/package/nookies.md) 2.4.1 - [numeral](https://npm.io/package/numeral.md) ^2.0.6 - [polished](https://npm.io/package/polished.md) ^3.6.5 - [react-ga](https://npm.io/package/react-ga.md) ^3.0.0 - [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.14.5 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [what-input](https://npm.io/package/what-input.md) ^5.2.10 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.14.6 - [@types/jest](https://npm.io/package/@types/jest.md) ^26.0.0 - [@types/uuid](https://npm.io/package/@types/uuid.md) ^8.3.0 - [react-modal](https://npm.io/package/react-modal.md) ^3.11.2 - [react-slick](https://npm.io/package/react-slick.md) ^0.27.1 - [@types/debug](https://npm.io/package/@types/debug.md) ^4.1.5 - [@types/react](https://npm.io/package/@types/react.md) ^16.9.41 - [@types/urijs](https://npm.io/package/@types/urijs.md) ^1.19.14 - [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.14.157 - [@types/nookies](https://npm.io/package/@types/nookies.md) ^2.0.3 - [@types/numeral](https://npm.io/package/@types/numeral.md) 0.0.28 - [slick-carousel](https://npm.io/package/slick-carousel.md) ^1.8.1 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.8 - [next-router-mock](https://npm.io/package/next-router-mock.md) ^0.1.3 - [react-responsive](https://npm.io/package/react-responsive.md) ^8.2.0 - [@types/classnames](https://npm.io/package/@types/classnames.md) ^2.2.10 - [set-cookie-parser](https://npm.io/package/set-cookie-parser.md) ^2.4.6 - [@types/react-modal](https://npm.io/package/@types/react-modal.md) ^3.10.6 - [@types/react-slick](https://npm.io/package/@types/react-slick.md) ^0.23.4 - [@types/styled-system](https://npm.io/package/@types/styled-system.md) ^5.1.9 - [@types/facebook-js-sdk](https://npm.io/package/@types/facebook-js-sdk.md) ^3.3.2 - [@types/react-responsive](https://npm.io/package/@types/react-responsive.md) ^8.0.2 - [@types/set-cookie-parser](https://npm.io/package/@types/set-cookie-parser.md) ^0.0.6 - [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.0 - [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.4 ## Alternatives - [csv-to-markdown-table](https://npm.io/package/csv-to-markdown-table.md) — 47.0K weekly downloads - [@sapphire/ratelimits](https://npm.io/package/@sapphire/ratelimits.md) — 4.4K weekly downloads - [js-csvparser](https://npm.io/package/js-csvparser.md) — 2.0K weekly downloads - [@adadapted/js-sdk](https://npm.io/package/@adadapted/js-sdk.md) — 251 weekly downloads - [@grapecity/spread-sheets-sparklines](https://npm.io/package/@grapecity/spread-sheets-sparklines.md) — 103 weekly downloads ## Recent versions - 6.3.0 (latest) — 2022-01-28 ## README # react-common-ts ## Setup We highly recommend `nvm` https://github.com/nvm-sh/nvm 1 - Go terminal and type `nvm use` otherwise you should use node v12 2 - `yarn install` 3 - `yarn setup` ## Component playground `yarn storybook` ## How to use Styles in a Project - Import `StylesProvider` component. - Wrap your root component with this provider like so: ```jsx import { StylesProvider } from 'react-common-ts'; ; ``` > Doing this you will get the global styles setup and also access to theme specific configuration variables. ## Contributing ### Migrating from `react-common` Consider doing the following when migrating components: - Transform `.js` and `.jsx` to `.ts` and `.tsx` respectively. - Remove `PropTypes` usage in favour of `Types`. - Add comments for each prop so that storybook can take it as a docstring and show it as a description. - Move the styles from SASS to `styled-components` inside your component file. - Sometimes is not possible to move every style to `styled-components`, in that case don't include SASS files inside your component. Instead let the end user to do so when using your component. For storybook purposes you can add the route to your SASS file inside `src/index.scss`. - Also see considerations for `Creating new components`. ### Creating new components Considerations: - Export the component as default. - Each component will live in its own folder inside `./src/components` - Shape of a component's folder - `index.tsx` where the component lives. - `index.module.scss` styles that can't be migrated to styled components. - `ComponentName.stories.mdx` storybook markup file. - `ComponentName.spec.tsx` Jest test file. > If you need to split the component definition in several files, create one child folder for each subcomponent. Each folder should follow the same shape. - Export your component in `src/index.ts`. - Avoid using class names for styling purposes, instead use `styled-components`. - When using `styled-components` we aim to use `css` tag. You can find a good example of how to implement styled components and mixins in this [PR](https://github.com/myglam/react-common-ts/pull/41). ### Migrating from `ipsy-core-styles` #### Motivation We want to move away from `ipsp-core-styles` and embrace css-in-js, reason: see [css support section in nextjs repo](https://github.com/myglam/ipsy-dot-com-spa-nextjs#css-support). #### General Approach Most `react-common` components convert boolean props to classnames for rendering different style variants/states. We would like their typescript versions to accept similar sets of props but no more `ipsy-core-styles` classnames, instead use `styled-components` to conditional include styles as per boolean props. #### Caveats 1. Comply with style guides: If there is any style conflicts between `react-common` code and style guides, we should respect style guides, we can also reach out to designers for details. Ask for help in `#design` slack channel. 2. Refer to storybook: In `react-common` repo, the main sass file(Button component for example: `_button.sass`) may contain many unused or unrelated sass code, refer to storybook and style guide to focus on necessary parts. 3. Correct storybook: Meanwhile, the main sass file may not contain all related styles (in Button component, for example, there is a line-height definition nested inside `_typography.scss .ux` class), make sure components are wrapped with necessary global classes in `react-common` storybook to find them out. 4. Migrate nested styles last: Nested styles mean a prop may not take effect without another prop, which can be confusing. Migrate the outermost styles first, then one layer nested styles, until the innermost styles, like BFS traverse. 5. Modify prop names if necessary: If a prop associated variant/state is not used anymore(no example in style guide or storybook), feel free to remove it. And if a prop name doesn't match style guide, modify it. But don't forget to add notes to ts storybook `Breaking changes` section. #### Typical Workflow 1. Make sure to create dir, files and add exports to main entry, as per [Creating new components](#creating-new-components) section. 2. Switch to `react-common` repo, find base styles first by looking into imported sass file, storybook and zeplin style guide (if present), then add to `react-common-ts` repo. 3. Repeat step 2 for each variant/state, from outermost styles to innermost nested styles, If there is any style conflict between js repo and style guides, **comply with style guides or ask designer**. ### Writing stories with Storybook Storybook uses `mdx` syntax to define its stories. Is like markdown with JSX support. Here you have a template: ```md import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; import { action } from '@storybook/addon-actions'; import { StylesProvider } from '../../styles/global'; import MyComponent from '.'; # MyComponent MyComponent component ## Props ## Examples (
{storyFn()}
 ), ]} > ``` ### Testing We have 2 ways of test that are complementary between them. #### Snapshots When the test runs creates an snapshot of the generated code. This snapshot will be tested against future changes in order to check if some unvoluntary change has been made. ```jsx it('renders without crashing', () => { const { container } = renderWithTheme( {content} ); expect(container).toMatchSnapshot(); }); ``` > Note: This also generates snapshot of styles when working with styled components. #### @testing-library/react This package allows to create complex tests easily, and encourages good testing practices. You can find docs and samples [here](https://github.com/testing-library/react-testing-library#readme). > Note: when writing test suites have [a11y](https://www.a11yproject.com/) in mind. ### Release Process (versioning) We use [semantic versioning](https://semver.org/). 1. Once your PR gets approved, make sure version inside `package.json` is bumped before merging. 2. After merging, fetch and checkout latest `master` branch on local. 3. Create a tag: `git tag -a vX.X.X -m "message"`. 4. Push the created tag to remote: `git push --tags`. 5. Create a release [here](https://github.com/myglam/react-common-ts/releases/new). Link it to your recently created `tag`. > Releases should have a meaningful title following this recommended pattern `Fix: [APPS-XXXX] Ticket title` or `Feature: [APPS-XXXX] Ticket title`. --- _Source: https://npm.io/package/react-common-ts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._