mittwald / flow Goto Github PK

A collection of packages related to Flow – the mittwald design system.

Home Page: https://mittwald.github.io/flow/

License: MIT License

TypeScript 82.42% CSS 0.77% JavaScript 0.64% MDX 5.98% SCSS 10.19%

flow's Introduction

mittwald Flow - The mittwald Design System

⚠️ EARLY DEVELOPMENT — STABILITY NOTICE

This project is in early development stage, and we do not offer any stability guarantees of any kind. We welcome you to give this project a try and we're looking forward for any feedback on this project in this stage of development. However, please do not rely on any inputs or outputs of this project to remain stable.

flow's People

Contributors

Stargazers

Watchers

flow's Issues

Offene Fragen

Brauchen alle inputs ein Label? (z.B. Radiogroup in App installieren Modal)
Label als Property oder Element?

Deploy Storybooks on GitHub Pages

Stable: The latest tagged version
Latest: The head of the main branch
n Devs: The head of all dev-branches

Deploy docs in review-environment for dev-branches

TextField: Hover state only when hovering label or input

Currently the hover state also triggers when the pointer enters the FieldDescription/FieldError.

Test coverage

show test coverage as badge

From https://github.com/marketplace/actions/jest-coverage-report

Reporting code coverage on each pull request. 📃
Rejecting pull request, if coverage is under threshold. ❌
Comparing coverage with base branch. 🔍
Showing spoiler in the comment for all new covered files. 🆕
Showing spoiler in the comment for all files, in which coverage was reduced. 🔻
Failed tests & uncovered line annotations 📢

Check if Lerna is really needed

Accordion component

Tabs component

Button with Icon

Variant A ✅

We decided to use this variant because:

it is more expressive
same DX if it is documented
it is not required to import the Icon/Text component inside the Button component and therefore module dependencies are reduced

<Button>
  <Icon faIcon={faBomb} />
  <Text>Delete</Text>
</Button>

<Button>
  <Icon>{wordPressLogo}</Icon>
  <Text>Open Wordpress</Text>
</Button>

Variant B ❌

<Button faIcon={faBomb}>
  Delete
</Button>

<Button iconSvgContent={wordPressLogo}>
  Open Wordpress
</Button>

Fail in CI if peer dependencies are incorrectly met

If peer dependencies are not met correctly, the main CI job should fail.

➤ YN0000: · Yarn 4.0.1
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 0s 224ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0002: │ @mittwald/flow-documentation@workspace:packages/docs doesn't provide webpack (p3b577), requested by raw-loader.
➤ YN0002: │ @mittwald/flow-documentation@workspace:packages/docs doesn't provide webpack (p5e4d1), requested by @mdx-js/loader.
➤ YN0086: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 577ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 1s 59ms

Notification component

#148

Support sections in navigation component

Test TS compilation

yarn lint pre-commit hook?

Global und Reset css tauchen mehrfach auf

Initial page layout for the docs

Remove Next.JS demo content
Add very basic CI conform styling
Add navigation for components
Keep A11y in mind

Live code editor

Add live code editor for MDX docs pages, that can be used to render code examples with live editing support.

CodeEditor component

Wizard component

Linter for (S)CSS

Render only necessarry parts in code editor for examples

Render only necessarry parts in code editor for examples and maybe even add a switch to "expand code".

The example tsx file could then look like this:

import { Button } from "@mittwald/flow-components/Button";

export default function ButtonSimple() {
  return (
    <>
      <Button>Button</Button>
      <Button variant="primary">Primary</Button>
    </>
  );
}

And the code in the live editor would look like this:

<Button>Button</Button>
<Button variant="primary">Primary</Button>

Tabler Icons werden in Safari beim Zoomen zu fett dargestellt

Execute linter in CI

ImageCropper component

ProgressBar component

See Spectrum

Add linter to each project to support NX caching

Add Contribution section to Component README

... and start with "how to translate" in components

LoadingSpinner component

See Spectrum

IllustratedMessage component

#195

Form component

`<Button isPending />` should show a loading spinner

Should use the the ProgressCircle with isIndeterminate enabled.

Compiling Components should not require "unplugging" dependencies

When compiling the components package, some dependencies need to be "unplugged" in the root package.json to make things work. Otherwise compilation fails with errors like this.

    ✖  @mittwald/flow-components:build
       vite v5.0.6 building for production...
       transforming...
       ✓ 331 modules transformed.
       rendering chunks...

       [vite:dts] Start generate declaration files...
       computing gzip size...
       dist/style.css                          18.96 kB │ gzip:  3.13 kB
       dist/propsContext-1HT-3SRC.js            0.08 kB │ gzip:  0.09 kB
       dist/useProps-48kI4eAI.js                0.49 kB │ gzip:  0.30 kB
       dist/Label.js                            0.50 kB │ gzip:  0.31 kB
       dist/RadioGroup.js                       0.51 kB │ gzip:  0.32 kB
       dist/clsx-7d8NmkQq.js                    0.52 kB │ gzip:  0.27 kB
       dist/PropsContextProvider-FoKyLfRg.js    0.54 kB │ gzip:  0.35 kB
       dist/Text.js                             0.66 kB │ gzip:  0.38 kB
       dist/Content.js                          0.70 kB │ gzip:  0.39 kB
       dist/import-_klyNjVT.js                  0.89 kB │ gzip:  0.50 kB
       dist/Button.js                           1.09 kB │ gzip:  0.53 kB
       dist/NavigationItem.js                   1.18 kB │ gzip:  0.57 kB
       dist/Radio.js                            2.37 kB │ gzip:  0.97 kB
       dist/Navigation.js                      12.78 kB │ gzip:  3.39 kB
       dist/import-e2ZRPojs.js                 14.85 kB │ gzip:  4.99 kB
       dist/omit-UMxI0b1O.js                   30.77 kB │ gzip:  8.63 kB
       dist/real-module-Df62czfX.js            31.54 kB │ gzip:  8.54 kB
       dist/import-1GCZgtom.js                 32.27 kB │ gzip:  9.92 kB
       dist/Icon.js                           155.87 kB │ gzip: 39.60 kB
       [vite:dts] Start rollup declaration files...
       Analysis will use the bundled TypeScript version 5.0.4
       Analysis will use the bundled TypeScript version 5.0.4
       Analysis will use the bundled TypeScript version 5.0.4
       Analysis will use the bundled TypeScript version 5.0.4
       Analysis will use the bundled TypeScript version 5.0.4
       Analysis will use the bundled TypeScript version 5.0.4
       [vite:dts] ENOTDIR: not a directory, lstat '/node_modules/@react-stately/tree/dist/types.d.ts/package.json'
       ✓ built in 19.00s
       error during build:
       Error: ENOTDIR: not a directory, lstat '/node_modules/@react-stately/tree/dist/types.d.ts/package.json'
           at makeError$1 (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:30943:24)
           at ENOTDIR (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:30961:10)
           at ZipFS.resolveFilename (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:35567:15)
           at ZipFS.realpathSync (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:35358:28)
           at /Users/marcofalkenberg/dev/flow-next/.pnp.cjs:32899:102
           at /Users/marcofalkenberg/dev/flow-next/.pnp.cjs:33399:66
           at ZipOpenFS.getMountSync (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:33506:14)
           at ZipOpenFS.makeCallSync (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:33399:17)
           at ZipOpenFS.realpathSync (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:32891:17)
           at VirtualFS.realpathSync (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:33580:34)

State-Icon in Button nicht accessible

Expand/Simplify code flickering

Reference: #46 (comment)

HeaderNavigation component

#289

Warnings when running Storybook

The following warnings are shown:

WARN You (or an addon) are using the 'config' preset field. This has been replaced by 'previewAnnotations' and will be removed in 8.0
WARN Expected '@storybook/addon-actions' (or '@storybook/addon-essentials') to be listed before '@storybook/addon-interactions' in main Storybook config.
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
Pre-transform error: Failed to load url /sb-preview/runtime.js (resolved id: /sb-preview/runtime.js). Does the file exist?

Skeleton component

#120

Configure IDE to have less warnings in Docs

Dropzone (Upload) component

QRCode component

Fix tests for viteI18n-plugin

DatePicker component

#145

Receive props via context

When it comes to component composition, some components need to define certain properties for their child components in order to get the desired overall result.

See this example:

<Form>
  {/* Fields */}
  <Button type="submit">Save</Button>
</Form>

The submit button should automatically receive the isPending=true prop, during form submission.

It should also be possible to set properties conditionally, such as setting isPending only if the type prop is submit.