Feat/complete proto

ui-proto/checkbox/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@atls-ui-proto/checkbox",
+  "version": "0.0.1",
+  "license": "BSD-3-Clause",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "@atls-ui-parts/checkbox": "workspace:0.0.5",
+    "@atls-ui-parts/conditional-render": "workspace:0.0.3",
+    "@atls-ui-parts/hidden-input": "workspace:0.0.5",
+    "@atls-ui-proto/layout": "workspace:0.0.5",
+    "styled-system": "^5.1.5",
+    "styled-tools": "^1.7.2"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "react": "^17.0.2"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "react": "^17.0.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts"
+  }
+}

ui-proto/checkbox/src/checkbox.component.tsx

@@ -0,0 +1,74 @@
+import styled                      from '@emotion/styled'
+
+import React                       from 'react'
+import { useMemo }                 from 'react'
+import { forwardRef }              from 'react'
+import { styleFn }                 from 'styled-system'
+import { ifProp }                  from 'styled-tools'
+
+import { ConditionalRender }       from '@atls-ui-parts/conditional-render'
+import { HiddenInput }             from '@atls-ui-parts/hidden-input'
+
+import { boxBaseStyles }           from './checkbox.styles'
+import { boxShapeStyles }          from './checkbox.styles'
+import { boxAppearanceStyles }     from './checkbox.styles'
+import { checkAppearanceStyles }   from './checkbox.styles'
+import { checkShapeStyles }        from './checkbox.styles'
+import { checkBaseStyles }         from './checkbox.styles'
+import { labelAppearanceStyles }   from './checkbox.styles'
+import { labelShapeStyles }        from './checkbox.styles'
+import { labelPositionStyles }     from './checkbox.styles'
+import { containerPositionStyles } from './checkbox.styles'
+import { containerBaseStyles }     from './checkbox.styles'
+
+const CheckboxWithoutRef = (
+  { onCheck, children, active, labelPosition = 'end', ...props },
+  ref
+) => {
+  const createCheckCheckedStyles = (): styleFn =>
+    ifProp(
+      'active',
+      {
+        display: 'block',
+      },
+      { display: 'none' }
+    )
+
+  const Box = useMemo(() => styled.div(boxBaseStyles, boxShapeStyles, boxAppearanceStyles), [])
+
+  const Check = useMemo(
+    () =>
+      styled.div(
+        checkBaseStyles,
+        checkShapeStyles,
+        checkAppearanceStyles,
+        createCheckCheckedStyles()
+      ),
+    []
+  )
+
+  const Label = useMemo(
+    () => styled(ConditionalRender())(labelPositionStyles, labelShapeStyles, labelAppearanceStyles),
+    []
+  )
+
+  const Container = useMemo(() => styled.div(containerBaseStyles, containerPositionStyles), [])
+
+  return (
+    <Container labelPosition={labelPosition} onClick={() => onCheck(!active)} {...props}>
+      <HiddenInput
+        type='checkbox'
+        checked={active}
+        onChange={(event) => onCheck(event.currentTarget.checked)}
+      />
+      <Box checked={active} {...props}>
+        <Check active={active}>svg</Check>
+      </Box>
+      <Label position={labelPosition}>{children}</Label>
+    </Container>
+  )
+}
+
+const Checkbox = forwardRef(CheckboxWithoutRef)
+
+export { Checkbox }

ui-proto/checkbox/src/checkbox.stories.tsx

@@ -0,0 +1,63 @@
+import React                             from 'react'
+import { useState }                      from 'react'
+
+import { Checkbox as CheckboxComponent } from './checkbox.component'
+
+export default { title: 'Components/Checkbox' }
+
+export const Checkbox = (props) => {
+  const [active, setActive] = useState<boolean>(false)
+
+  return <CheckboxComponent active={active} onCheck={setActive} {...props} />
+}
+
+Checkbox.args = {
+  variant: 'primary',
+  size: 'normal',
+  children: 'Label',
+}
+
+Checkbox.argTypes = {
+  variant: {
+    name: 'Вариант',
+    table: {
+      category: 'Представление',
+    },
+    control: {
+      type: 'radio',
+      options: ['primary', 'secondary'],
+    },
+  },
+  size: {
+    name: 'Размер',
+    table: {
+      category: 'Форма',
+    },
+    control: {
+      type: 'radio',
+      options: ['normal', 'large'],
+    },
+  },
+  labelPosition: {
+    name: 'Положение текста',
+    description: 'Положение текста',
+    table: {
+      category: 'Модификаторы',
+      subcategory: 'Контент',
+    },
+    control: {
+      type: 'inline-radio',
+      options: ['end', 'start', 'top', 'bottom'],
+    },
+  },
+  children: {
+    name: 'Текст',
+    table: {
+      category: 'Модификаторы',
+      subcategory: 'Контент',
+    },
+    control: {
+      type: 'text',
+    },
+  },
+}

ui-proto/checkbox/src/checkbox.styles.ts

@@ -0,0 +1,89 @@
+import { switchProp }                    from 'styled-tools'
+import { prop }                          from 'styled-tools'
+
+import { createBoxBaseStyles }           from '@atls-ui-parts/checkbox'
+import { createBoxShapeStyles }          from '@atls-ui-parts/checkbox'
+import { createBoxAppearanceStyles }     from '@atls-ui-parts/checkbox'
+import { createCheckBaseStyles }         from '@atls-ui-parts/checkbox'
+import { createCheckAppearanceStyles }   from '@atls-ui-parts/checkbox'
+import { createCheckShapeStyles }        from '@atls-ui-parts/checkbox'
+import { createContainerBaseStyles }     from '@atls-ui-parts/checkbox'
+import { createContainerPositionStyles } from '@atls-ui-parts/checkbox'
+import { createLabelAppearanceStyles }   from '@atls-ui-parts/checkbox'
+import { createLabelShapeStyles }        from '@atls-ui-parts/checkbox'
+import { createLabelPositionStyles }     from '@atls-ui-parts/checkbox'
+
+export const boxBaseStyles = createBoxBaseStyles()
+
+export const boxNormalShapeStyles = createBoxShapeStyles({
+  size: 30,
+  borderWidth: 1,
+  borderRadius: 7,
+})
+export const boxLargeShapeStyles = createBoxShapeStyles({
+  size: 40,
+  borderWidth: 1,
+  borderRadius: 10,
+})
+
+export const boxPrimaryAppearanceStyles = createBoxAppearanceStyles({
+  borderColor: 'blue',
+  backgroundColor: 'white',
+})
+export const boxSecondaryAppearanceStyles = createBoxAppearanceStyles({
+  borderColor: 'red',
+  backgroundColor: 'black',
+})
+
+export const boxAppearanceStyles = switchProp(prop('variant', 'primary'), {
+  primary: boxPrimaryAppearanceStyles,
+  secondary: boxSecondaryAppearanceStyles,
+})
+export const boxShapeStyles = switchProp(prop('size', 'normal'), {
+  normal: boxNormalShapeStyles,
+  large: boxLargeShapeStyles,
+})
+
+export const checkBaseStyles = createCheckBaseStyles()
+
+export const checkNormalShapeStyles = createCheckShapeStyles({
+  size: 20,
+  borderRadius: 10,
+})
+export const checkLargeShapeStyles = createCheckShapeStyles({
+  size: 30,
+  borderRadius: 15,
+})
+
+export const checkPrimaryAppearanceStyles = createCheckAppearanceStyles({
+  color: 'black',
+  backgroundColor: 'white',
+})
+export const checkSecondaryAppearanceStyles = createCheckAppearanceStyles({
+  color: 'white',
+  backgroundColor: 'black',
+})
+
+export const checkAppearanceStyles = switchProp(prop('variant', 'primary'), {
+  primary: checkPrimaryAppearanceStyles,
+  secondary: checkSecondaryAppearanceStyles,
+})
+export const checkShapeStyles = switchProp(prop('size', 'normal'), {
+  normal: checkNormalShapeStyles,
+  large: checkLargeShapeStyles,
+})
+
+export const containerBaseStyles = createContainerBaseStyles()
+export const containerPositionStyles = createContainerPositionStyles()
+
+export const labelPositionStyles = createLabelPositionStyles({
+  margin: '7px',
+})
+export const labelShapeStyles = createLabelShapeStyles({
+  fontSize: 14,
+  fontWeight: 400,
+  fontFamily: 'Gordita, sans-serif',
+})
+export const labelAppearanceStyles = createLabelAppearanceStyles({
+  fontColor: 'black',
+})

ui-proto/checkbox/src/index.ts

@@ -0,0 +1,2 @@
+export * from './checkbox.component'
+export * from './checkbox.styles'

ui-proto/image/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@atls-ui-proto/image",
+  "version": "0.0.1",
+  "license": "BSD-3-Clause",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "@atls-ui-parts/image": "workspace:0.0.3"
+  },
+  "devDependencies": {
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.12",
+    "@types/styled-system": "^5.1.15",
+    "react": "^18.1.0",
+    "styled-system": "^5.1.5",
+    "styled-tools": "^1.7.2"
+  },
+  "peerDependencies": {
+    "@emotion/styled": "^11.1.5",
+    "react": "^17.0.1",
+    "styled-system": "^5.1.5",
+    "styled-tools": "^1.7.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts"
+  }
+}

ui-proto/image/src/index.ts

@@ -0,0 +1 @@
+export * from '@atls-ui-parts/image'

ui-proto/progress/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@atls-ui-proto/progress",
+  "version": "0.0.1",
+  "license": "BSD-3-Clause",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "@atls-ui-parts/progress": "workspace:0.0.10"
+  },
+  "devDependencies": {
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.12",
+    "@types/styled-system": "^5.1.15",
+    "react": "^18.1.0",
+    "styled-system": "^5.1.5",
+    "styled-tools": "^1.7.2"
+  },
+  "peerDependencies": {
+    "@emotion/styled": "^11.1.5",
+    "react": "^17.0.1",
+    "styled-system": "^5.1.5",
+    "styled-tools": "^1.7.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts"
+  }
+}

ui-proto/progress/src/index.ts

@@ -0,0 +1 @@
+export * from '@atls-ui-parts/progress'

ui-proto/upload/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@atls-ui-proto/upload",
+  "version": "0.0.1",
+  "license": "BSD-3-Clause",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "@atls-ui-parts/upload": "workspace:0.0.6"
+  },
+  "devDependencies": {
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.12",
+    "@types/styled-system": "^5.1.15",
+    "react": "^18.1.0",
+    "styled-system": "^5.1.5",
+    "styled-tools": "^1.7.2"
+  },
+  "peerDependencies": {
+    "@emotion/styled": "^11.1.5",
+    "react": "^17.0.1",
+    "styled-system": "^5.1.5",
+    "styled-tools": "^1.7.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts"
+  }
+}

ui-proto/upload/src/index.ts

@@ -0,0 +1 @@
+export * from '@atls-ui-parts/upload'