Merge pull request #1064 from dnbexperience/chore/yarn-3.1-ga

Use Yarn 3.1
dnbexperience · Oct 30, 2021 · b3c4534 · b3c4534
2 parents b6fcb7b + 1682607
commit b3c4534
Show file tree

Hide file tree

Showing 15 changed files with 3,017 additions and 2,366 deletions.
diff --git a/.yarn/releases/yarn-3.1.0-rc.8.cjs b/.yarn/releases/yarn-3.1.0-rc.8.cjs
diff --git a/.yarn/releases/yarn-3.1.0.cjs b/.yarn/releases/yarn-3.1.0.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -10,4 +10,4 @@ plugins:
   - path: .yarn/plugins/plugin-ignore-install-options.cjs
     spec: packages/dnb-design-system-portal/node_modules/yarn-plugin-ignore-install-options/ignore-install-options-1.0.2.js
 
-yarnPath: .yarn/releases/yarn-3.1.0-rc.8.cjs
+yarnPath: .yarn/releases/yarn-3.1.0.cjs
diff --git a/package.json b/package.json
@@ -41,5 +41,5 @@
     "node": "14.17.0",
     "yarn": "1.22.10"
   },
-  "packageManager": "[email protected]-rc.8"
+  "packageManager": "[email protected]"
 }
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js
@@ -4,11 +4,27 @@
  */
 
 import React from 'react'
-import ComponentBox from 'Src/shared/tags/ComponentBox'
+import PropTypes from 'prop-types'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
 import { Global, css } from '@emotion/react'
 import styled from '@emotion/styled'
-import AllComponents from '@dnb/eufemia/src/components/form-row/AllComponents'
-import AllStretchComponents from '@dnb/eufemia/src/components/form-row/AllStretchComponents'
+import {
+  Space,
+  Button,
+  IconPrimary,
+  DatePicker,
+  Textarea,
+  Autocomplete,
+  Dropdown,
+  Slider,
+  Checkbox,
+  Radio,
+  ToggleButton,
+  Switch,
+  Input,
+  FormSet,
+  FormRow,
+} from '@dnb/eufemia/src/components'
 
 const TestStyles = styled.div`
   /* make sure our input gets an explicit width, because of mac/linux rendering differences */
@@ -30,6 +46,27 @@ const WidthLimit = styled.div`
   width: 40rem;
 `
 
+const Box = styled(Space)`
+  position: relative;
+
+  margin: 0;
+  padding: 1rem;
+
+  @media screen and (min-width: 40em) {
+    padding: 1rem;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: -50vw;
+    right: -50vw;
+    bottom: -1px;
+    width: 200vw;
+    border-bottom: dashed 1px rgb(0, 200, 200);
+  }
+`
+
 export const FormRowVerticalAlignedLabels = () => (
   <TestStyles>
     <ComponentBox data-visual-test="form-row-vertical-label">
@@ -402,3 +439,162 @@ export default class FormRowVisualTests extends React.PureComponent {
     )
   }
 }
+
+export const AllComponents = ({
+  horizontal,
+  vertical,
+  showText,
+  hideLabel,
+}) => {
+  const params = {
+    left: horizontal ? 'small' : null,
+    top: !horizontal || vertical ? 'small' : null,
+  }
+  let labels = {
+    datePicker: 'DatePicker:',
+    dropdown: 'Dropdown:',
+    autocomplete: 'Autocomplete:',
+    checkbox: 'Checkbox',
+    radio: 'Radio',
+    radioGroup: 'Radio Group:',
+    toggleButton: 'Toggle:',
+    toggleButtonGroup: 'Toggle Group:',
+    switch: 'Switch',
+    input: 'Input:',
+    textarea: 'Textarea:',
+    slider: 'Slider:',
+  }
+  if (hideLabel) {
+    labels = Object.entries(labels).reduce((acc, [k]) => {
+      acc[k] = ''
+      return acc
+    }, {})
+  }
+  return (
+    <>
+      {showText && (
+        <>
+          <Space {...params} inline>
+            <p className="dnb-p">
+              paragraph{' '}
+              <IconPrimary
+                icon="bell"
+                size="medium"
+                {...params}
+                style={{ margin: 0 }} // since this is not a block element
+              />
+            </p>
+          </Space>
+          text
+        </>
+      )}
+      <Button text="Button" {...params} />
+      <Button icon="add" {...params} />
+      <Input label={labels.input} {...params} />
+      <Input label={labels.input} {...params} />
+      <Dropdown
+        label={labels.dropdown}
+        data={['Item A', 'Item B', 'Item C']}
+        {...params}
+      />
+      <Autocomplete
+        label={labels.autocomplete}
+        data={['Item A', 'Item B', 'Item C']}
+        {...params}
+      />
+      <DatePicker label={labels.datePicker} {...params} />
+      <IconPrimary
+        icon="bell"
+        size="medium"
+        {...params}
+        style={{ marginTop: 0 }} // since this is not a block element
+      />
+      <Checkbox label={labels.checkbox} {...params} />
+      <Radio label={labels.radio} {...params} />
+      <Radio.Group label={labels.radioGroup} {...params}>
+        <Radio label={labels.radio} value="a" />
+        <Radio label={labels.radio} value="b" />
+      </Radio.Group>
+      <ToggleButton
+        label={labels.toggleButton}
+        text="Toggle"
+        {...params}
+      />
+      <ToggleButton.Group label={labels.toggleButtonGroup} {...params}>
+        <ToggleButton text="Toggle A" value="a" />
+        <ToggleButton text="Toggle B" value="b" />
+      </ToggleButton.Group>
+      <Switch label={labels.switch} {...params} />
+      <Textarea label={labels.textarea} rows="5" {...params} />
+      <Textarea label={labels.textarea} rows="5" {...params} />
+      <Slider label={labels.slider} value={50} {...params} />
+    </>
+  )
+}
+AllComponents.propTypes = {
+  horizontal: PropTypes.bool,
+  vertical: PropTypes.bool,
+  showText: PropTypes.bool,
+  hideLabel: PropTypes.bool,
+}
+AllComponents.defaultProps = {
+  horizontal: null,
+  vertical: null,
+  showText: null,
+  hideLabel: null,
+}
+
+export function AllStretchComponents() {
+  return (
+    <div>
+      <StretchTemplate element={Input} />
+      <StretchTemplate element={Textarea} />
+      <StretchTemplate element={Autocomplete} />
+      <StretchTemplate element={DatePicker} show_input />
+      <StretchTemplate element={Dropdown} />
+      <StretchTemplate element={Slider} />
+    </div>
+  )
+}
+
+function StretchTemplate({ element: Comp, ...props }) {
+  return (
+    <>
+      <Box>
+        <FormSet direction="vertical">
+          <FormRow>
+            <Comp
+              label='FormSet direction="vertical"'
+              stretch
+              {...props}
+            />
+          </FormRow>
+        </FormSet>
+      </Box>
+      <Box>
+        <FormSet vertical>
+          <FormRow>
+            <Comp label="FormSet vertical" stretch {...props} />
+          </FormRow>
+        </FormSet>
+      </Box>
+      <Box>
+        <FormRow direction="horizontal">
+          <Comp
+            label='FormRow direction="horizontal"'
+            stretch
+            {...props}
+          />
+        </FormRow>
+      </Box>
+      <Box>
+        <Comp
+          label='label_direction="vertical"'
+          label_direction="vertical"
+          stretch
+          {...props}
+        />
+      </Box>
+    </>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/demos.md
@@ -3,7 +3,7 @@ showTabs: true
 ---
 
 import PortalSkeleton from 'Pages/uilib/components/skeleton/PortalSkeleton'
-import AllComponents from '@dnb/eufemia/src/components/form-row/AllComponents'
+import { AllComponents } from 'dnb-design-system-portal/src/docs/uilib/components/form-row/Examples'
 import ComponentBox from 'Tags/ComponentBox'
 import Provider from '@dnb/eufemia/src/shared/Provider'
 import Context from '@dnb/eufemia/src/shared/Context'

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/development/issues.md b/packages/dnb-design-system-portal/src/docs/uilib/development/issues.md
@@ -23,14 +23,26 @@ The Portal (documentations) uses dart based `sass`, while the bundle and build p
   undefined
   ```
 
-## puppeteer
+### puppeteer
 
 - When upgrading to a newer version than v8, puppeteer behaves inconsistent. Sometimes the content is just tiny bit off. But most importantly, > v10.4 is very inconsistent and off running on the GitHub Actions maxOS.
 
-## eslint
+### eslint
 
 - Where some issues with newer versions than v7.19.0. This may be fixed in later versions.
 
+## Storybook
+
+The sandbox Storybook setup is using the default `@storybook/preset-scss` addon with the recommended dependencies. But for some reason, we cant use the latest versions of the following dependencies:
+
+- `sass-loader` v10.2.0
+- `style-loader` v2.0.0
+- `css-loader` v5.2.7
+
+We get else this error:
+
+> Type Error: this.getOptions is not a function for style-loader
+
 ## Yarn PnP
 
 Currently, Eufemia uses yarn v3 with `node_modules`.

diff --git a/packages/dnb-eufemia-sandbox/.ncurc.json b/packages/dnb-eufemia-sandbox/.ncurc.json
@@ -1,3 +1,3 @@
 {
-  "reject": ["sass-loader"]
+  "reject": ["sass-loader", "style-loader", "css-loader"]
 }
diff --git a/packages/dnb-eufemia-sandbox/package.json b/packages/dnb-eufemia-sandbox/package.json
@@ -10,19 +10,19 @@
     "start": "start-storybook -s / -p 8002 --ci --no-release-notes --no-version-updates"
   },
   "dependencies": {
+    "@dnb/eufemia": "workspace:*",
+    "@emotion/react": "11.5.0",
+    "@emotion/styled": "11.3.0",
     "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@dnb/eufemia": "workspace:*",
-    "@emotion/react": "11.4.1",
-    "@emotion/styled": "11.3.0",
-    "@storybook/addons": "6.3.8",
+    "@storybook/addons": "6.3.12",
     "@storybook/preset-ie11": "patch:@storybook/[email protected]#../../.yarn/patches/@storybook-preset-ie11-npm-0.0.1-f80c765898",
     "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "6.3.8",
-    "@storybook/theming": "6.3.8",
+    "@storybook/react": "6.3.12",
+    "@storybook/theming": "6.3.12",
     "css-loader": "5.2.7",
     "raw-loader": "4.0.2",
     "sass": "1.43.4",