@carforyou/components v24.0.6
CAR FOR YOU components
Usage
npm install @carforyou/componentsIn 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.salmonThen, 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-devtailwind.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 devTo build the package and Storybook as static assets:
npm run buildYou 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-pkgIf 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 .tsand 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.
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago