@cerberus-design/react
Version:
The Cerberus Design React component library.
1 lines • 3.91 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/components/feature-flag/feature-flag.tsx","../../../../src/context/feature-flags.tsx","../../../../src/components/show/show.tsx"],"sourcesContent":["'use client'\n\nimport type { PropsWithChildren } from 'react'\nimport { useFeatureFlags } from '../../context/feature-flags'\nimport { Show } from '../show/index'\n\nexport interface FeatureFlagProps {\n /**\n * The name of the feature flag to check.\n */\n flag: string\n}\n\n/**\n * A component that allows you to show or hide content based on a feature flag.\n * @see https://cerberus.digitalu.design/react/feature-flags\n */\nexport function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>) {\n const showContent = useFeatureFlags(props.flag)\n return <Show when={showContent}>{props.children}</Show>\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\n\n/**\n * This module provides a context and hook for feature flags.\n * @module\n */\n\nexport interface FeatureFlagValue {\n [key: string]: boolean\n}\n\nconst FeatureFlagContext = createContext<FeatureFlagValue | null>(null)\n\nexport interface FeatureFlagProviderProps {\n flags: FeatureFlagValue\n}\n\n/**\n * Provides feature flags to the application.\n * @see https://cerberus.digitalu.design/react/feature-flags\n * @example\n * ```tsx\n * // This should be a JSON file or a server response.\n * const flags = {\n * featureOne: true,\n * featureTwo: false\n * }\n *\n * // Wrap the Provider around the root of your application.\n * <FeatureFlags flags={flags}>\n * <FeatureFlag flag=\"featureOne\">\n * This is visible.\n * </FeatureFlag>\n * <FeatureFlag flag=\"featureTwo\">\n * This is hidden.\n * </FeatureFlag>\n * </FeatureFlags>\n * ```\n */\nexport function FeatureFlags(\n props: PropsWithChildren<FeatureFlagProviderProps>,\n) {\n return (\n <FeatureFlagContext.Provider value={props.flags}>\n {props.children}\n </FeatureFlagContext.Provider>\n )\n}\n\n/**\n * Used to retrieve the context of the FeatureFlags provider.\n */\nexport function useFeatureFlags(key: string): boolean {\n const context = useContext(FeatureFlagContext)\n if (context === null) {\n throw new Error(\n 'useFeatureFlag must be used within a FeatureFlags Provider',\n )\n }\n return context[key] ?? false\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: T | boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n const { when, children, fallback } = props\n\n if (when) {\n return <>{children}</>\n }\n\n if (fallback) {\n return <>{fallback}</>\n }\n\n return null\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAAkE;AA2C9D;AAhCJ,IAAM,yBAAqB,4BAAuC,IAAI;AAyC/D,SAAS,gBAAgB,KAAsB;AACpD,QAAM,cAAU,yBAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO,QAAQ,GAAG,KAAK;AACzB;;;AC9BW,IAAAA,sBAAA;AAJJ,SAAS,KAAQ,OAAwC;AAC9D,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AAErC,MAAI,MAAM;AACR,WAAO,6EAAG,UAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,WAAO,6EAAG,oBAAS;AAAA,EACrB;AAEA,SAAO;AACT;;;AFrBS,IAAAC,sBAAA;AAFF,SAAS,YAAY,OAA4C;AACtE,QAAM,cAAc,gBAAgB,MAAM,IAAI;AAC9C,SAAO,6CAAC,QAAK,MAAM,aAAc,gBAAM,UAAS;AAClD;","names":["import_jsx_runtime","import_jsx_runtime"]}