@lightsparkdev/ui 0.0.9 → 0.0.12

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @lightsparkdev/ui
 
+## 0.0.12
+
+### Patch Changes
+
+- 15d0720: - Add CodeBlock
+- 15d0720: - Consolidate type utils from ui to core
+- Updated dependencies [15d0720]
+- Updated dependencies [15d0720]
+  - @lightsparkdev/core@1.0.21
+
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies [b47bc60]
+  - @lightsparkdev/core@1.0.20
+
+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies [330f913]
+  - @lightsparkdev/core@1.0.19
+
 ## 0.0.9
 
 ### Patch Changes

package/dist/chunk-UV6JCAHE.js

@@ -0,0 +1,198 @@
+import {
+  CopyToClipboardButton
+} from "./chunk-7C4MHI6Q.js";
+import {
+  overflowAutoWithoutScrollbars
+} from "./chunk-FCZJILMW.js";
+import {
+  standardBorderRadius
+} from "./chunk-JK4BP73A.js";
+import {
+  colors,
+  themeOr
+} from "./chunk-2VBDEO6M.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CIGAQ47A.js";
+
+// src/components/CodeBlock.tsx
+import styled from "@emotion/styled";
+import Prism from "prismjs";
+import "prismjs/components/prism-dart.min.js";
+import "prismjs/components/prism-go.min.js";
+import "prismjs/components/prism-graphql.min.js";
+import "prismjs/components/prism-java.min.js";
+import "prismjs/components/prism-json.min.js";
+import "prismjs/components/prism-jsx.min.js";
+import "prismjs/components/prism-kotlin.min.js";
+import "prismjs/components/prism-python.min.js";
+import "prismjs/components/prism-rust.min.js";
+import "prismjs/components/prism-swift.min.js";
+import "prismjs/themes/prism-tomorrow.css";
+import { useLayoutEffect } from "react";
+import Select from "react-select";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+var ProgrammingLanguageOptions = {
+  Bash: "bash",
+  Flutter: "dart",
+  Go: "go",
+  GraphQL: "graphql",
+  Java: "java",
+  JavaScript: "js",
+  JSON: "json",
+  Kotlin: "kotlin",
+  Python: "python",
+  React: "react",
+  ReactNative: "tsx",
+  Rust: "rust",
+  Swift: "swift",
+  Text: "txt"
+};
+var backgroundColor = "#2d2d2d";
+var InlineCode = styled.span`
+  font-family: "Roboto Mono", monospace;
+  background-color: #2d2d2d;
+  border: 1px solid ${themeOr(colors.gray90, colors.gray20)};
+  border-radius: 3px;
+  line-height: 24px;
+  padding: 0 4px;
+`;
+var codeSelectStyles = {
+  container: (styles) => __spreadProps(__spreadValues({}, styles), {
+    display: "flex"
+  }),
+  control: (styles) => __spreadProps(__spreadValues({}, styles), {
+    backgroundColor,
+    border: "none",
+    cursor: "pointer",
+    "&:hover": {
+      border: "#none"
+    },
+    boxShadow: "none",
+    minHeight: 0
+  }),
+  dropdownIndicator: (styles) => __spreadProps(__spreadValues({}, styles), {
+    color: "#ffffff",
+    padding: "0 0 0 4px",
+    "&:hover": {
+      color: "#ffffff"
+    }
+  }),
+  indicatorSeparator: (styles) => ({
+    display: "none"
+  }),
+  input: (styles) => __spreadProps(__spreadValues({}, styles), {
+    fontSize: "1rem",
+    margin: 0,
+    color: "transparent"
+  }),
+  menu: (styles) => __spreadProps(__spreadValues({}, styles), {
+    backgroundColor,
+    width: "auto"
+  }),
+  menuList: (styles) => __spreadProps(__spreadValues({}, styles), {
+    borderRadius: "4px",
+    padding: 0
+  }),
+  option: (styles, state) => __spreadProps(__spreadValues({}, styles), {
+    cursor: "pointer",
+    backgroundColor: state.isSelected ? colors.gray25 : backgroundColor,
+    "&:hover": {
+      backgroundColor: colors.gray25
+    }
+  }),
+  singleValue: (styles) => __spreadProps(__spreadValues({}, styles), {
+    color: "#ffffff",
+    margin: 0
+  }),
+  valueContainer: (styles) => __spreadProps(__spreadValues({}, styles), {
+    padding: 0
+  })
+};
+var CodeBlock = ({
+  title,
+  children,
+  className,
+  language = "Text",
+  languageOptions,
+  onSelectLanguage,
+  withCopyButton
+}) => {
+  useLayoutEffect(() => {
+    Prism.highlightAll();
+  }, [children, language]);
+  const header = withCopyButton || languageOptions && onSelectLanguage ? /* @__PURE__ */ jsxs(CodeBlockHeader, { children: [
+    title && /* @__PURE__ */ jsx(CodeBlockHeaderTitle, { children: title }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        css: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: title ? "flex-end" : "space-between",
+          width: "100%"
+        },
+        children: [
+          languageOptions && onSelectLanguage ? /* @__PURE__ */ jsx("div", { css: { margin: title ? "0 16px 0 auto" : "0" }, children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: { value: language, label: language },
+              options: languageOptions.map((lang) => ({
+                value: lang,
+                label: lang
+              })),
+              onChange: (selected) => {
+                if (selected == null ? void 0 : selected.value) {
+                  onSelectLanguage(selected.value);
+                }
+              },
+              styles: codeSelectStyles
+            }
+          ) }) : null,
+          withCopyButton ? /* @__PURE__ */ jsx(CopyToClipboardButton, { value: children }) : null
+        ]
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ jsxs(StyledCodeBlock, { className, children: [
+    header,
+    /* @__PURE__ */ jsx(CodeBlockContainer, { hasHeader: header !== null, children: /* @__PURE__ */ jsx("code", { className: `language-${ProgrammingLanguageOptions[language]}`, children }) })
+  ] });
+};
+var StyledCodeBlock = styled.div``;
+var CodeBlockHeader = styled.div`
+  align-items: center;
+  background-color: #2d2d2d;
+  border-bottom: 1px solid ${colors.gray25};
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  color: #ffffff;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 16px 20px;
+`;
+var CodeBlockContainer = styled.pre`
+  ${overflowAutoWithoutScrollbars}
+  &[class*="language-"] {
+    padding: 20px;
+    font-weight: 500;
+    ${standardBorderRadius(8)}
+    ${(props) => props.hasHeader ? `border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            margin-top: 0;` : ""}
+  }
+`;
+var CodeBlockHeaderTitle = styled.div`
+  width: 100%;
+  font-weight: 500;
+  color: ${({ theme }) => theme.hcNeutralFromBg(backgroundColor)};
+`;
+
+export {
+  ProgrammingLanguageOptions,
+  InlineCode,
+  CodeBlock,
+  StyledCodeBlock
+};