Giter VIP home page Giter VIP logo

wttj / welcome-ui Goto Github PK

View Code? Open in Web Editor NEW
603.0 18.0 53.0 35.42 MB

Customizable design system from Welcome to the jungle (@wttj) with react, typescript, styled-components, ariakit and a lot of love 💛 Here you'll find all the core components you need to create a delightful webapp.

Home Page: https://www.welcome-ui.com

License: MIT License

JavaScript 3.84% Shell 0.16% TypeScript 95.99%
system ui ux react styled-components jungle design design-system welcome styled-system

welcome-ui's Introduction

Welcome UI

Welcome to the Welcome UI library created by Welcome to the jungle, a customizable design system with react ‱ typescript ‱ styled-components ‱ styled-system and ariakit.

Here you'll find all the core components you need to create a delightful webapp.

🌮 Discover all the components


License Code formating Code style PRs Welcome Conventional Commits


Installation

1 - Install the peer dependencies listed below:

yarn add @xstyled/styled-components react styled-components

2 - Install the the core component and any other components you need for your webapp e.g. if you need just a button


yarn add @welcome-ui/core @welcome-ui/button

Import library & Theme

Getting started

import React from 'react'
import { createTheme, WuiProvider } from '@welcome-ui/core'
import { Button } from '@welcome-ui/button'

// Add theme options (if you want)
const options = {
  defaultFontFamily: 'Helvetica',
  headingFontFamily: 'Georgia',
  colors: {
    primary: {
      500: '#124C80',
    },
    success: {
      500: '#32CD32',
    },
  },
}

// Create your theme
const theme = createTheme(options)
export default function Root() {
  return (
    // Wrap your components with <WuiProvider /> with your theme
    <WuiProvider
      theme={theme}
      // Will inject a CSS reset with normalizer
      hasGlobalStyle
      // Will show the focus ring on keyboard navigation only
      shouldHideFocusRingOnClick
    >
      <Button>Welcome!</Button>
    </WuiProvider>
  )
}

Develop on local

  1. First install and build the packages (only the first time)
yarn first:install
  1. Start documentation website
yarn start
  1. Start a watch on all packages to rebuild them easily
yarn watch
  1. and go to https://localhost:3020

How to release

The release of the packages is automated by the CI, you just need to bump package version and push git tags to initiate the process.

Initiating the release process from your environment

The commands listed below will only prompt for packages to bump. Then they will modify packages versions, commit changes and create the git tag to finally push everything to github. No further actions are required once you have validated the packages to bump.

If you just need to bump one version without switching from a prerelease to stable release, run:

yarn release

To create a new prerelease, run:

This is only used for the first prerelease. If you already published a v5.0.0-alpha.0 then you just need to run the first command.

yarn prerelease

NB: you can replace alpha with any other keyword (beta, rc, ...)

Force publish a package

In addition to the options shown above, you can use the --force-publish option to force bumping some packages.

Troubleshooting

How to release when the publish process failed having published some packages

Re-run the failed job with ssh, then ssh into the machine and run this command:

cd welcome-ui/packages && find . -maxdepth 1 -type d \( ! -name . \) -exec bash -c "cd '{}' && npm publish" \;

This will publish each packages, those who are already published will fail and be ignored by the script.

How to rollback a release that has been stopped before publish to npm

Revert the last commit (which should be the commit that bumps package versions):

git revert HEAD^

Remove the tag on github and locally.

Then apply your fixes and re-run your release command.

About the CI

The CI will trigger on tags to build the packages and then push them to the npm registry

welcome-ui's People

Contributors

agriffis avatar anucreative avatar atoom75 avatar aurelienalletru avatar calvein avatar cnairiwttj avatar dependabot[bot] avatar diegohaz avatar duarteparadela avatar enochndika avatar gregberge avatar guillaumewttj avatar iaurg avatar isaacmaamouche avatar jeromeraffin avatar leiksa avatar maxd-wttj avatar mleralec avatar p1x3l avatar renalddubus avatar robeltekle avatar simon-hv avatar stephanerob avatar stevenpersia avatar suruja avatar theo-mesnil avatar vico4 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

welcome-ui's Issues

Style tab component

The tab component is not properly styled:

Desired result:
normal

Current rendering:
current

Tabs problems

Actually tabs are not controllable, it means we can't define a route that change a tabs.

A workaround for this is to use Reakit tabs, we could change the tab using the imperative API provided by the hook.

add remote-worker icon

Serait-il possible d'ajouter l'icÎne "remote-worker", présent sur la UserCard ?
Capture d’écran 2019-06-03 à 15 30 59

Merci d'avance !

Ref is not forwarded on components

We are using reakit for several things like Dialogs. All components should support ref to be usable with other library. We will have the problem with other library like react-pose or react-spring.

For now I am stuck:

// @TODO: Button does not support ref...
const InnerNavButton = styled.button`
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0 lg;

  > svg {
    margin-left: 0 !important;
    width: 16px;
    height: 16px;
  }

  ${up(
    'md',
    css`
      display: none;
    `,
  )}
`

Can't reset Select

When I click reset on a form (null value is sent to the Field). The Select does not reset its value.

Screenshot 2019-07-03 at 16 39 52

Use rem for Icon sizes

Actually icon sizes are in pixel, they should be in rem to be resized when the base font-size is reduced.

TabItem a11y ?

tabindex est présent sur le composant TabItem probablement pour gérer l'accessibilité et permettre la navigation avec la touche TAB. Le cas échéant, il faudrait que le onChange soit exécuté avec la touche SPACE. Il faudrait également que la propriété CSS outline soit à none.

Tooltip doesn't work properly

I put a Tooltip on remote indicator and it doesn't display:

import React from 'react'
import { Box } from '@xstyled/styled-components'
import { Tag, Icon, Tooltip } from 'welcome-ui'
import { T } from './I18n'

const variantSizes = {
  card: 'sm',
  profile: 'sm',
}

export function RemoteIndicator({ variant }) {
  return (
    <Tag>
      <Box row display="flex" alignItems="center">
        <Icon name="remote" size={variantSizes[variant]} />
        {variant === 'profile' && (
          <Box fontWeight="normal" pl="xxs">
            <T id="remoteWorker" />
          </Box>
        )}
      </Box>
      {variant === 'card' && (
        <Tooltip>
          <T id="remoteWorker" />
        </Tooltip>
      )}
    </Tag>
  )
}

Screenshot 2019-07-03 at 16 41 25

react-select doesn't work with hooks

Sur le Select, actuellement ça met des warnings dans la console, ça utilise des "componentWillReceiveProps", ce qui veut dire que ça va bloquer l'upgrade vers React 17 qui devrait sortir d'ici quelques mois. Je pense qu'il faut se pencher sur le problÚme dÚs maintenant.

`react-final-form` is required even when fields are not used

Le problĂšme est quand j’utilise welcome-ui dans une autre projet (qui utilise nextjs donc SSR) il me faut installer react-final-form malgrĂ© je n’utilise pas des fields. J’ai essayĂ© d’implĂ©menter code-splitting avec Rollup mais je suis pas arrivĂ© d’importer les composants proprement


e.g.

// welcome-iu/rollup.config.js


input: {
  

  Base: 'src/utils/base',
  Core: 'src/theme/core',
  WelcomeKit: 'src/theme/welcomekit'
},
output: { dir: 'dist/cjs', format: 'cjs' }


// welcome-ui/package.json


  "main": "dist/cjs/index.js",
  "module": "dist/es/index.js",
  "files": [
    "dist/cjs/*",
    "dist/es/*"
  ],


// consumer/index.js
import { createTheme } from 'welcome-ui/Core'
import { GlobalStyle } from 'welcome-ui/Base'
import { welcomekitTheme } from 'welcome-ui/WelcomeKit'
// error on app start
[ error ] ./pages/_app.js
Module not found: Can't resolve 'welcome-ui/dist/Base' in '/Users/anucreative/Sites/wttj/welcome-ui-consumer/pages'

Icon size doesn't work

La propriété "size" du composant "Icon" ne semble pas passer.
Exemple :
<Icon name="cross" size="xl" />
Mon icon ne s'affiche pas, il n'a pas de width ni de height.

Component : Input with tags

Bonjour :)

Il nous manque un composant pour gĂ©rer les cas particuliers de l'input, notamment dans le cas oĂč l'on peut ajouter plusieurs tags :
Capture d’écran 2019-06-12 à 16 33 15
Capture d’écran 2019-06-12 à 16 33 20

Serait-il possible de l'implémenter ?
Merci d'avance !

Select does not work

  • When options are injected after the first mount
  • When a null value is injected when another value is checked it is not resetted

Add missing tag variant

On the user profile page, tags does not look like the implemented ones.

Actual workaround:

function LightTag(props) {
  return (
    <Tag fontWeight="normal" backgroundColor="nude.200" size="lg" {...props} />
  )
}

Tabs are not controlled

  • Not controlled: I can't change the tab from outside
  • Can't use a Link as a tab: <TabItems as={Link} /> breaks everything

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.