lifecycle-setting

React + Tailwind components for configuring lifecycle (retention/deletion) policies with hierarchical dependencies. It ships a composable dialog with inputs, policy preview, and action buttons so apps can enforce cascading rules across related resources (records, dialogs, media, etc.).

Features

• Controlled lifecycle dialog with shared context for all sections
• Dependency-aware inputs that prevent children from exceeding parent retention
• Policy preview block with customizable copy
• Tailwind-ready styles and a sharable preset (tailwind-preset.js) for matching tokens
• TypeScript types for items, values, and component props

Installation

npm install lifecycle-setting

Peer requirements: react (>=18), react-dom (>=18), tailwindcss (>=3.4). The UI uses Headless UI and clsx, which are bundled as dependencies.

Quick start

Define your lifecycle items, keep the state controlled in your app, and compose the provided blocks inside LifecycleDialog.

import { useMemo, useState } from "react";
import {
  LifecycleDialog,
  LifecycleHeader,
  LifecycleInputs,
  LifecycleRules,
  LifecycleButtons,
  type LifecycleItemConfig,
  type LifecycleValues,
} from "lifecycle-setting";

const items: LifecycleItemConfig<"record" | "dialog" | "media">[] = [
  { type: "record", labels: { title: "Record" } },
  { type: "dialog", dependsOn: ["record"], labels: { title: "Dialog" } },
  { type: "media", dependsOn: ["record", "dialog"], labels: { title: "Media" } },
];

export function LifecycleModal({ open, onClose }: { open: boolean; onClose: () => void }) {
  const [values, setValues] = useState<LifecycleValues>({
    record: { value: 365, checked: true },
    dialog: { value: 365, checked: true },
    media: { value: 365, checked: true },
  });

  const dirty = useMemo(
    () => items.some((i) => values[i.type].checked !== true || values[i.type].value !== 365),
    [values]
  );

  return (
    <LifecycleDialog open={open} items={items} values={values} setValues={setValues}>
      <LifecycleHeader
        title="Lifecycle policy"
        desc="Changes apply within 24 hours and limit related features until data is removed."
      />
      <LifecycleRules
        rulesTitle="Current policy"
        enabledTemplate="{value} days after {title} is deleted"
        disabledText="kept forever"
      />
      <LifecycleInputs min={3} max={365} inputTitle="retention" />
      <LifecycleButtons
        handleClose={onClose}
        onSubmit={() => console.log("Submit lifecycle:", values)}
        disabled={!dirty}
        cancelText="Close"
        submitText="Save"
      />
    </LifecycleDialog>
  );
}

Dependency rules:

• dependsOn controls hierarchy. A child cannot exceed the shortest checked parent period.
• Unchecking a parent blocks unchecking of a child until all parents are off.
• Changing a parent can auto-shrink dependent children so the tree stays consistent.

Component & type reference

• LifecycleDialog: Shared provider for the lifecycle UI. Props: open, items, values, setValues, optional min/max, and children. Wrap all lifecycle sections inside this component.
• LifecycleHeader: Text block at the top. Props: title, desc (Korean defaults are provided).
• LifecycleRules: Read-only summary list. Props: rulesTitle, enabledTemplate (supports {value} and {title} tokens), disabledText.
• LifecycleInputs: Checkbox + slider + number inputs for each item. Props: min, max, inputTitle. Uses the dialog context to read/write values and enforce dependencies.
• LifecycleButtons: Action row. Props: handleClose, onSubmit, disabled, optional cancelText, submitText. The submit button is also disabled until an input is edited inside the dialog.
• Types: LifecycleItemConfig (defines type, optional dependsOn, and labels), LifecycleValue (value, checked), LifecycleValues (map keyed by type).

Styling

Components are built with Tailwind utility classes. To get the same palette, pull in the provided preset:

// tailwind.config.js
const preset = require("lifecycle-setting/tailwind-preset");

module.exports = {
  presets: [preset],
  content: ["./src/**/*.{ts,tsx,js,jsx}"],
};

Ensure your app bundles Tailwind’s base/components/utilities so the class names resolve. The library does not inject global CSS.

Local development

npm install
npm run dev      # starts the sample app (Vite)
npm run lint     # eslint
npm run build    # type-check + bundle + d.ts

License

MIT