fix: Maintain order of themes & widths as specified in config (#111)

src/Playroom/Playroom.tsx

@@ -57,12 +57,7 @@ export interface PlayroomProps {
   widths: number[];
 }
 
-export default ({
-  components,
-  themes,
-  widths: configuredWidths
-}: PlayroomProps) => {
-  const widths = configuredWidths.sort((a, b) => a - b);
+export default ({ components, themes, widths }: PlayroomProps) => {
   const [
     {
       editorPosition,

src/Playroom/ViewPreference/ViewPreference.tsx

@@ -43,7 +43,7 @@ export default <PreferenceType extends string | number>({
                 const newVisiblePreference = [...visible, preference];
                 const isOriginalList =
                   JSON.stringify(newVisiblePreference.sort()) ===
-                  JSON.stringify(available.sort());
+                  JSON.stringify([...available].sort());
 
                 onChange(isOriginalList ? undefined : newVisiblePreference);
               } else {

src/StoreContext/StoreContext.tsx

@@ -55,7 +55,14 @@ type Action =
   | { type: 'updateVisibleWidths'; payload: { widths: number[] } }
   | { type: 'resetVisibleWidths' };
 
-const reducer = (state: State, action: Action): State => {
+interface CreateReducerParams {
+  themes: PlayroomProps['themes'];
+  widths: PlayroomProps['widths'];
+}
+const createReducer = ({
+  themes: configuredThemes,
+  widths: configuredWidths
+}: CreateReducerParams) => (state: State, action: Action): State => {
   switch (action.type) {
     case 'initialLoad': {
       return {
@@ -115,11 +122,12 @@ const reducer = (state: State, action: Action): State => {
 
     case 'updateVisibleThemes': {
       const { themes } = action.payload;
-      store.setItem('visibleThemes', themes);
+      const visibleThemes = configuredThemes.filter(t => themes.includes(t));
+      store.setItem('visibleThemes', visibleThemes);
 
       return {
         ...state,
-        visibleThemes: themes
+        visibleThemes
       };
     }
 
@@ -132,13 +140,12 @@ const reducer = (state: State, action: Action): State => {
 
     case 'updateVisibleWidths': {
       const { widths } = action.payload;
-      const orderedWidths = widths.sort((a, b) => a - b);
-
-      store.setItem('visibleWidths', orderedWidths);
+      const visibleWidths = configuredWidths.filter(w => widths.includes(w));
+      store.setItem('visibleWidths', visibleWidths);
 
       return {
         ...state,
-        visibleWidths: orderedWidths
+        visibleWidths
       };
     }
 
@@ -171,12 +178,17 @@ export const StoreContext = createContext<StoreContextValues>([
 
 export const StoreProvider = ({
   children,
-  themes
+  themes,
+  widths
 }: {
   children: ReactNode;
   themes: PlayroomProps['themes'];
+  widths: PlayroomProps['widths'];
 }) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
+  const [state, dispatch] = useReducer(
+    createReducer({ themes, widths }),
+    initialState
+  );
   const [debouncedCodeUpdate] = useDebouncedCallback(
     (params: DebounceUpdateUrl) => {
       // Ensure that when removing theme/width preferences

src/index.js

@@ -16,7 +16,7 @@ const renderPlayroom = ({
   const themeNames = Object.keys(themes);
 
   render(
-    <StoreProvider themes={themeNames}>
+    <StoreProvider themes={themeNames} widths={widths}>
       <Playroom components={components} widths={widths} themes={themeNames} />
     </StoreProvider>,
     outlet