# 5c-2023 (Crescendo Collective Contentful Common Components 2023)

**NOTE: DO NOT MAKE USE OF THE NAME FIELD FROM CONTENTFUL. INSTEAD CREATE REDUNDANT FIELD TITLE. THIS IS DUE TO NAME FIELD CONTAINING EXTRA DATA (SITE NAME)**

## Available Scripts

In the project directory, you can run:

### `npm run storybook`

Opens Storybook mode.\
Open [http://localhost:6006](http://localhost:6006) to view it in the browser.

The page will reload if you make edits.\

### `npm run build`

Builds the project

## To install as NPM package

Install `npm i 5c-2023`

Your `tailwind.config.js` will look like this

```
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./public/index.html",
        "./src/**/*.{js,jsx,ts,tsx}",
        "./node_modules/tw-elements/dist/js/**/*.js",
    ],
    theme: {
        extend: {
            colors: {
                poolBlue: {
                    50: "#81BEFC",
                    100: "#609BDC",
                    200: "#82AFDE",
                    300: "#184E96",
                    500: "#143B62",
                },
                poolGray: {
                    50: "#00000029",
                    100: "#00000040",
                    500: "#707071",
                },
            },
            fontFamily: {
                "montserrat-100": ["Montserrat-100"],
                "montserrat-200": ["Montserrat-200"],
                "montserrat-300": ["Montserrat-300"],
                "montserrat-400": ["Montserrat-400"],
                "montserrat-500": ["Montserrat-500"],
                "montserrat-600": ["Montserrat-600"],
                "montserrat-700": ["Montserrat-700"],
                "montserrat-800": ["Montserrat-800"],
                "montserrat-900": ["Montserrat-900"],
            },
        },
    },
    plugins: [
        require("tailwindcss-radix")(),
        require("tw-elements/dist/plugin"),
    ],
    safelist: [
        {
            pattern: /(H|flex|space-*|bg|h-|w-|p|p*-|m|mt-*|text|border|)/,
        },
    ],
};
```

In your `_app.tsx`, include the following to make use of Tailwind Elements:

```

    useEffect(() => {
        const use = async () => {
            (await import("tw-elements")).default;
        };
        use();
    }, []);

```

In your `styles/globals.css` add `@import "5c-2023/dist/cjs/styles/index.css";`

**We're using tailwind extending on this. To use the above color/font properties correctly, refer to this documentation (https://tailwindcss.com/docs/customizing-colors) & (https://tailwindcss.com/docs/font-family#using-custom-values)**

This repo makes use of [**TailwindCss**](https://tailwindcss.com/), [**TailwindElements**](https://tailwind-elements.com/), [**Radix UI**](https://www.radix-ui.com/docs/primitives/overview/introduction) components and [**Radix Tailwind Plugin**](https://www.npmjs.com/package/tailwindcss-radix).

### Links:

-   TailwindCss (https://www.tailwindcss.com/)

*   Radix UI (https://www.radix-ui.com/docs/primitives/overview/introduction)

-   Radix Tailwind (https://www.npmjs.com/package/tailwindcss-radix)
-   Tailwind Elements (https://tailwind-elements.com/)

### Stylesheets

The repo has two stylesheets `index.css` and `stories.css`. The former will be exported as part of the NPM package, the latter will just be used for styling components in **storybook view**. Additional styling can be handled at the global App level (ex: `styles/globals.css` in the SCPEuro application). Use the classnames defined in the repo to target specific components and style.