24.0.6 • Published 4 months ago

@carforyou/components v24.0.6

Weekly downloads
4
License
MIT
Repository
github
Last release
4 months ago

CAR FOR YOU components

Deployment

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.

24.0.6

4 months ago

24.0.5

11 months ago

24.0.4

1 year ago

24.0.3

1 year ago

24.0.2

1 year ago

24.0.1

2 years ago

22.1.0

2 years ago

21.5.5

2 years ago

21.5.4

2 years ago

21.5.1

2 years ago

21.5.0

2 years ago

21.5.3

2 years ago

21.5.2

2 years ago

22.0.0

2 years ago

23.0.0

2 years ago

22.2.0

2 years ago

21.4.4

2 years ago

24.0.0

2 years ago

21.1.0

2 years ago

21.3.0

2 years ago

21.2.0

2 years ago

21.2.1

2 years ago

21.4.0

2 years ago

21.4.2

2 years ago

21.4.1

2 years ago

21.4.3

2 years ago

19.0.0

3 years ago

18.0.0

3 years ago

20.0.0

3 years ago

17.5.5

3 years ago

17.5.4

3 years ago

20.1.0

3 years ago

20.1.2

3 years ago

20.1.1

3 years ago

21.0.0

3 years ago

17.5.3

3 years ago

17.4.1

3 years ago

17.5.0

3 years ago

17.5.2

3 years ago

17.5.1

3 years ago

17.4.0

3 years ago

17.3.2

3 years ago

17.3.1

3 years ago

17.3.0

3 years ago

17.2.1

3 years ago

17.2.0

3 years ago

17.1.2

3 years ago

17.1.1

3 years ago

17.1.3

3 years ago

17.1.0

3 years ago

17.0.0

3 years ago

16.6.1

3 years ago

16.6.0

3 years ago

16.5.0

3 years ago

16.4.0

3 years ago

16.3.0

3 years ago

16.2.1

3 years ago

16.2.0

3 years ago

16.1.0

3 years ago

16.0.0

3 years ago

15.11.2

3 years ago

15.11.0

3 years ago

15.11.1

3 years ago

15.10.0

3 years ago

15.9.1

3 years ago

15.7.2

3 years ago

15.8.0

3 years ago

15.9.0

3 years ago

15.7.1

3 years ago

15.7.0

3 years ago

15.6.2

3 years ago

15.6.1

3 years ago

15.6.0

3 years ago

15.5.3

3 years ago

15.5.0

3 years ago

15.5.2

3 years ago

15.5.1

3 years ago

15.3.0

3 years ago

15.4.1

3 years ago

15.4.0

3 years ago

14.7.2

3 years ago

14.7.1

3 years ago

15.0.0

3 years ago

15.1.0

3 years ago

15.2.0

3 years ago

15.2.1

3 years ago

14.7.0

3 years ago

14.6.5

3 years ago

14.6.3

3 years ago

14.6.4

3 years ago

14.6.2

3 years ago

14.6.0

3 years ago

14.6.1

3 years ago

14.5.0

3 years ago

14.4.0

3 years ago

14.3.0

3 years ago

14.2.0

3 years ago

14.1.0

3 years ago

14.0.0

3 years ago

13.4.0

3 years ago

13.3.0

3 years ago

13.2.0

3 years ago

13.1.1

3 years ago

13.1.0

3 years ago

13.0.0

3 years ago

12.1.0

3 years ago

12.0.0

3 years ago

11.6.1

3 years ago

11.6.0

3 years ago

11.5.2

3 years ago

11.5.1

3 years ago

11.5.0

4 years ago

11.4.0

4 years ago

11.3.0

4 years ago

11.2.0

4 years ago

11.1.0

4 years ago

11.0.1

4 years ago

11.0.0

4 years ago

10.0.0

4 years ago

9.2.0

4 years ago

9.1.0

4 years ago

9.0.2

4 years ago

9.0.1

4 years ago

9.0.0

4 years ago

8.3.2

4 years ago

8.3.1

4 years ago

8.3.0

4 years ago

8.2.0

4 years ago

8.1.0

4 years ago

8.0.4

4 years ago

8.0.3

4 years ago

8.0.2

4 years ago

8.0.1

4 years ago

8.0.0

4 years ago

7.2.2

4 years ago

7.2.1

4 years ago

7.2.0

4 years ago

7.1.3

4 years ago

7.1.2

4 years ago

7.1.1

4 years ago

7.1.0

4 years ago

7.0.3

4 years ago

7.0.2

4 years ago

7.0.1

4 years ago

7.0.0

4 years ago

6.0.6

4 years ago

6.0.5

4 years ago

6.0.4

4 years ago

6.0.3

4 years ago

6.0.2

4 years ago

6.0.1

4 years ago

6.0.0

4 years ago

5.10.0

4 years ago

5.9.1

4 years ago

5.9.0

4 years ago

5.8.3

4 years ago

5.8.2

4 years ago

5.8.1

4 years ago

5.8.0

4 years ago

5.7.0

4 years ago

5.6.1

4 years ago

5.5.4

4 years ago

5.6.0

4 years ago

5.5.3

4 years ago

5.5.2

4 years ago

5.5.1

4 years ago

5.5.0

4 years ago

5.4.1

4 years ago

5.4.0

4 years ago

5.3.1

4 years ago

5.3.0

4 years ago

5.2.2

4 years ago

5.2.1

4 years ago

5.2.0

4 years ago

5.1.1

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.5.0

4 years ago

4.4.0

4 years ago

4.3.0

4 years ago

5.0.0-pre-6

4 years ago

5.0.0-pre-5.2

4 years ago

5.0.0-pre-5.1

4 years ago

5.0.0-pre-5.0

4 years ago

4.2.1

4 years ago

4.2.0

4 years ago

5.0.0-pre-2

4 years ago

5.0.0-pre-3

4 years ago

5.0.0-pre-4

4 years ago

5.0.0-pre-5

4 years ago

5.0.0-pre-1

4 years ago

4.1.2

4 years ago

4.1.1

4 years ago

4.1.0

4 years ago

4.0.1-0

4 years ago

4.0.0

4 years ago

3.1.0-0

4 years ago

3.1.1

4 years ago

3.1.0

4 years ago

3.0.2

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

2.3.1

5 years ago

2.3.0

5 years ago

2.2.4

5 years ago

2.2.3

5 years ago

2.2.3-0

5 years ago

2.2.2

5 years ago

2.2.2-2

5 years ago

2.2.2-1

5 years ago

2.2.2-0

5 years ago

2.2.1

5 years ago

2.2.1-1

5 years ago

2.2.1-0

5 years ago

2.2.0

5 years ago

2.2.0-0

5 years ago

2.1.3

5 years ago

2.1.2

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

3.0.0-0

5 years ago

2.0.0

5 years ago

2.0.0-1

5 years ago

2.0.0-0

5 years ago

1.5.0

5 years ago

1.4.0

5 years ago

1.3.0

5 years ago

1.2.0

5 years ago

1.1.2

5 years ago

1.1.2-0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.2-0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago