@castiron/components v3.0.1
Depreciated
This package has been depreciated. See root components folder for code examples.
Current components:
Storybook of /components
Do a yarn install
in this directory to prep for building components individually, and to prep for using the Storybook server.
yarn storybook
will start up Storybook in your browser (at http://localhost:6006). It will hot-reload your changes to any of the components and stories in this area.
COMPONENT | NOTES |
---|---|
Accordion | An accessible accordion ready for more styling |
Breadcrumbs | An accessible breadcrumb widget, ready for styling |
Button | An accessible styled-components button ready for more styling |
Input | An accessible base input, ready for extending and styling |
Pagination | An accessible pagination widget, ready for styling |
Notes on Storybook
Our implementation of Storybook has some addons:
The Story tab shows the source code for the story, making it easy to see how the component could be implemented.
The Controls tab replaces Knobs, and allows you to dynamically change props. Most of our components will accept a style object prop, so when you write stories, give a few things as default and they will show in this tab for monkeying with.
The Actions tab shows onXXXX type events, like onClick for our Button. Click it, see what happens.
The top tabs include Docs, which is an automatic creation and kinda fun
Note the other icons in the top tabs, which include background color and responsive adjustments.
The Accessability tab All components should pass a11y checks before publishing
Preview with Vercel
All of the component stories can be previewed at https://common-js-components-cast-iron.vercel.app/
Any changes pushed to the main
branch will be deployed.
Any new branches will deploy to a unique preview URL.
Development
Philosphy on components
The philosophy behind this effort is to create highly reusable, accessible, well-formed React components. These components should come with minimal to no styling, and accept class names and style objects in order to extend any inital styling.
The Button component, for example, uses the story to inform background-color, color, and border-radius. The underlying styled button is set to accept these vars in the styled component, with simple fallback vars such as:
color: var(--color, var(--text-dark));
background-color: var(--background-color, var(--neutral10));
Thus, the story is a prototype for the implementation of the component, and in future, grabbing the source of a story can be a jumping off point for implementation.
Dependencies
The components in this area are usually dependent on react and styled-components. They also may leverage accessible components from the Reakit library or other agreed-upon sources.
Note that because we are using Reakit and Styled Components, when composing atomics, we may need to use the "as" prop of styled-components and thus, the render props approach of reakit: https://reakit.io/docs/composition/#render-props
a11y Sources
a11y Guides
Developing Components
Okay, to make a new component, use the pattern of Button, with a file structure like:
Components/
ComponentName
|__ src
|__ Component.stories.js
|__ index.js
|__ package.json
This sets you up to be able to install this lil-bitty component, and thus to build it for distribution. Copy the Button's package.json and you'll see what I mean. If we end up doing a monorepo we won't have to publish each one, but for now, we do. This is because it would be overkill to import all the components any time we wanted to use one in a project. So, see below about working on packages for both styling packages and these components.
5 months ago
5 months ago
5 months ago
7 months ago
8 months ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
3 years ago