@ck-ui/component-library 0.1.5 → 0.3.0

package/README.md

@@ -21,3 +21,155 @@ To use the component library in your app:
 npm install @ck-ui/component-library
 # or
 yarn add @ck-ui/component-library
+```
+
+---
+
+## 🧭 Naming Convention
+
+The library follows a consistent `ckcl` prefix for design-system tokens and utility classes.
+
+- **CSS variables (tokens):** `--ckcl-<category>-<scale>`
+  - Examples: `--ckcl-primary-500`, `--ckcl-fs-sm`, `--ckcl-spacing-md`
+- **Background utility classes:** `ckcl-<palette>-bg-<step>`
+  - Examples: `ckcl-primary-bg-500`, `ckcl-black-bg-50`
+- **Text color utility classes:** `ckcl-<palette>-<step>`
+  - Examples: `ckcl-primary-500`, `ckcl-green-300`, `ckcl-white`
+- **Font-size utility classes:** `ckcl-fs-<size>`
+  - Examples: `ckcl-fs-xs`, `ckcl-fs-md`, `ckcl-fs-xl`
+- **Typography preset classes:** `ckcl-<type>-<size>-<weight>`
+  - Examples: `ckcl-h1-bold`, `ckcl-body-sm-med`, `ckcl-cap-reg`
+- **Component class names (SCSS Modules):** prefixed with `ckcl-`
+  - Example: `ckcl-button`
+- **React components:** `PascalCase`
+  - Examples: `Button`, `Checkbox`, `DesignSystemShowcase`
+
+### Component and file structure
+
+- **Folder per component:** `lib/components/<ComponentName>/`
+- **Main component file:** `index.tsx`
+- **Storybook file:** `<ComponentName>.stories.tsx`
+- **Styles file:** `styles.module.scss`
+
+---
+
+## 🔗 Local Development with `npm link`
+
+Use `npm link` when developing this package and consuming it in another local app.
+
+### 1) Build and link the library
+
+From this library repository:
+
+```bash
+npm install
+npm run build
+npm link
+```
+
+### 2) Link it in your consuming app
+
+From your consuming app repository:
+
+```bash
+npm link @ck-ui/component-library
+```
+
+### 3) Use in your app
+
+```tsx
+import { Button, CKThemeProvider } from "@ck-ui/component-library";
+import "@ck-ui/component-library/dist/assets/Theme.css";
+
+export function App() {
+  return (
+    <CKThemeProvider>
+      <Button variant="primary">Click me</Button>
+    </CKThemeProvider>
+  );
+}
+```
+
+### 4) Rebuild while developing
+
+When you make changes in the library, rebuild to reflect updates in the linked app:
+
+```bash
+npm run build
+```
+
+Or run watch mode:
+
+```bash
+npm run dev:lib
+```
+
+### 5) Unlink when done
+
+In consuming app:
+
+```bash
+npm unlink @ck-ui/component-library
+npm install
+```
+
+In library repo:
+
+```bash
+npm unlink
+```
+
+---
+
+## 🎨 Using `theme.css` in any project
+
+`theme.css` contains the global design tokens (`--ckcl-*`) and utility classes (`ckcl-*`).
+Import it once at app startup before using component classes.
+
+### React / Vite / CRA
+
+Add this in your entry file (`main.tsx`, `index.tsx`, or `App.tsx`):
+
+```tsx
+import "@ck-ui/component-library/dist/assets/Theme.css";
+```
+
+### Next.js
+
+Import in `app/layout.tsx` (App Router) or `pages/_app.tsx` (Pages Router):
+
+```tsx
+import "@ck-ui/component-library/dist/assets/Theme.css";
+```
+
+### Plain HTML / vanilla JS
+
+```html
+<link rel="stylesheet" href="./node_modules/@ck-ui/component-library/dist/assets/Theme.css" />
+```
+
+### Optional: override tokens for your brand
+
+You can override any token after importing `theme.css`:
+
+```css
+:root {
+  --ckcl-primary-500: #1d4ed8;
+  --ckcl-font-family-base: "Inter", sans-serif;
+}
+```
+
+### Quick usage example
+
+```tsx
+import "@ck-ui/component-library/dist/assets/Theme.css";
+
+export function Demo() {
+  return (
+    <div className="ckcl-primary-bg-50" style={{ padding: "16px" }}>
+      <p className="ckcl-h3-bold ckcl-primary-500">Hello from CK Theme</p>
+      <p className="ckcl-body-sm-reg ckcl-black-500">Utility classes are ready to use.</p>
+    </div>
+  );
+}
+```

package/dist/DropdownFooter-C20yRiDR.js

@@ -0,0 +1,84 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import "./components/Avatar/index.js";
+import { CKButton as _ } from "./components/CKButton/index.js";
+import "./components/IconButton/index.js";
+import "./components/Stepper/index.js";
+import "react";
+import "./index-C8cPPHJD.js";
+import './assets/theme-gJHYUL9y.css';import './assets/styles-CbbBUzsN.css';import './assets/styles-BTZL03H2.css';import './assets/styles-D8sahtFb.css';import './assets/ReactToastify-tlSLHgLC.css';import './assets/DropdownFooter-C7Cml53c.css';/* empty css                       */
+import "./components/GroupedMultiSelect/_helpers/TagContent.js";
+import "./components/GroupedMultiSelect/_helpers/OptionRow.js";
+import "./components/GroupedSingleSelect/_helpers/OptionRow.js";
+import "./components/DateRangePicker/DateRangePicker.js";
+/* empty css                */
+/* empty css                */
+/* empty css                */
+import "./components/MultiSelect/_helpers/TagContent.js";
+import "./components/MultiSelect/_helpers/OptionRow.js";
+/* empty css               */
+import "./components/FusionChart/index.js";
+const l = "_label_eja0g_15", c = "_mandatory_eja0g_29", p = "_trigger_eja0g_35", d = "_active_eja0g_52", m = "_arrow_eja0g_56", g = "_open_eja0g_70", j = "_value_eja0g_75", h = "_placeholder_eja0g_76", b = "_dropdown_eja0g_108", v = "_options_eja0g_132", w = "_footer_eja0g_163", f = "_clear_eja0g_170", y = "_actions_eja0g_183", C = "_disabled_eja0g_197", k = "_helper_eja0g_202", u = "_noData_eja0g_221", e = {
+  "ckds-single-select": "_ckds-single-select_eja0g_1",
+  label: l,
+  mandatory: c,
+  trigger: p,
+  active: d,
+  arrow: m,
+  open: g,
+  value: j,
+  placeholder: h,
+  dropdown: b,
+  "search-wrapper": "_search-wrapper_eja0g_119",
+  options: v,
+  footer: w,
+  clear: f,
+  actions: y,
+  disabled: C,
+  helper: k,
+  "helper-icon": "_helper-icon_eja0g_216",
+  noData: u
+};
+function R({
+  selectedValue: a,
+  value: r,
+  onClear: n,
+  onCancel: i,
+  onApply: s
+}) {
+  return /* @__PURE__ */ t("div", { className: e.footer, children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        className: e.clear,
+        disabled: a === r,
+        onClick: n,
+        children: "Clear"
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: e.actions, children: [
+      /* @__PURE__ */ o(
+        _,
+        {
+          variant: "secondary",
+          label: "Cancel",
+          size: "small",
+          onClick: i
+        }
+      ),
+      /* @__PURE__ */ o(
+        _,
+        {
+          variant: "primary",
+          label: "Apply",
+          size: "small",
+          disabled: a === r,
+          onClick: s
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  R as D,
+  e as s
+};