More

client/src/app/router.tsx

@@ -1,11 +1,12 @@
 import * as Nav from 'react-exo/navigation';
-import {history} from 'react-exo/redux';
+import {Suspense} from 'react';
+import {history} from 'app/store';
 import {Layout, Screen} from 'app/routes';
-import {LazyLoad as $} from 'core/base/LazyLoad';
+import {PageLoading} from 'core/base/PageLoading';
 
 export function Router() {
   return (
-    <Nav.Router history={history.state}>
+    <Nav.Router history={history}>
       <Nav.Routes>
         <Nav.Route path="/" element={<$><Layout.Main/></$>}>
           <Nav.Route index element={<$><Screen.Home/></$>}/>
@@ -17,3 +18,11 @@ export function Router() {
     </Nav.Router>
   );
 }
+
+const $ = (props: React.PropsWithChildren) => {
+  return (
+    <Suspense fallback={<PageLoading/>}>
+      {props.children}
+    </Suspense>
+  );
+}

client/src/app/store.tsx

@@ -1,15 +1,16 @@
 import * as Redux from 'react-exo/redux';
 import {Storage} from 'react-exo/storage';
-import {LoadPage} from 'core/base/LoadPage';
+import {PageLoading} from 'core/base/PageLoading';
 import config from 'config';
 
 import core from 'core/store';
 import tasks from 'tasks/store';
 import settings from 'settings/store';
+// Tip: import your new reducers here...
 
 export function Store(props: React.PropsWithChildren) {
   return (
-    <Redux.Provider store={store} loading={<LoadPage/>}>
+    <Redux.Provider store={store} loading={<PageLoading/>}>
       {props.children}
     </Redux.Provider>
   )
@@ -44,4 +45,5 @@ const store = Redux.configureStore({
 Redux.history.init(store);
 
 export type State = ReturnType<typeof store.getState>
+export const history = Redux.history.state;
 export default store;

client/src/core/base/LazyLoad.tsx

@@ -1,9 +1,9 @@
 import {Suspense} from 'react';
-import {LoadPage} from 'core/base/LoadPage';
+import {PageLoading} from 'core/base/PageLoading';
 
 export function LazyLoad(props: React.PropsWithChildren) {
   return (
-    <Suspense fallback={<LoadPage/>}>
+    <Suspense fallback={<PageLoading/>}>
       {props.children}
     </Suspense>
   );

client/src/core/base/LoadPage.tsx → client/src/core/base/PageLoading.tsx

@@ -2,12 +2,12 @@ import {useStyles, createStyleSheet} from 'styles';
 import {View, ActivityIndicator} from 'react-native';
 import type {ViewProps, ActivityIndicatorProps} from 'react-native';
 
-export interface LoadingProps {
+export interface PageLoadingProps {
   container?: ViewProps;
   indicator?: ActivityIndicatorProps;
 }
 
-export function LoadPage(props: LoadingProps) {
+export function PageLoading(props: PageLoadingProps) {
   const {styles, theme} = useStyles(stylesheet);
   return (
     <View style={styles.root} {...props.container}>

client/src/core/store.ts

@@ -1,27 +1,27 @@
 import {createSlice} from 'react-exo/redux';
 import type {PayloadAction} from 'react-exo/redux';
 
-export type Common = {
+export type Core = {
   loaded?: boolean,
   online?: boolean,
 }
 
 export default createSlice({
-  name: 'common',
-  initialState: <Common> {
+  name: 'core',
+  initialState: <Core> {
     online: false,
     loaded: false,
   },
   selectors: {
-    isLoaded: ($) => $.loaded,
-    isOnline: ($) => $.online,
+    isLoaded: (core) => core.loaded,
+    isOnline: (core) => core.online,
   },
   reducers: {
-    setLoaded(store, action: PayloadAction<boolean>) {
-      store.loaded = action.payload;
+    setLoaded(core, action: PayloadAction<boolean>) {
+      core.loaded = action.payload;
     },
-    setOnline(store, action: PayloadAction<boolean>) {
-      store.online = action.payload;
+    setOnline(core, action: PayloadAction<boolean>) {
+      core.online = action.payload;
     },
   },
 });

client/src/settings/routes/ScreenSettings.tsx

@@ -5,15 +5,13 @@ import {useLingui} from '@lingui/react';
 import {useStyles, createStyleSheet} from 'styles';
 import {useLocale} from 'settings/hooks/useLocale';
 import {useScheme} from 'settings/hooks/useScheme';
+import {locales} from 'config/locales';
 import {Page} from 'core/base/Page';
 
 export default function ScreenSettings() {
-  const {styles} = useStyles(stylesheet);
-  const [activeScheme] = useScheme();
+  const {styles, theme} = useStyles(stylesheet);
   const [scheme, setScheme] = useScheme(true);
   const [locale, setLocale] = useLocale(true);
-  const isDark = activeScheme === 'dark';
-  const color = isDark ? '#fff' : '#000';
 
   useLingui();
 
@@ -22,47 +20,47 @@ export default function ScreenSettings() {
       <Text style={styles.label}>
         <Trans>Theme</Trans>
       </Text>
-      {/* <Picker
+      <Picker
         style={styles.select}
         selectedValue={scheme}
         onValueChange={setScheme}>
-        <Picker.Item label={t`Default`} value="" color={color}/>
-        <Picker.Item label={t`Light`} value="light" color={color}/>
-        <Picker.Item label={t`Dark`} value="dark" color={color}/>
-      </Picker> */}
+        <Picker.Item label={t`Default`} value="" color={theme.colors.foreground}/>
+        <Picker.Item label={t`Light`} value="light" color={theme.colors.foreground}/>
+        <Picker.Item label={t`Dark`} value="dark" color={theme.colors.foreground}/>
+      </Picker>
       <Text style={styles.label}>
         <Trans>Language</Trans>
       </Text>
-      {/* <Picker
+      <Picker
         style={styles.select}
         selectedValue={locale}
         onValueChange={setLocale}>
-        <Picker.Item label={t`Default`} value="" color={color}/>
-        <Picker.Item label="English" value="en" color={color}/>
-        <Picker.Item label="Deutsch" value="de" color={color}/>
-        <Picker.Item label="Español" value="es" color={color}/>
-        <Picker.Item label="Portugués" value="pt" color={color}/>
-        <Picker.Item label="Bahasa Indonesia" value="id" color={color}/>
-        <Picker.Item label="Русский" value="ru" color={color}/>
-        <Picker.Item label="やまと" value="ja" color={color}/>
-        <Picker.Item label="عربي" value="ar" color={color}/>
-      </Picker> */}
+        <Picker.Item label={t`Default`} value="" color={theme.colors.foreground}/>
+        {Object.entries(locales).map(([value, label]) => (
+          <Picker.Item
+            key={value}
+            label={label}
+            value={value}
+            color={theme.colors.foreground}
+          />
+        ))}
+      </Picker>
     </Page>
   );
 }
 
 const stylesheet = createStyleSheet(theme => ({
   label: {
-    color: '#333',
     fontSize: 16,
-    marginBottom: 8,
     marginTop: 16,
+    marginBottom: 8,
+    color: theme.colors.foreground,
   },
   select: {
     width: 200,
     padding: 8,
-    color: '#000',
-    borderColor: '#000',
-    backgroundColor: '#fff',
+    color: theme.colors.foreground,
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.background,
   },
 }));

client/src/settings/store.ts

@@ -13,15 +13,15 @@ export default createSlice({
   name: 'settings',
   initialState: <Settings> {},
   selectors: {
-    getScheme: ($) => $.scheme,
-    getLocale: ($) => $.locale,
+    getScheme: (settings) => settings.scheme,
+    getLocale: (settings) => settings.locale,
   },
   reducers: {
-    setScheme($, action: PayloadAction<ColorSchemeName>) {
-      $.scheme = action.payload;
+    setScheme(settings, action: PayloadAction<ColorSchemeName>) {
+      settings.scheme = action.payload;
     },
-    setLocale($, action: PayloadAction<Locales>) {
-      $.locale = action.payload;
+    setLocale(settings, action: PayloadAction<Locales>) {
+      settings.locale = action.payload;
     },
   },
 });

client/src/styles.ts

@@ -10,5 +10,4 @@ export default UnistylesRegistry
   .addBreakpoints(breakpoints)
   .addConfig({
     adaptiveThemes: true,
-    experimentalCSSMediaQueries: true,
   });

client/src/tasks/store.ts

@@ -12,32 +12,32 @@ export default createSlice({
     Demo: {active: ['Test'], complete: []},
   },
   selectors: {
-    getLists: ($) => Object.keys($),
-    getActive: ($, list: string) => $[list]?.active,
-    getComplete: ($, list: string) => $[list]?.complete,
+    getLists: (tasks) => Object.keys(tasks),
+    getActive: (tasks, list: string) => tasks[list]?.active,
+    getComplete: (tasks, list: string) => tasks[list]?.complete,
   },
   reducers: {
-    add(store, action: PayloadAction<{list: string, item: string}>) {
+    add(tasks, action: PayloadAction<{list: string, item: string}>) {
       const {list, item} = action.payload;
-      const tasks = store[list] || {active: [], complete: []};
-      const index = tasks.complete.indexOf(item);
+      const items = tasks[list] || {active: [], complete: []};
+      const index = items.complete.indexOf(item);
       if (index !== -1) {
-        tasks.complete.splice(index, 1);
-        tasks.active.push(item);
-      } else if (!tasks.active.includes(item)) {
-        tasks.active.unshift(item);
+        items.complete.splice(index, 1);
+        items.active.push(item);
+      } else if (!items.active.includes(item)) {
+        items.active.unshift(item);
       }
-      store[list] = tasks;
+      tasks[list] = items;
     },
-    complete(store, action: PayloadAction<{list: string, item: string}>) {
+    complete(tasks, action: PayloadAction<{list: string, item: string}>) {
       const {list, item} = action.payload;
-      const tasks = store[list] || {active: [], complete: []};
-      const index = tasks.active.indexOf(item);
+      const items = tasks[list] || {active: [], complete: []};
+      const index = items.active.indexOf(item);
       if (index !== -1)
-        tasks.active.splice(index, 1);
-      if (!tasks.complete.includes(item))
-        tasks.complete.unshift(item);
-      store[list] = tasks;
+        items.active.splice(index, 1);
+      if (!items.complete.includes(item))
+        items.complete.unshift(item);
+      tasks[list] = items;
     },
   },
 });

library/src/assets/icon/Icon.docs.mdx

@@ -1,7 +1,7 @@
 import {Icon} from 'react-exo/icon';
 import {Button} from 'vocs/components';
 
-# Icons
+# Icon Asset
 
 > A component that can display over 200,000 icons via [Iconify](https://iconify.design)
 
@@ -25,7 +25,7 @@ import {Icon} from 'react-exo/icon';
 />
 ```
 
-<Button href="https://exo.fig.run/?path=/docs/primitives-icon">Storybook</Button>
+{/* <Button href="https://exo.fig.run/?path=/docs/primitives-assets-icon">Storybook</Button> */}
 
 ## Platform Support
 

library/src/assets/icon/Icon.story.tsx

@@ -1,4 +1,4 @@
-import {Icon as Component} from './Icon';
+import {Icon as Component} from 'react-exo/icon';
 import type {StoryObj, Meta} from '@storybook/react';
 
 type Story = StoryObj<typeof Component>;
@@ -8,11 +8,11 @@ const meta: Meta<typeof Component> = {
   component: Component,
 };
 
-export const Sandbox: Story = {
+export const Icon: Story = {
   args: {
-    name: 'ph:alien',
+    name: 'ph:cat',
     color: '#666',
-    size: 48,
+    size: 90,
   },
   parameters: {
     design: {

library/src/assets/image/Image.docs.mdx

@@ -1,7 +1,7 @@
 import {Image} from 'react-exo/image';
 import {Button} from 'vocs/components';
 
-# Images
+# Image Asset
 
 > A component that displays images with disk caching and thumbhash support.
 
@@ -29,7 +29,7 @@ import {Image} from 'react-exo/image';
 />
 ```
 
-<Button href="https://exo.fig.run/?path=/docs/primitives-image">Storybook</Button>
+{/* <Button href="https://exo.fig.run/?path=/docs/primitives-assets-image">Storybook</Button> */}
 
 ## Platform Support
 

library/src/assets/image/Image.story.tsx

@@ -1,4 +1,4 @@
-import {Image as Component} from './Image';
+import {Image as Component} from 'react-exo/image';
 import type {StoryObj, Meta} from '@storybook/react';
 
 type Story = StoryObj<typeof Component>;
@@ -8,7 +8,7 @@ const meta: Meta<typeof Component> = {
   component: Component,
 };
 
-export const Sandbox: Story = {
+export const Image: Story = {
   args: {
     url: 'https://get.ult.dev/samples/turing.jpg',
     thumbhash: 'XwgGFoKwnYZxZ3emWReEaGV30FUKnLQ',

library/src/assets/lottie/Lottie.docs.mdx

@@ -1,7 +1,7 @@
 import {Lottie} from 'react-exo/lottie';
 import {Button} from 'vocs/components';
 
-# Lottie Animations
+# Lottie Asset
 
 > A component that renders Lottie animations.
 
@@ -29,7 +29,7 @@ import {Lottie} from 'react-exo/lottie';
 />
 ```
 
-<Button href="https://exo.fig.run/?path=/docs/primitives-lottie">Storybook</Button>
+{/* <Button href="https://exo.fig.run/?path=/docs/primitives-assets-lottie">Storybook</Button> */}
 
 ## Platform Support
 

library/src/assets/lottie/Lottie.story.tsx

@@ -1,4 +1,4 @@
-import {Lottie as Component} from './Lottie';
+import {Lottie as Component} from 'react-exo/lottie';
 import type {StoryObj, Meta} from '@storybook/react';
 
 type Story = StoryObj<typeof Component>;
@@ -8,7 +8,7 @@ const meta: Meta<typeof Component> = {
   component: Component,
 };
 
-export const Sandbox: Story = {
+export const Lottie: Story = {
   args: {
     url: 'https://get.ult.dev/samples/stack.lottie',
     autoplay: true,