diff --git a/.changeset/honest-boats-refuse.md b/.changeset/honest-boats-refuse.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/honest-boats-refuse.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/libs/react-ui/.storybook/manager.ts b/packages/libs/react-ui/.storybook/manager.ts index 3e74e05d4a..a41c4c1f7a 100644 --- a/packages/libs/react-ui/.storybook/manager.ts +++ b/packages/libs/react-ui/.storybook/manager.ts @@ -10,5 +10,10 @@ addons.setConfig({ showToolbar: true, sidebar: { showRoots: true, + filters: { + patterns: (item) => { + return !item.tags?.includes('hidden'); + }, + }, }, }); diff --git a/packages/libs/react-ui/CONTRIBUTING.md b/packages/libs/react-ui/CONTRIBUTING.md index bb10df904e..8013f6f36b 100644 --- a/packages/libs/react-ui/CONTRIBUTING.md +++ b/packages/libs/react-ui/CONTRIBUTING.md @@ -22,7 +22,7 @@ pattern will export multiple subcomponents to compose the compound component. A simple example of a component that should use this pattern is the Grid component. -```jsx +```tsx {item1} {item2} @@ -49,7 +49,7 @@ more subcomponents would negatively affect DX. > [here](https://bradfrost.com/blog/post/atomic-web-design/) and > [here](https://atomicdesign.bradfrost.com/chapter-2/). -##### Button component as an example (Needs to be updated) +##### Button component as an example One example of a component that we updated from the Composition to Configuration approach was the `Button` component. @@ -57,7 +57,7 @@ approach was the `Button` component. Previously when the `Button` was used with an icon, it needed to be composed like this: -```jsx +```tsx Label @@ -77,8 +77,10 @@ pattern of the other components, however in usage it caused confusion becuase: Now, it has been updated with the configuration approach and can be used in the following way: -```jsonc - +```tsx + ``` This keeps the `Button` API cleaner, especially when only a label is provided, @@ -144,8 +146,8 @@ Guidlines for defining types: ### Property Naming Convention - Actions should be prefixed with `on` - e.g. `onClick` or `onHover`. -- All boolean props should be named like an adjective to describe the - Component - `disabled`, `stacked`, `fullWidth` Card. +- All boolean props should be named as follows - `isDisabled`, `isFullWidth` + Card. ### Controlled - Components with state @@ -153,27 +155,23 @@ Some components will require state to be able to function, in these cases we should **offer a controlled and uncontrolled version**. For example, the `Pagination` component can be uncontrolled in the sense that it handles its own state (which page you are on) when clicking arrows, but it also accepts an -optional `currentPage` prop which allows the user to control its state. +optional `selectedPage` prop which allows the user to control its state. This means these components should always have two optional props: - Value that is being controlled. - Initial value (for when it is not controlled). This prop should always be - prefixed with `default` - e.g. `initialPage`. + prefixed with `default` - e.g. `defaultSelectedPage`. ### Custom Styling Since this component library was created for usage within Kadena, the components are very opinionated in terms of functionality and style. For this reason, we -wanted to be very strict with props and styling which is why **most components -currently do not accept a classname prop to alter styles**. Layout components -(Box, Stack, Grid) should be used when positioning components as they expose -more styling props and accept a className prop for more customization. If a new -style/iteration is needed for a component, we can discuss adding this with a -designer. - -> NOTE: We are starting off strict, but if necessary, we can reassess whether or -> not we want to start accepting additional styles +wanted to be very strict with props and styling while components are still in +development to reduce inconsistencies across different applications. However +when a component's feature set and style is finalized and mature, we will expose +a classname prop to allow consumers to further customize styles for their +usecase. ### Storybook, Chromatic, & Testing @@ -236,13 +234,9 @@ any client component files: Guidelines when styling with VE: -- Classnames should use camel-casing and always have `Class` suffix - - `containerClass` -- You should use sprinkles whenever possible since these are predefined utility +- You should use `atoms` whenever possible since these are predefined utility class. If a style value that you think is commonly used is not available as a - sprinkle, feel free to add it. -- If you want to create multiple variations of a components style, use variants. - Variants should have a `Variant` suffix - `colorVariant` + `atoms`, feel free to add it. ### Selectors @@ -267,10 +261,10 @@ discretion when deciding what methods to use. https://nextjs.org/docs/getting-started/react-essentials#when-to-use-server-and-client-components [6]: https://vanilla-extract.style/documentation/styling#complex-selectors - ## Design tokens -We use a tool to automatically sync design tokens from our design system [repo](https://github.com/kadena-community/design-system/tree/main). +We use a tool to automatically sync design tokens from our design system +[repo](https://github.com/kadena-community/design-system/tree/main). To sync design tokens run: @@ -278,13 +272,24 @@ To sync design tokens run: pnpm tokens:sync ``` -It will update `./src/styles/tokens` folder with the latest tokens. - -- The tool we use is [design-sync](https://github.com/salamaashoush/design-sync) it is maintained by Salama Ashoush and it is open source. -- We can configure the sync process by editing `design-sync.config.ts` file in the root of the package. -- We use vanilla-extract plugin to generate tokens as two themes `light` and `dark` and we use `light` theme by default. -- In order to use the generated tokens we need to import them from `./src/styles/tokens/contract.css.ts` file the exported contract is named `tokens` and we can change it in the config. -- During our migration to new tokens we don't create vanilla-extract themes from the tokens but only create the contract file and theme values (using `onlyValues` config) then we create bigger contract and theme combining the old and new tokens, see `./src/styles/vars.css.ts` -- We also use `responsiveExtension` to generate styles with media queries for different screen sizes. - -for more info about the tool check the [repo](https://github.com/salamaashoush/design-sync) +This command will rewrite the `./src/styles/tokens` folder with the latest +tokens. + +- The tool we use is + [design-sync](https://github.com/salamaashoush/design-sync). +- We can configure the sync process by editing `design-sync.config.ts` file in + the root of the package. +- We use vanilla-extract plugin to generate tokens as two themes `light` and + `dark` and we use `light` theme by default. +- In order to use the generated tokens we need to import them from + `./src/styles/tokens/contract.css.ts` file the exported contract is named + `tokens` and we can change it in the config. +- During our migration to new tokens we don't create vanilla-extract themes from + the tokens but only create the contract file and theme values (using + `onlyValues` config) then we create bigger contract and theme combining the + old and new tokens, see `./src/styles/vars.css.ts` +- We also use `responsiveExtension` to generate styles with media queries for + different screen sizes. + +For more info about the tool check the +[repo](https://github.com/salamaashoush/design-sync) diff --git a/packages/libs/react-ui/README.md b/packages/libs/react-ui/README.md index 4b670264b2..eadbc4a956 100644 --- a/packages/libs/react-ui/README.md +++ b/packages/libs/react-ui/README.md @@ -4,34 +4,38 @@ basic React components for reuse in Kadena applications. It uses [vanilla-extract/css][1] (will be referred to as VE) to establish a system of utility classes (defined as [sprinkles][2]) and CSS variables (defined in the -theme) that align with Kadena's Design System and exposes them so that they can -be used with any project or framework. A basic [Storybook][3] integration has -been implemented so that users can preview components visually and interact with -their configuration options. +theme) that align with [Kadena's Design System][3] and exposes them so that they +can be used with any project or framework. A basic [Storybook][4] integration +has been implemented so that users can preview components visually and interact +with their configuration options. > Warning: This library is in its early development stage so elements in the > styling environment may change as well as the API for components. > Additionally, installation and compatibility has only been tested with Next.js > projects within the Kadena.js monorepo. -## Getting started +## Getting Started -Run the following commands to install dependencies and build the library: +### Install ```sh -git clone git@github.com:kadena-community/kadena.js.git -cd kadena.js -pnpm install -cd packages/libs/react-ui -pnpm build +pnpm install @kadena/react-ui ``` Since this library uses VE and is not pre-bundled, the consuming project will need to setup integration with VE. You can find integration instructions in the -[VE docs][4]. +[VE docs][5]. ### Integration with Next.js projects within Kadena.js +Run the following commands to install dependencies and build the library from +this repo: + +```sh +pnpm install --filter @kadena/react-ui +pnpm build --filter @kadena/react-ui +``` + Add **@kadena/react-ui** as a dependency in your `package.json`: ```json @@ -44,8 +48,8 @@ Add **@kadena/react-ui** as a dependency in your `package.json`: } ``` -Then run the following commands to install the package and update the monorepo's -state: +Then run the following commands from your project directory to install the +package and update the monorepo's state: ```sh pnpm install @@ -62,7 +66,7 @@ _If you don’t have a next.config.js file in the root of your project, you'll need to create one first._ Add the plugin to your next.config.js file and add **@kadena/react-ui** to transpilePackages: -```js +```ts const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin'); const withVanillaExtract = createVanillaExtractPlugin(); @@ -75,7 +79,7 @@ module.exports = withVanillaExtract(nextConfig); ``` If required, this plugin can be composed with other plugins. See [VE Next.js -integration docs][5]. +integration docs][6]. After the plugin is setup, you should be able to use styling utilities exported from **@kadena/react-ui** and components within your application. @@ -83,11 +87,11 @@ from **@kadena/react-ui** and components within your application. ### Usage As mentioned earlier, **@kadena/react-ui** provides components and styling -utilities that align with the Kadena design system. +utilities that align with the [Kadena Design System][3]. Example for importing and using components: -```js +```tsx import { Text } from '@kadena/react-ui'; export const Component = () => { @@ -101,26 +105,27 @@ conjunction with [vanilla-extract/css][1] in your own project, you can import them via `@kadena/react-ui/styles`: ```ts -import { sprinkles, vars } from '@kadena/react-ui/styles'; +import { atoms, vars } from '@kadena/react-ui/styles'; import { style } from '@vanilla-extract/css'; export const exampleClass = style([ - sprinkles({ - bg: '$negativeSurface', - color: '$negativeAccent', - margin: '$3', + atoms({ + backgroundColor: 'base.default', + color: 'text.base.default', + margin: 'sm', }), ]); ``` ### Global styles -We are overriding some global styles and adding fonts in this library. To make sure fonts are loaded and global styles are applied, you will need to add the `import '@kadena/react-ui/global'` to your app's entry point. - +We are overriding some global styles and adding fonts in this library. To make +sure fonts are loaded and global styles are applied, you will need to add the +`import '@kadena/react-ui/global'` to your app's entry point. ### Dark Theme -We are utilizing the [theming][6] feature from VE to create CSS color variables +We are utilizing the [theming][7] feature from VE to create CSS color variables that invert depending on the selected theme (light/dark). By default, the theme will have colors suitable for light mode, but to add dark theme integration you can export `darkThemeClass` from **@kadena/react-ui** and use it with your theme @@ -129,7 +134,7 @@ provider. You can use "next-themes" to set this up in Next.js projects by wrapping `Component` with the `ThemeProvider` in `__app.tsx` -```js +```tsx import { darkThemeClass } from '@kadena/react-ui'; import { ThemeProvider } from 'next-themes'; @@ -165,36 +170,6 @@ command: pnpm storybook ``` -### Installation outside of the Kadena.js monorepo - -The component library is not yet published. To use it in an app outside of this -mono repo you first clone this repo and then reference this library from your -app. - -```sh -git clone git@github.com:kadena-community/kadena.js.git -cd kadena.js -pnpm install -cd packages/libs/react-ui -pnpm build -cd ~/your-app-root -``` - -Add @kadena/react-ui as a dependency in your package.json: - -```jsonc -{ - ... - "dependencies": { - "@kadena/react-ui": "link:../kadena.js/packages/libs/react-ui" - ... - } -} -``` - -Then, like other installations, you will need to follow the applicable -integration instructions for VE. - ## UI Library Guidelines We would like to maintain a strict component library with opinionated styles and @@ -204,67 +179,46 @@ components to maintain this goal. ### Styling -We are currently using [vanilla-extract/css][7] as it is a zero-runtime +We are currently using [vanilla-extract/css][8] as it is a zero-runtime CSS-in-JS library that is framework agnostic. _Theming_ -We have defined a theme using elements of the Kadena Design System and these -tokens should be used as property values in most cases to ensure consistency and -alignment with the design. With VE, we are also able to override this theme -within projects to add additional CSS variables or update colors for a dark -theme, for example. +We have defined a theme using elements of the [Kadena Design System][3] and +these tokens should be used as property values in most cases to ensure +consistency and alignment with the design. With VE, we are also able to override +this theme within projects to add additional CSS variables or update colors for +a dark theme, for example. -_Sprinkles_ +_Atoms_ -Sprinkles is an optional utility class built on top of VE that allows users to +Sprinkles is an optional package built on top of VE that allows users to generate a set of custom utility classes (similar to Tailwind). @kadena/react-ui -has setup sprinkles using the defined theme based on the Kadena Design System. -Whenever possible it is preferrable to use these utility classes and avoid -creating unnecessary custom classes using the `style` function to keep the -bundle size smaller. +has setup `atoms` using the defined theme based on the [Kadena Design +System][3]. Whenever possible it is preferrable to use these utility classes and +avoid creating unnecessary custom classes using the `style` function to keep the +bundle size smaller and UI more consistent. _Colors_ -In our theme we have color scales that represent a set of different shades for a -color as well as theme specific tokens that return different colors depending on -whether we are in light/dark theme. - -Due to the strict nature of our component library, we should use our discretion -to determine what subset of colors should be exposed for a certain component. -For example, a text component would likely only be used in a small subset of -colors on an interface - our approach to doing this would be to create a color -variant with named options that map to each of the colors options. - -When it comes to the dark theme, the default behavior when using theme specific -tokens will effectively be the inverse of the opposing theme. This is not always -ideal since visual cues can be lost. When using sprinkles, you can specify a -different color for dark vs light mode and when using the style function, you -can use a selector. - -Since the development of this library is happening in parallel with the -development of our other products, the color sets are also still in flux. In -general you can expect each set of colors to have the following 4 options. -Example: - -```js -primaryAccent: '#2997FF', // Vibrant -primarySurface: '#C2E1FF', // Low contrast -primaryContrast: '#00498F', // Contrast -primaryHighContrast: '#002F5C', // High Contrast -``` +In our tokens we have color scales that represent a set of different shades for +a color as well as theme specific tokens that return different colors depending +on whether we are in light/dark theme. -If at any point you feel that you need more than these variations of a specific -color, reach out to our designer(s) to discuss if it would be possible to -simplify the design to use these 4 colors before adding them to the color -tokens. +The [Kadena Design System][3] setup the color tokens to have naming based on +application rather than the underlying color. Since not all colors are +applicable for different CSS properties, the `atoms` utility only provides a +subset of color options that would most commonly be used with the associated +property. In cases where consumers need access to other colors, the can still +access them through the exported `tokens`. _Spacing_ The component library is composed of layout, primitive, and compound components. Currently we have decided to only rely on layout components for positioning. This means that we will not be exposing any display/spacing related props from -our primitive and compound components. +our primitive and compound components. All finalized components will accept a +className prop in case consumers need to add custom styling. ### Conclusion @@ -274,8 +228,9 @@ together as a starting point, but any suggestions for change are welcome! [1]: https://vanilla-extract.style [2]: https://vanilla-extract.style/documentation/packages/sprinkles/ -[3]: https://storybook.js.org/ -[4]: https://vanilla-extract.style/documentation/integrations/next/ -[5]: https://vanilla-extract.style/documentation/integrations/next/#setup -[6]: https://vanilla-extract.style/documentation/global-api/create-global-theme/ -[7]: https://vanilla-extract.style/ +[3]: https://github.com/kadena-community/design-system +[4]: https://storybook.js.org/ +[5]: https://vanilla-extract.style/documentation/integrations/next/ +[6]: https://vanilla-extract.style/documentation/integrations/next/#setup +[7]: https://vanilla-extract.style/documentation/global-api/create-global-theme/ +[8]: https://vanilla-extract.style/ diff --git a/packages/libs/react-ui/package.json b/packages/libs/react-ui/package.json index 4838335d37..199d30bead 100644 --- a/packages/libs/react-ui/package.json +++ b/packages/libs/react-ui/package.json @@ -1,10 +1,14 @@ { "name": "@kadena/react-ui", "version": "0.6.0", - "private": true, "description": "A react component library built on Kadena's Design System", "license": "ISC", "author": "KADENA", + "contributors": [ + "Eileen Guo ", + "Salama Ashoush ", + "Sam Ferrero " + ], "sideEffects": [ "*.css.*", "dist/global.*", diff --git a/packages/libs/react-ui/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/libs/react-ui/src/components/Breadcrumbs/Breadcrumbs.stories.tsx index fd3d188fb1..b7d1f9976e 100644 --- a/packages/libs/react-ui/src/components/Breadcrumbs/Breadcrumbs.stories.tsx +++ b/packages/libs/react-ui/src/components/Breadcrumbs/Breadcrumbs.stories.tsx @@ -22,7 +22,7 @@ const meta: Meta< > = { title: 'Navigation/Breadcrumbs', parameters: { - status: { type: 'needsRevision' }, + status: { type: 'releaseCandidate' }, docs: { description: { component: @@ -33,7 +33,7 @@ const meta: Meta< argTypes: { icon: { description: - 'The base icon for the breadcrumb component displayed to the left of the breadcrumb items. is part of the ProductIcon', + 'An icon displayed to the left of the breadcrumb items. This prop accepts a ReactNode.', }, itemsCount: { control: { type: 'range', min: 1, max: 6, step: 1 }, diff --git a/packages/libs/react-ui/src/components/Button/Button.stories.tsx b/packages/libs/react-ui/src/components/Button/Button.stories.tsx index 27a723e8ae..a8f0bdb4fc 100644 --- a/packages/libs/react-ui/src/components/Button/Button.stories.tsx +++ b/packages/libs/react-ui/src/components/Button/Button.stories.tsx @@ -22,7 +22,7 @@ const meta: Meta = { title: 'Components/Button', component: Button, parameters: { - status: { type: 'inDevelopment' }, + status: { type: 'releaseCandidate' }, controls: { hideNoControlsWarning: true, sort: 'requiredFirst', diff --git a/packages/libs/react-ui/src/components/Card/Card.stories.tsx b/packages/libs/react-ui/src/components/Card/Card.stories.tsx index abbff91a44..1494fc2097 100644 --- a/packages/libs/react-ui/src/components/Card/Card.stories.tsx +++ b/packages/libs/react-ui/src/components/Card/Card.stories.tsx @@ -12,7 +12,7 @@ const meta: Meta = { decorators: [withContentWidth, withCenteredStory], parameters: { status: { - type: ['needsRevision'], + type: ['releaseCandidate'], }, docs: { description: { diff --git a/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx b/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx index fe5c49cfd0..6911a23232 100644 --- a/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx +++ b/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx @@ -10,6 +10,9 @@ type DialogStoryProps = IDialogProps & { title: string }; const meta: Meta = { title: 'Overlays/Dialog', parameters: { + status: { + type: ['releaseCandidate'], + }, docs: { description: { component: ` diff --git a/packages/libs/react-ui/src/components/Divider/Divider.stories.tsx b/packages/libs/react-ui/src/components/Divider/Divider.stories.tsx index ccc0aeb70e..a12835f063 100644 --- a/packages/libs/react-ui/src/components/Divider/Divider.stories.tsx +++ b/packages/libs/react-ui/src/components/Divider/Divider.stories.tsx @@ -8,7 +8,7 @@ const meta: Meta = { title: 'Layout/Divider', decorators: [withContentWidth], parameters: { - status: { type: 'stable' }, + status: { type: 'releaseCandidate' }, docs: { description: { component: diff --git a/packages/libs/react-ui/src/components/Form/Combobox/Combobox.stories.tsx b/packages/libs/react-ui/src/components/Form/Combobox/Combobox.stories.tsx index 9e1be88396..fb0f033b71 100644 --- a/packages/libs/react-ui/src/components/Form/Combobox/Combobox.stories.tsx +++ b/packages/libs/react-ui/src/components/Form/Combobox/Combobox.stories.tsx @@ -15,7 +15,7 @@ const meta: Meta = { component: Combobox, decorators: [withContentWidth, onLayer2], parameters: { - status: { type: 'inDevelopment' }, + status: { type: 'releaseCandidate' }, docs: { description: { component: diff --git a/packages/libs/react-ui/src/components/Form/Select/Select.stories.tsx b/packages/libs/react-ui/src/components/Form/Select/Select.stories.tsx index e771479187..fbb8b34670 100644 --- a/packages/libs/react-ui/src/components/Form/Select/Select.stories.tsx +++ b/packages/libs/react-ui/src/components/Form/Select/Select.stories.tsx @@ -15,7 +15,7 @@ const meta: Meta = { component: Select, decorators: [withContentWidth, onLayer2], parameters: { - status: { type: 'inDevelopment' }, + status: { type: 'releaseCandidate' }, docs: { description: { component: diff --git a/packages/libs/react-ui/src/components/Form/TextField/TextField.stories.tsx b/packages/libs/react-ui/src/components/Form/TextField/TextField.stories.tsx index 2574e82029..6815e4642b 100644 --- a/packages/libs/react-ui/src/components/Form/TextField/TextField.stories.tsx +++ b/packages/libs/react-ui/src/components/Form/TextField/TextField.stories.tsx @@ -22,7 +22,7 @@ const meta: Meta = { component: TextField, decorators: [withContentWidth, onLayer2], parameters: { - status: { type: 'inDevelopment' }, + status: { type: 'releaseCandidate' }, docs: { description: { component: diff --git a/packages/libs/react-ui/src/components/Form/TextareaField/TextareaField.stories.tsx b/packages/libs/react-ui/src/components/Form/TextareaField/TextareaField.stories.tsx index 8bb8d15a25..e44ac6ae23 100644 --- a/packages/libs/react-ui/src/components/Form/TextareaField/TextareaField.stories.tsx +++ b/packages/libs/react-ui/src/components/Form/TextareaField/TextareaField.stories.tsx @@ -21,7 +21,7 @@ const meta: Meta = { component: TextareaField, decorators: [withContentWidth, onLayer2], parameters: { - status: { type: 'inDevelopment' }, + status: { type: 'releaseCandidate' }, docs: { description: { component: diff --git a/packages/libs/react-ui/src/components/Icon/System/SystemIcons.stories.tsx b/packages/libs/react-ui/src/components/Icon/System/SystemIcons.stories.tsx index f41598510c..01b6700247 100644 --- a/packages/libs/react-ui/src/components/Icon/System/SystemIcons.stories.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/SystemIcons.stories.tsx @@ -14,7 +14,7 @@ const meta: Meta<{ icon: string } & IIconProps> = { title: 'Icons/SystemIcons', parameters: { status: { - type: ['stable'], + type: ['needsRevision'], }, }, argTypes: { diff --git a/packages/libs/react-ui/src/components/Layout/Box/Box.stories.tsx b/packages/libs/react-ui/src/components/Layout/Box/Box.stories.tsx index da5f1acf98..34f49d5e2e 100644 --- a/packages/libs/react-ui/src/components/Layout/Box/Box.stories.tsx +++ b/packages/libs/react-ui/src/components/Layout/Box/Box.stories.tsx @@ -16,7 +16,7 @@ const meta: Meta = { decorators: [onLayer2], parameters: { status: { - type: 'stable', + type: 'releaseCandidate', }, docs: { description: { diff --git a/packages/libs/react-ui/src/components/Link/Link.stories.tsx b/packages/libs/react-ui/src/components/Link/Link.stories.tsx index 22ce1173a7..df7fa67276 100644 --- a/packages/libs/react-ui/src/components/Link/Link.stories.tsx +++ b/packages/libs/react-ui/src/components/Link/Link.stories.tsx @@ -21,7 +21,7 @@ const meta: Meta = { title: 'Components/Link', component: Link, parameters: { - status: { type: 'inDevelopment' }, + status: { type: 'releaseCandidate' }, controls: { hideNoControlsWarning: true, sort: 'requiredFirst', diff --git a/packages/libs/react-ui/src/components/NavAccordion/NavAccordion.stories.tsx b/packages/libs/react-ui/src/components/NavAccordion/NavAccordion.stories.tsx index d87d55f3a5..1b57943443 100644 --- a/packages/libs/react-ui/src/components/NavAccordion/NavAccordion.stories.tsx +++ b/packages/libs/react-ui/src/components/NavAccordion/NavAccordion.stories.tsx @@ -14,7 +14,7 @@ const meta: Meta = { title: 'Navigation/NavAccordion', parameters: { status: { - type: ['needsRevision'], + type: ['deprecated'], }, controls: { hideNoControlsWarning: true, diff --git a/packages/libs/react-ui/src/components/NavAccordion/index.ts b/packages/libs/react-ui/src/components/NavAccordion/index.ts index 24fb580132..57ea13fee3 100644 --- a/packages/libs/react-ui/src/components/NavAccordion/index.ts +++ b/packages/libs/react-ui/src/components/NavAccordion/index.ts @@ -22,6 +22,10 @@ export interface INavAccordionProps { Link: FC; } +/** + * A component used for grouping items in a navigation accordion. + * @deprecated This component will be redesigned. + */ export const NavAccordion: INavAccordionProps = { Root: NavAccordionRoot, Section: NavAccordionSection, diff --git a/packages/libs/react-ui/src/components/NavFooter/NavFooter.stories.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooter.stories.tsx index 28d48a19f8..493caf5496 100644 --- a/packages/libs/react-ui/src/components/NavFooter/NavFooter.stories.tsx +++ b/packages/libs/react-ui/src/components/NavFooter/NavFooter.stories.tsx @@ -12,7 +12,7 @@ const meta: Meta<{ title: 'Navigation/NavFooter', parameters: { status: { - type: ['needsRevision'], + type: ['deprecated'], }, docs: { description: { diff --git a/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx b/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx index 4fcdb402fd..5722e1c08f 100644 --- a/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx +++ b/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx @@ -30,7 +30,7 @@ const meta: Meta = { decorators: [withContentWidth], parameters: { status: { - type: ['inDevelopment'], + type: ['releaseCandidate'], }, docs: { description: { diff --git a/packages/libs/react-ui/src/components/ProfileSummary/ProfileSummary.css.ts b/packages/libs/react-ui/src/components/ProfileSummary/ProfileSummary.css.ts deleted file mode 100644 index d0d9c51335..0000000000 --- a/packages/libs/react-ui/src/components/ProfileSummary/ProfileSummary.css.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { style } from '@vanilla-extract/css'; -import { sprinkles } from '../../styles/sprinkles.css'; - -export const imageClass = style([ - sprinkles({ - borderRadius: '$round', - width: '$24', - height: '$24', - objectFit: 'cover', - }), -]); - -export const boldTextClass = style([ - sprinkles({ - marginY: '$2', - fontWeight: '$bold', - display: 'block', - }), -]); - -const ulClass = style([ - sprinkles({ - display: 'flex', - alignItems: 'flex-start', - justifyContent: 'flex-start', - marginX: 0, - marginY: '$2', - padding: 0, - }), -]); - -export const tagContainerClass = style([ - ulClass, - sprinkles({ - flexDirection: 'row', - listStyleType: 'none', - }), -]); - -export const linkContainerClass = style([ - ulClass, - sprinkles({ - flexDirection: 'column', - marginLeft: '$4', - }), -]); - -export const tagClass = style([ - sprinkles({ - margin: '$1', - }), -]); - -export const containerClass = style([ - sprinkles({ - color: '$foreground', - display: 'flex', - flexDirection: 'row', - gap: '$6', - }), -]); diff --git a/packages/libs/react-ui/src/components/ProfileSummary/ProfileSummary.stories.tsx b/packages/libs/react-ui/src/components/ProfileSummary/ProfileSummary.stories.tsx deleted file mode 100644 index 6e49a4094c..0000000000 --- a/packages/libs/react-ui/src/components/ProfileSummary/ProfileSummary.stories.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; -import type { IProfileSummaryRootProps } from '../ProfileSummary'; -import { ProfileSummary } from '../ProfileSummary'; - -type StoryComponentType = IProfileSummaryRootProps & { - links: Record; -}; - -const meta: Meta = { - title: 'Patterns/ProfileSummary', - component: ProfileSummary.Root, - parameters: { - status: { - type: ['experimental'], - }, - docs: { - description: { - component: - 'The ProfileSummary component renders a card with a profile picture, name, title, tags, and links. The links are rendered using the `Link` component and can be set with the `links` prop.', - }, - }, - }, -}; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - name: 'ProfileSummary', - args: { - name: 'Tasos Bitsios', - title: 'Developer Experience Developer (DED)', - tags: ['Chainweb-stream', 'SSE'], - imageSrc: 'https://avatars.githubusercontent.com/u/115649719?v=4', - links: { - 'Personal website': 'https://tasosbitsios.com', - Twitter: 'https://twitter.com/tasosbitsios', - 'Custom link': 'https://kadena.io', - }, - }, - render: ({ name, title, tags, imageSrc, links }) => { - return ( - - {Object.entries(links).map(([label, href]) => ( - - {label} - - ))} - - ); - }, -}; diff --git a/packages/libs/react-ui/src/components/ProfileSummary/ProfileSummaryLink.tsx b/packages/libs/react-ui/src/components/ProfileSummary/ProfileSummaryLink.tsx deleted file mode 100644 index 7109e8d7d1..0000000000 --- a/packages/libs/react-ui/src/components/ProfileSummary/ProfileSummaryLink.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type { FC } from 'react'; -import React from 'react'; -import type { ILinkProps } from '../Link'; -import { Link } from '../Link'; - -export interface IProfileSummaryLinkProps extends ILinkProps {} - -export const ProfileSummaryLink: FC = ({ - children, - ...restLinkProps -}) => { - return ( -
  • - {children} -
    • - ); -}; diff --git a/packages/libs/react-ui/src/components/ProfileSummary/ProfileSummaryRoot.tsx b/packages/libs/react-ui/src/components/ProfileSummary/ProfileSummaryRoot.tsx deleted file mode 100644 index 765fe87b39..0000000000 --- a/packages/libs/react-ui/src/components/ProfileSummary/ProfileSummaryRoot.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import type { FC, FunctionComponentElement } from 'react'; -import React from 'react'; -import { Tag } from '../Tag'; -import { - boldTextClass, - containerClass, - imageClass, - linkContainerClass, - tagClass, - tagContainerClass, -} from './ProfileSummary.css'; -import type { IProfileSummaryLinkProps } from './ProfileSummaryLink'; - -export interface IProfileSummaryRootProps { - name: string; - title: string; - imageSrc: string; - tags?: string[]; - children: FunctionComponentElement[]; -} - -export const ProfileSummaryRoot: FC = ({ - name, - title, - imageSrc, - tags = undefined, - children, -}) => { - return ( -
    - {name} -
    - {name} - {title} - - {tags && ( -
      - {tags.map((tag, i) => ( -
    • - {tag} -
      • - ))} -
    - )} - - {children && ( - <> - Links -
      {children}
    - - )} -
    -
    - ); -}; diff --git a/packages/libs/react-ui/src/components/ProfileSummary/index.ts b/packages/libs/react-ui/src/components/ProfileSummary/index.ts deleted file mode 100644 index dd6af9a84d..0000000000 --- a/packages/libs/react-ui/src/components/ProfileSummary/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type { FC } from 'react'; -import type { IProfileSummaryLinkProps } from './ProfileSummaryLink'; -import { ProfileSummaryLink } from './ProfileSummaryLink'; -import type { IProfileSummaryRootProps } from './ProfileSummaryRoot'; -import { ProfileSummaryRoot } from './ProfileSummaryRoot'; - -export { IProfileSummaryLinkProps, IProfileSummaryRootProps }; - -interface IProfileSummaryProps { - Root: FC; - Link: FC; -} - -export const ProfileSummary: IProfileSummaryProps = { - Root: ProfileSummaryRoot, - Link: ProfileSummaryLink, -}; diff --git a/packages/libs/react-ui/src/components/ProgressCircle/ProgressCircle.stories.tsx b/packages/libs/react-ui/src/components/ProgressCircle/ProgressCircle.stories.tsx index bdc493b538..57e45308c3 100644 --- a/packages/libs/react-ui/src/components/ProgressCircle/ProgressCircle.stories.tsx +++ b/packages/libs/react-ui/src/components/ProgressCircle/ProgressCircle.stories.tsx @@ -4,12 +4,11 @@ import { colorAtoms } from '../../styles/atoms.css'; import type { IProgressCircleProps } from './ProgressCircle'; import { ProgressCircle } from './ProgressCircle'; -console.log('colorAtoms', colorAtoms, Object.keys(colorAtoms)); const meta: Meta = { title: 'Components/ProgressCircle', parameters: { status: { - type: ['inDevelopment'], + type: ['releaseCandidate'], }, docs: { description: { @@ -66,7 +65,7 @@ type Story = StoryObj; export const Primary: Story = { name: 'ProgressCircle', args: { - isIndeterminate: false, + isIndeterminate: true, value: 25, minValue: 0, maxValue: 100, diff --git a/packages/libs/react-ui/src/components/Tabs/Tabs.stories.tsx b/packages/libs/react-ui/src/components/Tabs/Tabs.stories.tsx index 10132f0fef..9bfc65fbbd 100644 --- a/packages/libs/react-ui/src/components/Tabs/Tabs.stories.tsx +++ b/packages/libs/react-ui/src/components/Tabs/Tabs.stories.tsx @@ -44,7 +44,7 @@ const meta: Meta = { component: Tabs, decorators: [onLayer2], parameters: { - status: { type: 'inDevelopment' }, + status: { type: 'releaseCandidate' }, docs: { description: { component: diff --git a/packages/libs/react-ui/src/components/Tag/Tag.stories.tsx b/packages/libs/react-ui/src/components/Tag/Tag.stories.tsx index c601277b79..7d7158de66 100644 --- a/packages/libs/react-ui/src/components/Tag/Tag.stories.tsx +++ b/packages/libs/react-ui/src/components/Tag/Tag.stories.tsx @@ -9,7 +9,7 @@ const meta: Meta = { component: TagGroup, parameters: { status: { - type: ['inDevelopment'], + type: ['releaseCandidate'], }, docs: { description: { diff --git a/packages/libs/react-ui/src/components/Tree/Tree.stories.tsx b/packages/libs/react-ui/src/components/Tree/Tree.stories.tsx index 478828cec0..086eb23860 100644 --- a/packages/libs/react-ui/src/components/Tree/Tree.stories.tsx +++ b/packages/libs/react-ui/src/components/Tree/Tree.stories.tsx @@ -7,12 +7,12 @@ const meta: Meta<{} & ITreeProps> = { title: 'Components/Tree', parameters: { status: { - type: ['needsRevision'], + type: ['deprecated'], }, docs: { description: { component: - 'Deprecated. Do not use.
    Will be refactored as it does not meet our standards.

    The Tree component renders a tree structure with a root node and child nodes. The tree can be expanded and collapsed by clicking on the root node. The tree can be set to open by default with the `isOpen` prop. The tree can be set to close its siblings when opened with the `linked` prop.', + 'The Tree component renders a tree structure with a root node and child nodes. The tree can be expanded and collapsed by clicking on the root node. The tree can be set to open by default with the `isOpen` prop. The tree can be set to close its siblings when opened with the `linked` prop.', }, }, }, diff --git a/packages/libs/react-ui/src/components/Tree/Tree.tsx b/packages/libs/react-ui/src/components/Tree/Tree.tsx index 7be86b3998..01b53ba8a5 100644 --- a/packages/libs/react-ui/src/components/Tree/Tree.tsx +++ b/packages/libs/react-ui/src/components/Tree/Tree.tsx @@ -12,6 +12,10 @@ export interface ITreeProps { onClose?: () => void; } +/** + * A component used for grouping items in a tree. + * @deprecated This component will be redesigned. + */ export const Tree: FC = ({ title, items, diff --git a/packages/libs/react-ui/src/components/Typography/Heading/Heading.stories.tsx b/packages/libs/react-ui/src/components/Typography/Heading/Heading.stories.tsx index 70691888f6..836eb33155 100644 --- a/packages/libs/react-ui/src/components/Typography/Heading/Heading.stories.tsx +++ b/packages/libs/react-ui/src/components/Typography/Heading/Heading.stories.tsx @@ -8,7 +8,7 @@ const meta: Meta = { component: Heading, parameters: { status: { - type: ['needsRevision'], + type: ['releaseCandidate'], }, }, argTypes: { diff --git a/packages/libs/react-ui/src/components/Typography/Text/Text.stories.tsx b/packages/libs/react-ui/src/components/Typography/Text/Text.stories.tsx index 259a842c2c..b3a658023a 100644 --- a/packages/libs/react-ui/src/components/Typography/Text/Text.stories.tsx +++ b/packages/libs/react-ui/src/components/Typography/Text/Text.stories.tsx @@ -8,7 +8,7 @@ const meta: Meta = { component: Text, parameters: { status: { - type: ['needsRevision'], + type: ['releaseCandidate'], }, }, argTypes: { diff --git a/packages/libs/react-ui/src/components/index.ts b/packages/libs/react-ui/src/components/index.ts index 55aee0de36..aa4b4f0e40 100644 --- a/packages/libs/react-ui/src/components/index.ts +++ b/packages/libs/react-ui/src/components/index.ts @@ -52,10 +52,6 @@ export type { INotificationProps, } from './Notification'; export type { IPaginationProps } from './Pagination'; -export type { - IProfileSummaryLinkProps, - IProfileSummaryRootProps, -} from './ProfileSummary'; export type { ITBodyProps, ITHeadProps, @@ -115,7 +111,6 @@ export { NotificationHeading, } from './Notification'; export { Pagination } from './Pagination'; -export { ProfileSummary } from './ProfileSummary'; export { Table } from './Table'; export { TabItem, Tabs } from './Tabs'; export { Tag, TagGroup, TagItem } from './Tag'; diff --git a/packages/libs/react-ui/src/index.ts b/packages/libs/react-ui/src/index.ts index c8a2d4bcfb..9b704a4cac 100644 --- a/packages/libs/react-ui/src/index.ts +++ b/packages/libs/react-ui/src/index.ts @@ -38,8 +38,6 @@ export type { INotificationHeadingProps, INotificationProps, IPaginationProps, - IProfileSummaryLinkProps, - IProfileSummaryRootProps, ISelectProps, IStackProps, ITBodyProps, @@ -96,7 +94,6 @@ export { NotificationHeading, Pagination, ProductIcon, - ProfileSummary, Select, SelectItem, Stack,