tabler / tabler-react Goto Github PK

Use react-nuka to replicate the carousel demo page,

Whenever I go into example and run yarn start or yarn watch I get a lot of compiler warnings. Would be ideal if we could clean those up.

Replicate the tabler store demo page in our example site

Will need #63 to be completed first.

We need to finish the home page and have it match the tabler demo home page.

The Profile component located on the profile page is missing.
I would like to be tagged for that one, I am currently working on it as part of the Profile Page.

The profile component looks like this (as of current development):

The new documentation system for the most part looks amazing and works well. However, I have had 2 minor issues with it.

1. Issue with the current page - could not resolve reference to Grid - I tried adding "./src/components/Grid/index.js" to the requires list in docs and rebuilding but could not fix it. (see fist attached screenshot for more info)

2. I tried building the docs for TabbedCard with the following code in TabbedCard.examples.md and got some errors that I believe are similar to the ones described in number 1. The code I tried is as follows:

<TabbedCard initialTab="Hello">
  <Tab title="Hello">Hello World</Tab>
  <Tab title="Goodbye">Goodbye</Tab>
  <Tab title="Complex">
    <Grid.Row cards deck>
      <Grid.Col md={4}>
        <Card body="Short content" />
      </Grid.Col>
      <Grid.Col md={4}>
        <Card
          body="Extra long content of card. Lorem ipsum dolor sit amet,
          consetetur sadipscing elitr"
        />
      </Grid.Col>
      <Grid.Col md={4}>
        <Card body="Short content" />
      </Grid.Col>
    </Grid.Row>
  </Tab>
</TabbedCard>

(see second attached screenshot for more info)

Having booleans for

  +outline?: boolean,
  +primary?: boolean,
  +secondary?: boolean,
  +success?: boolean,
  +info?: boolean,
  +warning?: boolean,
  +danger?: boolean,
  +link?: boolean,
  +block?: boolean,

is a little messy. If someone took the time to refactor this that would be a great first issue

Is this forgotten ? This may be required while designing component on mobile devices. What do you think ?
Grid.Col

Tabler uses tooltips for a number of items.
For example, the media component uses tooltips:

Since we are trying to get rid of bootstrap components, a component could be developed from using react-popper.

• Home/Dashboard

Interface

• Cards Design
• Charts
• Pricing Cards

Components

• Maps
• Icons
• Store
• Blog
• Carousel

Pages

• Profile @MrJarv1s
• Register
• Login
• Forgot Password
• 400 error
• 401 error
• 403 error
• 404 error
• 500 error
• 503 error
• Email
• Empty Page
• RTL mode

• Form Elements

• Gallery

Creating an issue for this and assigning it to myself. Currently blocked on #134

Build all the components required for, and then implement the maps demo page https://tabler.github.io/tabler/maps.html

How can I use RTL version? there is no document nor sample.

Steps to reproduce: go to demo page, scroll down to members, click vertical "..." next to Amanda Hunt. It will look like the following, however I believe it should render the way it does on the tabler demo page. I've included screenshots of each below.

Tabler

React

Assigned to @KhaldiAmer

https://tabler.github.io/tabler/store.html

We need help getting all the base components built, anything without a user next to it is available so just let us know what your working on and we'll keep the list updated:

• Avatar
• Badge
• Button
• Basic Card
• Card Footer
• Pricing Card
• Store Card
• Gallery Card
• Container
• Dropdown
• Dimmer
• Form
• Form select button groups
• Form field set
• Form toggle switches
• Form radios
• Form checkboxes
• Form custom file input
• Form input group text and button appends
• Form input group prepend
• Form select
• Grid
• Header
• Icon
• Nav
• Page
• Page/Website header
• Page/Website navbar
• Page/Website footer
• Table
• Text
• Alert
• Progress
• Stamp

Use react-c3js to add charts into our demo site to match the tabler demo home page, the Interface > Charts demo page and the charts documentation page

src/components/index.js does not have a line for the Nav component.

Suggest the following line be added:

export { default as Nav } from "./Nav";

We need to export flow types for our module - even in the examples directory it does not know the flow types. This article seems to provide some good information on this

It would be great if we could provide components that work with react-select styled like tabler

With the new documentation pages, it might be a good idea to get rid of the old pages so that people stop adding to them and are forced to write documentation for the new system.

The Media component located on the profile page is missing.
I would like to be tagged for that one, I am currently working on it as part of the Profile Page.

As seen in the picture above, some files have "invalid" declaration of type Props. This is shown during pre-commit lint.

Build the Icons demo page https://tabler.github.io/tabler/icons.html

• Site
• Page
• Nav
• Grid
• Table
• Dropdown
• Stamp
• Badge
• List

When this project is in a better state it would be great to have Typescript typings (componentName.d.ts files) included in the package so that it can easily be used together with Typescript.

Are we able to remove prop-types as a dependency since we are using flow?

Repro: go to /docs/cards open console. I got following message:

I believe this is a result of the <Text> component default rendering as a <p> tag, which we then nest {children} under. As a result we are getting what looks like a lot of these errors

@AaronCoplan maybe one for you?

Are we using eslint for anything? Since we are using prettier, I'm not sure if ES lint is serving any other purpose - I may be wrong though. If we are not using it that would really clean up our package.json file.

Replicate the blog demo page,

Requires #62

Assigned to @MrJarv1s

Assigned to @MrJarv1s

Build all the components required for, and then implement the profile demo page https://tabler.github.io/tabler/profile.html

Assigned to @KhaldiAmer

See https://tabler.github.io/tabler/blog.html

The current Form.Input does not allow to edit its value on the webpage.
React value prevents modification. Form.Input would require an OnChange Handler as a function that would update the state of the component everytime a change is made.

Create an easy to use date component, using our existing base components where possible, for collecting dates like the date of birth component here

Assigned to: @Hugo-Fonseca

We plan to remove all Bootstrap javascript dependencies from this project. In most cases, this will be replaced with our own state-based logic, for example hiding Alerts, but in other cases, it makes more sense to use existing libraries to replace the functionality for example Popovers and Carousels.

Components with bootstrap depenencies to remove:

• Card options
• Dropdowns
• Popovers / Tooltips #114
• Form input mask
• Alerts dismissing
• Nav
• Button dropdowns

• Intro
• Alerts
• Avatar
• Buttons
• Cards
• Charts
• Colors
• Form Components
• Tags
• Typography

Assigned to @burakakyol

https://tabler.github.io/tabler/gallery.html

Assigned to @burakakyol

Replicate the tabler gallery demo page in our example website.

Add components for building all tags as seen at https://tabler.github.io/tabler/docs/tags.html

As we are aiming to remove all Bootstrap javascript dependencies from this project and we would eventually like this library to provide instantly and easily usable components out of the box, for the carousel cards, I propose we add an existing library such as react-nuka as a dependency to our library and provide components that wrap around it.

Any thoughts/feedback welcome 👍

• Description
• Tags
• Code of Conduct
• Contributing
• Improved README/docs

Build a Tabs component and add a new demo page and section to the documentation for them.

There isn't an existing tabler demo for tabs and the tabler CSS might need tweaking.

Composition is great, but there are some cases where it might be better to change children?: React.Node to be title: string or something along those lines. It seems almost all of the components we have built take children, and I don't think they all necessarily need them.