@scality/core-ui 0.115.0

package/stories/scrollbar.stories.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ScrollbarWrapper } from '../src/lib/components/scrollbarwrapper/ScrollbarWrapper.component';
+import { Wrapper, Title } from './common';
+export default {
+  title: 'Components/Navigation/ScrollbarWrapper',
+  component: ScrollbarWrapper,
+};
+const Demo = styled.div`
+  height: 200px;
+  overflow: auto;
+`;
+export const Default = {
+  render: ({}) => {
+    return (
+      <Wrapper>
+        <Title>Wrapper for custom scrollbar</Title>
+
+        <ScrollbarWrapper>
+          <Demo>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+            varius urna sed rutrum blandit. Nunc neque libero, gravida at
+            pharetra id, fringilla eget tortor. Proin ut nunc auctor, aliquet
+            neque ut, dignissim nisl. Mauris ut odio nibh. Cras et faucibus
+            mauris, non tincidunt est. Ut sed dolor arcu. Proin sollicitudin
+            ante ac lectus faucibus, vitae ullamcorper mi convallis. Sed at
+            porttitor nunc. Vestibulum est leo, ornare ut tellus vitae, dictum
+            posuere quam. Ut vitae lectus a metus consequat scelerisque. Mauris
+            feugiat pretium dui non blandit. Mauris ut consequat nisi, at
+            aliquam purus. Vivamus a pretium urna, ut rutrum libero. Etiam
+            gravida sed nisi lobortis tincidunt. Aenean mauris urna, varius quis
+            aliquam ac, consequat quis elit. Phasellus rhoncus ipsum vitae
+            fermentum suscipit. Sed purus diam, venenatis ut quam eget,
+            venenatis pretium mi. Vivamus aliquam orci eu ante bibendum tempus.
+            Donec ullamcorper sapien velit, et fermentum massa rhoncus sit amet.
+            Quisque est tortor, pellentesque eu hendrerit non, placerat sed
+            odio. Proin id nisi cursus odio convallis pretium. Sed non nibh
+            quam. Proin accumsan mi ac orci convallis aliquam ac eu neque.
+            Suspendisse lorem ligula, aliquet vel dictum in, imperdiet nec
+            mauris. Vivamus consequat mattis est eu scelerisque. Class aptent
+            taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+            himenaeos. Fusce et quam id quam eleifend auctor. Ut ultrices
+            placerat leo vitae tristique. Nulla sit amet eleifend eros, et
+            vestibulum mauris. Sed fringilla orci vitae arcu feugiat, eu
+            tincidunt tortor tempus. Aliquam facilisis purus in nisi gravida
+            sagittis. Donec dictum finibus purus nec luctus. Nullam ultrices
+            bibendum risus condimentum sollicitudin. Quisque ac ultricies dolor.
+            In dictum vel ipsum at porta. Aenean id mi at orci ultrices faucibus
+            eu id odio. Morbi non vehicula lorem. Ut aliquet molestie sagittis.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
+            lacinia odio a arcu ultricies, ut mollis nisl suscipit. Etiam sem
+            lectus, cursus in ultrices ut, aliquet id libero. Aliquam at lorem
+            scelerisque, tempor ligula eu, congue eros. Maecenas vel enim eget
+            odio venenatis viverra. Morbi eu magna tincidunt, ultrices urna id,
+            varius mauris. Suspendisse lorem purus, hendrerit vel leo eu, dictum
+            fermentum mauris. Donec a convallis orci. Morbi est nisi, sodales id
+            scelerisque ac, sollicitudin et ex. Sed consequat interdum semper.
+            Integer imperdiet eleifend sem eu vulputate. Nunc porttitor aliquet
+            sem, nec tempus ipsum eleifend nec. Duis accumsan pulvinar
+            ultricies. Cras vel commodo diam, id tempor urna. Aliquam in
+            ultrices justo, vitae condimentum sapien. Maecenas viverra nisl ut
+            ante fermentum vehicula. Duis ultrices, orci a fringilla posuere,
+            ante diam laoreet velit, vitae condimentum mi turpis sed ipsum.
+            Nullam rhoncus erat turpis, at interdum ligula venenatis non.
+            Maecenas auctor sapien ac sem maximus vestibulum. Proin eget congue
+            tellus. Suspendisse metus eros, egestas in nisl in, viverra feugiat
+            orci. Maecenas sodales lorem libero, a maximus ex malesuada
+            sagittis. Etiam tempor, tellus id suscipit congue, mauris nulla
+            fermentum nibh, quis fringilla mi tellus at ex. Nam mattis placerat
+            lacus, nec laoreet libero faucibus et.
+          </Demo>
+        </ScrollbarWrapper>
+      </Wrapper>
+    );
+  },
+};

package/stories/searchinput.stories.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { SearchInput } from '../src/lib/components/searchinput/SearchInput.component';
+import { Wrapper, Title } from './common';
+export default {
+  title: 'Components/Inputs/SearchInput',
+  component: SearchInput,
+};
+export const Default = {
+  render: ({}) => {
+    return (
+      <Wrapper>
+        <Title>Default</Title>
+        <div
+          style={{
+            width: '250px',
+          }}
+        >
+          <SearchInput
+            value=""
+            placeholder="Search server..."
+            onChange={action('on input change')}
+            onReset={action('on input reset')}
+            disableToggle={false}
+          />
+        </div>
+        <Title>Disabled</Title>
+        <div
+          style={{
+            width: '250px',
+          }}
+        >
+          <SearchInput
+            value=""
+            disabled={true}
+            placeholder="Search server..."
+            onChange={action('on input change')}
+            onReset={action('on input reset')}
+            disableToggle={true}
+          />
+        </div>
+        <Title>Search Input filled</Title>
+        <div
+          style={{
+            width: '250px',
+          }}
+        >
+          <SearchInput
+            value="carlito"
+            onChange={action('on input change')}
+            onReset={action('on input reset')}
+            disableToggle={false}
+            data-cy="carlito_searchinput"
+          />
+        </div>
+        <Title>Disable the default toggle</Title>
+        <div
+          style={{
+            width: '250px',
+          }}
+        >
+          <SearchInput
+            value=""
+            placeholder="Search and Filter…"
+            onChange={action('on input change')}
+            onReset={action('on input reset')}
+            disableToggle={true}
+          />
+        </div>
+        <Title>Disable the default toggle undefined onReset action</Title>
+        <div
+          style={{
+            width: '250px',
+          }}
+        >
+          <SearchInput
+            value=""
+            placeholder="Search and Filter…"
+            onChange={action('on input change')}
+            disableToggle={true}
+          />
+        </div>
+      </Wrapper>
+    );
+  },
+};

package/stories/select.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Select } from '../src/lib/components/select/Select.component';
+import { Wrapper } from './common';
+const options = Array.from(new Array(100), (_, index) => ({
+  label: `Item ${index}`,
+  value: index,
+  title: `Item ${index}`,
+  'data-cy': `Item_${index}`,
+}));
+
+const customFormatOptionLabel = ({ value, label, ...rest }) => (
+  <div className="sc-select-option-custom-label" {...rest}>
+    {label} {value % 2 === 0 ? <i className="fas fa-flag-usa"></i> : null}
+  </div>
+);
+
+export default {
+  title: 'Components/Deprecated/Selector/Select',
+  component: Select,
+  argTypes: {
+    options: {
+      description: 'Array of objects with label, title and value properties',
+      control: false,
+    },
+    isMulti: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+export const Playground = {
+  args: {
+    options,
+  },
+};
+
+export const WithCustomLabel = {
+  args: {
+    options,
+    formatOptionLabel: customFormatOptionLabel,
+  },
+};
+
+export const MultiSelect = {
+  args: {
+    options,
+    isMulti: true,
+    value: [options[0], options[1]],
+  },
+};

package/stories/selectinput.stories.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Stack } from '../src/lib';
+import { Input } from '../src/lib/components/inputv2/inputv2';
+import { Select } from '../src/lib/components/selectv2/Selectv2.component';
+import { Wrapper } from './common';
+import styled from 'styled-components';
+import { Meta } from '@storybook/react';
+
+const options = Array.from(new Array(10), (_, index) => (
+  <Select.Option
+    value={`Option${index}`}
+  >{`Label-option ${index}`}</Select.Option>
+));
+
+const sizes = ['1/3', '1/2', '2/3', '1'];
+
+const SelectWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+`;
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Inputs/SelectInput',
+  component: Select,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+  args: {
+    children: options,
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+};
+export default meta;
+
+export const Playground = {};
+
+export const Disabled = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const RoundedVariant = {
+  args: {
+    variant: 'rounded',
+  },
+};
+
+export const DifferentSizes = {
+  render: (args) => (
+    <SelectWrapper>
+      {sizes.map((size) => (
+        <Select size={size} {...args}></Select>
+      ))}
+    </SelectWrapper>
+  ),
+};
+
+export const Default = {
+  render: ({}) => (
+    <Wrapper className="storybook-select">
+      <Stack>
+        <Input id="input" placeholder="Select..."></Input>
+        <Select id="select" onChange={console.log}>
+          <Select.Option value="option1">label-option1</Select.Option>
+          <Select.Option value="option2">label-option2</Select.Option>
+        </Select>
+      </Stack>
+    </Wrapper>
+  ),
+};

package/stories/sidebar.stories.tsx

@@ -0,0 +1,95 @@
+import { action } from '@storybook/addon-actions';
+import { useArgs } from '@storybook/preview-api';
+import { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { LateralNavbarLayout, Loader } from '../src/lib';
+import { Sidebar } from '../src/lib/components/sidebar/Sidebar.component';
+
+type Story = StoryObj<typeof Sidebar>;
+
+const actions = [
+  {
+    label: 'Dashboard',
+    icon: <i className="fas fa-tachometer-alt" />,
+    onClick: action('dashboard clicked'),
+    active: true,
+  },
+  {
+    label: 'Servers',
+    icon: <i className="fas fa-server" />,
+    onClick: action('server clicked'),
+  },
+  {
+    label: 'Disks',
+    icon: <i className="fas fa-hdd" />,
+    onClick: action('disk clicked'),
+  },
+];
+
+const meta: Meta<typeof Sidebar> = {
+  title: 'Components/Navigation/Sidebar',
+  component: Sidebar,
+  args: {
+    actions,
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export default meta;
+
+export const DefaultSidebar: Story = {};
+
+export const ExpandedSidebar: Story = {
+  args: {
+    expanded: true,
+  },
+};
+
+export const SidebarWithToggle: Story = {
+  render: (args) => {
+    const [{ expanded }, updateArgs] = useArgs();
+    return (
+      <Sidebar
+        expanded={expanded}
+        onToggleClick={() => updateArgs({ expanded: !expanded })}
+        {...args}
+      />
+    );
+  },
+};
+
+export const HoverableSidebar: Story = {
+  args: {
+    hoverable: true,
+  },
+};
+
+export const SidebarInLayout: StoryObj<typeof Sidebar> = {
+  render: (args) => {
+    return (
+      <LateralNavbarLayout sidebar={{ ...args }}>
+        <Loader size="massive" />
+      </LateralNavbarLayout>
+    );
+  },
+};
+
+export const SidebarinLayoutWithToggle: Story = {
+  render: (args) => {
+    const [expandedWithToggle, setExpandedWithToggle] = useState(false);
+    return (
+      <LateralNavbarLayout
+        sidebar={{
+          expanded: expandedWithToggle,
+          onToggleClick: () => {
+            setExpandedWithToggle(!expandedWithToggle);
+          },
+          ...args,
+        }}
+      >
+        <Loader size="massive" />
+      </LateralNavbarLayout>
+    );
+  },
+};

package/stories/spacing.stories.mdx

@@ -0,0 +1,50 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Style/Spacing" />
+
+# Spacing
+
+## Relative Values
+
+| token name | value     |
+| ---------: | --------- |
+|         r1 | 0.0625rem |
+|         r2 | 0.125rem  |
+|         r4 | 0.25rem   |
+|         r8 | 0.5rem    |
+|        r10 | 0.625rem  |
+|        r12 | 0.75rem   |
+|        r14 | 0.875rem  |
+|        r16 | 1rem      |
+|        r20 | 1.25rem   |
+|        r24 | 1.5rem    |
+|        r28 | 1.75rem   |
+|        r32 | 2rem      |
+|        r40 | 2.5rem    |
+
+## Fixed Values
+
+| token name | value |
+| ---------: | ----- |
+|         f1 | 1px   |
+|         f2 | 2px   |
+|         f4 | 4px   |
+|         f8 | 8px   |
+|        f10 | 10px  |
+|        f12 | 12px  |
+|        f14 | 14px  |
+|        f16 | 16px  |
+|        f20 | 20px  |
+|        f24 | 24px  |
+|        f28 | 28px  |
+|        f32 | 32px  |
+|        f40 | 40px  |
+
+## Utils
+
+We provide 3 utils component for spacing.
+
+A `Box` generic component with all css flex box customisation possible.
+A `Stack` component placing children side by side with a uniform configurable gap in between.
+`Stack` children can optionaly be separated by dividers. A `Stack` can be verticaly or horizontaly aligned.
+A `Wrap` component filling parent width with non configurable uniform gap between children.

package/stories/spacing.stories.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+import { Icon } from '../src/lib/components/icon/Icon.component';
+import {
+  EmphaseText,
+  LargerText,
+  SecondaryText,
+  SmallerSecondaryText,
+} from '../src/lib/components/text/Text.component';
+import { TextBadge } from '../src/lib/components/textbadge/TextBadge.component';
+import { spacing, Stack, Wrap } from '../src/lib/spacing';
+
+export default {
+  title: 'Components/Styling/Spacing Utils',
+  component: Stack,
+};
+
+export const Playground = {
+  render: (args) => (
+    <Stack {...args}>
+      <Icon name="Account" size="2x" color="infoPrimary" withWrapper />
+      <LargerText>6 Accounts</LargerText>
+    </Stack>
+  ),
+};
+
+export const StackStory = {
+  render: ({}) => {
+    const theme = useTheme();
+    return (
+      <>
+        <h2>Banner example</h2>
+        <div
+          style={{
+            background: theme.backgroundLevel2,
+            padding: spacing.r8,
+            paddingLeft: spacing.r36,
+          }}
+        >
+          <Stack withSeparators={true} gap="r32">
+            <Stack gap="r20">
+              <Icon name="Account" size="2x" color="infoPrimary" withWrapper />
+              <Stack direction="vertical" gap="r4">
+                <LargerText>6 Accounts</LargerText>
+                <SmallerSecondaryText>for this instance</SmallerSecondaryText>
+              </Stack>
+            </Stack>
+            <Stack gap="r32">
+              <Stack>
+                <Icon name={'Check-circle'} color={'statusHealthy'} />
+                <SecondaryText>Replication</SecondaryText>
+              </Stack>
+              <Stack>
+                <Icon name={'Check-circle'} color={'statusHealthy'} />
+                <SecondaryText>Expiration</SecondaryText>
+              </Stack>
+              <Stack>
+                <Icon name={'Check-circle'} color={'statusHealthy'} />
+                <SecondaryText>Transition</SecondaryText>
+              </Stack>
+            </Stack>
+            <Stack direction="vertical" gap="r4">
+              <Stack gap="r4">
+                <EmphaseText>Active Alerts</EmphaseText>
+                <TextBadge text="0" variant="infoPrimary" />
+              </Stack>
+              <SmallerSecondaryText>No active alerts</SmallerSecondaryText>
+            </Stack>
+          </Stack>
+        </div>
+
+        <h2>Vertical divided example</h2>
+        <div
+          style={{
+            background: theme.backgroundLevel4,
+            padding: spacing.r8,
+            paddingLeft: spacing.r36,
+          }}
+        >
+          <Stack direction="vertical" gap="r24" withSeparators>
+            <EmphaseText>Section 1</EmphaseText>
+            <EmphaseText>Section 2</EmphaseText>
+          </Stack>
+        </div>
+      </>
+    );
+  },
+};
+
+export const WrapStory = {
+  render: ({}) => {
+    const theme = useTheme();
+    return (
+      <div
+        style={{
+          background: theme.backgroundLevel2,
+          padding: spacing.r8,
+          color: theme.textPrimary,
+        }}
+      >
+        <Wrap>
+          <Stack>
+            <Icon name="Account" />
+            <Icon name="User" />
+            <Icon name="Bucket" />
+          </Stack>
+          <Stack>
+            <Icon name="Account" />
+            <Icon name="User" />
+            <Icon name="Bucket" />
+          </Stack>
+        </Wrap>
+      </div>
+    );
+  },
+};

package/stories/sparkline.stories.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Sparkline as SparkLine } from '../src/lib/components/sparkline/SparkLine.component';
+import { data, multiLineData } from './data/sparklinechart';
+import { Wrapper, Title } from './common';
+const xAxis = {
+  field: 'date',
+  type: 'temporal',
+  axis: null,
+};
+const yAxis = {
+  field: 'y',
+  type: 'quantitative',
+  axis: {
+    title: null,
+    ticks: false,
+    labels: false,
+  },
+};
+const row = {
+  field: 'symbol',
+  type: 'nominal',
+  title: null,
+  // the header of the subplot
+  header: {
+    labelAngle: 0,
+    labelAlign: 'left',
+  },
+};
+const id = 'vis';
+const id_multi = 'multiVis';
+const lineConfig = {
+  interpolate: 'monotone',
+};
+export default {
+  title: 'Components/Data Display/Charts/SparkLine',
+  component: SparkLine,
+  args: {
+    xAxis,
+    yAxis,
+    row,
+  },
+};
+
+export const ChartDemo = {
+  args: {
+    id,
+    data,
+    title: 'OPERATIONS BY SECONDS',
+    lineConfig,
+  },
+};
+
+export const MultiChartDmeo = {
+  args: {
+    id: id_multi,
+    data: multiLineData,
+  },
+};
+
+export const Default = {
+  render: ({}) => {
+    return (
+      <Wrapper>
+        <Title>Vege-Lite sparkline chart demo</Title>
+        <SparkLine
+          id={id}
+          data={data}
+          xAxis={xAxis}
+          yAxis={yAxis}
+          title={'OPERATIONS PER SECONDS'}
+          row={row}
+          lineConfig={lineConfig}
+        />
+        <Title>Vege-Lite sparkline multi chart demo</Title>
+        <SparkLine
+          id={id_multi}
+          data={multiLineData}
+          xAxis={xAxis}
+          yAxis={yAxis}
+          row={row}
+        />
+      </Wrapper>
+    );
+  },
+};