@stokelp/ui 2.107.0 → 2.108.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/chat/ChatScoreBreakdown.cjs +1 -1
- package/dist/components/chat/ChatScoreBreakdown.cjs.map +1 -1
- package/dist/components/chat/ChatScoreBreakdown.d.ts +1 -1
- package/dist/components/chat/ChatScoreBreakdown.js +3 -2
- package/dist/components/chat/ChatScoreBreakdown.js.map +1 -1
- package/dist/ui.css +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";const e=require("../text/Text.cjs");let t=require("@stokelp/styled-system/jsx"),n=require("react/jsx-runtime");var r=[`origin`,`temperature`,`cutting`,`cooking`,`treatment`,`label`,`packaging`];function i(e){return e>=70?`#3B6D11`:e>=40?`#854F0B`:`#A32D2D`}function a(e){return e>=70?`#639922`:e>=40?`#BA7517`:`#E24B4A`}function o(e){return e?.matched!=null&&e?.total!=null}var s=({percent:s,detail:c,labels:l})=>{let u=r.filter(e=>o(c[e])),d=r.filter(e=>!o(c[e]));return(0,n.jsxs)(t.Box,{bg:`white`,borderRadius:`radius-8`,p:`space-16`,minW:`220px`,maxW:`240px`,css:{"& *":{fontFamily:`inherit`}},children:[(0,n.jsxs)(t.HStack,{justify:`space-between`,alignItems:`baseline`,mb:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.md`,fontWeight:`bold`,children:l.title}),(0,n.jsxs)(e.Text,{as:`span`,fontSize:`body.lg`,fontWeight:`medium`,style:{color:i(s)},children:[Math.round(s),` %`]})]}),(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mb:`space-8`}),u.length>0&&(0,n.jsxs)(t.VStack,{alignItems:`stretch`,gap:`space-4`,mb:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`bold`,color:`grey.400`,children:l.compared}),u.map(r=>{let i=c[r].matched,o=c[r].total,s=o>0?i/o*100:0;return(0,n.jsxs)(t.HStack,{alignItems:`center`,gap:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,color:`grey.500`,minW:`80px`,children:l.attributes[r]}),(0,n.jsx)(t.Box,{flex:`1`,h:`3px`,bg:`grey.100`,borderRadius:`full`,overflow:`hidden`,children:(0,n.jsx)(t.Box,{h:`100%`,borderRadius:`full`,style:{width:`${s}%`,background:a(s)}})}),(0,n.jsxs)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`medium`,minW:`40px`,textAlign:`right`,style:{color:a(s)},children:[i,`/`,o]})]},r)})]}),u.length>0&&d.length>0&&(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mb:`space-8`}),d.length>0&&(0,n.jsxs)(t.VStack,{alignItems:`stretch`,gap:`space-4`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`bold`,color:`grey.400`,children:l.notSpecified}),(0,n.jsx)(t.HStack,{flexWrap:`wrap`,gap:`space-4`,children:d.map(t=>(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,color:`grey.400`,border:`1px solid`,borderColor:`grey.100`,px:`space-8`,py:`2px`,borderRadius:`full`,children:l.attributes[t]},t))})]}),l.footer&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mt:`space-8`,mb:`space-8`}),(0,n.jsx)(e.Text,{as:`span`,fontSize:`
|
|
1
|
+
"use client";const e=require("../text/Text.cjs");let t=require("@stokelp/styled-system/jsx"),n=require("react/jsx-runtime");var r=[`origin`,`rawMaterialOrigin`,`temperature`,`cutting`,`cooking`,`treatment`,`label`,`packaging`];function i(e){return e>=70?`#3B6D11`:e>=40?`#854F0B`:`#A32D2D`}function a(e){return e>=70?`#639922`:e>=40?`#BA7517`:`#E24B4A`}function o(e){return e?.matched!=null&&e?.total!=null}var s=({percent:s,detail:c,labels:l})=>{let u=r.filter(e=>o(c[e])),d=r.filter(e=>!o(c[e]));return(0,n.jsxs)(t.Box,{bg:`white`,borderRadius:`radius-8`,p:`space-16`,minW:`220px`,maxW:`240px`,css:{"& *":{fontFamily:`inherit`}},children:[(0,n.jsxs)(t.HStack,{justify:`space-between`,alignItems:`baseline`,mb:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.md`,fontWeight:`bold`,children:l.title}),(0,n.jsxs)(e.Text,{as:`span`,fontSize:`body.lg`,fontWeight:`medium`,style:{color:i(s)},children:[Math.round(s),` %`]})]}),(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mb:`space-8`}),u.length>0&&(0,n.jsxs)(t.VStack,{alignItems:`stretch`,gap:`space-4`,mb:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`bold`,color:`grey.400`,children:l.compared}),u.map(r=>{let i=c[r].matched,o=c[r].total,s=o>0?i/o*100:0;return(0,n.jsxs)(t.HStack,{alignItems:`center`,gap:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,color:`grey.500`,minW:`80px`,children:l.attributes[r]}),(0,n.jsx)(t.Box,{flex:`1`,h:`3px`,bg:`grey.100`,borderRadius:`full`,overflow:`hidden`,children:(0,n.jsx)(t.Box,{h:`100%`,borderRadius:`full`,style:{width:`${s}%`,background:a(s)}})}),(0,n.jsxs)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`medium`,minW:`40px`,textAlign:`right`,style:{color:a(s)},children:[i,`/`,o]})]},r)})]}),u.length>0&&d.length>0&&(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mb:`space-8`}),d.length>0&&(0,n.jsxs)(t.VStack,{alignItems:`stretch`,gap:`space-4`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`bold`,color:`grey.400`,children:l.notSpecified}),(0,n.jsx)(t.HStack,{flexWrap:`wrap`,gap:`space-4`,children:d.map(t=>(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,color:`grey.400`,border:`1px solid`,borderColor:`grey.100`,px:`space-8`,py:`2px`,borderRadius:`full`,children:l.attributes[t]},t))})]}),l.footer&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mt:`space-8`,mb:`space-8`}),(0,n.jsx)(e.Text,{as:`span`,fontSize:`9px`,color:`grey.300`,style:{lineHeight:1},children:l.footer})]})]})};exports.ChatScoreBreakdown=s;
|
|
2
2
|
//# sourceMappingURL=ChatScoreBreakdown.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatScoreBreakdown.cjs","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey
|
|
1
|
+
{"version":3,"file":"ChatScoreBreakdown.cjs","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey =\n | 'origin'\n | 'rawMaterialOrigin'\n | 'temperature'\n | 'cutting'\n | 'cooking'\n | 'treatment'\n | 'label'\n | 'packaging'\n\nexport type ScoreAttributeDetail = {\n matched: number | null\n total: number | null\n}\n\nexport type ChatScoreBreakdownLabels = {\n title: string\n compared: string\n notSpecified: string\n attributes: Record<ScoreAttributeKey, string>\n footer?: string\n}\n\nexport type ChatScoreBreakdownProps = {\n percent: number\n detail: Record<ScoreAttributeKey, ScoreAttributeDetail>\n labels: ChatScoreBreakdownLabels\n}\n\nconst ATTRIBUTE_ORDER: ScoreAttributeKey[] = [\n 'origin',\n 'rawMaterialOrigin',\n 'temperature',\n 'cutting',\n 'cooking',\n 'treatment',\n 'label',\n 'packaging',\n]\n\nfunction getHeadlineColor(percent: number): string {\n if (percent >= 70) return '#3B6D11'\n if (percent >= 40) return '#854F0B'\n return '#A32D2D'\n}\n\nfunction getBarColor(ratioPercent: number): string {\n if (ratioPercent >= 70) return '#639922'\n if (ratioPercent >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nfunction isComparable(detail?: ScoreAttributeDetail): boolean {\n return detail?.matched != null && detail?.total != null\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => isComparable(detail[key]))\n const notSpecified = ATTRIBUTE_ORDER.filter(key => !isComparable(detail[key]))\n\n return (\n <Box\n bg=\"white\"\n borderRadius=\"radius-8\"\n p=\"space-16\"\n minW=\"220px\"\n maxW=\"240px\"\n css={{ '& *': { fontFamily: 'inherit' } }}\n >\n <HStack justify=\"space-between\" alignItems=\"baseline\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"body.md\" fontWeight=\"bold\">\n {labels.title}\n </Text>\n <Text as=\"span\" fontSize=\"body.lg\" fontWeight=\"medium\" style={{ color: getHeadlineColor(percent) }}>\n {Math.round(percent)} %\n </Text>\n </HStack>\n\n <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />\n\n {compared.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"bold\" color=\"grey.400\">\n {labels.compared}\n </Text>\n {compared.map(key => {\n const matched = detail[key].matched as number\n const total = detail[key].total as number\n const ratioPercent = total > 0 ? (matched / total) * 100 : 0\n return (\n <HStack key={key} alignItems=\"center\" gap=\"space-8\">\n <Text as=\"span\" fontSize=\"body.sm\" color=\"grey.500\" minW=\"80px\">\n {labels.attributes[key]}\n </Text>\n <Box flex=\"1\" h=\"3px\" bg=\"grey.100\" borderRadius=\"full\" overflow=\"hidden\">\n <Box\n h=\"100%\"\n borderRadius=\"full\"\n style={{ width: `${ratioPercent}%`, background: getBarColor(ratioPercent) }}\n />\n </Box>\n <Text\n as=\"span\"\n fontSize=\"body.sm\"\n fontWeight=\"medium\"\n minW=\"40px\"\n textAlign=\"right\"\n style={{ color: getBarColor(ratioPercent) }}\n >\n {matched}/{total}\n </Text>\n </HStack>\n )\n })}\n </VStack>\n )}\n\n {compared.length > 0 && notSpecified.length > 0 && <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />}\n\n {notSpecified.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\">\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"bold\" color=\"grey.400\">\n {labels.notSpecified}\n </Text>\n <HStack flexWrap=\"wrap\" gap=\"space-4\">\n {notSpecified.map(key => (\n <Text\n key={key}\n as=\"span\"\n fontSize=\"body.sm\"\n color=\"grey.400\"\n border=\"1px solid\"\n borderColor=\"grey.100\"\n px=\"space-8\"\n py=\"2px\"\n borderRadius=\"full\"\n >\n {labels.attributes[key]}\n </Text>\n ))}\n </HStack>\n </VStack>\n )}\n\n {labels.footer && (\n <>\n <Box h=\"1px\" bg=\"grey.100\" mt=\"space-8\" mb=\"space-8\" />\n <Text as=\"span\" fontSize=\"9px\" color=\"grey.300\" style={{ lineHeight: 1 }}>\n {labels.footer}\n </Text>\n </>\n )}\n </Box>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging';
|
|
1
|
+
export type ScoreAttributeKey = 'origin' | 'rawMaterialOrigin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging';
|
|
2
2
|
export type ScoreAttributeDetail = {
|
|
3
3
|
matched: number | null;
|
|
4
4
|
total: number | null;
|
|
@@ -5,6 +5,7 @@ import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
|
5
5
|
//#region src/components/chat/ChatScoreBreakdown.tsx
|
|
6
6
|
var s = [
|
|
7
7
|
"origin",
|
|
8
|
+
"rawMaterialOrigin",
|
|
8
9
|
"temperature",
|
|
9
10
|
"cutting",
|
|
10
11
|
"cooking",
|
|
@@ -145,9 +146,9 @@ var d = ({ percent: d, detail: f, labels: p }) => {
|
|
|
145
146
|
mb: "space-8"
|
|
146
147
|
}), /* @__PURE__ */ a(e, {
|
|
147
148
|
as: "span",
|
|
148
|
-
fontSize: "
|
|
149
|
-
lineHeight: "0.8",
|
|
149
|
+
fontSize: "9px",
|
|
150
150
|
color: "grey.300",
|
|
151
|
+
style: { lineHeight: 1 },
|
|
151
152
|
children: p.footer
|
|
152
153
|
})] })
|
|
153
154
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatScoreBreakdown.js","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey
|
|
1
|
+
{"version":3,"file":"ChatScoreBreakdown.js","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey =\n | 'origin'\n | 'rawMaterialOrigin'\n | 'temperature'\n | 'cutting'\n | 'cooking'\n | 'treatment'\n | 'label'\n | 'packaging'\n\nexport type ScoreAttributeDetail = {\n matched: number | null\n total: number | null\n}\n\nexport type ChatScoreBreakdownLabels = {\n title: string\n compared: string\n notSpecified: string\n attributes: Record<ScoreAttributeKey, string>\n footer?: string\n}\n\nexport type ChatScoreBreakdownProps = {\n percent: number\n detail: Record<ScoreAttributeKey, ScoreAttributeDetail>\n labels: ChatScoreBreakdownLabels\n}\n\nconst ATTRIBUTE_ORDER: ScoreAttributeKey[] = [\n 'origin',\n 'rawMaterialOrigin',\n 'temperature',\n 'cutting',\n 'cooking',\n 'treatment',\n 'label',\n 'packaging',\n]\n\nfunction getHeadlineColor(percent: number): string {\n if (percent >= 70) return '#3B6D11'\n if (percent >= 40) return '#854F0B'\n return '#A32D2D'\n}\n\nfunction getBarColor(ratioPercent: number): string {\n if (ratioPercent >= 70) return '#639922'\n if (ratioPercent >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nfunction isComparable(detail?: ScoreAttributeDetail): boolean {\n return detail?.matched != null && detail?.total != null\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => isComparable(detail[key]))\n const notSpecified = ATTRIBUTE_ORDER.filter(key => !isComparable(detail[key]))\n\n return (\n <Box\n bg=\"white\"\n borderRadius=\"radius-8\"\n p=\"space-16\"\n minW=\"220px\"\n maxW=\"240px\"\n css={{ '& *': { fontFamily: 'inherit' } }}\n >\n <HStack justify=\"space-between\" alignItems=\"baseline\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"body.md\" fontWeight=\"bold\">\n {labels.title}\n </Text>\n <Text as=\"span\" fontSize=\"body.lg\" fontWeight=\"medium\" style={{ color: getHeadlineColor(percent) }}>\n {Math.round(percent)} %\n </Text>\n </HStack>\n\n <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />\n\n {compared.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"bold\" color=\"grey.400\">\n {labels.compared}\n </Text>\n {compared.map(key => {\n const matched = detail[key].matched as number\n const total = detail[key].total as number\n const ratioPercent = total > 0 ? (matched / total) * 100 : 0\n return (\n <HStack key={key} alignItems=\"center\" gap=\"space-8\">\n <Text as=\"span\" fontSize=\"body.sm\" color=\"grey.500\" minW=\"80px\">\n {labels.attributes[key]}\n </Text>\n <Box flex=\"1\" h=\"3px\" bg=\"grey.100\" borderRadius=\"full\" overflow=\"hidden\">\n <Box\n h=\"100%\"\n borderRadius=\"full\"\n style={{ width: `${ratioPercent}%`, background: getBarColor(ratioPercent) }}\n />\n </Box>\n <Text\n as=\"span\"\n fontSize=\"body.sm\"\n fontWeight=\"medium\"\n minW=\"40px\"\n textAlign=\"right\"\n style={{ color: getBarColor(ratioPercent) }}\n >\n {matched}/{total}\n </Text>\n </HStack>\n )\n })}\n </VStack>\n )}\n\n {compared.length > 0 && notSpecified.length > 0 && <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />}\n\n {notSpecified.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\">\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"bold\" color=\"grey.400\">\n {labels.notSpecified}\n </Text>\n <HStack flexWrap=\"wrap\" gap=\"space-4\">\n {notSpecified.map(key => (\n <Text\n key={key}\n as=\"span\"\n fontSize=\"body.sm\"\n color=\"grey.400\"\n border=\"1px solid\"\n borderColor=\"grey.100\"\n px=\"space-8\"\n py=\"2px\"\n borderRadius=\"full\"\n >\n {labels.attributes[key]}\n </Text>\n ))}\n </HStack>\n </VStack>\n )}\n\n {labels.footer && (\n <>\n <Box h=\"1px\" bg=\"grey.100\" mt=\"space-8\" mb=\"space-8\" />\n <Text as=\"span\" fontSize=\"9px\" color=\"grey.300\" style={{ lineHeight: 1 }}>\n {labels.footer}\n </Text>\n </>\n )}\n </Box>\n )\n}\n"],"mappings":"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"}
|