feat(list): new list component

added component files + props, tests, stories, examples

fix #1017

content/docs/typography/list.mdx

@@ -0,0 +1,46 @@
+---
+title: React Lists - Flowbite
+description: Use the list component to show an unordred or ordered list of items based on multiple styles, layouts, and variants built with Tailwind CSS and Flowbite
+---
+
+Get started with a collection of list components built with Tailwind CSS for ordered and unordered lists with bullets, numbers, or icons and other styles and layouts to show a list of items inside an article or throughout your web page.
+
+Start using the list component by first importing it from Flowbite React:
+
+```jsx
+import { List } from 'flowbite-react';
+```
+
+## Default list
+
+Use this example to create a default unordered list of items using the `List` component with `List.Item` child components inside of it.
+
+<Example name="list.root" />
+
+## Nested
+
+Use this example to nested another list of items inside the parent list element.
+
+<Example name="list.nested" />
+
+## Unstyled
+
+Use the `unstyled` prop to disable the list style bullets or numbers.
+
+<Example name="list.unstyled" />
+
+## Ordered list
+
+Use the `ordered` prop tag to create an ordered list of items with numbers.
+
+<Example name="list.ordered" />
+
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<Theme name="list" />
+
+## References
+
+- [Flowbite List](https://flowbite.com/docs/typography/list/)

data/components.tsx

@@ -343,13 +343,13 @@ export const COMPONENTS_DATA: Component[] = [
   //   link: `/docs/typography/images`,
   //   classes: 'w-64'
   // },
-  // {
-  //   name: 'List',
-  //   image: '/images/components/list.svg',
-  //   imageDark: '/images/components/list-dark.svg',
-  //   link: `/docs/typography/lists`,
-  //   classes: 'w-64'
-  // },
+  {
+    name: 'List',
+    image: '/images/components/list.svg',
+    imageDark: '/images/components/list-dark.svg',
+    link: `/docs/typography/list`,
+    classes: 'w-64'
+  },
   // {
   //   name: 'Link',
   //   image: '/images/components/link.svg',

examples/index.ts

@@ -16,6 +16,7 @@ export * as footer from './footer';
 export * as forms from './forms';
 export * as kbd from './kbd';
 export * as listGroup from './listGroup';
+export * as list from './list';
 export * as modal from './modal';
 export * as navbar from './navbar';
 export * as pagination from './pagination';

examples/list/index.ts

@@ -0,0 +1,4 @@
+export { root } from './list.root';
+export { unstyled } from './list.unstyled';
+export { nested } from './list.nested';
+export { ordered } from './list.ordered';

examples/list/list.nested.tsx

@@ -0,0 +1,87 @@
+import { type CodeData } from '~/components/code-demo';
+import { List, ListItem } from '~/src';
+
+const code = `
+'use client';
+
+import { List } from 'flowbite-react';
+
+function Component() {
+  return (
+    <>
+      <List>
+        <List.Item>At least 10 characters (and up to 100 characters)</List.Item>
+        <List.Item>At least one lowercase character</List.Item>
+        <List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
+      </List>
+    </>
+  );
+}
+`;
+
+const codeRSC = `
+import { List, ListItem } from 'flowbite-react';
+
+function Component() {
+  return (
+    <>
+      <List>
+        <ListItem>At least 10 characters (and up to 100 characters)</ListItem>
+        <ListItem>At least one lowercase character</ListItem>
+        <ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
+      </List>
+    </>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <>
+      <List>
+        <ListItem>
+          List item one
+          <List ordered nested>
+            <ListItem>You might feel like you are being really "organized" o</ListItem>
+            <ListItem>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</ListItem>
+            <ListItem>Nesting tons of folders in your source code is also not helpful.</ListItem>
+          </List>
+        </ListItem>
+        <ListItem>
+          List item two
+          <List ordered nested>
+            <ListItem>I'm not sure if we'll bother styling more than two levels deep.</ListItem>
+            <ListItem>Two is already too much, three is guaranteed to be a bad idea.</ListItem>
+            <ListItem>If you nest four levels deep you belong in prison.</ListItem>
+          </List>
+        </ListItem>
+        <ListItem>
+          List item three
+          <List ordered nested>
+            <ListItem>Again please don't nest lists if you want</ListItem>
+            <ListItem>Nobody wants to look at this.</ListItem>
+            <ListItem>I'm upset that we even have to bother styling this.</ListItem>
+          </List>
+        </ListItem>
+      </List>
+    </>
+  );
+}
+
+export const nested: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'list/list.nested.tsx',
+  component: <Component />,
+};

examples/list/list.ordered.tsx

@@ -0,0 +1,66 @@
+import { type CodeData } from '~/components/code-demo';
+import { List, ListItem } from '~/src';
+
+const code = `
+'use client';
+
+import { List } from 'flowbite-react';
+
+function Component() {
+  return (
+    <>
+      <List ordered>
+        <List.Item>At least 10 characters (and up to 100 characters)</List.Item>
+        <List.Item>At least one lowercase character</List.Item>
+        <List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
+      </List>
+    </>
+  );
+}
+`;
+
+const codeRSC = `
+import { List, ListItem } from 'flowbite-react';
+
+function Component() {
+  return (
+    <>
+      <List ordered>
+        <ListItem>At least 10 characters (and up to 100 characters)</ListItem>
+        <ListItem>At least one lowercase character</ListItem>
+        <ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
+      </List>
+    </>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <>
+      <List ordered>
+        <ListItem>At least 10 characters (and up to 100 characters)</ListItem>
+        <ListItem>At least one lowercase character</ListItem>
+        <ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
+      </List>
+    </>
+  );
+}
+
+export const ordered: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'list/list.ordered.tsx',
+  component: <Component />,
+};

examples/list/list.root.tsx

@@ -0,0 +1,66 @@
+import { type CodeData } from '~/components/code-demo';
+import { List, ListItem } from '~/src';
+
+const code = `
+'use client';
+
+import { List } from 'flowbite-react';
+
+function Component() {
+  return (
+    <>
+      <List>
+        <List.Item>At least 10 characters (and up to 100 characters)</List.Item>
+        <List.Item>At least one lowercase character</List.Item>
+        <List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
+      </List>
+    </>
+  );
+}
+`;
+
+const codeRSC = `
+import { List, ListItem } from 'flowbite-react';
+
+function Component() {
+  return (
+    <>
+      <List>
+        <ListItem>At least 10 characters (and up to 100 characters)</ListItem>
+        <ListItem>At least one lowercase character</ListItem>
+        <ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
+      </List>
+    </>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <>
+      <List>
+        <ListItem>At least 10 characters (and up to 100 characters)</ListItem>
+        <ListItem>At least one lowercase character</ListItem>
+        <ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
+      </List>
+    </>
+  );
+}
+
+export const root: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'list/list.root.tsx',
+  component: <Component />,
+};

examples/list/list.unstyled.tsx

@@ -0,0 +1,66 @@
+import { type CodeData } from '~/components/code-demo';
+import { List, ListItem } from '~/src';
+
+const code = `
+'use client';
+
+import { List } from 'flowbite-react';
+
+function Component() {
+  return (
+    <>
+      <List unstyled>
+        <List.Item>At least 10 characters (and up to 100 characters)</List.Item>
+        <List.Item>At least one lowercase character</List.Item>
+        <List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
+      </List>
+    </>
+  );
+}
+`;
+
+const codeRSC = `
+import { List, ListItem } from 'flowbite-react';
+
+function Component() {
+  return (
+    <>
+      <List unstyled>
+        <ListItem>At least 10 characters (and up to 100 characters)</ListItem>
+        <ListItem>At least one lowercase character</ListItem>
+        <ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
+      </List>
+    </>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <>
+      <List unstyled>
+        <ListItem>At least 10 characters (and up to 100 characters)</ListItem>
+        <ListItem>At least one lowercase character</ListItem>
+        <ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
+      </List>
+    </>
+  );
+}
+
+export const unstyled: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'list/list.unstyled.tsx',
+  component: <Component />,
+};