@clement_lores/admin-design-system 1.0.0

package/src/atoms/typography/small-text.ts

@@ -0,0 +1,15 @@
+import { TypographyProps, SpaceProps } from 'styled-system'
+import { styled } from '@styled-components'
+
+import themeGet from '../../utils/theme-get.js'
+import CaptionShared from './caption-shared.js'
+
+export const SmallText = styled('div')<TypographyProps & SpaceProps>`
+  ${CaptionShared};
+  font-size: ${themeGet('fontSizes', 'xs')};
+  line-height: ${themeGet('lineHeights', 'sm')};
+`
+
+SmallText.displayName = 'SmallText'
+
+export default SmallText

package/src/atoms/typography/title.ts

@@ -0,0 +1,15 @@
+import { TypographyProps, SpaceProps } from 'styled-system'
+import { styled } from '@styled-components'
+
+import themeGet from '../../utils/theme-get.js'
+import CaptionShared from './caption-shared.js'
+
+export const Title = styled('div')<TypographyProps & SpaceProps>`
+  ${CaptionShared};
+  font-size: ${themeGet('fontSizes', 'md')};
+  line-height: ${themeGet('lineHeights', 'lg')};
+`
+
+Title.displayName = 'Title'
+
+export default Title

package/src/atoms/typography/typography.stories.tsx

@@ -0,0 +1,259 @@
+import { StoryObj, Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { Button } from '../button/index.js'
+import { Box, Text } from '../index.js'
+import { Caption, CardTitle, H1, H2, H3, H4, H5, Header, SmallText } from './index.js'
+
+const BoxWithPaddings = Box
+
+export const Headers: StoryFn = () => (
+  <StoryWrapper label="Headers with paddings">
+    <BoxWithPaddings bg="white">
+      <div style={{ height: 0, opacity: 0 }}>div</div>
+      <Header.H1>H1 Header - 40</Header.H1>
+      <Text variant="sm" mb={5}>
+        Roboto 40 - line height - 40
+      </Text>
+      <Header.H2>H2 Header - 32</Header.H2>
+      <Text variant="sm" mb={5}>
+        Roboto 32 - line height - 40
+      </Text>
+      <Header.H3>H3 Header - 28</Header.H3>
+      <Text variant="sm" mb={5}>
+        Roboto 28 - line height - 32
+      </Text>
+      <Header.H4>H4 Header - 24</Header.H4>
+      <Text variant="sm" mb={5}>
+        Roboto 24 - line height - 32
+      </Text>
+      <Header.H5>H5 Header - 18</Header.H5>
+      <Text variant="sm" mb={5}>
+        Roboto 18 - line height - 24
+      </Text>
+      <Header.H6>H6 Header - 16</Header.H6>
+      <Text variant="sm" mb={5}>
+        Roboto 16 - line height - 24
+      </Text>
+    </BoxWithPaddings>
+  </StoryWrapper>
+)
+
+export const TextExample: StoryObj = {
+  render: (props) => (
+    <StoryWrapper label="Example Text container">
+      <Text {...props}>
+        Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur tantas regiones
+        barbarorum pedibus obiit, tot maria transmisit? Est enim effectrix multarum et magnarum
+        voluptatum. Omnia contraria, quos etiam insanos esse vultis. Quid, de quo nulla dissensio
+        est? Egone quaeris, inquit, quid sentiam? Duo Reges: constructio interrete. Sed in rebus
+        apertissimis nimium longi sumus.
+        <Button as="a">Button inside the text</Button>
+      </Text>
+    </StoryWrapper>
+  ),
+}
+
+export const ContentExample: StoryFn = () => (
+  <StoryWrapper label="Example styled content inside Text component">
+    <Box p="x4">
+      <Text>
+        <h1>Hello World</h1>
+        <h2>Some header 2</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices
+          eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate
+          semper dui. Fusce erat odio, sollicitudin vel erat vel interdum mattis neque.
+        </p>
+        <ol>
+          <li>interdum mattis neque.</li>
+        </ol>
+        <h2>Second level</h2>
+        <p>
+          Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque
+          condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus
+          venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at
+          dignissim dui. Ut et neque nisl.
+        </p>
+        <ul>
+          <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+          <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+          <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+          <li>Ut non enim metus.</li>
+        </ul>
+        <blockquote>And here it comes - the quote</blockquote>
+        <h5>Header H5</h5>
+        <pre>
+          const a = 1;{'\n'}
+          const b = 0;
+        </pre>
+        <p>And below there is a Table</p>
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Surname</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Wojtek</td>
+              <td>Krysiak</td>
+            </tr>
+            <tr>
+              <td>Joseph</td>
+              <td>Grad</td>
+            </tr>
+          </tbody>
+        </table>
+        <p>text goes on...</p>
+      </Text>
+    </Box>
+  </StoryWrapper>
+)
+
+export const Example: StoryFn = () => (
+  <StoryWrapper label="Example content page">
+    <Box p="x4" bg="white">
+      <H1>H1. Nam de isto magna dissensio est.</H1>
+      <H2>H2. Sed in rebus apertissimis nimium</H2>
+      <Text>
+        Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur tantas regiones
+        barbarorum pedibus obiit, tot maria transmisit? Est enim effectrix multarum et magnarum
+        voluptatum. Omnia contraria, quos etiam insanos esse vultis. Quid, de quo nulla dissensio
+        est? Egone quaeris, inquit, quid sentiam? Duo Reges: constructio interrete. Sed in rebus
+        apertissimis nimium longi sumus.
+      </Text>
+
+      <Text>
+        Text. Nam et a te perfici istam disputationem volo, nec tua mihi oratio longa videri potest.
+        Beatus autem esse in maximarum rerum timore nemo potest. Inquit, respondet: Quia, nisi quod
+        honestum est, nullum est aliud bonum! Non quaero iam verumne sit; Aut, Pylades cum sis,
+        dices te esse Orestem, ut moriare pro amico? Non prorsus, inquit, omnisque, qui sine dolore
+        sint, in voluptate, et ea quidem summa, esse dico. Addidisti ad extremum etiam indoctum
+        fuisse. Apparet statim, quae sint officia, quae actiones. Hi autem ponunt illi quidem prima
+        naturae, sed ea seiungunt a finibus et a summa bonorum;
+      </Text>
+
+      <H3>H3. Vitae autem degendae ratio maxime quidem illis placuit quieta.</H3>
+
+      <Text>
+        Text. Hanc se tuus Epicurus omnino ignorare dicit quam aut qualem esse velint qui honestate
+        summum bonum metiantur. Idem iste, inquam, de voluptate quid sentit? Quid interest, nisi
+        quod ego res notas notis verbis appello, illi nomina nova quaerunt, quibus idem dicant? Etsi
+        ea quidem, quae adhuc dixisti,
+      </Text>
+
+      <H4>H4. quae senserit ille, tibi non vera videantur.</H4>
+      <Text>
+        quam dicat Epicurus voluptatem. Iubet igitur nos Pythius Apollo noscere nosmet ipsos. Dicam,
+        inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim.
+      </Text>
+      <H4>H4. Dicam, inquam, et quidem discendi causa magis.</H4>
+      <Text>
+        quamvis ad aetatem recte isto modo dicerentur. In quibus doctissimi illi veteres inesse
+        quiddam caeleste et divinum putaverunt. Nam illud quidem adduci vix possum, ut ea, Nihil
+        enim iam habes, quod ad corpus referas; Itaque hoc frequenter dici solet a vobis, non
+        intellegere nos,
+      </Text>
+      <Text>
+        Text. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Quarum ambarum rerum
+        cum medicinam pollicetur, luxuriae licentiam pollicetur. Obscura, inquit, quaedam esse
+        confiteor, nec tamen ab illis ita dicuntur de industria, sed inest in rebus ipsis
+        obscuritas. Cuius similitudine perspecta in formarum specie ac dignitate transitum est ad
+        honestatem dictorum atque factorum. Atque ut a corpore ordiar,
+      </Text>
+      <H5>H5. Mortuus. Quae cum magnifice primo</H5>
+      <Text>
+        Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Deinde disputat,
+      </Text>
+      <H5>H5. Honestate summum bonum metiantur</H5>
+      <Text>
+        quod cuiusque generis animantium statui deceat extremum. Ita multo sanguine profuso in
+      </Text>
+      <H5>H5. In alia summum bonum ponere? Cum </H5>
+      <Text>
+        laetitia et in victoria est mortuus. Quae cum magnifice primo dici viderentur, considerata
+      </Text>
+      <Text>
+        minus probabantur. Hanc se tuus Epicurus omnino ignorare dicit quam aut qualem esse velint
+        qui honestate summum bonum metiantur. Qui igitur convenit ab alia voluptate dicere naturam
+        proficisci, in alia summum bonum ponere? Cum sciret confestim esse moriendum eamque mortem
+      </Text>
+      <Text>ardentiore studio peteret, quam Epicurus voluptatem petendam putat.</Text>
+
+      <Text>
+        Text. Sed tu istuc dixti bene Latine, parum plane. His similes sunt omnes, qui virtuti
+        studentlevantur vitiis, levantur erroribus, nisi forte censes Ti. Verum hoc loco sumo verbis
+        his eandem certe vim voluptatis Epicurum nosse quam ceteros. An dubium est, quin virtus ita
+        maximam partem optineat in rebus humanis, ut reliquas obruat? Quo studio Aristophanem
+        putamus aetatem in litteris duxisse? Vides igitur te aut ea sumere, quae non concedantur,
+        aut ea, quae etiam concessa te nihil iuvent.
+      </Text>
+
+      <H2>H2. Audeo dicere, inquit.</H2>
+
+      <Text>
+        Text. Nulla profecto est, quin suam vim retineat a primo ad extremum. Video equidem, inquam,
+        sed tamen iam infici debet iis artibus, quas si, dum est tener, conbiberit, ad maiora veniet
+        paratior. Sed alii dolore moventur, alii cupiditate, iracundia etiam multi effetuntur et,
+        cum in mala scientes inruunt, tum se optime sibi consulere arbitrantur. Hoc igitur
+        quaerentes omnes, et ii, qui quodcumque in mentem veniat aut quodcumque occurrat se sequi
+        dicent, et vos ad naturam revertemini. Et si in ipsa gubernatione neglegentia est navis
+        eversa, maius est peccatum in auro quam in palea. Aut pertinacissimus fueris, si in eo
+        perstiteris ad corpus ea, quae dixi, referri, aut deserueris totam Epicuri voluptatem, si
+        negaveris.
+      </Text>
+
+      <Text>
+        Text. Age, inquies, ista parva sunt. Etiam inchoatum, ut, si iuste depositum reddere in
+        recte factis sit, in officiis ponatur depositum reddere; Haec quo modo conveniant, non sane
+        intellego. At certe gravius.
+      </Text>
+
+      <Text>
+        Text. Istam voluptatem perpetuam quis potest praestare sapienti? Nihil enim arbitror esse
+        magna laude dignum, quod te praetermissurum credam aut mortis aut doloris metu. Et certamen
+        honestum et disputatio splendida! omnis est enim de virtutis dignitate contentio. Consequens
+        enim est et post oritur, ut dixi. Hoc dictum in una re latissime patet, ut in omnibus factis
+        re, non teste moveamur. Nec enim, dum metuit, iustus est, et certe, si metuere destiterit,
+        non erit; Sin laboramus, quis est, qui alienae modum statuat industriae? Cur tantas regiones
+        barbarorum pedibus obiit, tot maria transmisit? Quos quidem dies quem ad modum agatis et in
+        quantam hominum facetorum urbanitatem incurratis, non diconihil opus est litibus-; Ita, quem
+        ad modum in senatu semper est aliquis, qui interpretem postulet, sic, isti nobis cum
+        interprete audiendi sunt.
+      </Text>
+    </Box>
+  </StoryWrapper>
+)
+
+export const CaptionExample: StoryFn = () => (
+  <StoryWrapper label="Captions">
+    <CardTitle>Card Title - 15</CardTitle>
+    <Text variant="sm" mb={5}>
+      Roboto 14 - line height - 40
+    </Text>
+    <Caption>Caption - 12</Caption>
+    <Text variant="sm" mb={5}>
+      Roboto 12 - line height - 16
+    </Text>
+    <SmallText>Small Text - 10</SmallText>
+    <Text variant="sm" mb={5}>
+      Roboto 10 - line height - 12
+    </Text>
+  </StoryWrapper>
+)
+
+const meta: Meta<typeof Text> = {
+  title: 'DesignSystem/Atoms/Typography',
+  component: Text,
+  args: {
+    variant: 'lg',
+  },
+  argTypes: {
+    variant: { options: ['xs', 'sm', 'lg'], control: { type: 'select' } },
+  },
+}
+
+export default meta

package/src/constants.ts

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export const DEFAULT_DRAWER_WIDTH = '500px'

package/src/global.ts

@@ -0,0 +1,53 @@
+import { createGlobalStyle } from '@styled-components'
+
+// eslint-disable-next-line import/prefer-default-export
+export const GlobalStyle = createGlobalStyle`
+  /* http://meyerweb.com/eric/tools/css/reset/ 
+    v2.0 | 20110126
+    License: none (public domain)
+  */
+
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed, 
+  figure, figcaption, footer, header, hgroup, 
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article, aside, details, figcaption, figure, 
+  footer, header, hgroup, menu, nav, section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol, ul {
+    list-style: none;
+  }
+  blockquote, q {
+    quotes: none;
+  }
+  blockquote:before, blockquote:after,
+  q:before, q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+`

package/src/hooks/use-window-size.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react'
+
+export type WindowSize = {
+  width: number,
+  height: number,
+}
+
+const useWindowSize = (): WindowSize | null => {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState<WindowSize | null>()
+
+  useEffect(() => {
+    // Handler to call on window resize
+    const handleResize = () => {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+
+    // Add event listener
+    window.addEventListener('resize', handleResize)
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize()
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleResize)
+  }, []) // Empty array ensures that effect is only run on mount
+
+  return windowSize || null
+}
+
+export default useWindowSize

package/src/index.doc.md

@@ -0,0 +1,133 @@
+This package consists of all DesignSystem components from [AdminJS](adminjs.co) so you can
+use all of them outside the `adminjs` core.
+
+## Installation outside the AdminJS
+
+```bash
+yarn add styled-components @adminjs/design-system
+```
+
+Optionally, if you use typescript, you might want to install types for `styled-components`
+
+```bash
+yarn add --dev @types/styled-components
+```
+
+Design System needs a `theme` so to use it you have to use `ThemeProvider` from
+`styled-components` like this:
+
+```javascript
+import { ThemeProvider } from 'styled-components'
+
+// theme is the default theme, which you can alter
+import { theme, Button, Box, Icon, Reset } from '@adminjs/design-system'
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Reset />
+      <Box variant="grey">
+        <Button><Icon icon="Plus" />Click Me</Button>
+        <Button variant='primary' ml="xl">I am important</Button>
+      </Box>
+    </ThemeProvider>
+  );
+}
+
+ export default App;
+ ```
+
+ `Reset` resets all the default browser styles.
+
+ ## Changing the theme
+
+ The Design System provides you with the default [theme](https://adminjs.co/Theme.html).
+ It contains all the parameters like paddings, colors, font, sizes etc. For the list of all
+ available parameters take a look at the [Theme spec](https://adminjs.co/Theme.html).
+
+ But nothing stands in a way for you to change the default theme. To do that
+ you can use the `combineStyles` method:
+
+ ```jsx
+ import { combineStyles } from '@adminjs/design-system`
+
+ const myTheme = combineStyles({
+   colors: {
+     primary100: '#000'
+   }
+ })
+
+ //....
+ <ThemeProvider theme={myTheme}>
+ //....
+ ```
+
+## Global style and the font
+
+The main font for the design system is "Roboto". The Default version in OS might not have all the
+font-weights. That is why you should import it in your head:
+
+ ```html
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"></link>
+ ```
+
+ ## Changing particular components
+
+ Sometimes you might want to change the look and feel of a particular component -
+ not the entire theme. You can achieve that with the `styled` method:
+
+ ```jsx
+ import { Button } from '@adminjs/design-system'
+ import styled from 'styled-components'
+
+ const MyRoundedButton = styled(Button)`
+   border-radius: 10px;
+ `
+ ```
+
+ and then you can use it like a normal button component:
+
+ ```jsx
+ <MyRoundedButton variant="primary">Rounded I am</MyRoundedButton>
+ ```
+
+ ## Components
+
+ All the components were placed in the sidebar. They are divided to Atoms, Molecules and Organisms.
+
+ ## Bundled packages
+
+ This npm package comes with the bundled versions as well. You can find them under:
+
+ - `node_modules/@adminjs/design-system/bundle.development.js`
+ - `node_modules/@adminjs/design-system/bundle.production.js` (minified)
+
+ (they can also be bundled by using `bundle`
+ script: `yarn bundle` or `NODE_ENV=production yarn bundle`)
+
+ In order to use them you will have to host them (put to your 'public' folder) and then put them
+ into the HEAD of your page:
+
+ ```html
+ <head>
+ <!-- ... -->
+ <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/5.1.1/styled-components.js"></script>
+ <script crossorigin src="/bundle.development.js"></script>
+ <!-- ... -->
+ </head>
+ ```
+
+ ## Contribute
+
+ If you find any UI errors - feel free to create a PR.
+
+ ## Storybook
+
+ Inside the repository, there is a storybook folder containing all the stories.
+ To run it go inside and:
+
+ ```bash
+ yarn install
+ yarn storybook
+ ```

package/src/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @module @adminjs/design-system
+ * @section design-system
+ *
+ * @load .index.doc.md
+ */
+
+import * as theme from './theme.js'
+
+export { theme }
+
+export * from './atoms/index.js'
+export * from './molecules/index.js'
+export * from './organisms/index.js'
+
+export * from './constants.js'
+export * from './global.js'
+export * from './theme.js'
+export * from './utils/index.js'
+export type { Theme, ThemeOverride } from './utils/default-theme.interface.js'

package/src/molecules/date-picker/date-picker.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+
+import { Box } from '../../index.js'
+import { DatePicker, DatePickerProps } from './index.js'
+
+const propertyTypes = {
+  Date: 'date',
+  DateTime: 'datetime',
+}
+
+export const Default: StoryObj<DatePickerProps> = {
+  render: (props) => {
+    const [date, setDate] = useState<string | null>('2020-12-01T14:32:00.000Z')
+    const { disabled, propertyType } = props
+
+    const handleChange = (value) => {
+      if (value) setDate(value)
+      else setDate(null)
+    }
+
+    return (
+      <Box height="320px">
+        <DatePicker
+          onChange={handleChange}
+          value={date ?? ''}
+          disabled={disabled}
+          propertyType={propertyType}
+        />
+      </Box>
+    )
+  },
+}
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'DesignSystem/Molecules/DatePicker',
+  component: DatePicker,
+  args: {
+    disabled: false,
+    propertyType: propertyTypes.Date,
+  },
+  argTypes: {
+    disabled: { control: { type: 'boolean' } },
+    propertyType: { options: propertyTypes, control: { type: 'select' } },
+  },
+}
+
+export default meta