cl-ui-shoppy

It is a UI Kit components using React, Typescript, and CSS.

Installation

• Review your organization and repository names from your package.json file.

npm i @ds-ale-projects/cl-ui-shoppy

Usage

Option 1. Use Codesandbox

1. Visit https://codesandbox.io/.
2. Create a React (TS) project

• Name: ui-kit-cl-ui-shoppy
• Runtime: Devbox

Option 2. Create a React app

npm create vite@latest

Example

• Create a wrapper component

mkdir -p src/components/wrappers
touch src/components/wrappers/WrapperButtons.tsx

• Review your organization and repository names from your package.json file.

import { AppButton } from "@ds-ale-projects/cl-ui-shoppy";

export default function WrapperButtons() {
  return (
    <div>
      <AppButton variant="primary">Primary Button</AppButton>
      <AppButton variant="secondary">Secondary Button</AppButton>
      <AppButton variant="danger">Danger Button</AppButton>
      <AppButton disabled variant="danger">
        Disabled Button
      </AppButton>
    </div>
  );
}

• Update App.tsx

Consider clean up the index.css file.

import WrapperButtons from "./components/wrappers/WrapperButtons";
import "./index.css";

export default function App() {
  return (
    <div className="App">
      <WrapperButtons />
    </div>
  );
}

Clean up dependencies

rm -rf node_modules
rm -rf package-lock.json
rm -rf pnpm-lock.yaml

• Re-install dependencies

npm i

• Run server

npm run dev

Visualize your node_modules, inspect dependencies, and more.

• Go to Node Modules Inspector
• Enter @ds-ale-projects/cl-ui-shoppy

Publish linter

1. Go to PubLint.
2. Enter @ds-ale-projects/cl-ui-shoppy.

Check vulnerable and malicious dependencies

1. Go to Socket.dev
2. Enter @ds-ale-projects/cl-ui-shoppy.

Or go to check your NPM package directly