Fix Storybook Colors Override

casesandberg · Sep 20, 2024 · d7654d0 · d7654d0
1 parent dcd2e68
commit d7654d0
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 23 deletions.
diff --git a/packages/markets/components/CreateMarketForm.stories.ts b/packages/markets/components/CreateMarketForm.stories.ts
@@ -9,4 +9,19 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Default: Story = {
+  args: {
+    colors: [
+      '#f44336',
+      '#f44336',
+      '#f44336',
+      '#f44336',
+      '#f44336',
+      '#f44336',
+      '#f44336',
+      '#f44336',
+      '#f44336',
+      '#f44336',
+    ],
+  },
+}
diff --git a/packages/markets/components/CreateMarketForm.tsx b/packages/markets/components/CreateMarketForm.tsx
@@ -31,7 +31,7 @@ import { clearPresistedData, getPersistedData, usePersistForm } from '../../ui/s
 
 const CREATE_MARKET_FORM_KEY = 'create-market-form'
 
-let COLORS = [
+const COLORS = [
   '#f44336',
   '#9c27b0',
   '#3f51b5',
@@ -44,23 +44,6 @@ let COLORS = [
   '#607d8b',
 ]
 
-// This is a hack for Chromatic tests giving false positives.
-// TODO: Look into a seed based apprach or something that can be mocked.
-if (process.env.NODE_ENV === 'test') {
-  COLORS = [
-    '#f44336',
-    '#f44336',
-    '#f44336',
-    '#f44336',
-    '#f44336',
-    '#f44336',
-    '#f44336',
-    '#f44336',
-    '#f44336',
-    '#f44336',
-  ]
-}
-
 const marketCreateFormSchema = MarketSchema.pick({
   question: true,
   description: true,
@@ -74,8 +57,14 @@ const marketCreateFormSchema = MarketSchema.pick({
 )
 type MarketCreateFormValues = z.infer<typeof marketCreateFormSchema>
 
-export function CreateMarketForm({ onSuccess }: { onSuccess?: () => Promise<void> }) {
-  const [SHUFFLED_COLORS] = useState(_.shuffle(COLORS))
+export function CreateMarketForm({
+  colors = COLORS,
+  onSuccess,
+}: {
+  colors?: Array<string>
+  onSuccess?: () => Promise<void>
+}) {
+  const [SHUFFLED_COLORS] = useState(_.shuffle(colors))
   const router = useRouter()
   const tzName = /\((?<tz>[A-Za-z\s].*)\)/.exec(new Date().toString())?.groups?.tz ?? null
 

diff --git a/packages/markets/components/MarketPageSidebar.tsx b/packages/markets/components/MarketPageSidebar.tsx
@@ -15,7 +15,6 @@ export function MarketPageSidebar({
   activeOptionId: string
   onTradeComplete: () => void
 }) {
-  console.log(isMarketTradable(market))
   return (
     <div className="space-y-8">
       <MarketTradePanel

diff --git a/packages/markets/components/MarketTradePanel.tsx b/packages/markets/components/MarketTradePanel.tsx
@@ -29,7 +29,7 @@ export function MarketTradePanel({
   onTradeComplete,
 }: {
   market: ExtendedMarket
-  isTradable: boolean
+  isTradable?: boolean
   isResolved: boolean
   activeOptionId: string
   onTradeComplete?: () => void