[CWM] Build Directory and Search Panels

ms0ur1s commented 1 week ago

Description

We need to build the directory and search panels based on the designs outlined in issue #264. These panels consist of multiple components, which can be broken down into separate issues if necessary. However, for now, all components will be tracked within this issue as individual tasks (checkboxes). Each task can be completed independently following @rogup's recommended trunk-based development workflow.

This issue also includes the integration of Storybook.js into the development process and the implementation of mock data for specific components, such as the 'Select box' in the filter panel and the 'Result item' in the results panel.

Component Tree Schematic:

    ComponentContainer Panel (shared)
        Component Heading component
        Component Close button (shared), (mobile)
        Component Close tab (shared), (desktop)
        Component Search box
        ComponentContainer Directory panel
            Component Directory item
        ComponentContainer Filter panel
            Component Select box (shared)
            Component Button (shared)
        ComponentContainer About panel
            Component Rich text / markdown display panel

    ComponentContainer Results panel
        Component Close button (shared), (mobile)
        Component Close tab (shared), (desktop)
        Component Button (shared)
        Component Result item

    ComponentContainer Menu bar
        Component Menu item

Tasks

1. Set up Storybook.js integration

Integrate Storybook.js into the project workflow to allow for isolated development and testing of components.
Ensure that each component listed below has a corresponding Storybook entry.

2. Create Shared Components

[ ] Panel ComponentContainer
[ ] Close button (shared), (mobile)
[ ] Close tab (shared), (desktop)
[x] Button (shared)
[x] Select box (shared)
[ ] Heading component

3. Create Panel Component

[ ] Integrate 'Panel', 'Heading', 'Close button' and 'Close tab' components

4. Build Directory Panel Components

[ ] Directory panel ComponentContainer
[ ] Directory item

5. Build Filter Panel Components

[ ] Filter panel ComponentContainer
[ ] Integrate 'Select box' and 'Button' components

6. Build About Panel Components

[ ] About panel
[ ] Rich text / markdown display component

7. Build Results Panel Components

[ ] Results panel ComponentContainer
[ ] Result item Component
[ ] Integrate 'Close button', 'Close tab' and 'Button components'

8. Build Menu Bar Components

[ ] Menu bar ComponentContainer
[ ] Menu item Component

9. Mock Data Integration

Implement a mock data strategy for the Select box components in the Filter panel.
Implement mock data for the Result item components in the Results panel.
Ensure that Storybook includes these mocks to allow for realistic component previews.

Added 12/09/24 10. Create app theme

[x] Create theme for consistent look across the application

Acceptance Criteria

All components listed above are implemented according to the Adobe XD prototypes.
Storybook.js is fully integrated, with all components available for viewing and interaction.
Mock data is successfully implemented for the Select box and Result item components.
Components are responsive and adhere to design specifications across mobile and desktop.

ms0ur1s commented 1 week ago

Adobe XD Prototypes

https://xd.adobe.com/view/0f8c7d84-e063-4008-a2fb-c7e3b8580d07-5adf/ https://xd.adobe.com/view/4ed77098-5133-4b80-b34c-2f2b3e5b22a7-1b84/

Trunk based development

Storybook Good Storybook intro video

https://storybook.js.org/docs/get-started/why-storybook

import type { Meta, StoryObj } from '@storybook/react';

import { Histogram } from './Histogram';

const meta: Meta<typeof Histogram> = {
  component: Histogram,
};

export default meta;
type Story = StoryObj<typeof Histogram>;

export const Default: Story = {
  args: {
    dataType: 'latency',
    showHistogramLabels: true,
    histogramAccentColor: '#1EA7FD',
    label: 'Latency distribution',
  },
};

rogup commented 1 week ago

This plan looks sick!

ms0ur1s commented 1 week ago

This plan looks sick!

Thanks @rogup, should I create these components within the mykomap-react repo?

rogup commented 1 week ago

This plan looks sick!

Thanks @rogup, should I create these components within the mykomap-react repo?

@ms0ur1s That project has been closed and migrated to a workspace within https://github.com/DigitalCommons/mykomap-monolith

So you'll need to clone mykomap-monolith, then make changes to the front-end app, either directly to main if they're small or in small PRs. Note that the monorepo uses npm workspaces, so there's a particular way of installing packages with the -w option (see the root README). If that doesn't make sense or you have questions, happy to do a quick walkthrough on a call tomorrow morning 😊

ms0ur1s commented 1 week ago

@ms0ur1s That project has been closed and migrated to a workspace within https://github.com/DigitalCommons/mykomap-monolith

So you'll need to clone mykomap-monolith, then make changes to the front-end app, either directly to main if they're small or in small PRs. Note that the monorepo uses npm workspaces, so there's a particular way of installing packages with the -w option (see the root README). If that doesn't make sense or you have questions, happy to do a quick walkthrough on a call tomorrow morning 😊

Thanks @rogup, I'll clone the mykomap-monolith and I'll give you a shout if (when) I get stuck.

DigitalCommons / mykomap