Merge pull request #283 from CivicDataLab/dev

Dev

examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx

@@ -114,7 +114,7 @@ export const Explorer = React.forwardRef(
           <Tray open={trayOpen} onOpenChange={setTrayOpen} size="extended">
             {isLoading ? (
               <div className="p-4">
-                <Text variant="headingMd">Loading...</Text>
+                <Text variant="headingMd">Loading Indicators...</Text>
               </div>
             ) : indicatorData ? (
               <Indicators
@@ -211,18 +211,40 @@ const Content = ({
   const currentData: any =
     chartData[states.selectedIndicator].years[states.selectedYear];
 
+  const barDataObj: any = {
+    Khagorijan: 15452.0,
+    Batadraba: 19506.0,
+    Juria: 40642.0,
+    Kaliabor: 9102.0,
+    Rupahihut: 22841.0,
+    Lowkhowa: 19017.0,
+    Kathiatoli: 38942.0,
+    Raha: 17224.0,
+    Dolongghat: 5108.0,
+    Barhampur: 9450.0,
+    Pakhimoria: 8232.0,
+    Bajiagaon: 20247.0,
+    'Pachim Kaliabor': 14392.0,
+  };
+
   React.useEffect(() => {
     if (!currentData) return;
 
-    setSelectedBlocks(currentData.bardata.xAxis);
+    setSelectedBlocks(Object.keys(barDataObj));
   }, []);
 
   React.useEffect(() => {
     if (selectedBlocks) {
-      const filteredData = currentData.bardata.xAxis.filter((e: any) =>
-        selectedBlocks.includes(e)
-      );
-      setBarData({ ...currentData.bardata, xAxis: filteredData });
+      const filteredData: any = {};
+      Object.keys(barDataObj).forEach((key) => {
+        if (selectedBlocks.includes(key)) {
+          filteredData[key] = barDataObj[key];
+        }
+      });
+      setBarData({
+        xAxis: Object.keys(filteredData),
+        values: Object.values(filteredData),
+      });
     }
   }, [selectedBlocks, currentData]);
 
@@ -243,11 +265,22 @@ const Content = ({
       : 'var(--mapareadistrict-disabled)';
   };
 
+  let barView = null;
+  if (barData) barView = <BarView data={barData} />;
+  if (selectedBlocks.length < 2)
+    barView = (
+      <div className="flex items-center justify-center mt-5">
+        <Text variant="headingLg" as="span">
+          Please select atleast 2 blocks to compare
+        </Text>
+      </div>
+    );
+
   const tabs = [
     {
       label: 'Bar View',
       value: 'bar',
-      content: barData ? <BarView data={barData} /> : null,
+      content: barView,
     },
     {
       label: 'Map View',
@@ -381,7 +414,6 @@ const Filters = ({
   setSelectedBlocks,
   tab,
   selectedBlocks,
-  isMobile,
 }: {
   states: any;
   chartData: IChartData;

examples/district/app/[locale]/[district]/[department]/[scheme]/components/SourceData.tsx

@@ -165,7 +165,7 @@ export const SourceData = ({
         <Tray open={trayOpen} onOpenChange={setTrayOpen} size="extended">
           {isLoading ? (
             <div className="p-4">
-              <Text variant="headingMd">Loading...</Text>
+              <Text variant="headingMd">Loading Indicators...</Text>
             </div>
           ) : indicatorData ? (
             <IndicatorsCheckbox

examples/district/styles/globals.css

@@ -18,20 +18,10 @@
   --card-border-rgb: 131, 134, 135;
 }
 
-/* html {
-  overflow-y: scroll;
-} */
-
 body {
   background-color: var(--background-solid-subdued);
 }
 
-/* html,
-body,
-body > .opub-Tooltip {
-  height: 100%;
-} */
-
 a {
   color: inherit;
   text-decoration: none;

packages/opub-ui/README.md

@@ -26,17 +26,7 @@ The following steps are required before you can start using components:
 import 'opub-ui/dist/assets/styles.css';
 ```
 
-2. This step is for `SSR` apps. We use [React Aria](https://react-spectrum.adobe.com/react-aria/) for some components. To ensure it works correctly in Next.js, you must wrap the App with `SSRProvider`. [More Info](https://react-spectrum.adobe.com/react-aria/ssr.html)
-
-```js
-import { SSRProvider } from 'react-aria';
-
-<SSRProvider>
-  <Component {...pageProps} />
-</SSRProvider>;
-```
-
-3. Once you complete the initial setup, you can import components into your project as needed:
+2. Once you complete the initial setup, you can import components into your project as needed:
 
 ```js
 import { Badge, Button, Menu } from 'opub-cdl/ui';

packages/opub-ui/docs/Guides/Develop.mdx

@@ -1 +1,96 @@
 # Develop
+
+Welcome to the development section of the documentation. Here you will find information on seting up OPub UI, tools that helps, and how to contribute.
+
+## First Steps
+
+OPub UI is built on top of [React](https://reactjs.org/) and [Radix UI](https://www.radix-ui.com/primitives). If you are not familiar with these, we recommend you read up on them before continuing.
+
+### Add OPub UI to your project
+
+OPub UI is available as an npm package. You can install it using your favorite package manager.
+
+```bash
+npm install @opub/ui
+```
+
+or
+
+```bash
+yarn add @opub/ui
+```
+
+### Add base styles
+
+OPub UI comes with a set of base styles that you need to import into your project. The base styles are required for OPub UI to work correctly. Add them in the base css file of your project.
+
+```css
+@import url('~opub-ui/dist/assets/styles.css');
+```
+
+### Usage
+
+Once you complete the initial setup, you can import components into your project as needed:
+
+```js
+import { Badge, Button, Menu } from 'opub-cdl/ui';
+```
+
+## Working with Next.js
+
+If you are using [Next.js](https://nextjs.org/), you will need to [transpile the packages](https://nextjs.org/docs/advanced-features/compiler#module-transpilation). Add this inside `next.config.js`:
+
+```js
+module.exports = {
+  transpilePackages: ['opub-ui', 'react-aria'],
+};
+```
+
+## Tools
+
+- [Storybook](https://main--64004009fa0a900a3197549c.chromatic.com/) - View the complete list of available components.
+- [Color Contrast Checker](https://marijohannessen.github.io/color-contrast-checker/) - Check the contrast of your colors.
+
+## Contributing
+
+We welcome contributions to OPub UI. Please read our [contributing guidelines](https://github.com/CivicDataLab/opub-mono/blob/main/CONTRIBUTING.md) to get started.
+
+### New Component
+
+This repo includes a `yarn run new-component` module to help create boilerplate for component creation.
+
+```
+yarn run new-component Button
+```
+
+This will create a new component directory in `packages/opub-ui/src` with required files and also export the component in the index.ts
+
+```
+components/
+┣ Button/
+┃ ┣ Button.module.scss/
+┃ ┣ Button.stories.tsx/
+┃ ┣ Button.test.tsx/
+┃ ┣ Button.tsx/
+┃ ┣ index.ts/
+```
+
+## Publishing to NPM
+
+OPub UI is available as an npm package. To publish a new version, follow these steps:
+
+### Bundling
+
+To bundle the package, run:
+
+```bash
+yarn build
+```
+
+This will create a `dist` folder with the bundled files. Then from the root of the project, run:
+
+```bash
+yarn changeset publish
+```
+
+Make sure to update the version number in the `package.json` file before publishing.

packages/opub-ui/docs/Guides/Workflow.mdx

@@ -0,0 +1,70 @@
+# Workflows
+
+## Overview
+
+For OPub, we have a few different workflows that we use to manage our projects. These workflows are designed to help us manage our projects in a way that is consistent and efficient.
+
+## Figma -> Code
+
+### Idea
+
+Since OPub is supposed to be used to create multiple applications, we need to make sure that the design system is consistent across all the applications, while also being flexible enough to allow for customisation. To achieve this, we use Figma to design the components and then use the design tokens to generate the code.
+
+### Design Tokens
+
+We use Figma variables to generate our CSS variables and tokens for Tailwind CSS . This allows us to have a single source of truth for our design tokens.
+
+In future, the process will be fully automated but for now, we have to follow few steps.
+
+> This process is only required when we make changes to the design tokens.
+
+> This requires the figma file to have OPub UI variables.
+
+- Install the [variables2json](https://www.figma.com/community/plugin/1253571037276959291) plugin from Figma community.
+- Open the Figma file and go to `Plugins > variables2json > Download (bottom right)`.
+- Open the downloaded `JSON` and remove the following from start:
+
+```json
+"version": "1.0.4",
+"metadata": {},
+```
+
+- Copy the remaining JSON and paste it in `/config/tokens/tokens.json`.
+
+- Run the following command to generate the CSS variables and tokens:
+
+```bash
+yarn run build:tokens
+```
+
+### Style Dictionary
+
+Following the previous steps will generate styling variables in `/styles/tokens` folder. This process is handled by [Style Dictionary](https://amzn.github.io/style-dictionary/). You can find the configuration file in `/config/tokens/geneate.mjs`.
+
+Style Dictrionary is also used to generate the Tailwind CSS config file. You can find the configuration file in `/config/tokens/helpers/tailwind-formattor.js`. The generated tokens are used in `tailwind.config.js`.
+
+## Code -> Storybook
+
+### Idea
+
+Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time in isolation. You can view the Storybook [here](https://main--64004009fa0a900a3197549c.chromatic.com/).
+
+### Github Actions
+
+We use Github Actions to automatically deploy the Storybook to Chromatic. This allows us to view the changes in the components and also allows us to test the components in different browsers. You can find the configuration file in `.github/workflows/chromatic.yml`.
+
+## Backend -> Frontend
+
+> This is a work in progress and in experimental phase.
+
+In order to sync the backend and frontend, we use [@graphql-codegen/cli](https://the-guild.dev/graphql/codegen) to generate the types. This allows us to have a single source of truth for the backend and frontend.
+
+The configuration file for GraphQL Codegen is in `/config/codegen.ts`. The generated types are in `/gql/generated`.
+
+You can check out the [example](https://github.com/CivicDataLab/opub-mono/blob/main/apps/www/app/%5Blocale%5D/dashboard/dataset/page.tsx) on how to use the generated types.
+
+To sum up,
+
+- In Server Component (`page.tsx`), we use the generated types to pre-fetch the data from the backend.
+- We use `react-query` to dehydrate the data.
+- In Client Components, we use the `useQuery` hook to fetch the data from the cache.