@nodeblocks/frontend-how-to-use-block 0.0.3

package/dist/HowToUse.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './how-to-use.css';
+import { CardProps, DefaultBlocks, DefaultSettings } from './blocks';
+type HowToUseProps = {
+    className: string;
+    title: string;
+    subtitle: string;
+    linkHref?: string;
+    linkText?: string;
+    list: CardProps[];
+    children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {
+        blocks: {
+            [x: string]: any;
+        };
+        settings?: DefaultSettings;
+    };
+};
+export declare const HowToUse: React.FC<HowToUseProps>;
+export default HowToUse;
+//# sourceMappingURL=HowToUse.d.ts.map

package/dist/HowToUse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HowToUse.d.ts","sourceRoot":"","sources":["../src/HowToUse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAA6C,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGhH,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,eAAe,KAAK;QACvE,MAAM,EAAE;YAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;SAAE,CAAC;QAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;KAC5B,CAAC;CACD,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyC5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/blocks.d.ts

@@ -0,0 +1,61 @@
+export type DefaultBlocks = {
+    HowToUseHeader: React.FC<{
+        title: string;
+        subtitle: string;
+    }>;
+    HowToUseCard: React.FC<CardProps>;
+    HowToUseBottomLink: React.FC<{
+        href: string;
+        children: React.ReactNode;
+    }>;
+    HowToUseArrowIcon: React.FC;
+    HowToUseCardList: React.FC<{
+        list: CardProps[];
+    }>;
+};
+export type DefaultSettings = {
+    showArrows: boolean;
+};
+export type CardProps = {
+    title: string;
+    description: string;
+    icon: string;
+};
+export declare function setBlocks(defaultBlocks: DefaultBlocks, children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {
+    blocks: {
+        [x: string]: any;
+    };
+    settings?: DefaultSettings;
+}, settings?: DefaultSettings): {
+    blocks: {
+        [k: string]: any;
+    };
+    settings: {
+        showArrows?: boolean | undefined;
+    };
+};
+export declare function BottomLink({ href, children }: {
+    href: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function CardList({ list, Component, IconComponent, showArrows }: {
+    list: CardProps[];
+    Component?: React.FC<CardProps>;
+    IconComponent?: React.FC;
+    showArrows?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const defaultSettings: {
+    showArrows: boolean;
+};
+export declare const defaultBlocks: {
+    HowToUseHeader: ({ title, subtitle }: {
+        title: string;
+        subtitle: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    HowToUseCard: ({ title, description, icon }: CardProps) => import("react/jsx-runtime").JSX.Element;
+    HowToUseBottomLink: typeof BottomLink;
+    HowToUseArrowIcon: typeof ArrowIcon;
+    HowToUseCardList: typeof CardList;
+};
+//# sourceMappingURL=blocks.d.ts.map

package/dist/blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG;IACxB,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAClC,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,SAAS,EAAE,CAAA;KAAE,CAAC,CAAC;CACrD,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CAChB,CAAC;AA2BF,wBAAgB,SAAS,CACrB,aAAa,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,eAAe,KAAK;IACrE,MAAM,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC9B,EACD,QAAQ,CAAC,EAAE,eAAe;;;;;;;EAiB7B;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAYzF;AACD,wBAAgB,SAAS,4CAExB;AAED,wBAAgB,QAAQ,CAAC,EACrB,IAAS,EACT,SAAgB,EAChB,aAAyB,EACzB,UAAiB,EACpB,EAAE;IACC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;CACnB,2CAOJ;AAED,eAAO,MAAM,eAAe;;CAE3B,CAAA;AAED,eAAO,MAAM,aAAa;0CA3EmB;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE;iDAfpC,SAAS;;;;CAgGpD,CAAA"}

package/dist/className.d.ts

@@ -0,0 +1,9 @@
+type ClassName = string | ClassName[] | undefined | null;
+/**
+ * Utility function to join class names together, ignoring undefined or nil values.
+ * @param classes - The class names to join.
+ * @returns The joined class names.
+ */
+export declare function classNames(...classes: ClassName[]): string;
+export {};
+//# sourceMappingURL=className.d.ts.map

package/dist/className.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"className.d.ts","sourceRoot":"","sources":["../src/className.tsx"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}

package/dist/index.cjs.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".nbb-how-to-use {\n  --color-object-accent-primary: #006EAD;\n  --color-object-accent-primary-emphasis: #006EAD;\n  --border-radius-4: 8px;\n  --color-text-mid-emphasis: #000;\n  --color-surface-secondary: #f5f5f5;\n  --color-surface-primary: #fff;\n}\n\n.nbb-how-to-use {\n  background-color: var(--color-surface-secondary);\n  padding: 32px 16px;\n}\n\n.nbb-how-to-use-section {\n  max-width: 400px;\n  margin: 0 auto;\n}\n\n.nbb-how-to-use-section .nbb-section-header {\n  margin-bottom: 24px;\n  text-align: center;\n}\n\n.nbb-how-to-use-section .nbb-step-card {\n  padding: 16px;\n}\n\n.nbb-how-to-use-section .nbb-step-card header {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin-bottom: 16px;\n}\n.nbb-how-to-use-section .nbb-step-card header h6 {\n  color: #000;\n  margin: 0px 16px;\n  font-weight: bold;\n  font-size: 16px;\n}\n.nbb-how-to-use-section .nbb-step-card header .material-symbols-outlined {\n  color: var(--color-object-accent-primary);\n  font-size: 24px;\n}\n\n.nbb-how-to-use-section .nbb-section-header h6 {\n  color: var(--color-object-accent-primary);\n  font-weight: bold;\n  font-size: 16px;\n  margin: 0;\n}\n\n.nbb-how-to-use-section .nbb-section-header h4 {\n  color: #333;\n  font-size: 24px;\n  font-weight: bold;\n  margin: 8px 0 0;\n}\n\n.nbb-how-to-use-section .nbb-how-to-use-steps {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.nbb-how-to-use-section .nbb-step-card {\n  background-color:  var(--color-surface-primary);\n  padding: 16px;\n  border-radius: var(--border-radius-4);\n}\n\n.nbb-how-to-use-section .nbb-step-text p {\n  margin: 4px 0 0;\n  font-size: 14px;\n  color: var(--color-text-mid-emphasis);\n  text-align: left;\n}\n\n.nbb-how-to-use-section .nbb-arrow {\n  text-align: center;\n  font-size: 32px;\n  color: var(--color-object-accent-primary);\n}\n\n.nbb-how-to-use-section .nbb-sign-up {\n  margin-top: 24px;\n  text-align: center;\n}\n\n.nbb-how-to-use-section .nbb-sign-up-button {\n  padding: 12px 24px;\n  background-color: var(--color-object-accent-primary);\n  color: var(--color-text-on-primary);\n  font-weight: bold;\n  border: none;\n  border-radius: var(--border-radius-4);\n  font-size: 16px;\n  width: 100%;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.nbb-how-to-use-section .nbb-sign-up-button:hover {\n  background-color: var(--color-object-accent-primary-emphasis);\n}\n";
+styleInject(css_248z);
+
+const Card = ({ title, description, icon }) => {
+    return (jsxRuntime.jsxs("article", { className: "nbb-step-card", children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx("span", { className: "material-symbols-outlined", children: icon }), jsxRuntime.jsx("h6", { children: title })] }), jsxRuntime.jsx("div", { className: "nbb-step-text", children: jsxRuntime.jsx("p", { children: description }) })] }));
+};
+const HowToUseHeader = ({ title, subtitle }) => {
+    return (jsxRuntime.jsxs("div", { className: "nbb-section-header", children: [jsxRuntime.jsx("h6", { children: title }), jsxRuntime.jsx("h4", { children: subtitle })] }));
+};
+function setBlocks(defaultBlocks, children, settings) {
+    const { blocks: customBlocks = {}, settings: customSettings = {} } = children ? children(defaultBlocks, settings) : { blocks: {}, settings: {} };
+    return {
+        blocks: Object.fromEntries(Object.entries(defaultBlocks).map(([key, defaultComponent]) => [
+            key,
+            customBlocks[key] || defaultComponent,
+        ])),
+        settings: {
+            ...settings,
+            ...customSettings,
+        }
+    };
+}
+function BottomLink({ href, children }) {
+    return (jsxRuntime.jsx("div", { className: "nbb-sign-up", children: jsxRuntime.jsx("a", { href: href, rel: "noreferrer noopener", className: "nbb-sign-up-button", children: children }) }));
+}
+function ArrowIcon() {
+    return jsxRuntime.jsx("span", { className: "material-symbols-outlined nbb-arrow", children: "expand_more" });
+}
+function CardList({ list = [], Component = Card, IconComponent = ArrowIcon, showArrows = true }) {
+    return jsxRuntime.jsx("div", { className: "nbb-how-to-use-steps", children: list.map(c => {
+            return jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Component, { ...c }, c.title), showArrows && jsxRuntime.jsx(IconComponent, {})] }, c.title);
+        }) });
+}
+const defaultSettings = {
+    showArrows: true
+};
+const defaultBlocks = {
+    HowToUseHeader: HowToUseHeader,
+    HowToUseCard: Card,
+    HowToUseBottomLink: BottomLink,
+    HowToUseArrowIcon: ArrowIcon,
+    HowToUseCardList: CardList,
+};
+
+/**
+ * Utility function to join class names together, ignoring undefined or nil values.
+ * @param classes - The class names to join.
+ * @returns The joined class names.
+ */
+function classNames(...classes) {
+    return classes.flat().filter(Boolean).join(' ');
+}
+
+const HowToUse = ({ className, title, subtitle, list, linkHref = '/sign-up', linkText = '無料登録して求人を探す', children, }) => {
+    const { blocks: { HowToUseHeader, HowToUseCard, HowToUseBottomLink, HowToUseArrowIcon, HowToUseCardList }, settings: { showArrows } } = setBlocks(defaultBlocks, children, defaultSettings);
+    return (jsxRuntime.jsx("div", { className: classNames('nbb-how-to-use', className), children: jsxRuntime.jsxs("div", { className: "nbb-how-to-use-section", children: [jsxRuntime.jsx(HowToUseHeader, { title: title, subtitle: subtitle }), jsxRuntime.jsx("div", { className: "nbb-how-to-use-steps", children: jsxRuntime.jsx(HowToUseCardList, { list: list, Component: HowToUseCard, IconComponent: HowToUseArrowIcon, showArrows: showArrows }) }), jsxRuntime.jsx(HowToUseBottomLink, { href: linkHref, children: linkText })] }) }));
+};
+
+exports.HowToUse = HowToUse;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/blocks.tsx","../src/className.tsx","../src/HowToUse.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import HowToUse from \"./HowToUse\";\n\nexport type DefaultBlocks = {\n    HowToUseHeader: React.FC<{ title: string; subtitle: string }>;\n    HowToUseCard: React.FC<CardProps>;\n    HowToUseBottomLink: React.FC<{ href: string; children: React.ReactNode }>;\n    HowToUseArrowIcon: React.FC;\n    HowToUseCardList: React.FC<{ list: CardProps[] }>;\n}\n\nexport type DefaultSettings = {\n    showArrows: boolean;\n}\n\nexport type CardProps = {\n    title: string;\n    description: string;\n    icon: string;\n};\n\nconst Card = ({ title, description, icon }: CardProps) => {\n    return (\n        <article className=\"nbb-step-card\">\n            <header>\n                <span className=\"material-symbols-outlined\">{icon}</span>\n                <h6>{title}</h6>\n            </header>\n            <div className=\"nbb-step-text\">\n                <p>{description}</p>\n            </div>\n        </article>\n    );\n};\n\n\nconst HowToUseHeader = ({ title, subtitle }: { title: string; subtitle: string }) => {\n    return (\n        <div className=\"nbb-section-header\">\n            <h6>{title}</h6>\n            <h4>{subtitle}</h4>\n        </div>\n    );\n}\n\n\nexport function setBlocks(\n    defaultBlocks: DefaultBlocks,\n    children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {\n        blocks: { [x: string]: any };\n        settings?: DefaultSettings;\n    },\n    settings?: DefaultSettings,\n) {\n    const { blocks: customBlocks = {}, settings: customSettings = {} } =\n        children ? children(defaultBlocks, settings) : { blocks: {}, settings: {} };\n\n    return {\n        blocks: Object.fromEntries(\n            Object.entries(defaultBlocks).map(([key, defaultComponent]) => [\n                key,\n                customBlocks[key] || defaultComponent,\n            ])\n        ),\n        settings: {\n            ...settings,\n            ...customSettings,\n        }\n    };\n}\n\nexport function BottomLink({ href, children }: { href: string; children: React.ReactNode }) {\n    return (\n        <div className=\"nbb-sign-up\">\n            <a\n                href={href}\n                rel=\"noreferrer noopener\"\n                className=\"nbb-sign-up-button\"\n            >\n                {children}\n            </a>\n        </div>\n    );\n}\nexport function ArrowIcon() {\n    return <span className=\"material-symbols-outlined nbb-arrow\">expand_more</span>;\n}\n\nexport function CardList({\n    list = [],\n    Component = Card,\n    IconComponent = ArrowIcon,\n    showArrows = true\n}: {\n    list: CardProps[],\n    Component?: React.FC<CardProps>,\n    IconComponent?: React.FC\n    showArrows?: boolean\n    }) {\n    return <div className=\"nbb-how-to-use-steps\">{list.map(c => {\n        return <div key={c.title} >\n            <Component key={c.title} {...c} />\n            {showArrows && <IconComponent />}\n        </div>;\n    })}</div>;\n}\n\nexport const defaultSettings = {\n    showArrows: true\n}\n\nexport const defaultBlocks = {\n    HowToUseHeader: HowToUseHeader,\n    HowToUseCard: Card,\n    HowToUseBottomLink: BottomLink,\n    HowToUseArrowIcon: ArrowIcon,\n    HowToUseCardList: CardList,\n}\n","type ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n    return classes.flat().filter(Boolean).join(' ');\n}\n","import React from 'react';\nimport './how-to-use.css';\nimport { defaultBlocks, defaultSettings, setBlocks, CardProps, DefaultBlocks, DefaultSettings } from './blocks';\nimport { classNames } from './className';\n\ntype HowToUseProps = {\n  className: string;\n  title: string;\n  subtitle: string;\n  linkHref?: string;\n  linkText?: string;\n  list: CardProps[];\nchildren?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {\n  blocks: { [x: string]: any };\n  settings?: DefaultSettings;\n};\n};\n\n\nexport const HowToUse: React.FC<HowToUseProps> = ({\n  className,\n  title,\n  subtitle,\n  list,\n  linkHref = '/sign-up',\n  linkText = '無料登録して求人を探す',\n  children,\n}) => {\n  \n  const {\n    blocks: {\n      HowToUseHeader,\n      HowToUseCard,\n      HowToUseBottomLink,\n      HowToUseArrowIcon,\n      HowToUseCardList\n    },\n    settings: {\n      showArrows\n    }\n  } = setBlocks(defaultBlocks, children, defaultSettings);\n\n  return (\n    <div className={classNames('nbb-how-to-use', className)}>\n      <div className=\"nbb-how-to-use-section\">\n        <HowToUseHeader title={title} subtitle={subtitle} />\n        <div className=\"nbb-how-to-use-steps\">\n          <HowToUseCardList\n            list={list}\n            Component={HowToUseCard}\n            IconComponent={HowToUseArrowIcon}\n            showArrows={showArrows}\n          />\n        </div>\n        <HowToUseBottomLink href={linkHref}>\n          {linkText}\n        </HowToUseBottomLink>\n      </div>\n    </div>\n  );\n};\n\nexport default HowToUse;\n"],"names":["_jsxs","_jsx"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as HowToUse } from './HowToUse';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.esm.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".nbb-how-to-use {\n  --color-object-accent-primary: #006EAD;\n  --color-object-accent-primary-emphasis: #006EAD;\n  --border-radius-4: 8px;\n  --color-text-mid-emphasis: #000;\n  --color-surface-secondary: #f5f5f5;\n  --color-surface-primary: #fff;\n}\n\n.nbb-how-to-use {\n  background-color: var(--color-surface-secondary);\n  padding: 32px 16px;\n}\n\n.nbb-how-to-use-section {\n  max-width: 400px;\n  margin: 0 auto;\n}\n\n.nbb-how-to-use-section .nbb-section-header {\n  margin-bottom: 24px;\n  text-align: center;\n}\n\n.nbb-how-to-use-section .nbb-step-card {\n  padding: 16px;\n}\n\n.nbb-how-to-use-section .nbb-step-card header {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin-bottom: 16px;\n}\n.nbb-how-to-use-section .nbb-step-card header h6 {\n  color: #000;\n  margin: 0px 16px;\n  font-weight: bold;\n  font-size: 16px;\n}\n.nbb-how-to-use-section .nbb-step-card header .material-symbols-outlined {\n  color: var(--color-object-accent-primary);\n  font-size: 24px;\n}\n\n.nbb-how-to-use-section .nbb-section-header h6 {\n  color: var(--color-object-accent-primary);\n  font-weight: bold;\n  font-size: 16px;\n  margin: 0;\n}\n\n.nbb-how-to-use-section .nbb-section-header h4 {\n  color: #333;\n  font-size: 24px;\n  font-weight: bold;\n  margin: 8px 0 0;\n}\n\n.nbb-how-to-use-section .nbb-how-to-use-steps {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.nbb-how-to-use-section .nbb-step-card {\n  background-color:  var(--color-surface-primary);\n  padding: 16px;\n  border-radius: var(--border-radius-4);\n}\n\n.nbb-how-to-use-section .nbb-step-text p {\n  margin: 4px 0 0;\n  font-size: 14px;\n  color: var(--color-text-mid-emphasis);\n  text-align: left;\n}\n\n.nbb-how-to-use-section .nbb-arrow {\n  text-align: center;\n  font-size: 32px;\n  color: var(--color-object-accent-primary);\n}\n\n.nbb-how-to-use-section .nbb-sign-up {\n  margin-top: 24px;\n  text-align: center;\n}\n\n.nbb-how-to-use-section .nbb-sign-up-button {\n  padding: 12px 24px;\n  background-color: var(--color-object-accent-primary);\n  color: var(--color-text-on-primary);\n  font-weight: bold;\n  border: none;\n  border-radius: var(--border-radius-4);\n  font-size: 16px;\n  width: 100%;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.nbb-how-to-use-section .nbb-sign-up-button:hover {\n  background-color: var(--color-object-accent-primary-emphasis);\n}\n";
+styleInject(css_248z);
+
+const Card = ({ title, description, icon }) => {
+    return (jsxs("article", { className: "nbb-step-card", children: [jsxs("header", { children: [jsx("span", { className: "material-symbols-outlined", children: icon }), jsx("h6", { children: title })] }), jsx("div", { className: "nbb-step-text", children: jsx("p", { children: description }) })] }));
+};
+const HowToUseHeader = ({ title, subtitle }) => {
+    return (jsxs("div", { className: "nbb-section-header", children: [jsx("h6", { children: title }), jsx("h4", { children: subtitle })] }));
+};
+function setBlocks(defaultBlocks, children, settings) {
+    const { blocks: customBlocks = {}, settings: customSettings = {} } = children ? children(defaultBlocks, settings) : { blocks: {}, settings: {} };
+    return {
+        blocks: Object.fromEntries(Object.entries(defaultBlocks).map(([key, defaultComponent]) => [
+            key,
+            customBlocks[key] || defaultComponent,
+        ])),
+        settings: {
+            ...settings,
+            ...customSettings,
+        }
+    };
+}
+function BottomLink({ href, children }) {
+    return (jsx("div", { className: "nbb-sign-up", children: jsx("a", { href: href, rel: "noreferrer noopener", className: "nbb-sign-up-button", children: children }) }));
+}
+function ArrowIcon() {
+    return jsx("span", { className: "material-symbols-outlined nbb-arrow", children: "expand_more" });
+}
+function CardList({ list = [], Component = Card, IconComponent = ArrowIcon, showArrows = true }) {
+    return jsx("div", { className: "nbb-how-to-use-steps", children: list.map(c => {
+            return jsxs("div", { children: [jsx(Component, { ...c }, c.title), showArrows && jsx(IconComponent, {})] }, c.title);
+        }) });
+}
+const defaultSettings = {
+    showArrows: true
+};
+const defaultBlocks = {
+    HowToUseHeader: HowToUseHeader,
+    HowToUseCard: Card,
+    HowToUseBottomLink: BottomLink,
+    HowToUseArrowIcon: ArrowIcon,
+    HowToUseCardList: CardList,
+};
+
+/**
+ * Utility function to join class names together, ignoring undefined or nil values.
+ * @param classes - The class names to join.
+ * @returns The joined class names.
+ */
+function classNames(...classes) {
+    return classes.flat().filter(Boolean).join(' ');
+}
+
+const HowToUse = ({ className, title, subtitle, list, linkHref = '/sign-up', linkText = '無料登録して求人を探す', children, }) => {
+    const { blocks: { HowToUseHeader, HowToUseCard, HowToUseBottomLink, HowToUseArrowIcon, HowToUseCardList }, settings: { showArrows } } = setBlocks(defaultBlocks, children, defaultSettings);
+    return (jsx("div", { className: classNames('nbb-how-to-use', className), children: jsxs("div", { className: "nbb-how-to-use-section", children: [jsx(HowToUseHeader, { title: title, subtitle: subtitle }), jsx("div", { className: "nbb-how-to-use-steps", children: jsx(HowToUseCardList, { list: list, Component: HowToUseCard, IconComponent: HowToUseArrowIcon, showArrows: showArrows }) }), jsx(HowToUseBottomLink, { href: linkHref, children: linkText })] }) }));
+};
+
+export { HowToUse };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/blocks.tsx","../src/className.tsx","../src/HowToUse.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import HowToUse from \"./HowToUse\";\n\nexport type DefaultBlocks = {\n    HowToUseHeader: React.FC<{ title: string; subtitle: string }>;\n    HowToUseCard: React.FC<CardProps>;\n    HowToUseBottomLink: React.FC<{ href: string; children: React.ReactNode }>;\n    HowToUseArrowIcon: React.FC;\n    HowToUseCardList: React.FC<{ list: CardProps[] }>;\n}\n\nexport type DefaultSettings = {\n    showArrows: boolean;\n}\n\nexport type CardProps = {\n    title: string;\n    description: string;\n    icon: string;\n};\n\nconst Card = ({ title, description, icon }: CardProps) => {\n    return (\n        <article className=\"nbb-step-card\">\n            <header>\n                <span className=\"material-symbols-outlined\">{icon}</span>\n                <h6>{title}</h6>\n            </header>\n            <div className=\"nbb-step-text\">\n                <p>{description}</p>\n            </div>\n        </article>\n    );\n};\n\n\nconst HowToUseHeader = ({ title, subtitle }: { title: string; subtitle: string }) => {\n    return (\n        <div className=\"nbb-section-header\">\n            <h6>{title}</h6>\n            <h4>{subtitle}</h4>\n        </div>\n    );\n}\n\n\nexport function setBlocks(\n    defaultBlocks: DefaultBlocks,\n    children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {\n        blocks: { [x: string]: any };\n        settings?: DefaultSettings;\n    },\n    settings?: DefaultSettings,\n) {\n    const { blocks: customBlocks = {}, settings: customSettings = {} } =\n        children ? children(defaultBlocks, settings) : { blocks: {}, settings: {} };\n\n    return {\n        blocks: Object.fromEntries(\n            Object.entries(defaultBlocks).map(([key, defaultComponent]) => [\n                key,\n                customBlocks[key] || defaultComponent,\n            ])\n        ),\n        settings: {\n            ...settings,\n            ...customSettings,\n        }\n    };\n}\n\nexport function BottomLink({ href, children }: { href: string; children: React.ReactNode }) {\n    return (\n        <div className=\"nbb-sign-up\">\n            <a\n                href={href}\n                rel=\"noreferrer noopener\"\n                className=\"nbb-sign-up-button\"\n            >\n                {children}\n            </a>\n        </div>\n    );\n}\nexport function ArrowIcon() {\n    return <span className=\"material-symbols-outlined nbb-arrow\">expand_more</span>;\n}\n\nexport function CardList({\n    list = [],\n    Component = Card,\n    IconComponent = ArrowIcon,\n    showArrows = true\n}: {\n    list: CardProps[],\n    Component?: React.FC<CardProps>,\n    IconComponent?: React.FC\n    showArrows?: boolean\n    }) {\n    return <div className=\"nbb-how-to-use-steps\">{list.map(c => {\n        return <div key={c.title} >\n            <Component key={c.title} {...c} />\n            {showArrows && <IconComponent />}\n        </div>;\n    })}</div>;\n}\n\nexport const defaultSettings = {\n    showArrows: true\n}\n\nexport const defaultBlocks = {\n    HowToUseHeader: HowToUseHeader,\n    HowToUseCard: Card,\n    HowToUseBottomLink: BottomLink,\n    HowToUseArrowIcon: ArrowIcon,\n    HowToUseCardList: CardList,\n}\n","type ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n    return classes.flat().filter(Boolean).join(' ');\n}\n","import React from 'react';\nimport './how-to-use.css';\nimport { defaultBlocks, defaultSettings, setBlocks, CardProps, DefaultBlocks, DefaultSettings } from './blocks';\nimport { classNames } from './className';\n\ntype HowToUseProps = {\n  className: string;\n  title: string;\n  subtitle: string;\n  linkHref?: string;\n  linkText?: string;\n  list: CardProps[];\nchildren?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {\n  blocks: { [x: string]: any };\n  settings?: DefaultSettings;\n};\n};\n\n\nexport const HowToUse: React.FC<HowToUseProps> = ({\n  className,\n  title,\n  subtitle,\n  list,\n  linkHref = '/sign-up',\n  linkText = '無料登録して求人を探す',\n  children,\n}) => {\n  \n  const {\n    blocks: {\n      HowToUseHeader,\n      HowToUseCard,\n      HowToUseBottomLink,\n      HowToUseArrowIcon,\n      HowToUseCardList\n    },\n    settings: {\n      showArrows\n    }\n  } = setBlocks(defaultBlocks, children, defaultSettings);\n\n  return (\n    <div className={classNames('nbb-how-to-use', className)}>\n      <div className=\"nbb-how-to-use-section\">\n        <HowToUseHeader title={title} subtitle={subtitle} />\n        <div className=\"nbb-how-to-use-steps\">\n          <HowToUseCardList\n            list={list}\n            Component={HowToUseCard}\n            IconComponent={HowToUseArrowIcon}\n            showArrows={showArrows}\n          />\n        </div>\n        <HowToUseBottomLink href={linkHref}>\n          {linkText}\n        </HowToUseBottomLink>\n      </div>\n    </div>\n  );\n};\n\nexport default HowToUse;\n"],"names":["_jsxs","_jsx"],"mappings":"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","x_google_ignoreList":[0]}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@nodeblocks/frontend-how-to-use-block",
+  "version": "0.0.3",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "browser": "dist/index.iife.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "dist/index.css"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -c --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.1",
+    "rollup": "^4.28.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-serve": "^1.1.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2"
+  }
+}

package/readme.md

@@ -0,0 +1,57 @@
+## 🚀 Nodeblocks Frontend Starter Kit
+
+Welcome to the Nodeblocks Frontend Starter Kit! 🎉 This kit is designed to make building frontend libraries in React super easy, helping you streamline your development workflow with minimal fuss. Let's dive in! 🤿
+
+### ✨ Features
+- **🚀 Bundling with Rollup:** Get a clean, minimalistic approach to bundling your JavaScript files for smoother frontend development.
+- **💙 TypeScript Support:** We've included a pre-configured `tsconfig.json` to ensure your TypeScript setup is strict, efficient, and ready to go.
+- **⚙️ Peer Dependencies:** Keep bundle sizes lean with React and React DOM set as peer dependencies.
+- **🎨 CSS Support:** Easily import and process CSS files, giving you more control over your styles.
+
+### 🛠️ How to Use
+1. **Clone this repository** 🌀:
+   ```bash
+   git clone <repository-url>
+   cd <repository-directory>
+   ```
+
+2. **Install dependencies** 📦:
+   ```bash
+   npm install
+   ```
+
+3. **Start development** 🛠️:
+   ```bash
+   npm run watch
+   ```
+
+4. **Build for production** 🏗️:
+   ```bash
+   npm run build
+   ```
+
+### 🧪 How to Test
+
+The `test` folder contains examples that demonstrate how to use the libraries you create with this starter kit. These examples show compatibility with various bundlers, such as:
+
+- **Create React App** (Webpack)
+- **Vite** ⚡
+- **Rollup** (itself) (Coming soon) 🔄
+- **Parcel** (Coming soon) 📦
+
+This ensures Nodeblocks libraries integrate seamlessly with different workflows. 🛠️✨
+
+**Before running each project make sure you run `npm link`:**
+
+1. In the root of this project:
+   ```bash
+   npm link
+   ```
+2. In the test project you want to run:
+   ```bash
+   npm i
+   npm link @basaldev/frontend-starter-kit
+   ```
+(Note that in real life your library would not be called frontend-starter-kit.)
+
+3. Then you can follow your usual workflow either with **Create React App** (`npm start`) or with Vite (`npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.