refactor(ui): #178 move SegmentedField to @codeimage/ui

apps/codeimage/package.json

@@ -91,7 +91,7 @@
     "rxjs": "^7.5.5",
     "solid-codemirror": "^1.0.2",
     "solid-headless": "^0.10.12",
-    "solid-js": "^1.3.13",
+    "solid-js": "^1.3.14",
     "solid-use": "^0.3.3",
     "tinykeys": "^1.4.0",
     "workbox-precaching": "^6.5.2",

apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx

@@ -1,7 +1,6 @@
 import {PanelHeader} from './PanelHeader';
 import {PanelRow, TwoColumnPanelRow} from './PanelRow';
-import {Select, Text} from '@codeimage/ui';
-import {SegmentedField} from '../../ui/SegmentedField/SegmentedField';
+import {SegmentedField, Select, Text} from '@codeimage/ui';
 import {useI18n} from '@codeimage/locale';
 import {
   editor$,

apps/codeimage/src/components/PropertyEditor/FrameStyleForm.tsx

@@ -1,8 +1,7 @@
 import {PanelHeader} from './PanelHeader';
 import {PanelRow, TwoColumnPanelRow} from './PanelRow';
-import {SegmentedField} from '../../ui/SegmentedField/SegmentedField';
+import {ColorPicker, RangeField, SegmentedField} from '@codeimage/ui';
 import {Show} from 'solid-js';
-import {ColorPicker, RangeField} from '@codeimage/ui';
 import {
   frame$,
   setBackground,

apps/codeimage/src/components/PropertyEditor/WindowStyleForm.tsx

@@ -1,6 +1,6 @@
 import {PanelHeader} from './PanelHeader';
 import {FullWidthPanelRow, PanelRow, TwoColumnPanelRow} from './PanelRow';
-import {SegmentedField} from '../../ui/SegmentedField/SegmentedField';
+import {SegmentedField} from '@codeimage/ui';
 import {Show} from 'solid-js';
 import {TerminalControlField} from '../TerminalControlField/TerminalControlField';
 import {useI18n} from '@codeimage/locale';

apps/codeimage/src/components/Toolbar/ExportButton.tsx

@@ -8,16 +8,14 @@ import {
   HStack,
   Link,
   RangeField,
+  SegmentedField,
+  SegmentedFieldItem,
   TextField,
   VStack,
 } from '@codeimage/ui';
 import {useI18n} from '@codeimage/locale';
 import {AppLocaleEntries} from '../../i18n';
 import {Dialog, DialogProps} from '../../ui/Dialog/Dialog';
-import {
-  SegmentedField,
-  SegmentedFieldItem,
-} from '../../ui/SegmentedField/SegmentedField';
 import {
   DialogPanelContent,
   DialogPanelFooter,

packages/config/package.json

@@ -53,15 +53,15 @@
     "@codemirror/state": "^0.19.9",
     "material-icon-theme": "4.14.1",
     "@codemirror/view": "^0.19.47",
-    "solid-js": "^1.3.10"
+    "solid-js": "^1.3.14"
   },
   "peerDependencies": {
     "@codeimage/theme": "workspace:*",
     "@codemirror/highlight": "^0.19.7",
     "@codemirror/state": "^0.19.9",
     "@codemirror/view": "^0.19.47",
     "@codemirror/language": "^0.19.8",
-    "solid-js": "^1.3.7"
+    "solid-js": "^1.3.14"
   },
   "devDependencies": {
     "rimraf": "^3.0.2",

packages/locale/package.json

@@ -26,10 +26,10 @@
   },
   "dependencies": {
     "@solid-primitives/i18n": "^1.0.9",
-    "solid-js": "^1.3.13"
+    "solid-js": "^1.3.14"
   },
   "peerDependencies": {
-    "solid-js": "^1.3.13"
+    "solid-js": "^1.3.14"
   },
   "devDependencies": {
     "rimraf": "^3.0.2",

packages/ui/package.json

@@ -31,7 +31,7 @@
     "@vanilla-extract/dynamic": "^2.0.2",
     "solid-headless": "^0.10.12",
     "solid-use": "^0.3.3",
-    "solid-js": "^1.3.13",
+    "solid-js": "^1.3.14",
     "csstype": "^3.0.11",
     "clsx": "^1.1.1",
     "@floating-ui/dom": "^0.4.4",
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@types/node": "^17.0.21",
     "rimraf": "^3.0.2",
-    "solid-js": "^1.3.13",
+    "solid-js": "^1.3.14",
     "typescript": "^4.6.2",
     "vite": "^2.9.1",
     "vite-plugin-dts": "^1.0.5",

apps/codeimage/src/ui/SegmentedField/SegmentedField.css.ts → packages/ui/src/lib/primitives/SegmentedField/SegmentedField.css.ts

@@ -1,5 +1,6 @@
 import {createTheme, style} from '@vanilla-extract/css';
-import {textFieldStyles, themeVars} from '@codeimage/ui';
+import * as textFieldStyles from '../TextField/TextField.css';
+import {themeVars} from '../../theme';
 
 export const [segmentedFieldTheme, segmentedFieldVars] = createTheme({
   activeSegmentedWidth: '0px',

apps/codeimage/src/ui/SegmentedField/SegmentedField.tsx → packages/ui/src/lib/primitives/SegmentedField/SegmentedField.tsx

@@ -1,8 +1,9 @@
 import * as styles from './SegmentedField.css';
 import {createMemo, For, JSX} from 'solid-js';
 import clsx from 'clsx';
-import {useText, UseTextProps} from '@codeimage/ui';
 import {assignInlineVars} from '@vanilla-extract/dynamic';
+import {useText, UseTextProps} from '../Text';
+import {Box} from '../Box';
 
 export interface SegmentedFieldItem<T> {
   label: string;
@@ -28,11 +29,10 @@ export function SegmentedField<T>(props: SegmentedFieldProps<T>): JSX.Element {
     () => `calc(${segmentWidth()} * ${activeIndex()})`,
   );
 
-  const segmentStyle = () =>
-    clsx(useText({size: props.size ?? 'sm'}), styles.segment);
+  const segmentStyle = createMemo(() => useText({size: props.size ?? 'sm'}));
 
   return (
-    <div class={clsx(styles.wrapper)} id={props.id}>
+    <Box class={clsx(styles.wrapper)} id={props.id}>
       <div class={styles.box}>
         <div
           style={assignInlineVars({
@@ -44,16 +44,17 @@ export function SegmentedField<T>(props: SegmentedFieldProps<T>): JSX.Element {
         />
         <For each={props.items}>
           {(item, index) => (
-            <div
-              class={segmentStyle()}
+            // TODO: div broke build
+            <Box
+              class={clsx(styles.segment, segmentStyle())}
               data-active={index() === activeIndex()}
               onClick={() => props.onChange(item.value)}
             >
               {item.label}
-            </div>
+            </Box>
           )}
         </For>
       </div>
-    </div>
+    </Box>
   );
 }

packages/ui/src/lib/primitives/SegmentedField/index.ts

@@ -0,0 +1 @@
+export * from './SegmentedField';

packages/ui/src/lib/primitives/index.ts

@@ -27,3 +27,5 @@ export {Group} from './Group';
 export {RadioBlock, type RadioBlockProps} from './RadioBlock';
 
 export {Select} from './Select';
+
+export {SegmentedField, type SegmentedFieldItem} from './SegmentedField';