@scality/core-ui 0.115.0

package/.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "targets": {
+          "esmodules": true
+        }
+      }
+    ],
+    ["@babel/preset-react", {
+      "runtime": "automatic"
+    }],
+    "@babel/preset-typescript"
+  ]
+}

package/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": [
+    "react-app",
+    "plugin:storybook/recommended"
+  ],
+  "ignorePatterns": "stories"
+}

package/.flowconfig

@@ -0,0 +1,21 @@
+[include]
+src/.*
+stories/.*
+
+[lints]
+all=error
+untyped-import=off
+unclear-type=off
+sketchy-null=off
+unsafe-getters-setters=warn
+dynamic-export=off
+inexact-spread =off
+
+[options]
+include_warnings=false
+module.ignore_non_literal_requires=true
+
+[strict]
+
+[untyped]
+.*/node_modules/**/.*

package/.github/ISSUE_TEMPLATE/bug.md

@@ -0,0 +1,18 @@
+---
+name: Bug Report
+about: Report a bug encountered while operating core-ui
+labels: bug,core-ui
+
+---
+
+**Component**:
+
+<!-- E.g. 'Layout', 'Table', 'build', 'tests'... -->
+
+**What happened**:
+
+**What was expected**:
+
+**Steps to reproduce**
+
+**Resolution proposal** (optional):

package/.github/ISSUE_TEMPLATE/improvement.md

@@ -0,0 +1,18 @@
+---
+name: Improvement
+about: Suggest an improvement to the core-ui project
+labels: core-ui
+
+---
+
+**Component**:
+
+<!-- E.g. 'Layout', 'Table', 'build', 'tests'... -->
+
+**Why this is needed**:
+
+**What should be done**:
+
+**Implementation proposal** (strongly recommended):
+
+**Test plan**:

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,24 @@
+**Component**:
+
+<!-- E.g. 'Layout', 'Table', 'build', 'tests'... -->
+
+**Description**:
+
+**Design**:
+
+**Breaking Changes**:
+
+- [] Breaking Changes
+
+
+---
+
+<!-- Declare one or more issues to close once this PR gets merged -->
+
+Closes: #ISSUE_NUMBER
+
+<!-- If you want to refer to an issue while not closing it, use:
+
+See: #ISSUE_NUMBER
+
+-->

package/.github/workflows/codeql.yaml

@@ -0,0 +1,25 @@
+---
+name: codeQL
+
+on:
+  push:
+    branches: [development/*, stabilization/*, hotfix/*]
+  pull_request:
+    branches: [development/*, stabilization/*, hotfix/*]
+  workflow_dispatch:
+
+jobs:
+  analyze:
+    name: Static analysis with CodeQL
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: typescript, javascript
+
+      - name: Build and analyze
+        uses: github/codeql-action/analyze@v2

package/.github/workflows/dependency-review.yaml

@@ -0,0 +1,16 @@
+---
+name: dependency review
+
+on:
+  pull_request:
+    branches: [development/*, stabilization/*, hotfix/*]
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      - name: Dependency Review
+        uses: actions/dependency-review-action@v3

package/.github/workflows/github-pages.yml

@@ -0,0 +1,17 @@
+name: Deploy Storybook
+
+on:
+  push:
+    branches: development/1.0
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+      - run: npm ci
+      - run: npm run storybook:deploy -- --ci
+        env:
+          GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}

package/.github/workflows/post-release.yml

@@ -0,0 +1,52 @@
+on:
+  release:
+    types:
+      - published
+  workflow_dispatch:
+
+jobs:
+  bump-version:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+      - run: echo "nextVersion=$(npm version --no-git-tag minor)" >> $GITHUB_ENV
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        id: cpr
+        with:
+          token: ${{ secrets.GIT_ACCESS_TOKEN }}
+          branch: feature/bump-core-ui-version-to-${{ env.nextVersion }}
+          commit-message: Bump core-ui version to  ${{ env.nextVersion }}
+          title: Bump core-ui version to  ${{ env.nextVersion }}
+          body: ''
+          base: ${{ github.event.repository.default_branch }}
+      - uses: actions/github-script@v5
+        if: ${{ steps.cpr.outputs.pull-request-number }}
+        with:
+          github-token: ${{secrets.GIT_ACCESS_TOKEN}}
+          script: |
+            github.rest.issues.createComment({
+              issue_number: '${{ steps.cpr.outputs.pull-request-number }}',
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: '/approve'
+            })
+  publish-npm:
+    runs-on: ubuntu-latest
+    environment: npmjs
+    steps:
+      - uses: actions/checkout@v3
+      # Setup .npmrc file to publish to npmjs.org
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install
+      - run: npm run build
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/tests.yaml

@@ -0,0 +1,32 @@
+name: basic tests
+
+on:
+  push:
+    branches:
+      - "user/**"
+      - "feature/**"
+      - "improvement/**"
+      - "bugfix/**"
+      - "w/**"
+      - "q/**"
+      - "hotfix/**"
+      - "dependabot/**"
+  pull_request:
+    types:
+      - opened
+    branches:
+      - 'feature/bump-core-ui-version-to-**'
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Install node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+      - run: npm ci
+      - run: npm run test
+      - run: npm run lint

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "singleQuote": true
+}

package/.storybook/main.ts

@@ -0,0 +1,38 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx))'],
+  staticDirs: ['./public'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-storysource',
+    '@storybook/addon-mdx-gfm',
+  ],
+
+  webpackFinal: async (config, { configType }) => {
+    // Resolve error when webpack-ing storybook:
+    // Can't import the named export 'Children' from non EcmaScript module (only
+    // default export is available)
+    config.module?.rules?.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+    });
+
+    return config;
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+    defaultName: 'Stories',
+  },
+  managerHead: (head) => `
+  ${head}
+  <link rel="icon" href="/favicon.ico" />
+`,
+};
+
+export default config;

package/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import Theme from './theme.storybook';
+
+addons.setConfig({
+  theme: Theme,
+});

package/.storybook/preview-head.html

@@ -0,0 +1,99 @@
+<link
+  rel="stylesheet"
+  href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
+  integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
+  crossorigin="anonymous"
+/>
+<link
+  href="https://fonts.googleapis.com/css?family=Lato:400,700"
+  rel="stylesheet"
+  type="text/css"
+/>
+<style>
+  html,
+  body {
+    font-family: 'Lato';
+    font-size: max(14px, 0.972vw);
+  }
+  .main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .storybook-button .sc-button {
+    margin: 10px;
+  }
+
+  .storybook-dropdown .sc-dropdown {
+    margin: 10px;
+  }
+
+  .card-color-palette {
+    margin: 10px 60px 10px 60px;
+    height: 200px;
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+  }
+  .card-color-palette .color {
+    height: 120px;
+    width: 100px;
+  }
+  .card-color-palette .text {
+    font-weight: bold;
+    width: 300px;
+  }
+
+  .card {
+    margin: 40px;
+    height: 150px;
+    width: 100px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card .color {
+    height: 120px;
+    width: 100px;
+  }
+
+  .card .text {
+    font-weight: bold;
+  }
+
+  .badge {
+    color: white;
+    background-color: #e40046;
+    border: 1px solid #e40046;
+    padding: 5px;
+  }
+
+  .sc-table-noRows-override {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .tooltipText {
+    display: flex;
+  }
+  .tooltipDiv {
+    display: flex;
+    justify-content: center;
+  }
+
+  .storybook-chips .sc-chips {
+    margin: 10px;
+  }
+
+  .storybook-mutiselect-container {
+    width: 400px;
+  }
+  .sbdocs.sbdocs-wrapper{
+    padding-bottom: 0;
+  }
+</style>

package/.storybook/preview.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { CoreUiThemeProvider } from '../src/lib/next';
+import { brand, coreUIAvailableThemes} from '../src/lib/style/theme';
+import { Wrapper } from '../stories/common';
+
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'darkRebrand',
+    toolbar: {
+      title: 'Preview Theme',
+      dynamicTitle: false,
+      // array of plain string values or MenuItem shape (see below)
+      items: [{ value: 'darkRebrand', title: 'Dark', icon: 'moon' }, { value: 'artescaLight', title: 'Light', icon: 'sun' }, {value: 'ring9dark', title: 'Ring Dark', icon: 'moon'}],
+    },
+  },
+};
+
+const withThemeProvider = (Story, context) => {
+  const theme = coreUIAvailableThemes[context.globals.theme];
+  const {viewMode} = context
+  return (
+    <QueryClientProvider client={new QueryClient()}>
+      <CoreUiThemeProvider theme={theme}>
+        {/* Wrapper to make the stories take the full screen but not in docs */}
+        <div style={viewMode === 'story' ? {height: 100 + 'vh' }: null}>
+          <Wrapper>
+            <Story {...context} />
+          </Wrapper>
+        </div>
+      </CoreUiThemeProvider>
+    </QueryClientProvider>
+  );
+};
+
+export const decorators = [withThemeProvider];
+
+export const parameters = {
+  layout: 'fullscreen',
+  docs:{
+      toc : {headingSelector: 'h2,h3',
+      title: "Table of Contents"},
+  },
+  controls:{
+    //All props with color in name will automatically have a control 'color'
+    //with colors presets to theme colors, possible to have the color name from theme in control
+    presetColors: Object.entries(brand).map(color => {return {color: color[1],title:color[0] }}),
+    matchers:{
+      color: /color/i
+    }
+  },
+  options: {
+    storySort: {
+      order: [
+        'Introduction',
+        'Style',
+        'Guidelines',
+        'Templates',
+        'Components',
+        ['Navigation', 'Data Display', 'Inputs', 'Feedback', 'Progress & loading', 'Styling', 'Deprecated']
+        
+      ],
+    },
+  },
+};

package/.storybook/theme.storybook.ts

@@ -0,0 +1,13 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'dark',
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+  brandTitle: 'Core UI',
+  brandUrl: './',
+  brandImage: './logo-core-ui.png',
+  brandTarget: '_self',
+});