@carforyou/components

CAR FOR YOU components

Usage

npm install @carforyou/components

In your tailwind.config.js, merge your custom configs with the base configuration:

const { tailwind } = require("@carforyou/components").default
module.exports = tailwind.withDefaultConfig({ colors: { "tuna": "#4E5154" } })

In your next.config.js, add the components paths to the purgecss paths, so the component libraries classnames don't get stripped:

const glob = require("glob")
glob.sync("node_modules/@carforyou/components/pkg/**/*.js")

You can also access the base config directly if you need to:

Note: Be careful with loading the tailwind configuration, as tailwind uses lodash, which might significantly increase your bundle size.

import { tailwind } from "@carforyou/components"
tailwind.defaultConfig.colors.salmon

Then, you can start using the shared React components:

import  { Pagination } from "@carforyou/components"

In order for the components being styled correctly, your project will need to be able to process CSS modules. Additionally, you'll have to import global styles like follows:

@import '@carforyou/components/assets/index.css';

Setup tailwind in a next.js project

The following describes the very minimal setup required in a vanilla next.js project

npm install tailwindcss postcss-import --save-dev

tailwind.css:

@import "tailwindcss/base";
@import "tailwindcss/utilities";

Import this CSS file in _app:

import "../tailwind.css";

next.config.js:

const withCSS = require("@zeit/next-css");
module.exports = withCSS();

postcss.config.js

const tailwindConfig = require("./tailwind")
module.exports = {
  plugins: [require("postcss-easy-import"), require("tailwindcss")(tailwindConfig), require("autoprefixer")]
};

Set up a tailwind.config.js as described above.

Development

To work on the components locally in Storybook:

npm run dev

To build the package and Storybook as static assets:

npm run build

You can link your local npm package to integrate it with any local project:

cd carforyou-components-pkg
npm run build

cd carforyou-listings-web
npm link ../carforyou-components-pkg

If this throws an Invalid hook call error when integrating with a next.js project, add the following to the webpack config:

config.resolve.alias["react"] = path.resolve(__dirname, "node_modules", "react")
config.resolve.alias["react-dom"] = path.resolve(__dirname, "node_modules", "react-dom")

Guidelines

SVG files

• Minimize SVG files with npx svgo
• Generate React components from the SVGs with npx @svgr/cli --template lib/svgrTypescriptTemplate.js --ext .ts and use them inline as components unless you have good reasons not to do so
• Make sure your SVG has a viewBox, prefer cropped icons
• Prefer rotating an arrow over having multiple SVGs per direction
• Prefer setting the size over having multiple SVGs per size

Release a new version

New versions are released on the ci using semantic-release as soon as you merge into master. Please make sure your merge commit message adheres to the corresponding conventions.