feat(ui): add chip, traffic light and centered-column

src/ui/centered-column/centered-column.component.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+type CenteredColumnProps = { children: React.ReactNode };
+
+export const CenteredColumn = ({ children }: CenteredColumnProps) => (
+  <div className="min-h-screen flex items-center justify-center">
+    <div className="max-w-md w-full space-y-8">{children}</div>
+  </div>
+);

src/ui/centered-column/centered-column.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { CenteredColumn } from './centered-column.component';
+
+export default {
+  title: 'Atoms/Centered Column',
+  component: CenteredColumn,
+} as ComponentMeta<typeof CenteredColumn>;
+
+const Template: ComponentStory<typeof CenteredColumn> = (args) => (
+  <CenteredColumn {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: <div className="text-center p-4">This is a Centered Column</div>,
+};

src/ui/centered-column/index.ts

@@ -0,0 +1 @@
+export * from './centered-column.component';

src/ui/chip/chip.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import { ValhallaVariant } from '../../models';
+import { CHIP_VARIANTS } from './chip.constant';
+
+export type ChipProps = {
+  children: React.ReactNode;
+  variant?: ValhallaVariant;
+  className?: string;
+};
+
+export const Chip = ({
+  variant = 'default',
+  children,
+  className,
+}: ChipProps) => (
+  <div
+    className={clsx(
+      'px-2 py-1 rounded text-xs font-bold',
+      CHIP_VARIANTS[variant],
+      className
+    )}
+  >
+    {children}
+  </div>
+);

src/ui/chip/chip.constant.ts

@@ -0,0 +1,9 @@
+import { ValhallaVariant } from '../../models';
+
+export const CHIP_VARIANTS: Record<ValhallaVariant, string> = {
+  default: 'bg-neutral-400 text-white',
+  info: 'bg-blue-400 text-white',
+  success: 'bg-brand-400 text-white',
+  error: 'bg-red-600 text-white',
+  warning: 'bg-yellow-400 text-white',
+};

src/ui/chip/chip.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { Chip } from './chip.component';
+
+export default {
+  title: 'Atoms/Chip',
+  component: Chip,
+} as ComponentMeta<typeof Chip>;
+
+const Template: ComponentStory<typeof Chip> = (args) => (
+  <div className="flex">
+    <Chip {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Chip',
+};

src/ui/chip/index.ts

@@ -0,0 +1 @@
+export * from './chip.component';

src/ui/index.ts

@@ -1,6 +1,8 @@
 export * from './alert';
 export * from './button';
 export * from './card';
+export * from './centered-column';
+export * from './chip';
 export * from './coords';
 export * from './date-format';
 export * from './distance';
@@ -17,5 +19,6 @@ export * from './stack';
 export * from './status';
 export * from './temperature';
 export * from './text-field';
+export * from './traffic-light-number';
 export * from './typography';
 export * from './weather-icon';

src/ui/traffic-light-number/index.ts

@@ -0,0 +1 @@
+export * from './traffic-light-number.component';

src/ui/traffic-light-number/traffic-light-number.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type TrafficLightNumberProps = {
+  value: number;
+  total?: number;
+};
+
+export const TrafficLightNumber = ({
+  value,
+  total = 20,
+}: TrafficLightNumberProps) => {
+  const quarter = total / 4;
+  const half = total / 2;
+
+  return (
+    <span
+      data-testid="traffic-light-number"
+      className={clsx({
+        'text-yellow-400': value >= quarter && value <= half,
+        'text-red-600': value <= quarter,
+        'text-green-600': value >= half,
+      })}
+    >
+      {value}
+    </span>
+  );
+};

src/ui/traffic-light-number/traffic-light-number.spec.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { TrafficLightNumber } from './traffic-light-number.component';
+
+describe('TrafficLightNumber', () => {
+  test.each([
+    [20, 'text-green-600'],
+    [10, 'text-yellow-400'],
+    [5, 'text-red-600'],
+  ])('renders the value', (value, className) => {
+    const { container } = render(
+      <TrafficLightNumber value={value} total={20} />
+    );
+
+    const el = screen.getByTestId('traffic-light-number');
+
+    expect(el).toHaveTextContent(String(value));
+    expect(container.getElementsByClassName(className)).toBeTruthy();
+  });
+});

src/ui/traffic-light-number/traffic-light-number.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { TrafficLightNumber } from './traffic-light-number.component';
+
+export default {
+  title: 'Atoms/Traffic Light Number',
+  component: TrafficLightNumber,
+} as ComponentMeta<typeof TrafficLightNumber>;
+
+const Template: ComponentStory<typeof TrafficLightNumber> = (args) => (
+  <TrafficLightNumber {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = { value: 10 };