@scality/core-ui 0.115.0

package/stories/form.stories.tsx

@@ -0,0 +1,255 @@
+import React, { useState } from 'react';
+import { Banner } from '../src/lib/components/banner/Banner.component';
+import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
+import {
+  Form,
+  FormGroup,
+  FormSection,
+} from '../src/lib/components/form/Form.component';
+import { Icon } from '../src/lib/components/icon/Icon.component';
+import { Input } from '../src/lib/components/inputv2/inputv2';
+import { Select } from '../src/lib/components/selectv2/Selectv2.component';
+import { Text } from '../src/lib/components/text/Text.component';
+import { Toggle } from '../src/lib/components/toggle/Toggle.component';
+import { Stack } from '../src/lib/spacing';
+import { iconArgType } from './controls';
+
+export default {
+  title: 'Templates/Form',
+  component: Form,
+  args: {
+    kind: 'page',
+    title: 'My Form',
+    subTitle: 'Some Subtitle',
+  },
+  argTypes: {
+    layout: {
+      control: false,
+      description:
+        'Control the layout of the form, it is an object containing "kind", "title", "subTitle" and "icon", if the kind is "page" the title and subTitle are required',
+      table: {
+        type: {
+          summary:
+            'Object{kind: "page" | "tab", title: string, subTitle: string, icon: Element}',
+        },
+      },
+    },
+    kind: {
+      options: ['page', 'tab'],
+      control: { type: 'radio' },
+    },
+    icon: {
+      if: { arg: 'kind', eq: 'page' },
+      ...iconArgType,
+    },
+    title: {
+      control: 'text',
+      if: { arg: 'kind', eq: 'page' },
+    },
+    subTitle: {
+      control: 'text',
+      if: { arg: 'kind', eq: 'page' },
+    },
+  },
+};
+
+export const PageForm = {
+  render: ({ kind, title, subTitle, icon, requireMode }) => {
+    const layout = {
+      kind,
+      title,
+      subTitle,
+      icon,
+    };
+    const [toggle, setToggle] = useState(true);
+    return (
+      <Form
+        layout={layout}
+        requireMode={requireMode}
+        rightActions={
+          <Stack gap={'r16'}>
+            <Button variant="outline" label="Cancel" />
+            <Button
+              variant="primary"
+              label="Save"
+              icon={<Icon name="Save" />}
+            />
+          </Stack>
+        }
+        banner={
+          <Banner
+            variant="danger"
+            icon={<Icon name="Exclamation-circle" />}
+            title={'Error'}
+          >
+            There is an error
+          </Banner>
+        }
+      >
+        <FormSection
+          title={{
+            name: 'First part entity data',
+            helpTooltip: 'Tooltip of the first entity',
+            icon: 'Search',
+          }}
+        >
+          <FormGroup
+            direction="vertical"
+            label="Name"
+            id="name"
+            labelHelpTooltip="Name Tooltip"
+            content={<Input id="name" />}
+            help="Optional helper text"
+            required
+            disabled
+          ></FormGroup>
+          <FormGroup
+            direction="horizontal"
+            label="Email"
+            id="email"
+            labelHelpTooltip="Email Tooltip"
+            content={<Input id="email" />}
+            error="Invalid email format. Try with a better format."
+            helpErrorPosition="right"
+            required
+          ></FormGroup>
+        </FormSection>
+        <FormSection
+          title={{
+            name: 'Second part entity data',
+            helpTooltip: 'Tooltip of the Second entity',
+            icon: 'Search',
+          }}
+        >
+          <FormGroup
+            direction="horizontal"
+            label="Name"
+            id="name1"
+            labelHelpTooltip="Name Tooltip"
+            content={
+              <Toggle
+                onChange={() => {
+                  setToggle(!toggle);
+                }}
+                toggle={toggle}
+                name="toggle"
+              />
+            }
+            help="Optional helper text"
+            required={false}
+          ></FormGroup>
+          <FormGroup
+            direction="horizontal"
+            label="Email"
+            id="email1"
+            labelHelpTooltip="Email Tooltip"
+            content={<Input id="email1" />}
+            error="Invalid email format. Try with a better format."
+            helpErrorPosition="right"
+            required={false}
+          ></FormGroup>
+          <FormGroup
+            direction="horizontal"
+            label="Email long long long"
+            id="email-long1"
+            labelHelpTooltip="Email Tooltip"
+            content={<Input id="email-long1" />}
+            help="optional helper text"
+            helpErrorPosition="bottom"
+            required={false}
+          ></FormGroup>
+        </FormSection>
+        <FormSection>
+          <FormGroup
+            direction="vertical"
+            label="Object Lock Mode"
+            id="object_lock_mode"
+            labelHelpTooltip="S3 Object Lock Retention"
+            content={
+              <Stack direction="vertical">
+                <Stack direction="vertical">
+                  <Stack>
+                    <input
+                      type="radio"
+                      name="locktype"
+                      id="locktype-governance"
+                      value="governance"
+                    />
+                    <label htmlFor="locktype-governance">Governance</label>
+                  </Stack>
+                  <Text isEmphazed color="textSecondary" variant="Smaller">
+                    An user with a specific IAM permissions can overwrite/delete
+                    protected object versions during the retention period.
+                  </Text>
+                </Stack>
+                <Stack>
+                  <input
+                    type="radio"
+                    name="locktype"
+                    id="locktype-compliance"
+                    value="compliance"
+                  />
+                  <label htmlFor="locktype-compliance">Compliance</label>
+                </Stack>
+                <Text isEmphazed color="textSecondary" variant="Smaller">
+                  No one can overwrite protected object versions during the
+                  retention period.
+                </Text>
+              </Stack>
+            }
+            required={true}
+          ></FormGroup>
+          <FormGroup
+            id="value-example"
+            label="Choose a value"
+            helpErrorPosition="bottom"
+            required
+            content={
+              <Select
+                id="value-example"
+                placeholder="Select an option..."
+                onChange={() => {}}
+                value={'value-1'}
+              >
+                <Select.Option value={'value-1'}>Value 1</Select.Option>
+                <Select.Option value={'value-2'}>Value 2</Select.Option>
+                <Select.Option value={'value-3'}>Value 3</Select.Option>
+              </Select>
+            }
+          />
+        </FormSection>
+      </Form>
+    );
+  },
+  args: {
+    requireMode: 'partial',
+  },
+};
+
+export const AllRequiredPageForm = {
+  ...PageForm,
+  args: {
+    requireMode: 'all',
+  },
+};
+
+export const TabForm = {
+  ...PageForm,
+  args: {
+    layout: {
+      kind: 'tab',
+    },
+  },
+};
+
+export const PageFormWithIcon = {
+  ...PageForm,
+  args: {
+    layout: {
+      kind: 'page',
+      title: 'My form with icon',
+      subTitle: 'The sub title',
+      icon: 'Search',
+    },
+  },
+};

package/stories/format.mdx

@@ -0,0 +1,44 @@
+import { Meta } from '@storybook/blocks';
+
+
+<Meta title="Style/Format" />
+
+# Format
+
+## Number format
+
+*   Use of \[space] for [internationally recommended](https://en.wikipedia.org/wiki/Decimal_separator) thousands separators. No comma or point, as these are reserved for use as the decimal sign.
+*   Numbers whose magnitude is less than 1, the decimal sign should be preceded by a zero.
+
+## Date format
+
+### Code Description
+
+| Code | Description                                | Example |
+| ---- | ------------------------------------------ | ------- |
+| YYYY | Year on 4 digits                           | 2021    |
+| EEE  | Weekday on 3 letters, first with uppercase | "Mon"   |
+| DD   | Day of the month with leading zero         | 08      |
+| MM   | Numerical month with leading zero          | 07      |
+| MMM  | Month abbreviation on 3 letters uppercase  | "Jul"   |
+| HH   | Hour \[0-23]                                | 13      |
+| mm   | Minute with leading zero                   | 05      |
+| ss   | Second with leading zero                   | 06      |
+
+### Format list
+
+| Alias   | code                     | Example                  | Length | Context                                                |
+| ------- | ------------------------ | ------------------------ | ------ | ------------------------------------------------------ |
+| Short#1 | DD MMM                   | 20 Jul                   | 5      | Chart time axis                                        |
+| Short#2 | DDMMM HH:mm              | 20Jul 09:00              | 11     | Limited space, year not needed                         |
+| Short#3 | YYYY-MM-DD               | 2020-07-20               | 10     | Tables                                                 |
+| Mid#1   | YYYY-MM-DD HH:mm         | 2020-07-20 09:00         | 16     | Tables (creation/modification dates)                   |
+| Mid#2   | YYYY-MM-DD HH:mm:ss      | 2020-07-20 09:00:00      | 19     | When the seconds are needed                            |
+| Full#1  | EEE MMM DD YYYY HH:mm:ss | Mon Jul 20 2020 09:00:00 | 24     | When a lot of space (hover) - When precision is needed |
+
+### Remarks:
+
+*   **Lato** (the font used in the GUI) is a Monospaced font for the numbers, but not for the letters.
+    Avoid using formats with **letters** for Date in Tables.
+*   For having consistent length and alignment, and to prevent mistakes, all the formats are with **leading zeros** (2020-07-20 09:00 instead of 2020-7-20 9:00).
+*   These formats are applicable for the English language.

package/stories/formattedate.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { FormattedDateTime } from '../src/lib/components/date/FormattedDateTime';
+
+export default {
+  title: 'Components/FormattedDateTime',
+  component: FormattedDateTime,
+};
+
+export const FormattedDate = {
+  render: ({}) => {
+    const now = new Date();
+    return (
+      <>
+        <table>
+          <thead>
+            <td>Format</td>
+            <td>Visual</td>
+          </thead>
+          <tbody>
+            {[
+              'date' as const,
+              'date-time' as const,
+              'date-time-second' as const,
+              'time' as const,
+              'time-second' as const,
+              'relative' as const,
+            ].map((format) => (
+              <tr key={format}>
+                <td>{format}</td>
+                <td>
+                  <FormattedDateTime format={format} value={now} />
+                </td>
+              </tr>
+            ))}
+            <tr>
+              <td>relative past</td>
+              <td>
+                <FormattedDateTime
+                  format={'relative'}
+                  value={new Date(new Date().setMonth(now.getMonth() - 10))}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>relative future</td>
+              <td>
+                <FormattedDateTime
+                  format={'relative'}
+                  value={new Date(new Date().setMonth(now.getMonth() + 10))}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </>
+    );
+  },
+};

package/stories/globalhealthbar.stories.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import { GlobalHealthBar } from '../src/lib/components/globalhealthbar/GlobalHealthBar.component';
+import { SyncedCursorCharts } from '../src/lib/components/vegachartv2/SyncedCursorCharts';
+import { Wrapper } from './common';
+const alerts = [
+  {
+    id: '1',
+    severity: 'warning',
+    startsAt: '2021-02-01T07:00:00Z',
+    endsAt: '2021-02-01T21:00:00Z',
+    description: 'Global health warning',
+  },
+  {
+    id: '2',
+    severity: 'warning',
+    startsAt: '2021-02-01T23:00:00Z',
+    endsAt: '2021-02-02T23:00:00Z',
+    description: 'Global health warning',
+  },
+  {
+    id: '3',
+    severity: 'critical',
+    startsAt: '2021-02-03T00:00:00Z',
+    endsAt: '2021-02-04T00:00:00Z',
+    description: 'Global health critical',
+  },
+  {
+    id: '4',
+    severity: 'warning',
+    startsAt: '2021-02-04T10:00:00Z',
+    endsAt: '2021-02-06T00:00:00Z',
+    description: 'Global health warning',
+  },
+  {
+    id: '5',
+    severity: 'warning',
+    startsAt: '2021-02-06T12:00:00Z',
+    endsAt: '2021-02-06T20:00:00Z',
+    description: 'Global health warning',
+  },
+];
+const alertsLast24h = [
+  {
+    id: '1',
+    severity: 'warning',
+    startsAt: '2021-02-01T07:00:00Z',
+    endsAt: '2021-02-01T08:00:00Z',
+    description: 'Global health warning',
+  },
+  {
+    id: '5',
+    severity: 'warning',
+    startsAt: '2021-02-01T10:00:00Z',
+    endsAt: '2021-02-01T20:00:00Z',
+    description: 'Global health warning',
+  },
+  {
+    id: '6',
+    severity: 'unavailable',
+    startsAt: '2021-02-01T02:00:00Z',
+    endsAt: '2021-02-01T03:00:00Z',
+    description: 'unavailable',
+  },
+];
+const emptyAlert = [];
+const alertRetrieveBefore = [
+  {
+    id: '1',
+    severity: 'warning',
+    startsAt: '2021-01-31T23:00:00Z',
+    endsAt: '2021-02-03T21:00:00Z',
+    description: 'Global health warning',
+  },
+  {
+    id: '2',
+    severity: 'critical',
+    startsAt: '2021-02-05T23:00:00Z',
+    endsAt: '2021-02-06T21:00:00Z',
+    description: 'Global health warning',
+  },
+];
+const alertTriggerNotFirstDay = [
+  {
+    id: '1',
+    severity: 'warning',
+    startsAt: '2021-02-24T21:00:00Z',
+    endsAt: '2021-02-25T21:00:00Z',
+    description: 'Global health warning',
+  },
+  {
+    id: '2',
+    severity: 'critical',
+    startsAt: '2021-02-26T23:00:00Z',
+    endsAt: '2021-02-27T21:00:00Z',
+    description: 'Global health warning',
+  },
+];
+
+const start = '2021-01-31T23:00:00Z'; // UTC time
+const end = '2021-02-06T23:00:00Z';
+const startLast24h = '2021-02-01T00:00:00Z';
+const endLast24h = '2021-02-02T00:00:00Z';
+const startNotFirstDay = '2021-02-23T23:00:00Z';
+const endNotFirstDay = '2021-03-01T23:00:00Z';
+
+export default {
+  title: 'Components/Data Display/Charts/GlobalHealthBar',
+  component: GlobalHealthBar,
+  decorators: [
+    (story) => (
+      <Wrapper
+        style={{ minHeight: '50vh', display: 'flex', alignItems: 'center' }}
+      >
+        <div style={{ width: '500px' }}>
+          <SyncedCursorCharts>{story()}</SyncedCursorCharts>
+        </div>
+      </Wrapper>
+    ),
+  ],
+  args: {
+    start,
+    end,
+  },
+  argTypes: {
+    start: {
+      control: 'date',
+    },
+    end: {
+      control: 'date',
+    },
+  },
+};
+
+export const GlobalHealthComponentDemo = {
+  args: {
+    id: 'vis_globalhealth',
+    alerts,
+  },
+};
+
+export const GlobalHealthLast24Hours = {
+  args: {
+    id: 'vis_globalhealth_24h',
+    alerts: alertsLast24h,
+    start: startLast24h,
+    end: endLast24h,
+  },
+};
+export const GlobalHealthEmpty = {
+  args: {
+    id: 'vis_globalhealth_empty',
+    alerts: emptyAlert,
+  },
+};
+
+export const AlertTriggeredEarlierThanTheStartingTime = {
+  args: {
+    id: 'vis_globalhealth_alert_retrieve_before',
+    alerts: alertRetrieveBefore,
+  },
+};
+
+export const FirstLabel = {
+  name: 'First Label always includes the month label',
+  args: {
+    id: 'vis_globalhealth_display_month_1st_label',
+    alerts: alertTriggerNotFirstDay,
+    start: startNotFirstDay,
+    end: endNotFirstDay,
+  },
+};

package/stories/guideline/chart-guideline.mdx

@@ -0,0 +1,63 @@
+import { Meta, Story } from '@storybook/blocks';
+import { ChartExample } from './mdxExampleComponents';
+import { SuccessBanner } from '../banner.stories';
+
+<Meta title="Guidelines/Chart" />
+
+# Charts
+
+Used mostly for monitoring-related tasks.
+
+## UI
+
+### Tooltips
+
+Don’t depend too heavily on tooltips. They are as providing supplemental or expanded information, but shouldn’t be the only way a user can see the plotted value.
+
+### Grid lines
+
+Only use grid lines when it’s helpful. Possible to use only horizontal or vertical.
+
+### Elements
+
+- Title
+- Axis
+- Legend
+
+_produce an example WIP_
+
+## Type
+
+4 types for most cases: pie/donut, bar/column, line, or area.
+
+### Pie charts
+
+- No more than 6 categories
+- Values should be different enough (otherwise select Bar charts)
+- Should be a 100% total
+- Categories in the desc order
+
+_produce an example WIP_
+
+_(Currently, there is no Pie chart in the UI)_
+
+### Bar and column charts
+
+- Should start at a baseline of zero.
+  {/* <ChartExample /> */}
+
+### Line charts
+
+- No more than 5–7 different lines
+- Avoid randomly chosen color (otherwise risk of contrast issues)
+
+Here, the colors for Get and List are too close.
+
+Components/Chart/LineChart
+
+Area charts
+
+- Could be a single area, overlapping area, or stacked area
+- Max 3-4 categories
+
+{/* <SuccessBanner /> */}

package/stories/guideline/docs-template.mdx

@@ -0,0 +1,43 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Primary,
+  Controls,
+  Unstyled,
+  Source,
+} from '@storybook/blocks';
+
+{/* import * as Stories from './componentStories'; */}
+
+<Meta title="Guideline" isTemplate />
+
+# Component name
+
+General description
+
+## Style
+
+## Usage
+
+General guideline about the component
+Do & Don'ts ?
+
+## Variations
+
+### Size variations
+
+What sizes are used for this component ? When to use them
+
+### Style Variations
+
+Does this component has variations ? When to use them
+
+### Status Variations
+
+Does this component can be disable ? When ?
+
+## Playground
+
+Playground section with pure story and every control enable
+Allow to "built" the component visually and export the code directly

package/stories/guideline/mdxExampleComponents.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { BarChart } from '../../src/lib/components/barchart/BarChart.component';
+import { verticalStackedData } from '../data/barchart';
+// props for vertical stacked bar chart
+const idVerticalStacked = 'vis_vertical_stacked';
+const xAxisVerticalStacked = {
+  field: 'xlabel',
+  type: 'ordinal',
+  title: null,
+  axis: {
+    labelAngle: 0,
+  },
+  sort: {
+    order: 'ascending',
+  },
+};
+const yAxisVerticalStacked = {
+  aggregate: 'count',
+  field: '*',
+  title: null,
+  type: 'quantitative',
+  scale: {
+    padding: 1,
+  },
+};
+const colorVerticalStacked = {
+  field: 'status',
+  type: 'nominal',
+  legend: {
+    direction: 'horizontal',
+    orient: 'top',
+    title: null,
+    symbolType: 'circle',
+    columnPadding: 50,
+  },
+  scale: {
+    domain: ['2XX', '401', '404', '4XX', '503', '5XX'],
+    range: ['#4BE4E2', '#E45834', '#FEFA52', '#968BFF', '#BE2543', '#DC90F1'],
+  },
+};
+const width = 800;
+// the size control the size of each small item of the bar
+const barConfig = {
+  cornerRadius: 8,
+  size: 12,
+};
+export const ChartExample = ({}) => (
+  <BarChart
+    id={idVerticalStacked}
+    data={verticalStackedData}
+    xAxis={xAxisVerticalStacked}
+    yAxis={yAxisVerticalStacked}
+    color={colorVerticalStacked}
+    width={width}
+    barConfig={barConfig}
+  />
+);