Skip to content

Commit

Permalink
refactor: completely reworte zustand stores
Browse files Browse the repository at this point in the history
  • Loading branch information
@fluid-design-io
fluid-design-io committed Jun 24, 2024
1 parent 54b8e08 commit f528c43
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 204 deletions.
203 changes: 31 additions & 172 deletions apps/web/store/store.ts
View file
Original file line number Diff line number Diff line change
@@ -1,178 +1,37 @@
// import Zustand and immer
import { create } from "zustand";
import { produce } from "immer";
import {
BaseColorTypes,
BaseColors,
ColorMode,
ColorPalettes,
ColorValue,
RawColor,
} from "@/types/app";
import { generateBaseColors } from "@/lib/generateBaseColors";

import {
persist,
createJSONStorage,
devtools,
PersistOptions,
} from "zustand/middleware";
import { generateColorPalette } from "@/lib/colorCalculator";
import { updateCSSVariables } from "@/lib/updateCssVariables";
import { generateReadability } from "@/lib/generateReadability";
import { getColorNames } from '@/app/actions'
import { generateColors } from '@/data/generate-colors'
import { ColorNames, ColorOptions, GeneratedColors } from '@/types/app'
import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'

// Zustand store type
export type ColorStore = {
colorMode: ColorMode;
baseColors: Omit<BaseColors, "gray">;
colorPalettes: ColorPalettes;
showReadability: boolean;
setColorMode: (mode: ColorMode) => void;
generatePalette: (existing?: boolean) => void;
updateBaseColor: (newBaseColor: keyof BaseColors, newColor: RawColor) => void;
};

let localAndUrlStore = (set, get) => ({
colorMode: ColorMode.HEX,
baseColors: undefined,
colorPalettes: {
primary: [],
secondary: [],
accent: [],
gray: [],
},
showReadability: false,
setColorMode: (mode) => set({ colorMode: mode }),
updateBaseColor: (type: BaseColorTypes, newColor: RawColor) => {
const [newPalette, grayPalette] = [
generateColorPalette({
color: newColor,
type: type,
colorMode: get().colorMode,
}),
generateColorPalette({
color: type === "primary" ? newColor : get().baseColors.primary,
type: "gray",
colorMode: get().colorMode,
}),
];
/* Calculate WCAG 2.0 */
const foreground = grayPalette[0];
const background = grayPalette[10];
const palettesWithReadability = generateReadability({
foreground,
background,
primaryPalette: newPalette,
secondaryPalette: get().colorPalettes.secondary,
accentPalette: get().colorPalettes.accent,
grayPalette,
});
set(
produce((state: ColorStore) => {
state.baseColors[type] = newColor;
state.colorPalettes[type] = palettesWithReadability[type];
state.colorPalettes.gray = palettesWithReadability.gray;
}),
);
const { colorPalettes, baseColors, colorMode } = get();
updateCSSVariables(
{
primary: type === "primary" ? newPalette : colorPalettes.primary,
secondary: type === "secondary" ? newPalette : colorPalettes.secondary,
accent: type === "accent" ? newPalette : colorPalettes.accent,
gray: grayPalette,
},
baseColors,
colorMode,
);
},
generatePalette: (existing = false) => {
const newBaseColors = existing ? get().baseColors : generateBaseColors();
// short-hand
const [primaryPalette, secondaryPalette, accentPalette, grayPalette] = [
"primary",
"secondary",
"accent",
"gray",
].map((color) =>
generateColorPalette({
color: color === "gray" ? newBaseColors.primary : newBaseColors[color],
type: color as BaseColorTypes,
colorMode: get().colorMode,
}),
);
/* Calculate WCAG 2.0 */
const foreground = grayPalette[0];
const background = grayPalette[10];
const palettesWithReadability = generateReadability({
foreground,
background,
primaryPalette,
secondaryPalette,
accentPalette,
grayPalette,
});
set(
produce((state: ColorStore) => {
state.baseColors = newBaseColors;
state.colorPalettes = {
primary: palettesWithReadability.primary,
secondary: palettesWithReadability.secondary,
accent: palettesWithReadability.accent,
gray: palettesWithReadability.gray,
};
}),
);
const { baseColors, colorMode } = get();
updateCSSVariables(
{
primary: primaryPalette,
secondary: secondaryPalette,
accent: accentPalette,
gray: grayPalette,
},
baseColors,
colorMode,
);
},
});

const localColorStorageOptions: PersistOptions<ColorStore> = {
name: "colorStore",
storage: createJSONStorage(() => localStorage),
};

// Zustand store definition
export const useColorStore = create<ColorStore>()(
devtools(persist(localAndUrlStore, localColorStorageOptions)),
);

/* Another store for site settings */

export enum Performance {
low = "low",
medium = "medium",
high = "high",
primary: string
secondary: string
accent: string
colors: GeneratedColors
colorNames: ColorNames
generateColorNames: (colors: ColorNames) => Promise<ColorNames>
generateColors: (colors: ColorOptions) => GeneratedColors
setColor: (type: 'primary' | 'secondary' | 'accent', color: string) => void
setColors: (colors: GeneratedColors) => void
setColorNames: (colorNames: ColorNames) => void
setBaseColors: (colors: { primary: string; secondary: string; accent: string }) => void
}

export type SiteSettingsStore = {
performance: Performance;
setPerformance: (performance: Performance) => void;
};
export type ColorsHydrateValues = Pick<ColorStore, 'primary' | 'secondary' | 'accent' | 'colors' | 'colorNames'>

const localSettingsStorageOptions: PersistOptions<SiteSettingsStore> = {
name: "siteSettings",
storage: createJSONStorage(() => localStorage),
};

export const useSiteSettingsStore = create<SiteSettingsStore>()(
devtools(
persist(
(set, get) => ({
performance: Performance.medium,
setPerformance: (performance) => set({ performance }),
}),
localSettingsStorageOptions,
),
),
);
export const createColorStore = (props: ColorsHydrateValues) =>
create<ColorStore>()(
immer((set) => ({
...props,
generateColors,
generateColorNames: async (colors) => {
return await getColorNames(colors)
},
setColor: (type, color) => set({ [type]: color }),
setColors: (colors) => set({ colors }),
setColorNames: (colorNames) => set({ colorNames }),
setBaseColors: (colors) => set({ ...colors }),
}))
)
64 changes: 32 additions & 32 deletions apps/web/store/toolStore.ts
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
import { create } from "zustand";
import { produce } from "immer";
import { FinalColor } from "extract-colors/lib/types/Color";
import {
PersistOptions,
createJSONStorage,
devtools,
persist,
} from "zustand/middleware";
import { ColorMode } from '@/types/app'
import { FinalColor } from 'extract-colors/lib/types/Color'
import { produce } from 'immer'
import { create } from 'zustand'
import { PersistOptions, createJSONStorage, devtools, persist } from 'zustand/middleware'

export enum PresistTool {
IMAGE_COLOR_EXTRACTOR = "imageColorExtractor",
IMAGE_COLOR_EXTRACTOR = 'imageColorExtractor',
}

export type ToolStore = {
openImageColorExtractor: boolean;
setOpenImageColorExtractor: (openImageColorExtractor: boolean) => void;
colorMode: ColorMode
setColorMode: (colorMode: ColorMode) => void
showReadability: boolean
setShowReadability: (showReadability: boolean) => void
openImageColorExtractor: boolean
setOpenImageColorExtractor: (openImageColorExtractor: boolean) => void
imageColorExtractor: {
baseColors: FinalColor[];
colors: FinalColor[];
};
updateImageColorExtractor: (things: {
baseColors: FinalColor[];
colors: FinalColor[];
}) => void;
};
baseColors: FinalColor[]
colors: FinalColor[]
}
updateImageColorExtractor: (things: { baseColors: FinalColor[]; colors: FinalColor[] }) => void
}

const localToolStorageOptions: PersistOptions<ToolStore> = {
name: "siteTool",
name: 'siteTool',
storage: createJSONStorage(() => localStorage),
};
}

export const useToolStore = create<ToolStore>()(
devtools(
persist(
(set, get) => ({
colorMode: ColorMode.HEX,
setColorMode: (colorMode) => set({ colorMode }),
showReadability: false,
setShowReadability: (showReadability) => set({ showReadability }),
openImageColorExtractor: false,
setOpenImageColorExtractor: (openImageColorExtractor) =>
set({ openImageColorExtractor }),
setOpenImageColorExtractor: (openImageColorExtractor) => set({ openImageColorExtractor }),
imageColorExtractor: {
image: null,
baseColors: [],
Expand All @@ -45,13 +45,13 @@ export const useToolStore = create<ToolStore>()(
updateImageColorExtractor: ({ baseColors, colors }) => {
set(
produce((state) => {
state.imageColorExtractor.baseColors = baseColors;
state.imageColorExtractor.colors = colors;
}),
);
state.imageColorExtractor.baseColors = baseColors
state.imageColorExtractor.colors = colors
})
)
},
}),
localToolStorageOptions,
),
),
);
localToolStorageOptions
)
)
)

0 comments on commit f528c43

Please sign in to comment.