leno-shared-components v1.2.0

Repository for all Leno projects' shared components

Local Development

To use locally:

1. git clone git@bitbucket.org:lenoit/leno-shared-components.git
2. run npm i
3. Navigate to project that will use this package
4. run npm install --save ../path/to/this/repo*
5. Navigate to your tailwind.config.ts (if one isn't present, you can run npx tailwindcss init)
6. Alter your config like this:

import tailwindConfig from "path/to/leno-components";

const config: Config = {
  ...tailwindConfig,
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "/path/to/leno-components/src/**/*.{jsx,tsx,js,ts,config}",
  ],
};

This should allow you to use the tailwind.config provided from the package in your project.

*Please note, that this will also allow access to ALL custom styles or animations from the package.*

Installing the package normally

1. Navigate to your project's directory
2. run npm i leno-shared-components
3. Start coding!

Publishing the library

1. Open the package directory (leno-shared-components)
2. Change whatever needs changing
3. Open package.json and find the following line ("version": "1.0.1")
4. Increment the version number appropriately:
   • small changes - last number
   • medium changes (component additions, etc) - second last number
   • major changes (big changes to entire design) - first number
5. run npm publish

Using the Button component

Currently the library holds only a button component. To use it in it's most basic variant write:

<Button text={'test'} />

Icons can be added on the left/right side of the button with the iconLeftandiconRight properties. *Please Note these properties only take a React.ReactElement so be sure to wrap any SVGs you send in a component*

Colors and sizes can be added with the color and size props. Values currently include primary, error, warning, neutral and sm,md,lg,xl respectively.

If anything even more specific is required. A prop called btnClassNames is added. This will allow you to pass and classes (incl. tailwind ones) to the button.