Back to packageRELEASE DETAILS

1.0.14

npm

5c-2023

## Available Scripts

Published6 Jan 2023

Direct dependencies70

Transitive dependenciesNot calculated

README

Current package documentation

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 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, TailwindElements, Radix UI components and Radix Tailwind Plugin.

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.

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 71

Native requirements

70 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
@radix-ui/colors Environment { "local_name": "@radix-ui/colors", "alias": false, "peer_metadata": null }	`^0.1.8`	runtime
@radix-ui/react-accordion Environment { "local_name": "@radix-ui/react-accordion", "alias": false, "peer_metadata": null }	`^1.0.1`	runtime
@radix-ui/react-alert-dialog Environment { "local_name": "@radix-ui/react-alert-dialog", "alias": false, "peer_metadata": null }	`^1.0.2`	runtime
@radix-ui/react-avatar Environment { "local_name": "@radix-ui/react-avatar", "alias": false, "peer_metadata": null }	`^1.0.1`	runtime
@radix-ui/react-checkbox Environment { "local_name": "@radix-ui/react-checkbox", "alias": false, "peer_metadata": null }	`^1.0.1`	runtime
@radix-ui/react-context-menu Environment { "local_name": "@radix-ui/react-context-menu", "alias": false, "peer_metadata": null }	`^2.0.1`	runtime
@radix-ui/react-dialog Environment { "local_name": "@radix-ui/react-dialog", "alias": false, "peer_metadata": null }	`^1.0.2`	runtime
@radix-ui/react-dropdown-menu Environment { "local_name": "@radix-ui/react-dropdown-menu", "alias": false, "peer_metadata": null }	`^2.0.1`	runtime
@radix-ui/react-hover-card Environment { "local_name": "@radix-ui/react-hover-card", "alias": false, "peer_metadata": null }	`^1.0.2`	runtime
@radix-ui/react-icons Environment { "local_name": "@radix-ui/react-icons", "alias": false, "peer_metadata": null }	`^1.1.1`	runtime
@radix-ui/react-label Environment { "local_name": "@radix-ui/react-label", "alias": false, "peer_metadata": null }	`^2.0.0`	runtime
@radix-ui/react-navigation-menu Environment { "local_name": "@radix-ui/react-navigation-menu", "alias": false, "peer_metadata": null }	`^1.1.1`	runtime
@radix-ui/react-popover Environment { "local_name": "@radix-ui/react-popover", "alias": false, "peer_metadata": null }	`^1.0.2`	runtime
@radix-ui/react-progress Environment { "local_name": "@radix-ui/react-progress", "alias": false, "peer_metadata": null }	`^1.0.1`	runtime
@radix-ui/react-radio-group Environment { "local_name": "@radix-ui/react-radio-group", "alias": false, "peer_metadata": null }	`^1.1.0`	runtime
@radix-ui/react-scroll-area Environment { "local_name": "@radix-ui/react-scroll-area", "alias": false, "peer_metadata": null }	`^1.0.2`	runtime
@radix-ui/react-select Environment { "local_name": "@radix-ui/react-select", "alias": false, "peer_metadata": null }	`^1.1.2`	runtime
@radix-ui/react-separator Environment { "local_name": "@radix-ui/react-separator", "alias": false, "peer_metadata": null }	`^1.0.1`	runtime
@radix-ui/react-slider Environment { "local_name": "@radix-ui/react-slider", "alias": false, "peer_metadata": null }	`^1.1.0`	runtime
@radix-ui/react-switch Environment { "local_name": "@radix-ui/react-switch", "alias": false, "peer_metadata": null }	`^1.0.1`	runtime
@radix-ui/react-tabs Environment { "local_name": "@radix-ui/react-tabs", "alias": false, "peer_metadata": null }	`^1.0.1`	runtime
@radix-ui/react-toast Environment { "local_name": "@radix-ui/react-toast", "alias": false, "peer_metadata": null }	`^1.1.2`	runtime
@radix-ui/react-toggle Environment { "local_name": "@radix-ui/react-toggle", "alias": false, "peer_metadata": null }	`^1.0.1`	runtime
@radix-ui/react-toggle-group Environment { "local_name": "@radix-ui/react-toggle-group", "alias": false, "peer_metadata": null }	`^1.0.1`	runtime
@radix-ui/react-tooltip Environment { "local_name": "@radix-ui/react-tooltip", "alias": false, "peer_metadata": null }	`^1.0.2`	runtime
@rollup/plugin-typescript Environment { "local_name": "@rollup/plugin-typescript", "alias": false, "peer_metadata": null }	`^10.0.1`	runtime
@storybook/react Environment { "local_name": "@storybook/react", "alias": false, "peer_metadata": null }	`^6.5.13`	runtime
@storybook/theming Environment { "local_name": "@storybook/theming", "alias": false, "peer_metadata": null }	`^6.5.14`	runtime
@testing-library/jest-dom Environment { "local_name": "@testing-library/jest-dom", "alias": false, "peer_metadata": null }	`^5.16.5`	runtime
@testing-library/react Environment { "local_name": "@testing-library/react", "alias": false, "peer_metadata": null }	`^13.4.0`	runtime
@testing-library/user-event Environment { "local_name": "@testing-library/user-event", "alias": false, "peer_metadata": null }	`^13.5.0`	runtime
@types/jest Environment { "local_name": "@types/jest", "alias": false, "peer_metadata": null }	`^27.5.2`	runtime
@types/node Environment { "local_name": "@types/node", "alias": false, "peer_metadata": null }	`^16.18.3`	runtime
@types/react Environment { "local_name": "@types/react", "alias": false, "peer_metadata": null }	`^18.0.25`	runtime
@types/react-dom Environment { "local_name": "@types/react-dom", "alias": false, "peer_metadata": null }	`^18.0.9`	runtime
classnames Environment { "local_name": "classnames", "alias": false, "peer_metadata": null }	`^2.3.2`	runtime
cross-env Environment { "local_name": "cross-env", "alias": false, "peer_metadata": null }	`^7.0.3`	runtime
next Environment { "local_name": "next", "alias": false, "peer_metadata": null }	`^13.0.7`	runtime
react-scripts Environment { "local_name": "react-scripts", "alias": false, "peer_metadata": null }	`5.0.1`	runtime
rollup-plugin-copy Environment { "local_name": "rollup-plugin-copy", "alias": false, "peer_metadata": null }	`^3.4.0`	runtime
sass Environment { "local_name": "sass", "alias": false, "peer_metadata": null }	`^1.56.1`	runtime
storybook-addon-next Environment { "local_name": "storybook-addon-next", "alias": false, "peer_metadata": null }	`^1.7.1`	runtime
tailwindcss-radix Environment { "local_name": "tailwindcss-radix", "alias": false, "peer_metadata": null }	`^2.6.1`	runtime
tw-elements Environment { "local_name": "tw-elements", "alias": false, "peer_metadata": null }	`^1.0.0-alpha13`	runtime
typescript Environment { "local_name": "typescript", "alias": false, "peer_metadata": null }	`>=3.7.0`	runtime
web-vitals Environment { "local_name": "web-vitals", "alias": false, "peer_metadata": null }	`^2.1.4`	runtime
@radix-ui/react-switch Environment { "local_name": "@radix-ui/react-switch", "alias": false, "peer_metadata": null }	`^1.0.1`	development
@rollup/plugin-commonjs Environment { "local_name": "@rollup/plugin-commonjs", "alias": false, "peer_metadata": null }	`^23.0.2`	development
@rollup/plugin-node-resolve Environment { "local_name": "@rollup/plugin-node-resolve", "alias": false, "peer_metadata": null }	`^15.0.1`	development
@rollup/plugin-terser Environment { "local_name": "@rollup/plugin-terser", "alias": false, "peer_metadata": null }	`^0.2.0`	development
@storybook/addon-actions Environment { "local_name": "@storybook/addon-actions", "alias": false, "peer_metadata": null }	`^6.5.13`	development
@storybook/addon-essentials Environment { "local_name": "@storybook/addon-essentials", "alias": false, "peer_metadata": null }	`^6.5.13`	development
@storybook/addon-interactions Environment { "local_name": "@storybook/addon-interactions", "alias": false, "peer_metadata": null }	`^6.5.13`	development
@storybook/addon-links Environment { "local_name": "@storybook/addon-links", "alias": false, "peer_metadata": null }	`^6.5.13`	development
@storybook/builder-webpack5 Environment { "local_name": "@storybook/builder-webpack5", "alias": false, "peer_metadata": null }	`^6.5.13`	development
@storybook/manager-webpack5 Environment { "local_name": "@storybook/manager-webpack5", "alias": false, "peer_metadata": null }	`^6.5.13`	development
@storybook/node-logger Environment { "local_name": "@storybook/node-logger", "alias": false, "peer_metadata": null }	`^6.5.13`	development
@storybook/preset-create-react-app Environment { "local_name": "@storybook/preset-create-react-app", "alias": false, "peer_metadata": null }	`^4.1.2`	development
@storybook/testing-library Environment { "local_name": "@storybook/testing-library", "alias": false, "peer_metadata": null }	`^0.0.13`	development
autoprefixer Environment { "local_name": "autoprefixer", "alias": false, "peer_metadata": null }	`^10.4.13`	development
postcss Environment { "local_name": "postcss", "alias": false, "peer_metadata": null }	`^8.4.19`	development
prop-types Environment { "local_name": "prop-types", "alias": false, "peer_metadata": null }	`^15.8.1`	development
rollup Environment { "local_name": "rollup", "alias": false, "peer_metadata": null }	`3.3.0`	development
rollup-plugin-dts Environment { "local_name": "rollup-plugin-dts", "alias": false, "peer_metadata": null }	`^5.0.0`	development
rollup-plugin-peer-deps-external Environment { "local_name": "rollup-plugin-peer-deps-external", "alias": false, "peer_metadata": null }	`^2.2.4`	development
rollup-plugin-postcss Environment { "local_name": "rollup-plugin-postcss", "alias": false, "peer_metadata": null }	`^4.0.2`	development
storybook-dark-mode Environment { "local_name": "storybook-dark-mode", "alias": false, "peer_metadata": null }	`^2.0.4`	development
tailwindcss Environment { "local_name": "tailwindcss", "alias": false, "peer_metadata": null }	`^3.2.4`	development
webpack Environment { "local_name": "webpack", "alias": false, "peer_metadata": null }	`^5.75.0`	development
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`^18.2.0`	peer
react-dom Environment { "local_name": "react-dom", "alias": false, "peer_metadata": null }	`^18.2.0`	peer

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "integrity": "sha512-0yGqzfbeHFJGiAWWJiFdjDTASPmgdcRUbJLRu9QGpphhVHUMlfgFNcsOx7TFiuRCEvJgdca8w4vB0Mn1OuGsew==",
  "shasum": "034f9db008126f940f4ecc265dc98c4fd5822053",
  "tarball": "https://registry.npmjs.org/5c-2023/-/5c-2023-1.0.14.tgz",
  "fileCount": 287,
  "unpackedSize": 4802034,
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEUCIEXcnvxm5evvWIfXjhosLvmDE9AmL7DJX2EHz1JNch68AiEAuLX35o8TJcee7cZu6w7hMfKT1MD2Qs9iW/St3/joV90="
    }
  ],
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuJtyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOOQ/+NPCadUFuQ2niKRzTCNpNT0faoh5tmxuaWS5xyaNym6SLBYpJ\r\nOapytzi7PhbJ1n2XBkRkexRU2529I0Qw//7WvPkGYQYHGtVB2ZQ7Ifp9E3NJ\r\nbVWFoBo69sO3gu01omwXuZ4vpaPAhaxW2KpApjA5tH1z5Ur5cfv6aqyMMhDl\r\nH0Ejeo0N8gEiTf1hwnlmy+ytHYTLb1o4seJ4/dXHc74YRGR5kazMJ3aTB7dA\r\nslvQ9EbzbtRpc8tt6Yrf74UsgE9hHl2l+E1TN37cvmV7BGB2iy+csTRif0Df\r\ndONBTXcr6iIe0vlukVNBzROWmPr4wvbXIHbdcAaf/xG6K9FWQIpGeKOtsvWd\r\nCJ2zAmHKwa8R44S6+r3DGh7EuWnh0y3ZU4xenvnO7Tq0wiGXmNdY6xKGRO+U\r\nDOo09GEh7vGepm8gYR4wr3rwXsuBXpQe+YVDMvxuo7rg65fQT1Uv0WFRf25X\r\nF6wC9Vjhka6vtQzfbFkH+1FevkBnohxt8QhroGiK/p7oxKBwFiL+HdCDo9gS\r\na8cfXgneSFa8wH4/lXle7ebkA+4QZM4TK9iiOqrTG+UjERWpSqB67kvqJ+Sf\r\noI8NjNlaq6HIxiPHWydNpbNbIBgm9OtoonL9eXQUuD9Fz+Rd0Txbtb98/SSF\r\nkGIkj+KYtJysZyjFmi5K1Xe5b/GYiMMsWIs=\r\n=LSQI\r\n-----END PGP SIGNATURE-----\r\n"
}

Metadata history

Meaningful changes

Current collected state Current

Observed since 20 Oct, 20:30 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:9e1b60afeb5cdc0c856f1ff2b1ccd1c0ce90f4ac46d5655abea2c16cf8ff6b88

Other collected versions

1.0.31725 Apr 1.0.31619 Apr 1.0.31518 Apr 1.0.31418 Apr 1.0.31318 Apr 1.0.31218 Apr View all collected versions →